@extends('layouts.base')

@section('title', 'Modifier 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">Modifier l'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.modification_agence', $agency->encrypted_id ?? $agency->id) }}" class="row g-3 app-form">
                    @csrf
                    @method('PUT')

                    {{-- Nom --}}
                    <div class="col-md-6">
                        <label>Nom de l'agence <span class="text-danger">*</span></label>
                        <input name="name" value="{{ old('name', $agency->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', $agency->is_head_office) == '0' || old('is_head_office', $agency->is_head_office) == 0) ? 'selected' : '' }}>Agence régionale</option>
                            <option value="1" {{ (old('is_head_office', $agency->is_head_office) == '1' || old('is_head_office', $agency->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', $agency->department) }}" required>
                            <option value="">-- Choisir un département --</option>
                            @foreach ($departements as $dep => $communes)
                                <option value="{{ $dep }}" {{ (old('department', $agency->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', $agency->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', $agency->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 les modifications
                        </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');

        city.select2('destroy');
        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>`);
            });
        }

        city.select2({
            width: '100%',
            placeholder: '-- Choisir une commune --'
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        $('.select-basic').select2({
            width: '100%',
            placeholder: '-- Choisir --'
        });

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

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

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