@extends('models')
@section('titre-page', 'Pack promos')
@section('content-body')
    <style>
        .swal2-container {
            z-index: 99999999999999999999999999999999999 !important;
        }
    </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 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Pack promos</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6">
                    <div class="d-flex">
                        <div class="col-xl-6 mt-md-0 mt-3 m-0 d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex" id="bntNewCampagnePack">
                                <i class=" ri ri-add-circle-line me-1"></i>Nouvelle campagne
                            </button>
                        </div>
                        <div class="col-xl-3 mt-md-0 mt-3 m-0 d-flex justify-content-center">
                            <div class="btn-group" style="margin-top : 1px;">
                                <button type="button" class="btn btn-primary-light dropdown-toggle"
                                    data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                    Autres actions
                                </button>
                                <ul class="dropdown-menu">

                                    {{-- <li>
                                    <hr class="dropdown-divider">
                                </li> --}}

                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnGenereReclamation">
                                            Générer les réclamations des packs promos selectionnés
                                        </a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnExportExcel">
                                            Exporter en excel
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 mt-md-0 mt-3 m-0">
                            {{-- <button type="button" class="btn btn-warning-light d-flex w-100 justify-content-center" id="bntModalNewClient" style="font-size:15px">
                            <i class="ri-printer-line me-2"></i>Imprimer
                        </button> --}}

                            <div class="btn-group" style="margin-top : 1px;">
                                <button type="button" class="btn btn-warning-light dropdown-toggle w-100"
                                    data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                    <i class="ri-printer-line me-2"></i> Imprimer
                                </button>
                                <ul class="dropdown-menu">

                                    {{-- <li>
                                    <hr class="dropdown-divider">
                                </li> --}}
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="imprim_pack_promo">
                                            La liste des promos
                                        </a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="imprim_pack_promo_enCours">
                                            Les factures des packs promos en cours
                                        </a>
                                    </li>
                                </ul>
                            </div>

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

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header py-2">
                    <div class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-3 col-md-3">
                                <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-md-2">
                                <p class="mb-0 text-muted">Type de campagne&nbsp;:</p>
                                <select class="form-select" id="typeCampagne" name="typeCampagne">
                                    <option value="1">LABORATOIRE</option>
                                    <option value="2">INTERNE</option>
                                    <option value="0">TOUS</option>
                                </select>
                            </div>
                            <div class="col-xl-2 col-md-4">
                                <p class="mb-0 text-muted">Laboratoire&nbsp;:</p>
                                <select class="js-example-basic-single form-select Pselect2" id="IDLABORATOIRE"
                                    name="IDLABORATOIRE">

                                </select>
                            </div>
                            <div class="col-xl-3 col-md-4">
                                <p class="mb-0 text-muted">Produit&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDPRODUIT" name="IDPRODUIT">

                                </select>
                            </div>
                            <div class="col-xl-1 p-0 pt-3">
                                <div class="card pt-0" style="height:35px;">
                                    <div class="card-body d-flex pt-2">
                                        <input type="checkbox" class="form-check-input me-2" value="false" type="checkbox"
                                            name="actif" id="actif" />
                                        <p class="form-check-label" for="actif" style="cursor:pointer;">Actif</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave mt-2 float-end" id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tablePackPromo">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        {{-- <input class="form-check-input me-4" type="checkbox" id="checkSelectAll"> --}}
                                        <input class="form-check-input me-3"
                                            style="height : 15px; width:15px;cursor : pointer;margin-left:-20px"
                                            type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">N° Pack Promo</th>
                                    <th class="text-center colTable">Date début</th>
                                    <th class="text-center colTable">Date fin</th>
                                    <th class="text-center colTable">Type campagne</th>
                                    <th class="text-center colTable">Libellé du pack</th>
                                    <th class="text-center colTable">Laboratoire</th>
                                    <th class="text-center colTable">Suspendue</th>
                                    <th class="text-center colTable d-none">ID</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalNewCampagnePack" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Nouvelle campagne</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row px-2 py-0 mb-1">
                        <div class="card shadow-sm bg-white rounded py-1">
                            <div class="card-body row py-1">
                                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 px-0 justify-content-betwen d-flex mb-2"
                                    style="border-right : 1px dashed grey;">
                                    <span>Nbre de produits : </span> &nbsp;
                                    <span id="nbreProduit" class="fw-bold">0</span>
                                </div>
                                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 d-flex pe-xl-3 mb-2"
                                    style="border-right : 1px dashed grey;">
                                    <span>Total qté cmdée &nbsp;:&nbsp;</span>
                                    <span id="totalQteCmde" class="fw-bold ellipsis">0</span>
                                </div>
                                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 d-flex pe-xl-3 mb-2"
                                    style="border-right : 1px dashed grey;">
                                    <span>Total qté UG : </span>&nbsp;
                                    <span id="totalQteUg" class="fw-bold">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card border border-danger custom-card rounded-0 pb-1">
                        <div class="card-header rounded-0 d-flex py-1 ps-3" style="background:  #F22A1E !important;">
                            <span class="text-light text-center fs-14 fw-bold">Infos de la campagne</span>
                        </div>
                        <div class="card-body pt-1 pb-0">
                            <form id="formCAMPAGNEUG">
                                <div class="row px-2 py-0 mb-1">
                                    <input type="number" id="IDPACKPROMO" name="IDPACKPROMO" hidden>
                                    <input type="text" id="update" name="update" value="false" hidden>

                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2">
                                        <p class="mb-0 text-muted">Type de campagne&nbsp;:</p>
                                        <select class="form-select" id="ModalTypeCampagne" name="ModalTypeCampagne">
                                            <option value="1">LABORATOIRE</option>
                                            <option value="2">TEDIS PHARMA</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2">
                                        <p class="mb-0 text-muted">Mode de campagne&nbsp;:</p>
                                        <select class="form-select" id="ModalModeCampagne" name="ModalModeCampagne">
                                            <option value="1">UNITÉ GRATUITE</option>
                                            <option value="2">REMISE</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2">
                                        <p class="mb-0 text-muted">Libellé du pack :</p>
                                        <input type="text" class="form-control text-center text-uppercase"
                                            name="libellePack" id="libellePack" autocomplete="false" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2">
                                        <p class="mb-0 text-muted">Laboratoire&nbsp;:</p>
                                        <select class="js-example-basic-single form-select" id="modalIDLABORATOIRE"
                                            name="modalIDLABORATOIRE">

                                        </select>
                                    </div>
                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2">
                                        <p class="mb-0 text-muted">Période de campagne&nbsp;:</p>
                                        <input type="text" class="form-control text-center" name="datetimes"
                                            id="periodeCampagne" />
                                    </div>
                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-xl-0 mb-md-2 p-0 pt-3 px-2 px-2">
                                        <div class="card pt-0 mx-1" style="height:35px;">
                                            <div class="card-body d-flex pt-2">
                                                <input type="checkbox" class="form-check-input me-2" type="checkbox"
                                                    value="false" name="suspendre" id="suspendre" />
                                                <p class="form-check-label" for="suspendre" style="cursor:pointer;">
                                                    <label for="suspendre">Suspendre</label>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>


                    <div class="row">

                        <div class="col-xl-8">
                            <div class="row mb-1">
                                <div class="col-xl-5">
                                    <label class="">Liste des produits</label>
                                    <select class="js-example-basic-single form-select" id="modalIDPRODUIT"
                                        name="modalIDPRODUIT">

                                    </select>
                                </div>
                                <div class="col-xl-3">
                                    <label for="">Quantité commandée</label>
                                    <input type="text" class="form-control text-center" name="qteCmde" id="qteCmde"
                                        autocomplete="false" value="0" />
                                </div>
                                <div class="col-xl-3">
                                    <label for="" id="libelleUG">Quantité UG</label>
                                    <input type="text" class="form-control text-center" name="qteUg" id="qteUg"
                                        autocomplete="false" value="0" />
                                </div>
                                <div class="col-xl-1 px-0 pt-3">
                                    <button class="btn btn-secondary-light btn-wave" style="height:37px"
                                        title="Ajouter un produit" id="btnModalNewPack">
                                        <i class=" ri ri-add-circle-line me-1"></i>

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

                            <div class="table-responsive">

                                <table class="tablehover table table-striped text-nowrap w-100" id="tablePackLigne">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center" data-column="" data-orderable="false">Actions</th>
                                            <th class="text-center" data-column="">Produit</th>
                                            <th class="text-center" data-column="" data-orderable="false">Qté commandée
                                            </th>
                                            <th class="text-center" data-column="" data-orderable="false" id='thUG'>Qté gratuite
                                            </th>
                                            <th class="text-center" data-column="" data-orderable="false">Supendue</th>
                                        </tr>
                                    </thead>
                                </table>

                            </div>
                        </div>

                        <div class="col-xl-4">
                            <div class="row g-2 mb-2">
                                <div class="col-xl-9">
                                    <p class="mb-0 text-muted">Catégorie client : </p>
                                    <select class="form-select" name="" id="categorieClient"></select>
                                </div>
                                <div class="col-xl-3 mt-4">
                                    <button class="btn btn-secondary-light btn-wave w-100" title="Ajouter une catégorié"
                                        style="height:37px" id="btnAddCategoriePack">
                                        <i class=" ri ri-add-circle-line me-1"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive w-100">
                                <table class="tablehover table table-striped text-nowrap w-100"
                                    id="tableCategoriePackLigne">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center" data-orderable="false">Actions</th>
                                            <th class="text-center">Catégorie client</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>



                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <i class='bx bxs-x-circle'></i> Fermer
                    </button>
                    <button type="button" class="btn btn-success btnValide" id="btnNewPack">
                        <i class='bx bxs-plus-circle'></i> Ajouter
                    </button>
                    <button type="button" class="btn btn-warning btnValide" id="btnEditPack" hidden>
                        <i class="bx bx-edit fs-6 me-1"></i> Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Debut de modal du Facture -->
    <div class="modal fade " id="modalListeFacture" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Liste des factures </h3>
                    <button class="btn-close" type="button" id="fermeValidation" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="tableCmdePack">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th data-orderable="false">
                                                {{-- <input class="form-check-input me-4" type="checkbox" id="checkSelectAll"> --}}
                                                Actions
                                            </th>
                                            <th class="text-center colTable">Date facture</th>
                                            <th class="text-center colTable">N° facture</th>
                                            <th class="text-center colTable">Client</th>
                                            <th class="text-center colTable">Produit</th>
                                            <th class="text-center colTable">Qté facturée</th>
                                            <th class="text-center colTable">Qté UG</th>
                                            <th class="text-center colTable">P. Cession HT</th>
                                            <th class="text-center colTable">To remise</th>
                                            <th class="text-center colTable">Remise</th>
                                            <th class="text-center colTable">Total TTC</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin de modal du PDF -->

    {{-- DETAIL PACK PROMO --}}

    <div class="modal fade " id="modal_detailPackPromo" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Etat récapitulatif des packs promo </h3>
                    <button class="btn-close" type="button" id="fermeValidation" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card custom-card">
                        <div class="card-body">

                            <div class="row">

                                <div class="col-xl-3">

                                    <div class="card custom-card border-top-card border-top-primary rounded-0">
                                        <div class="card-body p-3 py-2">
                                            <div class="text-center">
                                                <p class="fs-14 text-muted mb-1">Quantité Facturée</p>
                                                <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                    <div class="mb-0 fw-semibold" id="T_QteFacturePackPromo">0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-xl-3">
                                    <div class="card custom-card border-top-card border-top-primary rounded-0">
                                        <div class="card-body p-3 py-2">
                                            <div class="text-center">
                                                <p class="fs-14 text-muted mb-1">Quantité Unité Gratuite</p>
                                                <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                    <div class="mb-0 fw-semibold" id="T_QteUGPackPromo">0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3">
                                    <div class="card custom-card border-top-card border-top-primary rounded-0">
                                        <div class="card-body p-3 py-2">
                                            <div class="text-center">
                                                <p class="fs-14 text-muted mb-1">Remise</p>
                                                <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                    <div class="mb-0 fw-semibold" id="T_RemisePackPromo">0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3">
                                    <div class="card custom-card border-top-card border-top-primary rounded-0">
                                        <div class="card-body p-3 py-2">
                                            <div class="text-center">
                                                <p class="fs-14 text-muted mb-1">Total TTC</p>
                                                <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                    <div class="mb-0 fw-semibold" id="T_totalTTcPackPromo">0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <input type="text" id="Idpack_hidden" hidden>
                            <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="tabledetailPack">
                                    <thead class="table-header-primary">
                                        <tr>

                                            <th class="text-center colTable">Date facture</th>
                                            <th class="text-center colTable">N° facture</th>
                                            <th class="text-center colTable">Client</th>
                                            <th class="text-center colTable">Produit</th>
                                            <th class="text-center colTable">Qté facturée</th>
                                            <th class="text-center colTable">Qté UG</th>
                                            <th class="text-center colTable">P. Cession HT</th>
                                            <th class="text-center colTable">Remise %</th>
                                            <th class="text-center colTable">Montant Remise</th>
                                            <th class="text-center colTable">Total TTC</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Imprimer les états -->
    <div class="modal fade" id="modalEtatPrint" tabindex="-1" aria-labelledby="exampleModalSmLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel">Choix des Etats
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkReclame"
                            value="1" checked>
                        <label class="form-check-label" for="checkReclame">
                            Bon de réclamation
                        </label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkAvis"
                            value="2">
                        <label class="form-check-label" for="checkAvis">
                            Avis de réclamation
                        </label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkAll"
                            value="3">
                        <label class="form-check-label" for="checkAll">
                            Bon de réclamation <br> + Avis de réclamation
                        </label>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <button class="btn btn-warning-light w-100 fs-18" id="btnValideImprime">
                        <i class='bx bxs-printer mt-1 me-1'></i></i> Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')

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

        $(document).ready(function() {
            var tableIDPRODUIT = []
            var tblDonne = []
            var tblProduit = []
            var tabPrintReclamationID = []

            var tablePackPromo = $('#tablePackPromo').DataTable({
                language: languageTable,
                pageLength: 10,
                lengthChange: false,
                columnDefs: [{
                        targets: [0, 1, 2, 3, 7], // Les index des colonnes à centrer (commencent à 0)
                        className: 'text-center' // Classe CSS pour centrer le texte
                    },
                    {
                        targets: [8], // Les index des colonnes à centrer (commencent à 0)
                        visible: false // Classe CSS pour centrer le texte
                    }
                    // Ajoutez d'autres objets pour chaque colonne à formater
                ]
            })

            var tableCmdePack = $('#tableCmdePack').DataTable({

                bFilter: false,
                language: languageTable,
                pageLength: 10,
                lengthChange: false,
                columnDefs: [{
                        targets: [0, 2], // Les index des colonnes à centrer (commencent à 0)
                        className: 'text-center' // Classe CSS pour centrer le texte
                    }
                    // Ajoutez d'autres objets pour chaque colonne à formater
                ]
            })

            let tabledetailPack = $('#tabledetailPack').DataTable({
                language: languageTable,
                pageLength: 10,
                lengthChange: false,
                columnDefs: [{
                        targets: [0, 2, 4, 5, 7], // Les index des colonnes à centrer (commencent à 0)
                        className: 'text-center' // Classe CSS pour centrer le texte
                    },
                    {
                        targets: [6, 8, 9], // Les index des colonnes à centrer (commencent à 0)
                        className: 'text-end' // Classe CSS pour centrer le texte
                    }
                    // Ajoutez d'autres objets pour chaque colonne à formater
                ]
            })

            let tablePackLigneTab = $('#tablePackLigne').DataTable({
                language: languageTable,
                pageLength: 10,
                lengthChange: false,

            })

            let tableCategoriePackLigne = $('#tableCategoriePackLigne').DataTable({
                language: languageTable,
                pageLength: 10,
                lengthChange: false,

            })


            fixe_elements_on_headers_tab('tabledetailPack', `<div class="d-flex w-25">
               <div class="mt-1"> Agence&nbsp;:&nbsp; </div>
               <select class="form-select" id="Agence_pack_promo" name=""/>
                             <option value="0">TOUS LES PRODUITS</option>
                             </select> 
                </div>
        `)

            listingComboAgence('#Agence_pack_promo')



            $("#checkSelectAll").click(function() {
                var isChecked = $(this).is(':checked');
                let lignes = tablePackPromo.rows().nodes()
                $(lignes).find('#checkSelectLigne').prop('checked', isChecked)
            });

            $('#imprim_pack_promo_enCours').on('click', function() {
                var tableau = listeLigneSelectionne("#tablePackPromo", '#checkSelectLigne');

                if (tableau.length == 0) {
                    notif('warning', 'Attention', 'Veuillez sélectionner des lignes à imprimer')
                    return false;
                }
                var periode = dissocierDate($('#filtrePeriode').val())
                var dateDeb = periode[0];
                var dateFin = periode[1];
                generation_pdf_sans_telechargement_base4('{{ route('pack_promo_enCours.print') }}', {
                    IDAGENCE: $("#idSiteEnCours").val(),
                    PeriodeDebut: dateDeb,
                    PeriodeFin: dateFin,
                    tab_pack_promo: tableau
                })
            })


            $('#imprim_pack_promo').on('click', function() {
                var tableau = listeLigneSelectionne("#tablePackPromo", '#checkSelectLigne');

                if (tableau.length == 0) {
                    notif('warning', 'Attention', 'Veuillez sélectionner des lignes à imprimer')
                    return false;
                }

                var periode = dissocierDate($('#filtrePeriode').val())
                var dateDeb = periode[0];
                var dateFin = periode[1];
                generation_pdf_sans_telechargement_base4('{{ route('pack_promo.liste.print') }}', {
                    IDAGENCE: $("#idSiteEnCours").val(),
                    PeriodeDebut: dateDeb,
                    PeriodeFin: dateFin,
                    tab_pack_promo: tableau
                })

            })


            $('#modalNewCampagnePack').on('hidden.bs.modal', function() {
                resetForm()
                $("#btnNewPack").removeAttr("hidden")
                $("#btnEditPack").removeAttr("hidden")
                tablePackLigne = []
                tblProduit = []
                $("#btnEditPack").attr("hidden", "hidden")
                $("#modalIDLABORATOIRE").val("").change()
                $("#modalIDPRODUIT").val("").change()
                $("#categorieClient").val("").change()
                // $("#tablePackLigne tbody").html("")
                // $("#tableCategoriePackLigne tbody").html("")
                // tabledetailPack
                tablePackLigneTab.clear().draw()
                tableCategoriePackLigne.clear().draw()
                $("#libellePack").val("")
                $("#nbreProduit").text("0")
                $("#totalQteCmde").text("0")
                $("#totalQteUg").text("0")
                $("#qteCmde").val("0")
                $("#qteUg").val("0")
            });

            $('#modalNewCampagnePack').modal({
                backdrop: 'static',
                keyboard: false
            });

            $("#modalNewCampagnePack").on("click", "input[type=checkbox]", function() {
                if ($(this).is(':checked')) {
                    $(this).val(true)
                } else {
                    $(this).val(false)
                }
            })

            $("#modalNewCampagnePack").on("focus", "input[type=text]", function() {
                $(this).select()
            })

            chargerSelectLaboratoire()
            chargerSelectProduit()
            chargerSelectProduitParLabo($("#modalIDLABORATOIRE").val())
            listePackPromo($("#filtrePeriode").val(), $("#IDLABORATOIRE").val(), $("#actif").val(), $("#IDPRODUIT")
                .val(), $("#typeCampagne").val())

            $("#btnFiltreTable").click(function() {
                listePackPromo($("#filtrePeriode").val(), $("#IDLABORATOIRE").val(), $("#actif").val(), $(
                    "#IDPRODUIT").val(), $("#typeCampagne").val())
            })

            $("#tablePackPromo tbody tr").on("click", "td:eq(1)", function() {
                PackSelec = $(this).children().eq(1).children().attr("data-id")
            })

            $("#bntNewCampagnePack").click(function() {
                $("#modalNewCampagnePack").modal("show")
            })

            $("#modalIDLABORATOIRE").change(function() {
                chargerSelectProduitModal($("#modalIDLABORATOIRE").val())
            })

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

                if ($.trim($("#libellePack").val()) == "") {
                    notif("warning", "Attention", "Veuillez saisir le libéllé du pack !!")
                    return 0
                }

                if ($("#modalIDLABORATOIRE").val() == "0") {
                    notif("warning", "Attention", "Veuillez choisir un laboratoire !!")
                    return 0
                }

                if ($("#modalIDPRODUIT").val() == "0") {
                    notif("warning", "Attention", "Veuillez choisir un produit !!")
                    return 0
                }

                if ($("#qteCmde").val() == "0" || $.trim($("#qteCmde").val()) == "") {
                    notif("warning", "Attention", "Veuillez saisir une quantité supérieur à 0 !!")
                    return 0
                }

                tblProduit.push({
                    IDPRODUIT: $("#modalIDPRODUIT").val(),
                    QteUniteGratuitePackPromo: $("#qteUg").val(),
                    QteAffecteePackPromo: $("#qteCmde").val(),
                    DesignationProduit: $("#modalIDPRODUIT option:selected").text(),
                    traitement: "create",
                    PackPromoLigneSuspendue: false,
                })
                // console.log(tblProduit)
                listProduit(tblProduit)
            })

            $(document).on("click", ".btnValide", function(evt) {
                if ($.trim($("#libellePack").val()) == "") {
                    notif("warning", "Attention", "Veuillez saisir le libéllé du pack !!")
                    return 0
                }

                if ($("#modalIDLABORATOIRE").val() == "0") {
                    notif("warning", "Attention", "Veuillez choisir un laboratoire !!")
                    return 0
                }

                if (evt.target.id != "btnEditPack") {
                    if ($("#modalIDPRODUIT").val() == "0") {
                        notif("warning", "Attention", "Veuillez choisir un produit !!")
                        return 0
                    }
                }

                if (tblProduit.length <= 0) {
                    notif("warning", "Attention", "Veuillez Ajouter des produits au pack !!")
                    return 0
                }
                // confirmMdp("{{ csrf_token() }}", 
                $.ajax({
                    url: '{{ route('validePackPromo') }}',
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        PeriodeCampagne: $("#periodeCampagne").val(),
                        IDPACKPROMO: $("#IDPACKPROMO").val(),
                        TypeCampagne: $("#ModalTypeCampagne").val(),
                        ModeCampagne: $("#ModalModeCampagne").val(),
                        IDLABORATOIRE: $("#modalIDLABORATOIRE").val(),
                        LibellePack: $("#libellePack").val(),
                        Suspendre: $("#suspendre").val(),
                        update: $("#update").val(),
                        produit: tblProduit,
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {

                            resetForm()
                            $("#modalNewCampagnePack").modal("hide")
                            listePackPromo(
                                $("#filtrePeriode").val(),
                                $("#IDLABORATOIRE").val(),
                                $("#actif").val(),
                                $("#IDPRODUIT").val(),
                                $("#typeCampagne").val()
                            )

                            notif("success", "Félicitations", response.messages)
                        }
                        if (response.error == true) {
                            notif("warning", "Attention", response.messages)
                        }
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
                // )
            })

            $("#tablePackLigne").on("change", "#listeQteCmde", function() {
                var indice = $(this).attr("data-key")
                tblProduit[indice].QteAffecteePackPromo = $(this).val()
                listProduit(tblProduit)
            })

            $("#tablePackLigne").on("change", "#listeQteUg", function() {
                var indice = $(this).attr("data-key")
                tblProduit[indice].QteUniteGratuitePackPromo = $(this).val()
                listProduit(tblProduit)
            })

            $("#tablePackLigne").on("click", ".btn-trash", function() {
                var indice = parseInt($(this).attr("data-key"))
                let donnee = tblProduit[indice]

                if (donnee.traitement == "create") {

                    tblProduit.splice(indice, 1)
                    listProduit(tblProduit)

                    return 0
                }

                if (donnee.traitement == "update") {

                    $.ajax({
                        url: '{{ route('deleteProduitPack') }}',
                        type: 'POST',
                        data: {
                            IDPACKPROMO_LIGNE: donnee.IDPACKPROMO_LIGNE,
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.error == false) {
                                if (response.etat == false) {
                                    tblProduit[indice].traitement = "delete"
                                    listProduit(tblProduit)
                                } else {
                                    notif("warning", "Attention",
                                        "Ce produit ne peut être supprimé !!")
                                }
                            }
                        },
                        error: function(response) {
                            notifError(response.messages)
                        }
                    })
                }
            })

            // modifier un pack promo
            $("#tablePackPromo").on("click", '.btn-edit', function() {
                var IDPACKPROMO = $(this).attr("data-pack")
                $("#Idpack_hidden").val(IDPACKPROMO)

                $.ajax({
                    url: '{{ route('detailPackPromo') }}',
                    type: 'GET',
                    data: {
                        IDPACKPROMO: IDPACKPROMO,
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            listePack = response.listePack[0]
                            $("#IDPACKPROMO").val(listePack.IDPACKPROMO)
                            $("#ModalTypeCampagne").val(listePack.TypeCampagne).change()
                            $("#ModalModeCampagne").val(listePack.ModePack).change()

                            if(listePack.ModePack == 2){
                                $("#thUG").text("Remise en %")
                                $("#libelleUG").text("Remise en %")
                            }else{
                                $("#thUG").text("Qté gratuite")
                                $("#libelleUG").text("Quantité UG")
                            }
                            $("#libellePack").val(listePack.NomPackPromo)
                            $("#modalIDLABORATOIRE").val(listePack.IDLABORATOIRE).change()
                            $("#periodeCampagne").val(explodeDate(listePack
                                .DateDebutPackPromo) + " - " + explodeDate(listePack
                                .DateFinPackPromo)).change()
                            $("#suspendre").val(listePack.SuspendrePackPromo)
                            if (listePack.SuspendrePackPromo == true) $("#suspendre").prop("checked")

                            listePackPromoLigne(IDPACKPROMO)
                            $("#btnNewPack").attr("hidden", "hidden")
                            $("#btnEditPack").removeAttr("hidden")
                            $("#update").val("true")

                            recuperation_pack_promo_categorie(IDPACKPROMO)

                            $("#modalNewCampagnePack").modal("show")
                        }
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            $(document).on("change", "#ModalModeCampagne", function() {
                if($(this).val() == 2){
                    $("#thUG").text("Remise en %")
                    $("#libelleUG").text("Remise en %")
                }else{
                    $("#thUG").text("Qté gratuite")
                    $("#libelleUG").text("Quantité UG")
                }
            })

            $("#tablePackPromo").on("click", '.btn-detail', function() {
                var IDPACKPROMO = $(this).attr("data-pack")
                listeFacturePackPromo($("#idSiteEnCours").val(), $("#filtrePeriode").val(), IDPACKPROMO)
            })


            $(document).on('click', '#btn-detail', function() {
                var idPack = $(this).data('id')
                $("#Idpack_hidden").val(idPack)
                recuperation_detail_pack_promo(idPack, $("#idSiteEnCours").val(), null)
            })

            $(document).on('change', '#Agence_pack_promo', function() {
                var idAgence = $(this).val()
                recuperation_detail_pack_promo($("#Idpack_hidden").val(), idAgence, 1)
            })


            $(document).on('click', '#btnGenereReclamation', function() {
                var tableau = listeLigneSelectionne("#tablePackPromo", '#checkSelectLigne');

                if (tableau.length == 0) {
                    notif('warning', 'Attention', 'Veuillez sélectionner des lignes à imprimer')
                    return false;
                }

                if (tableau.length > 1) {
                    notif('warning', 'Attention',
                        'Veuillez sélectionner une seule ligne Pour la reclamation')
                    return false;
                }

                if ($("#idSiteEnCours").val() != 1) {
                    notif('warning', 'Attention',
                        'Une Réclamation de Pack PROMO n\'est possible que sur l\'Agence Centrale !')
                    return false;
                }
                table = $('#tablePackPromo').DataTable();

                var idRecherche = tableau[0];
                var colonneIndex = 8;

                var row = table.rows().indexes().filter(function(idx) {
                    return table.cell(idx, colonneIndex).data() == idRecherche;
                });

                var rowData = table.row(row[0]).data();

                var day = new Date().getDate().toString().padStart(2, '0');
                var month = (new Date().getMonth() + 1).toString().padStart(2, '0');
                var years = new Date().getFullYear();
                var today = years + '-' + month + '-' + day;

                let [dayx, monthx, yearsx] = rowData[3].split("/");
                // on construit dans le format souhaité
                let date_fin = yearsx + '-' + monthx + '-' + dayx;

                if (new Date(date_fin) > new Date(today)) {
                    {{-- n° "+rowData[1]+" --}}
                    Swal.fire({

                        title: 'Êtes-vous sûrs ?',
                        text: "Attention','La date de fin de la Camapgne UG  n\'est pas encore atteinte ! Voulez-vous réclamer la campagne ?",
                        icon: 'warning',
                        showCancelButton: true,
                        customClass: {
                            confirmButton: 'btn btn-danger ms-2'
                        },
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Oui',
                        cancelButtonText: 'Non'

                    }).then((result) => {

                        if (result.isConfirmed) {
                            reclamation_client(tableau)
                        }

                    })
                } else {
                    reclamation_client(tableau)
                }

            })

            $('#btnValideImprime').on('click', function() {

                $.ajax({
                    url: "{{ route('getImprimDocReclamation') }}",
                    type: 'POST',
                    data: {
                        type: $("input[name=primaryRadio]:checked").val(),
                        data: [tabPrintReclamationID],
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notif("warning", "Attention", "Aucun donnée trouvée !!")
                                return 0
                            }
                            $.each(response.tablePDF, function(key, value) {
                                // var pdfBase64 = response.tablePDF;
                                genererPDF(value)
                            })
                            $("#modalEtatPrint").modal("hide")
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            var IDPACKPROMOINPUT = ""

            $("#tablePackPromo").on("click", '.btn-trash', function() {
                IDPACKPROMOINPUT = $(this).attr("data-pack")
                confirmMdp("{{ csrf_token() }}", traitementDelete)
            })

            $(document).on("click", '#actif', function() {
                if($(this).is(":checked")) $(this).val(true)
               else $(this).val(false)
            })

            $(document).on('click', '#btnAddCategoriePack', function() {
                $.ajax({
                    type: "POST",
                    url: "{{ route('pack_promo_categorie.add') }}",
                    data: {
                        IDPACKPROMO: $("#Idpack_hidden").val(),
                        IDCATEGORIE_CLIENT: $("#categorieClient").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "JSON",
                    success: function(resp) {
                        if (resp.checking) {
                            notif('danger', 'Erreur', resp.msg)
                            return false;
                        }
                        notif('success', 'Succès', resp.msg)
                        recuperation_pack_promo_categorie($("#Idpack_hidden").val())
                    },
                    error: function(xhr) {
                        notifError(xhr.responseJSON.message)
                    }
                });
            })

            $(document).on('click', '.btn-trash-categorie', function() {

                var idCategorie = $(this).data('id')
                var key = $(this).data('key')
                Swal.fire({

                    title: 'Attention !',
                    text: "Voulez-vous supprimer cette catégorie ?",
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                }).then((result) => {

                    if (result.isConfirmed) {
                        $.ajax({
                            type: "DELETE",
                            url: "{{ route('pack_promo_categorie.delete') }}",
                            data: {
                                IDPACKPROMO_CATEGORIE_CLIENT: idCategorie,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "JSON",
                            success: function(resp) {

                                notif('success', 'Succès', resp.msg)
                                tableCategoriePackLigne = $('#tableCategoriePackLigne')
                                    .DataTable();
                                tableCategoriePackLigne.row(key).remove().draw()
                            },
                            error: function(xhr) {
                                notifError(xhr.responseJSON.message)
                            }
                        });
                    }
                })

            })

            remplirSelect2("{{ route('categorie_client.get') }}", null, "#categorieClient", "IDCATEGORIE_CLIENT",
                "LieblleCategorieClient", "#modalNewCampagnePack", "");


            function recuperation_pack_promo_categorie($idPack) {

                $.ajax({
                    type: "GET",
                    url: "{{ route('pack_promo_categorie.get') }}",
                    data: {

                        IDPACKPROMO: $idPack,
                    },
                    dataType: "JSON",
                    success: function(resp) {

                        tableCategoriePackLigne = $('#tableCategoriePackLigne').DataTable();
                        tableCategoriePackLigne.clear().draw()
                        $.each(resp.listeCategorie, function(key, value) {
                            tableCategoriePackLigne.row.add([
                                `<button class="btn btn-sm btn-outline-danger btn-trash-categorie" data-key="` +
                                key + `" data-id="` + value
                                .IDPACKPROMO_CATEGORIE_CLIENT +
                                `"><i class="bx bxs-trash"></i></button>`,
                                value.LieblleCategorieClient,
                            ]).draw()
                        })

                    },
                    error: function(xhr) {
                        notifError(xhr.responseJSON.message)
                    }
                });
            }

            function recuperation_detail_pack_promo($idPack, $idAgence, $checking = null) {

                $.ajax({
                    type: "GET",
                    url: "{{ route('pack_promo.detail') }}",
                    data: {

                        IDPACKPROMO: $idPack,
                        IDAGENCE: $idAgence
                    },
                    dataType: "JSON",
                    success: function(resp) {

                        if ($checking == null) {
                            if (resp.nodata) {
                                notif("warning", "Attention", resp.msg)
                                return false
                            }
                        }
                        tableDetailPack = $('#tabledetailPack').DataTable();
                        tableDetailPack.clear().draw()
                        var totalQteFacture = 0
                        var totalQteUG = 0
                        var totalRemise = 0
                        var totalTTC = 0
                        $.each(resp.detail_pack, function(key, value) {
                            tableDetailPack.row.add([

                                value.DateFactureClient,
                                value.NumeroFactureClient,
                                value.NomClient,
                                value.DesignationProduit,
                                value.QteFacturee,
                                value.QteUniteGratuite,
                                formatNumber(value.PrixCessionHT),
                                value.TauxRemise + '%',
                                formatNumber(value.TotalRemiseFacture),
                                formatNumber(value.TotalTTCFacture)
                            ])

                            totalQteFacture += parseInt(value.QteFacturee)
                            totalQteUG += parseInt(value.QteUniteGratuite)
                            totalRemise += parseInt(value.TotalRemiseFacture)
                            totalTTC += parseInt(value.TotalTTCFacture)
                        })
                        tableDetailPack.draw()

                        $('#T_QteFacturePackPromo').text(formatNumber(totalQteFacture))
                        $('#T_QteUGPackPromo').text(formatNumber(totalQteUG))
                        $('#T_RemisePackPromo').text(formatNumber(totalRemise))
                        $('#T_totalTTcPackPromo').text(formatNumber(totalTTC))

                        if ($checking == null) {
                            $('#modal_detailPackPromo').modal('show');
                        }

                    }
                });
            }

            /*::::::::: Fonction ::::::::::::::::*/

            function traitementDelete() {
                $.ajax({
                    url: '{{ route('deletePackPromo') }}',
                    type: 'post',
                    data: {
                        IDPACKPROMO: IDPACKPROMOINPUT,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            listePackPromo($("#filtrePeriode").val(), $("#IDLABORATOIRE").val(), $(
                                    "#actif").val(), $("#IDPRODUIT").val(), $("#typeCampagne")
                                .val())

                            notif("success", "Félicitation", response.messages)
                            return 0
                        }
                        if (response.error == true) {
                            notif("warning", "Attention", response.messages)
                            return 0
                        }
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.messages)
                    }
                })
            }

            function chargerSelectProduit(IDLABORATOIRE, tableSauf = []) {

                $.ajax({

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

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

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

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

            function chargerSelectProduitModal(IDLABORATOIRE, tableSauf = []) {

                $.ajax({

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

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

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

                            $('#modalIDPRODUIT').append('<option value="' + value["IDPRODUIT"] +
                                '">' + value[
                                    "DesignationProduit"] + '</option>')
                        })
                        $('#modalIDPRODUIT').select2({
                            dropdownParent: $("#modalNewCampagnePack")
                        })
                    }
                })
            }

            function chargerSelectProduitParLabo(IDLABORATOIRE, tableSauf = []) {

                $.ajax({

                    url: '{{ route('listingProduitASelect') }}',
                    type: 'POST',
                    data: {
                        IDLABORATOIRE: IDLABORATOIRE,
                        tableSauf: tableSauf,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

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

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

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

            function chargerSelectLaboratoire() {

                $.ajax({

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

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

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

                            $('#IDLABORATOIRE').append('<option value="' + value[
                                "IDLABORATOIRE"] + '">' + value[
                                "NomLaboratoire"] + '</option>')
                        })
                        $('#modalIDLABORATOIRE').html('')
                        $('#modalIDLABORATOIRE').append('<option value="0"></option>')

                        $.each(response.data, function(key, value) {
                            $('#modalIDLABORATOIRE').append('<option value="' + value[
                                    "IDLABORATOIRE"] + '">' + value["NomLaboratoire"] +
                                '</option>')
                        })

                        $('#modalIDLABORATOIRE').select2({
                            dropdownParent: $("#modalNewCampagnePack")
                        })
                    }
                })
            }

            function listePackPromo(Periode, LaboSelect, UniqActif, ProdSelect, TypCamp, impression = null) {
                $.ajax({
                    url: '{{ route('listePackPromo') }}',
                    type: 'POST',
                    data: {
                        Periode: Periode,
                        LaboSelect: LaboSelect,
                        UniqActif: UniqActif,
                        ProdSelect: ProdSelect,
                        TypCamp: TypCamp,
                        impression: impression,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {


                        tablePackPromo.clear().draw()

                        if (response.error == false) {
                            $.each(response.listePack, function(key, value) {
                                if (value.TypeCampagne == 1) TypeCampagne = 'LABORATOIRE'
                                if (value.TypeCampagne == 2) TypeCampagne = 'TEDIS PHARMA'
                                tablePackPromo.row.add([
                                    // <input class="form-check-input me-4" type="checkbox" id="checkSelectLigne" data-id ="${value.IDCOMMANDECLIENTLIGNE}" data-idclient="${value.IDCOMMANDECLIENT}" data-pack="${value.IDPACKPROMO}">
                                    `<input class="form-check-input" style="height : 19px; width:19px;cursor : pointer;" type="checkbox" id="checkSelectLigne" data-id ="${value.IDPACKPROMO}">
                                    &nbsp;
                                    <button class=" btn btn-sm btn-outline-info  btn-icon" id="btn-detail"  data-id="${value.IDPACKPROMO}">
                                        <i class='bx bx-info-circle' style='font-size:14px'></i>
                                    </button>
                                    <button class=" btn btn-sm btn-outline-warning btn-edit btn-icon" id="edit-${key}"  data-pack="${value.IDPACKPROMO}">
                                        <i class='bx bxs-edit' style='font-size:14px'></i>
                                    </button>
                                        <button class=" btn btn-sm btn-outline-danger btn-trash btn-icon" id="trash-${key}"  data-pack="${value.IDPACKPROMO}">
                                            <i class='bx bxs-trash' style='font-size:14px'></i>
                                        </button>`,
                                    `<span id="${key}" data-id="${value.IDPACKPROMO}">${value.NumeroPackPromo}</span>`,
                                    `${explodeDate(value.DateDebutPackPromo)}`,
                                    `${explodeDate(value.DateFinPackPromo)}`,
                                    `${TypeCampagne}`,
                                    `${value.NomPackPromo}`,
                                    `${value.NomLaboratoire}`,
                                    `<input class="form-check-input" value='${value.SuspendrePackPromo}' type="checkbox"  ${value.SuspendrePackPromo == true ? "checked" : ""} disabled>`,
                                    value.IDPACKPROMO
                                ])

                            })

                            tablePackPromo.draw()
                        }

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

            $("#tablePackLigne").on("change", "#checkSwitch", function() {
                let indice = $(this).attr("data-key")
                let IDPACKPROMO_LIGNE = $(this).attr("data-packLigne")
                let value = ($(this).val() === "true")
                tblProduit[indice].PackPromoLigneSuspendue = value

                if (value == true) {
                    notif("success", "Félication", "Le produit a été mis suspend !!")
                } else {
                    notif("success", "Félication", "Le produit a été enlévé suspend !!")
                }
            })

            function listePackPromoLigne(IDPACKPROMO) {
                $.ajax({
                    url: '{{ route('listePackPromoLigne') }}',
                    type: 'GET',
                    data: {
                        IDPACKPROMO: IDPACKPROMO,
                    },
                    dataType: 'json',
                    success: function(response) {

                        var tablePackLignes = $('#tablePackLigne').DataTable()
                        tablePackLignes.clear().draw()
                        QteAffecteePackPromo = 0
                        QteUniteGratuitePackPromo = 0

                        tblProduit = []

                        if (response.error == false) {
                            $.each(response.listePackLigne, function(key, value) {
                                data = value
                                data.traitement = "update"
                                tblProduit.push(data)

                            })

                            listProduit(tblProduit)
                        }
                    },
                    error: function(response) {
                        console.log(response)
                    }
                })
            }

            function listProduit(data) {
                var tablePackLignes = $('#tablePackLigne').DataTable()
                tablePackLignes.clear().draw()
                QteAffecteePackPromo = 0
                QteUniteGratuitePackPromo = 0


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

                    PackPromoLigneSuspendue = value.PackPromoLigneSuspendue
                    if (PackPromoLigneSuspendue == null) {
                        PackPromoLigneSuspendue = false
                    }

                    if (value.traitement != "delete") {
                        tablePackLignes.row.add([
                            `<input class="form-check-input me-4" type="checkbox" id="checkSelectLigne" data-id ="${value.IDCOMMANDECLIENTLIGNE}" data-idclient="${value.IDCOMMANDECLIENT}" data-pack="${value.IDPACKPROMO}">
                            &nbsp;
                            <button class=" btn btn-sm btn-outline-danger btn-trash btn-icon" id="trash-${key}" data-key="${key}" data-pack="${value.IDPACKPROMO}">
                                <i class='bx bxs-trash' style='font-size:14px'></i>
                            </button>`,
                            `${value.DesignationProduit}`,
                            `<input type="text" class="form-control text-center" id="listeQteCmde" data-key="${key}" autocomplete="false" value="${value.QteAffecteePackPromo}" />`,
                            `<input type="text" class="form-control text-center" id="listeQteUg" autocomplete="false" data-key="${key}" value="${value.QteUniteGratuitePackPromo}" />`,
                            `<div class="form-check form-check-md form-switch d-flex justify-content-center">
                            <input class="form-check-input form-checked-danger" type="checkbox" role="switch" data-key="${key}" id="checkSwitch" value="${PackPromoLigneSuspendue}" ${PackPromoLigneSuspendue == true ? "checked" : ""}>
                        </div>`
                        ])
                        QteAffecteePackPromo += parseInt(value.QteAffecteePackPromo)
                        QteUniteGratuitePackPromo += parseInt(value.QteUniteGratuitePackPromo)
                    }
                })

                tablePackLignes.draw()

                $("#nbreProduit").text(data.length)
                $("#totalQteCmde").text(QteAffecteePackPromo)
                $("#totalQteUg").text(QteUniteGratuitePackPromo)

            }

            function listeFacturePackPromo(AgenSelec, Periode, PackSelec) {

                $.ajax({
                    url: '{{ route('listePackPromo') }}',
                    type: 'POST',
                    data: {
                        AgenSelec: AgenSelec,
                        Periode: Periode,
                        PackSelec: PackSelec,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)
                        if (response.listePack.length <= 0) {
                            notif("warning", "Attention",
                                "Il n y a pas de facture associée à cet pack !!")
                            return 0
                        }
                        tableCmdePack.clear().draw()
                        $.each(response.listeFacture, function(key, value) {
                            tableCmdePack.row.add([
                                `<input class="form-check-input me-4" type="checkbox" id="checkSelectLigne" data-id ="${value.IDCOMMANDECLIENTLIGNE}" data-idclient="${value.IDCOMMANDECLIENT}" data-pack="${value.IDPACKPROMO}">
                                &nbsp;
                            <button class=" btn btn-sm btn-outline-warning btn-edit btn-icon" id="edit-${key}" data_id="${value.IDCOMMANDECLIENTLIGNE}" data-id="${value.IDCOMMANDECLIENT}" data-pack="${value.IDPACKPROMO}">
                                <i class='bx bxs-edit' style='font-size:14px'></i>
                            </button>
                            <button class=" btn btn-sm btn-outline-danger btn-trash btn-icon" id="trash-${key}" data_id="${value.IDCOMMANDECLIENTLIGNE}" data-id="${value.IDCOMMANDECLIENT}" data-pack="${value.IDPACKPROMO}">
                                <i class='bx bxs-trash' style='font-size:14px'></i>
                            </button>
                        `,
                                `${value.DateFactureClient}`,
                                `${value.NumeroFactureClient}`,
                                `${value.NomClient}`,
                                `${value.DesignationProduit}`,
                                `${value.QteAffectee}`,
                                `${value.QteUniteGratuite}`,
                                `${separateurMilliers(parseInt(value.PrixCessionHT))}`,
                                `${separateurMilliers(parseInt(value.TauxRemise))}`,
                                `${separateurMilliers(parseInt(value.TotalRemiseFacture))}`,
                                `${separateurMilliers(parseInt(value.TotalTTCFacture))}`
                            ])

                        })
                        tableCmdePack.draw()

                        $("#modalListeFacture").modal("show")
                    },
                    error: function(response) {
                        notifError(response.messages)
                    }
                })
            }

            function resetForm() {
                $("#IDPACKPROMO").val("")
                $("#libellePack").val("")
                $("#suspendre").val("false")
                $("#suspendre").removeAttr("checked")
                $("#qteCmde").val(0)
                $("#qteUg").val(0)
                $("#nbreProduit").text(0)
                $("#totalQteCmde").text(0)
                $("#totalQteUg").text(0)
                // tablePackLigne.clear().draw()
            }

            function reclamation_client($tableau) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('pack_promo.reclamation') }}",
                    data: {
                        IDPACKPROMO: $tableau
                    },
                    dataType: "JSON",
                    success: function(resp) {

                        if (resp.nodata) {
                            notif('warning', 'Attention', resp.msg)
                            return false;
                        }

                        if (resp.pasreclam) {
                            notif('danger', 'Erreur', resp.msg)
                            return false;
                        }

                        if (resp.parametre_pack_promo_pas_indique) {
                            notif('danger', 'Erreur', resp.msg)
                            return false;
                        }

                        tabPrintReclamationID.push(resp.tableauID[0]);


                        $('#modalEtatPrint').modal('show');
                        //  notif('warning','Attention',resp.msg)

                    },
                    error: function(xhr, status, error) {
                        var errorMessage = xhr.status + ': ' + xhr.statusText
                        notif('danger', 'Erreur', errorMessage)
                    }
                });

            }
        })

        $(document).on('click', '#btnExportExcel', function() {
            var data = remplissage_avec_row_add_DataTable('tablePackPromo')
            const filename = file_name("PACK_PROMO");
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename)
        })
    </script>

@endsection