@props(['departmentName' => 'department', 'cityName' => 'city', 'departmentRequired' => true, 'cityRequired' => true])

<div class="form-group">
    <select class="form-select" name="country" required>
        <option value="" selected disabled>Pays *</option>
        <option value="BJ">Bénin</option>
    </select>
</div>

<div class="form-group">
    <select class="form-select" name="{{ $departmentName }}" {{ $departmentRequired ? 'required' : '' }} id="department-select">
        <option value="" selected disabled>Département *</option>
        @php $departments = []; @endphp
        @foreach(config('locations.cities') as $city)
            @if(!isset($departments[$city['admin_name']]))
                <option value="{{ $city['admin_name'] }}">{{ $city['admin_name'] }}</option>
                @php $departments[$city['admin_name']] = true; @endphp
            @endif
        @endforeach
    </select>
</div>

<div class="form-group">
    <select class="form-select" name="{{ $cityName }}" {{ $cityRequired ? 'required' : '' }} id="city-select">
        <!-- <option value="" selected disabled>Ville *</option> -->
        @foreach(config('locations.cities') as $city)
            <option value="{{ $city['city'] }}" 
                    data-department="{{ $city['admin_name'] }}"
                    data-lat="{{ $city['lat'] }}" 
                    data-lng="{{ $city['lng'] }}">
                {{ $city['city'] }} ({{ $city['admin_name'] }})
            </option>
        @endforeach
    </select>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const departmentSelect = document.getElementById('department-select');
    const citySelect = document.getElementById('city-select');
    const cityOptions = Array.from(citySelect.options);
    
    departmentSelect.addEventListener('change', function() {
        const selectedDepartment = this.value;
        
        // Réinitialiser la liste des villes
        citySelect.innerHTML = '';
        
        // Ajouter l'option par défaut
        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.disabled = true;
        defaultOption.selected = true;
        defaultOption.textContent = 'Ville *';
        citySelect.appendChild(defaultOption);
        
        // Filtrer et ajouter les villes du département sélectionné
        cityOptions.forEach(option => {
            if (option.dataset.department === selectedDepartment || option.value === '') {
                citySelect.appendChild(option.cloneNode(true));
            }
        });
    });
});
</script>