{{-- Une seule fenetre pour l'ajout et la modification, remplie par le bouton
     qui l'ouvre. Une saisie refusee revient ici avec ses erreurs :
     `_edition` dit sur quelle variation on etait.

     La liste des modeles (252 entrees) est une liste ou l'on tape pour
     chercher (js/liste-cherchable.js). --}}
@canany(['variations.create', 'variations.edit'])
    @php $enEdition = old('_edition'); @endphp
    <div class="modal fade" id="modale-variation" 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('variations.update', $enEdition) : route('variations.store') }}"
                data-store="{{ route('variations.store') }}"
                data-update="{{ route('variations.update', '__ID__') }}"
                data-titre-ajouter="Ajouter une variation" data-titre-modifier="Modifier la variation">
                @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 la variation' : 'Ajouter une variation' }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>

                <div class="modal-body" data-zone="variation-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-12">
                            <label class="form-label" for="variation-modele">Modèle <span class="text-danger">*</span></label>
                            <select class="form-select" name="modele_id" id="variation-modele" data-champ="modele_id" required
                                data-cherchable="Tapez un modèle, ex. P-300" aria-label="Modèle">
                                <option value="">-- Sélectionner --</option>
                                @foreach ($modelesOptions as $id => $texte)
                                    <option value="{{ $id }}" @selected((string) old('modele_id') === (string) $id)>{{ $texte }}</option>
                                @endforeach
                            </select>
                        </div>

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

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

                        <div class="col-12">
                            <label class="form-label" for="variation-image">Image</label>
                            <input type="file" class="form-control" name="image" id="variation-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