@extends('models')
{{-- @section('substock')
    open active
@endsection
@section('achats')
    active
@endsection --}}
{{-- @section('TrfInterSite', 'active') --}}
@section('titre-page', 'Modification de commande')
@section('content-body')
    <style>
        .height-input {
            height: 2.5rem !important;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        body.modal-open {
            overflow: hidden;
        }

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

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-3 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">Modification de commande</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-9 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-2 col-md-3 col-sm-4 px-0 mx-1 d-flex justify-content-center">
                            <button class=" btn w-100 btn-success" id="btnValideSuivi">
                                <i class="bx bx-vertical-bottom me-2"></i> Valider
                            </button>
                        </div>
                        <div class="col-xl-2 col-md-3 col-sm-4 px-0 mx-1 d-flex justify-content-center">
                            <button class=" btn w-100 btn-warning" id="btnIntegreCSV">
                                <i class='bx bx-export me-1'></i>&nbsp;Integrer CSV
                            </button>
                        </div>
                        <div class="col-xl-1 col-sm-1 col-md-1 px-0 mx-0 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-danger-light w-100" id="btnSupprimer">
                                <i class='bx bx-trash fs-16'></i>
                            </button>

                        </div>
                        <div class="col-xl-2 col-md-3 col-sm-6">

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

                                <button class="btn btn-primary-light dropdown-toggle w-100" 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
                                        </button>
                                    </li>

                                    <li>
                                        <button class="dropdown-item text-start" id="btn-export-modification-commande">
                                            <i class='ri ri-file-excel-2-line text-success me-1'></i>&nbsp;Exporter en excel
                                        </button>
                                    </li>

                                </ul>
                            </div>

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

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-11">
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                            <input type="text" class="form-control text-center" name="datetimes" id="filtrePeriode" />
                        </div>
                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Bureau d'achat</p>
                            <select class="form-select" id="IDBUREAUACHAT_filtre">

                            </select>
                        </div>

                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Fournisseur</p>
                            <select class="form-select" id="IDFOURNISSEUR_filtre">

                            </select>
                        </div>

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

                            </select>
                        </div>
                        <div class="col-xl-2">
                            <p class="mb-0 text-muted">Etat</p>
                            <select class="form-select" name="etat_filtre" id="etat_filtre">
                                <option value="0">TOUS</option>
                                <option value="1">TRAITEE</option>
                                <option value="2">NON TRAITEE</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-1">
                    <button class="btn btn-primary mt-3 " id="btnSearch"><i class='bx bx-search-alt fs-12'></i></button>
                    <span class="d-none" id="btnLoaderSearch">
                        <button class="btn btn-primary-transparent btn-loader d-block mt-3 w-100">
                            <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class=" col-xl-12">
            <div class="card  custom-card">
                <div class="card-header d-block">
                    <form id="formAddCmdeSuivi">
                        @csrf
                        <div class="row">
                            <div class="col-xl-11">
                                <div class="row">
                                    <div class="col-xl-3">
                                        <p class="mb-0 text-muted">N° Commande</p>
                                        <input type="text" class="form-control" id="numCommande">
                                    </div>

                                    <div class="col-xl-4 col-lg-2 col-md-4 mb-2">
                                        <p class="mb-0 text-muted">Produit</p>
                                        <input type="text" class="form-control form-select" name=""
                                            id="IDPRODUIT_filtre">
                                        <input type="text" class="form-control" name="IDPRODUIT" id="IDPRODUIT" hidden>
                                        <input type="text" name="IDCOMMANDELIGNE" id="IDCOMMANDELIGNE" hidden>
                                        <input type="text" name="QteCmmdee" id="QteCmmdee" value="0" hidden>

                                    </div>

                                    <div class="col-xl-2">
                                        <p class="mb-0 text-muted">Qté modifiée</p>
                                        <input type="text" class="form-control text-center" name="qte_modifie"
                                            id="qte_modifie" value="0"
                                            oninput="this.value = this.value.replace(/\D/g, '')">
                                    </div>

                                    <div class="col-xl-3">
                                        <p class="mb-0 text-muted">Motif</p>
                                        <select class="js-example-basic-single form-select" name="motif_add"
                                            id="motif_add">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-1">
                                <button type="submit" class="btn btn-success mt-3 w-100" id="btnSubmitFiltre">
                                    <i class='bx bxs-plus-circle'></i>
                                </button>
                                <span hidden id="zoneBntLoader">

                                    <button class="btn btn-success-transparent btn-loader d-block mt-3 w-100" hidden>
                                        <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
                                    </button>
                                </span>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit no-footer dataTable"
                            id="tableListeSuivi">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-column="action" data-class="text-center">
                                        <input class="form-check-input me-1" type="checkbox" id="checkSuiviAll">
                                        #
                                    </th>

                                    <th class="text-center" data-column="CodeCipProduit1" data-class="text-center">Code
                                        Produit</th>
                                        <th class="text-center" data-column="CreeLeFormat" data-class="text-center">Date de
                                        saisie</th>
                                    <th class="text-center" data-column="DesignationProduit" data-class="text-left">
                                        Désignation</th>
                                    <th class="text-center" data-column="QteSuiviCommande" data-class="text-center">Qté
                                        Modifiée</th>
                                    <th class="text-center" data-column="NumeroCommande" data-class="text-center">N°
                                        Commande</th>
                                    <th class="text-center" data-column="CodeMotifSuiviCommande"
                                        data-class="text-center">Code motif</th>
                                    <th class="text-center" data-column="LibelleMotifSuiviCommande"
                                        data-class="text-start">Motif de modification</th>
                                    <th class="text-center" data-column="DateInfoSuiviFormat" data-class="text-center">
                                        Date d'info.</th>
                                    <th class="text-center" data-column="CodeTedisProduit" data-class="text-center">
                                        Code Interne
                                    </th>
                                    

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

                    </div>
                </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 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 | Numéro commande | Qté annulée |
                                        Code statut | Date info</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>
    
@endsection

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

            $.ajax({

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

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

                    $.each(response.data, function(key, value) {
                        $('#produit').append('<option value="' + value["IDPRODUIT"] + '">' + value[
                            "DesignationProduit"] + '</option>')
                        $('#produit_receptionnee').append('<option value="' + value["IDPRODUIT"] +
                            '">' + value[
                                "DesignationProduit"] + '</option>')
                    })
                    $('#produit').select2()
                    $('#produit_receptionnee').select2()
                }
            })
        }

        function chargerSelectlisteAgence() {

            $.ajax({

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

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

                        $('#site_depart').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                        $('#site_reception').append('<option value="' + value["IDAGENCE"] + '">' +
                            value[
                                "NomAgence"] + '</option>')
                        $('#site_depart_csv').append('<option value="' + value["IDAGENCE"] + '">' +
                            value[
                                "NomAgence"] + '</option>')
                        $('#site_reception_csv').append('<option value="' + value["IDAGENCE"] + '">' +
                            value[
                                "NomAgence"] + '</option>')
                    })

                    $('#site_depart').val('{{ session()->get('IDAGENCE') }}').change()

                }
            })
        }

        function chargerSelectBureauAchat() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDBUREAUACHAT_filtre').html('')
                        $('#IDBUREAUACHAT_filtre').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {
                            $('#IDBUREAUACHAT_filtre').append('<option value="' + value[
                                    'IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                        })
                        $('#IDBUREAUACHAT_filtre').select2()
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectFournisseur() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDFOURNISSEUR_filtre').html('')
                        $('#IDFOURNISSEUR_filtre').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#IDFOURNISSEUR_filtre').append('<option value="' + value[
                                    'IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                        })
                        $('#IDFOURNISSEUR_filtre').select2()
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerMotif() {

            $.ajax({

                url: '{{ route('suiviCmde.listeMotifSuivi') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.error == false) {
                        $('#motif_filtre').html('')
                        $('#motif_add').html('')
                        $('#motif_filtre').append('<option value="0">TOUS</option>')
                        $('#motif_add').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#motif_filtre').append('<option value="' + value[
                                    'IDCOMMANDE_SUIVI_MOTIF'] +
                                '">' + value['LibelleMotifSuiviCommande'] + '</option>')
                            $('#motif_add').append('<option value="' + value['IDCOMMANDE_SUIVI_MOTIF'] +
                                '">' + value['LibelleMotifSuiviCommande'] + '</option>')
                        })
                        $('#motif_filtre').select2()
                        $('#motif_add').select2()
                    }
                    completeHandler()
                },
                error: function(response) {

                    notifError(response.responseJSON.messages)
                    completeHandler()
                }
            })
        }

        chargerMotif()
        chargerSelectFournisseur()
        chargerSelectBureauAchat()
        chargerSelectProduit()
        chargerSelectlisteAgence()
        // listingComboPersonnel(["#operateur_depart", "#operateur_reception"])
    </script>

    <script>
        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY HH:mm")
            // $().daterangepicker({
            //     timePicker: true,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "locale": {
            //         "format": ,
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })

        $(document).ready(function() {

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

                // pagingType: 'full_numbers',
                pageLength: 25,
                lengthChange: true,
                // order: [5, "desc"],
            })

            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', // .xls
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // .xlsx
                ],
                labelFileTypeNotAllowed: "seul les fichier csv/xls/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,
                    }
                }
            });

            var donneeSuivi = null
            var donneeTransfertSiteLigne

            var inputValue
            $(document).on("click", "input[type='text']", function() {
                inputValue = $(this).val()
            })

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

                if (parseInt($("#QteCmmdee").val()) <= 0) {
                    alertSwal("Veuillez sélectionner un produit SVP !")
                    return 0
                }

                if ($("#qte_modifie").val() == "0") {
                    alertSwal("Veuillez renseigner la quantité à annuler !")
                    $("#qte_modifie").focus()
                    $("#qte_modifie").select()
                    return 0
                }

                if (parseInt($("#motif_add").val()) <= 0) {
                    alertSwal("Veuillez sélectionner un motif d'annulation !")
                    return 0
                }

                if (parseInt($("#qte_modifie").val()) > parseInt($("#QteCmmdee").val())) {
                    alertSwal("La quantité à annuler ne peut être supérieure à la quantité commandée !")
                    $("#qte_modifie").focus()
                    $("#qte_modifie").select()
                    return 0
                }

                let formData = new FormData(_('formAddCmdeSuivi'))

                ajoutProduit(formData)
            })

            function ajoutProduit(formData) {
                $.ajax({
                    url: `{{ route('suiviCmde.ajoutProduit') }}`,
                    type: 'post',
                    dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $("#zoneBntLoader").removeAttr("hidden")
                        $("#btnSubmitFiltre").attr("hidden", "hidden")
                    },
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            listeCmdeSuivie()

                            $("#zoneBntLoader").attr("hidden", "hidden")
                            $("#btnSubmitFiltre").removeAttr("hidden")
                            return 0
                        }
                        $("#zoneBntLoader").attr("hidden", "hidden")
                        $("#btnSubmitFiltre").removeAttr("hidden")
                    },
                    error: function(response) {
                        $("#zoneBntLoader").attr("hidden", "hidden")
                        $("#btnSubmitFiltre").removeAttr("hidden")
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function ajoutProduitReception(formData) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.trfInterSite.ajoutProduitReception') }}",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.error == false) {
                            liste($("#idtransfertEncours").val(), true)
                            notifSuccess(reponse.messages)
                        }
                    },
                    error: function(response) {
                        notifError(reponse.reponseson.messages)
                    }
                });
            }

            var listeProduitQte = []
            // Impression d'étiquette
            $(document).on("change", "#numCommande", function() {

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

                $.ajax({
                    type: "GET",
                    url: "{{ route('suiviCmde.listeProduitCmde') }}",
                    data: {
                        PNumCmde: $(this).val()
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.error == false) {
                            listeProduitQte = response.data
                            return false
                        }
                    },
                    error: function(response) {
                        notifError(response.responseJSON.messages)
                    }
                });

            })

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


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

            $("#IDPRODUIT_filtre").autocomplete({
                delay: 500,
                minLength: 0,
                autoFocus: true,
                source: function(request, response) {
                    console.log(listeProduitQte.length);

                    const term = $.trim(request.term).toLowerCase();
                    var matches
                     if(term == ""){
                         matches = listeProduitQte     
                    }else{
                         // Filtrage local : désignation ou code, etc.
                         matches = listeProduitQte.filter(item =>
                            item.DesignationProduit.toLowerCase().includes(term) ||
                            String(item.CodeTedisProduit).toLowerCase().includes(term)
                        );

                    }


                    if (matches.length === 0) {
                        item = {}
                        item.label = "Aucun lot trouvé"
                        item.taille = 0
                        item.id = 0
                        item.IDPRODUIT = 0
                        item.IDCOMMANDELIGNE = 0
                        item.QuantiteCommandee = 0

                        response(item)
                        return 0
                    } else {
                        response($.map(matches, function(item, key) {
                            item.label = item.DesignationProduit + " | " + item
                                .QuantiteCommandee,
                                item.id = item.IDCOMMANDELIGNE,
                                item.DesignationProduit = item.DesignationProduit,
                                item.QuantiteCommandee = item.QuantiteCommandee,
                                item.NumeroCommande = item.NumeroCommande,
                                item.CommandeValidee = item.CommandeValidee,
                                item.NumeroCommande = item.NumeroCommande,
                                item.IDPRODUIT = item.IDPRODUIT,
                                item.CodeTedisProduit = item.CodeTedisProduit,
                                item.CodeTedisProduit = item.CodeTedisProduit,
                                item.PrixGHT = item.PrixGHT,
                                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) {
                        _("qte_modifie").focus()
                        _("qte_modifie").select()
                        _("IDPRODUIT").value = ui.item.IDPRODUIT
                        _("IDCOMMANDELIGNE").value = ui.item.IDCOMMANDELIGNE
                        _("QteCmmdee").value = ui.item.QuantiteCommandee
                    }

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

                    // li.append($div)
                    return li.appendTo(ul)
                } else {
                    var $wrapper = $("<div class='autocomplete-scroll-wrapper'></div>");
                    var $table = $("<table class='autocomplete-table'></table>");
                    var $header = $(`<thead>
                                        <tr>
                                            <th>Désignation</th>
                                            <th>Qté commandée</th>
                                        </tr>
                                    </thead>`);
                    var $tbody = $("<tbody></tbody>");

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

                    $.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:left; width:250px!important'>" +
                            item.DesignationProduit + "</td>");
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.QuantiteCommandee + "</td>");

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

            // Impression d'étiquette
            $(document).on("click", "#btnSearch", function() {
                listeCmdeSuivie()
            })

            $(document).on("click", "#btnValideSuivi", function() {
                let listeID = listeLigneSelectionne()

                if (listeID.length <= 0) {
                    alertSwal("Cocher un/plusieurs Bon avant de valider !!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('suiviCmde.validerSuivie') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                data: listeID
                            },
                            dataType: "json",
                            success: async function(response)  {
                                if (response.error == false) {
                                    await listeCmdeSuivie()
                                    notifSuccess(response.messages)
                                    return false
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                notifError(response.responseJSON.messages)
                            }
                        });
                    },
                    null,
                    "Voulez-vous valider les annulations sélectionnées ?", {
                        sousTitre: '',
                        infoJNL: "VALIDATION D'ANNULATION DE COMMANDE",
                        typeJNL: 3,
                        CodeDroit: "DA_SuiviComdeValider"
                    })
            })

            // suppresion de transfert inter-site
            $(document).on("click", "#btnSupprimer", function() {

                let listeID = listeLigneSelectionne()

                if (listeID.length <= 0) {
                    alertSwal("Cocher une/plusieurs lignes !!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            url: `{{ route('suiviCmde.supprimer') }}`,
                            type: 'delete',
                            data: {
                                data: listeID,
                                "_token": "{{ csrf_token() }}"
                            },
                            dataType: 'json',
                            beforeSend: progressHandler(),
                            success: function(response) {
                                console.log(response)
                                if (response.error == false) {
                                    $("#btnSearch").trigger("click")
                                    completeHandler()
                                    notifSuccess(response.messages)
                                    return 0
                                }
                                completeHandler()
                                notifWarning(responses.messages)
                            },
                            error: function(response) {
                                // console.log(response)
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        })
                    },
                    null,
                    "Voulez-vous supprimer les lignes sélectionnés ? <br> Les lignes validées ne seront pas supprimées !", {
                        sousTitre: '',
                        infoJNL: "SUPPRESSION D'ANNULATION DE COMMANDE",
                        typeJNL: 3,
                        CodeDroit: "DA_SuiviComdeValider"
                    })

            })

            // impression du transfert
            $(document).on("click", "#btnImprimeTransfert", function(e) {
                e.preventDefault()

                let ligne = listeLigneSelectionne()

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

                let listeID = donneeSuivi.filter((items) => ligne.includes(String(items.IDCOMMANDE_SUIVI)))

                if (listeID.length <= 0) {
                    alertSwal("Veuillez cocher une ou plusieurs lignes !!")
                    return 0
                }

                $.ajax({
                    url: `{{ route('suiviCmde.imprimeSuivi') }}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: listeID,
                        periode: $("#filtrePeriode").val()
                    },
                    // beforeSend: progressHandler(),
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {

                            var pdfBase64 = response.tablePDF;
                            var blob = b64toBlob(pdfBase64, 'application/pdf');

                            var blobUrl = URL.createObjectURL(blob);
                            $(document).find('#checkLigneTransfert').prop('checked', false)
                            var printWindow = window.open(blobUrl);
                            // printWindow.print();
                        }
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })


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

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

                let formData = new FormData(_("formIntegreCsv"))
                $("#integrerCsv").val("")
                $.ajax({
                    url: "{{ route('suiviCmde.insertCsv') }}",
                    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()
                            filePond.removeFiles()
                            downloadExcel(response.file, response.filename)
                            listeCmdeSuivie()
                            notifSuccess(response.messages)
                            $("#formIntegreCsv")[0].reset()
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            _('checkSuiviAll').addEventListener('click', function() {
                let value = this.checked
                let tableListeTransfert = $("#tableListeSuivi").DataTable()
                let lignes = tableListeTransfert.rows().nodes()
                $(lignes).find('#checkLigneSuivi').prop('checked', value)
            })

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

            function listeLigneSelectionne() {

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

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

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

            function listeCmdeSuivie() {

                $.ajax({
                    url: `{{ route('suiviCmde.listeCmdeSuivie') }}`,
                    type: 'GET',
                    data: {
                        filtrePeriode: $("#filtrePeriode").val(),
                        BuroSelc: $("#IDBUREAUACHAT_filtre").val(),
                        FseurSelec: $("#IDFOURNISSEUR_filtre").val(),
                        TypMoti: $("#motif_filtre").val(),
                        etat: $("#etat_filtre").val(),
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {
                        console.log(response)

                        if (response.error == true) {
                            completeHandler()
                            notifWarning(response.messages)
                            return false
                        }
                        completeHandler()
                        remplissageDataTable({
                            IdentifiantDuTableau: '#tableListeSuivi',
                            obj: response.data
                        })
                        donneeSuivi = response.data

                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

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