@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;Integer CSV
                                        </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 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 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 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 csv</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-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() {

            $.ajax({

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

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

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

                        $('#produit_add').append('<option value="' + value["IDPRODUIT"] + '">' + value[
                            "DesignationProduit"] + '</option>')
                    })

                    $('#produit_add').select2({
                        dropdownParent: $("#modalAddTransfert")
                    })
                }
            })
        }

        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 ")
            })

            // selection de tout les elements du tableau sur modal
            _('checkTransfertAll').addEventListener('click', function() {
                let value = this.checked
                let tableListeTransfert = $("#tableListeTransfertZone").DataTable()
                let lignes = tableListeTransfert.rows().nodes()
                $(lignes).find('#checkLigneTransfert').prop('checked', value)
            })

            // // 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() {
                if ($(this).checked == true) {
                    $(this).checked = false
                }
                if (_('checkTransfertAll').checked == true) {
                    _('checkTransfertAll').checked == false
                }
            })

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

            $("#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

                        let data1 = ui.item.IDTracabiliteStock

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

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

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

                    // li.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("Veuiller choisir un site d'expédition !!")
                    return 0
                }
                
                if ($("#zoneExpedition_add").val() == "" || $("#zoneExpedition_add").val() == null) {
                   
                    alertSwal("Veuiller choisir une zone d'expédition !!")
                    return 0
                }
                if ($("#zoneReception_add").val() == "" || $("#zoneReception_add").val() == null) {
                    
                    alertSwal("Veuiller choisir une zone de réception !!")
                    return 0
                }
                if ($("#idNumLot").val() == "") {
                    
                    alertSwal("Veuiller choisir un lot !!")
                    return 0
                }
                if ($("#qteTransfert_add").val() == "" || parseInt($("#qteTransfert_add").val()) <= 0) {
                   
                    alertSwal("Veuiller saisir une quantité suppérier à 0 !!")
                    return 0
                }

                if ($("#zoneReception_add").val() == $("#zoneExpedition_add").val()) {
                    alertSwal("Veuiller 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

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

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

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

                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("")

                        $.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()
                $.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>`
                            )
                        })

                        $('#emplac_recept').select2({
                            dropdownParent: $("#modalAddTransfert")
                        })

                        // 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
            $("#formIntegreCsv").on("submit", function(evt) {
                evt.preventDefault()

                if ($("#zoneExpedition_csv").val() == $("#zoneReception_csv").val()) {
                    alertSwal("Veuiller 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)
                            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")
                                    _('checkTransfertAll').checked = false
                                    completeHandler()
                                    notifSuccess(response.messages)
                                    return 0
                                }
                                completeHandler()
                                notifDanger(response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                // console.log(response)
                                notifDanger(response.responseJSON.messages)
                            }
                        })
                    },
                    null, "Veuillez saisir votre mot de passe pour valider votre expédition", {
                        sousTitre: '',
                        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()
                                _('checkTransfertAll').checked = false
                                notifSuccess(response.messages)
                                return 0
                            }
                            completeHandler()
                            notifDanger(response.messages)
                        },
                        error: function(response) {
                            // console.log(response)
                            completeHandler()
                            notifDanger(response.responseJSON.messages)
                        }
                    })
                }, null, "Veuillez saisir votre mot de passe pour valider votre réception", {
                    sousTitre: '',
                    infoJNL: "VALIDATION DE TRANSFERT INTER-ZONE : RECEPTION",
                    typeJNL: 3,
                    CodeDroit: "DS_TransfertInterne"
                })
            });

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

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

                let liste_id = []
                let ligne = listeLigneSelectionne()

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

                $.each(ligne, function(key, value) {
                    if($("#" + value).val() != ''){
                        liste_id.push($("#" + value).val())
                    }
                })

                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,
                        _token: "{{ csrf_token() }}"
                    }
                } else if (_("checkFormatZebra").checked == true) {
                    route = `{{ route('modal.imprimeZebraLot') }}`
                    data = {
                        LISTE_ID: liste_id,
                        _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("Veuiller 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 id = parseInt($(this).attr("id").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")

                            console.log(id)
                            
                            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)
                    },
                    error: function(response) {
                        $(document).css("cursor", "default")
                        $(this).val(inputQteFacture)
                        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 pareille à 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);
                            $(document).find('#checkLigneTransfert').prop('checked', false)
                            // 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() {

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

                $.each($(lignes).find('#checkLigneTransfert'), function(key, value) {

                    if (value.checked == true) {
                        // data - idclient
                        dataIdCmdeLigne.push(value.getAttribute('data-id'))
                    }
                })
                return dataIdCmdeLigne
            }

            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
                            })

                            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="btnImprimeEtiquette">
                                                <i class="bx bxs-printer text-warning me-1" style="font-size : 18px; cursor : pointer;"></i>
                                                <span id="" class="fw-bold" style="cursor : pointer;">Imprimer étiquette</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) {
                $.ajax({
                    url: `{{ route('stocks.getIDSTOCKAGENCE_LOTS_RECEPTION') }}`,
                    type: 'POST',
                    data: {
                        IDAGENCE: IDAGENCE,
                        IDPRODUIT: IDPRODUIT,
                        IDTracabiliteStock: IDTracabiliteStock,
                        _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