{{-- Search Form --}}
<form wire:submit.prevent class="bg-gradient-to-br from-[#f7fbff] via-white to-[#e8f4ff] border border-slate-100 shadow-sm rounded-2xl p-4 md:p-6 space-y-3">
        {{-- Main search row --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
            <input
                type="text"
                wire:model.live.debounce.500ms="keyword"
                placeholder="Search by title, skill, or employer"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            />
            <select
                wire:model.live="country"
                id="country-select"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            >
                <option value="">Any country</option>
                @foreach($countries as $countryOption)
                    <option value="{{ $countryOption }}">{{ $countryOption }}</option>
                @endforeach
            </select>
            <div class="relative">
                <select
                    wire:model.live="state"
                    id="state-select"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
                    @if(empty($country)) disabled @endif
                >
                    <option value="">Any state/province</option>
                    @foreach($states as $stateOption)
                        <option value="{{ $stateOption }}">{{ $stateOption }}</option>
                    @endforeach
                </select>
                @if(empty($country))
                    <div class="pointer-events-none absolute inset-0 rounded-lg bg-white/60 backdrop-blur-[1px] flex items-center justify-center text-[11px] text-slate-500">
                        Select a country to load states
                    </div>
                @endif
            </div>
            <select
                wire:model.live="specialty"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            >
                <option value="">Any specialty</option>
                @foreach($specialties as $specialtyOption)
                    <option value="{{ $specialtyOption }}">{{ $specialtyOption }}</option>
                @endforeach
            </select>
            <button
                type="button"
                disabled
                class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white shadow opacity-60 cursor-not-allowed transition"
            >
                <span wire:loading.remove>Live updating</span>
                <span wire:loading class="inline-flex items-center gap-2">
                    <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Updating...
                </span>
            </button>
        </div>

        {{-- Additional filters row --}}
        <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            <select
                wire:model.live="license"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            >
                <option value="">Any license</option>
                @foreach($licenses as $licenseOption)
                    <option value="{{ $licenseOption }}">{{ $licenseOption }}</option>
                @endforeach
            </select>
            <select
                wire:model.live="work_mode"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            >
                <option value="">Any work mode</option>
                @foreach($workModes as $mode)
                    <option value="{{ $mode }}">{{ $mode }}</option>
                @endforeach
            </select>
            <input
                type="number"
                wire:model.live.debounce.500ms="min_experience"
                placeholder="Max experience years"
                min="0"
                max="30"
                class="rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
            />
            <div class="flex gap-2">
                <input
                    type="number"
                    wire:model.live.debounce.500ms="min_salary"
                    placeholder="Min salary"
                    min="0"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 focus:border-[#1D5BBF] focus:ring-2 focus:ring-[#1D5BBF]/20 transition"
                />
            </div>
        </div>
    </form>

    {{-- Filter Row --}}
    <div class="bg-white border border-slate-100 shadow-sm rounded-2xl p-4 md:p-5 space-y-3">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
            <div class="flex flex-wrap items-center gap-2">
                @php
                    $types = [
                        '' => 'All',
                        'Full-time' => 'Full-time',
                        'Part-time' => 'Part-time',
                        'Contract' => 'Contract',
                        'Travel' => 'Travel',
                        'Per Diem' => 'Per Diem',
                    ];
                @endphp
                @foreach($types as $value => $label)
                    <label class="cursor-pointer employment-type-label">
                        <input type="radio" wire:model.live="employment_type" value="{{ $value }}" class="sr-only employment-type-radio">
                        <span class="employment-type-badge inline-flex items-center px-3 py-1.5 rounded-full border text-xs font-semibold transition
                            {{ ($employment_type === $value || ($value === '' && $employment_type === '')) ? 'bg-[#1D5BBF] text-white border-[#1D5BBF]' : 'bg-slate-50 text-slate-700 border-slate-200 hover:border-[#1D5BBF]/50' }}">
                            {{ $label }}
                        </span>
                    </label>
                @endforeach
            </div>

            <div class="flex flex-wrap gap-3">
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="visa_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Visa sponsorship</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="relocation_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Relocation support</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="housing_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Housing</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="sign_on_bonus_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Sign-on bonus</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="licensure_support_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Licensure support</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="health_insurance_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Health insurance</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="paid_pto_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>Paid PTO</span>
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" wire:model.live="verified_only" value="1" class="h-4 w-4 rounded border-slate-300 text-[#1D5BBF] focus:ring-[#1D5BBF]">
                    <span>✓ Verified only</span>
                </label>
            </div>

            <div class="flex items-center gap-2 lg:ml-auto">
                @if(count($activeFilters) > 0)
                    <button type="button" wire:click="clearFilters" class="text-xs font-semibold text-brand px-3 py-2 rounded-full border border-brand/30 hover:bg-brand/10 transition">
                        Clear filters
                    </button>
                @endif
                <div class="text-xs font-semibold text-white bg-brand px-4 py-2 rounded-full shadow opacity-60 cursor-not-allowed flex items-center gap-2">
                    <span wire:loading.remove>Filters auto-apply</span>
                    <span wire:loading class="inline-flex items-center gap-1">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Updating...
                    </span>
                </div>
            </div>
        </div>

        <div class="text-xs text-slate-600 flex flex-wrap items-center gap-2">
            <span class="font-semibold text-[#1D5BBF]">Showing {{ $jobs->total() }} jobs</span>
            <span class="text-slate-400">•</span>
            <span>Filtered by:</span>
            @if(count($activeFilters) > 0)
                <span class="flex flex-wrap gap-1">
                    @foreach($activeFilters as $tag)
                        <span class="px-2 py-1 rounded-full bg-[#E8F4FF] text-[#1D5BBF] font-semibold">{{ $tag }}</span>
                    @endforeach
                </span>
            @else
                <span class="text-slate-500">All jobs</span>
            @endif
        </div>
    </div>

    {{-- Loading Overlay --}}
    <div wire:loading.delay class="my-6 flex justify-center">
        <div class="inline-flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm">
            <svg class="animate-spin h-5 w-5 text-[#1D5BBF]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-sm font-medium text-gray-700">Searching...</span>
        </div>
    </div>

    {{-- Jobs Grid --}}
    <div wire:loading.remove.delay>
        @if($jobs->count() > 0)
            <div id="jobs-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 items-start auto-rows-min">
                @include('jobs.partials.cards', ['jobs' => $jobs, 'savedJobIds' => $savedJobIds ?? []])
            </div>

            {{-- Numbered pagination (query-string friendly) --}}
            <div class="mt-8 flex flex-col items-center gap-2">
                <div class="text-xs text-slate-500">
                    Showing {{ $jobs->firstItem() ?? 0 }}-{{ $jobs->lastItem() ?? 0 }} of {{ $jobs->total() }}
                </div>
                <div class="w-full flex justify-center">
                    {{ $jobs->links() }}
                </div>
            </div>
        @else
            <div class="bg-white border border-slate-100 shadow-sm rounded-2xl p-8 text-center">
                <p class="text-base font-semibold text-[#2C3E50]">No jobs found</p>
                <p class="text-sm text-slate-600 mt-1">Try adjusting your filters or searching a different keyword.</p>
                <button type="button" wire:click="clearFilters" class="mt-3 inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-white bg-brand rounded-full shadow hover:bg-brand/90 transition">
                    Reset filters
                </button>
            </div>
        @endif
    </div>