@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
{{-- @section('TrfInterSite', 'active') --}}
@php
    if (!isset($CMU)) {
        $CMU = false;
    }

@endphp
@section('titre-page', 'Inventaire de stocks')
@section('content-body')

    <style>
        .height-input {
            height: 2.5rem !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        ul.ui-autocomplete {
            z-index: 1100;
        }

        .ui-autocomplete {
            max-height: 350px;
            max-width: 1000px;
            overflow-y: auto;
            /* position: static !important; */
        }

        .ui-menu-item .ui-state-active {
            background: #D7C5FF8E;
            border: none;
            color: black
        }

        .ui-menu .ui-menu-item-wrapper {
            position: relative;
            padding: 1px 1em 1px 0.4em !important;
        }

        .autocomplete-table {
            width: 100%;
            border-collapse: collapse;
        }

        .autocomplete-table th,
        .autocomplete-table td {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            padding: 8px;
        }

        .autocomplete-table th {
            background-color: #b9b9b9;
        }

        .ui-menu-item {
            cursor: pointer;
        }

        .ui-menu-item-wrapper {
            white-space: nowrap;
        }

        input[type="text"] {
            text-align: center
        }

        @media (min-width: 1200px) {
            .modal-xl {
                --bs-modal-width: 1260px !important;
            }
        }

        .modal-open-noscroll {
            overflow: hidden;
        }

        #tableDetailBl tbody tr:not(.rupture):hover {
            background-color: #f0f0f0;
            /* Couleur de fond lors du survol */
        }

        body.modal-open {
            overflow: hidden;
        }

        [data-filepond-item-state='processing-complete'] .filepond--item-panel {
            background-color: green;
        }
    </style>

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3 ">
                <div class="col-xl-6 col-lg-6 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a
                                    href="javascript:void(0);">{{ $CMU == false ? 'Stocks' : 'CMU' }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Inventaire de stocks</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 mt-xl-0 mt-2 mx-0 ">
                    <div class="row justify-content-end">


                        <div class="col-xl-3 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-success w-100"
                                id="exportExcelInventaireStock">
                                <i class='ri ri-file-excel-line  me-1'></i> Exporter
                            </button>
                        </div>
                        <div class="col-xl-3 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-primary w-100" id="btnNew">
                                <i class='bx bxs-plus-circle me-1'></i> Nouveau
                            </button>
                        </div>
                        <div class="col-xl-3 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-danger-light w-100"
                                id="btnSupprimeInv">
                                <i class="bx bx-trash me-1"></i> Supprimer
                            </button>
                        </div>
                    </div>
                </div>

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

    <div class="row">

        <div class=" col-xl-12">
            <div class="card  custom-card">
                <div class="card-header d-block">
                    <div class="row justify-content-center">
                        <div class="col-xl-3 mb-2">
                            <p class="mb-0 text-muted">Période</p>
                            <input type="text" class="form-control dateperiode" id="periode" name="periode">
                        </div>
                        <div class="col-xl-2 mb-2">
                            <p class="mb-0 text-muted">Site</p>
                            <select class="form-select" name="IDAGENCE" id="IDAGENCE">

                            </select>
                        </div>
                        <div class="col-xl-2 mb-2">
                            <p class="mb-0 text-muted">Nature d'inventaire</p>
                            <select class="form-select" name="natureInventaire" id="natureInventaire">
                                <option value="0">TOUS</option>
                                <option value="1">FISCAL</option>
                                <option value="2">TOURNANT</option>
                            </select>
                        </div>
                        <div class="col-xl-2 mb-2">
                            <p class="mb-0 text-muted">Type d'inventaire</p>
                            <select class="form-select" name="typeInventaire" id="typeInventaire">
                                <option value="0">TOUS</option>
                                <option value="1">GENERAL</option>
                                <option value="2">PARTIEL</option>
                            </select>
                        </div>
                        <div class="col-xl-1 mb-2">
                            <button class="btn btn-primary mt-3" id="btnSearch" data-bs-toggle="tooltip"
                                data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-trigger="hover"
                                title="Filtrer">
                                <i class="bx bx-search-alt"></i>
                            </button>

                            <button class="btn btn-primary-transparent btn-loader mt-3 d-none " style="height: 35px"
                                id="btnLoader">
                                <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1">
                    <div class="table-responsive " style="height: 22rem">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                            id="tableInventaire">
                            <thead class="table-header-primary">
                                <tr>
                                    <th colspan="7" style="background-color: white"></th>

                                    <th class="text-center text-black" colspan="2" style="background-color: #EFFFEF">
                                        Valorisation du stock THEORIQUE</th>
                                    <th class="text-center text-black" colspan="2" style="background-color: #FFFFE8">
                                        Valorisation du stock PHYSIQUE</th>
                                    <th class="text-center text-black" colspan="2" style="background-color: #FFF9F9">
                                        Ecarts</th>
                                </tr>

                                <tr id="tableHead">
                                    <th class="text-start" data-column="action">
                                        <input class="form-check-input me-1" type="checkbox" id="checkAll">#
                                    </th>
                                    <th data-class="text-center" class="text-center">Date</th>
                                    <th data-class="text-center" class="text-center">Agence</th>
                                    <th data-class="text-start" class="text-center">Commentaire</th>
                                    <th data-class="text-center" class="text-center">M</th>
                                    <th data-class="text-center" class="text-center">T</th>
                                    <th data-class="text-center" class="text-center">N</th>
                                    <th data-class="text-end" class="text-center">PRMP HT</th>
                                    <th data-class="text-end" class="text-center">Cession HT</th>
                                    <th data-class="text-end" class="text-center">PRMP HT</th>
                                    <th data-class="text-end" class="text-center">Cession HT</th>
                                    <th data-class="text-end" class="text-center">Ecart PRMP HT</th>
                                    <th data-class="text-end" class="text-center">Ecart Cession HT</th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class=" col-xl-12">
            <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" data-bs-toggle="tab" role="tab" href="#home1"
                                aria-selected="true">Zone de stockage</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#about1"
                                aria-selected="false">Synthèse par NATURE</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane show active text-muted p-1" id="home1" role="tabpanel">


                            <div class="table-responsive">
                                <table
                                    class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                                    id="tableZone">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th colspan="2" style="background-color: white"></th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #EFFFEF">
                                                Valorisation du stock THEORIQUE</th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #FFFFE8">
                                                Valorisation du stock PHYSIQUE</th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #FFF9F9">
                                                Ecarts</th>
                                        </tr>
                                        <tr id="tableHead">
                                            <th class="text-center">
                                                <input class="form-check-input me-2" type="checkbox" id="checkAllZone">
                                                #
                                            </th>
                                            <th class="text-center">Racks / Palettes</th>
                                            <th class="text-center">PRMP HT</th>
                                            <th class="text-center">Cession HT</th>
                                            <th class="text-center">PRMP HT</th>
                                            <th class="text-center">Cession HT</th>
                                            <th class="text-center">PRMP HT</th>
                                            <th class="text-center">Cession HT</th>
                                        </tr>
                                    </thead>

                                    <tfoot>
                                        <tr style="background: #FFFFE8">
                                            <th class="text-end" colspan="2">Totaux : </th>
                                            <th class="text-end"></th>
                                            <th class="text-end"></th>
                                            <th class="text-end"></th>
                                            <th class="text-end"></th>
                                            <th class="text-end"></th>
                                            <th class="text-end"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                        </div>
                        <div class="tab-pane text-muted p-1" id="about1" role="tabpanel">

                            <div class="col-xl-2 col-sm-2 col-md-2 d-flex justify-content-end">
                                <button class=" btn btn-wave waves-effect waves-light btn-success w-100"
                                    id="exportExcelSyntheseParNature">
                                    <i class='ri ri-file-excel-line  me-1'></i> Exporter
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table
                                    class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                                    id="tableNature">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th colspan="1" style="background-color: white"></th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #EFFFEF">
                                                Valorisation du stock THEORIQUE</th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #FFFFE8">
                                                Valorisation du stock PHYSIQUE</th>
                                            <th class="text-center text-black" colspan="2"
                                                style="background-color: #FFF9F9">
                                                Ecarts</th>
                                        </tr>
                                        <tr id="tableHead">

                                            <th class="text-center">Natures</th>
                                            <th class="text-center" data-class="text-end">PRMP HT</th>
                                            <th class="text-center" data-class="text-end">Cession HT</th>
                                            <th class="text-center" data-class="text-end">PRMP HT</th>
                                            <th class="text-center" data-class="text-end">Cession HT</th>
                                            <th class="text-center" data-class="text-end">PRMP HT</th>
                                            <th class="text-center" data-class="text-end">Cession HT</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

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

    {{-- Modal Generation d'inventaire --}}
    <div class="modal fade" id="modalAddInventaire" data-bs-focus="false">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Fiche inventaire</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formAddInventaire">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <input type="hidden" name="IDINVENTAIRE" id="IDINVENTAIRE" value="0">
                            <input type="hidden" name="traitementCreate" id="traitementCreate" value="true">
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Site</p>
                                <select class="form-select" name="site_add" id="site_add">

                                </select>
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Date inventaire</p>
                                <input type="date" class="form-control" name="date_inventaire" id="date_inventaire"
                                    value="{{ date('Y-m-d') }}">
                            </div>

                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Nature d'inventaire</p>
                                <select class="form-select" name="natureInventaire_add" id="natureInventaire_add">
                                    <option value="1">FISCAL</option>
                                    <option value="2">TOURNANT</option>
                                </select>
                            </div>
                            <div class="col-xl-6 mb-2">
                                <p class="mb-0 text-muted">Type d'inventaire</p>
                                <select class="form-select" name="typeInventaire_add" id="typeInventaire_add">
                                    <option value="1">GENERAL</option>
                                    <option value="2">PARTIEL</option>
                                </select>
                            </div>
                            <div class="col-xl-6 mb-2">
                                <p class="mb-0 text-muted">Mode d'inventaire</p>
                                <select class="form-select" name="modeInventaire_add" id="modeInventaire_add"
                                    @disabled(ModeGpharma() == 2)>
                                    <option value="1" @selected(true)>INVENTAIRE PAR LOT</option>
                                    <option value="2">INVENTAIRE PAR PRODUIT</option>
                                </select>
                            </div>
                            <div class="col-xl-12">
                                <p class="mb-0 text-muted">Commentaire</p>
                                <textarea class="form-control " name="commentaire" id="commentaire" cols="30" rows="3"
                                    style="font-transform:uppercase;"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1 m-1">
                        <button type="submit" class="btn btn-success"><i class='bx bx-arrow-to-bottom'></i> &nbsp;
                            Générer</button>

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

    {{-- Modal saisi comptage --}}
    <div class="modal fade" id="modalSaisieInventaire" data-bs-focus="false">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="title-modal"></h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pt-1">

                    <input type="hidden" name="IDINVENT" id="IDINVENT" value="0">
                    <input type="hidden" name="IDAGENCE" id="IDAGENCE" value="0">
                    <input type="hidden" class="form-control" name="idrack" id="idrack" value="0">
                    <input type="hidden" name="idzone" id="idzone" value="0">

                    <div class="row bg-warning-transparent pt-1 mb-2">
                        <div class="col-xl-4 mb-2" id="divRack">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <p class="mb-0 text-muted">Rayon ou Rack : </p>
                                </div>
                                <div class="col-auto">
                                    <input type="text" class="form-control" name="rayonRack" id="rayonRack"
                                        value="0" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 mb-2 d-none" id="divForme">
                            <p class="mb-0 text-muted">Forme produit : </p>
                            <select name="IDFORMEPRODUIT" id="IDFORMEPRODUIT" class="form-select w-100"></select>
                        </div>

                        <div class="col-xl-4 d-flex align-items-center justify-content-center mb-2">
                            <div class="form-check  form-check-md mt-3 mb-2">
                                <input class="form-check-input" type="checkbox" value="false" name="uniqEcart"
                                    id="uniqEcart">
                                <label class="form-check-label" for="uniqEcart">
                                    Uniquement les écarts
                                </label>
                            </div>
                        </div>
                        <div class="col-xl-4 mb-2 d-flex justify-content-end">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <p class="mb-0 text-muted">Zone de comptage : </p>
                                </div>
                                <div class="col-auto">
                                    <input type="text" class="form-control" name="nomZone" id="nomZoneComptage"
                                        value="0" readonly>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SAISI INVENTAIRE PAR PRODUIT --}}
                    <div id="divZoneInvProduit">
                        <div class="row">
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Produit</p>
                                <select class="form-select" name="IDPRODUIT" id="IDPRODUIT">

                                </select>
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Quantite comptée</p>
                                <input type="text" class="form-control" name="qte_compte" id="qte_compte"
                                    value="0">
                            </div>

                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Emplacement</p>
                                <select class="form-select" name="emplacement" id="emplacement">
                                </select>
                            </div>
                            <div class="col-xl-1 pt-3">
                                <button class="btn btn-success w-100" id="btnAddProduit" data-bs-toggle="tooltip"
                                    data-bs-placement="top" data-bs-custom-class="tooltip-primary"
                                    data-bs-trigger="hover" title="Ajouter produit">
                                    <i class='bx bxs-plus-circle'></i>
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                                id="tableSaisiInventaire">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">
                                            Code
                                        </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="QteStockInventaire">
                                            Stock
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueCartonnage">
                                            Cartonnage
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueQteComptage1">
                                            Comptage 1
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueQteComptage2">
                                            Comptage 2
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueQteComptage3">
                                            Comptage 3
                                        </th>
                                        <th class="text-center" data-class="text-center"
                                            data-column="ValueQteComptageRetenu">
                                            Comptage 800
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="EcartComptage">
                                            Ecart
                                        </th>
                                        <th class="text-center" data-class="text-end" data-column="PrixPRMP">PRMP</th>
                                        <th class="text-center" data-class="text-end" data-column="PrixCessionHT">
                                            Cession
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                    {{-- SAISI INVENTAIRE PAR LOT --}}
                    <div class="d-none" id="divZoneInvLot">
                        <div class="row border-2 border border-warning rounded-top border-opacity-25 mb-2">
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Produit</p>
                                <select class="form-select" name="IDPRODUIT_lot" id="IDPRODUIT_lot">

                                </select>
                            </div>
                            <div class="col-xl-5 mb-2">
                                <p class="mb-0 text-muted">NTSP </p>
                                <input type="text" class="form-control form-select" name="ntsp_lot" id="ntsp_lot">
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Numero lot</p>
                                <input type="text" class="form-control" name="numeroLot" id="numeroLot">
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Date péremption</p>
                                <input type="date" class="form-control text-center" name="date_peremption_lot"
                                    id="date_peremption_lot">
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Emplacement</p>
                                <select class="form-select" name="emplacement_lot" id="emplacement_lot">
                                </select>
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Quantite comptée</p>
                                <input type="text" class="form-control" name="qte_compte_lot" id="qte_compte_lot"
                                    value="0">
                            </div>

                            <div class="col-xl-1 pt-3">
                                <button class="btn btn-success w-100" id="btnAddProduit_lot" data-bs-toggle="tooltip"
                                    data-bs-placement="top" data-bs-custom-class="tooltip-success"
                                    data-bs-trigger="hover" title="Ajouter produit">
                                    <i class='bx bxs-plus-circle'></i>
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                                id="tableSaisiInventaireLot">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-class="text-center" data-column="numero">
                                            N°
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="NumeroTracabilite">
                                            NTSP
                                        </th>
                                        <th class="text-center" data-class="text-center"
                                            data-column="NumeroLotInventaire">
                                            Numéro de lot
                                        </th>
                                        <th class="text-center" data-class="text-center"
                                            data-column="DatePeremptionInventaire">
                                            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="ValueQteComptage1">
                                            Comptage 1
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueQteComptage2">
                                            Comptage 2
                                        </th>
                                        <th class="text-center" data-class="text-center" data-column="ValueQteComptage3">
                                            Comptage 3
                                        </th>
                                        {{-- <th class="text-center" data-class="text-center"
                                            data-column="ValueQteComptageRetenu">
                                            Comptage 800
                                        </th> --}}
                                        <th class="text-center" data-class="text-end" data-column="FormatPrixPRMP">PRMP
                                        </th>
                                        <th class="text-center" data-class="text-end" data-column="FormatPrixCessionHT">
                                            P. Cession HT
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="modal-footer d-block bg-light">
                    <div class="row">
                        <div class="col-xl-3">
                            Nbre de produit : <span class="text-danger fw-bold" id="nbreProduit">0</span>
                        </div>
                        <div class="col-xl-3">
                            Nbre de boîte en stock : <span class="text-danger fw-bold" id="nbreBoiteStock">0</span>
                        </div>
                        <div class="col-xl-3">
                            Nbre de boîte comptée : <span class="text-danger fw-bold" id="nbreBoiteComptee">0</span>
                        </div>
                        <div class="col-xl-3">
                            Nbre de boîte en Ecart : <span class="text-danger fw-bold" id="nbreEcart">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Actualisation de stock --}}
    <div class="modal fade" id="modalActualiseStock" data-bs-focus="false">
        <div class="modal-dialog modal-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> Actualisation de stock inventaire</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="IDINVENTAIRE_ACTUALISE" id="IDINVENTAIRE_ACTUALISE" value="0">
                    <div class="row">
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Zone de stockage</p>
                            <select class="form-select" name="IDZONSTOCKAGE" id="IDZONSTOCKAGE">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <div class="col-xl-12">
                        <button class="btn btn-success w-100" id="btnActualiseStock">Actualiser</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de changement de comptage --}}
    <div class="modal fade" id="modalChangeComptage" data-bs-focus="false">
        <div class="modal-dialog modal-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> Changement de comptage</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <form id="formChangeComptage">
                        @csrf
                        <input type="hidden" name="IDINVENTAIRE_COMPTAGE" id="IDINVENTAIRE_COMPTAGE" value="0">
                        <table class="tablehover table tablehover text-nowrap w-100 no-footer" id="tableChangeComptage">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center">Zone de stockage</th>
                                    <th class="text-center">Comptage</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="modal-footer d-block">
                    <div class="col-xl-12">
                        <button class="btn btn-success w-100" id="btnValiderChangeComptage">Valider</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalCreationListeInventaireRack" data-bs-focus="false">
        <div class="modal-dialog modal-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> Créer une liste de comptage d'inventaire partiel </h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="IDINVENTAIRE_RACK" id="IDINVENTAIRE_RACK" value="0">
                    <div class="row">
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Zone de stockage</p>
                            <select class="form-select" name="IDZONSTOCKAGE_RACK" id="IDZONSTOCKAGE_RACK">

                            </select>
                        </div>
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Rack</p>
                            <select class="form-select" name="IDRACK_RACK" id="IDRACK_RACK">

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

                </div>
                <div class="modal-footer d-block">
                    <div class="col-xl-12">
                        <button class="btn btn-success w-100" id="btnCreerRack">Créer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal param ecart --}}
    <div class="modal fade" id="modalParamEcart" data-bs-focus="false">
        <div class="modal-dialog modal-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> Ecart </h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="row">
                        <div class="col-12">

                            <div class="form-check form-check-md">
                                <input class="form-check-input" type="radio" name="paramEcart" id="aucunEcart"
                                    value="aucun" checked="">
                                <label class="form-check-label" for="aucunEcart">
                                    Aucun
                                </label>
                            </div>
                            <div class="form-check form-check-md">
                                <input class="form-check-input" type="radio" name="paramEcart" id="ecartComptage"
                                    value="ecart">
                                <label class="form-check-label" for="ecartComptage">
                                    Uniquement ecart comptage
                                </label>
                            </div>
                            <div class="form-check form-check-md">
                                <input class="form-check-input" type="radio" name="paramEcart" id="ecartEntreComptage"
                                    value="ecartComptage">
                                <label class="form-check-label" for="ecartEntreComptage">
                                    Ecart entre comptages précédent
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer d-block">
                    <div class="col-xl-12">
                        <button class="btn btn-success w-100" id="validerEcartImprim">Imprimer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="text" id="modeInventaire" value="0" hidden>
    <input type="hidden" name="rack_recup" id="rack_recup" value="0">
    <input type="hidden" name="zone_recup" id="zone_recup" value="0">
    <input type="hidden" name="mode_recup" id="mode_recup" value="0">
    <input type="hidden" name="ecart_recup" id="ecart_recup" value="0">
    <input type="hidden" name="IDINVENT_recup" id="IDINVENT_recup" value="0">

    <style>
        .transition-icon{
    transition: all 0.3s ease;
}

