@extends('layout.app')

@section('title', 'Ajouter un secteur')
@section('page_title', 'Nouveau secteur')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body">

            <a href="{{ route('admin.cities.index') }}" class="btn btn-secondary mb-3">
                <i class="fa fa-arrow-left"></i> Retour
            </a>

            {{-- Erreurs de validation --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Erreurs :</strong>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.cities.store') }}" class="row g-3">
                @csrf

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Nom du secteur / ville *</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Région *</label>
                    <select name="region" class="form-select" required>
                        <option value="">-- Sélectionner une région --</option>
                        <option value="Tanger-Tétouan-Al Hoceïma">Tanger-Tétouan-Al Hoceïma</option>
                        <option value="L’Oriental">L’Oriental</option>
                        <option value="Fès-Meknès">Fès-Meknès</option>
                        <option value="Rabat-Salé-Kénitra">Rabat-Salé-Kénitra</option>
                        <option value="Béni Mellal-Khénifra">Béni Mellal-Khénifra</option>
                        <option value="Casablanca-Settat">Casablanca-Settat</option>
                        <option value="Marrakech-Safi">Marrakech-Safi</option>
                        <option value="Drâa-Tafilalet">Drâa-Tafilalet</option>
                        <option value="Souss-Massa">Souss-Massa</option>
                        <option value="Guelmim-Oued Noun">Guelmim-Oued Noun</option>
                        <option value="Laâyoune-Sakia El Hamra">Laâyoune-Sakia El Hamra</option>
                        <option value="Dakhla-Oued Ed-Dahab">Dakhla-Oued Ed-Dahab</option>
                    </select>
                </div>

                <div class="col-12 text-end mt-3">
                    <button type="submit" class="btn btn-glo-success">
                        <i class="fa fa-check"></i> Enregistrer le secteur
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
@endsection