{{-- PARENT ALPINE DATA TO SHARE STATE BETWEEN COUNTRY AND PROVINCE --}}
<form method="GET" action="{{ route('see-salary') }}" autocomplete="off"
  x-data="{ 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            selectedCountry: '{{ request('location') }}',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            selectedState: '{{ request('state') }}',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            selectedCity: '{{ request('city') }}'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }">
  <div class="space-y-5">



  <div class="relative">
    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Job
      Title
      <span class="text-red-700">*</span></label>

    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors">
      <svg class="w-4 h-4 mr-2 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 onblur="setTimeout(()=>{$('#job-suggestions').addClass('hidden')},1000)" type="text" name="job_title"
        id="job_title" autocomplete="false"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 placeholder:text-gray-400 border-0 focus:ring-0"
        placeholder="Search roles..." value="{{ $jobTitle ?? '' }}" required />
    </div>

    {{-- Suggestions List --}}
    <ul id="job-suggestions" onblur="this.addClass('hidden')"
      class="absolute left-0 right-0 z-50 border border-gray-200 mt-1 rounded-lg max-h-60 overflow-y-auto hidden bg-white shadow-xl">
    </ul>
  </div>

  {{-- COUNTRY INPUT --}}
  <div class="relative"
    x-data="{ 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        open: false, 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                countries: {{ json_encode($countries) }},
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                get filteredCountries() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    return this.selectedCountry === '' ? this.countries : this.countries.filter(c => c.toLowerCase().includes(this.selectedCountry.toLowerCase()))
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                selectCountry(c) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.selectedCountry = c;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.open = false;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    // Reset state when country changes
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.selectedState = ''; 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    $dispatch('country-changed', c);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }"
    @click.away="open = false">
    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Country</label>
    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors">
      <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <input type="text" required name="location" x-model="selectedCountry" @focus="open = true" @input="open = true"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 placeholder:text-gray-400 border-0 focus:ring-0"
        placeholder="Select country..." autocomplete="off" />
    </div>
    <ul x-show="open"
      class="absolute left-0 right-0 border border-gray-100 mt-1 rounded-lg max-h-60 overflow-auto bg-white shadow-xl z-50 py-1"
      style="display: none;" x-transition.opacity>
      <template x-for="country in filteredCountries" :key="country">
        <li @click="selectCountry(country)"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2F3D7E] cursor-pointer" x-text="country">
        </li>
      </template>
    </ul>
  </div>

  {{-- STATE / PROVINCE INPUT --}}
  <div class="relative"
    x-data="{ 
                                        open: false, 
                                        states: [], 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                isLoading: false,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                fetchStates(country) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    if(!country) return;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.isLoading = true;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    fetch('/states/' + encodeURIComponent(country))
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        .then(res => res.json())
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        .then(data => {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            this.states = Array.isArray(data) ? data : (data.data || []);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            this.isLoading = false;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        })
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        .catch(() => { this.isLoading = false; this.states = []; });
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                selectState(s) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.selectedState = s;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      this.selectedCity = '';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.open = false;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    $dispatch('state-changed', s); // Trigger city fetch
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                get filteredStates() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    return this.selectedState === '' ? this.states.map(s => s.name || s) : this.states.map(s => s.name || s).filter(s => s.toLowerCase().includes(this.selectedState.toLowerCase()))
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                init() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    if(this.selectedCountry) this.fetchStates(this.selectedCountry);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }"
    @country-changed.window="fetchStates($event.detail)" @click.away="open = false">
    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">State
      /
      Province</label>
    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors"
      :class="!selectedCountry ? 'opacity-50 cursor-not-allowed' : ''">
      <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
      <input type="text" name="state" x-model="selectedState" @focus="open = true" @input="open = true"
        :disabled="!selectedCountry"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 placeholder:text-gray-400 border-0 focus:ring-0 disabled:cursor-not-allowed"
        placeholder="All States or Province" autocomplete="off" />
    </div>
    <ul x-show="open && selectedCountry"
      class="absolute left-0 right-0 border border-gray-100 mt-1 rounded-lg max-h-60 overflow-auto bg-white shadow-xl z-50 py-1"
      style="display: none;" x-transition.opacity>
      <li x-show="isLoading" class="px-4 py-2 text-xs text-gray-400">Loading states...</li>
      <template x-for="state in filteredStates" :key="state">
        <li @click="selectState(state)"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2F3D7E] cursor-pointer" x-text="state">
        </li>
      </template>
      <li x-show="!isLoading && filteredStates.length === 0" class="px-4 py-2 text-xs text-gray-400 italic">No
        states
        found</li>
    </ul>
  </div>

  {{-- CITY INPUT --}}
  <div class="relative" x-data="{     open: false, 
        cities: [], 
        isLoading: false,
         selectCity(c) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.selectedCity = c;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    this.open = false;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
       , fetchCities(state) {
            if(!this.selectedCountry || !state) return;
            this.isLoading = true;
            fetch('/cities/' + encodeURIComponent(this.selectedCountry) + '/' + encodeURIComponent(state))
                .then(res => res.json())
                .then(data => {
                    // CountriesNow API returns direct list of strings in 'data'
                    this.cities = Array.isArray(data.data) ? data.data : [];
                    this.isLoading = false;
                })
                .catch(() => { this.isLoading = false; this.cities = []; });
        },
        get filteredCities() {
            return this.selectedCity === '' ? this.cities : this.cities.filter(c =>
            c.toLowerCase().includes(this.selectedCity.toLowerCase()))
            },
            init() {
            if(this.selectedCountry && this.selectedState) this.fetchCities(this.selectedState);
            }
            }" @state-changed.window="fetchCities($event.detail)" @click.away="open = false">


    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">City</label>
    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors"
      :class="!selectedCity ? 'opacity-50 cursor-not-allowed' : ''">
      <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5" />
      </svg>
      <input type="text" name="city" x-model="selectedCity" @focus="open = true" @input="open = true"
        :disabled="!selectedState"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 placeholder:text-gray-400 border-0 focus:ring-0 disabled:cursor-not-allowed"
        placeholder="All City" autocomplete="off" />
    </div>
    <ul x-show="open && selectedState"
      class="absolute left-0 right-0 border border-gray-100 mt-1 rounded-lg max-h-60 overflow-auto bg-white shadow-xl z-50 py-1"
      style="display: none;" x-transition.opacity>
      <li x-show="isLoading" class="px-4 py-2 text-xs text-gray-400">Loading cities...</li>
      <template x-for="city in filteredCities" :key="city">
        <li @click="selectCity(city)"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2F3D7E] cursor-pointer" x-text="city">
        </li>
      </template>
      <li x-show="!isLoading && filteredCities.length === 0" class="px-4 py-2 text-xs text-gray-400 italic">No
        cities
        found</li>
    </ul>
  </div>

  {{-- PAY FREQUENCY DROPDOWN --}}
  <div class="relative">
    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">
      Pay Frequency
    </label>
    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors">
      <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <select name="pay_frequency"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 border-0 focus:ring-0 cursor-pointer">
        <option value="annually" {{ request('pay_frequency') == 'annually' ? 'selected' : '' }}>Paid Annually</option>
        <option value="monthly" {{ request('pay_frequency') == 'monthly' ? 'selected' : '' }}>Paid Monthly</option>
        <option value="semi-monthly" {{ request('pay_frequency') == 'semi-monthly' ? 'selected' : '' }}>Paid Semi-Monthly
        </option>
        <option value="biweekly" {{ request('pay_frequency') == 'biweekly' ? 'selected' : '' }}>Paid Biweekly</option>
        <option value="weekly" {{ request('pay_frequency') == 'weekly' ? 'selected' : '' }}>Paid Weekly</option>
        <option value="hourly" {{ request('pay_frequency') == 'hourly' ? 'selected' : '' }}>Paid Hourly</option>
      </select>
    </div>
  </div>

  {{-- CURRENCY INPUT --}}
  <div class="relative">
    <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Currency</label>
    <div
      class="flex items-center px-3 h-11 bg-gray-50 rounded-lg border border-gray-200 focus-within:border-[#2F3D7E] focus-within:bg-white transition-colors">
      <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <select name="currency"
        class="w-full bg-transparent outline-none text-sm font-medium text-gray-900 border-0 focus:ring-0 cursor-pointer">
        {{-- <option value="">All Currencies</option> --}}
        <option value="USD" {{ request('currency') == 'USD' ? 'selected' : '' }}>USD ($)
        </option>
        <option value="EUR" {{ request('currency') == 'EUR' ? 'selected' : '' }}>EUR (€)
        </option>
        <option value="GBP" {{ request('currency') == 'GBP' ? 'selected' : '' }}>GBP (£)
        </option>
        <option value="CHF" {{ request('currency') == 'CHF' ? 'selected' : '' }}>CHF (Fr)
        </option>
        <option value="CAD" {{ request('currency') == 'CAD' ? 'selected' : '' }}>CAD ($)
        </option>
        <option value="AUD" {{ request('currency') == 'AUD' ? 'selected' : '' }}>AUD ($)
        </option>
        {{-- <option value="NGN" {{ request('currency') == 'NGN' ? 'selected' : '' }}>NGN
        (₦)
        </option> --}}
      </select>
    </div>
  </div>



  <div class="pt-2">
    <button type="submit"
      class="w-full flex items-center justify-center h-11 text-sm font-bold bg-[#EEF1F7] hover:bg-[#EEF1F7]/80 text-[#2F3D7E] rounded-lg transition-all">
      Update Results
    </button>
  </div>

  </div>
</form>