tr.collapse {
    transition: all 0.25s ease-in-out;
}
    </style>

@endsection

@section('script')
    <script>
        listingComboAgence("#IDAGENCE", true)
        listingComboAgence("#site_add").then(() => {
            $("#site_add").val($("#idSiteEnCours").val()).change()
        })

        var tableInventaire = $("#tableInventaire").DataTable({
            language: languageTable,
            // pagingType: 'full_numbers',
            pageLength: 50,
            paging: false,
            lengthChange: false,
            bFilter: false,
            order: [],
            scrollX: 500
        })

        // new $.fn.dataTable.FixedHeader(tableInventaire);
        // tableInventaire.fixedHeader.headerOffset(50);

        var tableZone = $("#tableZone").DataTable({
            language: languageTable,
            // pagingType: 'full_numbers',
            pageLength: 100,
            lengthChange: false,
            bFilter: false,
            order: [],
        })
        var tableNature = $("#tableNature").DataTable({
            language: languageTable,
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: false,
            bFilter: false,
            order: [],
        })

        var tableSaisiInventaire = $("#tableSaisiInventaire").DataTable({
            language: languageTable,
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: false,
            bFilter: false,
            order: [],
        })

        function chargerSelectProduit() {

            $.ajax({
                url: '{{ route('listingProduitSimple') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDPRODUIT').html('')
                    $('#IDPRODUIT').append('<option value="0">TOUS LES PRODUITS</option>')
                    $('#IDPRODUIT_lot').html('')
                    $('#IDPRODUIT_lot').append('<option value="0">TOUS LES PRODUITS</option>')

                    $.each(response.data, function(key, value) {
                        $('#IDPRODUIT').append(
                            `<option value="${value["IDPRODUIT"]}">${value["DesignationProduit"]}</option>`
                        )
                        $('#IDPRODUIT_lot').append(
                            `<option value="${value["IDPRODUIT"]}">${value["DesignationProduit"]}</option>`
                        )
                    })
                    $('#IDPRODUIT').select2({
                        dropdownParent: $('#modalSaisieInventaire')
                    })
                    $('#IDPRODUIT_lot').select2({
                        dropdownParent: $('#modalSaisieInventaire')
                    })
                }
            })
        }

        function changeFormeComptage(isComptageForme) {

            if (isComptageForme == true) {
                if (!$("#divRack").hasClass("d-none")) {
                    $("#divRack").addClass("d-none")
                }

                if ($("#divForme").hasClass("d-none")) {
                    $("#divForme").removeClass("d-none")
                }
            } else {
                if ($("#divRack").hasClass("d-none")) {
                    $("#divRack").removeClass("d-none")
                }

                if (!$("#divForme").hasClass("d-none")) {
                    $("#divForme").addClass("d-none")
                }
            }

        }

        function getEmplacement(idrack, isRack = 1) {
            $.ajax({
                type: "get",
                url: "{{ route('stock.getEmplParRack', '') }}/" + (idrack == "" ? 0 : idrack),
                data: {
                    isRack: isRack
                },
                dataType: "json",
                success: function(response) {
                    if (response.error == false) {
                        $("#emplacement").html("")
                        $("#emplacement_lot").html("")
                        $.each(response.data, function(index, value) {
                            $("#emplacement").append(
                                `<option value="${value.IDEMPLACEMENT}">${value.NomEmplacement}</option>`
                            )
                            $("#emplacement_lot").append(
                                `<option value="${value.IDEMPLACEMENT}">${value.NomEmplacement}</option>`
                            )
                        });

                        $("#emplacement_lot").select2({
                            dropdownParent: $("#modalSaisieInventaire")
                        })
                    }
                },
                error: function(response) {

                }
            });
        }

        function remplissageTableau(Mode, tableau, data) {
            if (parseInt(Mode) == 1) {
                if ($("#divZoneInvLot").hasClass("d-none")) {
                    $("#divZoneInvLot").removeClass("d-none")
                    $("#divZoneInvProduit").addClass("d-none")
                }

                tableSaisiInventaire = remplissageDataTable({
                    IdentifiantDuTableau: tableau,
                    obj: data,
                    paging: false,
                    scrollX: "400px",
                    scrollY: true,
                    drawCallback: function(settings) {
                        var api = settings.oInstance.api();
                        var rows = api.rows().nodes();
                        var last = null;
                        let tailleDonne = api.data().length

                        let oldDonnee = ""

                        api.rows().every(function() {

                            let rowData = this.data();

                            if (rowData.DesignationProduit != oldDonnee) {
                                let dataUp = `<tr class="group" style="background : #FFFFE8">\
                                    <td colspan="4" style="font-size : 9pt" class="ps-3"> ${rowData.DesignationProduit}</td>\
                                    <td  style="font-size : 9pt" class="ps-3"> Stock : <span class="text-danger">${rowData.QteStockInventaire}</span> </td>\
                                    <td  colspan="2" style="font-size : 9pt" class="ps-3"> Qte comptée : <span class="text-danger">${rowData.QteComptageRetenu}</span> </td>\
                                    <td colspan="27" style="font-size : 9pt" class="ps-3"> Ecart : <span class="text-danger">${formatNumberPerf(chaineEnNumerique(rowData.QteComptageRetenu) - chaineEnNumerique(rowData.QteStockInventaire))}</span> </td>\
                                </tr>`

                                $(rows).eq(this.index()).before(dataUp)
                            }
                            oldDonnee = rowData.DesignationProduit

                        });

                    }
                })

            } else {
                if ($("#divZoneInvProduit").hasClass("d-none")) {
                    $("#divZoneInvProduit").removeClass("d-none")
                    $("#divZoneInvLot").addClass("d-none")
                }

                tableSaisiInventaire = remplissageDataTable({
                    IdentifiantDuTableau: tableau,
                    obj: data,
                    paging: false,
                    scrollX: "400px",
                    scrollY: true
                })
            }

            fixe_elements_on_headers_tab('tableSaisiInventaire', `<span class="d-flex align-items-center px-2 mt-1" style="cursor : pointer;">
                                                        <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                        <span id="btn-export-saisie-comptage" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                                    </span>`)


        }

        function affichageDetailSaisi(saisirComptage, mode = 2, Ecart = false) {
            switch (saisirComptage) {
                case "produit":
                    getSaisiDetail($("#IDINVENTAIRE").val(), $("#idzone").val(), $("#idrack").val(), mode, Ecart)
                    break;
                case "agence":
                    getSaisiDetailAgence(
                        $("#IDINVENTAIRE").val(),
                        $("#idzone").val(),
                        $("#idrack").val(),
                        mode,
                        Ecart
                    )
                    break;
                case "forme":
                    if ($("#IDFORMEPRODUIT").val() != "") {
                        getSaisiDetailForme($("#IDINVENTAIRE").val(), $("#idzone").val(), $("#IDFORMEPRODUIT").val(), Ecart)
                    }
                    break;
                case "formeAgence":
                    if ($("#IDFORMEPRODUIT").val() != "") {
                        getSaisiDetailAgenceForme($("#IDINVENTAIRE").val(), $("#idzone").val(), $("#IDFORMEPRODUIT").val(),
                            Ecart)
                    }
                    break;

                case "lot":
                    getSaisiDetail($("#IDINVENTAIRE").val(), $("#idzone").val(), $("#idrack").val(), 1, Ecart)
                    break;
                default:
                    break;
            }
        }

        function getDataDetail(id, mode = 1) {
            $.ajax({
                type: "GET",
                url: "{{ route('stock.inventaireSocks.listingDetailZone', '') }}/" + id,
                data: {
                    mode: mode
                },
                dataType: "json",
                success: function(response) {
                    // console.log(response)
                    if (response.error == false) {

                        $("#tableZone").DataTable().destroy()
                        tableCommandeLigne = $("#tableZone").DataTable({
                            bFilter: false,
                            language: languageTable,
                            pageLength: 100,
                            "data": response.data.zone,
                            'columns': [{
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomRack',
                                    className: 'text-start'
                                },
                                {
                                    data: 'somme_ValeurTheoriquePRMP',
                                    className: 'text-end'
                                },
                                {
                                    data: 'somme_ValeurTheoriqueCessionHT',
                                    className: 'text-end'
                                },
                                {
                                    data: 'somme_ValeurPhysiquePRMP',
                                    className: 'text-end'
                                },
                                {
                                    data: 'somme_ValeurPhysiqueCessionHT',
                                    className: 'text-end'
                                },
                                {
                                    data: 'ecartPRMP',
                                    className: 'text-end'
                                },
                                {
                                    data: 'ecartCession',
                                    className: 'text-end'
                                }
                            ],
                            order: [],
                            drawCallback: function(settings) {

    var api = this.api();
    var rows = api.rows().nodes();

    let zone = "";

    api.rows().every(function() {

        let rowData = this.data();

        let collapseClass = `zone_${rowData.IDZONESTOCKAGE}`;
        let collapseId = `collapse_${rowData.IDZONESTOCKAGE}`;

        // Ajout des classes collapse
        $(rows)
            .eq(this.index())
            .addClass(`collapse ${collapseClass}`);

        // Ouvert par défaut
        $(rows)
            .eq(this.index())
            .addClass('show');

        if (rowData.IDZONESTOCKAGE != zone) {

            $(rows).eq(this.index()).before(`
                <tr style="background:#ECF8FE;"> 
                    <td colspan="8">

                        <div class="d-flex justify-content-between align-items-center">

                            <!-- BOUTON COLLAPSE -->
                            <div 
                                class="zone-collapse-toggle d-flex align-items-center"
                                data-bs-toggle="collapse"
                                data-bs-target=".${collapseClass}"
                                aria-expanded="true"
                                style="cursor:pointer; user-select:none;"
                            >

                                <i class="fa fa-chevron-down toggle-icon me-2 transition-icon"></i>

                                <span style="color:red; font-weight:bold;">
                                    ${rowData.NomZoneStockage}
                                </span>

                                <span class="badge bg-dark-transparent ms-2">
                                    Comptage-${rowData.EtapeInventaireZone ?? 1}
                                </span>

                            </div>

                            <!-- ACTIONS -->
                            <div class="dropdown">

                                <span
                                    class="dropdown-toggle"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    style="cursor:pointer"
                                >
                                    Actions
                                </span>

                                <ul class="dropdown-menu">

                                    <li>
                                        <a
                                            class="dropdown-item"
                                            id="imprimerComptageForme"
                                            data-mode="${rowData.ModeInventaire}"
                                            data-zone="${rowData.IDZONESTOCKAGE}"
                                            data-nom-zone="${rowData.NomZoneStockage}"
                                        >
                                            Imprimer fiche de comptage
                                        </a>
                                    </li>

                                    <li>
                                        <a
                                            class="dropdown-item"
                                            id="saisirComptageForme"
                                            data-mode="${rowData.ModeInventaire}"
                                            data-zone="${rowData.IDZONESTOCKAGE}"
                                            data-nom-zone="${rowData.NomZoneStockage}"
                                        >
                                            Saisir comptage
                                        </a>
                                    </li>

                                </ul>

                            </div>

                        </div>

                    </td>
                </tr>
            `);
        }

        zone = rowData.IDZONESTOCKAGE;
    });

    // Gestion animation icône
    $('.zone-collapse-toggle').off('click').on('click', function() {

        let icon = $(this).find('.toggle-icon');

        setTimeout(() => {

            let expanded = $(this).attr('aria-expanded');

            if (expanded === 'true') {

                icon
                    .removeClass('fa-chevron-right')
                    .addClass('fa-chevron-down');

            } else {

                icon
                    .removeClass('fa-chevron-down')
                    .addClass('fa-chevron-right');
            }

        }, 200);

    });

},
                            footerCallback: function(row, data, start, end, display) {
                                var api = this.api();

                                // Total de la colonne 2 (Quantité)
                                let totalTheoPRMP = api
                                    .column(2)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);
                                let totalTheoCession = api
                                    .column(3)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);
                                let totalPhyPRMP = api
                                    .column(4)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);
                                let totalPhyCession = api
                                    .column(5)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);
                                let totalEcartPRMP = api
                                    .column(6)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);
                                let totalEcartCession = api
                                    .column(7)
                                    .data()
                                    .reduce((a, b) => a + chaineEnNumerique(b), 0);


                                // Mettre à jour le footer
                                $(api.column(2).footer()).html(formatNumberPerf(totalTheoPRMP));
                                $(api.column(3).footer()).html(formatNumberPerf(totalTheoCession));
                                $(api.column(4).footer()).html(formatNumberPerf(totalPhyPRMP));
                                $(api.column(5).footer()).html(formatNumberPerf(totalPhyCession));
                                $(api.column(6).footer()).html(formatNumberPerf(totalEcartPRMP));
                                $(api.column(7).footer()).html(formatNumberPerf(totalEcartCession));
                            }
                        })

                        let child = $("#tableZone_length").parent().parent().children().eq(1)
                        child.addClass("d-flex")
                        child.append(
                            `<span class="dropdown-toggle text-warning fs-14 fw-bold" data-bs-toggle="dropdown" aria-expanded="false" style="cursor:pointer">
                                <i class="bx bx-printer mt-1 me-1"></i> Imprimer
                            </span>
                            <ul class="dropdown-menu" style="cursor:pointer">
                                <li><a class="dropdown-item" id="imprimFicheComptageAny" >Fiche compatge</a></li>
                                <li><a class="dropdown-item" id="imprimFicheEcartComptageAny" >Fiche comptages écart Agence</a></li>
                                <li><a class="dropdown-item" id="imprimFicheControle800Any" >Fiche controle 800</a></li>
                            </ul>`
                        )


                        // Remplissage du tableau de nature
                        tableNature.clear().draw();
                        $.each(response.data.nature, function(index, item) {
                            tableNature.row.add([
                                item.LibelleCategorieProduit,
                                item.somme_ValeurTheoriquePRMP,
                                item.somme_ValeurTheoriqueCessionHT,
                                item.somme_ValeurPhysiquePRMP,
                                item.somme_ValeurPhysiqueCessionHT,
                                item.ecartPRMP,
                                item.ecartCession
                            ]);

                        });
                        tableNature.draw();

                        if (response.data.inventaire != null) {
                            $("#IDINVENTAIRE").val(response.data.inventaire.IDINVENTAIRE)
                            $("#IDAGENCE").val(response.data.inventaire.IDAGENCE)
                        }
                    }
                },
                error: function(response) {

                }
            });
        }

        function getSaisiDetail(IDINVENTAIRE, IDZONESTOCKAGE, IDRACK, Mode, Ecart = false) {
            return new Promise((resolve, reject) => {

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.detailSaisiInventaire') }}",
                    data: {
                        IDINVENTAIRE: IDINVENTAIRE,
                        IDZONESTOCKAGE: IDZONESTOCKAGE == "" ? 0 : IDZONESTOCKAGE,
                        IDRACK: IDRACK == "" ? 0 : IDRACK,
                        Mode: Mode,
                        uniqEcart: Ecart,
                    },
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {

                            if (parseInt(Mode) == 1) {
                                remplissageTableau(Mode, "#tableSaisiInventaireLot", response.data
                                    .detailInventaireProduit)
                            } else {
                                remplissageTableau(Mode, "#tableSaisiInventaire", response.data
                                    .detailInventaireProduit)
                            }

                            $("#nbreProduit").text(response.data.nbreProduit)
                            $("#nbreBoiteStock").text(response.data.QteStockInventaire)
                            $("#nbreBoiteComptee").text(response.data.QteComptageRetenu)
                            $("#nbreEcart").text(response.data.Ecart)

                            $(".numberInput").trigger("input")
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError("Erreur lors du chargement !!")
                    }
                });
            });
        }

        function getSaisiDetailAgence(IDINVENTAIRE, IDZONESTOCKAGE, IDRACK, Mode, Ecart = false) {
            $.ajax({
                type: "GET",
                url: "{{ route('stock.EcartAgence') }}",
                data: {
                    IDINVENTAIRE: IDINVENTAIRE,
                    IDZONESTOCKAGE: IDZONESTOCKAGE,
                    IDRACK: IDRACK == "" ? 0 : IDRACK,
                    uniqEcart: Ecart,
                    Mode: Mode
                },
                dataType: "JSON",
                beforeSend: progressHandler(),
                success: function(response) {
                    console.log(response);

                    if (response.error == false) {


                        if (parseInt(Mode) == 1) {

                            remplissageTableau(Mode, "#tableSaisiInventaireLot", response.data
                                .detailInventaireProduit)
                        } else {
                            remplissageTableau(Mode, "#tableSaisiInventaire", response.data
                                .detailInventaireProduit)
                        }

                        $("#nbreProduit").text(response.data.nbreProduit)
                        $("#nbreBoiteStock").text(response.data.QteStockInventaire)
                        $("#nbreBoiteComptee").text(response.data.QteComptageRetenu)
                        $("#nbreEcart").text(response.data.Ecart)

                        $(".numberInput").trigger("input")
                    }
                    completeHandler()
                },
                error: function(response) {
                    completeHandler()
                    notifError("Erreur lors du chargement !!")
                }
            });
        }

        function getSaisiDetailForme(IDINVENTAIRE, IDZONESTOCKAGE, IDFORMEPRODUIT, Ecart = false) {
            $.ajax({
                type: "GET",
                url: "{{ route('stock.detailSaisiInventaireForme') }}",
                data: {
                    IDINVENTAIRE: IDINVENTAIRE,
                    IDZONESTOCKAGE: IDZONESTOCKAGE,
                    IDFORMEPRODUIT: IDFORMEPRODUIT,
                    mode: $("#mode_recup").val(),
                    uniqEcart: Ecart,
                },
                dataType: "JSON",
                beforeSend: progressHandler(),
                success: function(response) {
                    if (response.error == false) {
                        if (parseInt($("#mode_recup").val()) == 1) {
                            remplissageTableau($("#mode_recup").val(), "#tableSaisiInventaireLot", response.data
                                .detailInventaireProduit)
                        } else {
                            remplissageTableau($("#mode_recup").val(), "#tableSaisiInventaire", response.data
                                .detailInventaireProduit)
                        }

                        $("#nbreProduit").text(response.data.nbreProduit)
                        $("#nbreBoiteStock").text(response.data.QteStockInventaire)
                        $("#nbreBoiteComptee").text(response.data.QteComptageRetenu)
                        $("#nbreEcart").text(response.data.Ecart)

                        $(".numberInput").trigger("input")
                    }
                    completeHandler()
                },
                error: function(response) {
                    completeHandler()
                    notifError("Erreur lors du chargement !!")
                }
            });
        }

        function getSaisiDetailAgenceForme(IDINVENTAIRE, IDZONESTOCKAGE, IDFORMEPRODUIT, Ecart = false) {
            $.ajax({
                type: "GET",
                url: "{{ route('stock.EcartAgenceForme') }}",
                data: {
                    IDINVENTAIRE: IDINVENTAIRE,
                    IDZONESTOCKAGE: IDZONESTOCKAGE,
                    IDFORMEPRODUIT: IDFORMEPRODUIT,
                    mode: $("#mode_recup").val(),
                    uniqEcart: Ecart,
                },
                dataType: "JSON",
                beforeSend: progressHandler(),
                success: function(response) {
                    if (response.error == false) {
                        if (parseInt($("#mode_recup").val()) == 1) {

                        } else {

                        }

                        if (parseInt($("#mode_recup").val()) == 1) {
                            remplissageTableau($("#mode_recup").val(), "#tableSaisiInventaireLot", response.data
                                .detailInventaireProduit)
                        } else {
                            remplissageTableau($("#mode_recup").val(), "#tableSaisiInventaire", response.data
                                .detailInventaireProduit)
                        }

                        $("#nbreProduit").text(response.data.nbreProduit)
                        $("#nbreBoiteStock").text(response.data.QteStockInventaire)
                        $("#nbreBoiteComptee").text(response.data.QteComptageRetenu)
                        $("#nbreEcart").text(response.data.Ecart)

                        $(".numberInput").trigger("input")

                    }
                    completeHandler()
                },
                error: function(response) {
                    completeHandler()
                    notifError("Erreur lors du chargement !!")
                }
            });
        }

        function listeForme() {
            $.ajax({
                type: "get",
                url: "{{ route('listeForme') }}",
                dataType: "json",
                success: function(response) {
                    $("#IDFORMEPRODUIT").html("")
                    $("#IDFORMEPRODUIT").append(`<option value=""></option>`)
                    $.each(response, function(index, value) {
                        $("#IDFORMEPRODUIT").append(
                            `<option value="${value.IDFORMEPRODUIT}">${value.LibelleFormeProduit}</option>`
                        )
                    });
                    $('#IDFORMEPRODUIT').select2({
                        dropdownParent: $('#modalSaisieInventaire')
                    })
                }
            });
        }

        function listeLigneSelectionneInv(table, ligneCheck) {

            let dataIdCmdeLigne = []
            let dataPack = []
            let valNow = ""
            let tableListeTransfert = $(table).DataTable()
            let lignes = tableListeTransfert.rows().nodes()

            $.each($(lignes).find(ligneCheck), function(key, value) {

                if (value.checked == true) {
                    // data - idclient
                    dataIdCmdeLigne.push({
                        rack: value.getAttribute('data-rack'),
                        zone: value.getAttribute('data-zone'),
                        mode: value.getAttribute('data-mode'),
                    })
                }
            })

            return dataIdCmdeLigne
        }

        _('checkAllZone').addEventListener('click', function() {
            let value = this.checked
            let tableListe = $("#tableZone").DataTable()
            let lignes = tableListe.rows().nodes()
            $(lignes).find('#checkLigneZone').prop('checked', value)
        })

        // selection d'une ligne de commande
        $(document).on('click', '#checkLigneZone', function() {
            if ($(this).checked == true) {
                $(this).checked = false
            }
            if (_('checkAllZone').checked == true) {
                _('checkAllZone').checked = false
            }
        })

        _('checkAll').addEventListener('click', function() {
            let value = this.checked
            let tableListe = $("#tableInventaire").DataTable()
            let lignes = tableListe.rows().nodes()
            $(lignes).find('#checkLigneInv').prop('checked', value)
        })

        // selection d'une ligne de commande
        $(document).on('click', '#checkLigneInv', function() {
            if ($(this).checked == true) {
                $(this).checked = false
            }
            if (_('checkAll').checked == true) {
                _('checkAll').checked = false
            }
        })

        $(function() {
            $("#btnSearch").on("click", function() {
                getInventaire()
            })

            function getInventaire() {
                $.ajax({
                    type: "post",
                    url: "{{ route('stock.inventaireSocks.listing') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        periode: $("#periode").val(),
                        IDAGENCE: $("#IDAGENCE").val(),
                        natureInventaire: $("#natureInventaire").val(),
                        typeInventaire: $("#typeInventaire").val(),
                    },
                    beforeSend: progressHandler(),
                    dataType: "json",
                    success: function(response) {
                        tableInventaire.clear().draw();
                        $.each(response.data, function(index, item) {
                            tableInventaire.row.add([
                                item.action,
                                item.DateInventaire,
                                item.NomAgence,
                                item.CommentaireInventaire,
                                item.mode,
                                item.TypeInven,
                                item.NatureInvent,
                                item.somme_ValeurTheoriquePRMP,
                                item.somme_ValeurTheoriqueCessionHT,
                                item.somme_ValeurPhysiquePRMP,
                                item.somme_ValeurPhysiqueCessionHT,
                                item.ecratPRMP,
                                item.ecratCessionHT,
                            ]);
                        });
                        tableInventaire.draw();

                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                    }
                });
            }

            $(document).on("click", ".btn-view", function() {
                let id = $(this).data('id')
                $("#IDINVENTAIRE").val($(this).data('id'))
                getDataDetail(id, $(this).data("mode"))
            })

            $(document).on("click", ".btn-edit", function() {
                let id = $(this).data('id')

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.inventaireSocks.edit', '') }}/" + id,
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            let data = response.data

                            $("#IDINVENTAIRE").val(data.IDINVENTAIRE)
                            $("#site_add").val(data.IDAGENCE).change()
                            $("#date_inventaire").val(data.DateInventaire)
                            $("#natureInventaire_add").val(data.CategorieInventaire).change()
                            $("#typeInventaire_add").val(data.TypeInventaire).change()
                            $("#modeInventaire_add").val(data.ModeInventaire).change()
                            $("#commentaire").val(data.CommentaireInventaire)
                            $("#traitementCreate").val("false")

                            $("#site_add").prop("disabled", true)
                            $("#natureInventaire_add").prop("disabled", true)
                            $("#typeInventaire_add").prop("disabled", true)
                            $("#modeInventaire_add").prop("disabled", true)
                            $("#date_inventaire").prop("readonly", true)

                            $("#modalAddInventaire").modal("show")
                        }
                    },
                    error: function(response) {
                        notifError(response.responseJSON.messages)
                    }
                });

            })

            function listeZoneStockage(idinvent, element, modal = "") {
                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.zoneParInventaire', '') }}/" + idinvent,
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $(element).html("")
                            $(element).append(
                                `<option value="0">TOUTES</option>`
                            )
                            $.each(response.data, function(index, items) {
                                $(element).append(
                                    `<option value="${items.IDZONESTOCKAGE}">${items.NomZoneStockage}</option>`
                                )
                            });

                            if (modal != "") {
                                $(element).select2({
                                    dropdownParent: $(modal)
                                })
                            }

                            $(element).val(response.data[0].IDZONESTOCKAGE).change()
                        }
                    }
                });
            }

            $(document).on("click", "#actualisationSTockInventaire", function() {
                let idinvent = $(this).data("id")
                $("#modalActualiseStock").modal("show")
                $("#IDINVENTAIRE_ACTUALISE").val(idinvent)

                listeZoneStockage(idinvent, "#IDZONSTOCKAGE", '#modalActualiseStock')
            })

            $(document).on("click", "#btnActualiseStock", function() {
                confirmAction(() => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('stock.ActualisationStockInventaire') }}",
                            data: {
                                IDINVENTAIRE_ACTUALISE: $("#IDINVENTAIRE_ACTUALISE").val(),
                                IDZONSTOCKAGE: $("#IDZONSTOCKAGE").val(),
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                completeHandler()
                                if (response.error == false) {
                                    notifSuccess(response.messages)
                                    getInventaire()
                                    tableZone.clear().draw()
                                    tableNature.clear().draw()
                                    $("#modalActualiseStock").modal("hide")
                                }
                            },
                            error: function(response) {
                                notifError(response.responseJSON.messages)
                            }
                        });
                    },
                    "Voulez-vous actualiser les stocks de la zone de stockage des produits de l'inventaire sélectionné ?",
                    // "Vous risquez de perdre de vos données"
                )

            })

            $(document).on("click", "#syntheseComptageValorise", function() {
                let id = $(this).data("id")

                if (id == "") {
                    alertSwal("Aucun inventaire selectionné !!")
                    return false
                }

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.getSyntheseComptageValorise', '') }}/" + id,
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notif("warning", "Attention", "Aucun donnée trouvée !!")
                                return 0
                            }

                            genererPDF(response.tablePDF)
                        }
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
            })

            $(document).on("click", "#syntheseComptage800sup0, #syntheseComptage800diff0", function() {
                let idInventaire = $(this).data("id")

                if (idInventaire == "") {
                    alertSwal("Aucun inventaire selectionné !!")
                    return false
                }

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.getSyntheseComptage800Sup0', '') }}/" + idInventaire,
                    data: {
                        sens: $(this).data("sens")
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        completeHandler()
                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notif("warning", "Attention", "Aucun donnée trouvée !!")
                                return 0
                            }

                            genererPDF(response.tablePDF)
                            return false
                        }
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });

            })

            $(document).on("click", "#etatRecapInventaire", function() {
                let idInventaire = $(this).data("id")

                if (idInventaire == "") {
                    alertSwal("Aucun inventaire selectionné !!")
                    return false
                }

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.etatRecapitulatifInventaire', '') }}/" + idInventaire,
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        completeHandler()
                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notif("warning", "Attention", "Aucun donnée trouvée !!")
                                return 0
                            }

                            genererPDF(response.tablePDF)
                        }
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                });

            })

            var dataListeZoneComptage = []

            $(document).on("click", ".btn-changeComptage", function(evt) {
                let data = $(this).data("id")
                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.getListeZoneComptage', '') }}/" + data,
                    dataType: "JSON",
                    success: function(response) {

                        if (response.error == false) {
                            $("#tableChangeComptage tbody").html("")
                            $("#IDINVENTAIRE_COMPTAGE").val(data)
                            if (response.data.length == 0) {
                                $("#tableChangeComptage tbody").append(
                                    `<tr> <td colspan="2" class="text-center">Aucune données</td></tr>`
                                )
                            } else {
                                dataListeZoneComptage = response.data
                                $.each(response.data, function(index, value) {
                                    $("#tableChangeComptage tbody").append(`<tr>
                                                                <td>${value.NomZoneStockage}</td>
                                                                <td>
                                                                    <select id="valChangeComptage" class="form-select" name="${value.IDZONESTOCKAGE ?? 0}">
                                                                        <option value="1" ${value.EtapeInventaireZone == 1 ? "selected" : "" }>COMPTAGE 1</option>
                                                                        <option value="2" ${value.EtapeInventaireZone == 2 ? "selected" : "" }>COMPTAGE 2</option>
                                                                        <option value="3" ${value.EtapeInventaireZone == 3 ? "selected" : "" }>COMPTAGE 3</option>
                                                                        <option value="4" ${value.EtapeInventaireZone == 4 ? "selected" : "" }>COMPTAGE 800</option>
                                                                        <option value="5" ${value.EtapeInventaireZone == 5 ? "selected" : "" }>CLOTURE</option>
                                                                    </select>
                                                                </td>
                                                            </tr>`)
                                });
                            }

                            $("#modalChangeComptage").modal("show")
                        }
                    },
                    error: function(response) {
                        notifError(response.responseJSON.messages)
                    }
                });
            })

            $(document).on("change", "#valChangeComptage", function() {
                let index = dataListeZoneComptage.findIndex((item) => {
                    return item.IDZONESTOCKAGE == $(this).prop("name")
                })

                dataListeZoneComptage[index].EtapeInventaireZone = $(this).val()
            })

            $(document).on("click", "#btnValiderChangeComptage", function(evt) {
                confirmMdp('{{ csrf_token() }}', () => {

                        $.ajax({
                            type: "POST",
                            url: "{{ route('stock.changeComptageInventaire') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                data: dataListeZoneComptage,
                                Inventaire: $("#IDINVENTAIRE_COMPTAGE").val(),
                                Etape: 0
                            },
                            dataType: "JSON",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                if (response.error == false) {
                                    if (response.data.length > 0) {

                                        completeHandler()

                                        let ComptageRetour = false
                                        let retablirComptage = false
                                        let renitialiseEcartAgence = false
                                        let renitialiseEcartMagasin = false

                                        let oldDonnee = response.data

                                        $.each(dataListeZoneComptage, function(index,
                                            value) {

                                            let indexZone = oldDonnee.findIndex((
                                                item) => {
                                                return item
                                                    .IDZONESTOCKAGE == value
                                                    .IDZONESTOCKAGE
                                            })


                                            if (parseInt(value
                                                    .EtapeInventaireZone) <
                                                parseInt(
                                                    oldDonnee[indexZone]
                                                    .EtapeInventaireZone) &&
                                                parseInt(value
                                                    .EtapeInventaireZone) > 0) {
                                                ComptageRetour = true
                                                console.log("je suis là")
                                                return false;
                                            }
                                        });

                                        if (ComptageRetour == true) {
                                            let ConfirmComtageRetour = new Promise((resolve,
                                                reject) => {
                                                confirmAction(
                                                    () => {
                                                        resolve(true)
                                                    },
                                                    "Voulez-vous rétablir les comptages 800 ?",
                                                    "",
                                                    "",
                                                    () => {
                                                        resolve(false)
                                                    }
                                                )
                                            });

                                            ConfirmComtageRetour.then(function(result) {
                                                retablirComptage = result

                                                valideChangeComptage(
                                                    renitialiseEcartAgence,
                                                    renitialiseEcartMagasin,
                                                    retablirComptage)
                                            })
                                        } else {
                                            $.each(dataListeZoneComptage, function(index,
                                                value) {
                                                let indexZone = oldDonnee.findIndex(
                                                    (item) => {
                                                        return item
                                                            .IDZONESTOCKAGE ==
                                                            value.IDZONESTOCKAGE
                                                    })

                                                if (parseInt(value
                                                        .EtapeInventaireZone) >
                                                    parseInt(oldDonnee[indexZone]
                                                        .EtapeInventaireZone) &&
                                                    parseInt(oldDonnee[indexZone]
                                                        .EtapeInventaireZone) > 0 &&
                                                    parseInt(value
                                                        .EtapeInventaireZone) < 5) {

                                                    let ConfirmComtageProdEcartAgence =
                                                        new Promise((resolve,
                                                            reject) => {
                                                            confirmAction(
                                                                () => {
                                                                    resolve(
                                                                        true
                                                                    )
                                                                },
                                                                "Voulez-vous réinitialiser les comptages des produits en écarts Agence ?",
                                                                "",
                                                                "",
                                                                () => {
                                                                    resolve(
                                                                        false
                                                                    )
                                                                }
                                                            )
                                                        });

                                                    ConfirmComtageProdEcartAgence
                                                        .then(function(
                                                            result) {
                                                            if (result ==
                                                                true) {
                                                                renitialiseEcartAgence
                                                                    = true
                                                                valideChangeComptage
                                                                    (renitialiseEcartAgence,
                                                                        renitialiseEcartMagasin,
                                                                        retablirComptage
                                                                    )
                                                                return false
                                                            } else {
                                                                let ConfirmComtageProdEcartMagasin =
                                                                    new Promise(
                                                                        (resolve,
                                                                            reject
                                                                        ) => {
                                                                            confirmAction
                                                                                (
                                                                                    () => {
                                                                                        resolve
                                                                                            (
                                                                                                true
                                                                                            )
                                                                                    },
                                                                                    "Voulez-vous réinitialiser les comptages des produits en écarts Magasin ?",
                                                                                    "",
                                                                                    "",
                                                                                    () => {
                                                                                        resolve
                                                                                            (
                                                                                                false
                                                                                            )
                                                                                    }
                                                                                )
                                                                        });

                                                                ConfirmComtageProdEcartMagasin
                                                                    .then(
                                                                        function(
                                                                            result
                                                                        ) {
                                                                            renitialiseEcartMagasin
                                                                                =
                                                                                result
                                                                            valideChangeComptage
                                                                                (renitialiseEcartAgence,
                                                                                    renitialiseEcartMagasin,
                                                                                    retablirComptage
                                                                                )
                                                                            return false
                                                                        })
                                                            }
                                                        })
                                                }
                                            });
                                        }
                                    }
                                }
                                completeHandler()
                            },
                            error: function(response) {
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        });
                    }, null,
                    "Voulez-vous créer/modifier un inventaire ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION D'INVENTAIRE",
                        typeJNL: 3,
                        CodeDroit: "DS_Inventaire"
                    }
                )

            })

            function valideChangeComptage(renitialiseEcartAgence, renitialiseEcartMagasin, retablirComptage) {

                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.changeComptageInventaire') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: dataListeZoneComptage,
                        Inventaire: $("#IDINVENTAIRE_COMPTAGE").val(),
                        Etape: 1,
                        renitialiseEcartAgence: renitialiseEcartAgence,
                        renitialiseEcartMagasin: renitialiseEcartMagasin,
                        retablirComptage: retablirComptage
                    },
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            $("#modalChangeComptage").modal("hide")
                            notifSuccess(response.messages)
                            dataListeZoneComptage = []
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.messages)
                    }
                });
            }

            $(document).on("click", "#creationListeInventaire", function() {
                $("#IDINVENTAIRE_RACK").val($(this).data("id"))
                listeZoneStockage(
                    $(this).data("id"),
                    "#IDZONSTOCKAGE_RACK",
                    "#modalCreationListeInventaireRack"
                )
                $("#modalCreationListeInventaireRack").modal("show")
            })

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

                let id = $(this).data("id")
                confirmMdp('{{ csrf_token() }}',
                    () => {
                        $.ajax({
                            type: "post",
                            url: "{{ route('stock.majStocksComptage800') }}",
                            data: {
                                data: id,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                completeHandler()
                                if (response.error == true) {
                                    alertSwal(response.messages)
                                    return false
                                }
                                alertSwal(response.messages, "success")
                            },
                            error: function(response) {
                                completeHandler()
                                notifError(response.messages)
                            }
                        });
                    }, null,
                    "Veuiller saisir votre mot de passe pour valider la maise à jour des stocks !", {
                        sousTitre: '',
                        infoJNL: "MISE A JOUR DE STOCK AU COMPTAGE 800",
                        typeJNL: 4,
                        CodeDroit: "DS_InventaireMajStocks"
                    }
                )


            })

            $(document).on('change', "#IDZONSTOCKAGE_RACK", function() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.getRack', '') }}/" + $(this).val(),
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#IDRACK_RACK").html("")
                            $("#IDRACK_RACK").append(`<option value="0">TOUS</option>`)
                            $.each(response.data, function(index, value) {
                                $("#IDRACK_RACK").append(
                                    `<option value="${value.IDRACK}">${value.NomRack}</option>`
                                )
                            });
                            $("#IDRACK_RACK").select2({
                                dropdownParent: $("#modalCreationListeInventaireRack")
                            })
                        }
                    },
                    error: function(response) {

                    }
                });
            })

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

                if ($("#IDZONSTOCKAGE_RACK").val() == "0") {
                    alertSwal("Veuillez choisir une zone de stockage !!")
                    return false
                }

                let Confirm = new Promise((resolve, reject) => {
                    confirmAction(() => {
                            resolve(true)
                        },
                        "Voulez-vous reporter les stocks dans quantité comptée 1 ?",
                        "",
                        "warning",
                        () => {
                            resolve(false)
                        }
                    )
                });

                Confirm.then(function(response) {

                    confirmMdp('{{ csrf_token() }}', () => {
                            $.ajax({
                                type: "POST",
                                url: "{{ route('stock.creerInventaireZone') }}",
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    IDINVENTAIRE_RACK: $("#IDINVENTAIRE_RACK").val(),
                                    IDZONSTOCKAGE_RACK: $("#IDZONSTOCKAGE_RACK").val(),
                                    IDRACK_RACK: $("#IDRACK_RACK").val(),
                                    ParamProdCMU: "{{ $CMU }}",
                                    repliquer: response,
                                },
                                dataType: "JSON",
                                beforeSend: progressHandler(),
                                success: function(response) {
                                    completeHandler()
                                    if (response.error == false) {
                                        $("#modalCreationListeInventaireRack")
                                            .modal("hide")
                                        notifSuccess(response.messages)
                                        return false
                                    }
                                    notifWarning(response.messages)
                                },
                                error: function(response) {
                                    completeHandler()
                                    notifDanger(response.responseJSON.messages)
                                }
                            });
                        }, null,
                        "Voulez-vous créer la nature sélectionnée ?", {
                            sousTitre: '',
                            infoJNL: "CREATION/MODIFICATION DE NATURE",
                            typeJNL: 3,
                            CodeDroit: "DS_Inventaire"
                        }
                    )
                })

            })
        })

        $(function() {
            // Ouvertur de modal de création d'inventaire
            $('#btnNew').click(function() {
                $("#site_add").val($("#idSiteEnCours").val()).change()
                $("#traitementCreate").val("true")
                $("#modalAddInventaire").modal("show")
            })

            $(document).on("click", "#btnSupprimeInv", function() {
                let listeData = listeLigneSelectionne("#tableInventaire", "#checkLigneInv")

                if (listeData.length <= 0) {
                    alertSwal("Veuillez cocher une/plusieurs lignes !")
                    return false
                }
                confirmMdp(
                    "{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            type: "delete",
                            url: "{{ route('stock.deleteInventaire') }}",
                            data: {
                                data: listeData,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                completeHandler()
                                if (response.error == false) {
                                    tableZone.clear().draw()
                                    tableNature.clear().draw()
                                    notifSuccess(response.messages)
                                    $("#btnSearch").click()
                                    return false
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        });
                    },
                    null,
                    "Veuiller saisir votre mot passe pour supprimer la/les ligne(s) sélectionnée(s)", {
                        sousTitre: '',
                        infoJNL: "SUPPRIMER INVENTAIRE",
                        typeJNL: 3,
                        CodeDroit: "DS_InventaireSupprime"
                    }
                )
            })

            $(document).on("hide.bs.modal", "#modalSaisieInventaire", function() {
                $("#qte_compte").val(0)
                $("#emplacement").html("")
                $("#IDPRODUIT").val(0).change()

                if ($("#divZoneInvProduit").hasClass("d-none")) {
                    $("#divZoneInvProduit").removeClass("d-none")
                    $("#divZoneInvLot").addClass("d-none")
                }

                getDataDetail($("#IDINVENTAIRE").val(), $("#modeInventaire").val())
            })
            $(document).on("hide.bs.modal", "#modalAddInventaire", function() {
                $("#site_add").prop("disabled", false)
                $("#natureInventaire_add").prop("disabled", false)
                $("#typeInventaire_add").prop("disabled", false)
                // $("#modeInventaire_add").prop("disabled", false)
                $("#date_inventaire").prop("readonly", false)
                $("#formAddInventaire")[0].reset()
            })

            $(document).on("submit", "#formAddInventaire", function(evt) {
                evt.preventDefault();

                if ($("#site_add").val() == "") {
                    alertSwal("Veuillez sélectionner une agence, SVP !")
                    return false
                }
                if ($("#date_inventaire").val() == "") {
                    alertSwal("Renseigner la date de l'inventaire, SVP !")
                    return false
                }
                if ($("#commentaire").val() == "") {
                    alertSwal("Commenter l'inventaire à créer, SVP !")
                    return false
                }

                // Creation
                if ($("#traitementCreate").val() == "true") {

                    if ($("#typeInventaire_add").val() == "2") {
                        modifCreationInv(false)
                        return false
                    }

                    let Confirm = new Promise((resolve, reject) => {
                        confirmAction(() => {
                                resolve(1)
                            },
                            "Voulez-vous reporter les stocks dans quantité comptée 1 ?",
                            "",
                            "warning",
                            () => {
                                resolve(0)
                                reject(0)
                            }
                        )
                    });

                    Confirm.then(function(response) {
                        modifCreationInv(response)
                    })
                    return false
                }

                // Modification
                modifCreationInv(0)
            })

            function modifCreationInv(reporter) {
                let formData = new FormData(_("formAddInventaire"))
                formData.append("reporter", reporter)
                formData.append("CMU", "{{ $CMU }}")
                formData.append("modeInventaire_add", $("#modeInventaire_add").val())

                confirmMdp('{{ csrf_token() }}',
                    () => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('stock.inventaireSocks.generer') }}",
                            data: formData,
                            processData: false,
                            contentType: false,
                            dataType: "json",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                completeHandler()

                                if (response.error == false) {
                                    $("#modalAddInventaire").modal("hide")

                                    $("#natureInventaire_add").val("1").change()
                                    $("#typeInventaire_add").val("1").change()
                                    $("#commentaire").val("")
                                    $("#btnSearch").trigger('click')
                                    notifSuccess(response.messages)
                                }
                            },
                            error: function(response) {
                                console.log(response)
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        })
                    }, null,
                    "Voulez-vous créer/modifier un inventaire ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION D'INVENTAIRE",
                        typeJNL: 3,
                        CodeDroit: "DS_Inventaire"
                    }
                )
            }

            chargerSelectProduit()

            var saisirComptage = ""

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

                saisirComptage = "produit"
                changeFormeComptage(false)

                $("#title-modal").text("Saisie de comptages")

                let nomRack = $(this).data("nom-rack") == "" ? "NON DEFINI" : $(this).data("nom-rack")
                let nomZone = $(this).data("nom-zone") == "" ? "NON DEFINI" : $(this).data("nom-zone")

                $("#rayonRack").val(nomRack)
                $("#nomZoneComptage").val(nomZone)
                $("#idrack").val($(this).data("rack"))
                $("#idzone").val($(this).data("zone"))
                $("#mode_recup").val($(this).data("mode"))

                // console.log($("#IDINVENTAIRE").val())

                getEmplacement($(this).data("rack") == "" ? 0 : $(this).data("rack"))
                getSaisiDetail(
                    $("#IDINVENTAIRE").val(),
                    $("#idzone").val(),
                    $("#idrack").val(),
                    parseInt($(this).data("mode"))
                )

                $("#modeInventaire").val($(this).data("mode"))

                if ($(this).data("mode") == "1") {
                    $("#divZoneInvProduit").addClass("d-none")
                    $("#divZoneInvLot").removeClass("d-none")
                } else if ($(this).data("mode") == "2") {
                    $("#divZoneInvProduit").removeClass("d-none")
                    $("#divZoneInvLot").addClass("d-none")

                }

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

            $(document).on("change", "#IDPRODUIT", function() {
                $("#qte_compte").focus()
                $("#qte_compte").select()
            })

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

                if (parseInt($("#qte_compte").val()) == 0) {
                    alertSwal("La quantité saisie doit être différente de 0 !")
                    return false
                }
                if (parseInt($("#IDPRODUIT").val()) == "") {
                    alertSwal("Veuiller selectionner un produit svp !")
                    return false
                }
                if (parseInt($("#IDINVENT").val()) == "") {
                    alertSwal("Aucun inventaire selectionner !")
                    return false
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.saisirProduitInventaire') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDAGENCE: $("#IDAGENCE").val(),
                        IDPRODUIT: $("#IDPRODUIT").val(),
                        IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                        IDZONE: $("#idzone").val() == "" ? 0 : $("#idzone").val(),
                        qteComptee: $("#qte_compte").val(),
                        IDEmplSelectionne: $("#emplacement").val() == "" ? 0 : $("#emplacement")
                            .val(),
                        IDRack: $("#idrack").val() == "" ? 0 : $("#idrack").val(),
                        enModif: 0,
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.error == false) {
                            if (response.forUpdate == true) {

                                var confirmQte = new Promise((resolve, reject) => {
                                    confirmAction(() => {
                                            resolve(1)
                                        },
                                        "La quantité : " + $("#qte_compte").val() +
                                        " a déjà été saisie pour ce produit <br> voulez-vous ajouter la nouvelle quantité saisie ?",
                                        "",
                                        "warning",
                                        () => {
                                            resolve(0)
                                            reject(0)
                                        }
                                    )
                                });

                                confirmQte.then(function(response) {
                                    $.ajax({
                                        type: "POST",
                                        url: "{{ route('stock.saisirProduitInventaire') }}",
                                        data: {
                                            _token: "{{ csrf_token() }}",
                                            IDAGENCE: $("#IDAGENCE").val(),
                                            IDPRODUIT: $("#IDPRODUIT").val(),
                                            IDINVENTAIRE: $("#IDINVENTAIRE")
                                                .val(),
                                            IDZONE: $("#idzone").val(),
                                            qteComptee: $("#qte_compte").val(),
                                            IDEmplSelectionne: $("#emplacement")
                                                .val(),
                                            IDRack: $("#idrack").val(),
                                            enModif: response,
                                        },
                                        dataType: "JSON",
                                        success: function(response) {
                                            if (response.error == false) {
                                                affichageDetailSaisi(
                                                    saisirComptage,
                                                    $('#mode_recup')
                                                    .val(),
                                                    $('#uniqEcart')
                                                    .val()
                                                )


                                                $("#qte_compte").val(0)
                                                $("#IDPRODUIT").val(0)
                                                    .change()
                                                notifSuccess(response
                                                    .messages)
                                                return false
                                            }
                                            notifWarning(response.messages)
                                        },
                                        error: function(response) {
                                            console.log(response)
                                            notifError(response.responseJSON
                                                .messages)
                                        }
                                    });
                                })
                                return false
                            }

                            affichageDetailSaisi(saisirComptage, $('#mode_recup').val(), $(
                                '#uniqEcart').val())
                            console.log(response)
                        }
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
            })

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

                if ($(this).is(':checked')) {
                    $(this).val(true)
                    affichageDetailSaisi(saisirComptage, $("#mode_recup").val(), true)
                } else {
                    $(this).val(false)
                    affichageDetailSaisi(saisirComptage, $("#mode_recup").val(), false)
                }
            })

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

                $("#title-modal").text("Saisie de comptages écart par Agence")

                saisirComptage = "agence"
                changeFormeComptage(false)

                let nomRack = $(this).data("nom-rack") == "" ? "NON DEFINI" : $(this).data("nom-rack")
                let nomZone = $(this).data("nom-zone") == "" ? "NON DEFINI" : $(this).data("nom-zone")

                $("#rayonRack").val(nomRack)
                $("#nomZoneComptage").val(nomZone)
                $("#idrack").val($(this).data("rack"))
                $("#idzone").val($(this).data("zone"))
                $("#mode_recup").val($(this).data("mode"))

                getEmplacement($(this).data("rack"))

                getSaisiDetailAgence(
                    $("#IDINVENTAIRE").val(),
                    $("#idzone").val(),
                    $("#idrack").val(),
                    $("#mode_recup").val()
                )

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

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

                $("#title-modal").text("Saisie de comptages par forme")
                saisirComptage = "forme"
                changeFormeComptage(true)

                let nomZone = $(this).data("nom-zone") == "" ? "NON DEFINI" : $(this).data("nom-zone")

                $("#nomZoneComptage").val(nomZone)
                $("#idzone").val($(this).data("zone"))
                $("#mode_recup").val($(this).data("mode"))

                listeForme()

                getEmplacement($(this).data("zone"), 0)

                if ($("#IDFORMEPRODUIT").val() != "") {
                    getSaisiDetailForme(
                        $("#IDINVENTAIRE").val(),
                        $("#idzone").val(),
                        $("#IDFORMEPRODUIT").val(), $('#uniqEcart').val())
                }

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

            $(document).on("change", "#IDFORMEPRODUIT", function() {
                let ecrat = ""
                if ($("#uniqEcart").val() == "true") {
                    ecrat = true
                } else {
                    ecrat = false
                }
                getSaisiDetailForme($("#IDINVENTAIRE").val(), $("#idzone").val(), $(this).val(), ecrat)
            })

            $(document).on("click", "#saisirComptageAgenceForme", function() {
                $("#title-modal").text("Saisie de comptages écart Agence par forme")
                saisirComptage = "formeAgence"
                changeFormeComptage(true)

                let nomZone = $(this).data("nom-zone") == "" ? "NON DEFINI" : $(this).data("nom-zone")

                $("#nomZoneComptage").val(nomZone)
                $("#idzone").val($(this).data("zone"))
                $("#mode_recup").val($(this).data("mode"))

                listeForme()
                getEmplacement($(this).data("zone"), 0)

                getSaisiDetailAgenceForme(
                    $("#IDINVENTAIRE").val(),
                    $("#idzone").val(),
                    $("#IDFORMEPRODUIT").val()
                )

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

            var valueBefore = 0
            var donneeAImprimer = []
            $(document).on("click", ".comptageEdit, .cartonnageEdit", function() {
                valueBefore = $(this).val()
            })

            $(document).on("keydown",
                "#modalSaisieInventaire .comptageEdit, #modalSaisieInventaire .cartonnageEdit",
                function() {
                    if (event.key === "Enter" || event.keyCode === 13 || event.key === "ArrowDown") {
                        $(this).change()
                    }
                })

            $(document).on("change", ".comptageEdit", function() {
                let modeInventaire = $("#modeInventaire").val()
                var tableau = "tableSaisiInventaireLot"
                var cells = ""
                let rowLine = ""
                let rowElmt = ""
                let rowIndex = 0
                let rowData = ""

                if (modeInventaire == "1") {
                    rowLine = $(this).parent().parent()
                    rowElmt = rowLine.prevAll('tr.group').first()
                    cells = rowElmt.find("td")

                    tableau = "tableSaisiInventaireLot"
                } else {
                    rowIndex = tableSaisiInventaire.cell($(this).parent()).index()
                    rowData = tableSaisiInventaire.row(rowIndex.row).data();
                    tableau = "tableSaisiInventaire"
                }

                let idinv_prodLigne_zone = $(this).data("id")
                let column = $(this).data("columns")
                let value = $(this).val()
                let id = $(this).prop('id')

                let idsplit = id.split("-")
                let idprochain = idsplit[0] + "-" + (parseInt(idsplit[1]) + 1)

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.changeQteComptage') }}",
                    data: {
                        IDINVENTAIRE_PRODUIT_ZONE: idinv_prodLigne_zone,
                        column: column,
                        Qte: value,
                        mode: modeInventaire,
                        rack: $("#idrack").val(),
                        zone: $("#idzone").val()
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.error == false) {

                            if (modeInventaire == '1') {
                                cells.eq(2).html('Qté comptée : <span class="text-danger">' +
                                    response.data.QteComptageRetenu + '</span>')
                                cells.eq(3).html('Ecart : <span class="text-danger">' + response
                                    .data.EcartComptage + '</span>')
                                $("#nbreBoiteStock").text(response.totaux.QteStockInventaire)
                                $("#nbreBoiteComptee").text(response.totaux.QteComptageRetenu)
                                $("#nbreEcart").text(response.totaux.Ecart)
                            } else {
                                rowData.ValueQteComptageRetenu = response.data.QteComptageRetenu
                                rowData.EcartComptage = response.data.EcartComptage
                                tableSaisiInventaire.row(rowIndex.row).data(rowData).draw();
                                $("#" + id).val(value)
                            }

                            $("#" + tableau + " #" + idprochain).focus()
                            $("#" + tableau + " #" + idprochain).select()

                            return false
                        }
                        $("#" + tableau + " #" + id).val(valueBefore)
                        $("#" + tableau + " #" + id).focus()
                        $("#" + tableau + " #" + id).select()
                    },
                    error: function(response) {
                        console.log(response)
                        $("#" + tableau + " #" + id).val(valueBefore)
                        $("#" + tableau + " #" + id).focus()
                        $("#" + tableau + " #" + id).select()
                    }
                });
            })

            $(document).on("change", ".cartonnageEdit", function() {
                let modeInventaire = $("#modeInventaire").val()
                var tableau = "tableSaisiInventaireLot"
                var cells = ""
                let rowLine = ""
                let rowElmt = ""
                let rowIndex = 0
                let rowData = ""

                if (modeInventaire == "1") {
                    rowLine = $(this).parent().parent()
                    rowElmt = rowLine.prevAll('tr.group').first()
                    cells = rowElmt.find("td")

                    tableau = "tableSaisiInventaireLot"
                } else {
                    rowIndex = tableSaisiInventaire.cell($(this).parent()).index()
                    rowData = tableSaisiInventaire.row(rowIndex.row).data();
                    tableau = "tableSaisiInventaire"
                }

                let idinv_prodLigne_zone = $(this).data("id")
                let value = $(this).val()
                let id = $(this).prop('id')

                let idsplit = id.split("-")
                let idprochain = idsplit[0] + "-" + (parseInt(idsplit[1]) + 1)

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.changeQteCartonnage') }}",
                    data: {
                        IDINVENTAIRE_PRODUIT_ZONE: idinv_prodLigne_zone,
                        Qte: value,
                        mode: modeInventaire,
                        rack: $("#idrack").val(),
                        zone: $("#idzone").val()
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.error == false) {

                            if (modeInventaire == '1') {
                                cells.eq(2).html('Qte comptée : <span class="text-danger">' +
                                    response.data.QteComptageRetenu + '</span>')
                                cells.eq(3).html('Ecart : <span class="text-danger">' + response
                                    .data.EcartComptage + '</span>')
                                $("#nbreBoiteStock").text(response.totaux.QteStockInventaire)
                                $("#nbreBoiteComptee").text(response.totaux.QteComptageRetenu)
                                $("#nbreEcart").text(response.totaux.Ecart)
                            } else {
                                // rowData.ValueQteComptageRetenu = response.data.QteComptageRetenu
                                // rowData.EcartComptage = response.data.EcartComptage
                                // tableSaisiInventaire.row(rowIndex.row).data(rowData).draw();
                                // $("#" + id).val(value)
                            }

                            $("#" + tableau + " #" + idprochain).focus()
                            $("#" + tableau + " #" + idprochain).select()

                            return false
                        }
                        $("#" + tableau + " #" + id).val(valueBefore)
                        $("#" + tableau + " #" + id).focus()
                        $("#" + tableau + " #" + id).select()
                    },
                    error: function(response) {
                        $("#" + tableau + " #" + id).val(valueBefore)
                        $("#" + tableau + " #" + id).focus()
                        $("#" + tableau + " #" + id).select()
                    }
                });
            })


            $(document).on("click",
                "#imprimerComptageForme, #imprimerComptageAgenceForme, #imprimerComptageControle800Forme",
                function() {
                    let mode = $(this).data("mode")
                    let zone = $(this).data("zone")
                    let type = $(this).data("type")

                    let confirm = new Promise((resolve, reject) => {
                        confirmAction(() => {
                            resolve(true)
                        }, "Voulez-vous imprimer avec les écarts ?", "", "", () => {
                            resolve(false)
                        })
                    });

                    confirm.then(function(resp) {
                        let route = ""
                        switch (type) {
                            case "formeCpt":
                                route = "{{ route('stock.imprimFicheComptageForme') }}"
                                break;
                            case "formeCptAgence":
                                route = "{{ route('stock.imprimFicheComptageFormeEcartAgence') }}"
                                break;
                            case "formeCpt800":
                                route = "{{ route('stock.imprimFicheComptageFormeEcartAgence') }}"
                                break;

                            default:
                                break;
                        }

                        $.ajax({
                            type: "post",
                            url: route,
                            data: {
                                Ecart: resp,
                                mode: mode,
                                zone: zone,
                                type: type,
                                IDINVENT: $("#IDINVENTAIRE").val(),
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforeSend: progressHandler(),
                            success: function(response) {
                                completeHandler()
                                if (response.error == false) {
                                    genererPDF(response.tablePDF)
                                    $("#modalParamEcart").modal("hide")
                                    return false
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        });
                    })
                })

            $(document).on("click", "#imprimFicheComptage, #imprimFicheEcartAgence", function(evt) {
                donneeAImprimer = []
                donneeAImprimer.push({
                    rack: $(this).data("rack"),
                    zone: $(this).data("zone"),
                    mode: $(this).data("mode"),
                })
                $("#ecart_recup").val(evt.target.id)

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

            $(document).on("click", "#imprimFicheComptageAny, #imprimFicheEcartComptageAny", function(evt) {
                donneeAImprimer = []
                donneeAImprimer = listeLigneSelectionneInv("#tableZone", "#checkLigneZone")
                $("#ecart_recup").val(evt.target.id)

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

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

                donneeAImprimer = []
                donneeAImprimer.push({
                    rack: $(this).data("rack"),
                    zone: $(this).data("zone"),
                    mode: $(this).data("mode"),
                })
                $("#ecart_recup").val(evt.target.id)

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

            $(document).on("click", "#imprimFicheControle800Any", function(evt) {
                donneeAImprimer = []
                donneeAImprimer = listeLigneSelectionneInv("#tableZone", "#checkLigneZone")
                $("#ecart_recup").val(evt.target.id)

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

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

                let ecart = false;
                let route = "{{ route('stock.imprimFicheComptage') }}"
                let ecart_recup = $("#ecart_recup").val()
                if (ecart_recup == "imprimFicheEcartAgence" || ecart_recup ==
                    "imprimFicheEcartComptageAny") {
                    ecart = true
                    route = "{{ route('stock.imprimFicheComptageEcartAgence') }}"
                }

                if (ecart_recup == "imprimFicheControle800" || ecart_recup == "imprimFicheControle800Any") {
                    route = "{{ route('stock.imprimControlComtage800') }}"
                }

                $.ajax({
                    type: "POST",
                    url: route,
                    data: {
                        donnee: donneeAImprimer,
                        IDINVENT: $("#IDINVENTAIRE").val(),
                        paramEcart: $("input[name=paramEcart]:checked").val(),
                        _token: "{{ csrf_token() }}",
                        ecart: ecart
                    },
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        completeHandler()
                        if (response.error == false) {
                            genererPDF(response.tablePDF)
                            $("#modalParamEcart").modal("hide")
                            return false
                        }
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                });
            })
        })

        $(function() {
            var listeDonneTracabilite = ""
            var donneTracabiliteChoisi = ""

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

                $.ajax({
                    type: "get",
                    url: "{{ route('stock.getNtspProduitLot') }}",
                    data: {
                        IDPRODUIT: $(this).val(),
                        IDINVENTAIRE: $("#IDINVENTAIRE").val(),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            listeDonneTracabilite = response.donnee
                            $("#ntsp_lot").val("")
                        }
                    }
                });
            })

            $("#ntsp_lot").on("click", function() {
                $(this).select()
                $('.ui-menu').show();
            }).on("blur", function() {
                $('.ui-menu').hide();
            })

            $("#ntsp_lot").on('focus', function() {
                $(this).autocomplete("search", "");
            });

            $("#ntsp_lot").autocomplete({
                delay: 500,
                minLength: 0,
                autoFocus: true,
                source: function(request, response) {

                    if (listeDonneTracabilite == "" || listeDonneTracabilite.length <= 0) {
                        response([{
                            label: "Aucun lot trouvé",
                            taille: 0,
                            id: 0
                        }]);
                    } else {
                        response($.map(listeDonneTracabilite, function(item, key) {
                            item.label = item.NumeroTracabilite + " | " + item
                                .NumeroLotProduit + " | " + item
                                .DatePeremption,
                                item.id = item.IDSTOCKAGENCE_LOTS,
                                item.NumeroLotProduit = item.NumeroLotProduit,
                                item.DatePeremption = item.DatePeremption,
                                item.IDSTOCKAGENCE_LOTS = item.IDSTOCKAGENCE_LOTS,
                                item.IDTracabiliteStock = item.IDTracabiliteStock,
                                item.NumeroTracabilite = item.NumeroTracabilite,
                                item.IDPRODUIT = item.IDPRODUIT,
                                item.taille = key + 1
                            return item
                        }))

                    }
                },
                focus: function(event, ui) {
                    // Optionnel: ajouter des comportements sur le focus de l'élément
                },
                select: function(event, ui) {
                    if (ui.item.taille > 0) {
                        // _("IDPRODUIT").value = ui.item.IDPRODUIT
                        _("numeroLot").value = ui.item.NumeroLotProduit
                        _("date_peremption_lot").value = ui.item.DatePeremption
                        $("#emplacement_lot").val(ui.item.IDEMPLACEMENT).change()

                        _("qte_compte_lot").focus()
                        _("qte_compte_lot").select()

                        donneTracabiliteChoisi = ui.item
                    }

                }
            }).data("ui-autocomplete")._renderMenu = function(ul, items) {
                if (items.length === 0 || items[0].taille === 0) {
                    var li = $(
                        "<li class='' style='padding-top: 2px; font-size : 12pt;background : white; text-align : center'>Aucun lot trouvé </li>"
                    )
                    li.data("ui-autocomplete-item", items);

                    // li.append($div)
                    return li.appendTo(ul)
                } else {

                    var $table = $("<table class='autocomplete-table'></table>");
                    var $header = $(`<thead>
                                        <tr>
                                            <th style="text-align:center">Numéro Tracabilité</th>
                                            <th style="text-align:center">Numéro lot</th>
                                            <th style="text-align:center">Date péremption</th>
                                        </tr>
                                    </thead>`);
                    var $tbody = $("<tbody></tbody>");

                    $table.append($header);
                    $table.append($tbody);
                    ul.append($table);

                    $.each(items, function(index, item) {
                        var $tr = $("<tr class='ui-menu-item' role='presentation'></tr>");
                        $tr.data("ui-autocomplete-item", item);
                        $tr.append(
                            `<td class='ui-menu-item-wrapper' style='text-align:center'>${item.NumeroTracabilite}</td>`
                        );
                        $tr.append(
                            `<td class='ui-menu-item-wrapper' style='text-align:center'>${item.NumeroLotProduit}</td>`
                        );
                        $tr.append(
                            `<td class='ui-menu-item-wrapper' style='text-align:center'>${item.DatePeremption}</td>`
                        );
                        $tbody.append($tr);
                    });
                }
            };

            $(document).on("change", "#numeroLot", function() {
                console.log(donneTracabiliteChoisi);
                if (donneTracabiliteChoisi != "") {
                    donneTracabiliteChoisi["NumeroLotProduit"] = $(this).val()
                }
            })

            $(document).on("change", "#date_peremption_lot", function() {
                if (donneTracabiliteChoisi != "") {
                    donneTracabiliteChoisi["DatePeremption"] = $(this).val()
                }
            })

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

                if ($("#IDINVENTAIRE").val() == "") {
                    alertSwal("Aucun inventaire selectionné !")
                    return false
                }

                if (donneTracabiliteChoisi == "") {
                    alertSwal("Veuillez renseigner le numéro de traçabilité à ajouter ! ")
                    return false
                }

                if ($("#IDPRODUIT_lot").val() == "" || $("#IDPRODUIT_lot").val() == "0") {
                    alertSwal("Veuillez renseigner le produit à ajouter !")
                    return false
                }

                if ($("#idzone").val() == "" || $("#idzone").val() == "0") {
                    alertSwal("Aucune ligne ne peut être ajouter dans une zone NON DEFINIE !")
                    return false
                }

                if ($("#numeroLot").val() == "" || $("#numeroLot").val() == "0") {
                    alertSwal("Veuillez renseigner le numéro de lot à ajouter !")
                    return false
                }

                if ($("#date_peremption_lot").val() == "") {
                    alertSwal("Veuillez renseigner la date de péremption du lot à ajouter !")
                    return false
                }

                if ($("#qte_compte_lot").val() == "" || $("#qte_compte_lot").val() == "0") {
                    alertSwal("Veuillez renseigner la quantité comptée !")
                    return false
                }

                donneTracabiliteChoisi.IDInven = $("#IDINVENTAIRE").val()
                donneTracabiliteChoisi.IDZONESTOCKAGE = $("#idzone").val()
                donneTracabiliteChoisi.idrack = $("#idrack").val()
                donneTracabiliteChoisi.IDEmp = $("#emplacement_lot").val()
                donneTracabiliteChoisi.QteComptee = $("#qte_compte_lot").val()
                donneTracabiliteChoisi.ProdAjoute = $("#IDPRODUIT_lot").val()
                donneTracabiliteChoisi._token = "{{ csrf_token() }}";

                $.ajax({
                    type: "post",
                    url: "{{ route('stock.saisirComptageParLot') }}",
                    data: donneTracabiliteChoisi,
                    dataType: "JSON",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {

                            completeHandler()
                            notifSuccess(response.messages)
                            return false
                        }
                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        notifWarning(response.responseJSON.messages)
                    }
                });
            })

            $('#exportExcelInventaireStock').on('click', function() {
                {{-- if ($("#tableInventaire").length == 0) {
                    notifWarning("Aucune donnée à exporter")
                    return false
                } --}}

                const filename = file_name("INVENTAIRE_STOCK");
                const targetHeaders = ["PRMP HT", "Cession HT", "Ecart PRMP HT", "Ecart Cession HT"];
                const excludedHeaders = ['Actions', '#'];
                const customHeader = [
                    ['', '', '', '', '', '', 'Valorisation du stock THEORIQUE', '',
                        'Valorisation du stock PHYSIQUE', '', 'Ecarts', ''
                    ]
                ]
                // Fusion G1:H1
                const mergeCustomHeader = [{
                    s: {
                        r: 0,
                        c: 6
                    },
                    e: {
                        r: 0,
                        c: 7
                    }
                }, {
                    s: {
                        r: 0,
                        c: 8
                    },
                    e: {
                        r: 0,
                        c: 9
                    }
                }, {
                    s: {
                        r: 0,
                        c: 10
                    },
                    e: {
                        r: 0,
                        c: 11
                    }
                }]
                exportTableToExcelAVec_JS(
                    'tableInventaire',
                    excludedHeaders,
                    targetHeaders,
                    filename,
                    customHeader,
                    mergeCustomHeader

                );

            })


            $('#exportExcelSyntheseParNature').on('click', function() {
                const filename = file_name("SYNTHÈSE_PAR_NATURE");
                const targetHeaders = ["PRMP HT", "Cession HT", "Ecart PRMP HT", "Ecart Cession HT"];
                const excludedHeaders = [];
                const customHeader = [
                    ['', 'Valorisation du stock THEORIQUE', '', 'Valorisation du stock PHYSIQUE', '',
                        'Ecarts', ''
                    ]
                ]
                // Fusion G1:H1
                const mergeCustomHeader = [{
                    s: {
                        r: 0,
                        c: 1
                    },
                    e: {
                        r: 0,
                        c: 2
                    }
                }, {
                    s: {
                        r: 0,
                        c: 3
                    },
                    e: {
                        r: 0,
                        c: 4
                    }
                }, {
                    s: {
                        r: 0,
                        c: 5
                    },
                    e: {
                        r: 0,
                        c: 6
                    }
                }]
                exportTableToExcelAVec_JS(
                    'tableNature',
                    excludedHeaders,
                    targetHeaders,
                    filename,
                    customHeader,
                    mergeCustomHeader

                );
            })


            $(document).on('click', '#btn-export-saisie-comptage', function() {
                var data = getCleanedTableData('tableSaisiInventaire')
                const filename = file_name("LISTING-SAISIE-COMPTAGE");
                const tabs_format = {
                    J: '#,##0',
                    K: '#,##0'
                };
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename, [],
                    tabs_format)
            })
        })
    </script>
@endsection