{{-- Une seule fenetre pour l'ajout et la modification, remplie par le bouton
     qui l'ouvre. Une saisie refusee (nom deja pris) revient ici avec ses
     erreurs : `_edition` dit sur quel modele on etait.

     Les « + » des trois listes deroulent une ligne sous la liste
     (admin/produits/_ajout-ligne) au lieu d'ouvrir une fenetre : une
     fenetre par-dessus une fenetre se superpose mal.

     Ici Vitrine ne demande pas confirmation, contrairement a la colonne
     de la liste : rien n'est publie tant qu'on n'a pas enregistre. --}}
@canany(['modeles.create', 'modeles.edit'])
    @php $enEdition = old('_edition'); @endphp
    <div class="modal fade" id="modale-modele" tabindex="-1" aria-hidden="true" data-modale-saisie
        @if ($errors->any()) data-rouvrir="1" @endif>
        <div class="modal-dialog modal-lg">
            <form method="post" class="modal-content" enctype="multipart/form-data"
                action="{{ $enEdition ? route('modeles.update', $enEdition) : route('modeles.store') }}"
                data-store="{{ route('modeles.store') }}"
                data-update="{{ route('modeles.update', '__ID__') }}"
                data-titre-ajouter="Ajouter un modèle" data-titre-modifier="Modifier le modèle">
                @csrf
                <input type="hidden" name="_method" value="{{ $enEdition ? 'PUT' : 'POST' }}">
                <input type="hidden" name="_edition" value="{{ $enEdition }}">

                <div class="modal-header">
                    <h5 class="modal-title" data-titre>{{ $enEdition ? 'Modifier le modèle' : 'Ajouter un modèle' }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>

                <div class="modal-body" data-zone="modele-saisie">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="modele-nom">Nom <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="nom" id="modele-nom" data-champ="nom"
                                value="{{ old('nom') }}" maxlength="191" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="modele-ancien-nom">Ancien nom</label>
                            <input type="text" class="form-control" name="ancien_nom" id="modele-ancien-nom" data-champ="ancien_nom"
                                value="{{ old('ancien_nom') }}" maxlength="191">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" for="modele-type">Type <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-select" name="type_id" id="modele-type" data-champ="type_id" required>
                                    <option value="">-- Sélectionner --</option>
                                    @foreach ($typesOptions as $id => $texte)
                                        <option value="{{ $id }}" @selected((string) old('type_id') === (string) $id)>{{ $texte }}</option>
                                    @endforeach
                                </select>
                                @can('types.create')
                                    <button type="button" class="btn btn-outline-primary" title="Ajouter un type" aria-label="Ajouter un type"
                                        data-ajout-derouler="#ajout-ligne-type" aria-expanded="false"><i class="bi bi-plus-lg"></i></button>
                                @endcan
                            </div>
                            @can('types.create')
                                @include('admin.produits._ajout-ligne', [
                                    'id' => 'ajout-ligne-type', 'action' => route('types.store'), 'pour' => '#modele-type',
                                    'placeholder' => 'Nom du nouveau type', 'fixes' => ['logiciel' => 1, 'vitrine' => 1],
                                ])
                            @endcan
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="modele-categorie">Catégorie</label>
                            <div class="input-group">
                                <select class="form-select" name="categorie_id" id="modele-categorie" data-champ="categorie_id">
                                    <option value="">-- Sélectionner --</option>
                                    @foreach ($categoriesOptions as $id => $texte)
                                        <option value="{{ $id }}" @selected((string) old('categorie_id') === (string) $id)>{{ $texte }}</option>
                                    @endforeach
                                </select>
                                @can('categories.create')
                                    <button type="button" class="btn btn-outline-primary" title="Ajouter une catégorie" aria-label="Ajouter une catégorie"
                                        data-ajout-derouler="#ajout-ligne-categorie" aria-expanded="false"><i class="bi bi-plus-lg"></i></button>
                                @endcan
                            </div>
                            @can('categories.create')
                                @include('admin.produits._ajout-ligne', [
                                    'id' => 'ajout-ligne-categorie', 'action' => route('categories.store'), 'pour' => '#modele-categorie',
                                    'placeholder' => 'Nom de la nouvelle catégorie',
                                ])
                            @endcan
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="modele-sous-categorie">Sous-catégorie</label>
                            <div class="input-group">
                                <select class="form-select" name="sous_categorie_id" id="modele-sous-categorie" data-champ="sous_categorie_id">
                                    <option value="">-- Sélectionner --</option>
                                    @foreach ($sousCategoriesOptions as $id => $texte)
                                        <option value="{{ $id }}" @selected((string) old('sous_categorie_id') === (string) $id)>{{ $texte }}</option>
                                    @endforeach
                                </select>
                                @can('sous_categories.create')
                                    <button type="button" class="btn btn-outline-primary" title="Ajouter une sous-catégorie" aria-label="Ajouter une sous-catégorie"
                                        data-ajout-derouler="#ajout-ligne-sous-categorie" aria-expanded="false"><i class="bi bi-plus-lg"></i></button>
                                @endcan
                            </div>
                            @can('sous_categories.create')
                                @include('admin.produits._ajout-ligne', [
                                    'id' => 'ajout-ligne-sous-categorie', 'action' => route('sous_categories.store'), 'pour' => '#modele-sous-categorie',
                                    'placeholder' => 'Nom de la nouvelle sous-catégorie',
                                ])
                            @endcan
                        </div>

                        <div class="col-md-6 d-flex align-items-end gap-4 pb-1">
                            <div>
                                <input type="hidden" name="logiciel" value="0">
                                <div class="form-check form-switch mb-0">
                                    <input type="checkbox" class="form-check-input" role="switch" id="modele-logiciel" name="logiciel"
                                        value="1" data-champ="logiciel" @checked(old('logiciel'))>
                                    <label class="form-check-label" for="modele-logiciel">Logiciel</label>
                                </div>
                            </div>
                            <div>
                                <input type="hidden" name="vitrine" value="0">
                                <div class="form-check form-switch mb-0">
                                    <input type="checkbox" class="form-check-input" role="switch" id="modele-vitrine" name="vitrine"
                                        value="1" data-champ="vitrine" @checked(old('vitrine'))>
                                    <label class="form-check-label" for="modele-vitrine">Vitrine</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" for="modele-prix">Prix <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" class="form-control" name="prix" id="modele-prix" data-champ="prix"
                                value="{{ old('prix') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="modele-marge">Marge <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" class="form-control" name="marge" id="modele-marge" data-champ="marge"
                                value="{{ old('marge') }}" required>
                        </div>

                        <div class="col-12">
                            <label class="form-label" for="modele-image">Image</label>
                            <input type="file" class="form-control" name="image" id="modele-image" data-champ="image"
                                accept="image/*" data-apercu>
                            <div class="form-text">Facultative, 4 Mo maximum. Gardée telle quelle ; seule une image de plus de {{ \App\Services\Documents\ImageCatalogue::COTE_MAX }} px est réduite, dans son format. En modification, laissez vide pour garder l’image actuelle.</div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
@endcanany