{{-- Revoir pour afficher detail du produit --}}
@extends('models')
@section('titre-page', 'Promos labo')
@section('content-body')

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

                <div class="col-xl-6 col-lg-8 col-md-8">
                    <div class="d-flex justify-content-around">
                        <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="bntNewCampagne">
                                <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>
                                        <div class="dropdown1">
                                            <button class="dropdown-item text-start" id="btnGenererReclamationCampagne">Générer la réclamation
                                                des campagnes sélectionnées</button>
                                        </div>
                                    </li>

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

                                     <li>
                                        <div class="dropdown1">
                                            <button class="dropdown-item text-start" id="btnampagneUGenCours">Campagne UG en cours</button>
                                        </div>
                                    </li>

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

                                    <li>
                                        <div class="dropdown1">
                                            <button class="dropdown-item text-start" id="RecapProduitCampagneUG">Récapitulatif des produits sélectionné</button>
                                        </div>
                                    </li>

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


                                    <li>
                                        <div class="dropdown1">
                                            <button class="dropdown-item text-start" id="exportCampagneUGSelectionne">Exporter les campagnes UG sélectionné</button>
                                        </div>
                                    </li>

                                    <li>
                                        <hr class="dropdown-divider">
                                    </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"
                                    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>
                                        <div class="dropdown1">
                                            <button class="dropdown-item text-start" id="btnImprimListePromo">
                                                La liste des promos
                                            </button>
                                        </div>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnImprimFacturePromo">
                                            Facture des promos sélectionnées
                                        </a>
                                    </li>

                                </ul>
                            </div>

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

    <div class="row">
        <div class="col-xl-12">
        <input type="hidden" id="campagneID"/>
            <div class="card custom-card">
                <div class="card-header py-2">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-3 col-md-4">
                                <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-4">
                                <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-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-2 col-md-4">
                                <p class="mb-0 text-muted">Laboratoire&nbsp;:</p>
                                <select class="js-example-basic-single form-select select2" id="IDLABORATOIRE" name="IDLABORATOIRE">

                                </select>
                            </div>
                            <div class="col-xl-1 col-md-4 p-0 pt-3">
                                <div class="card pt-0" style="height:35px;">
                                    <div class="card-body d-flex pt-2 ps-2">
                                        <input type="checkbox" class="form-check-input me-2" type="checkbox" name="actif"
                                            id="actif" />
                                        <p class="form-check-label" for="actif" style="cursor:pointer;">Suspendu</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-1 col-md-4 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>
                    </form>
                    
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableCampagneUg">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th data-column="CreeLeFormat" data-class="text-center" class="text-center colTable">Créé le</th>
                                    <th data-column="NumeroCampagneUG" data-class="text-center" class="text-center colTable">N° Campagne UG</th>
                                    <th data-column="DateDebutUGFormat" data-class="text-center" class="text-center colTable">Date debut</th>
                                    <th data-column="DateFinUGFormat" data-class="text-center" class="text-center colTable">Date fin</th>
                                    <th data-column="libelleTypeCampagne" data-class="libelleTypeCampagne" class="text-center colTable">Type campagne</th>
                                    <th data-column="libelleModeCampagne" data-class="libelleModeCampagne" class="text-center colTable">Mode</th>
                                    <th data-column="NomLaboratoire" data-class="NomLaboratoire" class="text-center colTable">Laboratoire</th>
                                    <th data-column="checkSuspendu" data-class="text-center" class="text-center colTable">Suspendue</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalNewCampagne" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalCampagne">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="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" style="display:none;" id="IDCAMPAGNEUG" name="IDCAMPAGNEUG">
                                    <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">N° Campagne&nbsp;:</p>
                                        <input type="text" class="form-control text-center" name="NumeroCampagneUG"
                                            id="NumeroCampagneUG" readonly />
                                    </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">Type de campagne&nbsp;:</p>
                                        <select class="form-select" id="ModalTypeCampagne" name="ModalTypeCampagne">
                                            <option value="1">LABORATOIRE</option>
                                            <option value="2">INTERNE</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-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-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">Taux remb.&nbsp;:</p>
                                        <input type="number" class="form-control text-center" name="tauxRemb"
                                            id="tauxRemb" />
                                    </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"
                                                    name="suspendre" id="suspendre" />
                                                <p class="form-check-label" for="suspendre" style="cursor:pointer;">
                                                    Suspendre</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-7 mt-0 table-responsive">
                            <div class="d-flex justify-content-between">
                                <span class="fs-14 fw-bold mt-2 mb-1">Liste des produits</span>
                                <button class="btn btn-secondary-light btn-wave d-flex" id="btnModalNewProduit">
                                    <i class=" ri ri-add-circle-line me-1"></i>
                                    Nouveau produit
                                </button>
                            </div>
                            <table class="tablehover table table-striped text-nowrap w-100" id="tableModalCAMPAGNEUG_PRODUIT">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center" data-orderable="false">Actions</th>
                                        <th class="text-center">Produit</th>
                                        <th class="text-center" data-orderable="false">Susp.</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="col-xl-5 mt-0">
                            <div class="card border border-warning custom-card rounded-0 pb-1">
                                <div class="text-warning rounded-0 d-flex justify-content-center py-1 ps-3"
                                    style="border-bottom : 1px solid #F6C160;">
                                    <span class="text-center fs-14 fw-bold">Détail de la promo.</span>
                                </div>
                                <div class="card-body pt-1 pb-0">
                                    <div class="row">
                                        <input type="number" style="display:none;" id="IDCAMPAGNEUG_LIGNE">
                                        <div class="col-xl-3 col-md-3 mb-0">
                                            <p class="mb-0 text-muted">Qté cdée.&nbsp;:</p>
                                            <input type="number" class="form-control text-center" name="qteCde"
                                                id="qteCde" />
                                        </div>
                                        <div class="col-xl-3 col-md-3 mb-0">
                                            <p class="mb-0 text-muted" id="libelleUG">Qté UG&nbsp;:</p>
                                            <input type="number" class="form-control text-center" name="qteUG"
                                                id="qteUG" />
                                        </div>
                                        <div class="col-xl-4 col-md-4 mb-0 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"
                                                        name="PalierSuspendu" id="PalierSuspendu" />
                                                    <p class="form-check-label" for="PalierSuspendu"
                                                        style="cursor:pointer;">Suspen.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-2 col-md-2 mb-0 pt-3">
                                            <button class="btn btn-icon btn-success-light w-100" id="newCAMPAGNEUG_LIGNE">
                                                <i class='bx bxs-plus-circle'></i>
                                            </button>
                                            <button class="btn btn-icon btn-warning-light w-100"
                                                id="editCAMPAGNEUG_LIGNE">
                                                <i class='bx bx-edit'></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive pt-0">
                                <table class="tablehover table table-striped text-nowrap w-100" id="tableModalCAMPAGNEUG_LIGNE">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center" data-orderable="false">#</th>
                                            <th class="text-center">Qté cdée</th>
                                            <th class="text-center" id="thUG">Qté UG</th>
                                            <th class="text-center">Susp.</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-warning" id="btnEditCAMPAGNEUG">
                        <i class="bx bx-edit fs-6 me-1"></i>
                        Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSelectProd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">SELECTIONNER LES PRODUITS</h5>
                    <button type="button" class="btn-close bg-white closeModalSelectProd" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="list"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnValiderSelectProduit">Valider</button>
                </div>
            </div>
        </div>
    </div>


     <div class="modal fade" id="modalFactureCampagneUG" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ETAT RECAPITULATIF DES PROMOTIONS</h5>
                    <button type="button" class="btn-close bg-white " data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-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="QteFacture">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="QteUG">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="Remise">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="TotalTTC">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                    <div class="table-responsive">
                              <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="FactureCampagneUGTable">
                                    <thead class="table-header-primary">
                                        <tr>

                                            <th class="text-center">Laboratoire</th>
                                            <th class="text-center">Date facture</th>
                                            <th class="text-center">N° Facture</th>

                                            <th class="text-center">Client</th>
                                            <th class="text-center">Qté Facturée</th>
                                            <th class="text-center">Qté UG</th>

                                            <th class="text-center">Prix cession</th>
                                            <th class="text-center">Taux remise</th>
                                            <th class="text-center">Remise</th>
                                            <th class="text-center">Total TTC</th>
                                        </tr>
                                    </thead>
                                </table>
                    </div>
                </div>
               
            </div>
        </div>
    </div>

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


    <div class="modal fade" id="modalCampagneUG_EnCours" tabindex="-1" aria-labelledby="exampleModalSmLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel">Campagne UG en cours</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 g-2">
                       <div class="col-xl-3">
                           <p class="text-muted mb-0">Type de campagne : </p>
                             <select class="form-select" id="typeCampagnes">
                                <option value="0">TOUS</option>
                                <option value="1">LABORATOIRE</option>
                                <option value="2">TEDIS PHARMA</option>
                             </select>
                       </div>

                       <div class="col-xl-3">
                       <p class="text-muted mb-0">Produit : </p>
                             <select class="form-select" id="produitSelect"></select>
                       </div>

                       <div class="col-xl-3">
                       <p class="text-muted mb-0">Laboratoire : </p>
                             <select class="form-select" id="laboratoireSelect"></select>
                       </div>

                       <div class="col-xl-3">
                           <div class="d-flex mt-3">
                                <button class="btn btn-primary" id="btnSearchcampagneUGenCours">
                                     <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                                <button class="btn btn-warning ms-2" id="btnImprimercampagneUGenCours">
                                     <i class="ri-printer-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                           </div>
                       </div>

                    </div>

                    <div style="height:400px; overflow:scroll" class="mt-4" id="ZoneCampagneUGenCours"> 
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modalRecapitulatifProduit" tabindex="-1" aria-labelledby="exampleModalSmLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel">Liste des produits</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">

                    <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="QteFactureP">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="QteUGP">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="RemiseP">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="TotalTTCP">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                    <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="RecapitulatifProduit">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center">Date facture</th>
                                        <th class="text-center">N° Facture</th>
                                        <th class="text-center">Produit</th>
                                        <th class="text-center">Client</th>
                                        <th class="text-center">Qté Facturée</th>
                                        <th class="text-center">Qté UG</th>
                                        <th class="text-center">Prix cession</th>
                                        <th class="text-center">Taux remise</th>
                                        <th class="text-center">Remise</th>
                                        <th class="text-center">Total TTC</th>
                                    </tr>
                                </thead>
                            </table>
                    </div>
                 
                </div>
            </div>
        </div>
    </div>

    

