@extends('layouts.app')

@section('title', 'TrampoJá — Conexão Imediata com Profissionais')

@section('content')

    {{-- Hero Section --}}
    <section class="min-h-screen relative flex items-center justify-center overflow-hidden">
        {{-- Background --}}
        <div class="absolute inset-0 z-0">
            <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
                alt="Trabalhadores" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-navy-deep/80 via-navy-deep/70 to-navy-deep/90"></div>
        </div>

        {{-- Decorative --}}
        <div class="absolute top-20 right-10 w-72 h-72 bg-gold/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-20 left-10 w-96 h-96 bg-navy/30 rounded-full blur-3xl"></div>

        {{-- Content --}}
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-8 text-center pt-24 pb-16">
            <div
                class="inline-flex items-center gap-2 px-4 py-1.5 pl-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-sm font-semibold text-white mb-8">
                <div class="w-2 h-2 rounded-full bg-gold animate-pulse-dot"></div>
                Conexão Imediata com Profissionais
            </div>

            <h1
                class="font-jakarta text-4xl sm:text-5xl lg:text-7xl font-extrabold leading-[1.1] tracking-tight text-white mb-6">
                Encontre o talento certo<br><span class="text-gold">na hora certa</span>
            </h1>

            <p class="text-lg sm:text-xl text-gray-300 max-w-2xl mx-auto mb-12 leading-relaxed">
                Conectamos empresas a profissionais disponíveis agora. Busque por zona, profissão e disponibilidade — e fale
                direto pelo WhatsApp.
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
                <a href="#buscar"
                    class="flex items-center gap-2 px-8 py-4 font-jakarta text-[15px] font-bold text-navy-deep btn-gold-gradient rounded-lg hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(197,165,90,0.35)] transition-all">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    Buscar professionais para empresa 
                </a>
                
                <a href="{{ route('register.index') }}?tipo=trabalhar"
                    class="flex items-center gap-2 px-8 py-4 font-jakarta text-[15px] font-semibold text-white bg-white/10 backdrop-blur-sm border border-white/30 rounded-lg hover:bg-white/20 transition-all">
                    Cadastre-se como trabalhador
                </a>
            </div>

            <div class="flex flex-wrap items-center justify-center gap-8 sm:gap-16">
                <div class="text-center">
                    <div class="font-jakarta text-4xl sm:text-5xl font-extrabold text-white">
                        <span id="stat-workers">{{ $pagination['total'] ?? 0 }}</span><span class="text-gold">+</span>
                    </div>
                    <div class="text-sm text-gray-400 font-medium mt-1">Profissionais</div>
                </div>
                <div class="text-center">
                    <div class="font-jakarta text-4xl sm:text-5xl font-extrabold text-white">
                        <span id="stat-employers">{{ $employersTotal }}</span><span class="text-gold">+</span>
                    </div>
                    <div class="text-sm text-gray-400 font-medium mt-1">Empresas</div>
                </div>
                <div class="text-center">
                    <div class="font-jakarta text-4xl sm:text-5xl font-extrabold text-white">
                        <span id="stat-zones">{{ $locations->count() }}</span><span class="text-gold"> zonas</span>
                    </div>
                    <div class="text-sm text-gray-400 font-medium mt-1">São Paulo</div>
                </div>
            </div>
        </div>
    </section>

    {{-- Search Section --}}
    <section id="buscar" class="py-20 px-4 sm:px-8 bg-gray-50">
        <div class="max-w-7xl mx-auto">
            <div class="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 shadow-xl">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
                    <div class="flex items-center gap-2.5 font-jakarta text-xl font-bold text-navy">
                        <svg class="w-5 h-5 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        Filtrar Profissionais
                    </div>
                    <div class="text-sm text-gray-400">
                        Mostrando <strong class="text-navy" id="count-showing">{{ $workers->count() }}</strong> de <strong
                            class="text-navy" id="count-total">{{ $pagination['total'] ?? 0 }}</strong> resultados
                    </div>
                </div>

                <form id="filter-form">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 items-end">

                        {{-- Search Input --}}
                        <div class="lg:col-span-2 flex flex-col gap-1.5">
                            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Buscar</span>
                            <div class="relative">
                                <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                                <input type="text" name="search" value="{{ request('search') }}"
                                    placeholder="Nome do profissional..."
                                    class="w-full pl-10 pr-4 py-3 text-sm font-medium text-navy bg-gray-50 border-[1.5px] border-gray-200 rounded-lg focus:outline-none focus:border-gold transition-colors">
                            </div>
                        </div>

                        {{-- Select Zona --}}
                        @include('components.select-filter', [
                            'id' => 'filter-zona',
                            'name' => 'idlocation',
                            'label' => 'Zona',
                            'placeholder' => 'Todas as Zonas',
                            'options' => $locations,
                            'valueKey' => 'idlocation',
                            'labelKey' => 'name',
                            'selected' => request('idlocation', -1),
                        ])

                        {{-- Select Profissão --}}
                        @include('components.select-filter', [
                            'id' => 'filter-profissao',
                            'name' => 'idprofession',
                            'label' => 'Profissão',
                            'placeholder' => 'Todas',
                            'options' => $professions,
                            'valueKey' => 'idprofession',
                            'labelKey' => 'name',
                            'selected' => request('idprofession', -1),
                        ])

                        {{-- Select CNH --}}
                        @include('components.select-filter', [
                            'id' => 'filter-cnh',
                            'name' => 'idcnh',
                            'label' => 'CNH',
                            'placeholder' => 'Qualquer',
                            'options' => $cnhList,
                            'valueKey' => 'idcnh',
                            'labelKey' => 'name',
                            'selected' => request('idcnh', -1),
                        ])

                        {{-- Botón Buscar con animación --}}
                        <button type="submit" id="btn-buscar"
                            class="flex items-center justify-center gap-2 px-6 py-3 font-jakarta text-sm font-bold text-white bg-navy rounded-lg hover:bg-navy-light transition-all h-[46px] disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg id="icon-search" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <svg id="icon-loading" class="w-4 h-4 animate-spin hidden" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            <span id="btn-text">Buscar</span>
                        </button>
                    </div>

                    {{-- Toggle Disponibilidade --}}
                    <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-100">
                        <div class="flex items-center gap-4">
                            <label class="flex items-center gap-3 cursor-pointer select-none">
                                <input type="hidden" name="is_available" id="is_available_input"
                                    value="{{ request('is_available', 0) }}">
                                <button type="button" id="toggle-disponivel" onclick="toggleDisponivel()"
                                    class="relative w-12 h-6 rounded-full transition-colors duration-300 {{ request('is_available', 0) == 0 ? 'bg-green-500' : 'bg-gray-300' }}">
                                    <span id="toggle-dot"
                                        class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-300 {{ request('is_available', 0) == 0 ? 'translate-x-6' : 'translate-x-0' }}"></span>
                                </button>
                                <span id="toggle-label"
                                    class="text-sm font-medium transition-colors {{ request('is_available', 0) == 0 ? 'text-green-600' : 'text-gray-500' }}">
                                    {{ request('is_available', 0) == 0 ? 'Apenas disponíveis agora' : 'Mostrar todos' }}
                                </span>
                            </label>
                        </div>

                        <button type="button" onclick="clearFilters()"
                            class="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-navy transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            Limpar filtros
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    {{-- Results Section --}}
    <section id="resultados" class="py-12 px-4 sm:px-8 bg-gray-50 scroll-mt-24">
        <div class="max-w-7xl mx-auto">
            {{-- Container para contenido AJAX --}}
            <div id="workers-container">
                @include('partials.workers-grid', [
                    'workers' => $workers,
                    'pagination' => $pagination,
                    'isLoggedIn' => auth()->check(),
                ])
            </div>

            {{-- Loading overlay --}}
            <div id="loading-overlay" class="hidden">
                <div class="flex flex-col items-center justify-center py-20">
                    <div class="w-12 h-12 border-4 border-navy border-t-gold rounded-full animate-spin mb-4"></div>
                    <p class="text-gray-500 font-medium">Buscando profissionais...</p>
                </div>
            </div>
        </div>
    </section>

    {{-- How It Works --}}
    <section id="como-funciona" class="py-24 px-4 sm:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-xs font-bold uppercase tracking-[0.15em] text-gold mb-3">Como funciona</div>
            <h2 class="font-jakarta text-3xl sm:text-4xl lg:text-5xl font-extrabold text-navy tracking-tight mb-14">Conexão
                rápida em 3 passos</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div
                    class="p-8 bg-gray-50 border border-gray-200 rounded-xl transition-all hover:shadow-lg hover:-translate-y-1">
                    <div class="font-jakarta text-5xl font-extrabold text-gray-200 mb-4">01</div>
                    <div class="w-14 h-14 bg-navy rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                    <h3 class="font-jakarta text-lg font-bold text-navy mb-2">Busque</h3>
                    <p class="text-sm text-gray-500">Filtre por zona, profissão, CNH e disponibilidade para encontrar
                        exatamente o que precisa.</p>
                </div>

                <div
                    class="p-8 bg-gray-50 border border-gray-200 rounded-xl transition-all hover:shadow-lg hover:-translate-y-1">
                    <div class="font-jakarta text-5xl font-extrabold text-gray-200 mb-4">02</div>
                    <div class="w-14 h-14 bg-navy rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="font-jakarta text-lg font-bold text-navy mb-2">Encontre</h3>
                    <p class="text-sm text-gray-500">Veja os profissionais disponíveis agora, com seus dados e
                        qualificações visíveis.</p>
                </div>

                <div
                    class="p-8 bg-gray-50 border border-gray-200 rounded-xl transition-all hover:shadow-lg hover:-translate-y-1">
                    <div class="font-jakarta text-5xl font-extrabold text-gray-200 mb-4">03</div>
                    <div class="w-14 h-14 bg-navy rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                    </div>
                    <h3 class="font-jakarta text-lg font-bold text-navy mb-2">Conecte</h3>
                    <p class="text-sm text-gray-500">Fale direto pelo WhatsApp. Sem intermediários, sem demora. Conexão
                        imediata.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA + Footer --}}
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
                alt="Construção" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-navy-deep/95 via-navy-deep/90 to-navy-deep"></div>
        </div>

        <div class="absolute top-20 right-10 w-80 h-80 bg-gold/10 rounded-full blur-3xl"></div>

        <div class="relative z-10 pt-24 pb-16 px-4 sm:px-8">
            <div class="max-w-3xl mx-auto text-center">
                <div
                    class="inline-flex items-center gap-2 px-4 py-1.5 pl-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-sm font-semibold text-white mb-8">
                    <svg class="w-4 h-4 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                    </svg>
                    Comece Agora
                </div>

                <h2 class="font-jakarta text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight mb-4">
                    Pronto para encontrar<br><span class="text-gold">seu próximo talento?</span>
                </h2>
                <p class="text-lg text-gray-300 mb-10 max-w-xl mx-auto">
                    Cadastre-se e tenha acesso a profissionais disponíveis na sua região.
                </p>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="{{ route('register.index') }}"
                        class="flex items-center gap-2 px-8 py-4 font-jakarta text-[15px] font-bold text-navy-deep btn-gold-gradient rounded-lg hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(197,165,90,0.35)] transition-all">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        Criar Conta
                    </a>
                    <a href="#buscar"
                        class="flex items-center gap-2 px-8 py-4 font-jakarta text-[15px] font-bold text-white bg-white/10 border border-white/30 rounded-lg hover:bg-white/20 transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        Explorar Talentos
                    </a>
                </div>
            </div>
        </div>

        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-8">
            <div class="h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
        </div>

        <div class="relative z-10 py-8 px-4 sm:px-8">
            <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="flex items-center gap-3">
                    <span class="font-jakarta text-xl font-extrabold text-white">Trampo<span
                            class="text-gold">Já</span></span>
                    <span class="hidden sm:block text-white/30">|</span>
                    <span class="hidden sm:block text-sm text-gray-400">Conexão Imediata</span>
                </div>

                <div class="flex items-center gap-6">
                    <a href="#buscar" class="text-sm text-gray-400 hover:text-white transition-colors">Buscar</a>
                    <a href="#como-funciona" class="text-sm text-gray-400 hover:text-white transition-colors">Como
                        Funciona</a>
                    <button onclick="openLoginModal()"
                        class="text-sm text-gray-400 hover:text-white transition-colors">Entrar</button>
                </div>

                <div class="text-sm text-gray-500">&copy; {{ date('Y') }} TrampoJá. Todos os direitos reservados.
                </div>
            </div>
        </div>
    </section>

