<div class="space-y-4">
    <!-- Countries -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">
            {{ __('Countries') }}
            <span class="text-xs text-gray-500 font-normal ml-1">({{ __('Hold Ctrl/Cmd for multiple') }})</span>
        </label>
        <select multiple class="block w-full border border-gray-300 rounded-md shadow-sm p-2 h-24 focus:ring-blue-500 focus:border-blue-500"
                wire:model.live="selectedCountries"
                title="{{ __('Hold Ctrl/Cmd to select multiple countries') }}">
            @foreach($countries->sortBy(function ($country) { return $country->translations->first()->name; }) as $country)
                <option value="{{ $country->id }}">
                    {{ $country->flag }} {{ $country->translations->first()->name }}
                </option>
            @endforeach
        </select>
        @if(count($selectedCountries) > 0)
            <p class="text-xs text-gray-500 mt-1">
                {{ __(':count countries selected', ['count' => count($selectedCountries)]) }}
            </p>
        @endif
    </div>

    <!-- Divisions -->
    @if($divisions->count() > 0)
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                {{ __('Divisions / States / Provinces') }}
                <span class="text-xs text-gray-500 font-normal ml-1">({{ __('Hold Ctrl/Cmd for multiple') }})</span>
            </label>
            <select multiple class="block w-full border border-gray-300 rounded-md shadow-sm p-2 h-20 focus:ring-blue-500 focus:border-blue-500"
                    wire:model.live="selectedDivisions"
                    title="{{ __('Hold Ctrl/Cmd to select multiple divisions') }}">
                @foreach($divisions->sortBy(function ($division) { return $division->translations->first()->name; }) as $division)
                    <option value="{{ $division->id }}">
                        {{ $division->translations->first()->name }}
                    </option>
                @endforeach
            </select>
            @if(count($selectedDivisions) > 0)
                <p class="text-xs text-gray-500 mt-1">
                    {{ __(':count divisions selected', ['count' => count($selectedDivisions)]) }}
                </p>
            @endif
        </div>
    @endif

    <!-- Cities -->
    @if($cities->count() > 0)
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                {{ __('Cities') }}
                <span class="text-xs text-gray-500 font-normal ml-1">({{ __('Hold Ctrl/Cmd for multiple') }})</span>
            </label>
            <select multiple class="block w-full border border-gray-300 rounded-md shadow-sm p-2 h-32 focus:ring-blue-500 focus:border-blue-500"
                    wire:model.live="selectedCities"
                    title="{{ __('Hold Ctrl/Cmd to select multiple cities') }}">
                @foreach($cities->sortBy(function ($city) { return $city->translations->first()->name; }) as $city)
                    <option value="{{ $city->id }}">
                        {{ $city->translations->first()->name }}
                    </option>
                @endforeach
            </select>
            @if(count($selectedCities) > 0)
                <p class="text-xs text-gray-500 mt-1">
                    {{ __(':count cities selected', ['count' => count($selectedCities)]) }}
                </p>
            @endif
        </div>
    @endif

    <!-- Districts -->
    @if($districts->count() > 0)
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                {{ __('Districts / Neighborhoods') }}
                <span class="text-xs text-gray-500 font-normal ml-1">({{ __('Hold Ctrl/Cmd for multiple') }})</span>
            </label>
            <select multiple class="block w-full border border-gray-300 rounded-md shadow-sm p-2 h-24 focus:ring-blue-500 focus:border-blue-500"
                    wire:model.live="selectedDistricts"
                    title="{{ __('Hold Ctrl/Cmd to select multiple districts') }}">
                @foreach($districts->sortBy(function ($district) { return $district->translations->first()->name; }) as $district)
                    <option value="{{ $district->id }}">
                        {{ $district->translations->first()->name }}
                    </option>
                @endforeach
            </select>
            @if(count($selectedDistricts) > 0)
                <p class="text-xs text-gray-500 mt-1">
                    {{ __(':count districts selected', ['count' => count($selectedDistricts)]) }}
                </p>
            @endif
        </div>
    @endif

    <!-- Clear button -->
    @if(count($selectedCountries) > 0 || count($selectedDivisions) > 0 || count($selectedCities) > 0 || count($selectedDistricts) > 0)
        <div class="pt-2">
            <button type="button" wire:click="resetLocationFilter"
                    class="text-sm text-red-600 hover:text-red-800 flex items-center space-x-1">
                <x-icon name="x-mark" class="w-4 h-4" />
                <span>{{ __('Clear all location filters') }}</span>
            </button>
        </div>
    @endif

    <!-- Selection summary -->
    @if(count($selectedCountries) > 0 || count($selectedDivisions) > 0 || count($selectedCities) > 0 || count($selectedDistricts) > 0)
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
            <h4 class="text-sm font-medium text-blue-900 mb-2">{{ __('Active Location Filters:') }}</h4>
            <div class="space-y-1 text-xs text-blue-800">
                @if(count($selectedCountries) > 0)
                    <div>{{ __('Countries: :count selected', ['count' => count($selectedCountries)]) }}</div>
                @endif
                @if(count($selectedDivisions) > 0)
                    <div>{{ __('Divisions: :count selected', ['count' => count($selectedDivisions)]) }}</div>
                @endif
                @if(count($selectedCities) > 0)
                    <div>{{ __('Cities: :count selected', ['count' => count($selectedCities)]) }}</div>
                @endif
                @if(count($selectedDistricts) > 0)
                    <div>{{ __('Districts: :count selected', ['count' => count($selectedDistricts)]) }}</div>
                @endif
            </div>
        </div>
    @endif
</div>