@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
{{-- @section('TrfInterSite', 'active') --}}
@section('titre-page', 'Etat des périmés')
@section('content-body')
    <style>
        .height-input {
            height: 2.5rem !important;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        body.modal-open {
            overflow: hidden;
        }

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

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-6 col-lg-6 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Stocks</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Etat des périmés</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 mt-xl-0 mt-2 mx-0 ">
                    <div class="row justify-content-end">

                        <div class="col-xl-5 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-dark-light w-100" id="btnGenerer">
                                <i class="bx bx-printer mt-1 me-1"></i> Générer correction stock
                            </button>
                        </div>
                        <div class="col-xl-4 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-info-light w-100" id="btnTransfererZone">
                                <i class="bx bx-transfer-alt mt-1 me-1"></i> Transférer vers une zone
                            </button>
                        </div>
                        <div class="col-xl-3 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-warning-light w-100" id="btnImprimer">
                                <i class="bx bx-printer mt-1 me-1"></i> Imprimer
                            </button>
                        </div>
                    </div>
                </div>

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

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">

                        <div class="col-xl-4 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreligne">0</p>
                                <span class="text-muted fs-12">Nbre ligne</span>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-light text-default">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold" id="nbreBoite">0</p>
                                <span class="text-muted fs-12">Nbre de boites</span>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="ValeurPRMP">0</p>
                                <span class="text-muted fs-12">Valeur au PRMP</span>
                            </div>
                        </div>

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

    <div class="row">
        <div class="col-xl-12 mb-2">
            <div class="accordion " id="">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button bg-danger-gradient" type="button" data-bs-toggle="collapse"
                            data-bs-target="#correction_collapse" aria-expanded="true" aria-controls="correction_collapse">
                            Filtre
                        </button>
                    </h2>
                    <div id="correction_collapse" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#correction_collapse">
                        <div class="accordion-body">

                            <form id="formSearch">

                                @csrf
                                <div class="row">

                                    <div class="col-xl-2 mb-2">
                                        <p class="mb-0 text-muted">Site :</p>
                                        <select class="form-select" name="IDAGENCE" id="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                        </select>
                                    </div>
                                    <div class="col-xl-3 mb-2">
                                        <p class="mb-0 text-muted">Laboratoire :</p>
                                        <select class="form-select" name="IDLABORATOIRE" id="IDLABORATOIRE">
                                            <option value="0">TOUS</option>
                                            @foreach ($LABORATOIRE as $item)
                                                <option value="{{ $item->IDLABORATOIRE }}">
                                                    {{ $item->NomLaboratoire }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-xl-3">
                                        <p class="mb-0 text-muted">Zone de stockage :</p>
                                        <select class="form-select" name="IDZONESTOCKAGE" id="IDZONESTOCKAGE">

                                        </select>
                                    </div>

                                    <div class="col-xl-2 mb-2">
                                        <p class="mb-0 text-muted">Statut :</p>
                                        <select class="form-select" name="statut" id="statut">
                                            <option value="0">TOUS</option>
                                            @foreach ($STATUTPRODUIT as $item)
                                                <option value="{{ $item->IDSTATUTPRODUIT }}">
                                                    {{ $item->LibelleStatutProduit }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-xl-2 mb-2">
                                        <p class="mb-0 text-muted">Type :</p>
                                        <select class="form-select" name="type" id="type">
                                            <option value="0">TOUS</option>
                                            <option value="1">NORMALE</option>
                                            <option value="2">MISE EN PLACE</option>
                                            <option value="2">SPECIALE</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-2 mb-2">
                                        <p class="mb-0 text-muted">Se périme avant le :</p>
                                        <input type="date" class="form-control" id="perimele" name="perimele"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="col-xl-3 mb-2">
                                        <p class="mb-0 text-muted">Fournisseur :</p>
                                        <select class="form-select" name="IDFOURNISSEUR" id="IDFOURNISSEUR">
                                            <option value="0">TOUS</option>
                                            @foreach ($FOURNISSEUR as $item)
                                                <option value="{{ $item->IDFOURNISSEUR }}">
                                                    {{ $item->NomFournisseur }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-xl-3 mb-2">
                                        <p class="mb-0 text-muted">Etagère :</p>
                                        <select class="form-select" name="etagere" id="etagere">
                                            <option value="0">TOUTES</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-2">
                                        <p class="mb-0 text-muted">Accord :</p>
                                        <select class="form-select" name="accord" id="accord">
                                            <option value="0">TOUS</option>
                                            <option value="1">OUI</option>
                                            <option value="2">NON</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-2">
                                        <p class="mb-0 text-muted">Stock :</p>
                                        <select class="form-select" name="stock" id="stock">
                                            <option value="0">TOUS</option>
                                            <option value="1">SOUS STOCK</option>
                                            <option value="2">SURSTOCK</option>
                                            <option value="3">STOCK MORT</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="row justify-content-end">
                                    <div class="col-xl-2 mb-2">
                                        <p class="mb-0 text-muted">Mois :</p>
                                        <input type="text" class="form-control" id="nbreVm" name="nbreVm"
                                            value="0" disabled>
                                    </div>
                                    <div class="col-xl-3 mb-2">
                                        <p class="mb-0 text-muted">Periode :</p>
                                        <input type="text" class="form-control dateperiode" id="periode"
                                            name="periode" disabled>
                                    </div>


                                    <div class="col-xl-2 mb-2 mt-3">
                                        <button class="btn btn-primary w-100" type="submit" id="btnSearch" data-bs-toggle="tooltip"
    data-bs-placement="top"
    data-bs-custom-class="tooltip-primary"
    data-bs-trigger="hover"
    title="Filtrer">
                                            <i class='bx bx-search-alt'></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div class="row">
        <div class=" col-xl-12">
            <div class="card  custom-card">

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit_ no-footer dataTable"
                            id="tableListeEtatPerime">
                            <thead class="table-header-primary">
                                <tr id="tableHead">
                                    <th class="text-center d-none" data-class="text-center">
                                    </th>
                                    <th class="text-center" data-column="action" data-class="text-center">
                                        <input class="form-check-input me-1" type="checkbox" id="checkAll">
                                        #
                                    </th>
                                    <th class="text-center" title="Accord péremption" data-column="CAccordPeremption" data-class="text-center">
                                        A.P
                                    </th>
                                    <th class="text-center" data-column="CodeCipProduit1" data-class="text-center">
                                        CIP 1
                                    </th>
                                    <th class="text-center" data-column="DesignationProduit" data-class="text-start">
                                        Désignation
                                    </th>
                                    <th class="text-center" data-column="NumeroTracabilite" data-class="text-center">
                                        NTSP
                                    </th>
                                    <th class="text-center" data-column="NumeroLotProduit" data-class="text-center">
                                        Numéro de Lot
                                    </th>
                                    <th class="text-center" data-column="DatePeremption" data-class="text-center">
                                        Date de péremption
                                    </th>
                                    <th class="text-center" data-column="NomZoneStockage" data-class="text-start">
                                        Zone
                                    </th>
                                    <th class="text-center" data-column="NomEmplacement" data-class="text-start">
                                        Emplacement
                                    </th>
                                    <th class="text-center" data-column="Vm_Produit" data-class="text-center">VM
                                    </th>
                                    <th class="text-center" data-column="CStockSurVM" data-class="text-center">
                                        Stock/VM</th>
                                    <th class="text-center" data-column="libelleTypeStock" data-class="text-center">Type
                                        de stock</th>
                                    <th class="text-center" data-column="LibelleStatutProduit" data-class="text-center">
                                        Statut</th>
                                    <th class="text-center" data-column="NomLaboratoire" data-class="text-left">
                                        Laboratoire</th>
                                    <th class="text-center" data-column="NomFournisseur" data-class="text-start">
                                        Fournisseur</th>
                                    <th class="text-center" data-column="LibelleCategorieRotation"
                                        data-class="text-center">Cat.
                                        ABC</th>
                                    <th class="text-center" data-column="LibelleFamilleProduit" data-class="text-center">
                                        Famille</th>
                                    <th class="text-center" data-column="LibelleFormeProduit" data-class="text-center">
                                        Forme</th>
                                    <th class="text-center" data-column="LibelleCategorieProduit"
                                        data-class="text-center">
                                        Nature</th>
                                    <th class="text-center" data-column="PrixFHT" data-class="text-end">PFHT </th>
                                    <th class="text-center" data-column="PrixGHT" data-class="text-end">PGHT </th>
                                    <th class="text-center" data-column="PrixRevientHT" data-class="text-end">P.
                                        Revient HT</th>
                                    <th class="text-center" data-column="PrixRevientHTMoyenPondere" data-class="text-end">PRMP
                                    </th>
                                    <th class="text-center" data-column="CTotal_PRMP" data-class="text-end">
                                        Total PRMP</th>
                                </tr>
                            </thead>
                        </table>

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

    <!-- Choix de la zone vers laquelle isoler les lots cochés -->
    <div class="modal fade effect-scale" id="modalTransfertZone" data-bs-focus="false" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Transfert vers une zone</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal" type="button"></button>
                </div>
                <div class="modal-body">

                    <p class="text-muted fs-12 mb-3">
                        Les lots cochés partent de la zone où ils se trouvent, pour la totalité de leur stock.
                        <span id="libNbLotsTransfert" class="fw-semibold"></span>
                    </p>

                    <div class="mb-2">
                        <p class="mb-0 text-muted">Zone de réception</p>
                        <select class="form-select" id="zoneReception_transfert">
                            <option value="0">-- Choisir une zone --</option>
                        </select>
                    </div>

                    <div id="divEcartesTransfert" class="mt-3"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" data-bs-dismiss="modal" type="button">Annuler</button>
                    <button class="btn btn-primary" type="button" id="btnValiderTransfertZone">Transférer</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        $(document).ready(function() {

            chargerSelectlisteAgence()
            chargerSelectProduit()

            $("#IDLABORATOIRE").select2()
            $("#statut").select2()
            $("#IDFOURNISSEUR").select2()

            function chargerSelectlisteAgence() {
                $.ajax({
                    url: '{{ route('listeAgence') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // // console.log(response)
                        $('#IDAGENCE').html('')

                        $('#IDAGENCE').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {
                            $('#IDAGENCE').append(
                                `<option value="${value["IDAGENCE"]}">${value["NomAgence"]}</option>`
                            )
                        })

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

            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_add').html('')
                        $('#produit_add').append('<option value="0">TOUS LES PRODUITS</option>')

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

            var listeColonne = $('#tableHead').html()

            let allColonne

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

                columnDefs: [
                    {
                        targets: 0,
                        visible: false
                    }
                ]
            })

            $("#IDAGENCE").on("change", function() {
                let data = $(this).val()
                listeZone(data, '#formSearch #IDZONESTOCKAGE')
            })

            function listeZone(idAgence, idSelect) {
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${idAgence}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $(idSelect).html("")
                        $(idSelect).append(`<option value="0">TOUTES</option>`)
                        $.each(response, function(key, value) {
                            $(idSelect).append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })
                    },
                    error: function(response) {
                        // // console.log(response)
                        notifError(response.messages)
                    }
                })
            }

            let listeDonnee = []

            $("#btnNew").click(function(e) {
                listeZone($("#idSiteEnCours").val(), '#IDZONESTOCKAGE_add')
                $("#modalAdd").modal("show")
            });

            $(document).on("change", "#IDZONESTOCKAGE", function(e) {
                e.preventDefault();

                $.ajax({

                    url: '{{ route('listingRACK') }}',
                    type: 'POST',
                    // beforeSend: progressHandler(),
                    data: {
                        _token: "{{ csrf_token() }}",
                        IDZONESTOCKAGE: $(this).val()
                    },
                    dataType: 'json',
                    success: function(response) {

                        $("#etagere").html("")
                        $("#etagere").append(`<option value="0">TOUTES</option>`)
                        $.each(response.data, function(index, value) {
                            $("#etagere").append(
                                `<option value="${value.IDRACK}">${value.NomRack}</option>`
                            )
                        });

                    }
                })
            }).on("submit", "#formSearch", function(e) {
                e.preventDefault();

                let formData = new FormData(_("formSearch"))
                formData.append("IDAGENCE", $("#IDAGENCE").val())

                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.etatDesPerimes.listing') }}",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    success: function(response) {
                        // console.log(response)
                        // Vérifiez si DataTables a déjà été initialisé et détruisez-le

                        if (response.error == false) {

                            try {
                                
                                if ($.fn.DataTable.isDataTable('#tableListeEtatPerime')) {
                                    $('#tableListeEtatPerime').DataTable().destroy();
                                }

                                // destroy() rend la table à son état d'avant DataTables, mais
                                // laisse en place les lignes ajoutées : sans ce vidage, la
                                // recherche suivante venait s'empiler sur la précédente et le
                                // tableau mélangeait deux résultats.
                                $('#tableListeEtatPerime tbody').empty()

                                // join('') et non une concaténation : ListeAutreColonne est un
                                // tableau, que « + » convertit en chaîne séparée par des
                                // virgules — elles se retrouvaient dans la ligne d'en-tête.
                                $('#tableHead').html(listeColonne + response.ListeAutreColonne.join(''))
    
                                listeDonnee = response.data
    
                                tableListeEtatPerime = $("#tableListeEtatPerime")
                                    .DataTable({
                                        language: languageTable,
                                        // pagingType: 'full_numbers',
                                        pageLength: 25,
                                        lengthChange: true,
                                        order: [],
                                        columnDefs: [
                                            {
                                                targets: 0,
                                                visible: false
                                            }
                                        ]
                                    })
    
                                // tableListeEtatPerime.clear().draw()
    
                                let divShowPer = $('#tableListeEtatPerime_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')
                              
                                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" 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-etat-perime" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                                </span>`)

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

                                    let listeData = []
                                    $.each(response.ListepropertyName, function (index, value) { 
                                        listeData.push(elmt[value])
                                    });

    
                                    tableListeEtatPerime.row.add([
                                        elmt.IDPRODUIT,
                                        elmt.action,
                                        elmt.CAccordPeremption,
                                        elmt.CodeCipProduit1,
                                        elmt.DesignationProduit,
                                        elmt.NumeroTracabilite,
                                        elmt.NumeroLotProduit,
                                        elmt.DatePeremption,
                                        elmt.NomZoneStockage,
                                        elmt.NomEmplacement,
                                        elmt.Vm_Produit,
                                        elmt.CStockSurVM,
                                        elmt.libelleTypeStock,
                                        elmt.LibelleStatutProduit,
                                        elmt.NomLaboratoire,
                                        elmt.NomFournisseur,
                                        elmt.LibelleCategorieRotation,
                                        elmt.LibelleFamilleProduit,
                                        elmt.LibelleFormeProduit,
                                        elmt.LibelleCategorieProduit,
                                        elmt.PrixFHT,
                                        elmt.PrixGHT,
                                        elmt.PrixRevientHT,
                                        elmt.PrixRevientHTMoyenPondere,
                                        elmt.CTotal_PRMP,
                                        ...listeData
                                        // IDSTOCKAGENCE_LOTS retiré : cette valeur n'avait pas
                                        // d'en-tête correspondant — la ligne comptait une cellule
                                        // de plus que le tableau n'a de colonnes — et personne ne
                                        // la lisait, la sélection des lignes passant par le
                                        // data-id de la case à cocher.
                                    ])
                                });
    
                                tableListeEtatPerime.draw()
    
                                var count = Object.keys(listeDonnee).length;
    
                                $("#nbreligne").text(formatNumber(count))
                                $("#nbreBoite").text(formatNumber(response.nbreBoite))
                                $("#ValeurPRMP").text(formatNumberPerf(response.valeurPRMP))
                            } catch (error) {
                                console.log(error)
                            }

                            completeHandler()
                            // notifSuccess(response.messages)
                            return false
                        }
                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
            }).on("change", "#stock", function() {

                $("#nbreVm").removeAttr("disabled")
                $("#periode").removeAttr("disabled")

                if (parseInt($(this).val()) == 1 || parseInt($(this).val()) == 2) {
                    $("#periode").attr("disabled", "disabled")
                } else if (parseInt($(this).val()) == 3) {
                    $("#nbreVm").attr("disabled", "disabled")
                } else {
                    $("#periode").attr("disabled", "disabled")
                    $("#nbreVm").attr("disabled", "disabled")
                }
            }).on("click", "#btnImprimer", function() {
                let data = tableListeEtatPerime.rows().data().toArray()

                if (data.length <= 0) {
                    alertSwal("Aucune ligne à imprimer !!")
                    return false
                }

                $.ajax({
                    type: "post",
                    url: "{{ route('stock.etatDesPerimes.prime') }}",
                    data: {
                        data: listeDonnee,
                        date: $("#perimele").val(),
                        agence: $("#IDAGENCE option:selected").text(),
                        _token: "{{ csrf_token() }}"
                    },

                    dataType: "json",
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            var pdfBase64 = response.tablePDF;
                            genererPDF(pdfBase64)
                        }
                    },
                    error: function(response) {
                        // console.log(response)
                    }
                });
            }).on("click", "#btnGenerer", function() {
                let liste = listeLigneSelectionne("#tableListeEtatPerime", "#checkLigne")
                
                if (liste.length <= 0) {
                    alertSwal("Cocher une ou plusieurs lignes !!!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('stock.etatDesPerimes.genereCorretion') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                listeID: liste,
                                idagence: $("#IDAGENCE").val(),
                                datePerime: $("#perimele").val(),
                            },
                            beforeSend: progressHandler(),
                            dataType: "json",
                            success: function(response) {
                                // console.log(response)
                                if (response.error == false) {
                                    $("#btnSearch").click()
                                    notifSuccess(response.messages)
                                } else {
                                    notifWarning(response.messages)
                                }
                                completeHandler()
                            },
                            error: function(response) {
                                // console.log(response)
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        });

                    },
                    null,
                    "Voulez-vous générer les mouvements de stock avec les lignes sélectionnées ?", {
                        sousTitre: 'Seuls les lignes n\'ayant pas de quantité en transit et (STOCK > 0) seront concernées.',
                        infoJNL: "GENERATION - SORTIE DES PERIMES",
                        typeJNL: 3,
                        CodeDroit: "DS_Correction"
                    })
            })

            // Transfert des lots cochés vers une zone. La zone de départ n'est pas demandée :
            // c'est celle où chaque lot se trouve, une même sélection pouvant en couvrir plusieurs.
            $(document).on("click", "#btnTransfererZone", function() {

                let liste = listeLigneSelectionne("#tableListeEtatPerime", "#checkLigne")

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

                _('libNbLotsTransfert').innerHTML = liste.length + ' lot(s) sélectionné(s).'
                $('#divEcartesTransfert').html('')
                $('#zoneReception_transfert').val(0)

                // La zone de réception se choisit parmi celles du site filtré, sans « TOUTES ».
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${$("#IDAGENCE").val()}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {

                        $('#zoneReception_transfert').html('<option value="0">-- Choisir une zone --</option>')

                        $.each(response, function(key, value) {
                            $('#zoneReception_transfert').append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })

                        $('#modalTransfertZone').modal('show')
                    },
                    error: function() {
                        notifError("Impossible de charger les zones de stockage.")
                    }
                })
            })

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

                let liste = listeLigneSelectionne("#tableListeEtatPerime", "#checkLigne")
                let zone  = $('#zoneReception_transfert').val()

                if (zone == 0 || zone == null) {
                    alertSwal("Veuillez choisir la zone de réception !!!")
                    return false
                }

                confirmMdp("{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('stock.etatDesPerimes.transfererVersZone') }}",
                            data: {
                                _token: "{{ csrf_token() }}",
                                listeID: liste,
                                idagence: $("#IDAGENCE").val(),
                                IDZONESTOCKAGE_RECEPTION: zone,
                            },
                            beforeSend: progressHandler(),
                            dataType: "json",
                            success: function(response) {

                                completeHandler()

                                // Les lots écartés restent affichés dans la modale : c'est le seul
                                // endroit où l'opérateur peut voir lesquels, et pourquoi.
                                afficherEcartesTransfert(response.ecartes)

                                if (response.error == false) {

                                    notifSuccess(response.messages)

                                    if (!response.ecartes || response.ecartes.length == 0) {

                                        $('#modalTransfertZone').modal('hide')
                                    }

                                    $("#btnSearch").click()
                                } else {

                                    notifWarning(response.messages)
                                }
                            },
                            error: function(response) {
                                completeHandler()
                                notifError(response.responseJSON?.messages ?? "Échec de l'opération.")
                            }
                        });
                    },
                    null,
                    "Voulez-vous transférer les lots sélectionnés vers cette zone ?", {
                        sousTitre: 'La totalité du stock de chaque lot est transférée. Les lignes créées restent à valider dans l\'écran de transfert inter-zone.',
                        infoJNL: "TRANSFERT INTER ZONE - ETAT DES PERIMES",
                        typeJNL: 3,
                        CodeDroit: "DS_TransfertInterne"
                    })
            })

            function afficherEcartesTransfert(ecartes) {

                if (!ecartes || ecartes.length == 0) {

                    $('#divEcartesTransfert').html('')
                    return
                }

                let lignes = ecartes.map(e =>
                    `<tr><td class="text-nowrap">${e.lot}</td><td>${e.motif}</td></tr>`
                ).join('')

                $('#divEcartesTransfert').html(`
                    <p class="mb-1 fw-semibold text-warning">${ecartes.length} lot(s) non transféré(s) :</p>
                    <div class="table-responsive" style="max-height : 220px;">
                        <table class="table table-sm table-striped mb-0">
                            <thead><tr><th>N° de lot</th><th>Motif</th></tr></thead>
                            <tbody>${lignes}</tbody>
                        </table>
                    </div>
                `)
            }

            $(document).on('click','#btn-export-etat-perime',function(){
                var data =  remplissage_avec_row_add_DataTable('tableListeEtatPerime')
                const filename =file_name("LISTING_PRODUIT_PERIMES");
                const tabs_format = { G: '#,##0', H: '#,##0', I: '#,##0' };
                download_excel_file('{{route("export_global_excel.export")}}', data,filename)
            })
           
        })
    </script>
@endsection