@extends('models')
@section('titre-page', 'Historiques des dernières réceptions')

@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;
        }

        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 */
        }
    </style>

    @php
        $ModeGpharma = ModeGpharma();
    @endphp

    <!-- 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);">Achats</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Historiques des dernières réceptions</li>
                        </ol>
                    </nav>
                </div>

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

    {{-- <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-3 col-lg-4 col-sm-12 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"></p>
                                <span class="text-muted fs-12">Nbre Ligne</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-12 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="totalFacture"></p>
                                <span class="text-muted fs-12">Total Qté facturée </span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-12 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="totalLivre"></p>
                                <span class="text-muted fs-12">Total Qté livrée </span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-12 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-info-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-info fw-semibold" id="valPFHT"></p>
                                <span class="text-muted fs-12">Total val. PFHT</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="row mt-3">
        <div class=" col-xl-12">
            <div class=" card custom-card">
                <div class=" card-body pe-0 pe-0">
                    <div class="row w-100">
                        <form id="formFiltre">
                            @csrf
                            <div class="row">
                                <div class="d-flex align-items-center col-xl-2 col-lg-2 col-md-2">
                                    <div>
                                        <div class="form-check form-check-sm">
                                            <input class="form-check-input" type="radio" name="produitCMU" id="cmuall"
                                                value="0" checked>
                                            <p class="form-check-label text-muted" for="cmuall">
                                                Tous
                                            </p>
                                        </div>
                                        <div class="form-check form-check-sm">
                                            <input class="form-check-input" type="radio" name="produitCMU" id="cmu"
                                                value="1">
                                            <p class="form-check-label text-muted" for="cmu">
                                                {{ ($ModeGpharma == 3) ? 'TPOM' : 'C.M.U' }}
                                            </p>
                                        </div>
                                        <div class="form-check form-check-sm">
                                            <input class="form-check-input" type="radio" name="produitCMU" id="pascmu"
                                                value="2">
                                            <p class="form-check-label text-muted" for="pascmu">
                                                Pas {{ ($ModeGpharma == 3) ? 'TPOM' : 'C.M.U' }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-9 col-lg-9 col-md-9">
                                    <div class=" row">
                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Famille</p>
                                            <select class="form-select" name="IDFAMILLE" id="filtreFamille">
                                                <option value="0">TOUS</option>
                                                <option value="1">PHARMACIE</option>
                                                <option value="2">PARAPHARMACIE</option>
                                                <option value="3">CENTRE MEDICAL</option>
                                                <option value="4">LABORATOIRE</option>
                                                <option value="5">AUTRE</option>
                                            </select>
                                        </div>

                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Nature</p>
                                            <select class="form-select" name="IDNATURE" id="filtreNature">
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Laboratoire</p>
                                            <select class="form-select" name="IDLABO" id="filtreLaboratoire">
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Statut</p>
                                            <select class="form-select" name="IDSTATUT" id="filtreStatut">
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Forme</p>
                                            <select class="form-select" name="IDFORME" id="filtreForme">
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-md-3 mb-2">
                                            <p class="mb-0 text-muted">Fournisseur</p>
                                            <select class="form-select" name="IDFSEUR" id="filtreFournisseur">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex justify-content-center flex-fill">
                                    <label class="btn btn-primary btn-wave w-100 d-flex align-items-center justify-content-center float-end mt-2" id="btnFiltreTable">
                                        <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">
                        <div class=" table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100 openModalProduit" id="tableDerniereRecption">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center text-white" data-column="action" data-class="text-center">
                                            <input class="form-check-input me-4" type="checkbox" id="checkSuiviAll">#
                                        </th>
                                        <th class="text-center text-white" data-column="CodeCipProduit1"
                                            data-class="text-start">
                                            CIP 1</th>
                                        <th class="text-center text-white" data-column="CodeCipProduit2"
                                            data-class="text-start">
                                            CIP 2</th>
                                        <th class="text-center text-white" data-column="CodeEanProduit"
                                            data-class="text-start">
                                            Code EAN</th>
                                        <th class="text-center text-white" data-column="CodeTedisProduit"
                                            data-class="text-start">
                                            Code Interne</th>
                                        <th class="text-center text-white" data-column="DesignationProduit"
                                            data-class="text-start">
                                            Désignation
                                        </th>
                                        <th class="text-center text-white" data-column="StockTotalPays"
                                            data-class="text-center">
                                            Stock Pays</th>
                                        <th class="text-center text-white" data-column="QuantiteCoursRouteProduit"
                                            data-class="text-center">Qté en Achat</th>
                                        <th class="text-center text-white" data-column="VM_Produit"
                                            data-class="text-center">VM
                                            Produit</th>
                                        <th class="text-center text-white" data-column="StockSurVM"
                                            data-class="text-center">
                                            Stock/VM</th>
                                        <th class="text-center text-white" data-column="LibelleStatutProduit"
                                            data-class="text-start">Statut</th>
                                        <th class="text-center text-white" data-column="LibelleCategorieRotation"
                                            data-class="text-center">Cat. ABC</th>
                                        <th class="text-center text-white" data-column="LibelleFamilleProduit"
                                            data-class="text-start">Famille</th>
                                        <th class="text-center text-white" data-column="LibelleFormeProduit"
                                            data-class="text-start">Forme</th>
                                        <th class="text-center text-white" data-column="LibelleCategorieProduit"
                                            data-class="text-start">Nature</th>
                                        <th class="text-center text-white" data-column="LibelleClasseTherapeutique"
                                            data-class="text-start">Classe <br> Thérapeutique</th>
                                        <th class="text-center text-white" data-column="ClassificationATC"
                                            data-class="text-center">Classification ATC</th>
                                        <th class="text-center text-white" data-column="LibelleRubriqueDouane"
                                            data-class="text-start">Rubrique <br> douanière</th>
                                        <th class="text-center text-white" data-column="CodeDroitDouane"
                                            data-class="text-center">
                                            Code <br> douane</th>
                                        <th class="text-center text-white" data-column="PrixAchatFHT"
                                            data-class="text-end">PFHT
                                        </th>
                                        <th class="text-center text-white" data-column="PrixGHT" data-class="text-end">
                                            PGHT</th>
                                        <th class="text-center text-white" data-column="PrixRevientHT"
                                            data-class="text-end">P.
                                            Revient HT</th>
                                        <th class="text-center text-white" data-column="PrixRevientHTMoyenPondere"
                                            data-class="text-end">PRMP</th>
                                        <th class="text-center text-white" data-column="TypeTva" data-class="text-end">
                                            TVA</th>
                                        <th class="text-center text-white" data-column="PrixCessionHT"
                                            data-class="text-end">P.
                                            Cession HT</th>
                                        <th class="text-center text-white" data-column="PrixCessionTTC"
                                            data-class="text-end">P.
                                            Cession TTC</th>
                                        <th class="text-center text-white" data-column="PrixVentePublicTTC"
                                            data-class="text-end">P. Public TTC</th>
                                        <th class="text-center text-white" data-column="ProduitPSY"
                                            data-class="text-center">PSY
                                        </th>
                                        <th class="text-center text-white" data-column="ProduitSociaux"
                                            data-class="text-center">P.
                                            Sociaux</th>
                                        <th class="text-center text-white" data-column="Liste1ou2"
                                            data-class="text-center">P.
                                            Liste</th>
                                        <th class="text-center text-white" data-column="ProduitANS"
                                            data-class="text-center">ANS
                                        </th>
                                        <th class="text-center text-white" data-column="NomBureauAchat"
                                            data-class="text-start">
                                            Bureau d'achat</th>
                                        <th class="text-center text-white" data-column="NomFournisseur"
                                            data-class="text-start">
                                            Fournisseur</th>
                                        <th class="text-center text-white" data-column="NomLaboratoire"
                                            data-class="text-start">
                                            Laboratoire</th>
                                        <th class="text-center text-white" data-column="ColisageProduit"
                                            data-class="text-center">
                                            Colisage</th>
                                        <th class="text-center text-white" data-column="NumeroBL"
                                            data-class="text-center">N° BL
                                        </th>
                                        <th class="text-center text-white" data-column="DateBL" data-class="text-center">
                                            Date BL
                                        </th>
                                        <th class="text-center text-white" data-column="AccordPeremption"
                                            data-class="text-center">
                                            ARP</th>
                                        <th class="text-center text-white" data-column="StockAvant"
                                            data-class="text-center">Stock
                                            avant</th>
                                        <th class="text-center text-white" data-column="QuantiteBL"
                                            data-class="text-center">Qté BL
                                        </th>
                                        <th class="text-center text-white" data-column="PFHTReception"
                                            data-class="text-end">
                                            PFHT Reception</th>
                                        <th class="text-center text-white" data-column="PGHTReception"
                                            data-class="text-end">
                                            PGHT Réception</th>
                                        <th class="text-center text-white" data-column="PrixRevientReception"
                                            data-class="text-end">Prix Revient reception</th>
                                        <th class="text-center text-white" data-column="PRMPReception"
                                            data-class="text-end">
                                            PRMP Reception</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade effect-slide-in-right" id="modalRealnce" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Relance de Réclamation</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-12 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Date de relance&nbsp;:</p>
                            <input type="date" class="form-control text-center" name="dateRelance"
                                id="dateRelance" />
                        </div>
                    </div>
                </div>
                <div class=" modal-footer d-block">


                    <div class="col-xl-12">
                        <button class="btn btn-success-light w-100" id="btnValiderRelance">
                            <i class='bx bxs-check-circle'></i>&nbsp;Valider la réclamation
                        </button>
                    </div>

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

    <div class="modal fade effect-scale" id="modalSaisiAvoir" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Relance de Réclamation</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="card">
                            <div class="card-body">
                                <div class=" row">
                                    <div class="col-xl-4">
                                        <div class=" row border border-danger  pb-2">
                                            <div
                                                class="col-xl-12 col-lg-12 flex-fill mt-0 pt-1 pb-1 text-center col-md-12 mb-2 bd-red">
                                                <p class="mb-0 text-white">Information de la facture Fournisseur</p>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Fournisseur</p>
                                                <select class="form-select" id="IDFSEUR_SUIVI" name="IDFSEUR_SUIVI">

                                                </select>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Facture disponible</p>
                                                <select class="form-select" id="FACTURE_SUIVI" name="FACTURE_SUIVI">

                                                </select>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">N° Ref Facture</p>
                                                <input type="text" class="form-control" id="NUM_FACT_SUIVI"
                                                    name="NUM_FACT_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Date </p>
                                                <input type="date" class="form-control" id="DATE_SUIVI"
                                                    name="DATE_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Montant </p>
                                                <input type="text" class="form-control" id="MONTANT_SUIVI"
                                                    name="MONTANT_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Solde </p>
                                                <input type="text" class="form-control" id="SOLDE_SUIVI"
                                                    name="SOLDE_SUIVI">
                                            </div>
                                            <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                                <p class="mb-0 text-muted">N° Pièce ou observations </p>
                                                <textarea name="" class="form-control" id="" cols="30" rows="5"></textarea>
                                            </div>
                                            <div class="col-xl-6">
                                                <button class=" btn btn-success-light w-100"
                                                    id="btnEnregistreReception"><i class='bx bxs-save'></i>&nbsp;
                                                    Enregistrer </button>
                                            </div>
                                            <div class="col-xl-6">
                                                <button class=" btn btn-danger w-100" id="btnValiderReception"><i
                                                        class='bx bxs-x-circle'></i>&nbsp;
                                                    Annuler</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-8">
                                        <div class="row mb-2">

                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Réclamation</p>
                                                <select class="form-select" id="IDRECLAMTION_SUIVI"
                                                    name="IDRECLAMTION_SUIVI">
                                                    <option value="">
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Débit</p>
                                                <input type="text" class="form-control" id="DEBIT_SUIVI"
                                                    name="DEBIT_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Crédit</p>
                                                <input type="text" class="form-control" id="CREDI_SUIVI"
                                                    name="SOLDE_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Solde</p>
                                                <input type="text" class="form-control" id="SOLDE_SUIVI"
                                                    name="SOLDE_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Montant</p>
                                                <input type="text" class="form-control" id="MONTANT_SUIVI"
                                                    name="MONTANT_SUIVI">
                                            </div>
                                            <div class=" col-xl-2 d-flex justify-content-center align-items-end">
                                                <button class=" btn btn-success-light w-100" id="btnEnregistreReception">
                                                    <i class='bx bx-check-circle fs-14'></i>
                                                </button>
                                            </div>
                                            <div class=" col-xl-2 d-flex justify-content-center align-items-end">

                                                <button class=" btn btn-danger w-100" id="btnValiderReception">
                                                    <i class='bx bxs-x-circle fs-14'></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class=" table-responsive">
                                            <table class="tablehover table table-striped text-nowrap w-100" id="tableListeSuivi">
                                                <thead class="table-header-primary">
                                                    <tr>
                                                        <th class="text-center text-white">
                                                            <input class="form-check-input me-4" type="checkbox"
                                                                id="checkSuiviAll">#
                                                        </th>
                                                        <th class="text-center text-white">Date</th>
                                                        <th class="text-center text-white">N° à Rappeler</th>
                                                        <th class="text-center text-white">Débit</th>
                                                        <th class="text-center text-white">Credit</th>
                                                        <th class="text-center text-white">Montant réglé</th>
                                                        <th class="text-center text-white">Solde</th>

                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {
            dateRangeInput('input[name="filtrePeriode"]', 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": 1
            //     },
            // });
        })


        function listeFiltre() {

            $.ajax({

                url: "{{ route('produits.listeFiltre') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    // console.log(response)

                    $("#filtreFamille").html("")
                    $("#filtreNature").html("")
                    $("#filtreLaboratoire").html("")
                    $("#filtreStatut").html("")
                    $("#filtreForme").html("")
                    $("#filtreFournisseur").html("")


                    $("#filtreFamille").append("<option value='0'>TOUTES</option>")
                    $("#filtreNature").append("<option value='0'>TOUTES</option>")
                    $("#filtreLaboratoire").append("<option value='0'>TOUTES</option>")
                    $("#filtreStatut").append("<option value='0'>TOUTES</option>")
                    $("#filtreForme").append("<option value='0'>TOUTES</option>")
                    $("#filtreFournisseur").append("<option value='0'>TOUTES</option>")

                    $.each(response.listeFamille, function(key, value) {
                        $("#filtreFamille").append(
                            `<option value="${value.IDFAMILLEPRODUIT}">${value.LibelleFamilleProduit}</option>`
                        )
                    })
                    $.each(response.listeNature, function(key, value) {
                        $("#filtreNature").append(
                            `<option value="${value.IDCATEGORIEPRODUIT}">${value.LibelleCategorieProduit}</option>`
                        )
                    })
                    $.each(response.listeLaboratoire, function(key, value) {
                        $("#filtreLaboratoire").append(
                            `<option value="${value.IDLABORATOIRE}">${value.NomLaboratoire}</option>`
                        )
                    })
                    $.each(response.listeStatut, function(key, value) {
                        $("#filtreStatut").append(
                            `<option value="${value.IDSTATUTPRODUIT}">${value.LibelleStatutProduit}</option>`
                        )
                    })
                    $.each(response.listeForme, function(key, value) {
                        $("#filtreForme").append(
                            `<option value="${value.IDFORMEPRODUIT}">${value.LibelleFormeProduit}</option>`
                        )
                    })
                    $.each(response.listeFournisseur, function(key, value) {
                        $("#filtreFournisseur").append(
                            `<option value="${value.IDFOURNISSEUR}">${value.NomFournisseur}</option>`
                        )
                    })

                    $('#filtreFournisseur').select2()
                    $('#IDPRINCIPEACTIF').select2()
                    $('#filtreLaboratoire').select2()
                },
                error: function(response, statut, error) {
                    console.log(response)
                }
            })
        }

        listeFiltre()


        var tableDerniereRecption = $("#tableDerniereRecption").DataTable({
            language: languageTable,
       
            // pagingType: 'full_numbers',
            pageLength: 10,
            lengthChange: true,
            // order: [5, "desc"],
        })
            divShowPer = $('#tableDerniereRecption_length')
                let BroDivShowPer = divShowPer.parent().parent()

                let search = BroDivShowPer.children().eq(1).removeClass('col-md-6')
                    search.addClass('col-md-4')
                let child = BroDivShowPer.children().eq(0).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-histo-reception" class="fw-bold" style="cursor : pointer;">Exporter</span>
                        </span>
                `
                )

            placeboutonPreferenceColonne('tableDerniereRecption','DerniereRecptionShowColonne')
            recuperationPreferenceColonneUtilisateur('tableDerniereRecption','DerniereRecptionShowColonne')
        

            $(document).on('click', '.DerniereRecptionShowColonne', function() {
                    appliquerPreferenceColonne('tableDerniereRecption','Reclamation-client',$(this),'DerniereRecptionShowColonne')
            })

        // document.getElementById("modalRetourValide").addEventListener('hidden.bs.modal', function(e) {
        //     let removeClass = this.classList.value.match(/(^|\s)effect-\S+/g);
        //     removeClass = removeClass[0].trim();
        //     this.classList.remove(removeClass);
        // });
    </script>

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


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

            var data

            _('checkSuiviAll').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableListeSuiviRembourssement.rows().nodes()
                $(lignes).find('#checkSuivi').prop('checked', value)
            })

            function listeLigneBonAttenteSelectionne() {

                let dataIdLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableListeSuiviRembourssement.rows().nodes()

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

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

            function listeLastRecption(data) {
                $.ajax({
                    url: "{{ route('HDR.getListe') }}",
                    type: 'POST',
                    data: data,
                    beforeSend: progressHandler(),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            let columns = [];
                            $('#tableDerniereRecption thead th').each(function() {
                                let dataColumn = $(this).data('column');
                                if (dataColumn) {
                                    columns.push({
                                        data: dataColumn,
                                        className: $(this).data('class') + " text-black"
                                    });
                                }
                            });

                            $('#tableDerniereRecption').DataTable().destroy();
                            $('#tableDerniereRecption').DataTable({
                                bFilter: true,
                                language: languageTable,
                                data: response.donne,
                                columns: columns,
                                order: []
                            });

                            divShowPer = $('#tableDerniereRecption_length')
                                let BroDivShowPer = divShowPer.parent().parent()

                                let search = BroDivShowPer.children().eq(1).removeClass('col-md-6')
                                    search.addClass('col-md-4')
                                let child = BroDivShowPer.children().eq(0).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-histo-reception" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                        </span>
                                `
                                )
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function genererPDF(value) {
                // Créez un objet blob à partir du PDF en base64
                var blob = b64toBlob(value, 'application/pdf');
                // Créez un objet URL pour le blob
                var blobUrl = URL.createObjectURL(blob);
                // Créez une fenêtre d'impression avec l'URL du blob
                // window.open(blobUrl);
                var printWindow = window.open(blobUrl);
            }

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