@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
@section('titre-page', 'Saisie du comptage')
@section('content-body')

    @include('pages.stocks.partials.comptageTactile')

    <style>
        /* Écran de comptage plein écran : ni menu latéral ni barre d'application. Le compteur
           ne navigue pas d'ici, il compte ; le fil d'Ariane suffit à ressortir. */
        .app-header,
        .app-sidebar,
        .sidemenu-toggle {
            display: none !important;
        }

        .app-content {
            margin-inline-start: 0 !important;
            margin-block-start: 0 !important;
            margin-top: 0 !important;
        }

        /* Sous 992px, le gabarit réserve 3.75rem en haut pour l'en-tête fixe. L'en-tête
           étant masqué ici, cette réserve ne laisserait qu'un bandeau vide sur tablette. */
        .main-content {
            padding-block-start: 0 !important;
        }

        .saisie-comptage .cs-contexte {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #fff;
            border: 1px solid var(--default-border);
            border-radius: .5rem;
        }

        .saisie-comptage .cs-lot-info {
            background: #f7f8f9;
            border: 1px solid var(--default-border);
            border-radius: .5rem;
        }

        .saisie-comptage .cs-lot-info .k {
            font-size: .72rem;
            color: #8c9097;
            font-weight: 600;
        }

        .saisie-comptage .cs-lot-info .v {
            font-weight: 600;
            font-size: .98rem;
        }

        .saisie-comptage .cs-quantite {
            font-size: 2.2rem;
            font-weight: 700;
            height: 4.2rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
            border: 2px solid var(--primary03);
        }

        .saisie-comptage .cs-quantite:focus {
            border-color: var(--primary-color);
        }

        /* Le bouton d'ajout fait la hauteur du champ de quantité, à sa droite. */
        .saisie-comptage .cs-valider {
            min-height: 4.2rem;
            font-size: 1.05rem;
        }

        .saisie-comptage .cs-raccourcis kbd {
            background: #f0f1f7;
            color: #536485;
            border: 1px solid var(--default-border);
            border-radius: .25rem;
            padding: 0 .3rem;
            font-size: .72rem;
        }

        .saisie-comptage .cs-deja th,
        .saisie-comptage .cs-deja td {
            font-size: .82rem;
        }
    </style>

    <input type="hidden" id="IDINVENTAIRE" value="{{ $INVENTAIRE->IDINVENTAIRE }}">
    <input type="hidden" id="IDAGENCE_INVENTAIRE" value="{{ $INVENTAIRE->IDAGENCE }}">
    <input type="hidden" id="zoneSaisie" value="{{ $ZONESTOCKAGE->IDZONESTOCKAGE }}">
    <input type="hidden" id="personnelSaisie" value="{{ $PERSONNEL->IDPERSONNEL }}">

    <div class="saisie-comptage">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
            <div class="col-xl-12 col-12">
                <div class="row mb-2">
                    <div class="col-xl-7 col-lg-6 col-md-6 mt-2">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item text-light"><a href="{{ url('/') }}">Accueil</a></li>
                                <li class="breadcrumb-item text-light">
                                    <a href="{{ route('stock.comptage.demarrage') }}">Saisie d'inventaire</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Comptage</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-xl-5 col-lg-6 col-md-6 mt-md-0 mt-2">
                        <div class="d-flex gap-2 justify-content-md-end">
                            <button class="btn btn-outline-primary" id="btnModeTactile">
                                <i class="bx bx-tab"></i> &nbsp;Mode tablette
                            </button>
                            <a href="{{ route('stock.comptage.demarrage') }}" class="btn btn-outline-secondary">
                                <i class="bx bx-transfer-alt"></i> &nbsp;Changer de zone
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        {{-- ============================ CONTEXTE ============================ --}}
        <div class="cs-contexte p-2 mb-2">
            <div class="d-flex flex-wrap align-items-center gap-2">
                <span class="badge bg-info-transparent">Site : {{ $INVENTAIRE->NomAgence }}</span>
                <span class="badge bg-primary-transparent">Zone : {{ $ZONESTOCKAGE->NomZoneStockage }}</span>
                <span class="badge bg-success-transparent">
                    {{ $RangComptage == 4 ? 'COMPTAGE 800' : 'COMPTAGE ' . $RangComptage }}
                </span>
                <span class="badge bg-secondary-transparent">Compté par : {{ $PERSONNEL->NomPrenomPersonnel }}</span>
            </div>
        </div>

        <div class="row">

            {{-- ============================ SAISIE ============================ --}}
            <div class="col-xl-8 col-lg-7">
                <div class="card custom-card mb-2">
                    <div class="card-body p-3 tac-grand">

                        {{-- Produit --}}
                        <div class="row g-2 align-items-end mb-3">
                            <div class="col-md-9 col-12 tac-champ-hote">
                                <label class="form-label fw-semibold mb-1" for="produitComptage">Produit</label>
                                <select class="form-select" id="produitComptage"></select>
                            </div>
                            <div class="col-md-3 col-12">
                                <button class="btn btn-outline-info w-100" id="btnVoir" disabled>
                                    <i class="bx bx-show"></i> &nbsp;Voir
                                </button>
                            </div>
                        </div>

                        {{-- Lot --}}
                        <div class="row g-2 align-items-end mb-2">
                            <div class="col-md-9 col-12 tac-champ-hote">
                                <label class="form-label fw-semibold mb-1" for="lotComptage">Lot du produit</label>
                                <select class="form-select" id="lotComptage" disabled></select>
                            </div>
                            <div class="col-md-3 col-12">
                                <button class="btn btn-outline-warning w-100" id="btnModifier" disabled>
                                    <i class="bx bx-edit"></i> &nbsp;Modifier
                                </button>
                            </div>
                        </div>

                        {{-- Informations du lot choisi --}}
                        <div class="cs-lot-info p-2 mb-3 d-none" id="infoLot">
                            <div class="row g-2">
                                <div class="col-md-4 col-6">
                                    <div class="k">Numéro de lot</div>
                                    <div class="v" id="infoNumeroLot">—</div>
                                </div>
                                <div class="col-md-4 col-6">
                                    <div class="k">Date de péremption</div>
                                    <div class="v" id="infoPeremption">—</div>
                                </div>
                                <div class="col-md-4 col-6">
                                    <div class="k">Emplacement</div>
                                    <div class="v" id="infoEmplacement">—</div>
                                </div>
                                <div class="col-12" id="infoDejaCompte"></div>
                            </div>
                        </div>

                        {{-- Formulaire du lot, ouvert par « Modifier » ou par « Nouveau lot » --}}
                        <div class="border rounded p-2 mb-3 d-none" id="formulaireLot">
                            <div class="fw-semibold mb-2" id="titreFormulaireLot">Modifier le lot</div>
                            <div class="row g-2 align-items-end">
                                <div class="col-md-4 col-12">
                                    <label class="form-label mb-1" for="lotNumero">Numéro de lot <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="lotNumero">
                                </div>
                                <div class="col-md-3 col-6">
                                    <label class="form-label mb-1" for="lotPeremption">Péremption <span
                                            class="text-danger">*</span></label>
                                    <input type="date" class="form-control text-center" id="lotPeremption">
                                </div>
                                <div class="col-md-3 col-6 tac-champ-hote">
                                    <label class="form-label mb-1" for="lotEmplacement">Emplacement</label>
                                    <select class="form-select" id="lotEmplacement"></select>
                                </div>
                                <div class="col-md-2 col-12 d-flex gap-2">
                                    <button class="btn btn-secondary w-50" id="btnAnnulerLot">Annuler</button>
                                    <button class="btn btn-primary w-50" id="btnAppliquerLot">OK</button>
                                </div>
                                <div class="col-12 text-muted" style="font-size: 8.5pt" id="aideLot"></div>
                            </div>
                        </div>

                        {{-- Quantité et validation --}}
                        <div class="row g-2 align-items-end">
                            <div class="col-md-9 col-12">
                                <label class="form-label fw-semibold mb-1" for="quantiteCollectee">Quantité
                                    comptée</label>
                                <input type="text" inputmode="numeric" class="form-control cs-quantite text-center"
                                    id="quantiteCollectee" value="0" disabled>
                            </div>
                            <div class="col-md-3 col-12">
                                <button class="btn btn-success w-100 cs-valider" id="btnCompter" disabled>
                                    <i class="bx bx-check"></i> &nbsp;<span id="libelleValider">Ajouter</span>
                                </button>
                                <button class="btn btn-outline-secondary w-100 mt-1 d-none" id="btnAnnulerLigne">
                                    Annuler la modification
                                </button>
                            </div>
                        </div>

                        <div class="cs-raccourcis text-muted mt-2 tac-masque-tactile" style="font-size: 8.5pt">
                            <kbd>F2</kbd> produit &nbsp;·&nbsp; <kbd>F3</kbd> lot &nbsp;·&nbsp;
                            <kbd>F4</kbd> quantité &nbsp;·&nbsp; <kbd>Entrée</kbd> compter &nbsp;·&nbsp;
                            <kbd>Échap</kbd> vider
                        </div>
                    </div>
                </div>
            </div>

            {{-- ============================ PAVE + DEJA SAISIS ============================ --}}
            <div class="col-xl-4 col-lg-5">

                <div class="card custom-card mb-2 tac-uniquement">
                    <div class="card-body p-2">
                        <div class="tac-pave">
                            <button type="button" class="tac-touche" data-chiffre="7">7</button>
                            <button type="button" class="tac-touche" data-chiffre="8">8</button>
                            <button type="button" class="tac-touche" data-chiffre="9">9</button>
                            <button type="button" class="tac-touche" data-chiffre="4">4</button>
                            <button type="button" class="tac-touche" data-chiffre="5">5</button>
                            <button type="button" class="tac-touche" data-chiffre="6">6</button>
                            <button type="button" class="tac-touche" data-chiffre="1">1</button>
                            <button type="button" class="tac-touche" data-chiffre="2">2</button>
                            <button type="button" class="tac-touche" data-chiffre="3">3</button>
                            <button type="button" class="tac-touche" data-chiffre="00">00</button>
                            <button type="button" class="tac-touche" data-chiffre="0">0</button>
                            <button type="button" class="tac-touche tac-action" data-chiffre="effacer">
                                <i class="bx bx-left-arrow-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- ============================ LOTS DEJA SAISIS ============================ --}}
        <div class="modal fade" id="modalDejaSaisis" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h6 class="modal-title">
                            Lots déjà saisis <span class="text-muted" id="titreProduitSaisis"></span>
                        </h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body p-2">
                        <div class="table-responsive">
                            <table class="table table-sm cs-deja mb-0">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th>Numéro lot</th>
                                        <th class="text-center">Date péremption</th>
                                        <th class="text-center">Qté comptée</th>
                                        <th>Compté par</th>
                                        <th>Saisi par</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="corpsDejaSaisis"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('script')
    <script>
        $(function() {

            // Lots du produit affiché, tels que renvoyés par le serveur.
            var lots = []
            // Lignes de comptage du produit dans la zone : une par validation.
            var lignesSaisies = []
            // Ligne reprise depuis « Lots déjà saisis » : la validation la corrige au lieu
            // d'en ajouter une nouvelle.
            var ligneEnEdition = null
            // Lot en cours de comptage.
            var lotChoisi = null
            // Produit affiché.
            var produitAffiche = null
            // "modification" ou "nouveau" selon ce que le formulaire de lot est en train de faire.
            var modeLot = "modification"
            // Lot saisi de toutes pièces, tant qu'il n'a pas été compté.
            var lotNouveau = null

            var LOT_NOUVEAU = "__nouveau"

            /* ============================ MODE TACTILE ============================ */

            Tactile.init()

            function appliquerModeSaisie() {
                // Tablette : le champ reste en lecture seule, le pavé écrit dedans. Le clavier
                // natif recouvrirait la liste des lots.
                $("#quantiteCollectee").prop("readonly", Tactile.estActif())
                $("#btnModeTactile").toggleClass("btn-primary", Tactile.estActif())
                    .toggleClass("btn-outline-primary", !Tactile.estActif())
            }

            $(document).on("click", "#btnModeTactile", function() {
                Tactile.basculer()
                appliquerModeSaisie()
            })

            $(document).on("tactile:mode", appliquerModeSaisie)
            appliquerModeSaisie()

            /* ============================ AFFICHAGE ============================ */

            function nombre(valeur) {
                return formatNumberPerf(valeur)
            }

            function libelleLot(lot) {
                return (lot.NumeroLot || "(sans numéro)") + " · " + (lot.DatePeremptionFormatee || "sans péremption") +
                    (lot.discriminant ? " · " + lot.discriminant : "")
            }

            /**
             * Une zone porte parfois plusieurs lignes de stock pour le même numéro de lot et la
             * même péremption : elles sont bien distinctes — chacune a son stock et sa ligne
             * d'inventaire — mais rien ne les séparait à l'écran. On ajoute alors de quoi les
             * reconnaître : le NTSP, et à défaut la référence interne du lot.
             */
            function calculerDiscriminants() {

                let parLot = {}
                let parNtsp = {}

                $.each(lots, function(index, lot) {
                    let cle = lot.NumeroLot + "|" + lot.DatePeremption
                    parLot[cle] = (parLot[cle] || 0) + 1
                    parNtsp[cle + "|" + lot.NumeroTracabilite] = (parNtsp[cle + "|" + lot
                        .NumeroTracabilite] || 0) + 1
                })

                $.each(lots, function(index, lot) {

                    let cle = lot.NumeroLot + "|" + lot.DatePeremption
                    lot.discriminant = ""

                    if (parLot[cle] <= 1) {
                        return
                    }

                    if (lot.NumeroTracabilite && parNtsp[cle + "|" + lot.NumeroTracabilite] <= 1) {
                        lot.discriminant = "NTSP " + lot.NumeroTracabilite
                    } else if (lot.IDSTOCKAGENCE_LOTS != "0") {
                        lot.discriminant = "réf " + lot.IDSTOCKAGENCE_LOTS
                    }
                })
            }

            function detailLot(lot) {
                return (lot.QteComptee !== null ? "Déjà compté " + nombre(lot.QteComptee) : "Non compté") +
                    (lot.NomEmplacement ? " · " + lot.NomEmplacement : "")
            }

            function remplirSelectLots() {

                $("#lotComptage").html(
                    `<option value="">-- CHOISIR UN LOT --</option>
                     <option value="${LOT_NOUVEAU}" data-detail="Le lot sera créé à la mise à jour des stocks">➕ Nouveau lot (absent de la liste)</option>`
                )

                $.each(lots, function(index, lot) {
                    $("#lotComptage").append(
                        $("<option>")
                        .val(index)
                        .attr("data-detail", detailLot(lot))
                        .text(libelleLot(lot))
                    )
                })

                if ($("#lotComptage").hasClass("select2-hidden-accessible")) {
                    $("#lotComptage").select2("destroy")
                }

                $("#lotComptage").prop("disabled", false).select2({
                    placeholder: "Rechercher un lot…"
                })

                Tactile.brancherSelect("#lotComptage", {
                    titre: "Lot du produit",
                    sousTitre: produitAffiche ? produitAffiche.DesignationProduit : "",
                    invite: "Toucher pour choisir le lot",
                    libelle: "Lot du produit",
                })
            }

            function afficherInfoLot() {

                if (lotChoisi == null) {
                    $("#infoLot").addClass("d-none")
                    $("#btnModifier, #btnCompter").prop("disabled", true)
                    $("#quantiteCollectee").prop("disabled", true).val(0)
                    return false
                }

                $("#infoNumeroLot").text(lotChoisi.NumeroLot || "—")
                $("#infoPeremption").text(lotChoisi.DatePeremptionFormatee || "—")
                $("#infoEmplacement").text(lotChoisi.NomEmplacement || "—")

                $("#infoDejaCompte").html(lotChoisi.QteComptee !== null ?
                    `<span class="badge bg-warning-transparent">Déjà compté sur ce lot : ${nombre(lotChoisi.QteComptee)} — la validation ajoutera une ligne.</span>` :
                    "")

                $("#infoLot").removeClass("d-none")
                $("#btnModifier, #btnCompter").prop("disabled", false)
                $("#quantiteCollectee").prop("disabled", false)
                    .val(lotChoisi.QteComptee !== null ? lotChoisi.QteComptee : 0)
            }

            /* ============================ CHARGEMENTS ============================ */

            function chargerEmplacements() {
                return $.ajax({
                    type: "GET",
                    url: "{{ route('stock.getEmplParRack', '') }}/" + $("#zoneSaisie").val(),
                    data: {
                        isRack: 0,
                        IDAGENCE: $("#IDAGENCE_INVENTAIRE").val(),
                    },
                    dataType: "json",
                    success: function(response) {
                        $("#lotEmplacement").html('<option value="0">AUCUN</option>')
                        if (response.error == false) {
                            $.each(response.data, function(index, emplacement) {
                                $("#lotEmplacement").append(
                                    `<option value="${emplacement.IDEMPLACEMENT}">${emplacement.NomEmplacement}</option>`
                                )
                            })
                        }

                        // Une zone porte des centaines d'emplacements : sans recherche la
                        // liste est inexploitable.
                        if ($("#lotEmplacement").hasClass("select2-hidden-accessible")) {
                            $("#lotEmplacement").select2("destroy")
                        }
                        $("#lotEmplacement").select2({
                            placeholder: "Rechercher un emplacement…",
                            // Le panneau du lot est replié à l'initialisation : sans largeur
                            // explicite, select2 se figerait à zéro pixel.
                            width: "100%"
                        })

                        Tactile.brancherSelect("#lotEmplacement", {
                            titre: "Emplacement du lot",
                            invite: "Toucher pour choisir",
                            libelle: "Emplacement",
                        })
                    }
                });
            }

            // Repère du lot à retrouver après un enregistrement : son identifiant de stock
            // quand il existe, sinon son numéro et sa péremption. Deux lots du produit peuvent
            // porter le même numéro — viser le numéro seul désignerait parfois l'autre.
            function repereLot(lot) {
                return {
                    IDSTOCKAGENCE_LOTS: lot.IDSTOCKAGENCE_LOTS,
                    NumeroLot: lot.NumeroLot,
                    DatePeremption: lot.DatePeremption,
                }
            }

            function memeLot(lot, repere) {
                if (repere.IDSTOCKAGENCE_LOTS != "0") {
                    return lot.IDSTOCKAGENCE_LOTS == repere.IDSTOCKAGENCE_LOTS
                }
                return lot.IDSTOCKAGENCE_LOTS == "0" &&
                    lot.NumeroLot == repere.NumeroLot &&
                    lot.DatePeremption == repere.DatePeremption
            }

            function chargerLots(idProduit, repere) {

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.saisieSimplifiee.lotsProduit') }}",
                    data: {
                        IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                        IDZONESTOCKAGE: $("#zoneSaisie").val(),
                        IDPRODUIT: idProduit,
                    },
                    dataType: "json",
                    success: function(response) {

                        if (response.error == true) {
                            notifWarning(response.messages)
                            return false
                        }

                        produitAffiche = response.produit
                        lots = response.lots
                        lignesSaisies = response.lignes || []
                        lotChoisi = null
                        lotNouveau = null

                        quitterCorrection()
                        calculerDiscriminants()
                        remplirSelectLots()
                        masquerFormulaireLot()
                        afficherInfoLot()
                        remplirDejaSaisis()

                        $("#btnVoir").prop("disabled", false)

                        // Correction des informations d'un lot : on revient dessus. Après un
                        // comptage en revanche, repère vaut null — le formulaire reste vide,
                        // prêt pour le lot suivant du même produit.
                        if (repere != null) {
                            let indice = lots.findIndex(l => memeLot(l, repere))
                            if (indice >= 0) {
                                $("#lotComptage").val(String(indice)).trigger("change")
                                return false
                            }
                        }

                        if (!Tactile.estActif()) {
                            $("#lotComptage").select2("open")
                        }
                    },
                    error: function() {
                        notifWarning("Impossible de charger les lots du produit !")
                    }
                });
            }

            function remplirDejaSaisis() {

                $("#titreProduitSaisis").text(produitAffiche ? "— " + produitAffiche.DesignationProduit : "")

                if (lignesSaisies.length == 0) {
                    $("#corpsDejaSaisis").html(
                        `<tr><td colspan="6" class="text-center text-muted">Aucune ligne saisie pour ce produit.</td></tr>`
                    )
                    return false
                }

                $("#corpsDejaSaisis").html(lignesSaisies.map(function(ligne, index) {
                    return `<tr>
                                <td>
                                    <div class="fw-semibold">${ligne.NumeroLot || '(sans numéro)'}</div>
                                    <div class="text-muted" style="font-size:.72rem">${ligne.NomEmplacement ? ligne.NomEmplacement : ''}</div>
                                </td>
                                <td class="text-center">${ligne.DatePeremptionFormatee || '—'}</td>
                                <td class="text-center fw-semibold">${nombre(ligne.QteComptee)}</td>
                                <td>${ligne.ComptePar || '—'}</td>
                                <td>
                                    ${ligne.SaisiPar || '—'}
                                    <div class="text-muted" style="font-size:.72rem">${ligne.SaisieLe || ''}</div>
                                </td>
                                <td class="text-center text-nowrap">
                                    <span class="btn btn-sm btn-outline-warning btn-icon btnCorrigerLigne"
                                        data-index="${index}" title="Modifier cette ligne de comptage">
                                        <i class="bx bx-edit" style="font-size:14px"></i>
                                    </span>
                                    <span class="btn btn-sm btn-outline-danger btn-icon btnSupprimerLigne"
                                        data-index="${index}" title="Supprimer cette ligne de comptage">
                                        <i class="bx bx-trash" style="font-size:14px"></i>
                                    </span>
                                </td>
                            </tr>`
                }).join(""))
            }

            /**
             * Supprime une ligne de comptage.
             *
             * À partir du comptage 2, l'opération passe par le mot de passe : on efface alors
             * une saisie qui a déjà servi de référence à un recomptage.
             */
            $(document).on("click", ".btnSupprimerLigne", function() {

                let ligne = lignesSaisies[parseInt($(this).data("index"), 10)]

                if (ligne == undefined) {
                    return false
                }

                let rappel = (ligne.NumeroLot || "(sans numéro)") + " — " + nombre(ligne.QteComptee) + " unité(s)"

                if ({{ (int) $RangComptage }} >= 2) {

                    confirmMdp('{{ csrf_token() }}', () => supprimerLigne(ligne.IDINVENTAIRE_LIGNE_ZONE),
                        null,
                        "Veuillez saisir votre mot de passe pour supprimer la ligne " + rappel
                    ).catch(() => {})

                    return false
                }

                confirmAction(() => supprimerLigne(ligne.IDINVENTAIRE_LIGNE_ZONE),
                    "Supprimer cette ligne de comptage ?", rappel)
            })

            function supprimerLigne(IDLigne) {

                $.ajax({
                    type: "DELETE",
                    url: "{{ route('stock.saisieSimplifiee.supprimer') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDINVENTAIRE_LIGNE_ZONE: IDLigne,
                    },
                    dataType: "JSON",
                    success: function(response) {

                        if (response.error == true) {
                            notifWarning(response.messages)
                            return false
                        }

                        notifSuccess(response.messages)
                        chargerLots(produitAffiche ? produitAffiche.IDPRODUIT : 0)
                    },
                    error: function(response) {
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                    }
                });
            }

            /** Reprend une ligne déjà saisie dans le formulaire pour en corriger la quantité. */
            function corrigerLigne(ligne) {

                let indice = lots.findIndex(function(lot) {
                    if (ligne.IDSTOCKAGENCE_LOTS != "0") {
                        return lot.IDSTOCKAGENCE_LOTS == ligne.IDSTOCKAGENCE_LOTS
                    }
                    return lot.IDSTOCKAGENCE_LOTS == "0" && lot.NumeroLot == ligne.NumeroLot &&
                        lot.DatePeremption == ligne.DatePeremption
                })

                if (indice < 0) {
                    alertSwal("Le lot de cette ligne n'est plus proposé pour cette zone.")
                    return false
                }

                ligneEnEdition = ligne
                $("#lotComptage").val(String(indice)).trigger("change")

                $("#quantiteCollectee").val(ligne.QteComptee).focus().select()
                $("#libelleValider").text("Enregistrer")
                $("#btnAnnulerLigne").removeClass("d-none")
            }

            function quitterCorrection() {
                ligneEnEdition = null
                $("#libelleValider").text("Ajouter")
                $("#btnAnnulerLigne").addClass("d-none")
            }

            $(document).on("click", ".btnCorrigerLigne", function() {
                let ligne = lignesSaisies[parseInt($(this).data("index"), 10)]
                if (ligne == undefined) {
                    return false
                }
                bootstrap.Modal.getOrCreateInstance(document.getElementById("modalDejaSaisis")).hide()
                corrigerLigne(ligne)
            })

            $(document).on("click", "#btnAnnulerLigne", function() {
                quitterCorrection()
                $("#quantiteCollectee").val(0).focus()
            })

            /* ============================ PRODUIT ============================ */

            initSelect2ProduitAjax("#produitComptage", {
                labelFirst: "-- CHOISIR UN PRODUIT --",
                CMU: {{ $INVENTAIRE->InventaireCMU ? 'true' : 'false' }},
            })

            Tactile.brancherSelect("#produitComptage", {
                titre: "Produit",
                sousTitre: "Zone {{ $ZONESTOCKAGE->NomZoneStockage }}",
                invite: "Toucher pour choisir le produit",
                libelle: "Produit",
                source: function(terme) {
                    return $.getJSON("/produits/listingProduitSimpleSearch", {
                        code: (terme || "").toUpperCase()
                    }).then(function(reponse) {
                        return ((reponse && reponse.data) || []).map(function(p) {
                            return {
                                id: p.IDPRODUIT,
                                texte: p.DesignationProduit
                            }
                        })
                    })
                }
            })

            $(document).on("change", "#produitComptage", function() {

                if ($(this).val() == "" || $(this).val() == "0" || $(this).val() == null) {
                    return false
                }

                chargerLots($(this).val(), null)
            })

            /* ============================ LOT ============================ */

            $(document).on("change", "#lotComptage", function() {

                let valeur = $(this).val()

                if (valeur == LOT_NOUVEAU) {
                    lotChoisi = null
                    afficherInfoLot()
                    ouvrirFormulaireLot("nouveau", null)
                    return false
                }

                masquerFormulaireLot()

                if (valeur === "" || valeur === null) {
                    lotChoisi = null
                    afficherInfoLot()
                    return false
                }

                lotChoisi = lots[parseInt(valeur, 10)] ?? null
                afficherInfoLot()

                // Le champ est en lecture seule sur tablette : lui donner le focus n'ouvre
                // pas le clavier natif, et le pavé écrit directement dans la bonne case.
                $("#quantiteCollectee").focus().select()
            })

            $(document).on("click", "#btnVoir", function() {
                remplirDejaSaisis()
                bootstrap.Modal.getOrCreateInstance(document.getElementById("modalDejaSaisis")).show()
            })

            /* ============================ FORMULAIRE DU LOT ============================ */

            function ouvrirFormulaireLot(mode, lot) {

                modeLot = mode

                $("#titreFormulaireLot").text(mode == "nouveau" ? "Nouveau lot" : "Modifier le lot")
                $("#aideLot").text(mode == "nouveau" ?
                    "Ce lot n'existe pas en stock : il sera créé à la mise à jour des stocks de l'inventaire." :
                    "La correction porte sur la ligne d'inventaire ; le lot du stock n'est pas modifié.")

                $("#lotNumero").val(lot != null ? lot.NumeroLot : "")
                $("#lotPeremption").val(lot != null ? lot.DatePeremption : "")
                $("#lotEmplacement").val(lot != null ? lot.IDEMPLACEMENT : "0").trigger("change")
                Tactile.majDeclencheur($("#lotEmplacement"))

                $("#formulaireLot").removeClass("d-none")

                if (!Tactile.estActif()) {
                    $("#lotNumero").focus()
                }
            }

            function masquerFormulaireLot() {
                $("#formulaireLot").addClass("d-none")
            }

            $(document).on("click", "#btnModifier", function() {
                if (lotChoisi == null) return false
                ouvrirFormulaireLot("modification", lotChoisi)
            })

            $(document).on("click", "#btnAnnulerLot", function() {
                masquerFormulaireLot()
                if (modeLot == "nouveau") {
                    $("#lotComptage").val("").trigger("change")
                }
            })

            $(document).on("click", "#btnAppliquerLot", function() {

                let numero = $("#lotNumero").val().trim()
                let peremption = $("#lotPeremption").val()

                if (numero == "") {
                    alertSwal("Veuillez renseigner le numéro de lot !")
                    return false
                }

                if (peremption == "") {
                    alertSwal("Veuillez renseigner la date de péremption !")
                    return false
                }

                let emplacement = $("#lotEmplacement").val()
                let nomEmplacement = $("#lotEmplacement option:selected").text()

                if (modeLot == "nouveau") {

                    // Le lot n'existe nulle part : il vit à l'écran jusqu'à son comptage.
                    lotNouveau = {
                        IDINVENTAIRE_LIGNE_ZONE: "0",
                        IDSTOCKAGENCE_LOTS: "0",
                        IDTracabiliteStock: "0",
                        NumeroLot: numero,
                        DatePeremption: peremption,
                        DatePeremptionFormatee: peremption.split("-").reverse().join("/"),
                        IDEMPLACEMENT: emplacement,
                        NomEmplacement: nomEmplacement,
                        StockTheorique: 0,
                        QteComptee: null,
                        Ecart: null,
                        lotACreer: true,
                    }

                    lotChoisi = lotNouveau
                    masquerFormulaireLot()
                    afficherInfoLot()
                    $("#quantiteCollectee").focus().select()
                    return false
                }

                lotChoisi.NumeroLot = numero
                lotChoisi.DatePeremption = peremption
                lotChoisi.DatePeremptionFormatee = peremption.split("-").reverse().join("/")
                lotChoisi.IDEMPLACEMENT = emplacement
                lotChoisi.NomEmplacement = nomEmplacement

                // Ligne déjà enregistrée : la correction part tout de suite au serveur.
                if (lotChoisi.IDINVENTAIRE_LIGNE_ZONE != "0") {
                    enregistrer("PUT", "{{ route('stock.saisieSimplifiee.modifier') }}", {
                        IDINVENTAIRE_LIGNE_ZONE: lotChoisi.IDINVENTAIRE_LIGNE_ZONE,
                        NumeroLotProduit: lotChoisi.NumeroLot,
                        DatePeremption: lotChoisi.DatePeremption,
                        IDEmp: lotChoisi.IDEMPLACEMENT,
                        QteComptee: lotChoisi.QteComptee !== null ? lotChoisi.QteComptee : 0,
                        IDComptePar: $("#personnelSaisie").val(),
                    }, repereLot(lotChoisi))
                    return false
                }

                masquerFormulaireLot()
                afficherInfoLot()
            })

            /* ============================ QUANTITE ============================ */

            $(document).on("click", ".tac-pave .tac-touche", function() {

                if ($("#quantiteCollectee").prop("disabled")) {
                    return false
                }

                let chiffre = String($(this).data("chiffre"))
                let valeur = String($("#quantiteCollectee").val() || "")

                if (chiffre == "effacer") {
                    valeur = valeur.slice(0, -1)
                } else {
                    valeur = (valeur == "0" ? "" : valeur) + chiffre
                }

                $("#quantiteCollectee").val(valeur.slice(0, 6) || "0")
            })

            $(document).on("input", "#quantiteCollectee", function() {
                $(this).val($(this).val().replace(/[^0-9]/g, ""))
            })

            /* ============================ COMPTER ============================ */

            /**
             * @param {object|null} repere  lot sur lequel revenir après l'enregistrement.
             *                              À null, le formulaire se vide et ne garde que le
             *                              produit : c'est le geste attendu après un comptage,
             *                              on enchaîne sur le lot suivant.
             */
            function enregistrer(methode, route, donnees, repere) {

                donnees._token = "{{ csrf_token() }}"

                $.ajax({
                    type: methode,
                    url: route,
                    data: donnees,
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {

                        completeHandler()

                        if (response.error == true) {
                            notifWarning(response.messages)
                            return false
                        }

                        notifSuccess(response.messages)
                        chargerLots(produitAffiche.IDPRODUIT, repere)
                    },
                    error: function(response) {
                        completeHandler()
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                    }
                });
            }

            function compter() {

                if (lotChoisi == null) {
                    alertSwal("Veuillez choisir le lot à compter !")
                    return false
                }

                let quantite = $("#quantiteCollectee").val()

                if (quantite === "" || isNaN(quantite)) {
                    alertSwal("Veuillez renseigner une quantité collectée valide !")
                    return false
                }

                // Correction d'une ligne reprise dans « Lots déjà saisis » : sa quantité est
                // remplacée.
                if (ligneEnEdition != null) {
                    enregistrer("PUT", "{{ route('stock.saisieSimplifiee.modifier') }}", {
                        IDINVENTAIRE_LIGNE_ZONE: ligneEnEdition.IDINVENTAIRE_LIGNE_ZONE,
                        NumeroLotProduit: lotChoisi.NumeroLot,
                        DatePeremption: lotChoisi.DatePeremption,
                        IDEmp: lotChoisi.IDEMPLACEMENT,
                        QteComptee: quantite,
                        IDComptePar: $("#personnelSaisie").val(),
                    }, null)
                    return false
                }

                // Sinon chaque validation ajoute une ligne de comptage, même sur un lot déjà
                // compté : les quantités se cumulent ligne par ligne, et chacune garde qui l'a
                // comptée et qui l'a saisie.
                enregistrer("POST", "{{ route('stock.saisieSimplifiee.ajouter') }}", {
                    IDInven: $("#IDINVENTAIRE").val(),
                    IDZONESTOCKAGE: $("#zoneSaisie").val(),
                    ProdAjoute: produitAffiche.IDPRODUIT,
                    IDSTOCKAGENCE_LOTS: lotChoisi.IDSTOCKAGENCE_LOTS,
                    IDTracabiliteStock: lotChoisi.IDTracabiliteStock,
                    NumeroLotProduit: lotChoisi.NumeroLot,
                    DatePeremption: lotChoisi.DatePeremption,
                    IDEmp: lotChoisi.IDEMPLACEMENT,
                    QteComptee: quantite,
                    IDComptePar: $("#personnelSaisie").val(),
                    nouvelleLigne: 1,
                }, null)
            }

            $(document).on("click", "#btnCompter", compter)

            /* ============================ CLAVIER (POSTE FIXE) ============================ */

            $(document).on("keydown", function(evt) {

                if ($("#tacEcran").is(":visible")) {
                    return
                }

                if (evt.key == "F2") {
                    evt.preventDefault()
                    $("#produitComptage").select2("open")
                } else if (evt.key == "F3") {
                    evt.preventDefault()
                    if (!$("#lotComptage").prop("disabled")) {
                        $("#lotComptage").select2("open")
                    }
                } else if (evt.key == "F4") {
                    evt.preventDefault()
                    $("#quantiteCollectee").focus().select()
                } else if (evt.key == "Escape") {
                    $("#quantiteCollectee").val(0)
                } else if (evt.key == "Enter") {
                    // Entrée dans le formulaire du lot valide le lot, pas le comptage.
                    if ($("#formulaireLot").hasClass("d-none") == false &&
                        $(evt.target).closest("#formulaireLot").length > 0) {
                        evt.preventDefault()
                        $("#btnAppliquerLot").click()
                        return
                    }
                    if ($(evt.target).is("#quantiteCollectee") || $(evt.target).is("body")) {
                        evt.preventDefault()
                        compter()
                    }
                }
            })

            /* ============================ DEMARRAGE ============================ */

            chargerEmplacements().then(function() {
                if (!Tactile.estActif()) {
                    $("#produitComptage").select2("open")
                }
            })
        })
    </script>
@endsection