@extends('models')
@section('titre-page', 'Accueil')
@section('content-body')

@php
    $site = session()->get('site') ?? [];
    $ModeGpharma = ModeGpharma()
@endphp

    <style>
        #columns-distributed {
            padding-top: 0px;
            /* Ajustez la valeur selon vos besoins */
            margin-top: -15px;
        }

        .filtre {
            cursor: pointer;
        }

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

        .dashboard {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        /* Si un seul élément visible dans une ligne → prend toute la largeur */
        .dashboard > .card:only-child {
        flex-basis: 100%;
        }
    </style>

    <!-- Start::app-content -->
    <div class="container-fluid">
        <!-- Page Header -->

        {{-- Début de la modal filtre --}}
        <div class="offcanvas offcanvas-top pb-0 FiltreModal" tabindex="-1" id="offcanvasTop"
            aria-labelledby="offcanvasTopLabel">
            <div class="offcanvas-header bd-blue-700">
                <h5 class="offcanvas-title" id="offcanvasTopLabel">Filtre </h5>
                <button type="button" class="btn-close bg-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body pb-0">
                <form id="formFiltre" class="pb-0">
                    <div class="row">
                        <div class="col-xl-2 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Site&nbsp;:</p>
                            <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE">
                                @foreach ($site as $item)
                                    <option value="{{ $item->IDAGENCE }}">
                                        {{ $item->NomAgence }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-xl-2 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                            <input type="text" class="form-control text-center" name="daterange" id="filtrePeriode" />
                        </div>
                        <div class="col-xl-2 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Client&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                            </select>
                        </div>
                        <div class="col-xl-2 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-2 mb-0">
                            <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 class="col-xl-1 pt-2 mb-0">
                            <button type="button"
                                class="btn btn-primary btn-block float-end mt-1 validerFiltreAccueil">Valider</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {{-- Fin de la modal filtre --}}


        <!-- Page Header -->
        @if(
            in_array('AC_AccesStatCmdeParStatut', session('LISTE_DROIT_ACCESS', [])) ||
            in_array('AC_AccesStatCmdeParMode', session('LISTE_DROIT_ACCESS', [])) ||
            in_array('AC_AccesCaSelonFacture', session('LISTE_DROIT_ACCESS', [])) ||
            in_array('AC_AccesStatFactureParModeCde', session('LISTE_DROIT_ACCESS', [])) ||
            in_array('AC_TopClientSelonCde', session('LISTE_DROIT_ACCESS', [])) ||
            in_array('AC_TopClientSelonFacture', session('LISTE_DROIT_ACCESS', []))
        )
            <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                <h1 class="page-title fw-semibold fs-18 mb-0">Bienvenue sur ERP GPHARMA &nbsp;
                
                    <i class='bx bx-filter bold btn btn-outline-primary' role="button" title="Filtre d'interface"
                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"></i>
                
                </h1>
                <div class="ms-md-1 ms-0">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Accueil</a></li>
                            <!-- <li class="breadcrumb-item active" aria-current="page">Sales</li> -->
                        </ol>
                    </nav>
                </div>
            </div>

            <!-- Page Header Close -->

            {{-- Début row d'affichage de filtre --}}

            <div class="row mb-3">
                <div class="col-md-11 d-flex flex-wrap">
                    <div class="d-flex align-items-center btn-primary rounded-pill me-2 mb-2 px-2 py-0 filtre"
                        id="divFiltreAgence" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Agence&nbsp;:&nbsp;</p>
                        <!-- <p class="fw-bold mb-0" id="labelleFiltreAgence"> CENTRALE </p> -->
                        <p class="fw-bold mb-0" id="labelleFiltreAgence">  </p>
                    </div>
                    <div class="d-flex align-items-center btn-primary rounded-pill me-2 mb-2 px-2 py-0 filtre"
                        id="divFiltrePeriode" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Période&nbsp;:&nbsp;</p>
                        <p class="fw-bold mb-0" id="labelleFiltrePeriode"></p>
                    </div>
                    <div class="d-flex align-items-center btn-primary label-btn label-end rounded-pill me-2 py-0 filtre"
                        id="divFiltreClient" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Client&nbsp;:&nbsp;</p>
                        <p class="fw-bold mb-0" id="labelleFiltreClient"></p>
                        <i class="ri-close-line label-btn-icon ms-2 rounded-pill" id="closeFiltreClient"></i>
                    </div>
                    <div class="d-flex align-items-center btn-primary label-btn label-end rounded-pill me-2 py-0 filtre"
                        id="divFiltreGrpmt" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Grpmt : </p>
                        <p class="fw-bold mb-0" id="labelleFiltreGrpmt"></p>
                        <i class="ri-close-line label-btn-icon ms-2 rounded-pill" id="closeFiltreGroupement"></i>
                    </div>
                    <div class="d-flex align-items-center btn-primary label-btn label-end rounded-pill py-0 filtre"
                        id="divFiltreTournee" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Tounée : </p>
                        <p class="fw-bold mb-0" id="labelleFiltreTournee"></p>
                        <i class="ri-close-line label-btn-icon ms-2 rounded-pill" id="closeFiltreTournee"></i>
                    </div>
                </div>
                <div class="col-md-1 pt-0">
                    <button type="button"
                        class="btn btn-primary btn-wave validerFiltreAccueil d-flex align-items-center float-end"
                        style="height: 30px; margin-top : -10px ">
                        <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                    </button>
                </div>
            </div>

         @endif

        {{-- Fin row d'affichage de filtre --}}

        <!-- Start::row-1 -->
        <div id="dashboard-container" class="dashboard">

            @if (in_array("AC_AccesValeurStock", session('LISTE_DROIT_ACCESS',[])))
                <div class="card custom-card flex-fill"  style="width:100%" >
                    <div class="card-header">
                        <div class="card-title">
                            Valeur stock
                        </div>
                    </div>
                    <div class="card-body pt-0 px-0">
                        <div class="row g-0">
                            <div class="col-xl-3 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top ps-2 pe-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-primary shadow-sm">
                                            <i class="ti ti-package fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="nbreProduit">0</h5>
                                        <p class="text-muted mb-0 fs-12">Nbre de produit</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top  px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-success shadow-sm">
                                            <i class="ti ti-package fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="nbreBoite">0</h5>
                                        <p class="text-muted mb-0 fs-12">Nbre de boîte</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-warning shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurPFHT">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur PFHT</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-danger shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurPGHT">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur PGHT</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-info shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurPRevient">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur P. revient</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top ps-2 pe-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-primary shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurPRMP">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur PRMP</p>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-success shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="prmpPfht">0</h5>
                                        <p class="text-muted mb-0 fs-12">PRMP/PFHT</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-warning shadow-sm">
                                             <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurCessionHT">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur Cess. HT</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-2 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top  px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-danger shadow-sm">
                                            <i class="ti ti-cash-banknote fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="valeurCessionTTC">0</h5>
                                        <p class="text-muted mb-0 fs-12">Valeur Ces. TTC</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 border-end border-inline-end-dashed">
                                <div class="d-flex flex-wrap align-items-top px-1 py-1">
                                    <div class="me-2 lh-1">
                                        <span class="avatar avatar-md avatar-rounded bg-info shadow-sm">
                                            <i class="ti ti-switch-horizontal fs-18"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <h5 class="fw-semibold mb-1 fs-16" id="marge">0</h5>
                                        <p class="text-muted mb-0 fs-12">Marge</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            @endif

            {{-- Debut bloc Stats commandes client par statut --}}
            @if(in_array('AC_AccesStatCmdeParStatut', session('LISTE_DROIT_ACCESS',[])))
            
                <div class="card custom-card flex-fill"  style="width:40%" >
                    <div class="card-header">
                        <div class="card-title">
                            Statistiques commandes client par statut
                        </div>
                    </div>
                    <div class="card-body pt-4 px-0">
                        <div class="row mt-1">
                            <div class="col-md-4">
                                <div id="grapheCdeEtape"></div>
                            </div>
                            <div class="col-md-8">
                                <div class="row mt-2">
                                    <div class="col-md-4 mb-3 p-0">
                                        <div class="text-center">
                                            <span class="text-muted fs-14 hrm-jobs-legend pointRouge d-inline-block ms-2">
                                                Saisie
                                            </span>
                                            <div>
                                                <span class="fs-12 fw-bold" id="Tstatus0">0</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3 p-0">
                                        <div class="text-center">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointVert d-inline-block ms-2">Non
                                                collecte
                                            </span>
                                            <div><span class="fs-12 fw-bold" id="Tstatus1">0</span></div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3 p-0">
                                        <div class="text-center">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointViolet d-inline-block ms-2">En
                                                collecte
                                            </span>
                                            <div>
                                                <span class="fs-12 fw-bold" id="Tstatus2">0</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 p-0">
                                        <div class="text-center">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointTeal d-inline-block ms-2">Facturé
                                            </span>
                                            <div>
                                                <span class="fs-12 fw-bold" id="Tstatus3">0</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 p-0">
                                        <div class="text-center">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointOrange d-inline-block ms-2">Expédié
                                            </span>
                                            <div><span class="fs-12 fw-bold" id="Tstatus4">0</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 p-0">
                                        <div class="text-center">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointInfo d-inline-block ms-2">Livré
                                            </span>
                                            <div><span class="fs-12 fw-bold" id="Tstatus5">0</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-center align-items-center pt-3">
                                    <p class="text-muted fs-16">Total CA :&nbsp;</p>
                                    <h6 class="fw-bold" style="margin-top : -10px;" id="CATTGrapheCdeEtape"></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             
            @endif
            {{-- Fin bloc Stats commandes client par statut --}}

            {{-- Debut bloc Stats de commande client par mode --}}
            @if(in_array('AC_AccesStatCmdeParMode', session('LISTE_DROIT_ACCESS',[])))
               
                    <div class="card custom-card flex-fill" style="width:50%">
                        <div class="card-header">
                            <div class="card-title">
                                Statistiques de commande client par mode
                            </div>
                        </div>
                        <div class="card-body py-1">
                            <div class="">
                                <div id="columns-distributed"></div>
                            </div>
                            <div class="d-flex row">

                                <div class="col-md-4 text-center">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointVert">
                                                 {{$ModeGpharma != 2 ? "Télémarket" : "Téléphone"}} 
                                            </span>
                                            <div>
                                                <span id="telemarket"  class="text-success fs-12 fw-bold">0</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointRouge">
                                                Call out
                                            </span>
                                            <div>
                                                <span id="callOut" style="margin-left: 20px" class="text-danger fs-12 fw-bold">0</span>
                                            </div>

                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-3 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend published">
                                        Extranet
                                    </span>
                                    <div>
                                        <span id="extranet" class="text-primary fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                                <div class="col-md-3 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointInfo">
                                        {{ $ModeGpharma != 2 ? "Pharma-ML" : "Guichet"}}
                                    </span>
                                    <div>
                                        <span id="pharmaML" class="text-info fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                                <div class="col-md-2 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointOrange">
                                        Tedis-direct
                                    </span>
                                    <div>
                                        <span id="tedisDirect" class="text-orange fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
            
            @endif
            {{-- Fin bloc Stats de commande client par mode --}}

            {{-- <div class="col-xl-2 col-lg-6 col-md-6 col-sm-6" id="tb_StatsExpeditionClient">
               
                <div class="card custom-card hrm-main-card secondary flex-fill">
                    <div class="card-body">
                        <div class="d-flex align-items-top">
                            <div class="me-3">
                                <span class="avatar bg-secondary">
                                    <i class="ri-user-unfollow-line fs-18"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <span class="fw-semibold text-muted d-block mb-2">Employees In Leave</span>
                                <h5 class="fw-semibold mb-2">528</h5>
                                <p class="mb-0">
                                    <span class="badge bg-secondary-transparent">This Month</span>
                                </p>
                            </div>
                            <div>
                                <span class="fs-14 fw-semibold text-success">+0.36%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}

             @if( in_array('AC_AccesCaSelonFacture', session('LISTE_DROIT_ACCESS',[])))
             
                    <div class="card  custom-card flex-fill">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div class="card-title d-flex align-items-center">
                                Chiffre d'affaires selon factures
                            </div>

                        </div>
                        <div class="card-body px-1">

                            <table style="width:100%">
                                <thead>
                                    <th style="color:rgb(108, 108, 108);text-align:center">CA</th>
                                    <th style="color:rgb(108, 108, 108);text-align:center">Avoir</th>
                                    <th style="color:rgb(108, 108, 108);text-align:center"> ( CA - Avoir )</th>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td id="statCa" style="text-align:center"></td>
                                        <td id="statAvoir" style="text-align:center"></td>
                                        <td id="statCaMoinsAvoir" style="text-align:center"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <hr>
                        </div>
                    </div>
                
            @endif

            {{-- Debut bloc Stats de facture client par mode de commande --}}
            @if(in_array('AC_AccesStatFactureParModeCde', session('LISTE_DROIT_ACCESS',[])))
               
                    <div class="card custom-card flex-fill" style="width:60%">
                        <div class="card-header">
                            <div class="card-title">
                                Statistiques de facture client par mode commande
                            </div>
                        </div>
                        <div class="card-body py-1">
                            <div class="">
                                <div id="graphFactClientParModeCde"></div>
                            </div>
                            <div class="d-flex row">

                                <div class="col-md-4 text-center">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointVert">
                                                 {{$ModeGpharma != 2 ? "Télémarket" : "Téléphone"}} 
                                            </span>
                                            <div>
                                                <span id="libFactureClientModeCdetelemarket" class="text-success fs-12 fw-bold">0</span>
                                            </div>


                                        </div>
                                        <div class="col-xl-6">
                                            <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointRouge">
                                                Call out
                                            </span>
                                            <div>
                                                <span id="libFactureClientModeCdecallOut" class="text-danger fs-12 fw-bold">0</span>
                                            </div>

                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-3 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend published">
                                        Extranet
                                    </span>
                                    <div>
                                        <span id="libFactureClientModeCdeextranet" class="text-primary fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                                <div class="col-md-3 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointInfo">
                                        {{$ModeGpharma != 2 ? "Pharma-ML" : "Guichet"}}
                                    </span>
                                    <div>
                                        <span id="libFactureClientModeCdepharmaML" class="text-info fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                                <div class="col-md-2 text-center">
                                    <span class="text-muted fs-14 mb-0 hrm-jobs-legend pointOrange">
                                        Tedis-direct
                                    </span>
                                    <div>
                                        <span id="libFactureClientModeCdetedisDirect" class="text-orange fs-12 fw-bold">0</span>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
               
            @endif
            {{-- Fin bloc Stats de facture client par mode de commande --}}

            {{-- Debut bloc N top client selon commande --}}
             @if(in_array('AC_TopClientSelonCde', session('LISTE_DROIT_ACCESS',[])))
              
                    <div class="card custom-card flex-fill">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div class="card-title d-flex align-items-center">
                                Top <input id="limitTopClientSelonCde" type="number" class="form-control mx-2 text-center"
                                    value="10" style="width : 60px"> des clients selon commande
                            </div>
                            <button type="button" class="btn btn-outline-info btn-sm rounded-pill"
                                id="btnModalNTopClientSelonCde">
                                <i class="{{ retourneIcone('info') }}" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                        <div class="card-body px-1">
                            <div class="list-unstyled w-100 py-1 mb-0 personal-upcoming-events overflow-auto px-0 listNTopClientSelonCde"
                                style="max-height:190px;">

                            </div>
                        </div>
                    </div>
                
            @endif
            {{-- Fin bloc N top client selon commande --}}

            {{-- Debut bloc N top client selon facture --}}
            @if(in_array('AC_TopClientSelonFacture', session('LISTE_DROIT_ACCESS',[])))
               
                    <div class="card  custom-card flex-fill">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div class="card-title d-flex align-items-center">
                                Top <input id="limitTopClientSelonFact" type="number" class="form-control mx-2 text-center"
                                    value="10" style="width : 60px"> des clients selon facture
                            </div>
                            <button type="button" class="btn btn-outline-info btn-sm rounded-pill"
                                id="btnModalNTopClientSelonFact">
                                <i class="{{ retourneIcone('info') }}" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                        <div class="card-body px-1">
                            <div class="list-unstyled w-100 py-1 mb-0 personal-upcoming-events overflow-auto px-0 listNTopClientSelonFact"
                                style="max-height:190px;">

                            </div>
                        </div>
                    </div>
             
            @endif
            {{-- Fin bloc N top client selon facture --}}

        </div>
            @if(!in_array('AC_AccesStatCmdeParStatut', session('LISTE_DROIT_ACCESS',[]))  && !in_array('AC_AccesStatCmdeParMode', session('LISTE_DROIT_ACCESS',[]))
                   && !in_array('AC_AccesCaSelonFacture', session('LISTE_DROIT_ACCESS',[])) && !in_array('AC_AccesStatFactureParModeCde', session('LISTE_DROIT_ACCESS',[])) 
                   && !in_array('AC_TopClientSelonCde', session('LISTE_DROIT_ACCESS',[]))    && !in_array('AC_TopClientSelonFacture', session('LISTE_DROIT_ACCESS',[])))
                <div id="session-empty"></div>
            @endif

        <div>

        </div>
    </div>
    <!-- End::app-content -->

    <!----------------------------------------------------------------------------------------------------------------------------
            ------------------------------------------------------------------------------------------------------------------------------
            ------------------------------------------------------------------------------------------------------------------------------
            ------------------------------------------------------- SECTION DES MODALES --------------------------------------------------
            ------------------------------------------------------------------------------------------------------------------------------
            ------------------------------------------------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------------------------------------------->

    {{--  Modal top clients selon commande --}}
    <div class="modal fade" id="modalTopClientSelonCde" tabindex="-1" aria-labelledby="exampleModalLgLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titreModalTopClientSelonCde">Top clients selon commande
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="list-unstyled py-1 mb-0 personal-upcoming-events overflow-auto px-0 listNTopClientSelonCde"
                        style="max-height:500px;">

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

    {{-- Modal top clients selon facture --}}
    <div class="modal fade" id="modalTopClientSelonFact" tabindex="-1" aria-labelledby="exampleModalLgLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titreModalTopClientSelonFact">Top clients selon facture
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="list-unstyled py-1 mb-0 personal-upcoming-events overflow-auto px-0 listNTopClientSelonFact"
                        style="max-height:500px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Sales-Dashboard JS -->
    <script src="{{ asset('assets/js/sales-dashboard.js') }}"></script>
    <script src="{{ asset('assets/js/fonction/fonctions-custom.js') }}"></script>
    <script src="{{ asset('assets/js/fonction/fonctions-custom-2.js') }}"></script>

    
<script>

    $(document).ready(function(){

        const visibleCards = $('#dashboard-container .card');
        if (visibleCards.length % 3 === 1) {
        visibleCards.last().css('flex-basis', '100%');
        }

        charge_logo_societe()
    })

    function charge_logo_societe(){

        $.ajax({
            type: "POST",
            url: "{{route('infoSociete')}}",
            data : {
                    _token : "{{csrf_token()}}"
                },
            dataType: "json",
            success: function (resp) {
                
                 $('#session-empty').html('')
                $('#session-empty').append(`
                    <img src="/${resp.data[0].UrlLogoSociete}" class="card-img-top w-50" style="display:block; margin:0 auto;margin-top:110px">
                `)
            }
        });
    }

</script>

    <!-- script graphe Commande par mode de passation -->

    <!-- script de graphe vente achat -->
    {{-- <script>
        /* basic column chart */
        var options = {
            series: [{
                name: 'Vente',
                data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 1, 1, 1]
            }, {
                name: 'Achat',
                data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 1, 1, 1]
            }],
            chart: {
                type: 'bar',
                height: 320
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '80%',
                    endingShape: 'rounded'
                },
            },
            grid: {
                borderColor: '#f2f5f7',
            },
            dataLabels: {
                enabled: false
            },
            colors: ["#845adf", "#23b7e5"],
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: {
                    show: true,
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-xaxis-label',
                    },
                }
            },
            yaxis: {
                title: {
                    text: 'Valeurs',
                    style: {
                        color: "#8c9097",
                    }
                },
                labels: {
                    show: true,
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-xaxis-label',
                    },
                }
            },
            fill: {
                opacity: 1
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return "$ " + val + " thousands"
                    }
                }
            }
        };
        var chart = new ApexCharts(document.querySelector("#grapheAchatVente"), options);
        chart.render();
    </script> --}}

    <!-- Script de top des clients selon cde -->
    <script>

        function chargerListeTopClientsSelonCde() {

            return new Promise((resolve, reject) => {
                $.ajax({

                    url: '{{ route('topClientSelonCde') }}',
                    type: 'GET',
                    data: {
                        limit: _('limitTopClientSelonCde').value
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 1) {

                            $('.listNTopClientSelonCde').html('')

                            response.data.forEach(function(value, key) {

                                let nbreCde = value.NbreCde > 1 ? formatNumberPerf(value.NbreCde) +
                                    ' commandes' : formatNumberPerf(value.NbreCde) + ' commande'

                                $('.listNTopClientSelonCde').append('\
                                    <div class="d-flex row align-items-center my-0 mx-0 px-2 w-100">\
                                        <div class="col-md-2 px-0 ps-2">\
                                            <span class="p-2 rounded bg-primary-transparent">\
                                                <span class="fs-14">' + (key + 1) + '</span>\
                                            </span>\
                                        </div>\
                                        <div class="col-md-6 px-0 flex-fill">\
                                            <p class="ellipsis mb-1">' + value.NomClient + '</p>\
                                            <span class="d-block text-muted fs-12">' + nbreCde + '</span>\
                                        </div>\
                                        <div class="col-md-4">\
                                            <span class="badge bg-primary-transparent fs-11 float-end">' + formatNumberPerf(value .TotalHT) + '</span>\
                                        </div>\
                                    </div>\
                                    <hr class="my-1">\
                                ')
                            })

                            resolve()
                        } else {

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

        _('limitTopClientSelonCde').addEventListener('keypress', function(e) {

            if (e.keyCode == 13) {

                progressHandler()
                chargerListeTopClientsSelonCde().then(() => {

                    completeHandler()
                })
            }
        })

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

            _('titreModalTopClientSelonCde').innerHTML = 'Top ' + _('limitTopClientSelonCde').value + ' clients selon commande'
            $('#modalTopClientSelonCde').modal('show')
        })
    </script>

    <!-- Script de top des clients selon fact -->
    <script>
        function chargerListeTopClientsSelonFact() {

            return new Promise((resolve, reject) => {
                $.ajax({

                    url: '{{ route('topClientSelonFact') }}',
                    type: 'GET',
                    data: {
                        limit: _('limitTopClientSelonFact').value
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 1) {

                            $('.listNTopClientSelonFact').html('')

                            response.data.forEach(function(value, key) {

                                let nbreFact = (value.NbreFact > 1) ? formatNumberPerf(value.NbreFact) + ' factures' : formatNumberPerf(value.NbreFact) + ' facture'

                                $('.listNTopClientSelonFact').append('\
                                    <div class="d-flex row align-items-center my-0 mx-0 px-2 w-100">\
                                        <div class="col-md-2 px-0 ps-2">\
                                            <span class="p-2 rounded bg-primary-transparent">\
                                                <span class="fs-14">' + (key + 1) + '</span>\
                                            </span>\
                                        </div>\
                                        <div class="col-md-6 px-0 flex-fill">\
                                            <p class="ellipsis mb-1">' + value.NomClient + '</p>\
                                            <span class="d-block text-muted fs-12">' + nbreFact + '</span>\
                                        </div>\
                                        <div class="col-md-4">\
                                            <span class="badge bg-primary-transparent fs-11 float-end">' + formatNumberPerf(value.TotalHT) + '</span>\
                                        </div>\
                                    </div>\
                                    <hr class="my-1">\
                                ')
                            })

                            resolve()

                        } else {

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

        _('limitTopClientSelonFact').addEventListener('keypress', function(e) {

            if (e.keyCode == 13) {

                progressHandler()
                chargerListeTopClientsSelonFact().then(() => {

                    completeHandler()
                })
            }
        })

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

            _('titreModalTopClientSelonFact').innerHTML = 'Top ' + _('limitTopClientSelonFact').value +
                ' clients selon facture'
            $('#modalTopClientSelonFact').modal('show')
        })
    </script>

    <!-- Script des filtres -->
    <script>
        _('formFiltre').addEventListener('submit', function(e) {

            e.preventDefault()
        })

        function chargerSessionFiltre() {

            $.ajax({

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

                    if (response.success == 1) {

                        GetAllStatistique()
                        listingComboClient('#IDCLIENT', 'TOUS LES CLIENTS').then(() => {
                            $('#IDCLIENT').val(response.data.IDCLIENT).trigger('change')
                            $('#labelleFiltreClient').html($('#IDCLIENT option:selected').html());
                        })

                        $('#IDAGENCE').val({{session('IDAGENCE')}}).trigger('change')
                        $('#labelleFiltreAgence').html($('#IDAGENCE option:selected').html());

                        listingComboGroupementClient('#IDGROUPEMENT_CLIENT', 'TOUS LES GROUPEMENTS').then(
                            () => {
                                $('#IDGROUPEMENT_CLIENT').val(response.data.IDGROUPEMENT_CLIENT).trigger(
                                    'change')
                                $('#labelleFiltreGrpmt').html($('#IDGROUPEMENT_CLIENT option:selected')
                                    .html());
                            })

                        listingComboTourneeClient('#IDTOURNEE', response.data.IDAGENCE).then(() => {
                            $('#IDTOURNEE').val(response.data.IDTOURNEE).trigger('change')
                            $('#labelleFiltreTournee').html($('#IDTOURNEE option:selected').html());
                        })

                        _('filtrePeriode').value = explodeDate(response.data.debutPeriode, '-') + ' - ' +
                            explodeDate(response.data.finPeriode, '-')

                        _('labelleFiltrePeriode').innerHTML = explodeDate(response.data.debutPeriode, '-') +
                            '&nbsp;-&nbsp;' + explodeDate(response.data.finPeriode, '-')


                        chargerListeTopClientsSelonCde()
                        chargerListeTopClientsSelonFact()
                        statProduit($('#IDAGENCE').val())

                        completeHandler()

                    } else {

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

        function GetAllStatistique() {

            $.ajax({

                url: '{{ route('accueil.statistique') }}',
                type: 'GET',
                dataType: 'json',
                success: function(resp) {

                    if (resp.ChiffreAffaire[0].CAHT != null) {
                        $('#statCa').text(formatNumberPerf(resp.ChiffreAffaire[0].CAHT))
                    }

                    if (resp.ChiffreAffaire[0].AvoirHT != null) {
                        $('#statAvoir').text(formatNumberPerf(resp.ChiffreAffaire[0].AvoirHT))
                    }

                    if (resp.ChiffreAffaire[0].TotalHT != null) {
                        $('#statCaMoinsAvoir').text(formatNumberPerf(resp.ChiffreAffaire[0].TotalHT))
                    }


                    for (var i = 0; i < 5; i++) {
                        $('#Tstatus' + i).text(0)
                    }
                    nbreCmdeEtape1 = 0;
                    nbreCmdeEtape2 = 0;
                    nbreCmdeEtape3 = 0;
                    nbreCmdeEtape4 = 0;
                    nbreCmdeEtape5 = 0;
                    nbreCmdeEtape6 = 0;

                    let CATTGrapheCdeEtape = 0

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

                        if (value.EtapeCommande == 1) {
                            $('#Tstatus0').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape1 = value.nbreCommande;
                        }

                        if (value.EtapeCommande == 2) {
                            $('#Tstatus1').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape2 = value.nbreCommande;
                        }


                        if (value.EtapeCommande == 3) {
                            $('#Tstatus2').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape3 = value.nbreCommande;
                        }


                        if (value.EtapeCommande == 4) {
                            $('#Tstatus3').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape4 = value.nbreCommande;
                        }


                        if (value.EtapeCommande == 5) {
                            $('#Tstatus4').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape5 = value.nbreCommande;
                        }

                        if (value.EtapeCommande == 6) {
                            $('#Tstatus5').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape6 = value.nbreCommande;
                        }

                        CATTGrapheCdeEtape += parseFloat(value.TotalHT)
                    })

                    _('CATTGrapheCdeEtape').innerHTML = formatNumberPerf(CATTGrapheCdeEtape)

                    var options = {

                        series: [nbreCmdeEtape1, nbreCmdeEtape2, nbreCmdeEtape3, nbreCmdeEtape4,
                            nbreCmdeEtape5, nbreCmdeEtape6
                        ],
                        labels: ["Saisie", "Non collecte", "En collecte", "Facturé", "Expédié", "Livré"],
                        chart: {
                            height: 170,
                            type: 'donut',
                        },
                        dataLabels: {
                            enabled: false, // Activer les étiquettes de données
                        },
                        legend: {
                            show: false,
                        },
                        stroke: {
                            show: true,
                            curve: 'smooth',
                            lineCap: 'round'
                        },
                        plotOptions: {

                            pie: {
                                expandOnClick: false,
                                donut: {
                                    size: '70%',
                                    background: 'transparent',
                                    labels: {
                                        show: true,
                                        name: {
                                            show: true,
                                            fontSize: '20px',
                                            color: '#000000',
                                            offsetY: -4
                                        },
                                        total: {
                                            show: true,
                                            // showAlways: true,
                                            label: 'Commandes',
                                            fontSize: '14px',
                                            fontWeight: 600,
                                            color: '#000000',
                                        }

                                    }
                                }
                            }
                        },
                        colors: ["#E6533C", "#26BF94", "#D297E1", "#12CEDF", "#FFC540", "#98BDF5"],
                    };

                    document.querySelector("#grapheCdeEtape").innerHTML = " ";
                    var chart = new ApexCharts(document.querySelector("#grapheCdeEtape"), options);
                    chart.render();

                    $T1CallOut = 0;
                    $T1Telemarket = 0;
                    $T1Extranet = 0;
                    $T1PharmaML = 0;
                    $T1TedisDirect = 0;

                    nbeCmdeCallOut = 0;
                    nbeCmdeTelemarket = 0;
                    nbeCmdeExtranet = 0;
                    nbeCmdePharmaML = 0;
                    nbeCmdeTedisDirect = 0;

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

                        if (value.ModeCommande == 1 && value.TypeCommandeClient == 6) {
                            $T1CallOut += parseFloat(value.TotalHT);
                            nbeCmdeCallOut += parseFloat(value.nbreCommande)
                        }
                        if (value.ModeCommande == 1 && value.TypeCommandeClient != 6) {
                            $T1Telemarket += parseFloat(value.TotalHT);
                            nbeCmdeTelemarket += parseFloat(value.nbreCommande)
                        }

                        if (value.ModeCommande == 2) {
                            $T1Extranet += parseFloat(value.TotalHT);
                            nbeCmdeExtranet += parseFloat(value.nbreCommande)
                        }

                        if (value.ModeCommande == 3) {
                            $T1PharmaML += parseFloat(value.TotalHT);
                            nbeCmdePharmaML += parseFloat(value.nbreCommande)
                        }

                        if (value.ModeCommande == 4) {
                            $T1TedisDirect += parseFloat(value.TotalHT);
                            nbeCmdeTedisDirect += parseFloat(value.nbreCommande)
                        }

                    })

                    let nbreTTCde = nbeCmdeTelemarket + nbeCmdeCallOut + nbeCmdeExtranet + nbeCmdePharmaML + nbeCmdeTedisDirect

                    options = {
                        series: [{
                            name: 'Commandes', // Set a name for the series
                            data: [nbeCmdeTelemarket || 0, nbeCmdeCallOut || 0, nbeCmdeExtranet ||
                                0, nbeCmdePharmaML || 0, nbeCmdeTedisDirect || 0
                            ]
                        }],
                        chart: {
                            height: 195,
                            type: 'bar'
                        },
                        colors: ["#26bf94", "#e6533c", "#845adf", "#49b6f5", "#f5b849"],
                        plotOptions: {
                            bar: {

                                distributed: true,
                                horizontal: true

                            },
                            dataLabels: {
                                position: 'top',
                            },
                        },
                        dataLabels: {
                            enabled: true,
                            style: {
                                fontSize: '12px',
                                colors: ['#000'],

                            },
                            formatter: function(val, opt) {
                                if (nbreTTCde && nbreTTCde != 0) {
                                    return formatNumberPerf(val) + ' → ' + parseFloat(((parseFloat(val) * 100) / nbreTTCde)).toFixed(2) + ' %'
                                }
                            },
                            offsetX: 25,
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            show: false
                        },
                        xaxis: {
                            categories: ['{{$ModeGpharma}}'!= "2" ? 'Télémarket' : 'Telephone', 'Call out', 'Extranet', '{{$ModeGpharma}}'!= "2" ? 'Pharma-ML' : "Guichet", 'Tedis-direct'],
                            labels: {
                                show: false,
                                style: {
                                    colors: "#8c9097",
                                    fontSize: '13px',
                                    fontWeight: 600
                                }
                            }
                        },
                        yaxis: {
                            labels: {
                                show: true,
                                style: {
                                    colors: "#8c9097",
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    cssClass: 'apexcharts-yaxis-label',
                                },
                            }
                        }

                    };

                    document.querySelector("#columns-distributed").innerHTML = " ";
                    chart = new ApexCharts(document.querySelector("#columns-distributed"), options);
                    chart.render();

                    $('#callOut').text(formatNumberPerf($T1CallOut))
                    $('#telemarket').text(formatNumberPerf($T1Telemarket))
                    $('#extranet').text(formatNumberPerf($T1Extranet))
                    $('#pharmaML').text(formatNumberPerf($T1PharmaML))
                    $('#tedisDirect').text(formatNumberPerf($T1TedisDirect))

                    let dataFactureClientParModeCde = resp.FactureClientParModeCde

                    $ttFactClientCallOutParModeCde = 0
                    $ttFactClientTelemarketParModeCde = 0
                    $ttFactClientExtranetParModeCde = 0
                    $ttFactClientPharmaMLParModeCde = 0
                    $ttFactClientTedisDirectParModeCde = 0

                    nbreFactClientCmdeCallOutParModeCde = 0
                    nbreFactClientCmdeTelemarketParModeCde = 0
                    nbreFactClientCmdeExtranetParModeCde = 0
                    nbreFactClientCmdePharmaMLParModeCde = 0
                    nbreFactClientCmdeTedisDirectParModeCde = 0

                    dataFactureClientParModeCde.forEach(function(value, key) {                        

                        if (value.ModePassationComde == 1 && value.TypeCommandeClient == 6) {
                            $ttFactClientCallOutParModeCde += parseFloat(value.TotalHT);
                            nbreFactClientCmdeCallOutParModeCde += parseFloat(value.nbreCommande)
                        }
                        if (value.ModePassationComde == 1 && value.TypeCommandeClient != 6) {
                            $ttFactClientTelemarketParModeCde += parseFloat(value.TotalHT);
                            nbreFactClientCmdeTelemarketParModeCde += parseFloat(value.nbreCommande)
                        }

                        if (value.ModePassationComde == 2) {
                            $ttFactClientExtranetParModeCde += parseFloat(value.TotalHT);
                            nbreFactClientCmdeExtranetParModeCde += parseFloat(value.nbreCommande)
                        }

                        if (value.ModePassationComde == 3) {
                            $ttFactClientPharmaMLParModeCde += parseFloat(value.TotalHT);
                            nbreFactClientCmdePharmaMLParModeCde += parseFloat(value.nbreCommande)
                        }

                        if (value.ModePassationComde == 4) {
                            $ttFactClientTedisDirectParModeCde += parseFloat(value.TotalHT);
                            nbreFactClientCmdeTedisDirectParModeCde += parseFloat(value.nbreCommande)
                        }
                    })

                    let nbreFactClientTTCdeParModeCde = nbreFactClientCmdeCallOutParModeCde + nbreFactClientCmdeTelemarketParModeCde + nbreFactClientCmdeExtranetParModeCde + nbreFactClientCmdePharmaMLParModeCde + nbreFactClientCmdeTedisDirectParModeCde
                    
                    options2 = {
                        series: [{
                            name: 'Commandes', // Set a name for the series
                            data: [nbreFactClientCmdeTelemarketParModeCde || 0, nbreFactClientCmdeCallOutParModeCde || 0, nbreFactClientCmdeExtranetParModeCde ||
                                0, nbreFactClientCmdePharmaMLParModeCde || 0, nbreFactClientCmdeTedisDirectParModeCde || 0
                            ]
                        }],
                        chart: {
                            height: 195,
                            type: 'bar'
                        },
                        colors: ["#26bf94", "#e6533c", "#845adf", "#49b6f5", "#f5b849"],
                        plotOptions: {
                            bar: {

                                distributed: true,
                                horizontal: true

                            },
                            dataLabels: {
                                position: 'top',
                            },
                        },
                        dataLabels: {
                            enabled: true,
                            style: {
                                fontSize: '12px',
                                colors: ['#000'],
                                
                            },
                            formatter: function(val, opt) {
                                if (nbreFactClientTTCdeParModeCde && nbreFactClientTTCdeParModeCde != 0) {
                                    return formatNumberPerf(val) + ' → ' + parseFloat(((parseFloat(val) * 100) / nbreFactClientTTCdeParModeCde)).toFixed(2) + ' %'
                                }
                            },
                            offsetX: 25,
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            show: false
                        },
                        xaxis: {
                            categories: ['{{$ModeGpharma}}'!= "2" ? 'Télémarket' : 'Telephone', 'Call out', 'Extranet', '{{$ModeGpharma}}'!= "2" ? 'Pharma-ML' : "Guichet", 'Tedis-direct'],
                            labels: {
                                show: false,
                                style: {
                                    colors: "#8c9097",
                                    fontSize: '13px',
                                    fontWeight: 600
                                }
                            }
                        },
                        yaxis: {
                            labels: {
                                show: true,
                                style: {
                                    colors: "#8c9097",
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    cssClass: 'apexcharts-yaxis-label',
                                },
                            }
                        }

                    };

                    document.querySelector("#graphFactClientParModeCde").innerHTML = " ";
                    chart2 = new ApexCharts(document.querySelector("#graphFactClientParModeCde"), options2);
                    chart2.render();

                    $('#libFactureClientModeCdecallOut').text(formatNumberPerf($ttFactClientCallOutParModeCde))
                    $('#libFactureClientModeCdetelemarket').text(formatNumberPerf($ttFactClientTelemarketParModeCde))
                    $('#libFactureClientModeCdeextranet').text(formatNumberPerf($ttFactClientExtranetParModeCde))
                    $('#libFactureClientModeCdepharmaML').text(formatNumberPerf($ttFactClientPharmaMLParModeCde))
                    $('#libFactureClientModeCdetedisDirect').text(formatNumberPerf($ttFactClientTedisDirectParModeCde))
                }
            })
        }

        function statProduit(IDAGENCE) { 
            $.ajax({
                type: "get",
                url: "{{ route("statProduit") }}",
                data: {"data" : IDAGENCE} ,
                dataType: "json",
                success: function (response) {
                    if(response.error == false){


                        let data = response.data

                        $("#nbreProduit").text(data.nbreProduit)
                        $("#nbreBoite").text(data.nbreBoite)
                        $("#valeurPFHT").text(data.valeurPFHT)
                        $("#valeurPGHT").text(data.valeurPGHT)
                        $("#valeurPRevient").text(data.valeurPRevient)
                        $("#valeurPRMP").text(data.valeurPRMP)
                        $("#valeurCessionHT").text(data.valeurCessionHT)
                        $("#valeurCessionTTC").text(data.valeurCessionTTC)

                        let prmpPfht = chaineEnNumerique(data.valeurPFHT) <= 0 ? 0 : chaineEnNumerique(data.valeurPRMP) / chaineEnNumerique(data.valeurPFHT)
                        $("#prmpPfht").text(formatNumberPerf(prmpPfht))
                        $("#marge").text(data.marge)
                    }
                }
            });
        }

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

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

            $.ajax({

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

                    if (response.success == 1) {

                        $('#IDCLIENT').val(response.data.IDCLIENT).trigger('change')
                        $('#IDAGENCE').val(response.data.IDAGENCE).trigger('change')
                        $('#IDGROUPEMENT_CLIENT').val(response.data.IDGROUPEMENT_CLIENT).trigger(
                            'change')
                        $('#IDTOURNEE').val(response.data.IDTOURNEE).trigger('change')
                        _('labelleFiltrePeriode').innerHTML = explodeDate(response.data.debutPeriode, '-') +
                            '&nbsp;-&nbsp;' + explodeDate(response.data.finPeriode, '-')

                        $('#labelleFiltreAgence').html($('#IDAGENCE option:selected').html());
                        $('#labelleFiltreClient').html($('#IDCLIENT option:selected').html());
                        $('#labelleFiltreGrpmt').html($('#IDGROUPEMENT_CLIENT option:selected').html());
                        $('#labelleFiltreTournee').html($('#IDTOURNEE option:selected').html());

                        chargerListeTopClientsSelonCde()
                        chargerListeTopClientsSelonFact()
                        GetAllStatistique()
                        statProduit($('#IDAGENCE').val())
                        completeHandler()

                        const offcanvasElement = document.getElementById('offcanvasTop');
                        const offcanvasInstance = bootstrap.Offcanvas.getOrCreateInstance(
                            offcanvasElement);

                        offcanvasInstance.hide();


                    } else {

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

        chargerSessionFiltre()

        $('#IDCLIENT').select2({
            dropdownParent: $('#offcanvasTop')
        })
        // $('#IDAGENCE').select2({dropdownParent : $('#offcanvasTop')})
        $('#IDPERSONNEL').select2({
            dropdownParent: $('#offcanvasTop')
        })
        $('#IDTOURNEE').select2({
            dropdownParent: $('#offcanvasTop')
        })
        $('#IDGROUPEMENT_CLIENT').select2({
            dropdownParent: $('#offcanvasTop')
        })


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

            $('#divFiltreClient').removeClass('d-flex')
            $('#divFiltreClient').addClass('d-none')
            $('#IDCLIENT').val(0).trigger('change')
        })
        _('closeFiltreGroupement').addEventListener('click', function() {

            $('#divFiltreGrpmt').removeClass('d-flex')
            $('#divFiltreGrpmt').addClass('d-none')
            $('#IDGROUPEMENT_CLIENT').val(0).trigger('change')
        })
        _('closeFiltreTournee').addEventListener('click', function() {

            $('#divFiltreTournee').removeClass('d-flex')
            $('#divFiltreTournee').addClass('d-none')
            $('#IDTOURNEE').val(0).trigger('change')
        })

        $(document).ready(function() {

            // console.log($('#IDAGENCE').find('option:selected'))
            // afficherOptionDeFiltre()
        })
    </script>
    
    <!-- Script de modification de site -->
    <script>

        ignoreGlobalSessionUpdate = false

        _('idSiteEnCours').addEventListener('change', function(){

            modifierSessionSite()
                .then(() => {

                    location.reload()
                })
        })
    </script>
@endsection