@endsection

@push('modals')
    @include('auth.login-modal')
    @include('auth.register-modal')
    @include('components.worker-modal')  {{-- ← agregar esta línea --}}
@endpush

@push('scripts')
    <script>

        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('login') === '1') {
            setTimeout(() => openLoginModal(), 500);
            window.history.replaceState({}, '', window.location.pathname);
        }

        fetch('/api/v1/stats')
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('stat-workers').textContent  = data.workers;
                    document.getElementById('stat-employers').textContent = data.employers;
                    document.getElementById('stat-zones').textContent    = data.zones;
                }
            });
        // Toggle disponibilidad
        function toggleDisponivel() {
            const input = document.getElementById('is_available_input');
            const toggle = document.getElementById('toggle-disponivel');
            const dot = document.getElementById('toggle-dot');
            const label = document.getElementById('toggle-label');

            if (input.value == '0') {
                input.value = '-1';
                toggle.classList.remove('bg-green-500');
                toggle.classList.add('bg-gray-300');
                dot.classList.remove('translate-x-6');
                dot.classList.add('translate-x-0');
                label.classList.remove('text-green-600');
                label.classList.add('text-gray-500');
                label.textContent = 'Mostrar todos';
            } else {
                input.value = '0';
                toggle.classList.remove('bg-gray-300');
                toggle.classList.add('bg-green-500');
                dot.classList.remove('translate-x-0');
                dot.classList.add('translate-x-6');
                label.classList.remove('text-gray-500');
                label.classList.add('text-green-600');
                label.textContent = 'Apenas disponíveis agora';
            }
        }

        // Variables globales
        let currentPage = 1;

        // Función principal para filtrar workers por AJAX
        function filterWorkers(page = 1) {
            currentPage = page;

            const btn = document.getElementById('btn-buscar');
            const iconSearch = document.getElementById('icon-search');
            const iconLoading = document.getElementById('icon-loading');
            const btnText = document.getElementById('btn-text');
            const container = document.getElementById('workers-container');
            const loadingOverlay = document.getElementById('loading-overlay');

            // Obtener valores de los filtros
            const params = new URLSearchParams({
                search: document.querySelector('input[name="search"]').value || '',
                idlocation: document.getElementById('filter-zona').value || -1,
                idprofession: document.getElementById('filter-profissao').value || -1,
                idcnh: document.getElementById('filter-cnh').value || -1,
                is_available: document.getElementById('is_available_input').value || 0,
                page: page,
                per_page: 10
            });

            // Mostrar loading
            btn.disabled = true;
            iconSearch.classList.add('hidden');
            iconLoading.classList.remove('hidden');
            btnText.textContent = 'Buscando...';
            container.classList.add('opacity-50');
            loadingOverlay.classList.remove('hidden');

            // Hacer petición AJAX
            fetch(`{{ route('workers.filter') }}?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Actualizar contenido
                        container.innerHTML = data.html;

                        // Actualizar contadores
                        document.getElementById('count-total').textContent = data.total;
                        document.getElementById('count-showing').textContent = data.pagination ? Math.min(data
                            .pagination.per_page, data.total) : data.total;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                })
                .finally(() => {
                    // Restaurar botón
                    btn.disabled = false;
                    iconSearch.classList.remove('hidden');
                    iconLoading.classList.add('hidden');
                    btnText.textContent = 'Buscar';
                    container.classList.remove('opacity-50');
                    loadingOverlay.classList.add('hidden');
                });
        }

        // Función para cargar página específica
        function loadPage(page) {
            filterWorkers(page);
        }

        // Función para limpiar filtros
        function clearFilters() {
            document.querySelector('input[name="search"]').value = '';
            document.getElementById('filter-zona').value = -1;
            document.getElementById('filter-profissao').value = -1;
            document.getElementById('filter-cnh').value = -1;
            document.getElementById('is_available_input').value = 0;

            // Actualizar toggle visual
            const toggle = document.getElementById('toggle-disponivel');
            const dot = document.getElementById('toggle-dot');
            const label = document.getElementById('toggle-label');
            toggle.classList.remove('bg-gray-300');
            toggle.classList.add('bg-green-500');
            dot.classList.remove('translate-x-0');
            dot.classList.add('translate-x-6');
            label.classList.remove('text-gray-500');
            label.classList.add('text-green-600');
            label.textContent = 'Apenas disponíveis agora';

            filterWorkers(1);
        }

        // Interceptar submit del formulario
        document.getElementById('filter-form').addEventListener('submit', function(e) {
            e.preventDefault();
            filterWorkers(1);
        });
    </script>
@endpush