@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
@section('titre-page', 'Récapitulatif d\'inventaire')
@section('content-body')

    <style>
        /* Écran de consultation plein écran : ni menu latéral ni barre d'application.
           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;
        }

        .recap-inventaire .nav-tabs .nav-link {
            font-weight: 600;
        }

        /* Grille de saisie du comptage 2 : la cellule de quantité reste la seule modifiable. */
        .recap-inventaire .cs-grille .cs-qte {
            width: 7rem;
            margin: 0 auto;
            text-align: center;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .recap-inventaire .cs-grille tr.cs-active {
            background: var(--primary01) !important;
        }

        /* L'en-tête suit le défilement. Son fond doit être posé sur la cellule elle-même :
           porté par le thead, il resterait derrière les lignes qui passent dessous.

           La hauteur du cadre est ce qui rend la chose possible : « sticky » se cale sur le
           plus proche ancêtre qui défile, et #cadreComptage2, borné en hauteur, en est un. */
        .recap-inventaire .cs-grille thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #182c37;
            color: #fff;
        }

        /* Tableaux rendus en DataTable : scrollX place déjà l'en-tête dans un tableau à part,
           au-dessus du corps. Le rendre collant suffit -- à condition qu'aucun ancêtre ne
           défile entre lui et la fenêtre, ce pourquoi ces tableaux ne sont plus enveloppés
           dans .table-responsive : son débordement horizontal aurait capté le calage. */
        /* Nombre de lignes du volet, posé dans son onglet dès qu'il a été chargé. */
        .recap-inventaire .compteur-volet:not(:empty) {
            display: inline-block;
            margin-inline-start: .35rem;
            padding: 0 .35rem;
            border-radius: .6rem;
            background: rgba(var(--primary-rgb), .12);
            color: rgb(var(--primary-rgb));
            font-size: 7.5pt;
            font-weight: 600;
        }

        .recap-inventaire .dataTables_scrollHead {
            position: sticky;
            top: 0;
            z-index: 4;
            background: #182c37;
        }
    </style>

    <input type="hidden" id="IDINVENTAIRE" value="{{ $INVENTAIRE->IDINVENTAIRE }}">
    <input type="hidden" id="IDAGENCE_INVENTAIRE" value="{{ $INVENTAIRE->IDAGENCE }}">

    <div class="recap-inventaire">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between mt-3 page-header-breadcrumb">
            <div class="col-xl-12 col-12">
                <div class="row mb-2">
                    <div class="col-12 mt-2">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item text-light">
                                    <a href="{{ route('stock.inventaireSocks.index') }}">Inventaire de stocks</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Récapitulatif</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        {{-- ============================ EN-TETE DE L'INVENTAIRE ============================ --}}
        <div class="card custom-card mb-2">
            <div class="card-header d-block p-2">
                <span class="fw-semibold">Inventaire N° {{ $INVENTAIRE->NumeroInventaire }}</span>
                <span class="badge bg-primary-transparent ms-2">
                    {{ \Carbon\Carbon::parse($INVENTAIRE->DateInventaire)->format('d/m/Y') }}
                </span>
                <span class="badge bg-info-transparent ms-1">{{ $INVENTAIRE->NomAgence }}</span>
                <span class="badge bg-dark-transparent ms-1">
                    {{ $INVENTAIRE->ModeInventaire == 1 ? 'PAR LOT' : 'PAR PRODUIT' }}
                </span>
                <span class="badge bg-secondary-transparent ms-1">
                    {{ $INVENTAIRE->TypeInventaire == 1 ? 'GENERAL' : 'PARTIEL' }}
                </span>
                <span class="badge bg-secondary-transparent ms-1">
                    {{ $INVENTAIRE->CategorieInventaire == 1 ? 'FISCAL' : 'TOURNANT' }}
                </span>
                <div class="text-muted mt-1" style="font-size: 9pt">
                    {{ $INVENTAIRE->CommentaireInventaire }}
                </div>
            </div>

            {{-- ============================ FILTRES ============================ --}}
            <div class="card-body p-2 bg-warning-transparent">
                <div class="row g-2 align-items-end">
                    <div class="col-xl-3 col-md-6" id="hoteFiltreZone">
                        <p class="mb-0 text-muted" style="font-size: 8.5pt">Zone de stockage</p>
                        {{-- id distinct de IDZONESTOCKAGE : un modal du gabarit porte déjà cet identifiant --}}
                        <select class="form-select" name="filtreZone" id="filtreZone"></select>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <p class="mb-0 text-muted" style="font-size: 8.5pt">Produit</p>
                        <select class="form-select" id="filtreProduit"></select>
                    </div>
                    <div class="col-xl-2 col-md-4">
                        <p class="mb-0 text-muted" style="font-size: 8.5pt">Comptage</p>
                        <select class="form-select" id="filtreComptage">
                            <option value="">TOUS</option>
                            <option value="1">COMPTAGE 1</option>
                            <option value="2">COMPTAGE 2</option>
                            <option value="3">COMPTAGE 3</option>
                        </select>
                    </div>
                    <div class="col-xl-2 col-md-4">
                        <p class="mb-0 text-muted" style="font-size: 8.5pt">Écart</p>
                        <select class="form-select" id="filtreEcart">
                            <option value="">TOUS</option>
                            <option value="avec">AVEC ÉCART</option>
                            <option value="sans">SANS ÉCART</option>
                        </select>
                    </div>
                    <div class="col-xl-1 col-md-4">
                        <button class="btn btn-outline-secondary w-100" id="btnReinitialiser" title="Réinitialiser">
                            <i class="bx bx-reset"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-1 mt-1">
                    <div class="text-muted" style="font-size: 8.5pt">
                        <i class="bx bx-info-circle"></i>
                        Les tableaux sont triés du dernier comptage au plus ancien.
                    </div>
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-primary" id="btnActualiserPrix"
                            title="Reprendre les prix en vigueur sur les lignes de cet inventaire">
                            <i class="bx bx-refresh"></i> &nbsp;Actualiser les prix
                        </button>
                        <button class="btn btn-sm btn-success" id="btnExportExcel"
                            title="Exporter l'inventaire au niveau du lot, selon les filtres">
                            <i class="bx bxs-file-export"></i> &nbsp;Exporter en Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================ RECAPITULATIFS ============================ --}}
        <div class="card custom-card">
            <div class="card-body p-1">
                <ul class="nav nav-tabs mb-3 border-0" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" role="tab" href="#ongletProduit"
                            data-niveau="produit" aria-selected="true">Par produit<span class="compteur-volet"></span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" role="tab" href="#ongletZone" data-niveau="zone"
                            aria-selected="false">Par zone<span class="compteur-volet"></span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" role="tab" href="#ongletLot" data-niveau="lot"
                            aria-selected="false">Par lot<span class="compteur-volet"></span></a>
                    </li>
                    {{-- Visibles une fois l'inventaire passé au comptage 2. --}}
                    <li class="nav-item d-none" id="ongletConformesTitre">
                        <a class="nav-link" role="tab" href="#ongletConformes"
                            data-niveau="conformes" aria-selected="false">Lots conformes comptage 1<span class="compteur-volet"></span></a>
                    </li>
                    <li class="nav-item d-none" id="ongletComptage2Titre">
                        <a class="nav-link" role="tab" href="#ongletComptage2"
                            data-niveau="comptage2" aria-selected="false">Saisie du comptage 2<span class="compteur-volet"></span></a>
                    </li>
                    <li class="nav-item d-none" id="ongletConformes2Titre">
                        <a class="nav-link" role="tab" href="#ongletConformes"
                            data-niveau="conformes2" aria-selected="false">Lots conformes comptage 2<span class="compteur-volet"></span></a>
                    </li>
                    <li class="nav-item d-none" id="ongletComptage3Titre">
                        <a class="nav-link" role="tab" href="#ongletComptage2"
                            data-niveau="comptage3" aria-selected="false">Saisie du comptage 3<span class="compteur-volet"></span></a>
                    </li>
                </ul>

                <div class="tab-content">

                    {{-- -------------------- PAR PRODUIT -------------------- --}}
                    <div class="tab-pane show active" id="ongletProduit" role="tabpanel">
                        <div class="cadre-recap">
                            <table
                                class="tablehover table table-striped text-nowrap w-100 no-footer dataTable table-condensed"
                                id="tableRecapProduit">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="action"
                                            data-orderable="false" data-searchable="false">Action</th>
                                        <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">
                                            Code CIP</th>
                                        <th class="text-center" data-class="text-start" data-column="DesignationProduit">
                                            Désignation</th>
                                        <th class="text-center" data-class="text-center" data-column="StockTheorique">
                                            Stock théorique</th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage1">
                                            Comptage 1</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart1">Ecart 1
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage2">
                                            Comptage 2</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart2">Ecart 2
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage3">
                                            Comptage 3</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart3">Ecart 3
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ComptageRetenu">
                                            Comptage retenu</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixAchatFHT">
                                            Prix achat FHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixGHT">
                                            Prix GHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixRevientHT">
                                            Prix revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixPRMP">
                                            Prix PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixCessionHT">
                                            Prix cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueRevientHT">
                                            Valo. théorique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueRevientHT">
                                            Valo. physique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoRevientHT">
                                            Écart revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriquePRMP">
                                            Valo. théorique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiquePRMP">
                                            Valo. physique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoPRMP">
                                            Écart PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueCessionHT">
                                            Valo. théorique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueCessionHT">
                                            Valo. physique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoCessionHT">
                                            Écart cession HT</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                    {{-- -------------------- PAR ZONE -------------------- --}}
                    <div class="tab-pane" id="ongletZone" role="tabpanel">
                        <div class="cadre-recap">
                            <table
                                class="tablehover table table-striped text-nowrap w-100 no-footer dataTable table-condensed"
                                id="tableRecapZone">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="action"
                                            data-orderable="false" data-searchable="false">Action</th>
                                        <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">
                                            Code CIP</th>
                                        <th class="text-center" data-class="text-start" data-column="DesignationProduit">
                                            Désignation</th>
                                        <th class="text-center" data-class="text-start" data-column="NomZoneStockage">
                                            Zone</th>
                                        <th class="text-center" data-class="text-center" data-column="StockTheorique">
                                            Stock théorique</th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage1">
                                            Comptage 1</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart1">Ecart 1
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage2">
                                            Comptage 2</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart2">Ecart 2
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage3">
                                            Comptage 3</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart3">Ecart 3
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ComptageRetenu">
                                            Comptage retenu</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixAchatFHT">
                                            Prix achat FHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixGHT">
                                            Prix GHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixRevientHT">
                                            Prix revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixPRMP">
                                            Prix PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixCessionHT">
                                            Prix cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueRevientHT">
                                            Valo. théorique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueRevientHT">
                                            Valo. physique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoRevientHT">
                                            Écart revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriquePRMP">
                                            Valo. théorique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiquePRMP">
                                            Valo. physique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoPRMP">
                                            Écart PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueCessionHT">
                                            Valo. théorique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueCessionHT">
                                            Valo. physique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoCessionHT">
                                            Écart cession HT</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                    {{-- -------------------- PAR LOT -------------------- --}}
                    <div class="tab-pane" id="ongletLot" role="tabpanel">
                        <div class="cadre-recap">
                            <table
                                class="tablehover table table-striped text-nowrap w-100 no-footer dataTable table-condensed"
                                id="tableRecapLot">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="action"
                                            data-orderable="false" data-searchable="false">Action</th>
                                        <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">
                                            Code CIP</th>
                                        <th class="text-center" data-class="text-start" data-column="DesignationProduit">
                                            Désignation</th>
                                        <th class="text-center" data-class="text-start" data-column="InfoComptage">
                                            Info comptage</th>
                                        <th class="text-center" data-class="text-start" data-column="NomZoneStockage">
                                            Zone</th>
                                        <th class="text-center" data-class="text-center" data-column="NumeroLot">
                                            Numéro lot</th>
                                        <th class="text-center" data-class="text-center" data-column="DatePeremption">
                                            Date péremption</th>
                                        <th class="text-center" data-class="text-center" data-column="NomEmplacement">
                                            Emplacement</th>
                                        <th class="text-center" data-class="text-center" data-column="StockTheorique">
                                            Stock théorique</th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage1">
                                            Comptage 1</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart1">Ecart 1
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage2">
                                            Comptage 2</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart2">Ecart 2
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="Comptage3">
                                            Comptage 3</th>
                                        <th class="text-center" data-class="text-center" data-column="Ecart3">Ecart 3
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ComptageRetenu">
                                            Comptage retenu</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixAchatFHT">
                                            Prix achat FHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixGHT">
                                            Prix GHT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixRevientHT">
                                            Prix revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixPRMP">
                                            Prix PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixCessionHT">
                                            Prix cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueRevientHT">
                                            Valo. théorique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueRevientHT">
                                            Valo. physique revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoRevientHT">
                                            Écart revient HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriquePRMP">
                                            Valo. théorique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiquePRMP">
                                            Valo. physique PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoPRMP">
                                            Écart PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoTheoriqueCessionHT">
                                            Valo. théorique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="ValoPhysiqueCessionHT">
                                            Valo. physique cession HT</th>
                                        <th class="text-center" data-class="text-end" data-column="EcartValoCessionHT">
                                            Écart cession HT</th>
                                        <th class="text-center" data-class="text-start" data-column="ComptePar">
                                            Compté par</th>
                                        <th class="text-center" data-class="text-start" data-column="SaisiPar">
                                            Saisi par</th>
                                        <th class="text-center" data-class="text-center" data-column="SaisiLe">
                                            Saisi le</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                    {{-- -------------------- LOTS CONFORMES AU COMPTAGE 1 -------------------- --}}
                    <div class="tab-pane" id="ongletConformes" role="tabpanel">
                        <div class="text-muted mb-2" style="font-size: 8.5pt" id="noticeConformes">
                            <i class="bx bx-info-circle"></i>
                            Lots dont le comptage 1 confirme le stock théorique : ils ne repassent pas au
                            comptage 2.
                        </div>
                        <div class="cadre-recap">
                            <table
                                class="tablehover table table-striped text-nowrap w-100 no-footer dataTable table-condensed"
                                id="tableRecapConformes">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">
                                            Code CIP</th>
                                        <th class="text-center" data-class="text-start" data-column="DesignationProduit">
                                            Désignation</th>
                                        <th class="text-center" data-class="text-start" data-column="NomZoneStockage">
                                            Zone</th>
                                        <th class="text-center" data-class="text-center" data-column="NumeroLot">
                                            Numéro lot</th>
                                        <th class="text-center" data-class="text-center" data-column="DatePeremption">
                                            Date péremption</th>
                                        <th class="text-center" data-class="text-center" data-column="NomEmplacement">
                                            Emplacement</th>
                                        <th class="text-center" data-class="text-center" data-column="StockTheorique">
                                            Stock théorique</th>
                                        <th class="text-center" data-class="text-center" data-column="ComptagePrecedent"
                                            id="enteteConformesComptage">Comptage 1</th>
                                        <th class="text-center" data-class="text-start" data-column="InfoComptage">
                                            Info comptage</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                    {{-- -------------------- SAISIE DU COMPTAGE 2 -------------------- --}}
                    <div class="tab-pane" id="ongletComptage2" role="tabpanel">

                        <div class="row g-2 align-items-end mb-1">
                            <div class="col-xl-2 col-md-3">
                                <p class="mb-0 text-muted" style="font-size: 8.5pt">Aller au rang</p>
                                <input type="text" class="form-control text-center" id="rangAAtteindre"
                                    placeholder="N° de rang (ex. 12 ou 12bis)">
                            </div>
                            <div class="col-xl-5 col-md-3">
                                <p class="mb-0 text-muted" style="font-size: 8.5pt">Rechercher</p>
                                <input type="text" class="form-control" id="rechercheComptage"
                                    placeholder="Code CIP, désignation, lot, zone, emplacement…">
                            </div>
                            <div class="col-xl-2 col-md-3">
                                <button class="btn btn-outline-success w-100" id="btnAjouterLotComptage">
                                    <i class="bx bx-plus"></i> &nbsp;Ajouter un lot
                                </button>
                            </div>
                            <div class="col-xl-3 col-md-3">
                                <button class="btn btn-outline-primary w-100" id="btnFicheComptage2">
                                    <i class="bx bx-printer"></i> &nbsp;Imprimer fiche de comptage
                                </button>
                            </div>
                        </div>

                        <div class="text-muted mb-2" style="font-size: 8.5pt" id="noticeGrille">
                            <i class="bx bx-info-circle"></i>
                            Seuls les lots en écart sont recomptés, renumérotés de 1 à n par zone et par
                            désignation. &nbsp;<kbd>Entrée</kbd> enregistre et descend,
                            <kbd>↑</kbd> <kbd>↓</kbd> déplacent d'une ligne.
                            <span id="compteurComptage"></span>
                        </div>

                        <div class="table-responsive" style="max-height: 60vh" id="cadreComptage2">
                            <table
                                class="tablehover table table-striped text-nowrap w-100 no-footer table-condensed cs-grille"
                                id="tableComptage2">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center">Rang</th>
                                        <th class="text-center">Code CIP</th>
                                        <th class="text-center">Désignation</th>
                                        <th class="text-center">Info comptage</th>
                                        <th class="text-center">Zone</th>
                                        <th class="text-center">Numéro lot</th>
                                        <th class="text-center">Date péremption</th>
                                        <th class="text-center">Emplacement</th>
                                        <th class="text-center" id="enteteComptagePrecedent">Comptage 1</th>
                                        <th class="text-center" id="enteteComptageEnCours">Qté comptée 2</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="corpsComptage2"></tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- ============================ MODIFICATION D'UNE LIGNE ============================ --}}
        <div class="modal fade" id="modalModifierLigne" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h6 class="modal-title">Modifier la ligne de comptage</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body p-3">
                        <input type="hidden" id="ligneAModifier" value="">
                        <input type="hidden" id="regrouperLot" value="0">
                        <div class="text-muted mb-2" style="font-size: 8.5pt" id="rappelLigne"></div>
                        <div class="row g-2">
                            <div class="col-12">
                                <label class="form-label mb-1" for="modifNumeroLot">Numéro de lot <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="modifNumeroLot">
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="modifPeremption">Date de péremption <span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control text-center" id="modifPeremption">
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="modifEmplacement">Emplacement</label>
                                <select class="form-select" id="modifEmplacement"></select>
                            </div>
                            <div class="col-12">
                                <label class="form-label mb-1" for="modifQuantite">Quantité comptée <span
                                        class="text-danger">*</span></label>
                                <input type="number" min="0" class="form-control text-end" id="modifQuantite">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-2">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button class="btn btn-primary" id="btnEnregistrerLigne">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================ AJOUT D'UN LOT AU COMPTAGE ============================ --}}
        <div class="modal fade" id="modalAjouterLot" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h6 class="modal-title">Ajouter un lot au comptage <span id="titreRangAjout"></span></h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="row g-2">
                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="ajoutZone">Zone de stockage <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="ajoutZone"></select>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="ajoutProduit">Produit <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="ajoutProduit"></select>
                            </div>
                            <div class="col-12">
                                <label class="form-label mb-1" for="ajoutLot">Lot <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="ajoutLot">
                                    <option value="">Choisissez d'abord un produit</option>
                                </select>
                            </div>

                            {{-- Renseignés uniquement pour un lot que le stock ne connaît pas encore. --}}
                            <div class="col-md-6 col-12 d-none champNouveauLot">
                                <label class="form-label mb-1" for="ajoutNumeroLot">Numéro de lot <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="ajoutNumeroLot">
                            </div>
                            <div class="col-md-6 col-12 d-none champNouveauLot">
                                <label class="form-label mb-1" for="ajoutPeremption">Date de péremption <span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control text-center" id="ajoutPeremption">
                            </div>

                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="ajoutComptePar">Compté par</label>
                                <select class="form-select" id="ajoutComptePar"></select>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label mb-1" for="ajoutQuantite">Quantité comptée <span
                                        class="text-danger">*</span></label>
                                <input type="number" min="0" class="form-control text-center" id="ajoutQuantite">
                            </div>
                        </div>

                        <div class="text-muted mt-2" style="font-size: 8.5pt">
                            <i class="bx bx-info-circle"></i>
                            Le lot ajouté entre dans le comptage en cours de la zone. S'il porte un numéro déjà
                            présent dans la zone, il faut le choisir dans la liste plutôt que le recréer.
                        </div>
                    </div>
                    <div class="modal-footer p-2">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button class="btn btn-primary" id="btnEnregistrerAjout">Ajouter</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

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

            // Niveau de lecture affiché : produit, zone ou lot.
            var niveau = "produit"
            // Lignes du niveau « lot », pour retrouver celle que l'on modifie.
            var lignesLot = []

            var tables = {
                produit: "#tableRecapProduit",
                zone: "#tableRecapZone",
                lot: "#tableRecapLot",
                conformes: "#tableRecapConformes",
            }

            // Lignes de la grille de saisie du comptage en cours.
            var lignesComptage2 = []

            // Comptage actif de l'inventaire, relevé sur les zones.
            var comptageEnCours = 1

            // Ligne que la grille doit rejoindre au prochain rendu : celle qui vient d'être
            // ajoutée. Le curseur s'y pose, prêt pour la quantité suivante.
            var ligneARejoindre = null

            /** Rang de comptage du volet affiché : 2 ou 3. */
            function rangDuNiveau() {
                return niveau == "comptage3" || niveau == "conformes2" ? 3 : 2
            }

            /**
             * Rend une liste du modal d'ajout cherchable.
             *
             * dropdownParent est indispensable ici : sans lui, select2 dessine son menu à la
             * racine de la page, donc derrière le modal. La liste est détruite avant d'être
             * reconstruite, ses options changeant à chaque produit choisi.
             */
            function rendreCherchable(selecteur, placeholder) {

                let $liste = $(selecteur)

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

                $liste.select2({
                    width: "100%",
                    placeholder: placeholder,
                    dropdownParent: $("#modalAjouterLot"),
                })
            }

            $.each(tables, function(cle, selecteur) {
                $(selecteur).DataTable({
                    language: languageTable,
                    pageLength: 25,
                    lengthChange: false,
                    order: [],
                })
            })

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

            function chargerZones() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.saisieSimplifiee.zones', '') }}/" + $("#IDINVENTAIRE").val(),
                    dataType: "json",
                    success: function(response) {
                        if (response.error == true) {
                            notifWarning(response.messages)
                            return false
                        }

                        $("#filtreZone").html('<option value="">TOUTES</option>')
                        $.each(response.data, function(index, zone) {
                            $("#filtreZone").append(
                                `<option value="${zone.IDZONESTOCKAGE}">${zone.NomZoneStockage}</option>`
                            )
                        })
                        // Sans « placeholder », select2 affiche l'option à valeur vide comme une
                        // entrée ordinaire : « TOUTES » reste donc dans la liste, alors qu'un
                        // placeholder l'aurait absorbée et rendue inaccessible.
                        $("#filtreZone").select2()

                        // Le comptage est unique pour l'inventaire. Les volets de lots conformes
                        // restent consultables une fois le niveau franchi ; la grille de saisie,
                        // elle, n'est ouverte que sur le comptage en cours : elle écrit dans le
                        // comptage actif de la zone, saisir dans un autre volet alimenterait la
                        // mauvaise colonne.
                        let etapes = response.data.map((z) => parseInt(z.EtapeInventaireZone) || 0)
                        comptageEnCours = etapes.length > 0 ? Math.max(...etapes) : 0

                        $("#ongletConformesTitre").toggleClass("d-none", comptageEnCours < 2)
                        $("#ongletComptage2Titre").toggleClass("d-none", comptageEnCours != 2)
                        $("#ongletConformes2Titre").toggleClass("d-none", comptageEnCours < 3)
                        $("#ongletComptage3Titre").toggleClass("d-none", comptageEnCours != 3)
                    },
                    error: function() {
                        notifWarning("Impossible de charger les zones de stockage !")
                    }
                });
            }

            function charger() {

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.saisieSimplifiee.recap') }}",
                    data: {
                        IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                        niveau: niveau,
                        IDZONESTOCKAGE: $("#filtreZone").val() ?? "",
                        IDPRODUIT: $("#filtreProduit").val() ?? 0,
                        comptage: $("#filtreComptage").val(),
                        ecart: $("#filtreEcart").val(),
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {

                        completeHandler()

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

                        let lignes = response.data

                        // Le compte est porté par l'onglet : il ne vaut que pour celui qui
                        // vient d'être chargé, les autres n'ont pas été interrogés.
                        $(`a[data-niveau="${niveau}"] .compteur-volet`).text(lignes.length)

                        if (niveau == "lot") {
                            lignesLot = lignes
                        }

                        if (niveau == "conformes" || niveau == "conformes2") {

                            let rang = rangDuNiveau()
                            $("#enteteConformesComptage").text("Comptage " + (rang - 1))
                            $("#noticeConformes").html(
                                `<i class="bx bx-info-circle"></i> Lots dont le comptage ${rang - 1} confirme le stock théorique : ils ne repassent pas au comptage ${rang}.`
                            )

                            remplissageDataTable({
                                IdentifiantDuTableau: tables.conformes,
                                obj: lignes,
                                pageLength: 25,
                                lengthChange: false,
                            })
                            return false
                        }

                        $.each(lignes, function(index, ligne) {
                            ligne.action = niveau == "lot" ?
                                `<span class="btn btn-sm btn-outline-warning btn-icon btnModifierLigne" data-index="${index}" title="Modifier la ligne"><i class="bx bx-edit" style="font-size:14px"></i></span>` :
                                `<span class="btn btn-sm btn-outline-info btn-icon btnVoirLots" data-produit="${ligne.IDPRODUIT}" data-zone="${ligne.IDZONESTOCKAGE ?? ''}" title="Voir les lots du produit"><i class="ri-eye-line" style="font-size:14px"></i></span>`
                        })

                        if (niveau == "comptage2" || niveau == "comptage3") {
                            lignesComptage2 = lignes
                            remplirGrilleComptage2()
                            return false
                        }

                        remplissageDataTable({
                            IdentifiantDuTableau: tables[niveau],
                            obj: lignes,
                            pageLength: 25,
                            lengthChange: false,
                        })
                    },
                    error: function() {
                        completeHandler()
                        notifWarning("Impossible de charger le récapitulatif !")
                    }
                });
            }

            /* ============================ INTERACTIONS ============================ */

            // Deux onglets peuvent viser le même panneau -- « lots conformes » comme « saisie
            // du comptage » ne changent que de comptage lu. Bootstrap suppose un panneau par
            // onglet et masquerait celui qu'il vient d'afficher : l'activation est faite ici.
            $(document).on("click", 'a[data-niveau]', function(evt) {

                evt.preventDefault()

                $('a[data-niveau]').removeClass("active").attr("aria-selected", "false")
                $(this).addClass("active").attr("aria-selected", "true")

                $(".tab-pane").removeClass("show active")
                $($(this).attr("href")).addClass("show active")

                niveau = $(this).data("niveau")
                $("#rechercheComptage").val("")
                charger()
            })

            $(document).on("change", "#filtreZone, #filtreProduit, #filtreComptage, #filtreEcart", charger)

            $(document).on("click", "#btnReinitialiser", function() {
                $("#filtreZone").val("").trigger("change.select2")
                $("#filtreComptage").val("")
                $("#filtreEcart").val("")
                initSelect2ProduitAjax("#filtreProduit", {
                    labelFirst: "TOUS LES PRODUITS",
                    CMU: {{ $INVENTAIRE->InventaireCMU ? 'true' : 'false' }},
                })
                charger()
            })

            // Depuis un récapitulatif cumulé, on descend au détail des lots du produit.
            $(document).on("click", ".btnVoirLots", function() {

                let zone = String($(this).data("zone") || "")

                if (zone != "") {
                    $("#filtreZone").val(zone).trigger("change.select2")
                }

                preselectProduitSelect2("#filtreProduit", $(this).data("produit")).then(function() {
                    $('a[data-niveau="lot"]').get(0).click()
                })
            })

            /* ============================ SAISIE DU COMPTAGE 2 ============================ */

            function remplirGrilleComptage2() {

                let rang = rangDuNiveau()
                $("#enteteComptagePrecedent").text("Comptage " + (rang - 1))
                $("#enteteComptageEnCours").text("Qté comptée " + rang)

                if (lignesComptage2.length == 0) {
                    $("#corpsComptage2").html(
                        `<tr><td colspan="11" class="text-center text-muted py-3">Aucun lot en écart à recompter.</td></tr>`
                    )
                    $("#compteurComptage").text("")
                    return false
                }

                let recherche = ($("#rechercheComptage").val() || "").trim().toUpperCase()

                let rendues = lignesComptage2.map(function(ligne, index) {

                    if (recherche != "" && !texteLigneComptage(ligne).includes(recherche)) {
                        return ""
                    }

                    return `<tr data-index="${index}" data-rang="${ligne.RangComptage}">
                                <td class="text-center fw-semibold">${ligne.RangComptage}</td>
                                <td class="text-center">${ligne.CodeCipProduit1 ?? ''}</td>
                                <td>${ligne.DesignationProduit}</td>
                                <td style="white-space: pre-line; font-size: 8pt">${ligne.InfoComptage || ''}</td>
                                <td>${ligne.NomZoneStockage}</td>
                                <td class="text-center">${ligne.NumeroLot || '(sans numéro)'}</td>
                                <td class="text-center">${ligne.DatePeremption || '—'}</td>
                                <td class="text-center">${ligne.NomEmplacement || '—'}</td>
                                <td class="text-center">${ligne.ComptagePrecedent}</td>
                                <td class="text-center">
                                    <input type="text" inputmode="numeric" class="form-control form-control-sm cs-qte"
                                        data-index="${index}" value="${ligne.ValeurComptage}">
                                </td>
                                <td class="text-center">
                                    <span class="btn btn-sm btn-outline-danger btn-icon btnSupprimerComptage"
                                        data-index="${index}" title="Supprimer cette ligne de comptage">
                                        <i class="bx bx-trash" style="font-size:14px"></i>
                                    </span>
                                </td>
                            </tr>`
                }).filter((ligne) => ligne != "")

                if (rendues.length == 0) {
                    $("#corpsComptage2").html(
                        `<tr><td colspan="11" class="text-center text-muted py-3">Aucun lot ne correspond à la recherche.</td></tr>`
                    )
                } else {
                    $("#corpsComptage2").html(rendues.join(""))
                }

                $("#compteurComptage").text(
                    recherche == "" ?
                    ` — ${lignesComptage2.length} lot(s) à recompter.` :
                    ` — ${rendues.length} lot(s) sur ${lignesComptage2.length}.`
                )

                rejoindreLigneAjoutee()
            }

            /**
             * Pose le curseur sur la ligne qui vient d'être ajoutée.
             *
             * Si la recherche en cours la masque, elle est levée : on vient de créer cette
             * ligne, la voir importe plus que garder le filtre de frappe. Les filtres du
             * récapitulatif, eux, ne sont jamais touchés.
             */
            function rejoindreLigneAjoutee() {

                if (ligneARejoindre == null) {
                    return false
                }

                let index = lignesComptage2.findIndex(
                    (l) => String(l.IDINVENTAIRE_LIGNE_ZONE) == String(ligneARejoindre)
                )

                if (index < 0) {
                    ligneARejoindre = null
                    return false
                }

                if (allerALigne(index) === false && $("#rechercheComptage").val() != "") {
                    $("#rechercheComptage").val("")
                    remplirGrilleComptage2()
                    return false
                }

                ligneARejoindre = null
            }

            /** Texte d'une ligne sur lequel porte la recherche de la grille. */
            function texteLigneComptage(ligne) {
                return [
                    ligne.CodeCipProduit1, ligne.DesignationProduit, ligne.NomZoneStockage,
                    ligne.NumeroLot, ligne.DatePeremption, ligne.NomEmplacement, ligne.RangComptage,
                ].join(" ").toUpperCase()
            }

            // La recherche se contente de redessiner la grille : les quantités déjà saisies
            // sont en mémoire, rien n'est redemandé au serveur.
            $(document).on("input", "#rechercheComptage", function() {
                remplirGrilleComptage2()
            })

            /** Place le curseur sur la quantité d'une ligne et fait défiler jusqu'à elle. */
            function allerALigne(index) {
                return poserLeCurseur($(`#corpsComptage2 .cs-qte[data-index="${index}"]`))
            }

            /**
             * Déplace le curseur d'une ligne affichée à la suivante ou à la précédente.
             *
             * Le déplacement suit l'ordre de la grille telle qu'elle est rendue, et non les
             * index : sous une recherche, les lignes masquées seraient traversées dans le vide.
             */
            function allerALigneVoisine($champ, sens) {

                let $champs = $("#corpsComptage2 .cs-qte")
                return poserLeCurseur($champs.eq($champs.index($champ) + sens))
            }

            function poserLeCurseur($champ) {

                if ($champ.length == 0) {
                    return false
                }

                $("#corpsComptage2 tr").removeClass("cs-active")
                $champ.closest("tr").addClass("cs-active")

                $champ.focus().select()
                $champ.closest("tr").get(0).scrollIntoView({
                    block: "center"
                })
            }

            // Le rang saisi positionne la ligne, mais seulement sur Entrée : pendant la frappe
            // d'un nombre à plusieurs chiffres, le tableau sauterait à chaque chiffre.
            $(document).on("keydown", "#rangAAtteindre", function(evt) {

                if (evt.key != "Enter") {
                    return
                }

                evt.preventDefault()

                // Un rang peut être suffixé (« 12bis ») : la comparaison se fait sur le texte.
                let rang = ($(this).val() || "").trim().toLowerCase().replace(/\s+/g, "")
                let index = lignesComptage2.findIndex((l) => String(l.RangComptage).toLowerCase() == rang)

                if (index < 0 || allerALigne(index) === false) {
                    notifWarning("Aucune ligne affichée ne porte le rang " + rang + ".")
                    return false
                }
            })

            /** Enregistre la quantité d'une ligne de la grille, si elle a changé. */
            function enregistrerQuantite(index) {

                let ligne = lignesComptage2[index]
                let $champ = $(`#corpsComptage2 .cs-qte[data-index="${index}"]`)
                let quantite = $champ.val()

                if (ligne == undefined || quantite === "" || isNaN(quantite)) {
                    return false
                }

                if (parseInt(quantite) == parseInt(ligne.ValeurComptage)) {
                    return false
                }

                $.ajax({
                    type: "PUT",
                    url: "{{ route('stock.saisieSimplifiee.modifier') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDINVENTAIRE_LIGNE_ZONE: ligne.IDINVENTAIRE_LIGNE_ZONE,
                        NumeroLotProduit: ligne.NumeroLot,
                        DatePeremption: ligne.ValeurDatePeremption,
                        IDEmp: ligne.IDEMPLACEMENT,
                        QteComptee: quantite,
                    },
                    dataType: "JSON",
                    success: function(response) {

                        if (response.error == true) {
                            notifWarning(response.messages)
                            $champ.val(ligne.ValeurComptage)
                            return false
                        }

                        ligne.ValeurComptage = parseInt(quantite)
                        $champ.addClass("is-valid")
                        setTimeout(() => $champ.removeClass("is-valid"), 800)
                    },
                    error: function(response) {
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                        $champ.val(ligne.ValeurComptage)
                    }
                });
            }

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

            $(document).on("focus", "#corpsComptage2 .cs-qte", function() {
                $("#corpsComptage2 tr").removeClass("cs-active")
                $(this).closest("tr").addClass("cs-active")
            })

            $(document).on("blur", "#corpsComptage2 .cs-qte", function() {
                enregistrerQuantite(parseInt($(this).data("index"), 10))
            })

            // Entrée enregistre et descend, les flèches déplacent : la saisie ne quitte jamais
            // le clavier.
            $(document).on("keydown", "#corpsComptage2 .cs-qte", function(evt) {

                let index = parseInt($(this).data("index"), 10)

                if (evt.key == "Enter" || evt.key == "ArrowDown") {
                    evt.preventDefault()
                    enregistrerQuantite(index)
                    allerALigneVoisine($(this), 1)
                } else if (evt.key == "ArrowUp") {
                    evt.preventDefault()
                    enregistrerQuantite(index)
                    allerALigneVoisine($(this), -1)
                }
            })

            // La fiche reprend la liste affichée, filtres et rangs compris : le compteur suit
            // les rangs sur le papier puis les retrouve à l'écran.
            $(document).on("click", "#btnFicheComptage2", function() {

                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.saisieSimplifiee.ficheComptage2') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                        IDZONESTOCKAGE: $("#filtreZone").val() ?? "",
                        IDPRODUIT: $("#filtreProduit").val() ?? 0,
                        rang: rangDuNiveau(),
                    },
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {

                        completeHandler()

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

                        genererPDF(response.tablePDF)
                    },
                    error: function(response) {
                        completeHandler()
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                    }
                });
            })

            /* ============================ ACTUALISATION DES PRIX ============================ */

            // Les prix sont figés sur l'inventaire au moment où le produit y entre : un
            // inventaire ouvert avant une révision tarifaire les garde périmés. La reprise
            // ne touche pas aux quantités, seulement aux prix et aux valorisations.
            $(document).on("click", "#btnActualiserPrix", function() {

                confirmAction(() => {

                    $.ajax({
                        type: "POST",
                        url: "{{ route('stock.saisieSimplifiee.actualiserPrix') }}",
                        data: {
                            _token: "{{ csrf_token() }}",
                            IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                        },
                        dataType: "JSON",
                        beforeSend: progressHandler(),
                        success: function(response) {

                            completeHandler()

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

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

                }, "Reprendre les prix en vigueur sur cet inventaire ?",
                    "Les quantités comptées ne changent pas ; les prix et les valorisations sont recalculés.")
            })

            /* ============================ EXPORT EXCEL ============================ */

            // Le document est bati par le serveur : il porte les prix et les valorisations, que
            // les tableaux n'affichent pas. La reponse est un fichier ; un refus, lui, revient
            // en JSON -- d'ou la lecture du type avant d'ouvrir le telechargement.
            $(document).on("click", "#btnExportExcel", function() {

                let formulaire = new FormData()
                formulaire.append("_token", "{{ csrf_token() }}")
                formulaire.append("IDINVENTAIRE", $("#IDINVENTAIRE").val())
                formulaire.append("IDZONESTOCKAGE", $("#filtreZone").val() ?? "")
                formulaire.append("IDPRODUIT", $("#filtreProduit").val() ?? 0)
                formulaire.append("comptage", $("#filtreComptage").val() ?? "")
                formulaire.append("ecart", $("#filtreEcart").val() ?? "")

                let requete = new XMLHttpRequest()
                requete.open("POST", "{{ route('stock.saisieSimplifiee.exportExcel') }}")
                requete.responseType = "blob"

                progressHandler()

                requete.onload = function() {

                    completeHandler()

                    let type = requete.getResponseHeader("Content-Type") ?? ""

                    if (type.indexOf("json") >= 0) {
                        requete.response.text().then(function(texte) {
                            let reponse = JSON.parse(texte)
                            notifWarning(reponse.messages ?? "Une erreur est survenue !")
                        })
                        return false
                    }

                    // Le nom du fichier est decide par le serveur : il porte le libelle du site.
                    let entete = requete.getResponseHeader("Content-Disposition") ?? ""
                    let trouve = entete.match(/filename="?([^";]+)"?/)

                    let lien = document.createElement("a")
                    lien.href = URL.createObjectURL(requete.response)
                    lien.download = trouve ? trouve[1] : "Inventaire.xlsx"

                    document.body.appendChild(lien)
                    lien.click()
                    document.body.removeChild(lien)
                    URL.revokeObjectURL(lien.href)

                    notifSuccess("Export généré avec succès !")
                }

                requete.onerror = function() {
                    completeHandler()
                    notifWarning("Impossible de générer l'export !")
                }

                requete.send(formulaire)
            })

            /**
             * Supprime une ligne de la grille de comptage.
             *
             * L'opération passe par le mot de passe : à ce stade, la ligne a déjà servi de
             * référence à un recomptage, et son rang figure sur les fiches imprimées.
             */
            $(document).on("click", ".btnSupprimerComptage", function() {

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

                if (ligne == undefined) {
                    return false
                }

                let rappel = "rang " + ligne.RangComptage + " — " + ligne.DesignationProduit +
                    " — lot " + (ligne.NumeroLot || "(sans numéro)")

                confirmMdp('{{ csrf_token() }}', () => {

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

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

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

                }, null, "Veuillez saisir votre mot de passe pour supprimer la ligne de comptage", {
                    sousTitre: rappel,
                    infoJNL: "",
                    typeJNL: 3,
                    CodeDroit: "",
                }).catch(() => {})
            })

            /* ============================ AJOUT D'UN LOT AU COMPTAGE ============================ */

            // La saisie du comptage 2 ou 3 ne se limite pas aux lots retenus : un lot decouvert
            // en rayon doit pouvoir y entrer. Il rejoint le comptage actif de sa zone, par le
            // meme chemin que la console de comptage.
            $(document).on("click", "#btnAjouterLotComptage", function() {

                let rang = rangDuNiveau()
                $("#titreRangAjout").text(rang)

                // Les zones sont celles du filtre : la liste est deja chargee.
                $("#ajoutZone").html($("#filtreZone option").not('[value=""]').clone())
                $("#ajoutZone").val($("#filtreZone").val() || $("#ajoutZone option:first").val())

                $("#ajoutLot").html('<option value="">Choisissez d\'abord un produit</option>')
                rendreCherchable("#ajoutLot", "Choisissez d'abord un produit")
                $("#ajoutQuantite").val("")
                $("#ajoutNumeroLot").val("")
                $("#ajoutPeremption").val("")
                $(".champNouveauLot").addClass("d-none")

                // Sans dropdownParent, la liste de select2 se dessine sous le modal.
                initSelect2ProduitAjax("#ajoutProduit", {
                    labelFirst: "SÉLECTIONNEZ UN PRODUIT",
                    CMU: {{ $INVENTAIRE->InventaireCMU ? 'true' : 'false' }},
                    dropdownParent: $("#modalAjouterLot"),
                })

                listingComboPersonnel("#ajoutComptePar").then(function() {
                    rendreCherchable("#ajoutComptePar", "Rechercher une personne…")
                })

                $("#modalAjouterLot").modal("show")
            })

            // Lots du produit dans la zone choisie, plus l'entree qui ouvre la creation.
            $(document).on("change", "#ajoutProduit, #ajoutZone", function() {

                // L'identifiant produit dépasse la précision d'un nombre JavaScript : parseInt le
                // décalait sur le produit voisin, dont les lots s'affichaient à la place des siens.
                let produit = String($("#ajoutProduit").val() || "")
                let zone = $("#ajoutZone").val()

                $(".champNouveauLot").addClass("d-none")

                // La liste est vidée avant l'appel, pas après : elle vient du réseau, et le
                // lot du produit précédent resterait sélectionné le temps de la réponse. Une
                // validation dans cet intervalle rattacherait la quantité au lot d'un autre
                // produit — le serveur la refuse, autant ne pas la laisser possible.
                $("#ajoutLot").html('<option value="">Chargement des lots…</option>')
                rendreCherchable("#ajoutLot", "Chargement des lots…")

                if (produit === "" || produit === "0" || !zone) {
                    $("#ajoutLot").html('<option value="">Choisissez d\'abord un produit</option>')
                    rendreCherchable("#ajoutLot", "Choisissez d'abord un produit")
                    return false
                }

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

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

                        let options = response.lots.map(function(lot) {
                            return `<option value="${lot.IDSTOCKAGENCE_LOTS}"
                                        data-tracabilite="${lot.IDTracabiliteStock}"
                                        data-emplacement="${lot.IDEMPLACEMENT}"
                                        data-numero="${lot.NumeroLot}"
                                        data-peremption="${lot.DatePeremption}">
                                        ${lot.NumeroLot || '(sans numéro)'} — péremption ${lot.DatePeremptionFormatee || '—'} — stock ${lot.StockTheorique}
                                    </option>`
                        })

                        // La création vient en tête : c'est le geste que l'on cherche en
                        // premier quand le lot n'est pas au rayon.
                        $("#ajoutLot").html(
                            '<option value="">— Sélectionnez un lot —</option>' +
                            '<option value="nouveau">＋ Ajouter un lot absent de la liste</option>' +
                            options.join("")
                        )

                        rendreCherchable("#ajoutLot", "Rechercher un lot…")
                    },
                    error: function() {
                        notifWarning("Impossible de charger les lots du produit !")
                    }
                });
            })

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

                $(".champNouveauLot").toggleClass("d-none", $(this).val() != "nouveau")

                if ($(this).val() == "nouveau") {
                    $("#ajoutNumeroLot").focus()
                }
            })

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

                let lot = $("#ajoutLot").find("option:selected")
                let nouveau = $("#ajoutLot").val() == "nouveau"

                if (!$("#ajoutLot").val()) {
                    notifWarning("Sélectionnez un lot !")
                    return false
                }

                let donnees = {
                    _token: "{{ csrf_token() }}",
                    IDInven: $("#IDINVENTAIRE").val(),
                    IDZONESTOCKAGE: $("#ajoutZone").val(),
                    ProdAjoute: $("#ajoutProduit").val(),
                    IDSTOCKAGENCE_LOTS: nouveau ? 0 : $("#ajoutLot").val(),
                    IDTracabiliteStock: nouveau ? 0 : lot.data("tracabilite"),
                    IDEmp: nouveau ? 0 : lot.data("emplacement"),
                    NumeroLotProduit: nouveau ? $("#ajoutNumeroLot").val() : lot.data("numero"),
                    DatePeremption: nouveau ? $("#ajoutPeremption").val() : lot.data("peremption"),
                    QteComptee: $("#ajoutQuantite").val(),
                    IDComptePar: $("#ajoutComptePar").val() ?? 0,
                    nouvelleLigne: 1,
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.saisieSimplifiee.ajouter') }}",
                    data: donnees,
                    dataType: "JSON",
                    success: function(response) {

                        if (response.error == true) {

                            notifWarning(response.messages)

                            // Le numéro saisi existe déjà dans la zone : la liste est rechargée
                            // et rouverte, il ne reste qu'à y choisir le lot.
                            if (response.lotExistant == true) {
                                $("#ajoutProduit").trigger("change")
                                setTimeout(() => $("#ajoutLot").select2("open"), 400)
                            }

                            return false
                        }

                        notifSuccess(response.messages)
                        $("#modalAjouterLot").modal("hide")

                        // La grille est rechargée avec les mêmes filtres, puis se pose sur la
                        // ligne créée : le compteur enchaîne sans la chercher.
                        ligneARejoindre = response.IDINVENTAIRE_LIGNE_ZONE
                        charger()
                    },
                    error: function(response) {
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                    }
                });
            })

            /* ============================ MODIFICATION D'UNE LIGNE ============================ */

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

            $(document).on("click", ".btnModifierLigne", function() {

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

                if (ligne == undefined) {
                    return false
                }

                $("#ligneAModifier").val(ligne.IDINVENTAIRE_LIGNE_ZONE)

                // Le volet par lot cumule les saisies d'un même lot : la quantité corrigée
                // vaut alors pour le lot entier, pas pour l'une de ses saisies.
                let saisies = parseInt(ligne.NbSaisies) || 1
                $("#regrouperLot").val(saisies > 1 ? 1 : 0)

                $("#rappelLigne").html(
                    `${ligne.DesignationProduit}<br>Zone ${ligne.NomZoneStockage} — la quantité alimente le comptage ouvert sur cette zone.` +
                    (saisies > 1 ?
                        `<br><span class="text-warning">Ce lot regroupe ${saisies} saisies : la quantité saisie remplacera leur total.</span>` :
                        "")
                )
                $("#modifNumeroLot").val(ligne.NumeroLot)
                $("#modifPeremption").val(ligne.ValeurDatePeremption)
                $("#modifQuantite").val(ligne.ValeurQteComptee)

                chargerEmplacements(ligne.IDZONESTOCKAGE, ligne.IDEMPLACEMENT).then(function() {
                    bootstrap.Modal.getOrCreateInstance(document.getElementById("modalModifierLigne")).show()
                })
            })

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

                if ($("#modifNumeroLot").val().trim() == "") {
                    alertSwal("Veuillez renseigner le numéro de lot !")
                    return false
                }

                if ($("#modifPeremption").val() == "") {
                    alertSwal("Veuillez renseigner la date de péremption !")
                    return false
                }

                if ($("#modifQuantite").val() === "" || isNaN($("#modifQuantite").val())) {
                    alertSwal("Veuillez renseigner une quantité valide !")
                    return false
                }

                $.ajax({
                    type: "PUT",
                    url: "{{ route('stock.saisieSimplifiee.modifier') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDINVENTAIRE_LIGNE_ZONE: $("#ligneAModifier").val(),
                        NumeroLotProduit: $("#modifNumeroLot").val().trim(),
                        DatePeremption: $("#modifPeremption").val(),
                        IDEmp: $("#modifEmplacement").val(),
                        QteComptee: $("#modifQuantite").val(),
                        regrouperLot: $("#regrouperLot").val(),
                    },
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {

                        completeHandler()

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

                        notifSuccess(response.messages)
                        bootstrap.Modal.getOrCreateInstance(document.getElementById("modalModifierLigne")).hide()
                        charger()
                    },
                    error: function(response) {
                        completeHandler()
                        notifWarning(response.responseJSON?.messages ?? "Une erreur est survenue !")
                    }
                });
            })

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

            chargerZones()

            initSelect2ProduitAjax("#filtreProduit", {
                labelFirst: "TOUS LES PRODUITS",
                CMU: {{ $INVENTAIRE->InventaireCMU ? 'true' : 'false' }},
            })

            charger()
        })
    </script>
@endsection