{{-- TEMPORAIRE : ancienne creation (avant la mise en deux colonnes), servie par la route commandes.create-ancien le temps de comparer. A supprimer avec la route, _devis_ancien et js/commandes/devis_ancien.js. --}}
@extends('admin.layout')
@section('title', __('Ajouter une commande') . ' (ancienne vue)')

@section('content')

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div>

    {{-- Deroule du bloc devis et des champs d'observation. Les regles sont
         partagees avec la creation d'un chantier, qui deroule les memes
         blocs. --}}
    <link rel="stylesheet" href="@assetV('css/accordeon.css')">
    <script src="@assetV('js/accordeon.js')"></script>

    <section class="section contact">
        <div class="card p-4">

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('commandes.store') }}" method="post" class="">
                @csrf
                <div class="row gy-4">

                    @include('admin.commandes._devis_ancien', [
                        'devisId' => old('devis_id'),
                        'clientId' => old('client_id'),
                    ])

                    <hr>

                    {{-- -------------------- INFORMATIONS COMMANDE -------------------- --}}
                    <div class="col-md-2">
                        <label>{{ __('Pour') }}</label>
                        <select name="negoce" id="negoce" class="form-control" required>
                            <option value="0" selected>ACPORTAIL</option>
                            <option value="1">NEGOCE</option>
                        </select>
                    </div>

                    {{-- Dates --}}
                    <div class="col-md-2">
                        <label>{{ __('Réception accueil') }}</label>
                        <input type="date" name="date_accueil" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>{{ __("Réception bureau d'étude") }}</label>
                        <input type="date" name="date_etude" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>{{ __('Vérif côtes') }}</label>
                        <input type="date" name="date_cotes_oks" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>{{ __('Visuel validé') }}</label>
                        <input type="date" name="visuel_valide" class="form-control">
                    </div>
                    {{-- Qui a valide le visuel. Les choix viennent de
                         config/commandes.php : en ajouter un se fait la-bas,
                         cette boucle suit. Facultatif comme la colonne, qui est
                         nullable — on n'a pas toujours l'information. --}}
                    <div class="col-md-2">
                        <label for="validateur_visuel">{{ __('Validé par') }}</label>
                        <select name="validateur_visuel" id="validateur_visuel" class="form-control">
                            <option value="">{{ __('-- Non renseigné --') }}</option>
                            @foreach (config('commandes.validateurs_visuel', []) as $code => $meta)
                                <option value="{{ $code }}" @selected(old('validateur_visuel') == $code)>
                                    {{ \App\Helpers\CommandeHelper::validateurVisuel($code) }}
                                </option>
                            @endforeach
                        </select>
                        @error('validateur_visuel') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                    {{-- La note sur les dates est repliee par defaut : elle est
                         rare, et un textarea vide au milieu des dates donnait
                         surtout l'impression qu'il fallait le remplir.

                         Le champ s'appelle `observation_dates` et non plus
                         `observation_date_valide` : l'ancien n'etait lu nulle
                         part dans store(), ce qu'on y tapait disparaissait.

                         Il occupe toute la largeur et se place apres les dates
                         pour qu'on voie ce que la note commente. --}}
                    <div class="col-md-12 obs-bloc">
                        <button type="button" class="btn btn-outline-secondary btn-sm obs-ouvrir @if (old('observation_dates')) d-none @endif">
                            <i class="bi bi-plus-lg"></i>
                            {{ __('Ajouter une observation pour les dates') }}
                        </button>

                        {{-- Le `mt-2` est descendu dans le corps : porte par le
                             panneau, il laisserait une marge visible meme
                             replie. --}}
                        <div class="obs-champ ac-accordeon @if (old('observation_dates')) ac-ouvert @endif">
                            <div class="ac-accordeon-corps">
                                <div class="mt-2">
                                    <label for="observation_dates">{{ __('Observation sur les dates') }}</label>
                                    <textarea name="observation_dates" id="observation_dates"
                                        class="form-control" rows="2">{{ old('observation_dates') }}</textarea>
                                    <button type="button" class="btn btn-link btn-sm text-danger px-0 obs-fermer">
                                        <i class="bi bi-trash"></i> {{ __('Supprimer cette observation') }}
                                    </button>
                                    @error('observation_dates') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <!-- 📌 Conteneur des blocs duplicables -->
                    <div id="commande-container" class="row gy-4">

                        <div class="commande-item border rounded p-3 mb-3">

                            <div class="row gy-3">

                                <div class="col-md-2">
                                    <label for="type">{{ __('Type') }}</label>
                                    <select name="items[0][type_id]" class="form-control type-select" required>
                                        <option value="">{{ __('-- Sélectionnez un type --') }}</option>
                                        @foreach ($types as $type)
                                            <option value="{{ $type->id }}">{{ \App\Helpers\CommandeHelper::nomTraduit($type->nom) }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Modele et variation ne font plus qu'un champ : on tape, la
                                     liste du type se filtre, un clic fige le choix.

                                     Le texte saisi est poste lui aussi, sous `modele` : le
                                     catalogue ne couvre pas tout, et `commandes.modele` est
                                     un libelle fige, pas une cle etrangere — un nom qui n'y
                                     figure pas s'y enregistre aussi bien. Quand une entree
                                     du catalogue est choisie, c'est elle qui prime : le
                                     controleur resout le libelle sur l'id plutot que de
                                     faire confiance au texte poste. --}}
                                <div class="col-md-3">
                                    <label>{{ __('Modèle') }}</label>
                                    <div class="ac" data-ac="modele">
                                        <input type="text" class="form-control ac-input modele-input"
                                            name="items[0][modele]" maxlength="100"
                                            placeholder="{{ __('Choisir un type d\'abord') }}"
                                            autocomplete="off" disabled required>
                                        <input type="hidden" name="items[0][modele_id]" class="ac-modele-id">
                                        <input type="hidden" name="items[0][variation_id]" class="ac-variation-id">
                                        <ul class="ac-menu" hidden></ul>
                                    </div>
                                </div>

                                {{-- Platine : n'existe que sur un accessoire. Le logiciel
                                     metier la posait partout, et NettoyerPlatineSeeder a
                                     du l'effacer a l'import — un coulissant n'a pas de
                                     platine. Le champ ne s'ouvre donc que sur ce type.

                                     Desactive tant qu'il est replie, et pas seulement
                                     masque : sans cela, choisir une platine puis changer
                                     de type la posterait quand meme, et on recreerait en
                                     saisie ce que l'import a nettoye. Meme mecanique que
                                     la finition sur « pas de laquage ».

                                     `pt-0` : la gouttiere de la `row` est un padding porte
                                     par la colonne, donc hors du panneau qui se deroule. --}}
                                <div class="col-md-2 pt-0 d-none platine-hote">
                                    <div class="ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <label>{{ __('Platine') }}</label>
                                            <select name="items[0][platine]" class="form-control platine-select" disabled>
                                                <option value="">{{ __('-- Aucune --') }}</option>
                                                @foreach (config('commandes.platines') as $code => $platine)
                                                    <option value="{{ $code }}">{{ __($platine['label']) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- Quantite : meme logique que la platine. Un portail
                                     se commande a l'unite, seul un accessoire part par
                                     lots. Replie, le champ est desactive et n'est pas
                                     poste : le controleur pose alors 1. --}}
                                <div class="col-md-2 pt-0 d-none quantite-hote">
                                    <div class="ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <label>{{ __('Quantité') }}</label>
                                            <input type="number" name="items[0][quantite]" class="form-control quantite-input"
                                                min="1" step="1" value="1" disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label>{{ __('Couleur') }}</label>
                                    <div class="ac" data-ac="couleur">
                                        <input type="text" class="form-control ac-input couleur-input"
                                            placeholder="{{ __('Tapez une couleur, ex. RAL 7016') }}"
                                            autocomplete="off">
                                        <input type="hidden" name="items[0][couleur]" class="ac-couleur-id">
                                        <ul class="ac-menu" hidden></ul>
                                    </div>
                                </div>


                                {{-- Desactivee et videe quand la couleur est « pas de
                                     laquage » : une piece qu'on ne laque pas n'a pas de
                                     finition. La colonne est nullable, un select desactive
                                     n'est pas poste, les deux se rejoignent. --}}
                                <div class="col-md-2">
                                    <label>{{ __('Finition') }}</label>
                                    <select name="items[0][finition]" class="form-control finition-select">
                                        <option value="">{{ __('-- Aucune --') }}</option>
                                        <option value="1" selected>{{ __('Sablé') }}</option>
                                        <option value="2">{{ __('Mât') }}</option>
                                        <option value="3">{{ __('Brillant') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-2"> <label>{{ __('Découpe/Inox') }}</label> <select name="items[0][decoupe_inox]"
                                        class="form-control">
                                        <option value="Oui">{{ __('Oui') }}</option>
                                        <option value="Non" selected>{{ __('Non') }}</option>
                                    </select>
                                </div>
                                {{-- Découpes inox. Se déroule quand « Découpe/Inox »
                                     passe à Oui, comme le champ d'observation.

                                     `pt-0` : la gouttière de la `row` est un padding
                                     porté par la colonne, donc hors du panneau, et le
                                     repli finirait sur quelques pixels qui sautent.
                                     Le `mt-3` descend dans le corps pour la même
                                     raison — porté par l'hôte, il laisserait une
                                     marge visible une fois replié. --}}
                                <div class="col-md-12 pt-0 d-none decoupes-container">
                                    <div class="ac-accordeon">
                                    <div class="ac-accordeon-corps">
                                    <div class="row mt-3">
                                        @foreach ($decoupes as $type => $items)
                                            <div class="col-md-2">
                                                <strong class="d-block mb-2 text-uppercase">{{ \App\Helpers\CommandeHelper::decoupeType($type) }}</strong>

                                                @foreach ($items as $decoupe)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            name="items[0][decoupes][]" value="{{ $decoupe->id }}"
                                                            id="decoupe_0_{{ $decoupe->id }}">
                                                        <label class="form-check-label"
                                                            for="decoupe_0_{{ $decoupe->id }}">
                                                            {{ $decoupe->nom }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>{{ __('Destination') }}</label>
                                    <select name="items[0][destination]" class="form-control">
                                        <option value="1">{{ __('A poser') }}</option>
                                        <option value="2">{{ __('A livrer') }}</option>
                                        <option value="3">{{ __('A stocker') }}</option>
                                        <option value="4">{{ __('A récupérer au dépôt') }}</option>
                                    </select>
                                </div>

                                <div class="col-md-2"> <label>{{ __('Priorité') }}</label> <select name="items[0][priorite]"
                                        class="form-control">
                                        <option value="1" selected>{{ __('Normale') }}</option>
                                        {{-- Code 2 de config/commandes.php. Il manquait ici
                                             alors que la validation l'acceptait deja et que
                                             des commandes le portent. --}}
                                        <option value="2">{{ __('Refaire') }}</option>
                                        <option value="3">{{ __('Urgent') }}</option>
                                    </select> </div>
                                {{-- Etat de depart de la ligne : EN ATTENTE, IN PROCESS
                                     ou STANDBY. Les suivants (laquage,
                                     charge...) se posent quand l'usine avance. L'attribut
                                     `selected` suit le clonage, une nouvelle ligne repart
                                     donc EN ATTENTE. --}}
                                <div class="col-md-2"> <label>{{ __('État') }}</label>
                                    <select name="items[0][etat]" class="form-control">
                                        @foreach ([2, 3, 1] as $code)
                                            <option value="{{ $code }}" @selected($code === 2)>
                                                {{ \App\Helpers\CommandeHelper::etat($code) }}
                                            </option>
                                        @endforeach
                                    </select> </div>
                                <div class="col-md-2"> <label>{{ __('Maçonnerie') }}</label> <select name="items[0][maconnerie]"
                                        class="form-control">
                                        <option value="Oui">{{ __('Oui') }}</option>
                                        <option value="Non" selected>{{ __('Non') }}</option>
                                    </select> </div>


                                <div class="col-md-2"> <label>{{ __('Cintrage') }}</label> <select name="items[0][cintrage]"
                                        class="form-control">
                                        <option value="Oui">{{ __('Oui') }}</option>
                                        <option value="Non" selected>{{ __('Non') }}</option>
                                    </select> </div>
                                <div class="col-md-2"> <label>{{ __('Longueur') }}</label> <input type="text"
                                        name="items[0][longueur]" class="form-control"> </div>
                                <div class="col-md-2"> <label>{{ __('Hauteur') }}</label> <input type="text"
                                        name="items[0][hauteur]" class="form-control"> </div>
                                {{-- Largeur : carport seulement, meme mecanique que la
                                     quantite sur un accessoire. Repliee, elle est
                                     desactivee et n'est pas postee : la colonne reste
                                     nulle. --}}
                                <div class="col-md-2 pt-0 d-none largeur-hote">
                                    <div class="ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <label>{{ __('Largeur') }}</label>
                                            <input type="text" name="items[0][largeur]" class="form-control largeur-input" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2"> <label>{{ __('Prix usine') }}</label> <input type="text"
                                        name="items[0][prix_usine]" class="form-control"> </div>
                                <div class="col-md-12"> <label>{{ __('Lien PDF') }}</label> <input type="text"
                                        name="items[0][url]" class="form-control"> </div>
                                {{-- Meme motif que la note sur les dates, en classes et
                                     non en id : ce bloc est clone par « Ajouter une
                                     commande », des id seraient dupliques. --}}
                                <div class="col-md-12 obs-bloc">
                                    <button type="button" class="btn btn-outline-secondary btn-sm obs-ouvrir">
                                        <i class="bi bi-plus-lg"></i>
                                        {{ __('Ajouter une observation pour la commande') }}
                                    </button>

                                    <div class="obs-champ ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <div class="mt-2">
                                                <label>{{ __('Observations') }}</label>
                                                <textarea name="items[0][observations]" class="form-control" rows="2"></textarea>
                                                <button type="button" class="btn btn-link btn-sm text-danger px-0 obs-fermer">
                                                    <i class="bi bi-trash"></i> {{ __('Supprimer cette observation') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- Bouton supprimer -->
                            <button type="button" class="btn btn-danger mt-3 remove-item"
                                style="display:none;">{{ __('Supprimer') }}</button>

                        </div>
                    </div>

                    <button type="button" id="add-item" class="btn btn-secondary my-3">+ {{ __('Ajouter une commande') }}</button>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">{{ __('Ajouter') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    {{-- Hors du <form> : un champ de recherche a l'interieur soumettrait la
         commande a la premiere touche Entree. Le choix pose l'identifiant dans
         `#numero_client` et emet un `change`, que l'ecran relit plus bas. --}}
    @include('admin.gestan.clients._modale_recherche', ['cible' => '#numero_client'])

    @php
        // Libelles des <option> construits en JS. Rassembles ici puis serialises
        // en une fois : les traduire a la main dans le script obligerait a
        // penser aux apostrophes et aux accents a chaque chaine.
        // Ceux du devis sont poses par la vue _devis, avec son script.
        $langJs = [
            'observationSupprimer' => __('Supprimer cette observation ?'),
        ];

        // Libelles du menu de saisie assistee, cote JS lui aussi.
        $acLang = [
            'tapezModele' => __('Tapez un modèle, ex. C-100'),
            'choisirType' => __("Choisir un type d'abord"),
            'aucunResultat' => __('Aucun résultat'),
            'variation' => __('variation'),
        ];

        // Seules les quatre colonnes que le menu affiche : envoyer les 249
        // couleurs entieres tripleraient le poids de la page pour rien.
        $acCouleurs = collect($colors)
            ->map(fn ($c) => [
                'id' => (int) $c['id'],
                'value_display' => $c['value_display'] ?? '',
                'name_fr' => $c['name_fr'] ?? '',
                'color' => $c['color'] ?? '',
                // RAL0000 est « pas de laquage ». Le drapeau est calcule ici,
                // ou la valeur brute est encore lisible : le js ne recoit pas
                // `value`, et se fier au libelle affiche serait le lier a une
                // chaine traduisible.
                'sans_laquage' => mb_strtoupper((string) ($c['value'] ?? ''), 'UTF-8') === 'RAL0000',
            ])
            ->values();
    @endphp

    <script>
        const LANG = {!! json_encode($langJs, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};

        // Catalogues du menu de saisie assistee. Poses dans la page plutot que
        // demandes au serveur : ils sont petits, et cela evite un aller-retour
        // a chaque changement de type.
        window.AC_LANG = {!! json_encode($acLang, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};
        window.AC_MODELES = {!! json_encode($catalogue, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};
        window.AC_COULEURS = {!! json_encode($acCouleurs, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};

        // Le seul type qui ouvre les champs Platine et Quantite. Nul si le type
        // a disparu : ils restent alors replies, ce qui vaut mieux qu'ouverts
        // au hasard.
        const TYPE_ACCESSOIRE = {{ $typeAccessoire ?? 'null' }};

        // Le seul type qui ouvre le champ Largeur.
        const TYPE_CARPORT = {{ $typeCarport ?? 'null' }};

        /* Ouvre ou replie les champs propres a l'accessoire d'une ligne.

           Ils sont desactives avec le repli : un champ masque reste poste, et
           une platine choisie avant de changer de type se retrouverait sur
           un coulissant. La platine est videe au passage, sinon elle
           reviendrait en revenant sur « accessoire » ; la quantite repart a 1. */
        function majAccessoire(item) {
            if (!item) {
                return;
            }

            const type = item.querySelector('.type-select');
            const ouvert = TYPE_ACCESSOIRE !== null
                && type
                && parseInt(type.value, 10) === TYPE_ACCESSOIRE;

            const platineHote = item.querySelector('.platine-hote');
            const platine = item.querySelector('.platine-select');

            if (platineHote && platine) {
                if (!ouvert) {
                    platine.value = '';
                }
                platine.disabled = !ouvert;
                window.acDerouler(platineHote, ouvert);
            }

            const quantiteHote = item.querySelector('.quantite-hote');
            const quantite = item.querySelector('.quantite-input');

            if (quantiteHote && quantite) {
                if (!ouvert || !quantite.value) {
                    quantite.value = 1;
                }
                quantite.disabled = !ouvert;
                window.acDerouler(quantiteHote, ouvert);
            }

            // Largeur : meme principe, mais sur le carport. Videe au repli,
            // pour qu'une valeur tapee ne revienne pas en changeant de type.
            const largeurHote = item.querySelector('.largeur-hote');
            const largeur = item.querySelector('.largeur-input');

            if (largeurHote && largeur) {
                const carport = TYPE_CARPORT !== null
                    && type
                    && parseInt(type.value, 10) === TYPE_CARPORT;

                if (!carport) {
                    largeur.value = '';
                }
                largeur.disabled = !carport;
                window.acDerouler(largeurHote, carport);
            }
        }

        document.addEventListener('change', function (e) {
            if (e.target.classList && e.target.classList.contains('type-select')) {
                majAccessoire(e.target.closest('.commande-item'));
            }
        });

        // Le repli des observations vit dans js/observations.js, partage avec
        // les formulaires de chantier. Son libelle de confirmation vient de la
        // page, seule a savoir traduire.
        window.AC_OBS_LANG = { supprimer: LANG.observationSupprimer };

        let index = 1; // index pour les noms des inputs

        document.getElementById('add-item').addEventListener('click', function() {
            const container = document.querySelector('.commande-item');
            const clone = container.cloneNode(true);

            clone.querySelectorAll('select, input, textarea').forEach(input => {
                if (!input.name) return;

                // 🔹 Mettre à jour le name avec le nouvel index
                input.name = input.name.replace(/\[\d+\]/, `[${index}]`);

                // 🔹 Réinitialiser seulement les champs dépendants
                if (input.type === 'checkbox') {
                    input.checked = false;
                    input.id = input.id.replace(/_\d+_/, `_${index}_`);
                } else if (input.tagName === 'TEXTAREA' || input.type === 'text' || input.type ===
                    'number' || input.type === 'date') {
                    input.value = '';
                }
                // Les champs de saisie assistée n'ont pas de name (ce sont les
                // hidden à côté qui sont postés) : la boucle les saute, et leur
                // texte survit au clonage. C'est voulu pour la couleur.
                //
                // Les selects, eux, repartent à vide quoi qu'on fasse :
                // cloneNode recopie la valeur d'un <input> mais pas la sélection
                // d'un <select>, que l'utilisateur a posée en propriété et non
                // en attribut. Type, finition et destination sont donc à
                // ressaisir sur chaque ligne — c'était déjà le cas avant.
            });

            // 🔹 Modèle : le type du clone étant vide (cf. ci-dessus), le champ
            //    repart désactivé, ce qui est cohérent — on ne peut pas choisir
            //    un modèle sans type. La couleur, elle, se garde : son texte et
            //    son id ont survécu au clonage, et c'est souvent la même sur
            //    toute la commande.
            const modeleWrapper = clone.querySelector('.ac[data-ac="modele"]');
            const typeClone = clone.querySelector('.type-select');

            if (modeleWrapper && window.acReinitialiserModele) {
                window.acReinitialiserModele(modeleWrapper, typeClone ? typeClone.value : '');
            }

            // 🔹 Menus de saisie assistée : un clone ne doit pas rouvrir celui
            //    qui était déroulé au moment du clic.
            clone.querySelectorAll('.ac-menu').forEach(menu => {
                menu.innerHTML = '';
                menu.hidden = true;
            });

            // 🔹 Découpes : repliées sur le clone, même si elles étaient
            //    ouvertes sur la ligne copiée. Sans animation ici : la ligne
            //    n'est pas encore dans la page, il n'y a rien à faire glisser.
            const decoupesContainer = clone.querySelector('.decoupes-container');

            if (decoupesContainer) {
                decoupesContainer.classList.add('d-none');
                decoupesContainer.querySelector('.ac-accordeon')?.classList.remove('ac-ouvert');
            }

            // 🔹 Observation : repliée sur le clone, même si elle était ouverte
            //    sur la ligne copiée. Le textarea, lui, a déjà été vidé par la
            //    boucle ci-dessus.
            clone.querySelectorAll('.obs-champ').forEach(champ => window.acDerouler(champ, false));
            clone.querySelectorAll('.obs-ouvrir').forEach(bouton => bouton.classList.remove('d-none'));

            // 🔹 Finition : l'attribut disabled a suivi le clonage, mais pas la
            //    sélection — cloneNode ne recopie pas la valeur d'un select (cf.
            //    ci-dessus). Un select désactivé réafficherait donc « Sablé »
            //    alors qu'il ne poste rien. On le remet sur l'option vide.
            const finitionClone = clone.querySelector('.finition-select');
            if (finitionClone && finitionClone.disabled) finitionClone.value = '';

            // 🔹 Platine et quantite : le type du clone repart vide (cf.
            //    ci-dessus), donc les champs se replient, quel que soit l'etat
            //    de la ligne copiee. La quantite, videe par la boucle, repart a 1.
            majAccessoire(clone);

            // 🔹 Bouton supprimer : la ligne se replie avant de partir, elle
            //    ne disparait pas d'un frame. Minuteur et pas `transitionend`
            //    comme dans accordeon.js : celui-ci ne part pas quand les
            //    animations sont coupees (prefers-reduced-motion), et la ligne
            //    resterait affichee.
            const btnRemove = clone.querySelector('.remove-item');
            btnRemove.style.display = 'inline-block';
            btnRemove.addEventListener('click', () => {
                const hoteSupprime = clone.closest('.commande-hote');

                if (!hoteSupprime) {
                    clone.remove();
                    return;
                }

                window.acDerouler(hoteSupprime, false);
                setTimeout(() => hoteSupprime.remove(), 300);
            });

            // 🔹 Ajouter le clone au conteneur : il se deroule au lieu de
            //    surgir, comme le bloc du devis ou le champ d'observation.
            //
            //    L'hote est cree ici et pas pose dans le html : la premiere
            //    ligne est deja en place au chargement, elle n'a rien a
            //    derouler.
            //
            //    `p-0 m-0` le rend transparent, et les deux comptent. La
            //    gouttiere du conteneur est un padding horizontal pose par
            //    Bootstrap sur les enfants de `row` : sans `p-0`, la ligne
            //    clonee serait 24 px plus etroite que la premiere, qui porte
            //    ce padding elle-meme. Et `gy-4` pose une marge haute, qui
            //    reste hors du panneau : sans `m-0`, elle serait la des le
            //    premier frame et la page sauterait de sa hauteur — ce que le
            //    deroule cherche justement a eviter. L'ecart entre les lignes
            //    est repris par le `mb-3` de la ligne elle-meme.
            const hote = document.createElement('div');

            hote.className = 'col-12 p-0 m-0 d-none commande-hote';
            hote.innerHTML = '<div class="ac-accordeon"><div class="ac-accordeon-corps"></div></div>';
            hote.querySelector('.ac-accordeon-corps').appendChild(clone);

            document.getElementById('commande-container').appendChild(hote);
            window.acDerouler(hote, true);

            index++;
        });
    </script>


    <script>
        document.addEventListener('change', function(e) {
            if (!e.target.matches('select[name*="[decoupe_inox]"]')) return;

            const container = e.target.closest('.commande-item');
            const decoupes = container.querySelector('.decoupes-container');

            const ouvert = e.target.value === 'Oui';

            if (!ouvert) {
                decoupes.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
            }

            window.acDerouler(decoupes, ouvert);
        });
    </script>

    <script src="@assetV('js/observations.js')"></script>
    <link rel="stylesheet" href="@assetV('css/commandes/autocomplete.css')">
    <script src="@assetV('js/commandes/autocomplete.js')" defer></script>

@endsection