@extends('layouts.base')

@section('title', 'Ajouter une agence')

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="{{ asset('assets/vendor/select/select2.min.css') }}" rel="stylesheet">

@endsection

@section('content')
<div class="row">

    {{--         {{--@include('includes.alert/alert_success_error') --}}

    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Ajouter une agence</h5>
                <a href="{{ route('gestion_utilisateur_agence.liste_agence') }}" class="btn btn-outline-danger">
                    <i class="fa-solid fa-arrow-left"></i> Retour à la liste
                </a>
            </div>
            <div class="card-body">
       
                <form method="POST" action="{{ route('gestion_utilisateur_agence.ajout_agence') }}" class="row g-3 app-form">
                    @csrf

                    {{-- Nom --}}
                    <div class="col-md-6">
                        <label>Nom de l'agence <span class="text-danger">*</span></label>
                        <input name="name" value="{{ old('name') }}" type="text" class="form-control @error('name') is-invalid @enderror" required maxlength="255">
                        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Type d'agence --}}
                    <div class="col-md-6">
                        <label>Type d'agence <span class="text-danger">*</span></label>
                        <select name="is_head_office" class="form-select @error('is_head_office') is-invalid @enderror" required>
                            <option value="">-- Choisir le type --</option>
                            <option value="0" {{ old('is_head_office') == '0' ? 'selected' : '' }}>Agence régionale</option>
                            <option value="1" {{ old('is_head_office') == '1' ? 'selected' : '' }}>Direction générale</option>
                        </select>
                        @error('is_head_office') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Département --}}
                    <div class="col-md-6">
                        <label>Département <span class="text-danger">*</span></label>
                        <select name="department" id="department" class="form-select select-basic @error('department') is-invalid @enderror" data-selected="{{ old('department') }}" required>
                            <option value="">-- Choisir un département --</option>
                            @foreach ($departements as $dep => $communes)
                                <option value="{{ $dep }}" {{ old('department') == $dep ? 'selected' : '' }}>{{ $dep }}</option>
                            @endforeach
                        </select>
                        @error('department') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Commune --}}
                    <div class="col-md-6">
                        <label>Commune <span class="text-danger">*</span></label>
                        <select name="city" id="city" class="form-select select-basic @error('city') is-invalid @enderror" data-selected="{{ old('city') }}" required>
                            <option value="">-- Choisir une commune --</option>
                        </select>
                        @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Adresse --}}
                    <div class="col-md-6">
                        <label>Adresse</label>
                        <input name="address" value="{{ old('address') }}" type="text" class="form-control @error('address') is-invalid @enderror" maxlength="255">
                        @error('address') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-12 text-end">
                        <button type="submit" class="btn text-white" style="background: {{ config('colors.lnb_green') }};">
                            <i class="fa fa-save"></i> Enregistrer l'agence
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
@endsection
@section('script')

<script src="{{ asset('assets/vendor/select/select2.min.js') }}"></script>
<script>
    const departements = @json($departements);

    function updateCommunes(dep, selected = null) {
        const city = $('#city');

        // ⚠️ Détruire l'instance Select2 AVANT de modifier les options
        city.select2('destroy');

        // Vider et reconstruire
        city.empty().append('<option value="">-- Choisir une commune --</option>');

        if (departements[dep]) {
            departements[dep].forEach(function(c) {
                const isSelected = (c === selected) ? 'selected' : '';
                city.append(`<option value="${c}" ${isSelected}>${c}</option>`);
            });
        }

        // ⚠️ Re-initialiser Select2 sur le nouveau contenu
        city.select2({
            width: '100%',
            placeholder: '-- Choisir une commune --'
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        // Init Select2 sur tous les champs au chargement
        $('.select-basic').select2({
            width: '100%',
            placeholder: '-- Choisir --'
        });

        const department = $('#department');
        const selectedDep = department.data('selected') || department.val();
        const selectedComm = $('#city').data('selected');

        if (selectedDep) {
            updateCommunes(selectedDep, selectedComm);
        }

        department.on('change', function () {
            updateCommunes(this.value);
        });
    });
</script>

@endsection