@extends('models')
@section('titre-page', 'Chiffres d\'affaire')
@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-2">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Contrôle</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Chiffre d'affaire</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-md-8">

                    {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="card">

        <div class="card-body">

            <nav class="nav nav-pills flex-column flex-sm-row mb-3" role="tablist">
                <a class="flex-sm-fill text-sm-center nav-link active" data-bs-toggle="tab" role="tab"
                    aria-current="page" href="#CAMensuel" aria-selected="true">CA MENSUEL</a>
                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#ChaCLIENT" aria-selected="false">ANALYSE CA 3-6-12</a>
                <a class="flex-sm-fill text-sm-center nav-link " data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#CAParClient" aria-selected="false">CA PAR CLIENT</a>
                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#StatMOIS" aria-selected="false">CA QUOTIDIEN</a>
                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#StatMOISM2" aria-selected="false">CA/OBJECTIF ANNUEL</a>

                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#ChaCOMMERCIAL" aria-selected="false">SUIVI CDE CLIENT PAR HEURE</a>

                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#ChaCOMMERCIAL2" aria-selected="false">SUIVI CDE CLIENT PAR HEURE 2</a>
            </nav>
            <div class="tab-content">
                <div class="tab-pane text-muted active" id="CAMensuel" role="tabpanel">

                    <div class="card">

                        <div class="p-3">

                            <div class="card">
                                <div class="p-2 mb-2  ">

                                    <div class="row">
                                        <div class="col-xl-2"></div>
                                        <div class="col-xl-3">
                                            <label for="" class="mt-2">Agence</label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceListSelect"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                            </select>
                                        </div>

                                        <div class="col-xl-2">
                                            <label for="" class="mt-2">Mois </label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select MoisEnLettre" id="MoisEnLettre"></select>
                                        </div>

                                        <div class="col-xl-2">
                                            <label for="" class="mt-2">Année </label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select InputAnneeCAMensuel"
                                                id="InputAnneeCAMensuel">

                                            </select>
                                        </div>

                                        <div class="col-xl-2" style="margin-top:24px;">
                                            <div class="d-flex">
                                                <div id="BlockBtnSearchCaMensuel" class="me-1">
                                                    <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                                        id="ActualisationDonneeMensuel"
                                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                                            style="font-size:17px;"></i></span>
                                                </div>

                                                

                                                <div id="BlockSearchBtnLoadCaMensuel" class="me-1" style="display:none">
                                                    <span role="button"
                                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;">
                                                        <span class="spinner-border spinner-border-sm" role="status"
                                                            aria-hidden="true"></span>
                                                    </span>
                                                </div>

                                                  <div id="ExportCaDonneeMensuelDisplay" style="display:none" class="me-1">
                                                    <span data-bs-toggle="tooltip" title="Export" role="button"
                                                        id="ExportCaDonneeMensuel"
                                                        class="badge bg-success d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                                            style="font-size:17px;"></i></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-2"></div>
                                    </div>

                                </div>
                            </div>

                            <div class="mb-1">
                            <a class="btn btn-success btn-sm " id="exporterTotauxCaMensuel" role="button"><i class="ri ri-file-excel-2-line" ></i> Exporter</a>
                            </div>
                            <div class="table-responsive">

                                <table id="recapCAAnuelleTable" class="table  table-striped tablehover RadiusBorder"
                                    align="center">
                                    <thead class="bg-thead">
                                        <tr>
                                            <th>Mode Cmde</th>
                                            <th class="text-center">CA</th>
                                            <th class="text-center">Nbre Client</th>
                                            <th class="text-center">Nbre Cde</th>
                                            <th class="text-center">P Moy Client</th>
                                            <th class="text-center">P Moy Cde</th>
                                        </tr>

                                    </thead>

                                    <tbody>


                                        <tr>
                                            <td style="background: rgb(136, 219, 244)">TÉLÉMARKET</td>
                                            <td class="text-end" id="TotalTEL_CA">0</td>
                                            <td class="text-end" id="TotalNbreClientTEL">0</td>
                                            <td class="text-end" id="TotalNbreCmdeTEL">0</td>
                                            <td class="text-end" id="TotalPanierMoyenClientTEL">0</td>
                                            <td class="text-end" id="TotalPanierMoyenCommandeTEL">0</td>
                                        </tr>

                                         <tr>
                                            <td style="background:rgb(233,248,252)">CALL OUT</td>
                                            <td class="text-end" id="TotalCO_CA">0</td>
                                            <td class="text-end" id="TotalNbreClientCO">0</td>
                                            <td class="text-end" id="TotalNbreCmdeCO">0</td>
                                            <td class="text-end" id="TotalPanierMoyenClientCO">0</td>
                                            <td class="text-end" id="TotalPanierMoyenCommandeCO">0</td>
                                        </tr>


                                        <tr>
                                            <td style="background: rgb(214, 236, 243)">EXTRANET</td>
                                            <td class="text-end" id="TotalEXT_CA">0</td>
                                            <td class="text-end" id="TotalNbreClientEXT">0</td>
                                            <td class="text-end" id="TotalNbreCmdeEXT">0</td>
                                            <td class="text-end" id="TotalPanierMoyenClientEXT">0</td>
                                            <td class="text-end" id="TotalPanierMoyenCommandeEXT">0</td>
                                        </tr>


                                        <tr>
                                            <td style="background: rgb(233, 245, 249)">PHARMA ML</td>
                                            <td class="text-end" id="TotalPML_CA">0</td>
                                            <td class="text-end" id="TotalNbreClientPML">0</td>
                                            <td class="text-end" id="TotalNbreCmdePML">0</td>
                                            <td class="text-end" id="TotalPanierMoyenClientPML">0</td>
                                            <td class="text-end" id="TotalPanierMoyenCommandePML">0</td>
                                        </tr>


                                        <tr>
                                            <td style="background: rgb(247, 245, 245)">TEDIS DIRECT</td>
                                            <td class="text-end" id="TotalTD_CA">0</td>
                                            <td class="text-end" id="TotalNbreClientTD">0</td>
                                            <td class="text-end" id="TotalNbreCmdeTD">0</td>
                                            <td class="text-end" id="TotalPanierMoyenClientTD">0</td>
                                            <td class="text-end" id="TotalPanierMoyenCommandeTD">0</td>
                                        </tr>

                                        <tr style="background: #E5E1F5">

                                            <td style="border-bottom-left-radius: 5px;">TOTAUX</td>
                                            <td id="Totaux_CA" class="text-end">0</td>
                                            <td id="TotauxNbreClient" class="text-end">0</td>
                                            <td id="TotauxNbreCmde" class="text-end">0</td>
                                            <td id="TotauxPanierMoyenClient" class="text-end">0</td>
                                            <td style="border-bottom-right-radius: 5px;" id="TotauxPanierMoyenCommande"
                                                class="text-end">0</td>

                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>
                    <div class="table-responsive">

                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="CAMensuelTable">
                            <thead class="bg-thead">
                                <tr>
                                    <th>Jour</th>
                                    <th>Férié</th>
                                    <th>Date</th>
                                    <th>CA Jour</th>
                                    <th>CA Jour Cumulé</th>
                                    <th>Client Jour</th>
                                    <th>Cde Jour</th>
                                    <th>P Moyen Cmde</th>
                                    <th>P Moyen Client</th>

                                    {{-- TEL --}}
                                    <th>CA Cde TEL</th>
                                    <th>Nbre Client TEL</th>
                                    <th>Nbre Cde TEL</th>
                                    <th>% CA Cde TEL</th>
                                    <th>P Moyen Cde TEL</th>
                                    <th>P Moyen Client TEL</th>
                                    <th class="colorSeparator"></th>

                                    {{-- CALL OUT --}}
                                    <th>CA Cde CO</th>
                                    <th>Nbre Client CO</th>
                                    <th>Nbre Cde CO</th>
                                    <th>% CA Cde CO</th>
                                    <th>P Moyen Cde CO</th>
                                    <th>P Moyen Client CO</th>
                                    <th class="colorSeparator"></th>

                                    {{-- EXTRANET --}}
                                    <th>CA Cde Ext</th>
                                    <th>Nbre Client Ext</th>
                                    <th>Nbre Cde Ext</th>
                                    <th>% CA Cde Ext</th>
                                    <th>P Moyen Cde Ext</th>
                                    <th>P Moyen Client Ext</th>
                                    <th class="colorSeparator"></th>

                                    {{-- PML --}}
                                    <th>CA Cde PML</th>
                                    <th>Nbre Client PML</th>
                                    <th>Nbre Cde PML</th>
                                    <th>% CA Cde PML</th>
                                    <th>P Moyen Cde PML</th>
                                    <th>P Moyen Client PML</th>
                                    <th class="colorSeparator"></th>

                                    {{-- TD --}}
                                    <th>CA Cde TD</th>
                                    <th>Nbre Client TD</th>
                                    <th>Nbre Cde TD</th>
                                    <th>% CA Cde TD</th>
                                    <th>P Moyen Cde TD</th>
                                    <th>P Moyen Client TD</th>
                                    <th class="colorSeparator"></th>


                                    <th>Avoir</th>
                                    <th>CA Net</th>
                                    <th>Nb Prod en Stock</th>
                                    <th>Valeur Achat</th>

                                    <th>Valeur Cession</th>

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

                <!---------------------------------------------------------------------------------------------------->
                <!----------------------------------- CA PAR CLIENT ----------------------------------->
                <!---------------------------------------------------------------------------------------------------->

                <div class="tab-pane text-muted" id="ChaCLIENT" role="tabpanel">
                    <div class="card" style="background:#edeeee">

                        <div class="card-body">

                            <div class="card">
                                <div class="p-2 mb-3">

                                    <div class="row g-3">
                                        <div class="col-xl-3"></div>
                                        <div class="col-xl-2">
                                            <label for="" class="mt-2">Mois </label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select MoisEnLettre"
                                                id="MoisEnLettreAnalyseCA"></select>
                                        </div>

                                        <div class="col-xl-2">
                                            <label for="" class="mt-2">Année</label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select InputAnneeCAMensuel"
                                                id="InputAnneeAnalyseCA">

                                            </select>
                                        </div>

                                        <div class="col-xl-3" style="margin-top:43px;">
                                            <div class="d-flex">

                                                <div id="BlockBtnSearchAnalyseCA" class="me-1">
                                                    <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                                        id="SearchAnalyseCA"
                                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                                            style="font-size:17px;"></i></span>
                                                </div>

                                                <div id="BlockBtnLoadAnalyseCA" class="me-1" style="display:none">
                                                    <span role="button"
                                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;">
                                                        <span class="spinner-border spinner-border-sm" role="status"
                                                            aria-hidden="true"></span>
                                                    </span>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="col-xl-2"></div>
                                    </div>

                                </div>
                            </div>



                            <div class="row g-2">

                                <div class="col-xl-8">
                                    <div class="d-flex flex-wrap " id="GenerationTableauDynamique"></div>
                                </div>


                                <div class="col-xl-4">
                                    <div
                                        style="background:rgb(230,83,60);color:#fff;padding:5px; text-align:center;border-top-left-radius: 5px; border-top-right-radius: 5px;">
                                        Suivie Evolution Objectif Annuel</div>
                                    <div class="table-responsive">

                                        <table class="tablehover customStriped text-nowrap w-100 tablehover">
                                            <thead>
                                                <th>#</th>
                                                <th>CA Consolidé</th>
                                                <th>Objectif Annuel</th>
                                                <th>Réalisé sur Objectif</th>
                                            </thead>
                                            <tbody id="tabEvo">

                                            </tbody>
                                        </table>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!---------------------------------------------------------------------------------------------------->
                <!----------------------------------- STATISTIQUE PAR CLIENT --------------------------->
                <!---------------------------------------------------------------------------------------------------->
                <div class="tab-pane show  text-muted" id="CAParClient" role="tabpanel">
                    <div class="card rounded" style="background:#edeeee">
                        <div class="p-1">
                            <!-- <div class="card"> -->
                            <div class="card-body bg-white rounded">
                                <form id="formFiltre">
                                    <div class="row">
                                        <div class="col-xl-11 col-md-10">
                                            <div class="row">
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Période 1</p>
                                                    <input type="text" name="periode1"
                                                        class="form-control daterange text-center" style="padding :6px"
                                                        id="dateInputSearch">
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Période 2</p>
                                                    <input type="text" name="periode2"
                                                        class="form-control daterange text-center" style="padding :6px"
                                                        id="dateInputSearch">
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Période 3</p>
                                                    <input type="text" name="periode3"
                                                        class="form-control daterange text-center" style="padding :6px"
                                                        id="dateInputSearch">
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Site </p>
                                                    <select class="form-select" id="IDAGENCE" name="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

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

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

                                                    </select>
                                                </div>
                                                <div class="col-xl-6 mb-0">
                                                    <p class="mb-0 text-muted">Groupement client&nbsp;:</p>
                                                    <select class="js-example-basic-single form-select"
                                                        id="IDGROUPEMENT_CLIENT" name="IDGROUPEMENT_CLIENT">

                                                    </select>
                                                </div>
                                                <div class="col-xl-6 mb-0 me-0 pe-e">
                                                    <p class="mb-0 text-muted">Tournée client&nbsp;:</p>
                                                    <select class="js-example-basic-single form-select" id="IDTOURNEE"
                                                        name="IDTOURNEE">

                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-1 col-md-2 pt-xl-1 row">
                                            <div class="col-xl-12 p-0 mb-0 mt-xl-3 mb-1">
                                                <button class="btn btn-primary w-100" id="btnFiltre">
                                                    <i class="ri-search-line fs-18"></i>
                                                </button>
                                            </div>
                                            <div class="col-xl-12 p-0 mt-0 mb-1">
                                                <button class="btn btn-success w-100" id="btnExport">
                                                    <i class="ri-file-excel-2-line fs-16"></i>
                                                </button>
                                            </div>
                                            <div class="col-xl-12 p-0 mt-0">
                                                <button class="btn btn-warning-transparent w-100"
                                                    id="btnModalDetailCAParClient">
                                                    <i class="ri-table-2 fs-16"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="tableCAPARCLIENT">
                            <thead class="bg-thead">
                                <tr>
                                    <th class="text-center" data-column="commecial">CCIAL</th>
                                    <th class="text-center" data-column="IntentionCde" data-class="text-center">INTENTION<br>COMMANDE</th>
                                    <th class="text-center" data-column="NomAgence">AGENCE</th>
                                    <th class="text-center" data-column="CodeClient" data-class="text-center">CODE CLIENT</th>
                                    <th class="text-center" data-column="NomClient">CLIENT</th>
                                    <th class="text-center" data-column="couleur">C</th>
                                    <th data-column="NbTel1" data-class="text-center">NBRE <br> FACT. TEL.</th>
                                    <th class="text-center" data-column="NbExt1" data-class="text-center">NBRE <br> FACT.
                                        EXT.</th>
                                    <th class="text-center" data-column="NbPharma1" data-class="text-center">NBRE FACT.
                                        <br>PHARMA ML.</th>
                                    <th class="text-center" data-column="NbTd1" data-class="text-center">NBRE FACT.
                                        <br>TEDIS-DIRECT</th>
                                    <th class="text-center" data-column="NbRef1" data-class="text-center">NBRE REFERENCE
                                    </th>
                                    <th class="text-center" data-column="VenteHT1" data-class="text-end pe-3">VALEUR
                                        VENTE HT</th>
                                    <th data-orderable="false" class="bg-danger" data-column="vide"
                                        data-class="text-center"></th>
                                    <th class="text-center" data-column="NbTel2" data-class="text-center">NBRE <br> FACT.
                                        TEL.</th>
                                    <th class="text-center" data-column="NbExt2" data-class="text-center">NBRE <br> FACT.
                                        EXT.</th>
                                    <th class="text-center" data-column="NbPharma2" data-class="text-center">NBRE FACT.
                                        <br>PHARMA ML.</th>
                                    <th class="text-center" data-column="NbTd2" data-class="text-center">NBRE FACT.
                                        <br>TEDIS-DIRECT</th>
                                    <th class="text-center" data-column="NbRef2" data-class="text-center">NBRE REFERENCE
                                    </th>
                                    <th class="text-center" data-column="VenteHT2" data-class="text-end pe-3">VALEUR
                                        VENTE HT</th>
                                    <th data-orderable="false" class="bg-danger" data-column="vide"
                                        data-class="text-center"></th>
                                    <th class="text-center" data-column="NbTel3" data-class="text-center">NBRE <br> FACT.
                                        TEL.</th>
                                    <th class="text-center" data-column="NbExt3" data-class="text-center">NBRE <br> FACT.
                                        EXT.</th>
                                    <th class="text-center" data-column="NbPharma3" data-class="text-center">NBRE FACT.
                                        <br>PHARMA ML.</th>
                                    <th class="text-center" data-column="NbTd3" data-class="text-center">NBRE FACT.
                                        <br>TEDIS-DIRECT</th>
                                    <th class="text-center" data-column="NbRef3" data-class="text-center">NBRE REFERENCE
                                    </th>
                                    <th class="text-center" data-column="VenteHT3" data-class="text-end pe-3">VALEUR
                                        VENTE HT</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!---------------------------------------------------------------------------------------------------->
                <!----------------------------------- STATISTIQUE PAR MOIS ------------------------------>
                <!---------------------------------------------------------------------------------------------------->
                <div class="tab-pane text-muted" id="StatMOIS" role="tabpanel">

                    <div class="row g-2 mb-4">
                        <div class="col-xl-1"></div>
                        <div class="col-xl-2">
                            <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceList"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                            </select>
                        </div>

                        <div class="col-xl-7">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="row g-1">
                                        <div class="col-xl-7">
                                            <label for="" class="mt-2">Mois</label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select MoisEnLettre" id="MoisSelect_DD"></select>

                                        </div>
                                        <div class="col-xl-5">
                                            <label for="" class="mt-2">Année</label> <span
                                                class="mt-2 me-2">:</span>
                                            <input class="form-control" id="annee_DD" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="row g-1">
                                        <div class="col-xl-7">
                                            <label for="" class="mt-2">Mois</label> <span
                                                class="mt-2 me-2">:</span>
                                            <select class="Pselect2 form-select MoisEnLettre" id="MoisSelect_DF"></select>

                                        </div>
                                        <div class="col-xl-5">
                                            <label for="" class="mt-2">Année</label> <span
                                                class="mt-2 me-2">:</span>
                                            <input class="form-control" id="annee_DF" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

                            <div class="d-flex">

                                <div id="BlockBtnCAQuotidien" class="me-1 mt-4">
                                    <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                        id="SearchCAQuotidient"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                            style="font-size:17px;"></i></span>
                                </div>
                                <div id="BlockBtnLoadCAQuotidien" class="me-1 mt-4" style="display:none">
                                    <span role="button"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                    </span>
                                </div>

                                <div  id="ExportCaQuotidienDisplay" style="display:none"  class="me-1  mt-4">
                                                    <span data-bs-toggle="tooltip" title="Export" role="button"
                                                        id="ExportCaQuotidien"
                                                        class="badge bg-success d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                                            style="font-size:17px;"></i></span>
                                 </div>

                            </div>

                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="CAQuotidienTable">
                            <thead class="bg-thead" id="dynamicTableHeader">

                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>

                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>


                            <tbody id="TableligneStructure">

                            </tbody>

                        </table>
                    </div>
                </div>
                <!---------------------------------------------------------------------------------------------------->
                <!----------------------------------- STATISTIQUE PAR MOIS M2 ------------------------------>
                <!---------------------------------------------------------------------------------------------------->
                <div class="tab-pane text-muted" id="StatMOISM2" role="tabpanel">


                    <div class="row g-2 mb-4">

                        <div class="col-xl-2">
                            <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceListCA_AN"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                            </select>
                        </div>
                        <div class="col-xl-2">
                            <label for="" class="mt-2">Année</label> <span class="mt-2 me-2">:</span>
                            <input class="form-control text-center" id="annee_DD_CA_AN" value="2024" />
                        </div>
                        <div class="col-xl-3">
                            <label for="" class="mt-2">Client</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select " id="IDCLIENT_CA_AN">

                            </select>
                        </div>
                        <div class="col-xl-3">
                            <label for="" class="mt-2">Commercial</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select" id="IDPERSONNEL_CA_AN">

                            </select>
                        </div>

                        <div class="col-xl-2">
                            <div class="d-flex">
                                <div id="BlockBtnCA_AN" class="me-1 mt-4">
                                    <span data-bs-toggle="tooltip" title="Recherche" role="button" id="SearchCA_AN"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                            style="font-size:17px;"></i></span>
                                </div>
                                <div id="BlockBtnLoadCA_AN" class="me-1 mt-4" style="display:none">
                                    <span role="button"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                    </span>
                                </div>

                                 <div id="ExportCaObjectifAnnuelDisplay" style="display:none"  class="me-1  mt-4">
                                                    <span data-bs-toggle="tooltip" title="Export" role="button"
                                                        id="ExportCaObjectifAnnuel"
                                                        class="badge bg-success d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                                            style="font-size:17px;"></i></span>
                                 </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="StatCaAnnuel">
                            <thead class="bg-thead">
                                <tr>
                                    <th data-class="text-center" data-column="action">
                                        <input class="form-check-input me-4" type="checkbox" id="checkCaAnAll">
                                        #
                                    </th>
                                    <th data-class="text-start" data-column="NomPrenomPersonnel">Ccial</th>
                                    <th data-class="text-center" data-column="CodeClient">Code client</th>
                                    <th data-class="text-start" data-column="NomClient">Client</th>
                                    <th data-class="text-center" data-column="IntentionCommande">Intention<br>Commande</th>
                                    <th data-class="text-center" data-column="ObjectifAnnuelle">Objectifs mensuel cumulé</th>
                                    <th data-class="text-end" data-column="CA_Remisable">CA à date</th>
                                    <th data-class="text-end" data-column="CA_Remisable">CA Remisable à date</th>
                                    <th data-class="text-end" data-column="TxRealisationAnnuelle">Tx Réalisation</th>
                                    <th data-class="text-end" data-column="DifferencielAnnuelle">Différentiel CA</th>
                                    <th data-class="text-center" data-column="vide1"></th>
                                    <th data-class="text-center" data-column="ObjectifS1">CA Objectif Semestre 1</th>
                                    <th data-class="text-center" data-column="CA_Semestre1">CA S1 à date</th>
                                    <th data-class="text-center" data-column="TxRealisationS1">Tx Réalisation</th>
                                    <th data-class="text-center" data-column="DifferencielS1">Differentiel CA S1</th>
                                    <th data-class="text-center" data-column="vide2"></th>
                                    <th data-class="text-center" data-column="ObjectifS2">CA Objectif Semestre 2</th>
                                    <th data-class="text-center" data-column="CA_Semestre2">CA S2 à Date</th>
                                    <th data-class="text-center" data-column="TxRealisationS2">Tx Réalisation</th>
                                    <th data-class="text-center" data-column="DifferencielS2">Différentiel CA S2</th>
                                    <th data-class="text-center" data-column="TxRistourneAccorde">Taux Ristourne <br>
                                        Accordé</th>
                                    <th data-class="text-center" data-column="TxRistournePaye">Taux Ristourne <br> Payé
                                    </th>
                                    <th data-class="text-center" data-column="TxEscompteAccorde">Taux Escompte <br>
                                        Accordé</th>
                                    <th data-class="text-center" data-column="TxEscomptePaye">Taux Escompte <br> Payé</th>
                                    <th data-class="text-center" data-column="MargeNette">Marge <br> Nette</th>
                                    <th data-class="text-center" data-column="MargeNetteTotal">Marge Nette <br> Totale
                                    </th>
                                    <th data-class="text-center" data-column="MntMargeNetteTotal">Montant Marge <br> Nette
                                        Totale</th>

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

                <div class="tab-pane text-muted" id="ChaCOMMERCIAL" role="tabpanel">

                    <div class="row">
                        <div class="col-xl-2"></div>
                        <div class="col-xl-3">
                            <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceSuiviCommande"  @disabled(checkIfDroit('DG_AccesMultiSite'))></select>

                        </div>
                        <div class="col-xl-5">

                            <div class="row">
                                <div class="col-xl-6">

                                    <label for="" class="mt-2">Mois</label> <span class="mt-2 me-2">:</span>
                                    <select class="Pselect2 form-select MoisEnLettre" id="MoisSuiviCommande"></select>

                                </div>
                                <div class="col-xl-3">
                                    <label for="" class="mt-2">Année</label> <span class="mt-2 me-2">:</span>
                                    <input type="number" class="form-control" id="AnneeSuiviCommande" />
                                </div>

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

                                        <div id="BlockBtnSuiviCommande" class="me-1 mt-4">
                                            <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                                id="SearchSuiviCommande"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                                    style="font-size:17px;"></i></span>
                                        </div>
                                        <div id="BlockBtnLoadSuiviCommande" class="me-1 mt-4" style="display:none">
                                            <span role="button"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height: 33px; width:60px;">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                    aria-hidden="true"></span>
                                            </span>
                                        </div>

                                        <div  id="ExportCaSuiviDeCommandeClientDisplay" style="display:none" class="me-1  mt-4">
                                                    <span data-bs-toggle="tooltip" title="Export" role="button"
                                                        id="ExportCaSuiviDeCommandeClient"
                                                        class="badge bg-success d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                                            style="font-size:17px;"></i></span>
                                        </div>

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

                        </div>
                        <div class="col-xl-2"></div>
                    </div>

                    <div class="table-responsive">

                        <table class="tablehover  table table-striped text-nowrap w-100 tablehover" id="CDEClientTable">
                            <thead class="bg-thead">
                                <tr>
                                    <th class="text-center" colspan="7"><span id="SelectAgence">CENTRAL</span> : SUIVI
                                        DE COMMANDE</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">00-07H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">08H-08H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">09H-09H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">10H-10H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">11H-11H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">12H-12H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">13H-13H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">14H-14H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">15-15H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">16H-16H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">17H-17H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">18H-18H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">19H-19H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">20H-20H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">21H-21H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">22H-22H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">23H-23H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="5">TOTAL</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                </tr>
                                <tr>
                                    <th class="psth" id="psth1">JOUR</th>
                                    <th class="psth" id="psth2">FÉRIÉ</th>
                                    <th class="psth" id="psth3">DATE</th>

                                    <th>CA JOUR</th>
                                    <th>CA CUMULÉ</th>
                                    <th>NBRE CLIENT JR</th>
                                    <th>NBRE CDE JR</th>

                                    <th style="background:#E5E1F5"></th>
                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>TEL</th>
                                    <th>C&O</th>
                                    <th>EXT</th>
                                    <th>PML</th>
                                    <th>TD</th>
                                    <th style="background:#E5E1F5"></th>

                                </tr>
                            </thead>
                            <tbody id="TableligneStructureSuiviCommande">
                            </tbody>
                        </table>
                    </div>

                </div>

                <div class="tab-pane text-muted" id="ChaCOMMERCIAL2" role="tabpanel">

                    <div class="row">
                        <div class="col-xl-2"></div>
                        <div class="col-xl-3">
                            <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceSuiviCommande2"  @disabled(checkIfDroit('DG_AccesMultiSite'))></select>

                        </div>
                        <div class="col-xl-5">

                            <div class="row">
                                <div class="col-xl-6">

                                    <label for="" class="mt-2">Mois</label> <span class="mt-2 me-2">:</span>
                                    <select class="Pselect2 form-select MoisEnLettre" id="MoisSuiviCommande2"></select>

                                </div>
                                <div class="col-xl-3">
                                    <label for="" class="mt-2">Année</label> <span class="mt-2 me-2">:</span>
                                    <input type="number" class="form-control" id="AnneeSuiviCommande2" />
                                </div>

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

                                        <div id="BlockBtnSuiviCommande2" class="me-1 mt-4">
                                            <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                                id="SearchSuiviCommande2"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                                    style="font-size:17px;"></i></span>
                                        </div>
                                        <div id="BlockBtnLoadSuiviCommande2" class="me-1 mt-4" style="display:none">
                                            <span role="button"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height: 33px; width:60px;">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                    aria-hidden="true"></span>
                                            </span>
                                        </div>

                                          <div id="ExportCaSuiviDeCommandeClient2Display" style="display:none"  class="me-1  mt-4">
                                                    <span data-bs-toggle="tooltip" title="Export" role="button"
                                                        id="ExportCaSuiviDeCommandeClient2"
                                                        class="badge bg-success d-flex justify-content-center align-items-center"
                                                        style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                                            style="font-size:17px;"></i></span>
                                        </div>

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

                        </div>
                        <div class="col-xl-2"></div>
                    </div>

                    <div class="table-responsive">

                        <table class="tablehover  table table-striped table-bordered text-nowrap w-100 tablehover" id="CDEClientTable2">
                            <thead class="bg-thead">
                                <tr>
                                    <th class="text-center" colspan="7"><span id="SelectAgence2">CENTRAL</span> : SUIVI
                                        DE COMMANDE</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">00-07H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">08H-08H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">09H-09H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">10H-10H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">11H-11H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">12H-12H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">13H-13H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">14H-14H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">15-15H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">16H-16H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">17H-17H59</th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">18H-18H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">19H-19H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">20H-20H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">21H-21H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">22H-22H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">23H-23H59</th>

                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="10">TOTAL MODE </th>
                                    <th class="text-center" style="background:#E5E1F5"></th>
                                    <th class="text-center" colspan="4">TOTAL GENERAL</th>
                                </tr>
                                <tr>
                                    <th class="psth" id="ps2th1">JOUR</th>
                                    <th class="psth" id="ps2th2">FÉRIÉ</th>
                                    <th class="psth" id="ps2th3">DATE</th>



                                    <th>CA JOUR</th>
                                    <th>CA CUMULÉ</th>
                                    <th>NBRE CLIENT JR</th>
                                    <th>NBRE CDE JR</th>

                                    <th style="background:#E5E1F5"></th>
                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" class="text-center">TEL</th>
                                    <th colspan="2" class="text-center">C&O</th>
                                    <th colspan="2" class="text-center">EXT</th>
                                    <th colspan="2" class="text-center">PML</th>
                                    <th colspan="2" class="text-center">TD</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th colspan="2" style="border-right:none" class="text-center"></th>
                                    <th colspan="2" class="text-center"></th>
                                    
                                   

                                </tr>

                                 <tr>
                                    <th class="psth" id="ps2th4" colspan="7"></th>
                                    

                                    <th style="background:#E5E1F5"></th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                     <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                     <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>

                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th style="background:#E5E1F5"></th>
                                    <th>NB</th>
                                    <th>CA</th>
                                    <th> % NB</th>
                                    <th> % CA</th>

                                </tr>
                            </thead>
                            <tbody id="TableligneStructureSuiviCommande2">
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>
    </div>

    {{-- SECTION MODAL --}}
    <input type="text" name="" id="idClient_CA_AN" hidden>
    <div class="modal fade effect-scale" id="modalCompRef" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title"> <span id="titleModal"></span></h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="row mb-3 d-flex justify-content-center">
                        <div class="col-xl-4">
                            <label for="" class="mt-2">Période référence 1</label> <span
                                class="mt-2 me-2">:</span>
                            <input class="form-control text-center daterange" id="date_reference_1" />
                        </div>
                        <div class="col-xl-4">
                            <label for="" class="mt-2">Période référence 2</label> <span
                                class="mt-2 me-2">:</span>
                            <input class="form-control text-center daterange" id="date_reference_2" />
                        </div>
                        <div class="col-xl-3">
                            <div class="d-flex">

                                <div id="btnSearcheRef" class="me-1 mt-4">
                                    <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                        id="SearchSuiviCommande"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                            style="font-size:17px;"></i></span>
                                </div>
                                <div id="btnSearcheRefLoad" class="me-1 mt-4" style="display:none">
                                    <span role="button"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                    </span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" col-xl-12">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class=" table-responsive">
                                        <table id="tableRouge" class="table table-striped text-nowrap w-100 tablehover">
                                            <thead class="bg-thead">
                                                <tr>
                                                    <th data-column="produit" style="width: 50%">Produit</th>
                                                    <th data-class="text-center" data-column="abc">ABC</th>
                                                    <th data-class="text-center" data-column="qte">Qté</th>
                                                    <th data-class="text-center" data-column="rupture">Rupture</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class=" table-responsive">
                                        <table id="tableVert" class="table table-striped text-nowrap w-100 tablehover">
                                            <thead class="bg-thead">
                                                <tr>
                                                    <th data-column="produit" style="width: 50%">Produit</th>
                                                    <th data-class="text-center" data-column="abc">ABC</th>
                                                    <th data-class="text-center" data-column="qte">Qté</th>
                                                    <th data-class="text-center" data-column="Promo">Rupture</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Produit categorie non commande --}}
    <div class="modal fade effect-scale" id="modalProdCatNonCmde" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title"><span id="titleModal"></span> - PRODUIT DE CATEGORIE A NON COMMANDES </h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="row mb-3 d-flex justify-content-center">
                        <div class="col-xl-2">
                            <label for="" class="mt-2">Catégorie rotation</label> <span
                                class="mt-2 me-2">:</span>
                            <select class="form-select" name="categorieRot" id="categorieRot">
                                <option value="0">TOUS</option>
                                <option value="1">A</option>
                                <option value="2">B</option>
                                <option value="3">C</option>
                            </select>
                        </div>
                        <div class="col-xl-3">
                            <label for="" class="mt-2">Période</label> <span class="mt-2 me-2">:</span>
                            <input class="form-control text-center daterange" id="periode" />
                        </div>

                        <div class="col-xl-2">
                            <div class="d-flex">

                                <div id="btnSearcheCatNonCmde" class="me-1 mt-4">
                                    <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                        id="SearchSuiviCommande"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                            style="font-size:17px;"></i></span>
                                </div>
                                <div id="btnSearcheCatNonCmdeLoad" class="me-1 mt-4" style="display:none">
                                    <span role="button"
                                        class="badge bg-primary d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                    </span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" col-xl-12">
                            <div class=" table-responsive">
                                <table id="tableProdCatNonCmde" class="table table-striped text-nowrap w-100 tablehover">
                                    <thead class="bg-thead">
                                        <tr>
                                            <th data-class="text-center" data-column="codecip">Code CIP</th>
                                            <th data-column="produit" style="width: 50%">Produit</th>
                                            <th data-class="text-center" data-column="rupture">Rupture</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal detail CA Par Client -->
    <div class="modal fade effect-scale" id="modalDetailCAParClient" data-bs-focus="false">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Détail de CA</h6><button aria-label="Close" class="btn-close bg-white"
                        data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 table-bordered" id="tableDetailCAPARCLIENT">
                            <thead class="bg-thead">
                                <tr>
                                    <th class="text-center">Base</th>
                                    <th class="text-center">CA(P2 VS P1)</th>
                                    <th class="text-center">%(P2 VS P1)</th>
                                    <th class="text-center">CA(P3 VS P2)</th>
                                    <th class="text-center">%(P3 VS P2)</th>
                                    <th class="text-center"> </th>
                                    <!-- <th class="text-center"> </th> -->
                                </tr>
                            </thead>
                            <tbody id="bodyTableDetailCAPARCLIENT">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Analyse CA AN-->
    <div class="modal fade effect-scale" id="modalAnalyse">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title"> <span id="titleModal"></span></h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3 d-flex justify-content-center">
                        <div class="row justify-content-center">
                            <div class="col-xl-2">
                                <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                                <select class="form-select" name="IDAGENCE_ANALYSE" id="IDAGENCE_ANALYSE">

                                </select>
                            </div>
                            <div class="col-xl-2">
                                <label for="" class="mt-2">Mois</label> <span class="mt-2 me-2">:</span>
                                <select class="form-select" name="moisAnalyse" id="moisAnalyse">
                                    <option value="01">JANVIER</option>
                                    <option value="02">FEVRIER</option>
                                    <option value="03">MARS</option>
                                    <option value="04">AVRIL</option>
                                    <option value="05">MAI</option>
                                    <option value="06">JUIN</option>
                                    <option value="07">JUILLET</option>
                                    <option value="08">AOÛT</option>
                                    <option value="09">SEPTEMBRE</option>
                                    <option value="10">OCTOBRE</option>
                                    <option value="11">NOVEMBRE</option>
                                    <option value="12">DÉCEMBRE</option>
                                </select>
                            </div>
                            <div class="col-xl-2">
                                <label for="" class="mt-2">Année</label> <span class="mt-2 me-2">:</span>
                                <input class="form-control text-center datepicker" id="anneeAnalyse"
                                    value="{{ date('Y') }}" />
                            </div>
                            <div class="col-xl-2">
                                <label for="" class="mt-2">Nbre de mois</label> <span
                                    class="mt-2 me-2">:</span>
                                <input type="number" class="form-control text-center" id="nbreMoisAnalyse"
                                    value="01" />
                            </div>

                            <div class="col-xl-1">
                                <div class="d-flex">

                                    <div id="btnSearchAnalyse" class="me-1 mt-4">
                                        <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                            id="SearchSuiviCommande"
                                            class="badge bg-primary d-flex justify-content-center align-items-center"
                                            style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                                style="font-size:17px;"></i></span>
                                    </div>
                                    <div id="btnSearchAnalyseLoad" class="me-1 mt-4" style="display:none">
                                        <span role="button"
                                            class="badge bg-primary d-flex justify-content-center align-items-center"
                                            style="height: 33px; width:60px;">
                                            <span class="spinner-border spinner-border-sm" role="status"
                                                aria-hidden="true"></span>
                                        </span>
                                    </div>

                                </div>
                            </div>

                            <div class="col-xl-1">
                                <div id="btnPrintAnalyse" class="me-1 mt-4">
                                    <span data-bs-toggle="tooltip" title="Imprimer" role="button"
                                        id="SearchSuiviCommande"
                                        class="badge bg-warning d-flex justify-content-center align-items-center"
                                        style="height: 33px; width:60px;">
                                        <i class='bx bxs-printer' style="font-size:17px;"></i></span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div id="echart-stacked-line" class="echart-charts"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script>
        var tableCouleurColone

        var tableCAPARCLIENT = $("#tableCAPARCLIENT").DataTable({

            bFilter: true,
            language: languageTable,
            "data": []
        })
        var StatCaAnnuel = $("#StatCaAnnuel").DataTable({
            bFilter: true,
            language: languageTable,
            "data": []
        })

        var tableRouge = $("#tableRouge").DataTable({
            bFilter: true,
            language: languageTable,
            "data": []
        })

        var tableVert = $("#tableVert").DataTable({
            bFilter: true,
            language: languageTable,
            "data": []
        })

        var tableProdCatNonCmde = $("#tableProdCatNonCmde").DataTable({
            bFilter: true,
            language: languageTable,
            "data": []
        })

           divShowPer = $('#CAMensuelTable_filter')
            // // Division des valeur totales
            BroDivShowPer = divShowPer.parent().prev()
            BroDivShowPer.addClass('d-flex')
            BroDivShowPer.prepend('<div style="margin-left:15px; display:flex;flex-wrap:wrap"> <div > <a class="btn btn-success btn-sm" id="ExporterCaMensuel" role="button"><i class="ri ri-file-excel-2-line" ></i> Exporter</a> </div></div>')


        listingComboClient('#IDCLIENT', labelFirstOption = 'TOUS LES CLIENTS')
        listingComboClient('#IDCLIENT_CA_AN', labelFirstOption = 'TOUS LES CLIENTS')
        listingComboAgence('#IDAGENCE')
        listingComboAgence('#IDAGENCE')
        listingComboAgence('#IDAGENCE_ANALYSE')
        listingComboPersonnel('#IDPERSONNEL', labelFirstOption = 'TOUS LES COMMERCIAUX')
        listingComboPersonnel('#IDPERSONNEL_CA_AN', labelFirstOption = 'TOUS LES COMMERCIAUX')
        listingComboGroupementClient('#IDGROUPEMENT_CLIENT', 'TOUS LES GROUPEMENTS')

        let IDAGENCEdepart = (_('IDAGENCE').value == '' || _('IDAGENCE').value == null) ? 0 : _('IDAGENCE').value

        listingComboTourneeClient('#IDTOURNEE', IDAGENCEdepart, labelFirstOption = 'TOUTES LES TOURNEES')

        $('#IDCLIENT').select2()
        $('#IDAGENCE').select2()
        $('#IDPERSONNEL').select2()
        $('#IDTOURNEE').select2()
        $('#IDGROUPEMENT_CLIENT').select2()

        // Créer une nouvelle date pour aujourd'hui
        const today = new Date();
        // Obtenir l'année actuelle
        const currentYear = today.getFullYear();
        // Créer des copies de la date d'aujourd'hui pour manipuler les années
        const oneYearAgo = new Date(today);
        oneYearAgo.setFullYear(currentYear - 1);

        const twoYearsAgo = new Date(today);
        twoYearsAgo.setFullYear(currentYear - 2);

        // Initialiser le daterangepicker
        $('.daterange').daterangepicker({
            "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"
                ],
                "monthNames": [
                    "Janvier",
                    "Fevrier",
                    "Mars",
                    "Avril",
                    "Mai",
                    "Juin",
                    "Juillet",
                    "Août",
                    "Septembre",
                    "Octobre",
                    "Novembre",
                    "Decembre"
                ],
                "firstDay": 1
            },
            opens: 'center'
        });

        // Définir les valeurs des champs de formulaire avec les dates formatées
        document.querySelector('input[name="periode3"]').value = today.toLocaleDateString('fr-FR') + ' - ' + today
            .toLocaleDateString('fr-FR');
        document.querySelector('input[name="periode2"]').value = oneYearAgo.toLocaleDateString('fr-FR') + ' - ' + oneYearAgo
            .toLocaleDateString('fr-FR');
        document.querySelector('input[name="periode1"]').value = twoYearsAgo.toLocaleDateString('fr-FR') + ' - ' +
            twoYearsAgo.toLocaleDateString('fr-FR');

            placeboutonPreferenceColonne('tableCAPARCLIENT','CAPARCLIENTShowColonne')
            recuperationPreferenceColonneUtilisateur('tableCAPARCLIENT','CAPARCLIENTShowColonne')
            $(document).on('click', '.CAPARCLIENTShowColonne', function() {
                appliquerPreferenceColonne('tableCAPARCLIENT','Chiffre-affaire-CA_par_client',$(this),'CAPARCLIENTShowColonne')
            })


            placeboutonPreferenceColonne('StatCaAnnuel','StatCaAnnuelShowColonne')
            recuperationPreferenceColonneUtilisateur('StatCaAnnuel','StatCaAnnuelShowColonne')
            $(document).on('click', '.StatCaAnnuelShowColonne', function() {
                appliquerPreferenceColonne('StatCaAnnuel','Chiffre-affaire-CA_objectif_annuel',$(this),'StatCaAnnuelShowColonne')
            })

            

        function chargerTableCAPARCLIENT() {

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

            $.ajax({

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

                    if (response.success == 1) {

                        let obj = response.data

                        tableCouleurColone = response.tableCouleurColone

                        tableCAPARCLIENT = remplissageDataTable({
                            IdentifiantDuTableau: '#tableCAPARCLIENT',
                            obj: obj,
                            pageLength: 25
                        })

                        let body = $('#tableDetailCAPARCLIENT tbody').html('')

                        let table1DetailCACLIENT = response.table1DetailCACLIENT

                        table1DetailCACLIENT.forEach(function(value) {

                            let background1 = (parseFloat(value["colone2"]) < 0) ? '#FE8D8D' : ''
                            let background2 = (parseFloat(value["colone4"]) < 0) ? '#FE8D8D' : ''

                            body.append('\
                                            <tr>\
                                                <td style="background : #F5F5BC;">' + value["libelle"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                                <td class="text-center fw-bold" style="background :' + background1 + '">' +
                                value["colone2"] + ' %</td>\
                                                <td class="text-center">' + value["colone3"] + '</td>\
                                                <td class="text-center fw-bold" style="background :' + background2 + '">' +
                                value["colone4"] + ' %</td>\
                                                <td class="text-center">' + value["colone5"] + '</td>\
                                            </tr>\
                                        ')
                        })

                        let table2DetailCACLIENT = response.table2DetailCACLIENT
                        let nbreLigneTable2DetailCACLIENT = table2DetailCACLIENT.length

                        table2DetailCACLIENT.forEach(function(value, key) {

                            if (key == 0) {

                                body.append('\
                                                <tr>\
                                                    <td class="text-center">' + value["libelle"] + '</td>\
                                                    <td class="text-center" style="background : #CACACA;">' + value[
                                    "colone1"] + '</td>\
                                                    <td class="text-center">' + value[
                                    "colone2"] + '</td>\
                                                    <td class="text-center" style="background : #CACACA;">' + value[
                                    "colone3"] + '</td>\
                                                    <td class="text-center">' + value["colone4"] + '</td>\
                                                    <td class="text-center">' + value["colone5"] + '</td>\
                                                </tr>\
                                            ')

                                return
                            }

                            if (key == nbreLigneTable2DetailCACLIENT - 1) {

                                body.append('\
                                                <tr>\
                                                    <td>' + value["libelle"] + '</td>\
                                                    <td>' + value["colone1"] + '</td>\
                                                    <td>' + value["colone2"] + '</td>\
                                                    <td>' + value["colone3"] + '</td>\
                                                    <td>' + value["colone4"] + '</td>\
                                                    <td>' + value["colone5"] + '</td>\
                                                </tr>\
                                            ')

                                return
                            }

                            let background1 = (parseFloat(value["colone2"]) < 0) ? '#FE8D8D' : '#8DFE92'
                            let background2 = (parseFloat(value["colone4"]) < 0) ? '#FE8D8D' : '#8DFE92'

                            body.append('\
                                    <tr>\
                                        <td style="background : #F5F5BC;">' + value["libelle"] + '</td>\
                                        <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                        <td class="text-center fw-bold"" style="background : '+background1+'">'+value["colone2"]+' %</td>\
                                        <td class="text-end pe-3">'+value["colone3"]+'</td>\
                                        <td class="text-center fw-bold" style="background : '+background2+'">' + value["colone4"] + ' %</td>\
                                        <td>'+value["colone5"]+'</td>\
                                    </tr>\
                                ')

                        })

                        let table3DetailCACLIENT = response.table3DetailCACLIENT

                        table3DetailCACLIENT.forEach(function(value, key) {

                            if (key == 0) {

                                body.append('\
                                        <tr>\
                                            <td>' + value["libelle"] + '</td>\
                                            <td style="background : #F5F5BC;" class="text-center fw-bold">' + value["colone1"] + '</td>\
                                            <td style="background : #F5F5BC;" class="text-center fw-bold">' + value["colone2"] + '</td>\
                                            <td style="background : #F5F5BC;" class="text-center fw-bold">' + value["colone3"] + '</td>\
                                            <td>' + value["colone4"] + '</td>\
                                        </tr>')

                                return
                            }

                            body.append('\
                                        <tr>\
                                            <td>' + value["libelle"] + '</td>\
                                            <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                            <td class="text-end pe-3">' + value["colone2"] + '</td>\
                                            <td class="text-end pe-3">' + value["colone3"] + '</td>\
                                            <td class="text-center">' + value["colone4"] + '</td>\
                                        </tr>\
                                    ')
                        })

                        let table4DetailCACLIENT = response.table4DetailCACLIENT
                        let nbreLigneTable4DetailCACLIENT = table4DetailCACLIENT.length

                        table4DetailCACLIENT.forEach(function(value, key) {

                            let symbole = (key < nbreLigneTable4DetailCACLIENT - 2) ? ' %' : ''

                            let background1 = '#fff'
                            let background2 = '#fff'

                            if (key < nbreLigneTable4DetailCACLIENT - 2) {
                                
                                background1 = (parseFloat(value["colone3"]) < 0) ? '#FE8D8D' : '#8DFE92'
                                background2 = (parseFloat(value["colone5"]) < 0) ? '#FE8D8D' : '#8DFE92'
                            }
                            
                            body.append('\
                                            <tr>\
                                                <td>' + value["libelle"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone2"] + '</td>\
                                                <td class="text-center" style="background : '+background1+'">' + value["colone3"] + symbole + '</td>\
                                                <td class="text-end pe-3">' + value["colone4"] + '</td>\
                                                <td class="text-center" style="background : '+background2+'">' + value["colone5"] + symbole + '</td>\
                                            </tr>\
                                        ')
                        })

                        let table5DetailCACLIENT = response.table5DetailCACLIENT
                        let nbreLigneTable5DetailCACLIENT = table5DetailCACLIENT.length

                        table5DetailCACLIENT.forEach(function(value, key) {

                            let background1 = (parseFloat(value["colone3"]) < 0) ? '#FE8D8D' : '#8DFE92'
                            let background2 = (parseFloat(value["colone5"]) < 0) ? '#FE8D8D' : '#8DFE92'

                            if (key == 0) {

                                body.append('\
                                            <tr>\
                                                <td style="background : #F5F5BC;">' + value["libelle"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone2"] + '</td>\
                                                <td class="text-center" style="background : '+background1+'">' + value["colone3"] + ' %</td>\
                                                <td class="text-end pe-3">' + value["colone4"] + '</td>\
                                                <td class="text-center" style="background : '+background2+'">' + value["colone5"] + ' %</td>\
                                            </tr>\
                                        ')

                                return
                            }

                            body.append('\
                                            <tr>\
                                                <td>' + value["libelle"] + '</td>\
                                                <td>' + value["colone1"] + '</td>\
                                                <td>' + value["colone2"] + '</td>\
                                                <td>' + value["colone3"] + '</td>\
                                                <td>' + value["colone4"] + '</td>\
                                                <td>' + value["colone5"] + '</td>\
                                            </tr>\
                                        ')
                        })

                        let table6DetailCACLIENT = response.table6DetailCACLIENT
                        table6DetailCACLIENT.forEach(function(value) {

                            let background1 = (parseFloat(value["colone3"]) < 0) ? '#FE8D8D' : '#8DFE92'
                            let background2 = (parseFloat(value["colone5"]) < 0) ? '#FE8D8D' : '#8DFE92'

                            body.append('\
                                            <tr>\
                                                <td>' + value["libelle"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone1"] + '</td>\
                                                <td class="text-end pe-3">' + value["colone2"] + '</td>\
                                                <td class="text-center" style="background : '+background1+'">' + value["colone3"] + ' %</td>\
                                                <td class="text-end pe-3">' + value["colone4"] + '</td>\
                                                <td class="text-center" style="background : '+background2+'">'+value["colone5"]+' %</td>\
                                            </tr>\
                                        ')
                        })

                        completeHandler()
                    } else {

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

        _('formFiltre').addEventListener('submit', function(e) {
            e.preventDefault()
        })

        _('btnFiltre').addEventListener('click', function(e) {
            e.preventDefault()
            chargerTableCAPARCLIENT()
        })
    </script>

    <!-- Script exportation excel CA par client -->
    <script>

        _('btnExport').addEventListener('click', function() {

            let table = $("#tableCAPARCLIENT").DataTable();

            let data = table.rows().data().toArray()            

            if(data.length == 0){
                
                notif('danger', 'Erreur', 'Nous n\'avons aucune ligne à exporter');
                return false;
            }

            $.ajax({

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

                    if (response.success == 1) {

                        if (response.tableExcel.length > 0) {

                            response.tableExcel.forEach(function (value) {

                                var excelBase64 = value;

                                // Convertit le base64 en Blob
                                var blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

                                // Crée un URL pour le blob
                                var blobUrl = URL.createObjectURL(blob);

                                // Crée un élément `<a>` pour le téléchargement
                                var link = document.createElement('a');
                                link.href = blobUrl;

                                let nomDuFichier = response.nomDuFichier ?? 'export'
                                link.download = nomDuFichier+".xlsx"; // Nom du fichier à télécharger

                                // Ajoute le lien au document et déclenche le clic
                                document.body.appendChild(link);
                                link.click();

                                // Nettoie après le téléchargement
                                document.body.removeChild(link);
                                URL.revokeObjectURL(blobUrl);
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun fichier excel n\'a été chargé')
                        }
                    } else {

                        notifError(response.msg)
                    }

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

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        })
    </script>

    <script>
        $(document).ready(function() {
            listeAgence()
            ComboSixeAnneeArriereStatistiqueMensuelle()
            var date = new Date();
            $('#annee_DD').val(date.getFullYear())
            $('#annee_DF').val(date.getFullYear())
            $('#AnneeSuiviCommande').val(date.getFullYear())
            $('#AnneeSuiviCommande2').val(date.getFullYear())
            $('.nav-link').on('click', function() {
                $('.tab-pane').addClass('animate__animated animate__fadeIn');
            })

            var table = "";

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

                var AgenceListSelect = $('#AgenceListSelect').val();
                var MoisEnLettre = $('#MoisEnLettre').val();
                var InputAnneeCAMensuel = $('#InputAnneeCAMensuel').val();
                var table = $('#CAMensuelTable').DataTable();

                table.clear().draw();
                MarequetesAjax("{{ route('statistiqueCAMensuel.get') }}", "GET", {
                        idAgence: AgenceListSelect,
                        Mois: MoisEnLettre,
                        Annee: InputAnneeCAMensuel
                    }, null, true, "JSON", function(resp) {

                        if (resp.error) {
                            $('#BlockBtnSearchCaMensuel').css('display', 'block')
                            $('#BlockSearchBtnLoadCaMensuel').css('display', 'none')

                            notifError(resp.msg)
                            return false;
                        }
                        $('#BlockBtnSearchCaMensuel').css('display', 'block')
                        $('#BlockSearchBtnLoadCaMensuel').css('display', 'none')

                        //TEL
                        $('#TotalTEL_CA').text(formatNumber(resp.dataTotaux.T1_CA_TEL_Jour,0))
                        $('#TotalNbreClientTEL').text(formatNumber(resp.dataTotaux.T1_nbreClientTEL, 0))
                        $('#TotalNbreCmdeTEL').text(formatNumber(resp.dataTotaux.T1_nbreCmdeTEL, 0))
                        $('#TotalPanierMoyenClientTEL').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClientTEL, 0))
                        $('#TotalPanierMoyenCommandeTEL').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommandeTEL, 0))

                        //TD
                        $('#TotalTD_CA').text(formatNumber(resp.dataTotaux.T1_CA_TD_Jour,0))
                        $('#TotalNbreClientTD').text(formatNumber(resp.dataTotaux.T1_nbreClientTD, 0))
                        $('#TotalNbreCmdeTD').text(formatNumber(resp.dataTotaux.T1_nbreCmdeTD, 0))
                        $('#TotalPanierMoyenClientTD').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClientTD, 0))
                        $('#TotalPanierMoyenCommandeTD').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommandeTD, 0))

                        //EXT
                        $('#TotalEXT_CA').text(formatNumber(resp.dataTotaux.T1_CAJour))
                        $('#TotalNbreClientEXT').text(formatNumber(resp.dataTotaux
                            .T1_nbreClientExtranet))
                        $('#TotalNbreCmdeEXT').text(formatNumber(resp.dataTotaux
                            .T1_NbreCommandeExtranet, 0))
                        $('#TotalPanierMoyenClientEXT').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClientExtranet, 0))
                        $('#TotalPanierMoyenCommandeEXT').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommandeExtranet, 0))

                        //PML
                        $('#TotalPML_CA').text(formatNumber(resp.dataTotaux.T1_CA_PML_Jour))
                        $('#TotalNbreClientPML').text(formatNumber(resp.dataTotaux.T1_nbreClientPML))
                        $('#TotalNbreCmdePML').text(formatNumber(resp.dataTotaux.T1_nbreCmdePML,0))
                        $('#TotalPanierMoyenClientPML').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClientPML, 0))
                        $('#TotalPanierMoyenCommandePML').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommandePML, 0))


                        //CALL OUT
                        $('#TotalCO_CA').text(formatNumber(resp.dataTotaux.T1_CA_CO_Jour))
                        $('#TotalNbreClientCO').text(formatNumber(resp.dataTotaux.T1_nbreClientCO))
                        $('#TotalNbreCmdeCO').text(formatNumber(resp.dataTotaux.T1_nbreCmdeCO,0))
                        $('#TotalPanierMoyenClientCO').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClientCO, 0))
                        $('#TotalPanierMoyenCommandeCO').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommandeCO, 0))

                        //TOTAUX
                        $('#Totaux_CA').text(formatNumber(resp.dataTotaux.T1_CAJour,0))
                        $('#TotauxNbreClient').text(formatNumber(resp.dataTotaux.T1_NbreClient,0))
                        $('#TotauxNbreCmde').text(formatNumber(resp.dataTotaux.T1_NbreCommande,0))
                        $('#TotauxPanierMoyenClient').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenClient, 0))
                        $('#TotauxPanierMoyenCommande').text(formatNumber(resp.dataTotaux
                            .T1_PanierMoyenCommande, 0))

                            if(resp.data.length > 0){

                                $('#ExportCaDonneeMensuelDisplay').css('display','block')
                            }else{
                                 $('#ExportCaDonneeMensuelDisplay').css('display','none')
                            }
                        $.each(resp.data, function(key, value) {

                            table.row.add([

                                value.JourEnLettre,
                                value.EstFerie,
                                value.JourMois,
                                formatNumber(value.CaJournalierHT),
                                formatNumber(value.totalCumul),
                                formatNumber(value.NbreClientJournalier,0),
                                formatNumber(value.NbreCommandeJounalier),
                                formatNumber(value.PanierMoyenCommande,0),
                                formatNumber(value.PanierMoyenClient,0),


                                //TEL
                                formatNumber(value.CAJournalierHTTEL),
                                formatNumber(value.NbreCommandeJournalierTEL,0),
                                formatNumber(value.NbreClientJournalierTEL,0),
                                value.PourcentageCACommandeTEL,
                                formatNumber(value.PanierMoyenCommandeTEL,0),
                                formatNumber(value.PanierMoyenClientTEL,0),
                                '',

                                //CALL OUT
                                formatNumber(value.CAJournalierHTCallOut),
                                formatNumber(value.NbreCommandeJournalierCallOut,0),
                                formatNumber(value.NbreClientJournalierCallOut,0),
                                value.PourcentageCACommandeCallOut,
                                formatNumber(value.PanierMoyenCommandeCallOut,0),
                                formatNumber(value.PanierMoyenClientCallOut,0),
                                '',

                                //EXTRANET
                                formatNumber(value.CAJournalierHTExtranet),
                                formatNumber(value.NbreClientJournalierExtranet,0),
                                formatNumber(value.NbreCommandeJournalierExtranet,0),
                                value.PourcentageCACommandeExtranet,
                                formatNumber(value.PanierMoyenCommandeExtranet,0),
                                formatNumber(value.PanierMoyenClientExtranet,0),
                                '',

                                //PML
                                formatNumber(value.CAJournalierHTPML),
                                formatNumber(value.NbreClientJournalierPML,0),
                                formatNumber(value.NbreCommandeJournalierPML,0),
                                value.PourcentageCACommandePML,
                                formatNumber(value.PanierMoyenCommandePML,0),
                                formatNumber(value.PanierMoyenClientPML,0),
                                '',

                                //TD
                                formatNumber(value.CAJournalierHTTD),
                                formatNumber(value.NbreClientJournalierTD),
                                formatNumber(value.NbreCommandeJournalierTD,0),
                                value.PourcentageCACommandeTD,
                                formatNumber(value.PanierMoyenCommandeTD,0),
                                formatNumber(value.PanierMoyenClientTD,0),
                                '',

                                formatNumber(value.CAJournalierHTAvoir),
                                formatNumber(value.CaNet),
                                formatNumber(value.NombreProduitJournalierStock),
                                formatNumber(value.ValeurJournalierStockAchat),
                                formatNumber(value.ValeurJournalierStockCession)
                            ])
                        })

                        table.draw();

                       $('#CAMensuelTable tbody tr').each(function() {
                            $(this).find('td:eq(15)').addClass('colorSeparator'); 
                            $(this).find('td:eq(22)').addClass('colorSeparator'); 
                            $(this).find('td:eq(29)').addClass('colorSeparator'); 
                            $(this).find('td:eq(36)').addClass('colorSeparator'); 
                            $(this).find('td:eq(43)').addClass('colorSeparator'); 
                        });
                    }, function() {},

                    function() {
                        $('#BlockBtnSearchCaMensuel').css('display', 'none')
                        $('#BlockSearchBtnLoadCaMensuel').css('display', 'block')
                    })

                new $.fn.dataTable.FixedHeader(table);
                table.fixedHeader.headerOffset(50)
            })

            var months = getMonthsInFrench();
            var currentMonthIndex = getCurrentMonthIndex();

            $.each(months, function(key, value) {
                var isSelected = value.index === currentMonthIndex ? "selected" : "";
                $(".MoisEnLettre").append("<option value='" + value.index + "' " + isSelected + ">" + value
                    .mois + "</option>");
            });

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

                var MoisEnLettre = $('#MoisEnLettreAnalyseCA').val()
                var InputAnneeAnalyseCA = $('#InputAnneeAnalyseCA').val()

                MarequetesAjax("{{ route('statistiqueAnalyseCA.get') }}",
                    "GET", {
                        Mois: MoisEnLettre,
                        Annee: InputAnneeAnalyseCA
                    }, null, true, "JSON",
                    function(resp) {

                        $('#GenerationTableauDynamique').html('');
                        $.each(resp.data, function(key, value) {
                            $('#GenerationTableauDynamique').append(value.table)
                        })

                        $('#tabEvo').html('');
                        $.each(resp.dataEvo, function(key, value) {

                            $('#tabEvo').append('<tr><td>' + value.nomAgence + '</td><td style="text-align:right">' +
                                formatNumber(value.CaConsolideParSite) + '</td><td style="text-align:right">' +
                                formatNumber(value.ObjectifAnnuelParSite) + '</td><td style="text-align:right">' +
                                formatNumber(value.RealiseSite) + '</td></tr>');
                        })

                        $('#tabEvo').append(`
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            <tr><td></td><td></td><td></td><td></td></tr>`);

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

           /*::::::::::::::::::::::::::::: CA QUOTIDIEN :::::::::::::::::::::::::*/
            $('#SearchCAQuotidient').on('click', function() {


                MarequetesAjax("{{ route('CAQuotidien.get') }}", "GET", {
                        annee_DD: $('#annee_DD').val(),
                        annee_DF: $('#annee_DF').val(),
                        MoisSelect_DD: $('#MoisSelect_DD').val(),
                        MoisSelect_DF: $('#MoisSelect_DF').val(),
                        Agence: $('#AgenceList').val(),
                    }, null, true, "JSON",
                    function(resp) {

                        // console.log(resp);
                        
                        if (resp.error) {

                            $('#BlockBtnCAQuotidien').css('display', 'block')
                            $('#BlockBtnLoadCAQuotidien').css('display', 'none')
                            notifError(resp.msg)
                            return false
                        }
                        $('#BlockBtnCAQuotidien').css('display', 'block')
                        $('#BlockBtnLoadCAQuotidien').css('display', 'none')
                        
                      

                        // Vérifiez si DataTables a déjà été initialisé et détruisez-le
                        if ($.fn.DataTable.isDataTable('#CAQuotidienTable')) {
                            $('#CAQuotidienTable').DataTable().destroy();
                        }

                        // Vider les en-têtes et le corps du tableau
                        $('#dynamicTableHeader').empty();
                        $('#TableligneStructure').empty();

                        // Ajouter l'en-tête de la table
                        $('#dynamicTableHeader').append(resp.TableStructure);

                        // Ajouter les lignes de données
                        $('#TableligneStructure').append(resp.TableLigneStructure);

                          if(resp.TableLigne.length > 0){
                            
                            $('#ExportCaQuotidienDisplay').css('display', 'block')

                        }else{
                            $('#ExportCaQuotidienDisplay').css('display', 'none')
                        }

                        // Insérer les valeurs CA dans les bonnes cellules
                        $.each(resp.TableLigne, function(key, value) {
                            var Ca = value.Ca;
                            $('#TdIdCa' + value.MoiSAnneeChiffre + '_' + value.Date).text(Ca);
                        });


                        // // Initialiser DataTables
                        // var table = $('#CAQuotidienTable').DataTable({
                        //     "scrollX": true,
                        //     language: languageTable,
                        //     pageLength: 50,
                        //     order: []
                        // });
                        // new $.fn.dataTable.FixedHeader(table);
                        // table.fixedHeader.headerOffset(50)
                    },
                    function() {},

                    function() {

                        $('#BlockBtnCAQuotidien').css('display', 'none')
                        $('#BlockBtnLoadCAQuotidien').css('display', 'block')
                    })

            })


            /*::::::::::::::::::::::::::::: SUIVI COMMANDE PAR HEURE :::::::::::::::::::::::::*/
            $('#SearchSuiviCommande').on('click', function() {

                if ($('#AnneeSuiviCommande').val().length == 0 || $('#AnneeSuiviCommande').val() == 0) {
                    notif("danger", 'Erreur', "Veuillez renseigner l\'année svp")
                    return false;
                }
                MarequetesAjax("{{ route('SuiviCommande.get') }}", "GET", {
                        Agence: $('#AgenceSuiviCommande').val(),
                        MoisSelect: $('#MoisSuiviCommande').val(),
                        AnneeSelect: $('#AnneeSuiviCommande').val()
                    }, null, true, "JSON",
                    function(resp) {

                        if (resp.error) {

                            $('#BlockBtnSuiviCommande').css('display', 'block')
                            $('#BlockBtnLoadSuiviCommande').css('display', 'none')
                            notifError(resp.msg)
                            return false
                        }
                        $('#BlockBtnSuiviCommande').css('display', 'block')
                        $('#BlockBtnLoadSuiviCommande').css('display', 'none')

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

                        $('#TableligneStructureSuiviCommande').empty();

                        // Ajouter les lignes de données
                        $('#TableligneStructureSuiviCommande').append(resp.TableStructure);

                        // Insérer les valeurs CA dans les bonnes cellules
                        $('#SelectAgence').text('')
                        $('#SelectAgence').text($('#AgenceSuiviCommande option:selected').text())

                        var tableTotaux = [];

                        for (var i = 1; i <= 25; i++) {
                            tableTotaux.push({
                                'NbreCmdeTel': 0,
                                'NbreCmdeCo': 0,
                                'NbreCmdeExt': 0,
                                'NbreCmdePml': 0,
                                'NbreCmdeTd': 0
                            })
                        }

                        var v = 0;
                        var dernierJourMois = ObtentionDenierJourDuMois($('#AnneeSuiviCommande').val(),$('#MoisSuiviCommande').val());

                            if(resp.data.length > 0){

                                $('#ExportCaSuiviDeCommandeClientDisplay').css('display','block')
                            }else{
                                 $('#ExportCaSuiviDeCommandeClientDisplay').css('display','none')
                            }

                        $.each(resp.data, function(key, value) {
                            v++;

                            // $('#CaCumule'+r).text(parseFloat($('#CaCumule'+parseInt(r-1)).text())+parseInt($('#CaJour'+v).text()))
                            

                            if(value.Ferie == 'OUI'){
                                $('#Jour'+v).css('background','rgb(240,217,198)')
                            }

                            $('#Ferie' + v).text(value.Ferie)
                            var HeureCde = value.HeureCde;
                            var Jour = value.jourChiffre;
                            if (HeureCde < 10) {
                                HeureCde = HeureCde.substring(1, 2)
                            }

                            if (Jour < 10) {
                                Jour = Jour.substring(1, 2)
                            }

                            if (HeureCde >= 0 && HeureCde <= 7) {
                                HeureCde = 7;

                            }


                            var concat = Jour + '_' + HeureCde;

                            var concats = Jour + '_' + 24;

                            //$('#Jour'+Jour).text(value.Jour)

                            $('#CaJour' + Jour).text(parseFloat($('#CaJour' + Jour).text()) +
                                parseFloat(value.CaHeure))

                            switch (value.ModeCommande) {
                                case 1:

                                    if (value.TypeCommandeClient == 6) {

                                        $('#CO' + concat).text(parseFloat($('#CO' + concat)
                                            .text()) + parseFloat(value.NombreCde))
                                        $('#CO' + concats).text(parseFloat($('#CO' + concats)
                                            .text()) + parseFloat(value.NombreCde))


                                        var oldValue = Number(parseInt($('#TotauxCO' + HeureCde)
                                            .text()))

                                        tableTotaux[HeureCde]['NbreCmdeCo'] += parseInt(value
                                            .NombreCde)
                                        tableTotaux[24]['NbreCmdeCo'] += parseInt(value
                                            .NombreCde)

                                        $('#TotauxCO' + HeureCde).text(Number(parseInt(
                                            oldValue)) + Number(parseInt(value
                                            .NombreCde)))
                                        $('#TotauxCO' + 24).text(parseFloat($('#TotauxCO' + 24)
                                            .text()) + parseFloat(value.NombreCde))


                                    } else {

                                        $('#Tel' + concat).text(parseFloat($('#Tel' + concat)
                                            .text()) + parseFloat(value.NombreCde))
                                        $('#Tel' + concats).text(parseFloat($('#Tel' + concats)
                                            .text()) + parseFloat(value.NombreCde))

                                        $('#TotauxTel' + HeureCde).text(parseFloat($(
                                                '#TotauxTel' + HeureCde).text()) +
                                            parseFloat(value.NombreCde))
                                        $('#TotauxTel' + 24).text(parseFloat($('#TotauxTel' +
                                            24).text()) + parseFloat(value.NombreCde))

                                        tableTotaux[HeureCde]['NbreCmdeTel'] += parseInt(value
                                            .NombreCde)
                                        tableTotaux[24]['NbreCmdeTel'] += parseInt(value
                                            .NombreCde)
                                    }
                                    break;
                                case 2:

                                    $('#Ext' + concat).text(parseFloat($('#Ext' + concat)
                                        .text()) + parseFloat(value.NombreCde))
                                    $('#Ext' + concats).text(parseFloat($('#Ext' + concats)
                                        .text()) + parseFloat(value.NombreCde))

                                    $('#TotauxExt' + HeureCde).text(parseFloat($('#TotauxExt' +
                                        HeureCde).text()) + parseFloat(value.NombreCde))
                                    $('#TotauxExt' + 24).text(parseFloat($('#TotauxExt' + 24)
                                        .text()) + parseFloat(value.NombreCde))

                                    tableTotaux[HeureCde]['NbreCmdeExt'] += parseInt(value
                                        .NombreCde)
                                    tableTotaux[24]['NbreCmdeExt'] += parseInt(value.NombreCde)
                                    break;
                                case 3:

                                    $('#Pml' + concat).text(parseFloat($('#Pml' + concat)
                                        .text()) + parseFloat(value.NombreCde))
                                    $('#Pml' + concats).text(parseFloat($('#Pml' + concats)
                                        .text()) + parseFloat(value.NombreCde))

                                    $('#TotauxPml' + HeureCde).text(parseFloat($('#TotauxPml' +
                                        HeureCde).text()) + parseFloat(value.NombreCde))
                                    $('#TotauxPml' + 24).text(parseFloat($('#TotauxPml' + 24)
                                        .text()) + parseFloat(value.NombreCde))

                                    tableTotaux[HeureCde]['NbreCmdePml'] += parseInt(value
                                        .NombreCde)
                                    tableTotaux[24]['NbreCmdePml'] += parseInt(value.NombreCde)

                                    break;

                                case 4:

                                    $('#Td' + concat).text(parseFloat($('#Td' + concat)
                                        .text()) + parseFloat(value.NombreCde))
                                    $('#Td' + concats).text(parseFloat($('#Td' + concat)
                                        .text()) + parseFloat(value.NombreCde))

                                    $('#TotauxTd' + HeureCde).text(parseFloat($('#TotauxTd' +
                                        HeureCde).text()) + parseFloat(value.NombreCde))
                                    $('#TotauxTd' + 24).text(parseFloat($('#TotauxTd' + 24)
                                        .text()) + parseFloat(value.NombreCde))

                                    tableTotaux[HeureCde]['NbreCmdeTd'] += parseInt(value
                                        .NombreCde)
                                    tableTotaux[24]['NbreCmdeTd'] += parseInt(value.NombreCde)

                                    break;
                                    // default code
                            };
                        });

                        for (var j = 7; j <= 24; j++) {

                            $('#TGeneral' + j).text(tableTotaux[j]['NbreCmdeCo'] + tableTotaux[j][
                                    'NbreCmdeTel'
                                ] + tableTotaux[j]['NbreCmdeExt'] + tableTotaux[j]['NbreCmdePml'] +
                                tableTotaux[j]['NbreCmdeTd'])

                            if (parseFloat($('#TGeneral' + j).text()) > 0) {

                                $('#TauxTel' + j).text((parseFloat(tableTotaux[j]['NbreCmdeTel']) /
                                    parseFloat(
                                        $('#TGeneral' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral' + j).text()) > 0) {
                                $('#TauxCO' + j).text((parseFloat(tableTotaux[j]['NbreCmdeCo']) /
                                    parseFloat($(
                                        '#TGeneral' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral' + j).text()) > 0) {
                                $('#TauxExt' + j).text((parseFloat(tableTotaux[j]['NbreCmdeExt']) /
                                    parseFloat(
                                        $('#TGeneral' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral' + j).text()) > 0) {
                                $('#TauxPml' + j).text((parseFloat(tableTotaux[j]['NbreCmdePml']) /
                                    parseFloat(
                                        $('#TGeneral' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral' + j).text()) > 0) {
                                $('#TauxTd' + j).text((parseFloat(tableTotaux[j]['NbreCmdeTd']) /
                                    parseFloat($(
                                        '#TGeneral' + j).text()) * 100).toFixed(2) + '%')
                            }
                        }

                        var totauxCAJour = 0;
                        var totauxNbreClientJour = 0;
                        var totauxNbreCommande = 0;

                        var nbreJour = 0;
                        for (var i = 1; i <= dernierJourMois; i++) {
                            nbreJour++;
                            var concats = i + '_' + 24;

                            $('#NbreCdeJr' + i).text(parseFloat($('#Tel' + concats).text()) +
                                parseFloat($('#CO' + concats).text()) + parseFloat($('#Ext' +
                                    concats).text()) + parseFloat($('#Pml' + concats).text()) +
                                parseFloat($('#Td' + concats).text()))

                            if (i == 1) {
                                //$('#CaCumule'+i).text(parseFloat($('#CaCumule'+parseInt(r-1)).text())+parseInt($('#CaJour'+v).text()))
                                $('#CaCumule' + i).text(parseFloat($('#CaJour' + i).text()))
                            } else {
                                $('#CaCumule' + i).text(parseFloat($('#CaJour' + i).text()) +
                                    parseFloat($(
                                        '#CaCumule' + parseFloat(i - 1)).text()))
                            }

                            totauxCAJour += parseFloat($('#CaJour' + i).text());
                            totauxNbreCommande += parseFloat($('#NbreCdeJr' + i).text())
                            totauxNbreClientJour += parseFloat($('#NbreClientJour' + i).text())
                        }

                        $('#totauxJourCA').text(totauxCAJour)
                        $('#totalNbreCommande').text(totauxNbreCommande)
                        $('#totalNbreClientJour').text(resp.TotalClientMois[0].NombreClient)

                        $('#MoynbreClient').text(parseFloat(totauxNbreClientJour) / nbreJour)

                        $('#MoyCAJour').text(parseFloat($('#totauxJourCA').text()) / nbreJour)
                        $('#MoyNbreCommande').text(parseFloat($('#totalNbreCommande').text()) /
                            nbreJour)

                        // FORMATAGE DES NOMBRES

                        $('#totauxJourCA').text(formatNumber(parseFloat($('#totauxJourCA').text())
                            .toFixed(0)))
                        $('#totalNbreCommande').text(formatNumber(parseFloat($('#totalNbreCommande')
                            .text()).toFixed(0)))
                        $('#totalNbreClientJour').text(formatNumber(parseFloat($('#totalNbreClientJour')
                            .text()).toFixed(0)))


                        $('#MoyCAJour').text(formatNumber(parseFloat($('#MoyCAJour').text()).toFixed(
                            0)))
                        $('#MoynbreClient').text(formatNumber(parseFloat($('#MoynbreClient').text())
                            .toFixed(0)))
                        $('#MoyNbreCommande').text(formatNumber(parseFloat($('#MoyNbreCommande').text())
                            .toFixed(0)))


                        for (var i = 1; i <= dernierJourMois; i++) {
                            $('#CaJour' + i).text(formatNumber(parseFloat($('#CaJour' + i).text())
                                .toFixed(0)))
                            $('#CaCumule' + i).text(formatNumber(parseFloat($('#CaCumule' + i).text())
                                .toFixed(0)));
                            $('#NbreClientJour' + i).text(formatNumber(parseFloat($('#NbreClientJour' +
                                i).text()).toFixed(0)))
                            $('#NbreCdeJr' + i).text(formatNumber(parseFloat($('#NbreCdeJr' + i).text())
                                .toFixed(0)))

                            for (var j = 7; j <= 24; j++) {

                                $('#Tel' + i + '_' + j).text(formatNumber(parseFloat($('#Tel' + i +
                                    '_' + j).text()).toFixed(0)))
                                $('#CO' + i + '_' + j).text(formatNumber(parseFloat($('#CO' + i + '_' +
                                    j).text()).toFixed(0)))
                                $('#Ext' + i + '_' + j).text(formatNumber(parseFloat($('#Ext' + i +
                                    '_' + j).text()).toFixed(0)))
                                $('#Pml' + i + '_' + j).text(formatNumber(parseFloat($('#Pml' + i +
                                    '_' + j).text()).toFixed(0)))
                                $('#Td' + i + '_' + j).text(formatNumber(parseFloat($('#Td' + i + '_' +
                                    j).text()).toFixed(0)))

                            }
                        }

                        for (var j = 7; j <= 24; j++) {
                            $('#TotauxTel' + j).text(formatNumber(parseFloat($('#TotauxTel' + j).text())
                                .toFixed(0)))
                            $('#TotauxCO' + j).text(formatNumber(parseFloat($('#TotauxCO' + j).text())
                                .toFixed(0)))
                            $('#TotauxExt' + j).text(formatNumber(parseFloat($('#TotauxExt' + j).text())
                                .toFixed(0)))
                            $('#TotauxPml' + j).text(formatNumber(parseFloat($('#TotauxPml' + j).text())
                                .toFixed(0)))
                            $('#TotauxTd' + j).text(formatNumber(parseFloat($('#TotauxTd' + j).text())
                                .toFixed(0)))
                            $('#TGeneral' + j).text(formatNumber(parseFloat($('#TGeneral' + j).text())
                                .toFixed(0)))

                        }

                        // Initialiser DataTablesf
                        table = $('#CDEClientTable').DataTable({
                            "scrollX": true,
                            columnDefs: [{

                                targets: [ 1, 2],
                                className: "text-center"
                            }],
                            language: languageTable,
                            pageLength: 50,
                            order: []
                        });

                        new $.fn.dataTable.FixedHeader(table);
                        table.fixedHeader.headerOffset(50)

                        $('.psth').css({
                            "background": "rgb(24,44,55)",
                            "position": "sticky",
                            "z-index": "99"
                        })
                        $('#psth1').css({
                            "left": "0"
                        })
                        $('#psth2').css({
                            "left": "117px"
                        })
                        $('#psth3').css({
                            "left": "231px"
                        })
                    },
                    function() {},

                    function() {
                        $('#BlockBtnSuiviCommande').css('display', 'none')
                        $('#BlockBtnLoadSuiviCommande').css('display', 'block')
                    }
                )
            })


             /*::::::::::::::::::::::::::::: SUIVI COMMANDE PAR HEURE 2 :::::::::::::::::::::::::*/
            $('#SearchSuiviCommande2').on('click', function() {

                if ($('#AnneeSuiviCommande2').val().length == 0 || $('#AnneeSuiviCommande2').val() == 0) {
                    notif("danger", 'Erreur', "Veuillez renseigner l\'année svp")
                    return false;
                }
                MarequetesAjax("{{ route('SuiviCommande2.get') }}", "GET", {
                        Agence: $('#AgenceSuiviCommande2').val(),
                        MoisSelect: $('#MoisSuiviCommande2').val(),
                        AnneeSelect: $('#AnneeSuiviCommande2').val()
                    }, null, true, "JSON",
                    function(resp) {

                        if (resp.error) {

                            $('#BlockBtnSuiviCommande2').css('display', 'block')
                            $('#BlockBtnLoadSuiviCommande2').css('display', 'none')
                            notifError(resp.msg)
                            return false
                        }
                        $('#BlockBtnSuiviCommande2').css('display', 'block')
                        $('#BlockBtnLoadSuiviCommande2').css('display', 'none')

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

                        $('#TableligneStructureSuiviCommande2').empty();

                        // Ajouter les lignes de données
                        $('#TableligneStructureSuiviCommande2').append(resp.TableStructure2);

                        // Insérer les valeurs CA dans les bonnes cellules
                        $('#SelectAgence2').text('')
                        $('#SelectAgence2').text($('#AgenceSuiviCommande2 option:selected').text())

                        var tableTotaux = [];
                        var tabTotauxG = [];
                        

                        for (var i = 1; i <= 25; i++) {
                            tableTotaux.push({
                                'NbreCmdeTel': 0,
                                'CATel'      : 0,
                                'NbreCmdeCo' : 0,
                                'CACo'       : 0,
                                'NbreCmdeExt': 0,
                                'CAExt'      : 0,
                                'NbreCmdePml': 0,
                                'CAPml'      : 0,
                                'NbreCmdeTd' : 0,
                                'CATd'       : 0
                            })
                        }

                        var v = 0;
                        var dernierJourMois = ObtentionDenierJourDuMois($('#AnneeSuiviCommande2').val(),$('#MoisSuiviCommande2').val());

                            if(resp.data2.length > 0){

                                $('#ExportCaSuiviDeCommandeClient2Display').css('display','block')
                            }else{
                                 $('#ExportCaSuiviDeCommandeClient2Display').css('display','none')
                            }
                        $.each(resp.data2, function(key, value) {
                            v++;

                            // $('#CaCumule'+r).text(parseFloat($('#CaCumule'+parseInt(r-1)).text())+parseInt($('#CaJour'+v).text()))

                            $('#Ferie2' + v).text(value.Ferie2)
                            var HeureCde = value.HeureCde2;
                            var Jour = value.jourChiffre2;
                            if (HeureCde < 10) {
                                HeureCde = HeureCde.substring(1, 2)
                            }

                            if (Jour < 10) {
                                Jour = Jour.substring(1, 2)
                            }

                            if (HeureCde >= 0 && HeureCde <= 7) {
                                HeureCde = 7;

                            }

                            var concat = Jour + '_' + HeureCde;

                            var concats = Jour + '_' + 24;

                            //$('#Jour'+Jour).text(value.Jour)

                            $('#CaJour2' + Jour).text(parseFloat($('#CaJour2' + Jour).text()) + parseFloat(value.CaHeure2))

                            switch (value.ModeCommande2) {
                                case 1:

                                    if (value.TypeCommandeClient2 == 6) {

                                        $('#CO2NB' + concat).text(parseFloat($('#CO2NB' + concat)
                                            .text()) + parseFloat(value.NombreCde2))

                                        $('#CO2CA' + concat).text(parseFloat($('#CO2CA' + concat)
                                        .text()) + parseFloat(value.CaHeure2))

                                        $('#CO2NB' + concats).text(parseFloat($('#CO2NB' + concats).text()) + parseFloat(value.NombreCde2))

                                        $('#CO2CA' + concats).text(parseFloat($('#CO2CA' + concats).text()) + parseFloat(value.CaHeure2))

                                        var oldValueNB = $('#TotauxCO2NB' + HeureCde).text()
                                        var oldValueCA = $('#TotauxCO2CA' + HeureCde).text()

                                        tableTotaux[HeureCde]['NbreCmdeCo'] += parseInt(value.NombreCde2)
                                        tableTotaux[24]['NbreCmdeCo'] += parseInt(value.NombreCde2)

                                        $('#TotauxCO2NB' + HeureCde).text(Number(parseInt(oldValueNB)) + Number(parseInt(value.NombreCde2)))

                                        $('#TotauxCO2CA' + HeureCde).text(Number(parseInt(
                                            oldValueCA)) + Number(parseInt(value.CaHeure2)))

                                        var oldValueCO2NB24 =$('#TotauxCO2NB' + 24).text() 

                                        $('#TotauxCO2NB' + 24).text(parseFloat(oldValueCO2NB24) + parseFloat(value.NombreCde2))

                                        $('#TotauxCO2CA' + 24).text(parseFloat($('#TotauxCO2CA' + 24).text()) + parseFloat(value.CaHeure2))

                                    } else {

                                        $('#Tel2NB' + concat).text(parseFloat($('#Tel2NB' + concat)
                                            .text()) + parseFloat(value.NombreCde2))

                                        $('#Tel2CA' + concat).text(parseFloat($('#Tel2CA' + concat)
                                            .text()) + parseFloat(value.CaHeure2))

                                        // 24
                                        $('#Tel2NB' + concats).text(parseFloat($('#Tel2NB' + concats)
                                            .text()) + parseFloat(value.NombreCde2))
                                        
                                        $('#Tel2CA' + concats).text(parseFloat($('#Tel2CA' + concats)
                                            .text()) + parseFloat(value.CaHeure2))


                                        // TOTAUX TEL
                                        $('#TotauxTel2NB' + HeureCde).text(parseFloat($('#TotauxTel2NB' + HeureCde).text()) + parseFloat(value.NombreCde2))

                                        $('#TotauxTel2CA' + HeureCde).text(parseFloat($(
                                                '#TotauxTel2CA' + HeureCde).text()) +
                                            parseFloat(value.CaHeure2))

                                        // TOTAUX TEL 24
                                        $('#TotauxTel2NB' + 24).text(parseFloat($('#TotauxTel2NB' +
                                            24).text()) + parseFloat(value.NombreCde2))

                                        $('#TotauxTel2CA' + 24).text(parseFloat($('#TotauxTel2CA' +
                                            24).text()) + parseFloat(value.NombreCde2))

                                        tableTotaux[HeureCde]['NbreCmdeTel'] += parseInt(value
                                            .NombreCde2)

                                        tableTotaux[HeureCde]['CATel'] += parseInt(value
                                            .CaHeure2)

                                        tableTotaux[24]['NbreCmdeTel'] += parseInt(value
                                            .NombreCde2)

                                        tableTotaux[24]['CATel'] += parseInt(value
                                            .CaHeure2)
                                    }
                                    break;
                                case 2:

                                    $('#Ext2NB' + concat).text(parseFloat($('#Ext2NB' + concat)
                                        .text()) + parseFloat(value.NombreCde2))
                                    $('#Ext2CA' + concat).text(parseFloat($('#Ext2CA' + concat)
                                        .text()) + parseFloat(value.CaHeure2))

                                    // 24
                                    $('#Ext2NB' + concats).text(parseFloat($('#Ext2NB' + concats)
                                        .text()) + parseFloat(value.NombreCde2))
                                    
                                    $('#Ext2CA' + concats).text(parseFloat($('#Ext2CA' + concats)
                                        .text()) + parseFloat(value.CaHeure2))
                                      

                                    var oldValueExtNB = Number(parseInt($('#TotauxExt2NB' +HeureCde).text()))
                                    // TOTAUX EXT 
                                    $('#TotauxExt2NB' + HeureCde).text(oldValueExtNB + Number(parseInt(value.NombreCde2)))

                                    $('#TotauxExt2CA' + HeureCde).text(Number(parseInt($('#TotauxExt2CA' + HeureCde)
                                        .text())) + Number(parseInt(value.CaHeure2)))
                                   
                                    $('#TotauxExt2CA' + 24).text(parseFloat($('#TotauxExt2CA' + 24)
                                        .text()) + parseFloat(value.CaHeure2))

                                    tableTotaux[HeureCde]['NbreCmdeExt'] += parseInt(value
                                        .NombreCde2)
                                    tableTotaux[HeureCde]['CAExt'] += parseInt(value
                                        .CaHeure2)

                                    tableTotaux[24]['NbreCmdeExt'] += parseInt(value.NombreCde2)

                                    tableTotaux[24]['CAExt'] += parseInt(value
                                        .CaHeure2)

                                       
                                    break;
                                case 3:

                                    $('#Pml2NB' + concat).text(parseFloat($('#Pml2NB' + concat)
                                        .text()) + parseFloat(value.NombreCde2))

                                    $('#Pml2CA' + concat).text(parseFloat($('#Pml2CA' + concat)
                                        .text()) + parseFloat(value.CaHeure2))


                                    $('#Pml2NB' + concats).text(parseFloat($('#Pml2NB' + concats)
                                        .text()) + parseFloat(value.NombreCde2))

                                    $('#Pml2CA' + concats).text(parseFloat($('#Pml2CA' + concats)
                                        .text()) + parseFloat(value.CaHeure2))

                                    $('#TotauxPml2NB' + HeureCde).text(parseFloat($('#TotauxPml2NB' +
                                        HeureCde).text()) + parseFloat(value.NombreCde2))

                                    $('#TotauxPml2CA' + HeureCde).text(parseFloat($('#TotauxPml2CA' +
                                        HeureCde).text()) + parseFloat(value.CaHeure2))

                                    $('#TotauxPml2NB' + 24).text(parseFloat($('#TotauxPml2NB' + 24)
                                        .text()) + parseFloat(value.NombreCde2))
                                    
                                    $('#TotauxPml2CA' + 24).text(parseFloat($('#TotauxPml2CA' + 24)
                                        .text()) + parseFloat(value.CaHeure2))

                                    tableTotaux[HeureCde]['NbreCmdePml'] += parseInt(value
                                        .NombreCde2)

                                    tableTotaux[HeureCde]['CAPml'] += parseInt(value
                                        .CaHeure2)

                                    tableTotaux[24]['NbreCmdePml'] += parseInt(value.NombreCde2)

                                    tableTotaux[24]['CAPml'] += parseInt(value
                                        .CaHeure2)

                                    break;

                                case 4:

                                    $('#Td2NB' + concat).text(parseFloat($('#Td2NB' + concat)
                                        .text()) + parseFloat(value.NombreCde2))

                                    $('#Td2CA' + concat).text(parseFloat($('#Td2CA' + concat)
                                        .text()) + parseFloat(value.CaHeure2))

                                    $('#Td2NB' + concats).text(parseFloat($('#Td2NB' + concats)
                                        .text()) + parseFloat(value.NombreCde2))

                                    $('#Td2CA' + concats).text(parseFloat($('#Td2CA' + concats)
                                        .text()) + parseFloat(value.CaHeure2))

                                    $('#TotauxTd2NB' + HeureCde).text(parseFloat($('#TotauxTd2NB' +
                                        HeureCde).text()) + parseFloat(value.NombreCde2))

                                    $('#TotauxTd2CA' + HeureCde).text(parseFloat($('#TotauxTd2CA' +
                                        HeureCde).text()) + parseFloat(value.CaHeure2))

                                    $('#TotauxTd2NB' + 24).text(parseFloat($('#TotauxTd2NB' + 24)
                                        .text()) + parseFloat(value.NombreCde2))
                                    
                                    $('#TotauxTd2CA' + 24).text(parseFloat($('#TotauxTd2CA' + 24)
                                        .text()) + parseFloat(value.CaHeure2))

                                    tableTotaux[HeureCde]['NbreCmdeTd'] += parseInt(value
                                        .NombreCde2)

                                    tableTotaux[HeureCde]['CATd'] += parseInt(value
                                        .CaHeure2)

                                    tableTotaux[24]['NbreCmdeTd'] += parseInt(value.NombreCde2)

                                    tableTotaux[24]['CATd'] += parseInt(value.CaHeure2)
                                  
                                    break;
                                    // default code
                            };

                             
                        });

                        // CALCUL DE TAUX

                        for (var j = 7; j <= 24; j++) {

                            $('#TGeneral2' + j).text(tableTotaux[j]['NbreCmdeCo'] + tableTotaux[j][
                                    'NbreCmdeTel'
                                ] + tableTotaux[j]['NbreCmdeExt'] + tableTotaux[j]['NbreCmdePml'] +
                                tableTotaux[j]['NbreCmdeTd'])


                            $('#TGeneral2CA' + j).text(tableTotaux[j]['CACo'] + tableTotaux[j][
                                    'CATel'
                                ] + tableTotaux[j]['CAExt'] + tableTotaux[j]['CAPml'] +
                                tableTotaux[j]['CATd'])

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {

                                $('#TauxTel2NB' + j).text((parseFloat(tableTotaux[j]['NbreCmdeTel']) /
                                    parseFloat(
                                        $('#TGeneral2' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {
                                $('#TauxCO2NB' + j).text((parseFloat(tableTotaux[j]['NbreCmdeCo']) /
                                    parseFloat($(
                                        '#TGeneral2' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {
                                $('#TauxExt2NB' + j).text((parseFloat(tableTotaux[j]['NbreCmdeExt']) /
                                    parseFloat(
                                        $('#TGeneral2' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {
                                $('#TauxPml2NB' + j).text((parseFloat(tableTotaux[j]['NbreCmdePml']) /
                                    parseFloat(
                                        $('#TGeneral2' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {
                                $('#TauxTd2NB' + j).text((parseFloat(tableTotaux[j]['NbreCmdeTd']) /
                                    parseFloat($(
                                        '#TGeneral2' + j).text()) * 100).toFixed(2) + '%')
                            }

                            //CA

                            if (parseFloat($('#TGeneral2CA' + j).text()) > 0) {

                                $('#TauxTel2CA' + j).text((parseFloat(tableTotaux[j]['CATel']) /
                                    parseFloat(
                                        $('#TGeneral2CA' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2CA' + j).text()) > 0) {
                                $('#TauxCO2CA' + j).text((parseFloat(tableTotaux[j]['CACo']) /
                                    parseFloat($(
                                        '#TGeneral2CA' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2' + j).text()) > 0) {
                                $('#TauxExt2CA' + j).text((parseFloat(tableTotaux[j]['CAExt']) /
                                    parseFloat(
                                        $('#TGeneral2CA' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2CA' + j).text()) > 0) {
                                $('#TauxPml2CA' + j).text((parseFloat(tableTotaux[j]['CAPml']) /
                                    parseFloat(
                                        $('#TGeneral2CA' + j).text()) * 100).toFixed(2) + '%')
                            }

                            if (parseFloat($('#TGeneral2CA' + j).text()) > 0) {
                                $('#TauxTd2CA' + j).text((parseFloat(tableTotaux[j]['CATd']) /
                                    parseFloat($(
                                        '#TGeneral2CA' + j).text()) * 100).toFixed(2) + '%')
                            }
                        }

                        var totauxCAJour = 0;
                        var totauxNbreClientJour = 0;
                        var totauxNbreCommande = 0;

                        var nbreJour = 0;
                        for (var i = 1; i <= dernierJourMois; i++) {
                            nbreJour++;
                            var concats = i + '_' + 24;

                            $('#NbreCdeJr2' + i).text(parseFloat($('#Tel2NB' + concats).text())+
                                parseFloat($('#CO2NB' + concats).text())+
                                parseFloat($('#Ext2NB' + concats).text()) + 
                                parseFloat($('#Pml2NB' + concats).text()) +
                                parseFloat($('#Td2NB' + concats).text()))


                                $('#TotalG_2NB'+i).text(
                                    parseInt($('#CO2NB'+concats).text())+ 
                                    parseInt($('#Tel2NB'+concats).text())+
                                    parseInt($('#Ext2NB'+concats).text())+
                                    parseInt($('#Pml2NB'+concats).text())+
                                    parseInt($('#Td2NB'+concats).text()) )

                                   $('#TotalG_2CA'+i).text(
                                    parseInt($('#CO2CA'+concats).text())+ 
                                    parseInt($('#Tel2CA'+concats).text())+
                                    parseInt($('#Ext2CA'+concats).text())+
                                    parseInt($('#Pml2CA'+concats).text())+
                                    parseInt($('#Td2CA'+concats).text()) )

                                    var pourcentage2NB =  $('#TotalG_2NB'+i).text();


                                    if(parseInt($('#totauxJourCA2').text()) > 0){

                                      $('#PourcentageTotalG_2NB'+i).text((parseInt(pourcentage2NB)/parseInt($('#totauxJourCA2').text()))*100)
                                    }

                                    if(parseInt($('#totauxJourCA2').text()) > 0){

                                      $('#PourcentageTotalG_2CA'+i).text((parseInt($('#TotalG_2CA'+i).text())/parseInt($('#totauxJourCA2').text()))*100)
                                    }


                            if (i == 1) {
                                //$('#CaCumule'+i).text(parseFloat($('#CaCumule'+parseInt(r-1)).text())+parseInt($('#CaJour'+v).text()))
                                $('#CaCumule2' + i).text(parseFloat($('#CaJour2' + i).text()))
                            } else {
                                $('#CaCumule2' + i).text(parseFloat($('#CaJour2' + i).text()) +
                                    parseFloat($(
                                        '#CaCumule2' + parseFloat(i - 1)).text()))
                            }

                            totauxCAJour += parseFloat($('#CaJour2' + i).text());
                            totauxNbreCommande += parseFloat($('#NbreCdeJr2' + i).text())
                            totauxNbreClientJour += parseFloat($('#NbreClientJour2' + i).text())
                        }

                        $('#totauxJourCA2').text(totauxCAJour)
                        $('#totalNbreCommande2').text(totauxNbreCommande)
                        $('#totalNbreClientJour2').text(resp.TotalClientMois2[0].NombreClient)

                        $('#MoynbreClient2').text(parseFloat(totauxNbreClientJour) / nbreJour)

                        $('#MoyCAJour2').text(parseFloat($('#totauxJourCA2').text()) / nbreJour)
                        $('#MoyNbreCommande2').text(parseFloat($('#totalNbreCommande2').text()) /nbreJour)


                            var totauxG_2NB = 0;
                            var totauxG_2CA = 0;
                            var totauxGPourcentage_2NB = 0;
                            var totauxGPourcentage_2CA = 0;
                            for (var i = 1; i <= dernierJourMois; i++) {
                           
                              var concats = i + '_' + 24;

                                $('#TotalG_2NB'+i).text(
                                    parseFloat($('#CO2NB'+concats).text())+ 
                                    parseFloat($('#Tel2NB'+concats).text())+
                                    parseFloat($('#Ext2NB'+concats).text())+
                                    parseFloat($('#Pml2NB'+concats).text())+
                                    parseFloat($('#Td2NB'+concats).text()) )

                                 var T2NB = parseFloat($('#TotalG_2NB'+i).text())

                                $('#TotalG_2CA'+i).text(
                                    parseFloat($('#CO2CA'+concats).text())+ 
                                    parseFloat($('#Tel2CA'+concats).text())+
                                    parseFloat($('#Ext2CA'+concats).text())+
                                    parseFloat($('#Pml2CA'+concats).text())+
                                    parseFloat($('#Td2CA'+concats).text()) )

                                 var T2CA = parseFloat($('#TotalG_2CA'+i).text())
                                   totauxG_2CA +=T2CA;
                                   totauxG_2NB += T2NB;

                                    if(parseFloat($('#totalNbreCommande2').text()) > 0){

                                      $('#PourcentageTotalG_2NB'+i).text((parseFloat($('#TotalG_2NB'+i).text())/parseFloat($('#totalNbreCommande2').text()))*100)
                                      
                                      var pourcentage2NB = parseFloat($('#PourcentageTotalG_2NB'+i).text())
                                        totauxGPourcentage_2NB += pourcentage2NB;
                                      $('#PourcentageTotalG_2NB'+i).text(parseFloat($('#PourcentageTotalG_2NB'+i).text()).toFixed(2)+' %')
                                    }

                                    if(parseFloat($('#totauxJourCA2').text()) > 0){

                                      $('#PourcentageTotalG_2CA'+i).text((parseFloat($('#TotalG_2CA'+i).text())/parseFloat($('#totauxJourCA2').text()))*100)
                                        var pourcentage2CA = parseFloat($('#PourcentageTotalG_2CA'+i).text())
                                        totauxGPourcentage_2CA += pourcentage2CA;
                                       $('#PourcentageTotalG_2CA'+i).text(parseFloat($('#PourcentageTotalG_2CA'+i).text()).toFixed(2)+' %')
                                    }

                                     $('#TotalG_2CA'+i).text(formatNumber(parseFloat($('#TotalG_2CA'+i).text()),0));

                                      $('#TotalG_2NB'+i).text(formatNumber(parseFloat($('#TotalG_2NB'+i).text())));

                            }


                            $('#TotauxG2NB').text(totauxG_2NB);

                            $('#TotauxG2NB').text(formatNumber(parseFloat($('#TotauxG2NB').text())))
                            $('#TotauxG2CA').text(totauxG_2CA);
                            $('#TotauxG2CA').text(formatNumber(parseFloat($('#TotauxG2CA').text()),0))

                            $('#PourcentageTotauxG2NB').text(totauxGPourcentage_2NB);
                            $('#PourcentageTotauxG2NB').text(parseFloat($('#PourcentageTotauxG2NB').text()).toFixed(0)+' %')

                            $('#PourcentageTotauxG2CA').text(totauxGPourcentage_2CA);
                             $('#PourcentageTotauxG2CA').text(parseFloat($('#PourcentageTotauxG2CA').text()).toFixed(0)+' %')
                       
                        // FORMATAGE DES NOMBRES

                        $('#totauxJourCA2').text(formatNumber(parseFloat($('#totauxJourCA2').text())
                            .toFixed(0)))

                        $('#totalNbreCommande2').text(formatNumber(parseFloat($('#totalNbreCommande2')
                            .text()).toFixed(0)))

                        $('#totalNbreClientJour2').text(formatNumber(parseFloat($('#totalNbreClientJour2')
                            .text()).toFixed(0)))

                        $('#MoyCAJour2').text(formatNumber(parseFloat($('#MoyCAJour2').text()).toFixed(
                            0)))
                        $('#MoynbreClient2').text(formatNumber(parseFloat($('#MoynbreClient2').text())
                            .toFixed(0)))
                        $('#MoyNbreCommande2').text(formatNumber(parseFloat($('#MoyNbreCommande2').text())
                            .toFixed(0)))

                        //FORMATAGE
                        for (var i = 1; i <= dernierJourMois; i++) {
                           

                            $('#CaJour2' + i).text(formatNumber(parseFloat($('#CaJour2' + i).text())
                                .toFixed(0)))
                            $('#CaCumule2' + i).text(formatNumber(parseFloat($('#CaCumule2' + i).text())
                                .toFixed(0)));
                            $('#NbreClientJour2' + i).text(formatNumber(parseFloat($('#NbreClientJour2' +
                                i).text()).toFixed(0)))
                            $('#NbreCdeJr2' + i).text(formatNumber(parseFloat($('#NbreCdeJr2' + i).text())
                                .toFixed(0)))


                               
                            
                            for (var j = 7; j <= 24; j++) {

                                $('#Tel2NB' + i + '_' + j).text(formatNumber(parseFloat($('#Tel2NB' + i +
                                    '_' + j).text()).toFixed(0)))

                                $('#Tel2CA' + i + '_' + j).text(formatNumber(parseFloat($('#Tel2CA' + i +
                                    '_' + j).text()).toFixed(0)))

                                $('#CO2NB' + i + '_' + j).text(formatNumber(parseFloat($('#CO2NB' + i + '_' +
                                    j).text()).toFixed(0)))

                                $('#CO2CA' + i + '_' + j).text(formatNumber(parseFloat($('#CO2CA' + i + '_' +
                                    j).text()).toFixed(0)))

                                $('#Ext2NB' + i + '_' + j).text(formatNumber(parseFloat($('#Ext2NB' + i +
                                    '_' + j).text()).toFixed(0)))

                                $('#Ext2CA' + i + '_' + j).text(formatNumber(parseFloat($('#Ext2CA' + i +
                                    '_' + j).text()).toFixed(0)))
                                
                                $('#Pml2NB' + i + '_' + j).text(formatNumber(parseFloat($('#Pml2NB' + i +
                                    '_' + j).text()).toFixed(0)))

                                $('#Pml2CA' + i + '_' + j).text(formatNumber(parseFloat($('#Pml2CA' + i +
                                    '_' + j).text()).toFixed(0)))

                                $('#Td2NB' + i + '_' + j).text(formatNumber(parseFloat($('#Td2NB' + i + '_' +
                                    j).text()).toFixed(0)))
                                
                                $('#Td2CA' + i + '_' + j).text(formatNumber(parseFloat($('#Td2CA' + i + '_' +
                                    j).text()).toFixed(0)))

                            }
                        }

                        // FORMATAGE 
                        for (var j = 7; j <= 24; j++) {
                            $('#TotauxTel2NB' + j).text(formatNumber(parseFloat($('#TotauxTel2NB' + j).text()),0))

                            $('#TotauxTel2CA' + j).text(formatNumber(parseFloat($('#TotauxTel2CA' + j).text()),0))

                            $('#TotauxCO2NB' + j).text(formatNumber(parseFloat($('#TotauxCO2NB' + j).text()),0))
                            
                            $('#TotauxCO2CA' + j).text(formatNumber(parseFloat($('#TotauxCO2CA' + j).text()),0))

                            $('#TotauxExt2NB' + j).text(formatNumber(parseFloat($('#TotauxExt2NB' + j).text())
                                .toFixed(0)))
                            
                            $('#TotauxExt2CA' + j).text(formatNumber(parseFloat($('#TotauxExt2CA' + j).text())
                                .toFixed(0)))


                            $('#TotauxPml2NB' + j).text(formatNumber(parseFloat($('#TotauxPml2NB' + j).text())
                                .toFixed(0)))
                            
                            $('#TotauxPml2CA' + j).text(formatNumber(parseFloat($('#TotauxPml2CA' + j).text())
                                .toFixed(0)))

                            
                            $('#TotauxTd2NB' + j).text(formatNumber(parseFloat($('#TotauxTd2NB' + j).text())
                                .toFixed(0)))

                            $('#TotauxTd2CA' + j).text(formatNumber(parseFloat($('#TotauxTd2CA' + j).text())
                                .toFixed(0)))

                            $('#TGeneral2' + j).text(formatNumber(parseFloat($('#TGeneral2' + j).text())
                                .toFixed(0)))

                            $('#TGeneral2CA' + j).text(formatNumber(parseFloat($('#TGeneral2CA' + j).text())
                                .toFixed(0)))

                        }

                        // Initialiser DataTablesf
                        table = $('#CDEClientTable2').DataTable({
                            "scrollX": true,
                            columnDefs: [{

                                targets: [1, 2],
                                className: "text-center"
                            }],
                            language: languageTable,
                            pageLength: 50,
                            order: []
                        });

                        new $.fn.dataTable.FixedHeader(table);
                        table.fixedHeader.headerOffset(50)

                        $('.psth').css({
                            "background": "rgb(24,44,55)",
                            "position": "sticky",
                            "z-index": "99"
                        })
                        $('#ps2th1').css({
                            "left": "0"
                        })

                       
                        $('#ps2th2').css({
                            "left": "117px"
                        })
                        $('#ps2th3').css({
                            "left": "231px"
                        })

                         $('#ps2th4').css({
                            "left": "1700"
                        })
                    },
                    function() {},

                    function() {
                        $('#BlockBtnSuiviCommande2').css('display', 'none')
                        $('#BlockBtnLoadSuiviCommande2').css('display', 'block')
                    }
                )
            })

            /*::::::::::::::::::::::::::::: CA ANNUEL :::::::::::::::::::::::::*/


            $('#BlockBtnCA_AN').click(function() {

                $.ajax({

                    url: "{{ route('Ca_An.ListingCaAnnuel') }}",
                    type: 'POST',
                    data: {
                        AgenceListCA_AN: $("#AgenceListCA_AN").val(),
                        annee_DD_CA_AN: $("#annee_DD_CA_AN").val(),
                        IDCLIENT_CA_AN: $("#IDCLIENT_CA_AN").val(),
                        IDPERSONNEL_CA_AN: $("#IDPERSONNEL_CA_AN").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                            if(response.donnee.length > 0){

                                $('#ExportCaObjectifAnnuelDisplay').css('display','block')
                            }else{
                                $('#ExportCaObjectifAnnuelDisplay').css('display','none')
                            }
                        if (response.error == false) {

                            remplissageDataTable({
                                IdentifiantDuTableau: "#StatCaAnnuel",
                                obj: response.donnee
                            })

                            completeHandler()
                            return 0
                        }

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

                        notifError(response)
                        completeHandler()
                    }
                })
            })

            _('checkCaAnAll').addEventListener('click', function() {
                let value = this.checked
                let StatCaAnnuel = $('#StatCaAnnuel').DataTable()
                let lignes = StatCaAnnuel.rows().nodes()
                $(lignes).find('#checkCaAn').prop('checked', value)
            })

            function listeLigneCaAN() {

                let dataIdLigne = []
                let dataPack = []
                let valNow = ""
                let StatCaAnnuel = $('#StatCaAnnuel').DataTable()
                let lignes = StatCaAnnuel.rows().nodes()

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

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

            $(document).on("click", "#btnCompRef", function() {
                // let data = listeLigneCaAN()

                // if (data.length > 1) {
                //     Swal.fire({
                //         position: 'center',
                //         icon: 'warning',
                //         title: "Selectionner une et une seule ligne !!!",
                //         showConfirmButton: false,
                //         timer: 30000
                //     })
                //     return 0
                // }

                $("#idClient_CA_AN").val($(this).data("id"))
                $("#modalCompRef #titleModal").text($("#client-" + $(this).data("id")).text())
                $("#modalCompRef").modal("show")
                // AnalyseNbreLigne
                // prodCatNonCmde
            })

            $(document).on("click", "#prodCatNonCmde", function() {
                // let data = listeLigneCaAN()
                // if (data.length > 1) {
                //     Swal.fire({
                //         position: 'center',
                //         icon: 'warning',
                //         title: "Selectionner une et une seule ligne !!!",
                //         showConfirmButton: false,
                //         timer: 30000
                //     })
                //     return 0
                // }

                $("#idClient_CA_AN").val($(this).data("id"))
                $("#modalProdCatNonCmde #titleModal").text($("#client-" + $(this).data("id")).text())
                $("#modalProdCatNonCmde").modal("show")
                // AnalyseNbreLigne
                // 
            })

            $(document).on("click", "#AnalyseNbreLigne", function() {
                $("#idClient_CA_AN").val($(this).data("id"))
                $("#modalAnalyse #titleModal").text($("#client-" + $(this).data("id")).text())
                $("#modalAnalyse").modal("show")
            })

            $(document).on("click", "input", function() {
                $(this).select()
            })

            $("#modalAnalyse").on("click", "#btnSearchAnalyse", function() {
                let data = $("#idClient_CA_AN").val()
                selectAnalyse($("#IDAGENCE_ANALYSE").val(), $("#moisAnalyse").val(), $("#anneeAnalyse").val(), $("#nbreMoisAnalyse").val(), data)
            })

            function selectAnalyse(AgenceListCA_AN, moisAnalyse, anneeAnalyse, nbreMoisAnalyse, data) {
                $.ajax({
                    url: "{{ route('Ca_An.getDataAnalyseNbreParJour') }}",
                    type: 'POST',
                    data: {
                        AgenceListCA_AN: AgenceListCA_AN,
                        moisAnalyse: moisAnalyse,
                        anneeAnalyse: anneeAnalyse,
                        nbreMoisAnalyse: nbreMoisAnalyse,
                        IDCLIENT: data,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: function() {
                        $("#btnSearchAnalyseLoad").css("display", "block")
                        $("#btnSearchAnalyse").css("display", "none")
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            chartX(response.jours, response.MoisAnnee, response.donnee)

                            $("#btnSearchAnalyseLoad").css("display", "none")
                            $("#btnSearchAnalyse").css("display", "block")
                            return 0
                        }
                        $("#btnSearchAnalyseLoad").css("display", "none")
                        $("#btnSearchAnalyse").css("display", "block")
                        // notifError(response.msg)
                        // completeHandler()
                    },
                    error: function(response) {
                        $("#btnSearchAnalyseLoad").css("display", "none")
                        $("#btnSearchAnalyse").css("display", "block")
                        notifError(response)
                        completeHandler()
                    }
                })
            }

            $("#modalAnalyse").on("shown.bs.modal", function() {
                let data = $("#idClient_CA_AN").val()
                selectAnalyse($("#IDAGENCE_ANALYSE").val(), $("#moisAnalyse").val(), $("#anneeAnalyse").val(), $("#nbreMoisAnalyse").val(), data)
            })

            $("#modalProdCatNonCmde").on("click", "#btnSearcheCatNonCmde", function() {
                let data = $("#idClient_CA_AN").val()

                $.ajax({
                    url: "{{ route('Ca_An.getSearchProduitCatNonCmde') }}",
                    type: 'POST',
                    data: {
                        AgenceListCA_AN: $("#AgenceListCA_AN").val(),
                        categorieRot: $("#categorieRot").val(),
                        periode: $("#periode").val(),
                        IDCLIENT: data,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            remplissageDataTable({
                                IdentifiantDuTableau: "#tableProdCatNonCmde",
                                obj: response.donnee.tableRouge
                            })

                            completeHandler()
                            return 0
                        }

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

                        notifError(response)
                        completeHandler()
                    }
                })
            })

            $("#modalCompRef").on("click", "#btnSearcheRef", function() {
                let data = $("#idClient_CA_AN").val()


                // ifDataVide(data.length, "Selectionner une et une seule ligne !!!")
                $.ajax({
                    url: "{{ route('Ca_An.getSearchCompareRef') }}",
                    type: 'POST',
                    data: {
                        AgenceListCA_AN: $("#AgenceListCA_AN").val(),
                        date_reference_1: $("#date_reference_1").val(),
                        date_reference_2: $("#date_reference_2").val(),
                        IDCLIENT: data,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            remplissageDataTable({
                                IdentifiantDuTableau: "#tableRouge",
                                obj: response.donnee.tableRouge
                            })

                            remplissageDataTable({
                                IdentifiantDuTableau: "#tableVert",
                                obj: response.donnee.tableVert
                            })

                            completeHandler()
                            return 0
                        }

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

                        notifError(response)
                        completeHandler()
                    }
                })
            })

            function chartX(jours, MoisAnnee, donnees) {

                var dom = document.getElementById('echart-stacked-line');
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var app = {};
                var option;
                option = {

                    grid: {
                        left: "0%",
                        right: "0%",
                        bottom: "0%",
                        top: "10%",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: MoisAnnee,
                        textStyle: {
                            color: '#777'
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: jours,
                        axisLine: {
                            lineStyle: {
                                color: "#8c9097"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#8c9097"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(142, 156, 173,0.1)"
                            }
                        }
                    },
                    series: donnees,
                    color: ["#845adf", "#23b7e5", "#f5b849", "#49b6f5", "#e6533c",
                        "#FF0000",
                        "#00FF00",
                        "#0000FF",
                        "#FFFF00",
                        "#00FFFF",
                        "#FF00FF",
                        "#FFA500",
                        "#800080",
                        "#FFC0CB",
                        "#A52A2A",
                    ]
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option, true);
                }
                window.addEventListener('resize', myChart.resize);
            }



            // EXPORT

            $(document).on('click','#ExportCaDonneeMensuel',function(){
                     var MoisEnLettre = $('#MoisEnLettre').val();
                    var InputAnneeCAMensuel = $('#InputAnneeCAMensuel').val();
                TableToExcel.convert(document.getElementById("CAMensuelTable"), {

                            name: "CA_MENSUEL_"+MoisEnLettre+"_"+InputAnneeCAMensuel+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })

                TableToExcel.convert(document.getElementById("recapCAAnuelleTable"), {

                            name: "CA_MENSUEL_"+MoisEnLettre+"_"+InputAnneeCAMensuel+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })
            })

            $(document).on('click','#exporterTotauxCaMensuel',function(){
                
                ExportExcel('#recapCAAnuelleTable',  'CA_ANNUEL')
            })

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

                let table = $("#CAMensuelTable").DataTable();

                if(table.rows().count() ===0){
                    
                    notif('danger', 'Erreur', 'Nous n\'avons aucune ligne à exporter');
                    return false;
                }

                ExportExcel('#CAMensuelTable',  'CA_MENSUEL_PAR_JOUR')
            })

            // EXPORT CA QUOTIDIEN
            $(document).on('click','#ExportCaQuotidien',function(){
                     var MoisEnLettre = $('#MoisSelect_DD').val();
                    var InputAnnee = $('#annee_DF').val();
                TableToExcel.convert(document.getElementById("CAQuotidienTable"), {

                            name: "CA_QUOTIDIEN_"+MoisEnLettre+"_"+InputAnnee+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })
            })

             $(document).on('click','#ExportCaObjectifAnnuel',function(){
                    
                    var InputAnnee = $('#annee_DD_CA_AN').val();
                TableToExcel.convert(document.getElementById("StatCaAnnuel"), {

                            name: "CA_ANNUEL_"+InputAnnee+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })
            })


             $(document).on('click','#ExportCaSuiviDeCommandeClient',function(){
                    
                    
                    var MoisEnLettre = $('#MoisSuiviCommande').val();
                    var InputAnnee = $('#AnneeSuiviCommande').val();
                TableToExcel.convert(document.getElementById("CDEClientTable"), {

                            name: "SUIVICDECLIENT_HEURE_"+MoisEnLettre+"_"+InputAnnee+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })
            })

             $(document).on('click','#ExportCaSuiviDeCommandeClient2',function(){
                    
                    
                    var MoisEnLettre = $('#MoisSuiviCommande2').val();
                    var InputAnnee = $('#AnneeSuiviCommande2').val();
                TableToExcel.convert(document.getElementById("CDEClientTable2"), {

                            name: "SUIVICDECLIENT_HEURE_"+MoisEnLettre+"_"+InputAnnee+"_"+formatDateToYmdHisMs()+".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                })
            })

            
            
        })

        




        function ComboSixeAnneeArriereStatistiqueMensuelle() {

            MarequetesAjax("{{ route('ComboSixeAnneeArriereStatistiqueParMois.get') }}", "GET", null, null, true, "JSON",
                function(resp) {

                    $('.InputAnneeCAMensuel').html('');

                    $.each(resp.AnneeCombo, function(key, value) {

                        $('.InputAnneeCAMensuel').append('<option value ="' + value.Comboannee + '">' + value
                            .Comboannee + '</option>');
                    })


                })
        }

        function getMonthsInFrench() {

            return [{
                    index: "01",
                    mois: "JANVIER"
                },
                {
                    index: "02",
                    mois: "FÉVRIER"
                },
                {
                    index: "03",
                    mois: "MARS"
                },
                {
                    index: "04",
                    mois: "AVRIL"
                },
                {
                    index: "05",
                    mois: "MAI"
                },
                {
                    index: "06",
                    mois: "JUIN"
                },
                {
                    index: "07",
                    mois: "JUILLET"
                },
                {
                    index: "08",
                    mois: "AOÛT"
                },
                {
                    index: "09",
                    mois: "SEPTEMBRE"
                },
                {
                    index: "10",
                    mois: "OCTOBRE"
                },
                {
                    index: "11",
                    mois: "NOVEMBRE"
                },
                {
                    index: "12",
                    mois: "DÉCEMBRE"
                },

            ];
        }

        function getCurrentMonthIndex() {
            var now = new Date();
            return (now.getMonth() + 1).toString().padStart(2, '0');
        }
    </script>

    <!-- script modal détail CA par client -->
    <script>
        _('btnModalDetailCAParClient').addEventListener('click', function() {

            $('#modalDetailCAParClient').modal('show')
        })
    </script>
@endsection