@extends('admin.layout')

{{-- Le meme formulaire sert a refabriquer une commande (CommandeController::
     refabriquer) : $origine est alors la commande refaite, et $pre les valeurs
     qu'elle apporte a la premiere ligne. Hors refabrication, les deux sont
     vides et l'ecran est celui de toujours. --}}
@php
    $origine = $origine ?? null;
    $pre = $pre ?? [];
@endphp

@section('title', $origine
    ? __('Refabriquer la commande n° :id', ['id' => $origine->id])
    : __('Ajouter une commande'))

@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>
    <link rel="stylesheet" href="@assetV('css/commandes/formulaire.css')">

    <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

            {{-- Libelle a gauche du champ, comme la fenetre de l'ancien
                 logiciel : le formulaire tient sur un ecran, on le relit d'un
                 coup d'oeil avant d'enregistrer.

                 En haut, ce qui est commun a la saisie : devis, client et pour
                 qui sur une ligne, les dates en bandeau dessous. Puis chaque
                 commande en pleine largeur, sur deux colonnes. Rien ne laisse
                 de vide : ni une colonne client de deux champs face a cinq
                 dates, ni une colonne reservee aux commandes ajoutees.

                 ⚠️ edit.blade.php en est le calque : meme ordre, memes blocs. --}}
            <form action="{{ route('commandes.store') }}" method="post" class="fc">
                @csrf
                <div class="row g-4">

                    {{-- ==================== REFABRICATION ==================== --}}
                    @if ($origine)
                        <div class="col-12">
                            <input type="hidden" name="refabrication_de" value="{{ $origine->id }}">

                            <div class="fc-refab">
                                <i class="bi bi-arrow-repeat"></i>
                                {{ __('Refabrication de la commande') }}
                                <a href="{{ route('commandes.show', $origine->id) }}" target="_blank" rel="noopener">n° {{ $origine->id }}</a>
                                · {{ mb_strtoupper((string) $origine->modele, 'UTF-8') }}
                                @if ($origine->created_at)
                                    · {{ __('commandée le :date', ['date' => $origine->created_at->format('d/m/Y')]) }}
                                @endif
                                <span class="text-muted">— {{ __('tout ce qui suit vient d’elle et reste modifiable') }}</span>
                            </div>

                            {{-- Fautif et raison : obligatoires, c'est ce qui rend la
                                 liste des refabrications utile. --}}
                            <div class="row g-3 mt-1">
                                <div class="col-md-4">
                                    <label for="fautif" class="form-label small mb-1">{{ __('Fautif') }} <span class="text-danger">*</span></label>
                                    <select name="fautif" id="fautif" class="form-select form-select-sm" required>
                                        <option value="">{{ __('-- Choisir --') }}</option>
                                        @foreach (config('commandes.fautifs', []) as $code => $meta)
                                            <option value="{{ $code }}" @selected(old('fautif') == $code)>{{ \App\Helpers\CommandeHelper::fautif($code) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label for="raison" class="form-label small mb-1">{{ __('Raison') }} <span class="text-danger">*</span></label>
                                    <textarea name="raison" id="raison" class="form-control form-control-sm" rows="2" maxlength="2000" required
                                        placeholder="{{ __('Ce qui ne va pas, pour l’usine et pour les statistiques') }}">{{ old('raison') }}</textarea>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- ==================== EN-TETE ==================== --}}
                    <div class="col-12">
                        @include('admin.commandes._devis', [
                            'devisId' => old('devis_id', $pre['devis_id'] ?? null),
                            'clientId' => old('client_id', $pre['client_id'] ?? null),
                            'negoce' => old('negoce', !empty($pre['negoce']) ? '1' : '0') == '1',
                            // Une refabrication reprend le choix de la commande
                            // d'origine, un retour de validation le sien.
                            'negoceAuto' => old('negoce') === null && !isset($pre['negoce']),
                        ])

                        {{-- Remplie par le script quand le devis se charge :
                             celle deja saisie pour ce devis, s'il y en a une. --}}
                        @include('admin.commandes._adresse_chantier', [
                            'adresseChantier' => null,
                            'devisId' => $pre['devis_id'] ?? null,
                            'clientId' => $pre['client_id'] ?? null,
                        ])

                        {{-- Les dates en bandeau, libelle au-dessus : cinq champs
                             courts sur une ligne plutot qu'une colonne de cinq
                             lignes. Les validateurs viennent de config/commandes.php. --}}
                        <div class="fc-bandeau">
                            <div class="fc-champ">
                                <label for="date_accueil">{{ __('Réception accueil') }}</label>
                                <input type="date" name="date_accueil" id="date_accueil" class="form-control form-control-sm" value="{{ old('date_accueil') }}">
                            </div>
                            <div class="fc-champ">
                                <label for="date_etude">{{ __("Réception bureau d'étude") }}</label>
                                <input type="date" name="date_etude" id="date_etude" class="form-control form-control-sm" value="{{ old('date_etude') }}">
                            </div>
                            <div class="fc-champ">
                                <label for="date_cotes_oks">{{ __('Vérif côtes') }}</label>
                                <input type="date" name="date_cotes_oks" id="date_cotes_oks" class="form-control form-control-sm" value="{{ old('date_cotes_oks') }}">
                            </div>
                            <div class="fc-champ">
                                <label for="visuel_valide">{{ __('Visuel validé') }}</label>
                                <input type="date" name="visuel_valide" id="visuel_valide" class="form-control form-control-sm" value="{{ old('visuel_valide') }}">
                            </div>
                            <div class="fc-champ">
                                <label for="validateur_visuel">{{ __('Validé par') }}</label>
                                <select name="validateur_visuel" id="validateur_visuel" class="form-select form-select-sm">
                                    <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>
                            </div>
                        </div>

                        {{-- La note sur les dates, repliee par defaut : elle est
                             rare, et un textarea vide donnait surtout l'impression
                             qu'il fallait le remplir. --}}
                        <div class="obs-bloc mt-2">
                            <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>

                            <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 form-control-sm" 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>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ==================== COMMANDE(S) ==================== --}}
                    <div class="col-12">

                        {{-- « Générer depuis le devis » : déroulé quand le devis
                             est chargé (js/commandes/lignes-devis.js). Les lignes
                             qu'il pose sont des propositions, chacune à cocher
                             « Vérifiée » avant l'envoi ; ce qu'il ne sait pas
                             convertir est listé dessous, à ajouter à la main.
                             Pas en refabrication : elle refait une commande, pas
                             un devis. --}}
                        @unless ($origine)
                            @php
                                $langGenerer = [
                                    'propose' => __('Le devis :id peut pré-remplir les commandes.'),
                                    'proposeUne' => __('Le devis :id peut pré-remplir 1 commande.'),
                                    'proposePlusieurs' => __('Le devis :id peut pré-remplir :n commandes.'),
                                    'proposeAucune' => __('Le devis :id ne pré-remplit aucune commande.'),
                                    'completerUne' => __('1 autre ligne est à compléter à la main.'),
                                    'completerPlusieurs' => __(':n autres lignes sont à compléter à la main.'),
                                    'chargement' => __('Lecture du devis…'),
                                    'generees' => __(':n ligne(s) générée(s) : vérifiez-les une à une.'),
                                    'aucune' => __('Rien à générer : aucun produit du devis ne se retrouve au catalogue.'),
                                    'erreur' => __('Le devis ne répond pas : saisissez les lignes à la main.'),
                                    'nonReprises' => __('Lignes du devis non reprises (:n)'),
                                    'ajouter' => __('Ajouter'),
                                ];
                            @endphp
                            <div id="generer-devis" class="ac-accordeon"
                                data-url="{{ route('commandes.devis.lignes', ['devis' => '__ID__']) }}"
                                data-lang="{{ json_encode($langGenerer, JSON_UNESCAPED_UNICODE) }}">
                                <div class="ac-accordeon-corps">
                                    <div class="fc-generer">
                                        <i class="bi bi-magic"></i>
                                        <span class="fc-generer-texte"></span>
                                        <button type="button" class="btn btn-sm btn-primary" id="generer-lignes">
                                            {{ __('Générer depuis le devis') }}
                                        </button>
                                        <small class="fc-generer-etat"></small>
                                    </div>
                                    <div class="fc-non-reprises"></div>
                                </div>
                            </div>
                        @endunless

                        <div id="commande-container">

                            <div class="commande-item fc-carte">
                                {{-- Une ligne posée par « Générer depuis le devis » :
                                     d'où elle vient, le texte du devis pour comparer,
                                     et la case qui empêche l'envoi tant qu'on ne l'a
                                     pas regardée. Caché et la case désactivée sur une
                                     ligne saisie à la main : rien ne bloque alors. --}}
                                <div class="fc-genere d-none">
                                    <div class="fc-genere-tete">
                                        <span><i class="bi bi-magic"></i> {{ __('Depuis le devis') }} : <strong class="fc-genere-code"></strong></span>
                                        <label class="form-check mb-0">
                                            <input class="form-check-input fc-verifiee" type="checkbox" disabled>
                                            <span class="form-check-label fw-semibold">{{ __('Vérifiée') }}</span>
                                        </label>
                                    </div>
                                    <details class="fc-genere-texte">
                                        <summary>{{ __('Texte du devis') }}</summary>
                                        <pre class="mb-0"></pre>
                                    </details>
                                </div>

                                {{-- Deux colonnes dans la carte : le produit a gauche
                                     (type, modele, couleur, finition), la livraison et
                                     les cotes a droite. --}}
                                <div class="row gx-4">
                                <div class="col-lg-6">

                                <div class="fc-ligne">
                                    <label>{{ __('Type') }}</label>
                                    <select name="items[0][type_id]" class="form-select form-select-sm type-select" required>
                                        <option value="">{{ __('-- Sélectionnez un type --') }}</option>
                                        @foreach ($types as $type)
                                            <option value="{{ $type->id }}" @selected(($pre['type_id'] ?? null) == $type->id)>{{ \App\Helpers\CommandeHelper::nomTraduit($type->nom) }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Modele et variation ne font qu'un champ : on tape, la
                                     liste du type se filtre, un clic fige le choix. Le
                                     texte saisi est poste aussi : `commandes.modele` est
                                     un libelle fige, un nom hors catalogue s'y enregistre
                                     aussi bien. Une entree choisie prime, le controleur
                                     resout alors le libelle sur l'id. --}}
                                <div class="fc-ligne">
                                    <label>{{ __('Modèle') }}</label>
                                    <div class="ac" data-ac="modele">
                                        <input type="text" class="form-control form-control-sm ac-input modele-input"
                                            name="items[0][modele]" maxlength="100"
                                            value="{{ $pre['modele'] ?? '' }}"
                                            placeholder="{{ !empty($pre['type_id']) ? __('Tapez un modèle, ex. C-100') : __('Choisir un type d\'abord') }}"
                                            autocomplete="off" @disabled(empty($pre['type_id'])) 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 et quantite : accessoire seulement. Replies,
                                     ils sont desactives et pas seulement masques : sinon
                                     une platine choisie puis un changement de type la
                                     posteraient sur un coulissant. --}}
                                <div class="d-none platine-hote">
                                    <div class="ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <div class="fc-ligne">
                                                <label>{{ __('Platine') }}</label>
                                                <select name="items[0][platine]" class="form-select form-select-sm platine-select" disabled>
                                                    <option value="">{{ __('-- Aucune --') }}</option>
                                                    @foreach (config('commandes.platines') as $code => $platine)
                                                        <option value="{{ $code }}" @selected(($pre['platine'] ?? null) == $code)>{{ __($platine['label']) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-none quantite-hote">
                                    <div class="ac-accordeon">
                                        <div class="ac-accordeon-corps">
                                            <div class="fc-ligne">
                                                <label>{{ __('Quantité') }}</label>
                                                <input type="number" name="items[0][quantite]" class="form-control form-control-sm quantite-input fc-court"
                                                    min="1" step="1" value="{{ $pre['quantite'] ?? 1 }}" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="fc-ligne">
                                    <label>{{ __('Couleur') }}</label>
                                    <div class="ac" data-ac="couleur">
                                        {{-- En refabrication, le texte est poste aussi : si
                                             aucune couleur de l'api ne porte plus le libelle
                                             d'origine, il vaut tel quel tant qu'on n'y touche
                                             pas (CommandeController::store). --}}
                                        <input type="text" class="form-control form-control-sm ac-input couleur-input"
                                            @if ($origine) name="items[0][couleur_texte]" @endif
                                            value="{{ $pre['couleur_texte'] ?? '' }}"
                                            placeholder="{{ __('Tapez une couleur, ex. RAL 7016') }}"
                                            autocomplete="off">
                                        <input type="hidden" name="items[0][couleur]" class="ac-couleur-id" value="{{ $pre['couleur_id'] ?? '' }}">
                                        <ul class="ac-menu" hidden></ul>
                                    </div>
                                </div>

                                {{-- Desactivee et videe sur « pas de laquage » : une
                                     piece qu'on ne laque pas n'a pas de finition. --}}
                                <div class="fc-ligne">
                                    <label>{{ __('Finition') }}</label>
                                    <select name="items[0][finition]" class="form-select form-select-sm finition-select">
                                        <option value="">{{ __('-- Aucune --') }}</option>
                                        @php $finition = array_key_exists('finition', $pre) ? $pre['finition'] : 1; @endphp
                                        <option value="1" @selected($finition == 1)>{{ __('Sablé') }}</option>
                                        <option value="2" @selected($finition == 2)>{{ __('Mât') }}</option>
                                        <option value="3" @selected($finition == 3)>{{ __('Brillant') }}</option>
                                    </select>
                                </div>

                                {{-- Les Oui/Non en interrupteurs, sous la finition : ils
                                     comblent la colonne du produit, plus courte que celle
                                     de la livraison, au lieu de faire une rangee a part.
                                     Le champ cache poste « Non » ; coche, l'interrupteur
                                     qui le suit l'emporte avec « Oui » (PHP garde la
                                     derniere valeur d'un meme nom). Le libelle enveloppe
                                     l'entree : pas d'id a renumeroter au clonage. --}}
                                <div class="fc-ligne">
                                    <span class="fc-ligne-titre">{{ __('Options') }}</span>
                                    <div class="fc-bascules fc-bascules-ligne">
                                        <input type="hidden" name="items[0][maconnerie]" value="Non">
                                        <label class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="items[0][maconnerie]" value="Oui" @checked(!empty($pre['maconnerie']))>
                                            {{ __('Maçonnerie') }}
                                        </label>
                                        <input type="hidden" name="items[0][cintrage]" value="Non">
                                        <label class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="items[0][cintrage]" value="Oui" @checked(!empty($pre['cintrage']))>
                                            {{ __('Cintrage') }}
                                        </label>
                                        <input type="hidden" name="items[0][decoupe_inox]" value="Non">
                                        <label class="form-check form-switch">
                                            <input class="form-check-input decoupe-bascule" type="checkbox" name="items[0][decoupe_inox]" value="Oui" @checked(!empty($pre['decoupe']))>
                                            {{ __('Découpe/Inox') }}
                                        </label>
                                    </div>
                                </div>

                                {{-- Découpes, déroulées par l'interrupteur : un champ de
                                     recherche et des étiquettes (vue _decoupes). --}}
                                <div class="pt-0 decoupes-container @if (empty($pre['decoupe'])) d-none @endif">
                                    <div class="ac-accordeon @if (!empty($pre['decoupe'])) ac-ouvert @endif">
                                    <div class="ac-accordeon-corps">
                                    <div class="fc-ligne fc-ligne-haut">
                                        <span class="fc-ligne-titre">{{ __('Découpes') }}</span>
                                        @include('admin.commandes._decoupes', ['nom' => 'items[0][decoupes][]', 'choisies' => $pre['decoupes'] ?? []])
                                    </div>
                                    </div>
                                    </div>
                                </div>
                                </div>

                                <div class="col-lg-6">
                                <div class="fc-ligne">
                                    <label>{{ __('Destination') }}</label>
                                    <select name="items[0][destination]" class="form-select form-select-sm">
                                        @php $destination = $pre['destination'] ?? 1; @endphp
                                        <option value="1" @selected($destination == 1)>{{ __('A poser') }}</option>
                                        <option value="2" @selected($destination == 2)>{{ __('A livrer') }}</option>
                                        <option value="3" @selected($destination == 3)>{{ __('A stocker') }}</option>
                                        <option value="4" @selected($destination == 4)>{{ __('A récupérer au dépôt') }}</option>
                                    </select>
                                </div>

                                {{-- Priorite et etat cote a cote : deux reglages courts.
                                     A la creation : EN ATTENTE, IN PROCESS (deja lancee
                                     a l'usine) ou STANDBY ; `selected` suit le clonage, une ligne
                                     ajoutee repart donc EN ATTENTE. --}}
                                <div class="fc-ligne">
                                    <label>{{ __('Priorité') }}</label>
                                    <div class="fc-paire">
                                        <select name="items[0][priorite]" class="form-select form-select-sm">
                                            @php $priorite = $pre['priorite'] ?? 1; @endphp
                                            <option value="1" @selected($priorite == 1)>{{ __('Normale') }}</option>
                                            <option value="2" @selected($priorite == 2)>{{ __('Refaire') }}</option>
                                            <option value="3" @selected($priorite == 3)>{{ __('Urgent') }}</option>
                                        </select>
                                        <div class="fc-sous-ligne">
                                            <label>{{ __('État') }}</label>
                                            <select name="items[0][etat]" class="form-select form-select-sm">
                                                @foreach ([2, 3, 1] as $code)
                                                    <option value="{{ $code }}" @selected($code === 2)>
                                                        {{ \App\Helpers\CommandeHelper::etat($code) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- Les cotes sur une ligne, en mm, selon le type : pas de
                                     longueur sur un accessoire, largeur sur un carport ou un
                                     store, pas de hauteur sur un store. Un champ replie est
                                     desactive et ne part pas ; le controleur le laisse nul
                                     de toute facon (CommandeController::cotes). --}}
                                <div class="fc-ligne">
                                    <label>{{ __('Dimensions') }} <small class="text-muted">mm</small></label>
                                    <div class="fc-cotes">
                                        <div class="longueur-hote">
                                            <div class="ac-accordeon ac-ouvert">
                                                <div class="ac-accordeon-corps">
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-text" title="{{ __('Longueur') }}">{{ __('Long.') }}</span>
                                                        <input type="text" name="items[0][longueur]" class="form-control longueur-input" aria-label="{{ __('Longueur') }}" value="{{ $pre['longueur'] ?? '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hauteur-hote">
                                            <div class="ac-accordeon ac-ouvert">
                                                <div class="ac-accordeon-corps">
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-text" title="{{ __('Hauteur') }}">{{ __('Haut.') }}</span>
                                                        <input type="text" name="items[0][hauteur]" class="form-control hauteur-input" aria-label="{{ __('Hauteur') }}" value="{{ $pre['hauteur'] ?? '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-none largeur-hote">
                                            <div class="ac-accordeon">
                                                <div class="ac-accordeon-corps">
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-text" title="{{ __('Largeur') }}">{{ __('Larg.') }}</span>
                                                        <input type="text" name="items[0][largeur]" class="form-control largeur-input" aria-label="{{ __('Largeur') }}" value="{{ $pre['largeur'] ?? '' }}" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="fc-ligne">
                                    <label>{{ __('Prix usine') }}</label>
                                    <input type="text" name="items[0][prix_usine]" class="form-control form-control-sm fc-court" value="{{ $pre['prix_usine'] ?? '' }}">
                                </div>

                                <div class="fc-ligne">
                                    <label>{{ __('Lien PDF') }}</label>
                                    <input type="text" name="items[0][url]" class="form-control form-control-sm" value="{{ $pre['url'] ?? '' }}">
                                </div>
                                </div>
                                </div>

                                <div class="obs-bloc mt-2">
                                    <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 form-control-sm" 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>

                                <button type="button" class="btn btn-danger btn-sm mt-2 remove-item"
                                    @if ($origine) style="display:none;" @endif>{{ __('Supprimer') }}</button>
                            </div>
                        </div>

                        {{-- Une refabrication refait une commande : pas de seconde
                             ligne (le controleur le refuse aussi). --}}
                        <div class="d-flex gap-2 mt-3">
                            @unless ($origine)
                                <button type="button" id="add-item" class="btn btn-outline-secondary">+ {{ __('Ajouter une commande') }}</button>
                            @endunless
                            <button type="submit" class="btn btn-primary ms-auto">{{ $origine ? __('Créer la refabrication') : __('Ajouter') }}</button>
                        </div>
                    </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' }};

        // Carport et store ouvrent la largeur ; le store ferme la hauteur.
        const TYPE_CARPORT = {{ $typeCarport ?? 'null' }};
        const TYPE_STORE = {{ $typeStore ?? 'null' }};

        // Le prix usine se calcule comme a la calculatrice (js/commandes/prix-usine.js).
        const TYPE_COULISSANT = {{ $typeCoulissant ?? 'null' }};
        window.PRIX_ALU = {{ (float) $prixAlu }};

        /* Ouvre ou replie une cote. Repliee, elle est videe (une valeur tapee
           ne revient pas en changeant de type) et desactivee (elle ne part
           pas). */
        function basculerCote(item, nom, ouverte) {
            const hote = item.querySelector('.' + nom + '-hote');
            const champ = item.querySelector('.' + nom + '-input');

            if (!hote || !champ) {
                return;
            }

            if (!ouverte) {
                champ.value = '';
            }
            champ.disabled = !ouverte;
            window.acDerouler(hote, ouverte);
        }

        /* 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);
            }

            // Cotes : pas de longueur sur un accessoire, largeur sur un
            // carport ou un store, pas de hauteur sur un store.
            const valeur = type ? parseInt(type.value, 10) : NaN;
            const est = id => id !== null && valeur === id;

            basculerCote(item, 'longueur', !est(TYPE_ACCESSOIRE));
            basculerCote(item, 'hauteur', !est(TYPE_STORE));
            basculerCote(item, 'largeur', est(TYPE_CARPORT) || est(TYPE_STORE));
        }

        /* Accessoire ou cintrage : URGENT par defaut. L'accessoire est vite
           fait et attendu sur le chantier, le cintrage allonge la fabrication
           de trente jours : les deux doivent partir en tete de la liste de
           l'usine (tri par echeance).

           Un defaut seulement. La priorite ne repasse a NORMALE que si c'est
           nous qui l'avions mise a URGENT (`data-auto`), et plus rien n'y
           touche une fois choisie a la main (`data-manuelle`) : on
           n'ecraserait pas un choix, ni la priorite REFAIRE d'une
           refabrication. */
        function majPrioriteAuto(item) {
            const priorite = item?.querySelector('select[name$="[priorite]"]');

            if (!priorite || priorite.dataset.manuelle) {
                return;
            }

            const type = item.querySelector('.type-select');
            const cintrage = item.querySelector('input[type="checkbox"][name$="[cintrage]"]');
            const urgent = (TYPE_ACCESSOIRE !== null && type && parseInt(type.value, 10) === TYPE_ACCESSOIRE)
                || (cintrage && cintrage.checked);

            if (urgent && priorite.value === '1') {
                priorite.value = '3';
                priorite.dataset.auto = '1';
            } else if (!urgent && priorite.dataset.auto) {
                priorite.value = '1';
                delete priorite.dataset.auto;
            }
        }

        document.addEventListener('change', function (e) {
            const cible = e.target;

            if (cible.classList && cible.classList.contains('type-select')) {
                majAccessoire(cible.closest('.commande-item'));
                majPrioriteAuto(cible.closest('.commande-item'));
            } else if (cible.matches && cible.matches('input[type="checkbox"][name$="[cintrage]"]')) {
                majPrioriteAuto(cible.closest('.commande-item'));
            } else if (cible.matches && cible.matches('select[name$="[priorite]"]')) {
                cible.dataset.manuelle = '1';
                delete cible.dataset.auto;
            }
        });

        // Refabrication : le type arrive pre-rempli, sans evenement `change`.
        // On ouvre d'emblee ce qu'il demande (platine, largeur...) et on ferme
        // ce qu'il ne porte pas.
        @if ($origine)
            document.querySelectorAll('.commande-item').forEach(majAccessoire);
        @endif

        // 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

        // Absent en refabrication (une seule ligne) : `?.` evite que tout le
        // script s'arrete sur un bouton qui n'existe pas.
        document.getElementById('add-item')?.addEventListener('click', function() {
            const container = document.querySelector('#commande-container .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.
            });

            // 🔹 Découpes : la ligne ajoutée repart sans étiquette, et celles
            //    qu'on y posera doivent partir sous son propre index — le nom
            //    des champs cachés est lu sur `data-nom` au moment de l'ajout.
            clone.querySelectorAll('.dc').forEach(dc => {
                dc.dataset.nom = dc.dataset.nom.replace(/\[\d+\]/, `[${index}]`);
                window.acDecoupesVider(dc);
            });

            // 🔹 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 : '');
            }

            // 🔹 Ligne générée depuis le devis : le clone n'en est pas une. Sa
            //    marque et sa case « Vérifiée » repartent cachées et
            //    désactivées, sinon une ligne saisie à la main bloquerait l'envoi.
            window.acOublierGeneration?.(clone);

            // 🔹 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);

            // 🔹 Priorite : remise sur l'option par defaut, et sans les
            //    marqueurs de majPrioriteAuto, qui ont suivi le clonage. La
            //    nouvelle ligne n'a encore rien choisi.
            const prioriteClone = clone.querySelector('select[name$="[priorite]"]');
            if (prioriteClone) {
                const defaut = [...prioriteClone.options].find(o => o.defaultSelected);
                prioriteClone.value = defaut ? defaut.value : '1';
                delete prioriteClone.dataset.auto;
                delete prioriteClone.dataset.manuelle;
            }

            // 🔹 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++;
            majBoutonsSupprimer();
        });

        /* « Supprimer » sur chaque ligne, la premiere comprise : « Generer
           depuis le devis » peut poser en tete une ligne dont on ne veut pas.
           Sur la seule ligne, il la remplace par une ligne vierge (une
           commande en a au moins une) : tout effacer d'un coup. La
           refabrication n'a qu'une ligne, pre-remplie : rien a supprimer.

           Par delegation : les lignes sont clonees a la volee. */
        const peutAjouter = !!document.getElementById('add-item');

        function majBoutonsSupprimer() {
            const items = document.querySelectorAll('#commande-container .commande-item');

            items.forEach(item => {
                const bouton = item.querySelector('.remove-item');

                if (bouton) {
                    bouton.style.display = items.length > 1 || peutAjouter ? 'inline-block' : 'none';
                }
            });
        }

        /* La seule ligne, videe : une ligne neuve par « Ajouter une
           commande » (memes remises a zero que d'ordinaire), posee a sa place
           sans deroule — rien ne saute dans la page. La couleur, que le
           clonage garde, part aussi. */
        function remplacerParUneLigneVierge(item) {
            document.getElementById('add-item').click();

            const hote = document.querySelector('#commande-container .commande-hote:last-child');
            const neuve = hote?.querySelector('.commande-item');

            if (!neuve) {
                return;
            }

            const couleur = neuve.querySelector('.ac[data-ac="couleur"]');

            if (couleur && window.acReinitialiserCouleur) {
                window.acReinitialiserCouleur(couleur);
            }

            item.replaceWith(neuve);
            hote.remove();

            // Le brouillon (form-draft.js) suit la ligne neuve.
            neuve.closest('form')?.dispatchEvent(new Event('change'));
            neuve.querySelector('.type-select')?.focus();
        }

        document.addEventListener('click', function (e) {
            const bouton = e.target.closest('.remove-item');

            if (!bouton) {
                return;
            }

            const items = document.querySelectorAll('#commande-container .commande-item');
            const item = bouton.closest('.commande-item');

            if (!item) {
                return;
            }

            if (items.length <= 1) {
                if (peutAjouter) {
                    remplacerParUneLigneVierge(item);
                }

                return;
            }

            // 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.
            //
            // La premiere ligne n'a pas d'hote a replier (elle est posee par
            // la vue) : elle part sur-le-champ.
            const hoteSupprime = item.closest('.commande-hote');

            // Hors du compte tout de suite, et plus rien de poste : un envoi
            // pendant le repli ne doit pas emporter la ligne qu'on retire.
            item.classList.remove('commande-item');
            item.querySelectorAll('input, select, textarea').forEach(champ => { champ.disabled = true; });

            if (!hoteSupprime) {
                item.remove();
            } else {
                window.acDerouler(hoteSupprime, false);
                setTimeout(() => hoteSupprime.remove(), 300);
            }

            majBoutonsSupprimer();
        });
    </script>


    @include('admin.commandes._decoupes_catalogue', ['creer' => true])

    <script>
        // L'interrupteur Découpe/Inox déroule le choix des découpes ; le couper
        // retire les étiquettes, pour ne rien poster qu'on ne voit plus.
        document.addEventListener('change', function(e) {
            if (!e.target.classList.contains('decoupe-bascule')) return;

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

            const ouvert = e.target.checked;

            if (!ouvert) {
                window.acDecoupesVider(decoupes.querySelector('.dc'));
            }

            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>
    <script src="@assetV('js/calculatrice/prix-usine.js')" defer></script>
    <script src="@assetV('js/commandes/prix-usine.js')" defer></script>
    <script src="@assetV('js/commandes/adresse-chantier.js')" defer></script>
    <script src="@assetV('js/commandes/lignes-devis.js')" defer></script>

@endsection