@extends('models')
@section('titre-page', 'Transfert inter zone')
@section('content-body')
    <!-- Start::app-content -->

    <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-5 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Stocks</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Transfert inter-zone</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 mt-xl-0 mt-2 mx-0 ">
                    <div class="row justify-content-end">
                        <div class=" col-xl-4 col-sm-4 col-md-4 pe-0 ">
                            <button class=" btn btn-wave waves-effect waves-light btn-success-light w-100" id="btnValideDepart">
                                <i class="bx bx-vertical-top fs-18 me-2"></i> Valider départ
                            </button>
                        </div>
                        <div class="col-xl-4 col-md-3 col-sm-4 px-1">
                            <button class=" btn btn-teal-light bg-opacity-10 w-100" id="btnValideReception">
                                <i class="bx bx-vertical-bottom fs-18 me-2"></i> Valider Réception
                            </button>
                        </div>
                        <div class="col-xl-3 col-md-3 col-sm-6 px-1">

                            <div class="btn-group w-100" style="margin-top : 1px;">

                                <button class="btn btn-primary-light dropdown-toggle" type="button"
                                    id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    Autres actions
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li>
                                        <button class="dropdown-item text-start" id="btnImprimeTransfert">
                                            <i class='bx bx-export me-1'></i>&nbsp;Imprimer fiche transfert inter-zone
                                        </button>
                                    </li>
                                    {{-- <li>
                                        <button class="dropdown-item text-start" id="btnImprimeTransfertExp">
                                            <i class='bx bx-export me-1'></i>&nbsp;Imprimer fiche réception
                                        </button>
                                    </li> --}}
                                    <li>
                                        <button class="dropdown-item text-start" id="btnIntegreCSV">
                                            <i class='bx bx-export me-1'></i>&nbsp;Integrer fichier
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item text-start" id="btnLanceAutoTransfert">
                                            <i class='bx bx-export me-1'></i>&nbsp;Lancer les transferts automatiquement
                                        </button>
                                    </li>

                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->

    <!-- End:: row-7 -->

    <div class="row mt-3">
        <div class=" col-xl-12">
            <div class=" card custom-card">
                <div class=" card-body pe-0">
                    <div class="row w-100">
                        <form id="formFiltre">
                            @csrf
                            <div class="row">
                                <div class=" col-xl-11 col-lg-11 col-md-10">
                                    <div class=" row">
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Site</p>
                                            <select class="form-select" name="site_filtre" id="site_filtre" @disabled(checkIfDroit('DG_AccesMultiSite')) >

                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                            <input type="text" class="form-control text-center dateperiode"
                                                name="datetimes" id="filtrePeriode" autocomplete="off"/>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Mode</p>
                                            <select class="form-select" name="mode_filtre" id="mode_filtre">
                                                <option value="0">TOUS</option>
                                                <option value="1">MANUEL</option>
                                                <option value="2">AUTOMATIQUE</option>
                                                <option value="2">AUTO VENTE</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Zone de départ</p>
                                            <select class="form-select" name="zoneDepart_filtre" id="zoneDepart_filtre">

                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Zone de réception</p>
                                            <select class="form-select" name="zoneReception_filtre"
                                                id="zoneReception_filtre">

                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Statut</p>
                                            <select class="form-select" name="statut_filtre" id="statut_filtre">
                                                <option value="0">TOUS</option>
                                                <option value="1">EN SAISIE</option>
                                                <option value="2">EXPEDIE</option>
                                                <option value="3">RECEPTIONNE</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex justify-content-center">
                                    <label
                                        class="btn btn-primary btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                                        id="btnFiltreTable" data-bs-custom-class="tooltip-primary" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="Filtrer">
                                        <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row justify-content-end mb-2">
                        <div class="col-xl-3 d-flex justify-content-end">
                            <button class="btn btn-secondary-light d-flex align-items-center" id="btnModalAdd"><i
                                    class="bx bx-plus-circle fs-18 me-2"></i> Ajouter un produit</button>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit no-footer dataTable"
                            id="tableListeTransfertZone">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-visible="false" data-column="IDPRODUIT" data-class="text-center">
                                    </th>
                                    <th data-orderable="false" data-column="action" data-class="text-center">
                                        <input class="form-check-input me-1" type="checkbox" id="checkTransfertAll">
                                        #
                                    </th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="Cree_Le">Crée le</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="Statut">Statut</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="CodeCipProduit1">Code CIP 1</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="DesignationProduit">Désignation</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="ColisageProduit">Colisage</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="QteSuggeree">Qté à transférer</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="QteTransferee">Qté Transférée</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="NumeroLotProduit">Numéro de Lot</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomZoneStockage_EXP">Zone de stockage départ</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomEmplacement_Exp">Emplacement départ</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="StockAvantExpedition">Stock zone <br> avant départ</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomZoneStockage_RECEPT">Zone de stockage réception</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomEmplacement_Recep">Emplacement réception</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="StockAvantReception">Stock zone <br> avant réception</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="Peremption">Péremption</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="date_depart">Date Départ</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomPrenomPersonnel_exp">Départ validé par</th>
                                    <th class="text-center colTableListePre" data-class="text-center"
                                        data-column="date_reception">Date Réception</th>
                                    <th class="text-center colTableListePre" data-class="text-start"
                                        data-column="NomPrenomPersonnel_recept">Réception validée par</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    <div class="modal fade effect-scale" id="modalAddTransfert" data-bs-focus="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Saisie de transfert Interzone </h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <form id="formAdd">
                        <div class="card-body">
                            @csrf
                            <div class="row">
                                <input type="text" name="idNumLot" id="idNumLot" value="" hidden>
                                <div class="col-xl-4 col-lg-3 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Site</p>
                                    <select class="form-select" name="site_add" id="site_add" disabled @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone départ</p>
                                    <select class="form-select" name="zoneExpedition_add" id="zoneExpedition_add">

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone réception</p>
                                    <select class="form-select" name="zoneReception_add" id="zoneReception_add">

                                    </select>
                                </div>
                                <div class="col-xl-7 col-lg-7 col-md-7 mb-2">
                                    <p class="mb-0 text-muted">Produit</p>
                                    <select class="form-select" name="produit_add" id="produit_add">

                                    </select>
                                </div>
                                <div class="col-xl-5 col-lg-5 col-md-5 mb-2">
                                    <p class="mb-0 text-muted">N° Lot</p>
                                    <input type="text" class="form-select" name="numLot_add" id="numLot_add">
                                    <input type="text" name="StockLot_add" id="StockLot_add" hidden>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                    <p class="mb-0 text-muted">Cartonnage</p>
                                    <input type="text" class="form-control" name="cartonage" id="cartonage"
                                        value="0" readonly>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                    <p class="mb-0 text-muted">Emplacement départ</p>
                                    <input type="text" class="form-control" id="emplac_exp" readonly>
                                    <input type="text" class="form-control" name="emplac_exp" id="emplac_exp_num"
                                        hidden>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                    <p class="mb-0 text-muted">Emplacement réception</p>

                                    <select class="form-select" name="emplac_recept" id="emplac_recept"></select>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                    <p class="mb-0 text-muted">Qté transférée</p>
                                    <input type="text" class="form-control" name="qteTransfert_add"
                                        id="qteTransfert_add" value="0">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnAdd">
                        <i class='bx bxs-check-circle  mt-1 me-1' style="cursor:pointer;"></i> Ajouter
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade effect-scale" id="modalIntegreCSV" data-bs-focus="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Integration de fichier</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <form id="formIntegreCsv" enctype="multipart/form-data">
                        <div class="card-body">
                            @csrf
                            <div class="row">
                                <div class="col-xl-4 col-lg-3 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Site</p>
                                    <select class="form-select" name="site_csv" id="site_csv" @required(true) @disabled(checkIfDroit('DG_AccesMultiSite')) >

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone expédition</p>
                                    <select class="form-select" name="zoneExpedition_csv" id="zoneExpedition_csv"
                                        @required(true)>

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone réception</p>
                                    <select class="form-select" name="zoneReception_csv" id="zoneReception_csv"
                                        @required(true)>

                                    </select>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                    <input type="text" name="filename" id="filename" hidden>
                                    <input type="file" class="multiple-filepond" name="file"
                                        data-allow-reorder="true" data-max-file-size="10MB" data-max-files="1"
                                        id="fileUpload" @required(true)>
                                </div>
                                <div class="text-info text-center">Tyoe de fichier : <span class="fw-bold">csv, xls, xlsx</span></div>
                                <div class="text-danger text-center">Format : <span class="fw-bold">Code CIP | Désignation
                                        | Qté à transférer | Numéro Lot</span></div>
                                <input type="submit" value="" id="submitcsv" hidden>

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label for="submitcsv"
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="">
                        <i class='bx bxs-check-circle  mt-1 me-1' style="cursor:pointer;"></i> Intégrer
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade effect-scale" id="modalTransfertAuto" data-bs-focus="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Suggestion de Transfert inter zone</h6><button aria-label="Close" class="btn-close bg-white"
                        data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                        <div class="card-body">
                         
                            <div class="row">
                                <div class="col-xl-4 col-lg-3 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Site</p>
                                    <select class="form-select" name="site_auto" id="site_auto" @required(true) @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone départ</p>
                                    <select class="form-select" name="zoneExpedition_auto" id="zoneExpedition_auto"
                                        @required(true)>

                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Zone réception</p>
                                    <select class="form-select" name="zoneReception_auto" id="zoneReception_auto"
                                        @required(true)>

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

                        </div>
                  
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnIntegre">
                        <i class='bx bxs-check-circle  mt-1 me-1' style="cursor:pointer;"></i> Suggérer
                    </label>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script>
        ignoreGlobalSessionUpdate = true
        /* multiple upload */
        const MultipleElement = document.querySelector('.multiple-filepond');
        var filePond = FilePond.create(MultipleElement, {
            labelIdle: `Glisser deposer ou <span class="filepond--label-action">Selectionner</span>`,
            acceptedFileTypes: [
                'text/csv',
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ],
            labelFileTypeNotAllowed: "Seuls les fichiers CSV, XLS et XLSX sont autorisés"
        });

        FilePond.setOptions({
            server: {
                url: '/stocks/transfertInterZone', // Your backend upload endpoint
                process: {
                    url: '/uploadCSVTransfert',
                    method: 'POST',
                    // withCredentials: false,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    // timeout: 7000,
                    onload: (response) => {
                        let rep = JSON.parse(response)
                        // console.log("onload")
                        $("#filename").val(rep.filePath)
                        // console.log()
                    },
                    onerror: (response) => {
                        // console.log("onerror")
                        // console.log(response)
                    },
                    ondata: (formData) => {
                        // console.log("ondata")

                        formData.append('file', _("fileUpload"));
                        return formData;
                    },
                },
                revert: {
                    url: '/deleteCSVTransfert',
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    onload: (response) => response,
                    onerror: (response) => response,
                }
            }
        });

        /* single upload */
        // FilePond.create(
        //     document.querySelector('.single-fileupload'), {
        //         labelIdle: `Glisser deposer ou <span class="filepond--label-action">Selectionner</span>`,
        //         imagePreviewHeight: 170,
        //         imageCropAspectRatio: '1:1',
        //         imageResizeTargetWidth: 200,
        //         imageResizeTargetHeight: 200,
        //         stylePanelLayout: 'compact circle',
        //         styleLoadIndicatorPosition: 'center bottom',
        //         styleButtonRemoveItemPosition: 'center bottom'
        //     }
        // );

        //  traitement sur les checkbox
        $(document).on("click", "input[type=checkbox]", function() {
            if ($(this).is(':checked')) {
                $(this).val(true)
            } else {
                $(this).val(false)
            }
        })


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

            modifierSessionSite().then(() => {
                $("#site_filtre").val($(this).val()).change()
            })
        })

        var tableCommandeLigne = ""

        function chargerSelectProduit(valeur) {

            // Combo produit en select2 AJAX (recherche à la frappe) — plus de préchargement des ~2000 produits.
            //
            // Le dropdownParent se passe ici, à initSelect2ProduitAjax : cette fonction
            // détruit l'instance existante avant de créer la sienne, donc un select2()
            // appelé juste avant est effacé, options comprises. Sans parent, la liste est
            // rattachée à <body> : elle s'affiche sous la modale et devient inaccessible.
            //
            // Le parent est le .modal-content et non la racine .modal : celle-ci défile, et
            // la liste s'y décale alors de la hauteur exacte du défilement.
            initSelect2ProduitAjax('#produit_add', {
                labelFirst: ' ',
                dropdownParent: $('#modalAddTransfert .modal-content')
            })
            preselectProduitSelect2('#produit_add', valeur)
        }



        function chargerSelectZoneStockage() {

            $.ajax({

                url: '{{ route('tiz.ZoneStockage') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#zoneDepart_filtre').html('')
                    $('#zoneReception_filtre').html('')
                    $('#zoneDepart_filtre').append('<option value="0">TOUS</option>')
                    $('#zoneReception_filtre').append('<option value="0">TOUS</option>')
                }
            })
        }

        function chargerSelectlisteAgence() {

            $.ajax({

                url: '{{ route('listeAgence') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    // console.log(response)
                    $('#site_filtre').html('')
                    // $('#site_filtre').append('<option value="0">TOUS</option>')
                    $('#site_add').html('')
                    $('#site_csv').html('')
                    $('#site_auto').html('')

                    $.each(response.data, function(key, value) {

                        $('#site_filtre').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                        $('#site_add').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                        $('#site_csv').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                        $('#site_auto').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                    })
                    let idSiteEnCours = $("#idSiteEnCours").val()
                    $('#site_csv').val(idSiteEnCours).change()
                    $('#site_filtre').val(idSiteEnCours).change()
                    $('#site_add').val(idSiteEnCours).change()
                    $('#site_auto').val(idSiteEnCours).change()
                }
            })
        }

        chargerSelectProduit()
        chargerSelectlisteAgence()
        chargerSelectZoneStockage()

        $('.js-example-basic-single').select2();
        // $('#changeProduit').select2();
        $('#changeProduit').select2({
            dropdownParent: $("#modalChangeProduiut")
        })
        // $('#produit_add').select2()
    </script>

    <script>
        $(document).ready(function() {

            var tableListePre = $("#tableListeTransfertZone").DataTable({
                language: languageTable,

                // pagingType: 'full_numbers',
                pageLength: 25,
                lengthChange: true,
                order: [],

            })

            // listeColonnes = $('.colTableListePre')

            // $.each(listeColonnes, function(key, value) {

            //     $('#dropChoixColPre').append(`<li class="d-flex p-2"> 
            //         <input type="checkbox" valeur="${(key + 1)}" class="me-2 showCol form-check-input" id="lignShow-${(key + 1)}" checked> 
            //         <label for="lignShow-${(key + 1)}"> ${value.innerHTML}</label>
            //         </li>`)
            // })


            // $(document).on('click', '.showCol', function() {
            //     fnShowHideGeneral($(this).attr('valeur'), "tableListePre")
            // })

            // // colonne disparaître
            // listeColonnes = $('.colTableBlLigne')

            // $.each(listeColonnes, function(key, value) {

            //     $('#dropChoixColBlLigne').append(
            //         `<li class="d-flex p-2"> <input type="checkbox" valeur="${(key +1)}" class="me-2 showCol form-check-input" checked> ${value.innerHTML} </a></li>`
            //     )
            // })


            // $("#modalDetailBl").on('click', '.showCol', function() {
            //     fnShowHideGeneral($(this).attr('valeur'), "tableBlLigne")
            // })

            placeboutonPreferenceColonne('tableListeTransfertZone', 'tableListeTransfertZoneShowColonne', 2)
            recuperationPreferenceColonneUtilisateur('tableListeTransfertZone','tableListeTransfertZoneShowColonne')
            $(document).on('click', '.tableListeTransfertZoneShowColonne', function() {
                appliquerPreferenceColonne('tableListeTransfertZone', 'tableListeTransfertZone', $(this),'tableListeTransfertZoneShowColonne')
            })


            $('#modalDetailBl').on('hidden.bs.modal', function() {
                $('.ui-menu').hide();
                $("#flush-collapseOne").addClass("show")
                // resetForm()
            });

            // Annuler le produit selectionné
            $("#resetCmde").click(function() {
                elmtCmde = []
                resetForm()
            })

            $(document).on('keydown', function(event) {
                // Vérifie si la touche "+" du pavé numérique a été pressée
                if (event.key === 'Add' || event.key === '+') {
                    $("#modalAddTransfert").modal("show")
                }
            });

            var listeTransfertLigne
            // Suppression de lignes de la commande sur la modal de detail
            $("#tableCommandeLigne").on("click", "#supCmdeLigne", function() {

                var IDCOMMANDELIGNE = []
                IDCOMMANDELIGNE.push($(this).attr("data-id"))

                confirmMdp('{{ csrf_token() }}', () => {
                        deleteCommandeLigne(IDCOMMANDELIGNE)
                        _('checkSelectAll').checked = false
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer la suppresion de la commande ")
            })

            /* ------------------------------------------------------------------
               Sélection des lignes de transfert, toutes pages confondues.

               La sélection était lue sur les cases à cocher du tableau. Or
               remplissageDataTable active deferRender : DataTables ne construit les
               cellules que des lignes affichées, si bien que « tout cocher » ne
               touchait que la page courante — et l'envoi ne portait que celle-ci.

               On tient donc la sélection à part, par identifiant, et les cases ne
               sont plus que son reflet : elles sont recochées à chaque redessin.
               ------------------------------------------------------------------ */
            let idsTransfertSelectionnes = new Set()

            /** Identifiants des lignes actuellement visées par les filtres. */
            function idsTransfertFiltres() {

                // rows().data() vient du modèle de données, complet quel que soit
                // deferRender, contrairement à rows().nodes().
                return $("#tableListeTransfertZone").DataTable()
                    .rows({ search: 'applied' })
                    .data()
                    .toArray()
                    .map(function (ligne) { return String(ligne.IDTRANSFERT_INTER_ZONE) })
            }

            /** Recoche les cases visibles d'après la sélection retenue. */
            function refletSelectionTransfert() {

                // Sélecteur d'attribut et non « #checkLigneTransfert » : cet identifiant
                // est répété sur chaque ligne, et jQuery résout un sélecteur d'id par
                // getElementById, ce qui ne rendait qu'UNE case sur les vingt-cinq.
                $('#tableListeTransfertZone').find('input[id="checkLigneTransfert"]').each(function () {

                    this.checked = idsTransfertSelectionnes.has(String($(this).data('id')))
                })

                let filtres = idsTransfertFiltres()
                let retenus = filtres.filter(function (id) { return idsTransfertSelectionnes.has(id) }).length

                let entete = _('checkTransfertAll')

                if (entete) {

                    entete.checked = filtres.length > 0 && retenus === filtres.length
                    // Coche grisée quand la sélection est partielle : sans cela l'entête
                    // affirmait « tout » alors que quelques lignes seulement l'étaient.
                    entete.indeterminate = retenus > 0 && retenus < filtres.length
                }
            }

            /** Vide la sélection, cases comprises. */
            function viderSelectionTransfert() {

                idsTransfertSelectionnes.clear()
                refletSelectionTransfert()
            }

            // selection de tout les elements du tableau sur modal
            _('checkTransfertAll').addEventListener('click', function() {

                let value = this.checked

                // Seules les lignes retenues par la recherche en cours : cocher des
                // lignes masquées par un filtre serait invisible et surprenant.
                idsTransfertFiltres().forEach(function (id) {

                    if (value) idsTransfertSelectionnes.add(id)
                    else idsTransfertSelectionnes.delete(id)
                })

                refletSelectionTransfert()
            })

            // Le tableau vient d'être redessiné : les cases sont neuves, on y remet
            // l'état retenu, faute de quoi changer de page « décochait » tout.
            $('#tableListeTransfertZone').on('draw.dt', function () {

                refletSelectionTransfert()
            })

            // // selection de tout les elements du tableau commande
            // _('checkSelectAllCmde').addEventListener('click', function() {
            //     let value = this.checked
            //     let lignes = tableListePre.rows().nodes()
            //     $(lignes).find('#checkSelectLigneCmde').prop('checked', value)
            // })

            // selection d'une ligne de commande
            $(document).on('click', '#checkLigneTransfert', function() {

                let id = String($(this).data('id'))

                if (this.checked) idsTransfertSelectionnes.add(id)
                else idsTransfertSelectionnes.delete(id)

                refletSelectionTransfert()
            })

            $("#modalAddTransfert").on("hide.bs.modal", function() {
                $("#formAdd")[0].reset()
                $('#produit_add').val(0).trigger('change')
            })

            $("#btnFiltreTable").click(function() {
                let formData = new FormData(_("formFiltre"))
                listeTransfert(formData)
            })

            $('#btnModalAdd').click(function() {
                $("#modalAddTransfert").modal("show")
            })
            $("#modalAddTransfert").on("shown.bs.modal", function() {
                $("#site_add").val($("#site_filtre").val()).change()
                document.body.classList.add("modal-open");
            })
            var listeLot

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

            // Essaye de déclencher l'ouverture de l'élément <select>
            var event = new MouseEvent('mousedown', {
                'view': window,
                'bubbles': true,
                'cancelable': true
            });

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

                    if (listeLot.length <= 0) {
                        // listeLot[0] = {}
                        // response($.map(listeLot, function(item, key) {
                        //     item.label = "Aucun lot trouvé"
                        //         item.taille = 0
                        //     item.id = 0
                        //     return item
                        // }))
                        // return false

                        response([{
                            label: "Aucun lot trouvé",
                            value: "Aucun lot trouvé",
                            taille: 0,
                            id: 0
                        }]);
                        return false
                    }
                        response($.map(listeLot, function(item, key) {
                            item.label = item
                                .NumeroLotProduit + " | " +
                                explodeDate(item
                                    .DatePeremption) +
                                " | " + item.StockTotal_Lot,
                                item.id = item
                                .IDSTOCKAGENCE_LOTS,
                                item.NumeroLotProduit = item
                                .NumeroLotProduit,
                                item.DatePeremption = item
                                .DatePeremption,
                                item.StockTotal_Lot = item
                                .StockTotal_Lot
                            item.CartonnageLot = item
                                .CartonnageLot
                            item.NomEmplacement = item
                                .NomEmplacement
                            item.IDEMPLACEMENT = item
                                .IDEMPLACEMENT
                            item.IDTracabiliteStock = item
                                .IDTracabiliteStock
                            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) {
                        _('idNumLot').value = ui.item.id
                        _('cartonage').value = ui.item.CartonnageLot ??
                            0
                        _('emplac_exp').value = ui.item
                            .NomEmplacement ?? "AUCUN"
                        _('emplac_exp_num').value = ui.item
                            .IDEMPLACEMENT
                        _('StockLot_add').value = ui.item
                            .StockTotal_Lot

                        /* Quantité proposée : le cartonnage du lot, le transfert se faisant
                           le plus souvent par carton entier. Elle est plafonnée au stock du
                           lot — c'est déjà la règle qu'applique le bouton « Ajouter », autant
                           ne pas proposer d'emblée une valeur qu'il refusera. Le champ reste
                           sélectionné juste après, une autre quantité s'obtient en tapant. */
                        let cartonnageLot = chaineEnNumerique(ui.item.CartonnageLot ?? 0) || 0
                        let stockDuLot = chaineEnNumerique(ui.item.StockTotal_Lot ?? 0) || 0

                        let qteProposee = cartonnageLot > 0 ? Math.min(cartonnageLot, stockDuLot) : 0

                        _('qteTransfert_add').value = qteProposee

                        let data1 = ui.item.IDTracabiliteStock

                        let data2 = $("#zoneReception_add").val()

                        remplirEmplReception($("#site_add").val(), idprod, data1, data2)

                        $("#qteTransfert_add").focus()
                        $("#qteTransfert_add").select()
                    }
                }
            }).data("ui-autocomplete")._renderMenu = function(ul, items) {
                // console.log(items)
                if ( !items || 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.append($div)
                    li.appendTo(ul)
                } else {

                    var $table = $(
                        "<table class='autocomplete-table'></table>");
                    var $header = $(`<thead>
                                                    <tr>
                                                        <th>N° Lot</th>
                                                        <th>Date péremption</th>
                                                        <th>Stock</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.NumeroLotProduit + "</td>");
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.DatePeremption + "</td>");
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.StockTotal_Lot + "</td>");

                        $tbody.append($tr);
                    });
                }
            };

            $("#btnAdd").click(function() {

                if ($("#site_add").val() == "" || $("#site_add").val() == null) {
                   
                    alertSwal("Veuillez choisir un site d'expédition !!")
                    return 0
                }
                
                if ($("#zoneExpedition_add").val() == "" || $("#zoneExpedition_add").val() == null) {
                   
                    alertSwal("Veuillez choisir une zone d'expédition !!")
                    return 0
                }
                if ($("#zoneReception_add").val() == "" || $("#zoneReception_add").val() == null) {
                    
                    alertSwal("Veuillez choisir une zone de réception !!")
                    return 0
                }
                if ($("#idNumLot").val() == "") {
                    
                    alertSwal("Veuillez choisir un lot !!")
                    return 0
                }
                if ($("#qteTransfert_add").val() == "" || parseInt($("#qteTransfert_add").val()) <= 0) {
                   
                    alertSwal("Veuillez saisir une quantité supérieure à 0 !!")
                    return 0
                }

                if ($("#zoneReception_add").val() == $("#zoneExpedition_add").val()) {
                    alertSwal("Veuillez selectionner une zone de réception différente de la zone de départ !!")
                    return 0
                }

                if(chaineEnNumerique($("#StockLot_add").val()) < chaineEnNumerique($("#qteTransfert_add").val())){
                    notifWarning("La quantité à transférer ne doit pas être supérieure au stock du lot");
                    $("#qteTransfert_add").val($("#StockLot_add").val())
                    return false
                }

                let formData = new FormData(_("formAdd"))
                formData.append("site_add", $("#site_add").val())
                formData.set("idNumLot", formData.get("idNumLot").toString());

                $.ajax({
                    url: `{{ route('stocks.setTransfert') }}`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#modalAddTransfert").modal("hide")
                            $("#formAdd")[0].reset()
                            completeHandler()
                            notifSuccess(response.messages)
                            $("#btnFiltreTable").trigger("click")
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            function chargerLot(site, idproduit, idzoneexpedition) {
                $.ajax({
                    url: "{{ route('stocks.getOnChangeProduit') }}",
                    type: 'POST',
                    data: {
                        site: site,
                        data: idproduit,
                        IDZONESTOCKAGE: idzoneexpedition,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(responses) {
                        // console.log(responses)

                        listeLot = responses

                        // notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            }

            var idprod

            /* Tout ce qui dépend du lot : le numéro, mais aussi le cartonnage, l'emplacement de
               départ et le stock, qui ne sont renseignés qu'au moment où un lot est retenu.
               Changer de produit ou de zone de départ change la liste des lots : sans remise à
               zéro, l'écran gardait le lot du produit précédent, et surtout son cartonnage et
               son emplacement — des valeurs qui n'avaient plus rien à voir avec le produit
               affiché, sans que rien ne le signale.

               listeLot est vidée dans le même mouvement : la nouvelle liste arrive du serveur de
               façon asynchrone, et entre-temps l'autocomplétion aurait encore proposé les lots
               de l'ancien produit. */
            function viderChampsDuLot() {

                listeLot = []

                $("#numLot_add").val("")

                _('idNumLot').value = ""
                _('cartonage').value = 0
                _('emplac_exp').value = ""
                _('emplac_exp_num').value = ""
                _('StockLot_add').value = 0

                $("#qteTransfert_add").val(0)

                // L'emplacement de réception est déduit du lot : il redevient « AUCUN ».
                $('#emplac_recept').val(0).change()
            }

            $("#produit_add").on("change", function() {
                idprod = $(this).val()

                viderChampsDuLot()

                chargerLot($("#site_add").val(), $(this).val(), $("#zoneExpedition_add").val())
            })

            $("#zoneExpedition_add").on("change", function() {

                viderChampsDuLot()

                chargerLot($("#site_add").val(), $("#produit_add").val(), $(this).val())
            })

            $("#site_add").on("change", function() {
                let data = $(this).val()
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${data}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $('#zoneExpedition_add').html("")
                        $('#zoneReception_add').html("")

                        $.each(response, function(key, value) {

                            $('#zoneExpedition_add').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_add').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })
                        $('#zoneReception_add').change()

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            $("#site_filtre").on("change", function() {
                let data = $(this).val()
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${data}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $('#zoneDepart_filtre').html("")
                        $('#zoneReception_filtre').html("")
                        $('#zoneDepart_filtre').append('<option value="0">TOUS</option>')
                        $('#zoneReception_filtre').append('<option value="0">TOUS</option>')

                        $.each(response, function(key, value) {

                            $('#zoneDepart_filtre').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_filtre').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            $("#site_auto").on("change", function() {
                let data = $(this).val()
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${data}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $('#zoneExpedition_auto').html("")
                        $('#zoneReception_auto').html("")

                        $('#zoneReception_auto').append(
                                `<option value="-1">AUTOMATIQUE</option>`
                            )

                        $.each(response, function(key, value) {

                            $('#zoneExpedition_auto').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_auto').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            $("#site_csv").on("change", function() {
                let data = $(this).val()
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${data}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $('#zoneExpedition_add').html("")
                        $('#zoneReception_add').html("")
                        $('#zoneExpedition_csv').html("")
                        $('#zoneReception_csv').html("")
                        $('#zoneExpedition_auto').html("")
                        $('#zoneReception_auto').html("")

                        $.each(response, function(key, value) {

                            $('#zoneExpedition_add').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_add').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneExpedition_csv').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_csv').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneExpedition_auto').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                            $('#zoneReception_auto').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })
                        $('#zoneReception_add').change()

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            $("#zoneReception_add").on("change", function() {
                let data = $(this).val()
                if(data == "" || data == null){
                    return false
                }
                
                $.ajax({
                    url: `{{ route('tiz.emplacement', '') }}/${data}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $('#emplac_recept').html("")
                        $('#emplac_recept').append('<option value="0">AUCUN</option>')

                        $.each(response, function(key, value) {

                            $('#emplac_recept').append(
                                `<option value="${value["IDEMPLACEMENT"]}">${value["NomEmplacement"]}</option>`
                            )
                        })

                        // Même modale, même règle que pour le combo produit : le parent est
                        // le .modal-content, sans quoi la liste se décale du défilement.
                        $('#emplac_recept').select2({
                            dropdownParent: $("#modalAddTransfert .modal-content")
                        })

                        // notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            // $("#zoneReception_add")

            // ouverture et fermeture de l'ui
            $("#numLot_add").on("click", function() {
                $(this).select()
                $('.ui-menu').show();
            }).on("blur", function() {
                $('.ui-menu').hide();
            })

            // ouverture de la modal
            $('#site_filtre').on("change", function() {
                $(this).val()
            })

            $("#btnIntegreCSV").click(function() {
                $("#modalIntegreCSV").modal("show")
            })

            $("#btnLanceAutoTransfert").click(function() {
                $("#modalTransfertAuto").modal("show")
            })

            // ------------ Integration de Transfert par excel/csv
            // Le classeur annoté revient en base64 : on le rend téléchargeable sans
            // repasser par le serveur.
            function telechargerCompteRenduCsv(base64, nom) {

                let binaire = atob(base64)
                let octets = new Uint8Array(binaire.length)

                for (let i = 0; i < binaire.length; i++) {
                    octets[i] = binaire.charCodeAt(i)
                }

                let url = URL.createObjectURL(new Blob([octets], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                }))

                let lien = document.createElement('a')
                lien.href = url
                lien.download = nom || 'compte_rendu.xlsx'
                document.body.appendChild(lien)
                lien.click()
                document.body.removeChild(lien)
                URL.revokeObjectURL(url)
            }

            $("#formIntegreCsv").on("submit", function(evt) {
                evt.preventDefault()

                if ($("#zoneExpedition_csv").val() == $("#zoneReception_csv").val()) {
                    alertSwal("Veuillez selectionner une zone de réception différente de la zone de départ !!")
                    return 0
                }


                let formData = new FormData(_("formIntegreCsv"))
                $("#integrerCsv").val("")
                $.ajax({
                    url: "{{ route('stocks.setTransfertInterZoneCsv') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#modalIntegreCSV").modal("hide")
                            completeHandler()
                            notifSuccess(response.messages)

                            // Compte rendu ligne par ligne : proposé dès qu'une ligne du
                            // fichier n'a pas passé, seul moyen de savoir laquelle et pourquoi.
                            if (response.rejetees > 0 && response.fichier) {
                                telechargerCompteRenduCsv(response.fichier, response.nomFichier)
                            }

                            filePond.removeFiles()
                            $("#formIntegreCsv")[0].reset()
                            $("#btnFiltreTable").trigger("click")
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#btnImprimeTransfert").on("click", function() {
                let listeID = listeLigneSelectionne()
                if (listeID.length <= 0) {
                    alertSwal("Veuillez cocher une/plusieurs ligne(s) !!")
                    return false
                }
                ImprimerBonAchat(listeID, `{{ route('stocks.getPrintTransfert') }}`)
            })
            
            $("#btnImprimeTransfertExp").on("click", function() {
                let listeID = listeLigneSelectionne()
                if (listeID.length <= 0) {
                    alertSwal("Veuillez cocher une/plusieurs ligne(s) !!")
                    return false
                }
                ImprimerBonAchat(listeID, `{{ route('stocks.getPrintTransfert_recept') }}`)
            })

            $('#modalEditAddBl').on('input', ".maskMonetaireFunc", function() {
                handleInput($(this));
            });

            $(document).on("click", 'input', function() {
                $(this).select()
            })

            $('#btnValideDepart').on('click', function() {
                let listeID = listeLigneSelectionne()

                if (listeID.length <= 0) {

                    alertSwal("Veuillez cocher une/plusieurs ligne(s) !!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}", () => {
                        $.ajax({
                            url: `{{ route('stocks.setValidateDepart') }}`,
                            type: 'POST',
                            data: {
                                // IDAGENCE: IDAGENCE,
                                LISTE_ID_TRANSFERT: listeID,
                                _token: '{{ csrf_token() }}'
                            },
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {
                                    $("#btnFiltreTable").trigger("click")
                                    completeHandler()
                                    notifSuccess(response.messages)
                                    return 0
                                }
                                completeHandler()
                                notif('danger', 'Erreur', response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                // console.log(response)
                                notif('danger', 'Erreur', response.responseJSON.messages)
                            }
                        })
                    },
                    null, "Veuillez saisir votre mot de passe pour valider votre expédition", {
                        sousTitre: 'Seuls les transferts en saisie seront traités',
                        infoJNL: "VALIDATION DE TRANSFERT INTER-ZONE : EXPEDITION",
                        typeJNL: 3,
                        CodeDroit: "DS_TransfertInterne"
                    })
            });

            $('#btnValideReception').on('click', function() {
                let listeID = listeLigneSelectionne()

                if (listeID.length <= 0) {
                    alertSwal("Veuillez cocher une/plusieurs ligne(s) !!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}", () => {
                    $.ajax({
                        url: `{{ route('stocks.setValidateReception') }}`,
                        type: 'POST',
                        data: {
                            // IDAGENCE: IDAGENCE,
                            LISTE_ID_TRANSFERT: listeID,
                            _token: '{{ csrf_token() }}',
                        },
                        beforeSend: progressHandler(),
                        dataType: 'json',
                        success: function(response) {
                            // console.log(response)

                            if (response.error == false) {
                                $("#btnFiltreTable").trigger("click")
                                completeHandler()
                                notifSuccess(response.messages)
                                return 0
                            }
                            completeHandler()
                            notifError(response.messages)
                        },
                        error: function(response) {
                            // console.log(response)
                            completeHandler()
                            notifError(response.responseJSON.messages)
                        }
                    })
                }, null, "Veuillez saisir votre mot de passe pour valider votre réception", {
                    sousTitre: 'Seuls les transferts expédiés seront traités',
                    infoJNL: "VALIDATION DE TRANSFERT INTER-ZONE : RECEPTION",
                    typeJNL: 3,
                    CodeDroit: "DS_TransfertInterne"
                })
            });

            var modeEtiquette = ""
            $(document).on("click", "#btnImprimeEtiquetteDepart", function() {
                let ligne = listeLigneSelectionne()
                modeEtiquette = 'depart'
                $("#modalImprimeEtiquette").modal("show")
            })

            $(document).on("click", "#btnImprimeEtiquetteReception", function() {
                let ligne = listeLigneSelectionne()
                modeEtiquette = 'reception'
                $("#modalImprimeEtiquette").modal("show")
            })

            $("#formImpressionEtique").on("submit", function(e) {
                e.preventDefault()

                let liste_id = []
                let ligne = listeLigneSelectionne()

                if (ligne.length <= 0) {
                    alertSwal( "Veuillez cocher une/plusieurs ligne(s) !!")
                    return 0
                }

                if( modeEtiquette == "depart"){
                    $.each(ligne, function(key, value) {
                        if($("#" + value).val() != ''){
                            liste_id.push($("#" + value).val())
                        }
                    })
                }else if(modeEtiquette == "reception"){
                    $.each(ligne, function(key, value) {
                        if($("#" + value).data("lot-recept") != ''){
                            liste_id.push($("#" + value).data("lot-recept"))
                        }
                    })

                }

                if (liste_id.length <= 0) {
                    alertSwal( "Aucun lot trouvé !!")
                    return 0
                }

                let data = {}
                let route = ""
                if (_("checkFormatA4").checked == true) {
                    route = `{{ route('modal.imprimeA4Lot') }}`
                    data = {
                        nbre_etiquette: $("#numeroEtiquette").val(),
                        LISTE_ID: liste_id,
                        modeEtiquette : modeEtiquette,
                        _token: "{{ csrf_token() }}"
                    }
                } else if (_("checkFormatZebra").checked == true) {
                    route = `{{ route('modal.imprimeZebraLot') }}`
                    data = {
                        LISTE_ID: liste_id,
                        modeEtiquette : modeEtiquette,
                        _token: "{{ csrf_token() }}"
                    }
                }

                faireImpressionEtiquette(data, route)
            })


            $(document).on("click", "#btnSupprimeLigne", function(e) {
                e.preventDefault()

                let liste_id = []
                let ligne = listeLigneSelectionne()

                if (ligne.length <= 0) {
                    alertSwal("Veuillez cocher une/plusieurs ligne(s) !!")
                    return 0
                }

                confirmMdp("{{ csrf_token() }}", () => {
                        $.ajax({
                            url: "{{ route('stocks.setDeleteReception') }}",
                            type: 'DELETE',
                            data: {
                                data: ligne,
                                "_token": "{{ csrf_token() }}"
                            },
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {

                                    $("#btnFiltreTable").trigger("click")
                                    completeHandler()
                                    return 0
                                }
                                completeHandler()
                                notif("warning", "Attention", response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                // console.log(response)
                                notifError(response.messages)
                            }
                        })
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer supprimer le(s) transfert(s)", {
                        sousTitre: 'Les transferts réceptionnés ne peuvent être supprimés que par les responsables',
                        infoJNL: "SUPPRESSION DE TRANSFERT INTERZONE",
                        typeJNL: 3,
                        CodeDroit: "DS_TransfertInterne"
                    })

            })

            var inputQteFacture = 0
            $("#tableListeTransfertZone").on("focus", ".input-edit", function() {
                inputQteFacture = parseInt($(this).val())
            }).on("change", ".input-edit", function() {
                let idElmt = $(this).attr("id")
                let id =idElmt.split("-")[1] + 1
                $.ajax({
                    url: `{{ route('stocks.updateQteTransfere') }}`,
                    type: 'PUT',
                    data: {
                        ID_TRANSFERT: $(this).data("id"),
                        Qte: $(this).val(),
                        "_token": "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    beforeSend: function() {
                        $(document).css("cursor", "wait")
                    },
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            notifSuccess(response.messages)
                            $(this).val(response.qte)
                            $(this).trigger("blur")

                            if (id % 9 == 0) {
                                goToNextPage()
                            }
                            
                            // let elt = _("inputQte-" + id)
                            // if (elt) {
                            //     elt.focus()
                            //     elt.select()
                            // }

                            while (true) {
                                let elt = document.getElementById("inputQte-" + id);
                                if (!elt) break; // Sortie si l'élément n'existe pas

                                if (!elt.hasAttribute("disabled")) {
                                    elt.focus();
                                    elt.select();
                                    break; // On s'arrête après avoir trouvé le premier sans readonly
                                }
                                id++;
                            }

                            $(document).css("cursor", "default")
                            return 0
                        }
                        $(document).css("cursor", "default")
                        notif("warning", "Attention", response.messages)
                        $("#"+idElmt).val(inputQteFacture)
                    },
                    error: function(response) {
                        $(document).css("cursor", "default")
                        $(this).val(inputQteFacture)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            /**
             * Combo de l'emplacement de réception d'une ligne de TIZ : recherche côté serveur,
             * limitée à la zone de réception de cette ligne (data-zone) et à son agence
             * (data-agence, car le tableau peut mélanger plusieurs agences).
             */
            function initSelect2EmplacementReceptionTIZ($select) {

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy')
                }

                $select.select2({
                    width: '100%',
                    placeholder: 'Aucun',
                    allowClear: true,
                    dropdownParent: $(document.body),
                    minimumInputLength: 0,
                    ajax: {
                        url: '/produits/listeEmplacementParZone',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                terme: params.term || '',
                                IDZONESTOCKAGE: $select.data('zone'),
                                IDAGENCE: $select.data('agence')
                            }
                        },
                        processResults: function(reponse) {
                            return {
                                results: $.map((reponse && reponse.data) || [], function(emplacement) {
                                    return { id: emplacement.IDEMPLACEMENT, text: emplacement.NomEmplacement }
                                })
                            }
                        },
                        cache: true
                    },
                    language: {
                        searching: function() { return 'Recherche…' },
                        noResults: function() { return 'Aucun emplacement' }
                    }
                })
            }

            // L'emplacement de réception d'un TIZ non encore réceptionné. Le serveur recrée
            // aussi la fiche STOCKAGENCE_LOTS de réception si le transfert est déjà expédié :
            // c'est ce qui fait foi, ce select n'est qu'une commodité de saisie.
            $(document).on("change", "#tableListeTransfertZone .emplacementReceptionTIZ", function() {

                let $select = $(this)

                $.ajax({
                    url: `{{ route('stocks.updateEmplacementReception') }}`,
                    type: 'PUT',
                    data: {
                        ID_TRANSFERT: $select.data("id"),
                        IDEMPLACEMENT: $select.val() || 0,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.error == false) {
                            notifSuccess(response.messages)
                            return
                        }
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        notifError(response.responseJSON.messages)
                    }
                })
            })

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

                if($("#zoneExpedition_auto").val() == $("#zoneReception_auto").val()){
                    alertSwal("La zone de départ ne peut être pareil à la zone de réception !")
                    return false
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('stocks.transfertAuto') }}",
                    data: {
                        site_auto: $("#site_auto").val(),
                        zoneExpedition_auto: $("#zoneExpedition_auto").val(),
                        zoneReception_auto: $("#zoneReception_auto").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        completeHandler()
                        if (response.error == false) {
                            $("#modalTransfertAuto").modal("hide")
                            $("#btnFiltreTable").trigger("click")
                            notifSuccess(response.messages)
                        }
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                });

            });

            //::::::::::::: FONCTIONS :::::::::::::::::::::::::::::://
            function goToNextPage() {
                tableListePre.page('next').draw('page');
            }

            // Exemple d'utilisation
            // $('#nextPageButton').click(goToNextPage);
            function ImprimerBonAchat(TABID, route = `{{ route('imprimeBonAchatCmde') }}`) {
                $.ajax({
                    url: route,
                    type: 'POST',
                    beforeSend: progressHandler(),
                    data: {
                        LISTE_ID: TABID,
                        periode: $("#filtrePeriode").val(),
                        site: $("#site_filtre option:selected").text(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            // Récupérez le PDF en base64 depuis la réponse
                            var pdfBase64 = response.tablePDF;

                            // Créez un objet blob à partir du PDF en base64
                            var blob = b64toBlob(pdfBase64, 'application/pdf');

                            // Créez un objet URL pour le blob
                            var blobUrl = URL.createObjectURL(blob);
                            viderSelectionTransfert()
                            // Créez une fenêtre d'impression avec l'URL du blob
                            // window.open(blobUrl);
                            var printWindow = window.open(blobUrl);
                            // printWindow.print();
                        } else {
                            notif("warning", "Attention", response.messages)
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            /**
             * @returns {Array} la liste des commandes slectionnées 
             **/

            function listeLigneSelectionne() {

                // Lue sur la sélection retenue et non sur les cases : celles des pages
                // non affichées n'existent pas dans le document.
                return Array.from(idsTransfertSelectionnes)
            }

            function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
                var byteCharacters = atob(b64Data);
                var byteArrays = [];

                for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                    var slice = byteCharacters.slice(offset, offset + sliceSize);

                    var byteNumbers = new Array(slice.length);
                    for (var i = 0; i < slice.length; i++) {
                        byteNumbers[i] = slice.charCodeAt(i);
                    }

                    var byteArray = new Uint8Array(byteNumbers);
                    byteArrays.push(byteArray);
                }

                var blob = new Blob(byteArrays, {
                    type: contentType
                });
                return blob;
            }

            function etapeBl(EtapeBL) {
                switch (EtapeBL) {
                    case 0:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EN PREPARATION</span>';
                        break;

                    case 1:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EN PRE-RECEPTION</span>';
                        break;

                    case 2:
                        return '<span class="badge bg-success-transparent" style="font-size:.78rem; width:170px;">BL VALIDE</span>';
                        break;

                    case 3:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">COMPTABILISE</span>';
                        break;
                    default:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">NON DEFINIE</span>';
                        break;
                }
            }

            /*:::::::::::::::::::::: Fonctions :::::::::::::::::::::::::::::::*/
            function listeTransfert(param) {
                $.ajax({
                    url: `{{ route('stocks.getListeTransfert') }}`,
                    type: 'POST',
                    data: param,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        listeTransfertLigne = response.donnee
                        if (response.error == false) {

                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeTransfertZone',
                                obj: response.donnee,
                                drawCallback: function() {
                                    $('#tableListeTransfertZone .emplacementReceptionTIZ').each(function() {
                                        initSelect2EmplacementReceptionTIZ($(this))
                                    })
                                }
                            })

                            let divShowPer = $('#tableListeTransfertZone_filter')
                            let BroDivShowPer = divShowPer.parent().parent()
                            let child = BroDivShowPer.children().eq(0)
                            let child2 = BroDivShowPer.children().eq(1)

                            child2.removeClass('col-md-6')
                            child2.addClass('col-md-4 d-flex  justify-content-end')
                            // child2.append('<div class=" d-flex justify-content-end">\
                            //                                         <div class="dropdown">\
                            //                                             <button class="btn btn-sm btn-icon btn-outline-dark" type="button" id="dropdownMenuButton1"\
                            //                                                 data-bs-toggle="dropdown" aria-expanded="false">\
                            //                                                 <i class="bx bx-dots-horizontal-rounded " style="font-size : 17px;cursor : pointer;" ></i>\
                            //                                             </button>\
                            //                                             <ul class="dropdown-menu overflow-auto" aria-labelledby="dropdownMenuButton1" id="dropChoixCol"  style="max-height: 300px;">\
                            //                                             </ul>\
                            //                                         </div>\
                            //                                     </div>')

                            child.removeClass('col-md-6')
                            child.addClass('d-flex pt-2 col-md-8')

                            child.append(`<span class="d-flex align-items-center px-2" id="btnImprimeEtiquetteDepart">
                                                <i class="bx bxs-printer text-warning me-1" style="font-size : 18px; cursor : pointer;"></i>
                                                <span id="" class="fw-bold" style="cursor : pointer;">Étiquette départ</span>
                                            </span>
                                            <span class="d-flex align-items-center px-2" id="btnImprimeEtiquetteReception">
                                                <i class="bx bxs-printer text-warning me-1" style="font-size : 18px; cursor : pointer;"></i>
                                                <span id="" class="fw-bold" style="cursor : pointer;">Étiquette réception</span>
                                            </span>
                                            <span class="d-flex align-items-center px-2" id="btnSupprimeLigne">
                                                <i class="bx bxs-trash text-danger me-1" style="font-size : 18px; cursor : pointer;"></i>
                                                <span id="" class="fw-bold" style="cursor : pointer;">supprimer lignes cochées</span>
                                            </span>

                                            <span class="d-flex align-items-center px-2" 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-transfert-zone" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                        `)

                                placeboutonPreferenceColonne('tableListeTransfertZone', 'tableListeTransfertZoneShowColonne', 2)

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

            function remplirEmplReception(IDAGENCE, IDPRODUIT, IDTracabiliteStock, IDZONERECEPTION) {
                $.ajax({
                    url: `{{ route('stocks.getIDSTOCKAGENCE_LOTS_RECEPTION') }}`,
                    type: 'POST',
                    data: {
                        IDAGENCE: IDAGENCE,
                        IDPRODUIT: IDPRODUIT,
                        IDTracabiliteStock: IDTracabiliteStock,
                        IDZONERECEPTION: IDZONERECEPTION,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        if (response != null) {
                            let IDEMPLACEMENT = response.length == 0 ? 0 : response.IDEMPLACEMENT
                            $('#emplac_recept').val(IDEMPLACEMENT).change()

                            $("#IDSTOCKAGENCE_LOTS_RECEPTION").val(response.IDSTOCKAGENCE_LOTS_RECEPTION)
                            return 0
                        }
                        $('#emplac_recept').val(0).change()
                        $("#IDSTOCKAGENCE_LOTS_RECEPTION").val(0)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response
                            .messages)
                    }
                })
            }

            $(document).on('click','#btn-export-transfert-zone',function(){
                var data =  getCleanedTableData('tableListeTransfertZone')
                const filename =file_name("TRANSFERT_ZONE");
                download_excel_file('{{route("export_global_excel.export")}}', data,filename,['#'])
            })
        })
    </script>
@endsection