@endsection
@section('script')

    <script>
        let IDCAMPAGNEUG_PRODUIT
        $(document).ready(function(){
            
            tabPrintReclamationID = [];
            $('#FactureCampagneUGTable').DataTable({
                language: language,
                columnDefs:[
                {target:[1,4,5,7],
                className:'text-center'},
                {target:[6,8,9],
                className:'text-end'}
                ],
                pageLength: 10,
                lengthChange: false,
            })

           $('#RecapitulatifProduit').DataTable({
                language: language,
                columnDefs: [
                    { targets: 2, visible: false }, // colonne rupture
                    { targets: [6,8,9], className: 'text-end' },
                    { targets: [5,4,7], className: 'text-center' }
                ],
                pageLength: 10,
                lengthChange: false,
                paging: false,          // désactive la pagination
                scrollY: "500px",
              
                order: [[2, 'asc']], // important : regrouper par produit
                drawCallback: function(settings) {
                    var api = this.api();
                   // var rows = api.rows({ page: 'current' }).nodes();
                    var rows = api.rows().nodes();
                    var last = null;
                    //api.column(2, { page: 'current' }).data().each(function(group, i)
                    api.column(2).data().each(function(group, i) {
                        if (last !== group) {

                            // --- Calcul des sous-totaux pour le groupe en cours ---
                            //ar groupRows = api.rows({ page: 'current' }).indexes().filter(function(idx) {
                            var groupRows = api.rows().indexes().filter(function(idx) {
                                return api.cell(idx, 2).data() === group;
                            });

                            // Nombre de lignes
                            var nbLignes = groupRows.length;

                            // Somme Qté Facturée (col 3)
                            var qteFacture = groupRows.reduce(function(sum, idx) {
                                return sum + parseFloat(api.cell(idx, 4).data() || 0);
                            }, 0);

                            // Somme Qté UG (col 4)
                            var qteUG = groupRows.reduce(function(sum, idx) {
                                return sum + parseFloat(api.cell(idx, 5).data() || 0);
                            }, 0);

                            // Moyenne Taux Remise (col 6)
                            var tauxRemise = groupRows.reduce(function(sum, idx) {
                                return sum + parseFloat(api.cell(idx, 7).data() || 0);
                            }, 0) / nbLignes;

                            // Somme TxTTC (col 10)
                            var txTTC = groupRows.reduce(function(sum, idx) {
                                return sum + parseFloat(api.cell(idx, 9).data() || 0);
                            }, 0);

                            // --- Ligne de rupture avec totaux ---
                            $(rows).eq(i).before(
                                '<tr class="group text-white " style="background:#F2E0BD">' +
                                    '<td colspan="14" style="color:#000">' +
                                    group +
                                    '  <span style="font-weigth:60;font-size:11px;margin-left:50px">Lignes</span> : <span style="color:black;font-weight:bold;margin-left:5px">' + nbLignes +
                                    '  </span> <span style="font-weigth:60;font-size:11px;margin-left:10px">Qté Facturée</span> : <span style="color:black;font-weight:bold;margin-left:5px">' + qteFacture +
                                    '  </span> <span style="font-weigth:60;font-size:11px;margin-left:10px">Qté UG</span> : <span style="color:black;font-weight:bold;margin-left:5px">' + qteUG +
                                    '  </span> <span style="font-weigth:60;font-size:11px;margin-left:10px">Tx Remise</span> : <span style="color:black;font-weight:bold;margin-left:5px">' + tauxRemise.toFixed(2) + '%' +
                                    '  </span> <span style="font-weigth:60;font-size:11px;margin-left:10px">TxTTC</span> : <span style="color:black;font-weight:bold;margin-left:5px">' + txTTC.toLocaleString() +
                                    '  </span></td>' +
                                '</tr>'
                            );

                            last = group;
                        }
                    });
                }
            });


            
            const divShowPer = $('#FactureCampagneUGTable_filter');

            const broDivShowPer = divShowPer.closest('.row'); 
            const child = broDivShowPer.children().eq(0);
            const child2 = broDivShowPer.children().eq(1);
            child2.removeClass('col-md-6').addClass('col-md-4 d-flex mt-2 justify-content-end');
            child.removeClass('col-md-6').addClass('d-flex pt-2 col-md-8');

                child.append(`
                        <div style="width:100%" style="margin-top:-50px" >
                            <div class="row">
                                <div class="col-xl-5">
                                    <div class="d-flex">
                                            <p class="mb-0 text-muted mt-2">Agence&nbsp;:&nbsp;</p>
                                            <select class="form-select" id="select-agence"></select>
                                    </div>
                                </div>
                                <div class="col-xl-5">
                                    <div class="d-flex">
                                        <p class="mb-0 text-muted mt-2">Produit&nbsp;:&nbsp;</p>
                                        <select class="form-select" id="select-produit"></select>
                                    </div>
                                </div>

                                <div class="col-xl-2">
                                    <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-factureCampagne-excel" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                `);



                fixe_elements_on_headers_tab('RecapitulatifProduit',`

                     <div style="width:25%" style="margin-top:-50px" >
                           
                                    <div class="d-flex">
                                            <p class="mb-0 text-muted mt-2">Agence&nbsp;:&nbsp;</p>
                                            <select class="form-select" id="filtreParAgence"></select>
                                    </div>
                        </div>
                
                `)

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

                    var date = dissocierDate($('#filtrePeriode').val())
                    var date_deb =date[0];
                    var date_fin =date[1];
                    var suspendu =false;

                    if($('#actif').is(':checked')){
                        suspendu = true;
                    }
                    
                    generation_pdf_sans_telechargement_base4('{{route("promo_labo_tedis.print")}}',{
                            date_deb : date_deb,
                            date_fin : date_fin,
                            typeCamp : $('#typeCampagne').val(),
                            IDPRODUIT: $('#IDPRODUIT').val(),
                            IDLABORATOIRE: $('#IDLABORATOIRE').val(),
                            encours : suspendu
                    })
                })

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

                    var date = dissocierDate($('#filtrePeriode').val())
                    var date_deb =date[0];
                    var date_fin =date[1]; 
                    var tableauUG = listeLigneSelectionne("#tableCampagneUg",'.checkSelectLigne');

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

                    generation_pdf_sans_telechargement_base4('{{route("promo_facture_tedis.print")}}',{
                            date_deb : date_deb,
                            date_fin : date_fin,
                            IDAGENCE : $('#idSiteEnCours').val(),
                            tabUG    : tableauUG
                        
                    })
                })

                $(document).on('click','#FactureCampagneUG',function(){

                    var id_campagne = $(this).data('id')
                    $('#campagneID').val(id_campagne)
                    var agence = $('#idSiteEnCours').val()
                    factureCampagneUG(id_campagne,agence)
                    remplirSelect2('{{route("produit_filtre_campagneUG.get")}}',{IDCampage : $('#campagneID').val()},'#select-produit','IDPRODUIT','DesignationProduit','#modalFactureCampagneUG','TOUS LES PRODUITS')
                     

                    
                })

                listingComboAgence('#select-agence')

                $(document).on('change',"#select-agence",function(){
                        var agence = $(this).val();
                        factureCampagneUG($('#campagneID').val(), agence)
                })

                $(document).on('change',"#select-produit",function(){
                        var produit = [$(this).val()];
                        factureCampagneUG($('#campagneID').val(),null,produit)
                })


                $(document).on('click','#btnGenererReclamationCampagne',function(){

                    var tableau = listeLigneSelectionne("#tableCampagneUg",'.checkSelectLigne');

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

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

                    let table = $('#tableCampagneUg').DataTable();
                    let dates = [];

                    $('#tableCampagneUg tbody input[type="checkbox"]:checked').each(function() {
                        let tr = $(this).closest('tr');
                        let rowData = table.row(tr).data();
                        dates.push(rowData); 
                    })


                    var dListeCampEnCours = ""
                    dates.forEach((item) => {
                            if(new Date(item.DateFinUG) > new Date(getDateActuelle)){

                                if(dListeCampEnCours == ""){
                                    dListeCampEnCours = "> " + item.NumeroCampagneUG
                                }else{
                                    dListeCampEnCours += "RC" + "> " + item.NumeroCampagneUG
                                }
                            }
                    });

                    if(dListeCampEnCours != ""){

                        Swal.fire({

                            title: 'Êtes-vous sûrs ?',
                            text: "Attention, Les campagnes UG ci-dessous sont toujours en cours.',' Voulez-vous les réclamer?, "+dListeCampEnCours+"",
                            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);
                                return false
                            }

                        })
                    }

                    Swal.fire({

                        title: 'Êtes-vous sûrs ?',
                        text: "Attention,Voulez-vous réclamer les campagnes UG sélectionnées ?",
                        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);
                        }

                    })

                })

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

                        $.ajax({
                            url: "{{ route('getImprimDocReclamation') }}",
                            type: 'POST',
                            data: {
                                type: $("input[name=primaryRadio]:checked").val(),
                                data: tabPrintReclamationID[0],
                                _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)
                            }
                        })
                })

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

                    remplirSelect2('{{route("listingProduitSimple")}}',null,'#produitSelect','IDPRODUIT','DesignationProduit','#modalCampagneUG_EnCours','TOUS LES PRODUITS')
                    remplirSelect2('{{route("listingLaboSimple")}}',null,'#laboratoireSelect','IDLABORATOIRE','NomLaboratoire','#modalCampagneUG_EnCours','TOUS')
                    campagneUGenCours()

                })

                $('#btnSearchcampagneUGenCours').on('click',function(){
                            var Produit= $('#produitSelect').val()
                            var labo= $('#laboratoireSelect').val()
                            var type= $('#typeCampagnes').val()
                            campagneUGenCours(Produit,labo,type)
                })

                $('#btnImprimercampagneUGenCours').on('click',function(){
                            var Produit= $('#produitSelect').val()
                            var labo= $('#laboratoireSelect').val()
                            var type= $('#typeCampagnes').val()
                    generation_pdf_sans_telechargement_base4('{{route("campagnrUG_en_cours.get")}}',{
                            Produit:Produit,
                            labo: labo,
                            type: type,
                            imprim: 1,
                    })
                })

                var tabrecapUG;
        
                $(document).on('click','#RecapProduitCampagneUG',function(){
                    
                    var tableauUG = listeLigneSelectionne("#tableCampagneUg",'.checkSelectLigne');
                    if(tableauUG.length == 0){
                          notif('warning','Attention','Veuillez sélectionner des campagnes svp !')
                        return false
                    }
                    tabrecapUG = listeLigneSelectionne("#tableCampagneUg",'.checkSelectLigne');
                    var agence  = $('#idSiteEnCours').val()
                    recapitulatifCampagneProd(agence,tableauUG,1)
                    listingComboAgence('#filtreParAgence')
                     
                })

                $(document).on('change','#filtreParAgence',function(){
                   
                    var agence  = $(this).val()
                    recapitulatifCampagneProd(agence,tabrecapUG,null)
                     
                })

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

                    if (tableau.length === 0) {
                        notif('warning','Attention',"Veuillez sélectionner au moins une campagne !");
                        return;
                    }

                    // Création d'un formulaire caché
                    var form = $('<form>', {
                        method: 'POST',
                        action: "{{ route('exportcampagneUG') }}"
                    });

                    // Ajoute le token CSRF
                    form.append('@csrf');

                    // Ajoute le tableau sélectionné
                    tableau.forEach(function (id) {
                        form.append($('<input>', {
                            type: 'hidden',
                            name: 'ListeIDCampagneSelect[]',
                            value: id
                        }));
                    });

                    $('body').append(form);
                    form.submit();
                });
        })

        function campagneUGenCours($Produit=null,$labo=null,$type=null,$imprim=null){

              $.ajax({
                        type: "GET",
                        url: "{{route('campagnrUG_en_cours.get')}}",
                        data: {
                            Produit: $Produit,
                            labo: $labo,
                            type: $type,
                            imprim: $imprim,
                        },
                        dataType: "JSON",
                        success: function (resp) {
                            $('#ZoneCampagneUGenCours').html(''); // reset zone
                            
                            if(resp.data.length == 0){
                               $('#ZoneCampagneUGenCours').append(`
                                    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
                                        Aucune donnée
                                    </div>
                                `);

                                return false
                            }
                            $.each(resp.data, function (key, campagne) {

                                // --- Entête Campagne / Labo ---
                                var blocCampagne = `
                                    <div class="card mb-3 shadow-sm">
                                        <div class="card-header bg-warning  d-flex">
                                            N° Campagne : <span class="text-danger ms-2">${campagne.Numcampagne}</span>
                                           <div class="ms-2"> Du : <span class="text-danger"> ${campagne.DateDeb}</span> - Au : <span class="text-danger">${campagne.DateFin}</span></div>
                                            <div class="ms-2">Laboratoire : <span class="text-danger">${campagne.NomLabo}</span></div>
                                        </div>
                                        <div class="card-body">
                                `;

                                var produitsHtml = '';

                                $.each(campagne.produit, function (i, produit) {
                                    var blocProduit = `
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2" style="padding:5px; background:rgb(215,215,198)">
                                                <div><strong>${produit.Cip}</strong></div>
                                                <div class="ms-2">${produit.DesignationProduit}</div>
                                            </div>

                                            <table class="tablehover table table-sm table-bordered">
                                                <thead class="table-light" style="background:#182C37">
                                                    <tr>
                                                        <th class="text-center">Qté commandée</th>
                                                        <th class="text-center">Qté UG</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                    `;

                                    $.each(produit.tabUG, function (j, ligne) {
                                        blocProduit += `
                                            <tr>
                                                <td class="text-center">${ligne.qte}</td>
                                                <td class="text-center">${ligne.UG_gratuit}</td>
                                            </tr>
                                        `;
                                    });

                                    blocProduit += `
                                                </tbody>
                                            </table>
                                        </div>
                                    `;

                                    produitsHtml += blocProduit;
                                });

                                // --- Assemblage final ---
                                blocCampagne += produitsHtml + `</div></div>`;
                                $('#ZoneCampagneUGenCours').append(blocCampagne);
                            });

                             $('#modalCampagneUG_EnCours').modal('show')
                        }
                    });

        }

        function factureCampagneUG($id_campagne=null,$Agence=null,$produit=null){

              var table = $('#FactureCampagneUGTable').DataTable();
              table.clear();
                $.ajax({
                    type: "GET",
                    url: "{{route('factrure_campagneUG.get')}}",
                    data: {idCampagne : $id_campagne,
                    IDAGENCE:$Agence,
                    Produit : $produit},
                    dataType: "JSON",
                    success: function (resp) {
                        $Tla_somme_QteFacturee = 0;
                        $Tla_somme_QteUniteGratuite = 0;
                        $TTauxRemise = 0;
                        $Tla_somme_TotalTTCFacture = 0;
                        $.each(resp.data,function(key,value){
                            table.row.add([
                                value.NomLaboratoire,
                                explodeDate(value.DateFactureClient, '-'),
                                value.NumeroFactureClient,
                                value.NomClient,
                                formatNumber(value.la_somme_QteFacturee),
                                formatNumber(value.la_somme_QteUniteGratuite),
                                formatNumber(value.PrixCessionHT),
                                formatNumber(value.TauxRemise),
                                formatNumber(value.la_somme_TotalRemiseFacture),
                                formatNumber(value.la_somme_TotalTTCFacture)
                            ]);
                            
                            $Tla_somme_QteFacturee += value.la_somme_QteFacturee;
                            $Tla_somme_QteUniteGratuite += value.la_somme_QteUniteGratuite;
                            $TTauxRemise += value.TauxRemise;
                            $Tla_somme_TotalTTCFacture += value.la_somme_TotalTTCFacture;
                        })

                        table.draw();

                        $('#QteFacture').text(formatNumber($Tla_somme_QteFacturee))
                        $('#QteUG').text(formatNumber($Tla_somme_QteUniteGratuite))
                        $('#Remise').text(formatNumber($TTauxRemise))
                        $('#TotalTTC').text(formatNumber($Tla_somme_TotalTTCFacture))

                        $('#modalFactureCampagneUG').modal('show')
                    },
                    error:function(xhr){

                    }
                });
        }

        function reclamation_client($tableau){
            $.ajax({
                type: "GET",
                url: "{{route('genererReclamationCampagne.reclamation')}}",
                data: { 
                    tabIDPROMO : $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.pas_de_motif){
                            notif('danger','Erreur',resp.msg)
                            return false;
                        }
                        
                        
                        tabPrintReclamationID.push(resp.docs_traites);

                        if(resp.docs_traites.length > 0){
                            $('#modalEtatPrint').modal('show');
                        }

                        if(resp.docs_traites.length == 0){
                            notif('danger','Erreur','Aucune reclammation généré')
                        }
                    
                },error:function(xhr, status, error){
                    var errorMessage = xhr.status + ': ' + xhr.statusText
                    notif('danger','Erreur',errorMessage)
                }
            });

        }

        function recapitulatifCampagneProd($agence,$tableauUG,$chek=null){

            $.ajax({
                type: "GET",
                url: "{{route('recapitulatif.get')}}",
                data: {
                    tabUG  : $tableauUG,
                    agence : $agence},
                dataType: "JSON",
                success: function (resp) {
                    var table = $('#RecapitulatifProduit').DataTable();
                    table.clear();
                        $Tla_somme_QteFacturee = 0;
                        $Tla_somme_QteUniteGratuite = 0;
                        $TTauxRemise = 0;
                        $Tla_somme_TotalTTCFacture = 0;
                    $.each(resp.data,function(key,value){
                        table.row.add([
                                explodeDate(value.DateFactureClient, '-'),
                            value.NumeroFactureClient,
                            value.DesignationProduit,
                            value.NomClient,
                            formatNumber(value.la_somme_QteFacturee),
                            formatNumber(value.la_somme_QteUniteGratuite),
                            formatNumber(value.PrixCessionHT),
                            value.TauxRemise,
                            formatNumber(value.la_somme_TotalRemiseFacture),
                            formatNumber(value.la_somme_TotalTTCFacture),
                        ])

                            $Tla_somme_QteFacturee += value.la_somme_QteFacturee;
                            $Tla_somme_QteUniteGratuite += value.la_somme_QteUniteGratuite;
                            $TTauxRemise += value.TauxRemise;
                            $Tla_somme_TotalTTCFacture += value.la_somme_TotalTTCFacture;
                    })

                        $('#QteFactureP').text(formatNumber($Tla_somme_QteFacturee))
                        $('#QteUGP').text(formatNumber($Tla_somme_QteUniteGratuite))
                        $('#RemiseP').text(formatNumber($TTauxRemise))
                        $('#TotalTTCP').text(formatNumber($Tla_somme_TotalTTCFacture))

                    table.draw();

                    if($chek !=null){

                        $('#modalRecapitulatifProduit').modal('show')
                    
                        $('#modalRecapitulatifProduit').on('shown.bs.modal', function () {
                            table.columns.adjust().draw();
                        });
                    }
                    
                },
                error:function(xhr){

                }
            });
        }
    
    </script>

    <!-- Script exécuté au chargement -->
    <script>

        var tableCampagneUg

        var tableIDPRODUIT = []
        $('.select2').select2()
        let tableModalCAMPAGNEUG_PRODUIT = $('#tableModalCAMPAGNEUG_PRODUIT').DataTable({

            bFilter: false,
            language: {
                // dom: 'Bfrtip',
                processing: false,
                lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                info: "Ligne _START_ &agrave; _END_ sur _TOTAL_",
                infoEmpty: "Aucune donnée à consulter",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: tableVide,

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                },
                search: "Rechercher&nbsp;:",
            },
            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 tableModalCAMPAGNEUG_LIGNE

        function initTableModalCAMPAGNEUG_LIGNE(visible) {

            $('#tableModalCAMPAGNEUG_LIGNE').DataTable().destroy()
            tableModalCAMPAGNEUG_LIGNE = $('#tableModalCAMPAGNEUG_LIGNE').DataTable({

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

                    {
                        data: 'action',
                        className: 'text-center',
                        visible: visible
                    },
                    {
                        data: 'QteAffectee',
                        className: 'text-center'
                    },
                    {
                        data: 'QteUniteGratuite',
                        className: 'text-center'
                    },
                    {
                        data: 'checkPalier',
                        className: 'text-center'
                    },
                ],
                order: []
            })
        }

        $(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
                },
            });
        })

    
        function chargerSelectProduit() {

            $.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 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').select2()

                    $('#modalIDLABORATOIRE').html('')
                    $('#modalIDLABORATOIRE').append('<option value="0">SÉLECTIONNER UN LABO</option>')

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

                        $('#modalIDLABORATOIRE').append('<option value="' + value["IDLABORATOIRE"] +
                            '">' + value[
                                "NomLaboratoire"] + '</option>')
                    })
                    $('#modalIDLABORATOIRE').select2({
                        dropdownParent: $("#modalNewCampagne")
                    })

                }
            })
        }

        function chargerTableCampagneUg() {

            let formFiltre = new FormData(_('formFiltre'))
            formFiltre.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url: '{{ route('listingCampagneUg') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: formFiltre,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        let obj = response.data

                        tableCampagneUg = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableCampagneUg',
                                                    obj: obj,
                                                    scrollY: '600',
                                                    lengthChange : false
                                                });

                        // $("#tableCampagneUg").DataTable().destroy()
                        // tableCampagneUg = $("#tableCampagneUg").DataTable({

                        //     bFilter: true,
                        //     language: languageTable,
                        //     pageLength: 25,
                        //     lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                        //     "data": obj,
                        //     'columns': [

                        //         {
                        //             data: 'action',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'CreeLeFormat',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'NumeroCampagneUG',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'DateDebutUGFormat',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'DateFinUGFormat',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'libelleTypeCampagne'
                        //         },
                        //         {
                        //             data: 'libelleModeCampagne'
                        //         },
                        //         {
                        //             data: 'NomLaboratoire'
                        //         },
                        //         {
                        //             data: 'checkSuspendu',
                        //             className: 'text-center'
                        //         }
                        //     ]
                        // })

                        let divShowPer = $('#tableCampagneUg_filter')
                        let BroDivShowPer = divShowPer.parent().parent()
                        let child = BroDivShowPer.children().eq(0)
                        let child2 = BroDivShowPer.children().eq(1)

                        child2.removeClass('col-md-6')
                        child2.addClass('col-md-4 d-flex  justify-content-end')

                        child.removeClass('col-md-6')
                        child.addClass('d-flex pt-2 col-md-8')
                        child.append(`<span id="suppLignesCochee" ><i class="bx bxs-trash text-danger me-1 ms-2 mt-2 listesupp" style="font-size : 18px; cursor : pointer;"></i>
                                    <span id="labelSuppLignesCochee" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span></span>
                                    `)

                        completeHandler()
                        return false
                    }
                    completeHandler()
                    notifWarning(response.msg)
                },
                error: function(error) {

                    completeHandler()
                    notifError(error)
                }
            })
        }

        chargerSelectProduit()
        _('IDPRODUIT').value = 0
        chargerSelectLaboratoire()
        _('IDLABORATOIRE').value = 0

        window.addEventListener('load', function() {
            chargerTableCampagneUg()
            $('#modalSelectProd').modal({
                backdrop: 'static',
                keyboard: false
            })
        })

        // Click sur le boutton de refresh
        _('btnFiltreTable').addEventListener('click', function() {
            chargerTableCampagneUg()
        })

        function listeProduitDuLaboratoireASelct(IDLABORATOIRE, tableSauf) {

            $.ajax({

                url: '{{ route('listingProduitASelect') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    _token: '{{ csrf_token() }}',
                    IDLABORATOIRE: IDLABORATOIRE,
                    tableSauf: JSON.stringify(tableSauf)
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        $('#listeProduitSelect').html('')

                        $(() => {
                            const listWidget = $('#list').dxList({
                                dataSource: response.data,
                                height: 400,
                                searchEnabled: true,
                                searchExpr: 'DesignationProduit',
                                searchMode: 'contains',
                                // inputAttr: { 'aria-label': 'Search Mode' },
                                // placeholder: 'Recherche ...',
                                itemTemplate(data) {
                                    // Utiliser une structure HTML avec une case à cocher et le nom
                                    return $('<div>').append(
                                        $(
                                            '<input type="checkbox" class="form-check-input checkSelectProduit fs-16 me-2">')
                                        .attr('data-id', data
                                        .IDPRODUIT), // Utiliser une propriété unique (par exemple, ID) comme valeur de la case à cocher
                                        $('<span>').text(data.DesignationProduit)
                                    );
                                },
                            }).dxList('instance');

                            // $('#searchMode').dxSelectBox({
                            //     dataSource: ['contains', 'startswith', 'equals'],
                            //     value: 'contains',
                            //     inputAttr: { 'aria-label': 'Search Mode' },
                            //     onValueChanged(data) {
                            //     listWidget.option('searchMode', data.value);
                            //     },
                            // }).dxSelectBox('instance');

                            // Modifier l'icône du champ de recherche
                            const iconSearch = $('#list .dx-icon-search');
                            iconSearch.removeClass('dx-icon-search')
                            iconSearch.addClass('bx bx-search-alt ms-2')

                            // Modifier le placeholder du champ de recherche
                            // const searchBox = $('#list .dx-searchbox').dxTextBox('instance');
                            // searchBox.option('placeholder', 'Recherche ...');

                            completeHandler();
                        })

                    } else {

                        notifError(response.msg)
                    }
                }
            })
        }

        $(document).on("change","#ModalModeCampagne", function(){

            if(this.value == 2){
                $('#libelleUG').text('Taux :')
                $('#thUG').text('Taux')
            }else{
                $('#libelleUG').text('Qté UG :')
                $('#thUG').text('Qté UG')
            }
        })
        
        
    </script>

    <!-- Script de nouvelle campagne ug -->
    <script>
        // Ouverture de la modal
        _('bntNewCampagne').addEventListener('click', function() {

            initTableModalCAMPAGNEUG_LIGNE(true)

            $("#ModalModeCampagne").removeAttr("disabled")

            $('#periodeCampagne').daterangepicker({
                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
                },
            });

            _('titleModalCampagne').innerHTML = 'Nouvelle campagne'
            _('modalIDLABORATOIRE').removeAttribute('disabled')
            _('NumeroCampagneUG').setAttribute('disabled', '')
            $('#modalIDLABORATOIRE').val(0).trigger('change')

            _('IDCAMPAGNEUG').value = ''
            // _('IDCAMPAGNEUG').setAttribute('readonly', '')

            _('NumeroCampagneUG').value = ''
            _('tauxRemb').value = 0

            _('btnEditCAMPAGNEUG').style.display = 'none'

            _('editCAMPAGNEUG_LIGNE').style.display = 'none'
            _('newCAMPAGNEUG_LIGNE').style.display = ''

            tableModalCAMPAGNEUG_PRODUIT.clear().draw()
            tableModalCAMPAGNEUG_LIGNE.clear().draw()

            $('#modalNewCampagne').modal('show')
        })
    </script>

    <!-- Script de modification de la campagne -->
    <script>
        function chargerTableCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_PRODUIT) {

            $.ajax({

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

                    if (response.success == 1) {

                        tableModalCAMPAGNEUG_LIGNE.clear().draw()

                        response.data.forEach(function(ligne) {

                            tableModalCAMPAGNEUG_LIGNE.row.add({
                                action: ligne.action,
                                QteAffectee: ligne.QteAffectee,
                                QteUniteGratuite: ligne.QteUniteGratuite,
                                checkPalier: ligne.checkPalier
                            }).draw()
                        })

                    } else {

                        notifError(response.msg)
                    }
                },
                error: function(error) {

                    notifError(error)
                }
            })
        }

        function infoCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_LIGNE) {

            $.ajax({

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

                    if (response.success == 1) {

                        _('IDCAMPAGNEUG_LIGNE').value = IDCAMPAGNEUG_LIGNE
                        _('qteCde').value = response.data.QteAffectee
                        _('qteUG').value = response.data.QteUniteGratuite
                        _('PalierSuspendu').checked = response.data.PalierSuspendu

                        completeHandler()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                }
            })
        }

        $(document).on('click', '#editCampagneUG', function() {

            let IDCAMPAGNEUG = $(this).attr('data-id')

            _('NumeroCampagneUG').setAttribute('disabled', '')
            _('modalIDLABORATOIRE').setAttribute('disabled', '')

            _('titleModalCampagne').innerHTML = 'Modifier la campagne'

            $.ajax({

                url: '{{ route('infoCampagneUG') }}',
                type: 'POST',
                beforeSende: progressHandler(),
                data: {

                    IDCAMPAGNEUG: IDCAMPAGNEUG,
                    afficheLigne: true,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    success = response.success;

                    if (success == 1) {

                        initTableModalCAMPAGNEUG_LIGNE(false)

                        _('IDCAMPAGNEUG').value = IDCAMPAGNEUG
                        _('NumeroCampagneUG').value = response.info.NumeroCampagneUG
                        _('ModalTypeCampagne').value = response.info.TypeCampagne
                        _('ModalModeCampagne').value = response.info.ModeCampagne
                        _('periodeCampagne').value = response.info.DateDebutUGFormat + ' - ' + response
                            .info.DateFinUGFormat
                        $('#modalIDLABORATOIRE').val(response.info.IDLABORATOIRE).trigger('change')
                        // alert($('#modalIDLABORATOIRE').val())
                        _('tauxRemb').value = response.info.TauxRemboursement
                        _('suspendre').checked = response.info.SuspendreCampagne

                        _('editCAMPAGNEUG_LIGNE').style.display = 'none'
                        _('newCAMPAGNEUG_LIGNE').style.display = ''

                        // _('btnNewCAMPAGNEUG').style.display = 'none'
                        _('btnEditCAMPAGNEUG').style.display = ''
                        $('#ModalModeCampagne').attr("disabled", "disabled");

                        if(response.info.ModeCampagne == 2){
                            $('#libelleUG').text('Taux :')
                            $('#thUG').text('Taux')
                        }else{
                            $('#libelleUG').text('Qté UG :')
                            $('#thUG').text('Qté UG')
                        }

                        tableModalCAMPAGNEUG_LIGNE.clear().draw()
                        tableModalCAMPAGNEUG_PRODUIT.clear().draw()

                        tableIDPRODUIT = []

                        response.data.forEach(function(ligne) {

                            tableIDPRODUIT.push(ligne.IDPRODUIT)
                            tableModalCAMPAGNEUG_PRODUIT.row.add([ligne.action, ligne
                                .DesignationProduit, ligne.checkSuspendreCampagneProduit
                            ]).draw()
                        })

                        listeProduitDuLaboratoireASelct(response.info.IDLABORATOIRE, tableIDPRODUIT)

                        $('#modalNewCampagne').modal('show')
                        completeHandler()
                    } else {
                        notifError(response.msg);
                        completeHandler()
                    }
                },
                error: function(error) {
                    alert('Erreur: Veuillez réessayer ou contacter votre administrateur')
                    completeHandler()
                }
            })
        })

        // Modification de la campagne
        _('btnEditCAMPAGNEUG').addEventListener('click', function() {

            let formCAMPAGNEUG = new FormData(_('formCAMPAGNEUG'))
            formCAMPAGNEUG.append('_token', "{{ csrf_token() }}")
            formCAMPAGNEUG.append('NumeroCampagneUG', _('NumeroCampagneUG').value)
            formCAMPAGNEUG.append('modalIDLABORATOIRE', _('modalIDLABORATOIRE').value)
            formCAMPAGNEUG.append('ModalModeCampagne', _('ModalModeCampagne').value)
            tableIDPRODUIT_JSON = JSON.stringify(tableIDPRODUIT)
            formCAMPAGNEUG.append('tableIDPRODUIT', tableIDPRODUIT_JSON)

            $.ajax({

                url: '{{ route('editCAMPAGNEUG') }}',
                type: 'POST',
                data: formCAMPAGNEUG,
                beforeSend: progressHandler(),
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    if (response.success == 2) {
                        $("#modalNewCampagne").modal("hide")
                        chargerTableCampagneUg()
                    } else {

                        notifError(response.msg)
                    }

                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                }
            })
        })

        // Sélection d'une ligne de campagne produit
        $(document).on('dblclick', '#tableModalCAMPAGNEUG_PRODUIT tbody tr', function() {

            let ligne = $(this);

            if (ligne.css('background-color') !== 'rgb(194, 224, 233)') {

                let lignes = tableModalCAMPAGNEUG_PRODUIT.rows().nodes()

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

                    value.style.background = ''
                })

                ligne.css({
                    'background-color': '#C2E0E9'
                })

                IDCAMPAGNEUG_PRODUIT = ligne.find('#suppCAMPAGNEUG_PRODUIT').attr('data-id')

                chargerTableCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_PRODUIT)
            } else {

                ligne.css({
                    'background-color': ''
                })
                IDCAMPAGNEUG_PRODUIT = 0

                _('editCAMPAGNEUG_LIGNE').style.display = 'none'
                _('newCAMPAGNEUG_LIGNE').style.display = ''

                _('IDCAMPAGNEUG_LIGNE').value = 0
                _('qteCde').value = 0
                _('qteUG').value = 0

                tableModalCAMPAGNEUG_LIGNE.clear().draw()
            }
        })

        // sélection d'une ligne de campagne ligne
        $(document).on('dblclick', '#tableModalCAMPAGNEUG_LIGNE tbody tr', function() {

            let ligne = $(this);

            if (ligne.css('background-color') !== 'rgb(194, 224, 233)') {

                let lignes = tableModalCAMPAGNEUG_LIGNE.rows().nodes()

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

                    value.style.background = ''
                })

                ligne.css({
                    'background-color': '#C2E0E9'
                })

                IDCAMPAGNEUG_LIGNE = ligne.find('#spanCAMPAGNEUG_LIGNE').attr('data-id')

                infoCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_LIGNE)

                _('qteCde').select()

                _('editCAMPAGNEUG_LIGNE').style.display = ''
                _('newCAMPAGNEUG_LIGNE').style.display = 'none'

            } else {

                ligne.css({
                    'background-color': ''
                })

                _('IDCAMPAGNEUG_LIGNE').value = 0
                _('qteCde').value = 0
                _('qteUG').value = 0

                _('editCAMPAGNEUG_LIGNE').style.display = 'none'
                _('newCAMPAGNEUG_LIGNE').style.display = ''
            }
        })

        _('qteCde').addEventListener('keyup', function(e) {

            if (e.keyCode == 13) {

                _('qteUG').select()
            }
        })

        _('qteUG').addEventListener('keyup', function(e) {

            if (e.keyCode == 13) {

                if (_('newCAMPAGNEUG_LIGNE').style.display == '') {

                    _('newCAMPAGNEUG_LIGNE').click()
                } else {

                    _('editCAMPAGNEUG_LIGNE').click()
                }
            }
        })

        // Modification de la campagne ligne
        _('editCAMPAGNEUG_LIGNE').addEventListener('click', function() {

            if (IDCAMPAGNEUG_PRODUIT == 0) {

                ('editCAMPAGNEUG_LIGNE').style.display = 'none'
                _('newCAMPAGNEUG_LIGNE').style.display = ''

                _('IDCAMPAGNEUG_LIGNE').value = 0
                _('qteCde').value = 0
                _('qteUG').value = 0

                tableModalCAMPAGNEUG_LIGNE.clear().draw()
            } else {

                $.ajax({

                    url: '{{ route('editCAMPAGNEUG_LIGNE') }}',
                    type: 'POST',
                    beforeSend: progressHandler(),
                    data: {
                        IDCAMPAGNEUG_LIGNE: IDCAMPAGNEUG_LIGNE,
                        QteAffectee: _('qteCde').value,
                        QteUniteGratuite: _('qteUG').value,
                        PalierSuspendu: _('PalierSuspendu').checked,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 1) {

                            _('IDCAMPAGNEUG_LIGNE').value = 0
                            _('qteCde').value = 0
                            _('qteUG').value = 0
                            _('PalierSuspendu').checked = false

                            _('editCAMPAGNEUG_LIGNE').style.display = 'none'
                            _('newCAMPAGNEUG_LIGNE').style.display = ''

                            notif('success', 'Succès', 'MODIFICATION ÉFFECTUÉE')
                            completeHandler()
                            chargerTableCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_PRODUIT)
                        } else {

                            notifError(response.msg)
                            completeHandler()
                        }
                    }
                })
            }
        })


        $('#modalNewCampagne').on('hidden.bs.modal', function(evt) {
            setIdOnfirstOpenModalBeforeProd(evt.target.id)
        })
    </script>

    <!-- Script de nouveau produit de la campagne -->
    <script>
        // click sur le bouton
        _('btnModalNewProduit').addEventListener('click', function() {

            if(_("ModalTypeCampagne").value == "2"){
                listeProduitDuLaboratoireASelct("".value, [])
            }else{
                if (_('IDCAMPAGNEUG').value.replace(/\s/g, '') == '' || _('IDCAMPAGNEUG').value.replace(/\s/g, '') ==
                    0) {
    
                    if (_('modalIDLABORATOIRE').value != 0) {
                        listeProduitDuLaboratoireASelct(_('modalIDLABORATOIRE').value, [])
                    } else {
    
                        notif('danger', 'Erreur', 'VEUILLEZ SÉLECTIONNER UN LABORATOIRE')
    
                        return 0
                    }
                }
            }


            $('#modalNewCampagne').modal('hide')
            $('#modalSelectProd').modal('show')

        })

        // Fermétture de la modal de sélection des produits
        $(document).on('click', '.closeModalSelectProd', function() {
            $('#modalNewCampagne').modal('show')
        })

        // Valider la sélection des produit à ratacher à la campagne
        _('btnValiderSelectProduit').addEventListener('click', function() {

            let tableProduitSelect = []

            $.each($('.checkSelectProduit'), function(key, value) {

                if ($(value).prop('checked') == true) {

                    tableProduitSelect.push($(value).attr('data-id'))
                }
            })

            let formCAMPAGNEUG = new FormData(_('formCAMPAGNEUG'))
            formCAMPAGNEUG.append('_token', '{{ csrf_token() }}')
            formCAMPAGNEUG.append('tableProduitSelect', JSON.stringify(tableProduitSelect))

            $.ajax({

                url: '{{ route('newCAMPAGNEUG_PRODUIT') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: formCAMPAGNEUG,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {

                    if (response.success == 2) {

                        $.ajax({

                            url: '{{ route('infoCampagneUG') }}',
                            type: 'POST',
                            beforeSende: progressHandler(),
                            data: {

                                IDCAMPAGNEUG: _('IDCAMPAGNEUG').value,
                                afficheLigne: true,
                                _token: '{{ csrf_token() }}'
                            },
                            dataType: 'json',
                            success: function(response) {

                                success = response.success;

                                if (success == 1) {

                                    tableModalCAMPAGNEUG_LIGNE.clear().draw()
                                    tableModalCAMPAGNEUG_PRODUIT.clear().draw()

                                    tableIDPRODUIT = []

                                    response.data.forEach(function(ligne) {

                                        tableIDPRODUIT.push(ligne.IDPRODUIT)
                                        tableModalCAMPAGNEUG_PRODUIT.row.add([ligne
                                            .action, ligne
                                            .DesignationProduit, ligne
                                            .checkSuspendreCampagneProduit
                                        ]).draw()
                                    })

                                    listeProduitDuLaboratoireASelct(response.info
                                        .IDLABORATOIRE, tableIDPRODUIT)

                                    $('#modalSelectProd').modal('hide')
                                    $('#modalNewCampagne').modal('show')
                                    completeHandler()
                                } else {

                                    notifError(response.msg);
                                    completeHandler()
                                }
                            },
                            error: function(error) {
                                notifError(
                                    'Erreur: Veuillez réessayer ou contacter votre administrateur'
                                    )
                                completeHandler()
                            }
                        })
                    } else if (response.success == 3) {

                        _('IDCAMPAGNEUG').value = response.IDCAMPAGNEUG
                        _('NumeroCampagneUG').value = response.NumeroCampagneUG
                        _('modalIDLABORATOIRE').setAttribute('disabled', '')

                        $.ajax({

                            url: '{{ route('infoCampagneUG') }}',
                            type: 'POST',
                            beforeSende: progressHandler(),
                            data: {

                                IDCAMPAGNEUG: _('IDCAMPAGNEUG').value,
                                afficheLigne: true,
                                _token: '{{ csrf_token() }}'
                            },
                            dataType: 'json',
                            success: function(response) {

                                success = response.success;

                                if (success == 1) {

                                    tableModalCAMPAGNEUG_LIGNE.clear().draw()
                                    tableModalCAMPAGNEUG_PRODUIT.clear().draw()

                                    tableIDPRODUIT = []

                                    response.data.forEach(function(ligne) {

                                        tableIDPRODUIT.push(ligne.IDPRODUIT)
                                        tableModalCAMPAGNEUG_PRODUIT.row.add([ligne
                                            .action, ligne
                                            .DesignationProduit, ligne
                                            .checkSuspendreCampagneProduit
                                        ]).draw()
                                    })

                                    listeProduitDuLaboratoireASelct(response.info
                                        .IDLABORATOIRE, tableIDPRODUIT)

                                    _('btnEditCAMPAGNEUG').style.display = ''

                                    $('#modalSelectProd').modal('hide')
                                    $('#modalNewCampagne').modal('show')
                                    completeHandler()

                                    chargerTableCampagneUg()
                                } else {

                                    notifError(response.msg);
                                    completeHandler()
                                }
                            },
                            error: function(error) {
                                completeHandler()
                            }
                        })
                    } else if (response.success == 0) {

                        notifError(response.msg)
                        completeHandler()
                    } else {

                        notif('danger', 'Erreur', response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        })
    </script>

    <!-- Script de suppression de campagne produit -->
    <script>
        // Suppression de campagne produit
        $(document).on('click', '#suppCAMPAGNEUG_PRODUIT', function() {

            let IDCAMPAGNEUG_PRODUIT = $(this).attr('data-id')

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer cette campagne !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

                        url: '{{ route('suppCAMPAGNEUG_PRODUIT') }}',
                        type: 'POST',
                        beforeSend: progressHandler(),
                        data: {
                            _token: '{{ csrf_token() }}',
                            IDCAMPAGNEUG_PRODUIT: IDCAMPAGNEUG_PRODUIT
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.success == 2) {

                                $.ajax({

                                    url: '{{ route('infoCampagneUG') }}',
                                    type: 'POST',
                                    beforeSende: progressHandler(),
                                    data: {

                                        IDCAMPAGNEUG: _('IDCAMPAGNEUG').value,
                                        afficheLigne: true,
                                        _token: '{{ csrf_token() }}'
                                    },
                                    dataType: 'json',
                                    success: function(response) {

                                        success = response.success;

                                        if (success == 1) {

                                            tableModalCAMPAGNEUG_LIGNE.clear()
                                            .draw()
                                            tableModalCAMPAGNEUG_PRODUIT.clear()
                                                .draw()

                                            tableIDPRODUIT = []

                                            response.data.forEach(function(ligne) {

                                                tableIDPRODUIT.push(ligne
                                                    .IDPRODUIT)
                                                tableModalCAMPAGNEUG_PRODUIT
                                                    .row.add([ligne.action,
                                                        ligne
                                                        .DesignationProduit,
                                                        ligne
                                                        .checkSuspendreCampagneProduit
                                                    ]).draw()
                                            })

                                            listeProduitDuLaboratoireASelct(response
                                                .info.IDLABORATOIRE,
                                                tableIDPRODUIT)

                                            completeHandler()

                                            notif('success', 'Succès',
                                                'SUPRESSION ÉFFECTUÉE')
                                        } else {
                                            notifError(response.msg);
                                            completeHandler()
                                        }
                                    },
                                    error: function(error) {
                                        alert(
                                            'Erreur: Veuillez réessayer ou contacter votre administrateur')
                                        completeHandler()
                                    }
                                })
                            }
                        },
                        error: function(error) {

                            completeHandler()
                            notifError(error)
                        }
                    })
                }
            })
        })
    </script>

    <!-- Script de suppression de campagne ligne -->
    <script>
        $(document).on('click', '#suppCAMPAGNEUG_LIGNE', function() {

            let IDCAMPAGNEUG_LIGNE = $(this).attr('data-id')

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer cette ligne !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

                        url: '{{ route('suppCAMPAGNEUG_LIGNE') }}',
                        type: 'POST',
                        beforeSend: progressHandler(),
                        data: {
                            _token: '{{ csrf_token() }}',
                            IDCAMPAGNEUG_LIGNE: IDCAMPAGNEUG_LIGNE,
                            IDCAMPAGNEUG_PRODUIT: IDCAMPAGNEUG_PRODUIT
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.success == 2) {

                                chargerTableCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_PRODUIT)
                            } else if (response.success == 1) {

                                notif('danger', 'Erreur',
                                    'Ce produit est déja associé à des opérations')
                            } else {

                                notifError(error)
                            }
                            completeHandler()
                        },
                        error: function(error) {

                            completeHandler()
                            notifError(error)
                        }
                    })
                }
            })
        })
    </script>

    <!-- Script de nouvelle campagne ug ligne -->
    <script>
        _('newCAMPAGNEUG_LIGNE').addEventListener('click', function() {

            if (_('qteCde').value <= 0 || _('qteCde').value.replace(/\s/g, '') == '') {

                notif('danger', 'Erreur', 'Veuillez saisir une quantité supérieur à 0')
                _('qteCde').select()
                return 0
            }

            if (_('qteUG').value <= 0 || _('qteUG').value.replace(/\s/g, '') == '') {

                notif('danger', 'Erreur', 'Veuillez saisir une quantité supérieur à 0')
                _('qteUG').select()
                return 0
            }

            if (IDCAMPAGNEUG_PRODUIT == 0) {

                _('IDCAMPAGNEUG_LIGNE').value = 0
                _('qteCde').value = 0
                _('qteUG').value = 0

                tableModalCAMPAGNEUG_LIGNE.clear().draw()
            } else {

                $.ajax({

                    url: '{{ route('newCAMPAGNEUG_LIGNE') }}',
                    type: 'POST',
                    beforeSend: progressHandler(),
                    data: {
                        IDCAMPAGNEUG: _('IDCAMPAGNEUG').value,
                        IDCAMPAGNEUG_PRODUIT: IDCAMPAGNEUG_PRODUIT,
                        QteAffectee: _('qteCde').value,
                        QteUniteGratuite: _('qteUG').value,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 2) {

                            _('IDCAMPAGNEUG_LIGNE').value = 0
                            _('qteCde').value = 0
                            _('qteUG').value = 0

                            notif('success', 'Succès', 'AJOUT ÉFFECTUÉ')
                            completeHandler()
                            chargerTableCAMPAGNEUG_LIGNE(IDCAMPAGNEUG_PRODUIT)
                        } else if (response.success == 1) {

                            notif('danger', 'Erreur', 'CE PALIER EXISTE DEJA')
                            completeHandler()
                        } else {

                            notifError(response.msg)
                            completeHandler()
                        }
                    }
                })
            }
        })
    </script>

    <!-- Script de suspension de campagne produit -->
    <script>
        $(document).on('click', '.checkSuspendreCAMPAGNEUG_PRODUIT', function(e) {

            let elmt = this

            let IDCAMPAGNEUG_PRODUIT = $(this).attr('data-id')

            e.preventDefault()

            let value = this.checked

            $.ajax({

                url: '{{ route('checkSuspendreCAMPAGNEUG_PRODUIT') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    IDCAMPAGNEUG_PRODUIT: IDCAMPAGNEUG_PRODUIT,
                    value: value,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        elmt.checked = value
                        completeHandler()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                }
            })
        })
    </script>

    <!-- Script de sélection des lignes -->
    <script>
        _('checkSelectAll').addEventListener('click', function() {

            let value = this.checked

            let lignes = tableCampagneUg.rows().nodes()

            $(lignes).find('.checkSelectLigne').prop('checked', value)
        })

        $(document).on('click', '.checkSelectLigne', function() {

            if (_('checkSelectAll').checked == true) {
                _('checkSelectAll').checked = false
            }
        })
    </script>

    <!-- Script de suppression -->
    <script>

        function listeLigneSelectionneDjan() {

            let data = []

            let lignes = tableCampagneUg.rows().nodes()

            $(lignes).find('.checkSelectLigne:checked').each(function () {

                data.push($(this).attr('data-id'))
            });

            return data
        }

        function suppressionDeCampagne() {

            let listeIDCAMPAGNEUG = listeLigneSelectionneDjan();

            $.ajax({

                url: '{{ route('suppCAMPAGNEUG') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    _token: '{{ csrf_token() }}',
                    listeIDCAMPAGNEUG: listeIDCAMPAGNEUG
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        notif('success', 'Succes', 'Suppression des campagnes qui n\'ont pas d\'opération éffectué')
                        chargerTableCampagneUg()
                        completeHandler()
                    } else {

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

                    completeHandler()
                    notifError(error)
                }
            })
        }

        $(document).on('click', '#suppLignesCochee', function(){

            let listeIDCAMPAGNEUG = listeLigneSelectionneDjan();           
            
            if (listeIDCAMPAGNEUG.length == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à supprimer')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', suppressionDeCampagne, null)
        })

        $(document).on('click', '#labelSuppLignesCochee', function(){

            $('#suppLignesCochee').click()
        })

        $(document).on('click', '#btnExportExcel', function() {
            var data = remplissage_avec_data_columns_DataTable('tableCampagneUg')
            const filename = file_name("PROMO_LABO");
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename)
        })

        $(document).on('click','#btn-export-factureCampagne-excel',function(){
            var data =  remplissage_avec_row_add_DataTable('FactureCampagneUGTable')
            const filename =file_name("FACTURE_CAMPAGNE");
                const tabs_format = {
                F: '#,##0',
                G: '#,##0',
                H: '#,##0',
                I: '#,##0',
                J: '#,##0',
                E: '#,##0',
                
            };
            download_excel_file('{{route("export_global_excel.export")}}', data, filename,[],tabs_format)
        })
    </script>

@endsection