@props(['locations', 'selected' => null])

<div class="relative">
    <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent appearance-none bg-white" onchange="window.location.href=this.value">
        <option value="">Select your location</option>
        @foreach($locations as $state)
            <optgroup label="{{ $state->name }}">
                @foreach($state->children as $city)
                    <option value="{{ route('locations.show', ['state' => $state->slug, 'city' => $city->slug]) }}" {{ $selected == $city->id ? 'selected' : '' }}>
                        {{ $city->name }}
                    </option>
                    @foreach($city->children as $suburb)
                        <option value="{{ route('locations.show', ['state' => $state->slug, 'region' => $city->slug, 'city' => $suburb->slug]) }}" {{ $selected == $suburb->id ? 'selected' : '' }}>
                            &nbsp;&nbsp;{{ $suburb->name }}
                        </option>
                    @endforeach
                @endforeach
            </optgroup>
        @endforeach
    </select>
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <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="M19 9l-7 7-7-7"/></svg>
    </div>
</div>