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

@php
    $site = session()->get('site') ?? [];
    $ModeGpharma = ModeGpharma();
    // Le mode d'exploitation décide du nom donné au périmètre : TPOM chez l'un, C.M.U ailleurs.
    $libelleTypeProduit = $ModeGpharma == 3 ? 'TPOM' : 'C.M.U';
@endphp

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

        .filtre {
            cursor: pointer;
        }

        /* Puces des deux statuts ajoutés à la répartition des commandes. Les six autres
           viennent de styles.min.css ; on ne touche pas à ce fichier minifié pour deux
           règles. Ces couleurs sont reprises telles quelles par le graphe, via son
           tableau « colors » : la pastille de la légende et sa part du donut doivent
           désigner le même statut. */
        .hrm-jobs-legend.pointIndigo:before {
            background-color: #6C5FFC;
        }

        .hrm-jobs-legend.pointGris:before {
            background-color: #8C9097;
        }

        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-2 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Type Produit&nbsp;:</p>
                            <select class="form-select" id="TypeProduit" name="TypeProduit">
                                <option value="-1">TOUS</option>
                                <option value="0">{{ $ModeGpharma == 3 ? 'WINOULA' : 'NON ' . $libelleTypeProduit }}</option>
                                <option value="1">{{ $libelleTypeProduit }}</option>
                            </select>
                        </div>
                        {{-- Le bouton passe sur sa propre ligne : les six filtres occupent
                             désormais les douze colonnes. --}}
                        <div class="col-xl-12 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 --}}

        @php
            // Le bandeau de bienvenue et ses filtres ne s'affichent qu'avec les droits du
            // tableau de bord. Les raccourcis du comptage, eux, doivent rester atteignables
            // par le personnel de terrain : d'où la condition nommée, réutilisée plus bas.
            $accesTableauBord =
                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', []));
        @endphp

        {{-- Sans le bandeau du tableau de bord, les raccourcis ont leur propre ligne. --}}
        @if (!$accesTableauBord && $ModeGpharma == 2)
            <div class="d-flex align-items-center justify-content-end flex-wrap gap-2 my-4 page-header-breadcrumb">
                @include('pages.stocks.partials.boutonsComptage')
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Accueil</a></li>
                    </ol>
                </nav>
            </div>
        @endif

        <!-- Page Header -->
        @if ($accesTableauBord)
            <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 d-flex align-items-center flex-wrap gap-2">
                    @include('pages.stocks.partials.boutonsComptage')
                    <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 me-2 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 class="d-flex align-items-center btn-primary rounded-pill me-2 mb-2 px-2 py-0 filtre"
                        id="divFiltreTypeProduit" style="height: 18px;">
                        <p class="mb-0 me-2 fw-bold text-warning">Type&nbsp;:&nbsp;</p>
                        <p class="fw-bold mb-0" id="labelleFiltreTypeProduit"></p>
                    </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 p-0 mb-1">
                                        <div class="text-start">
                                            <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 p-0 mb-1">
                                        <div class="text-start">
                                            <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 p-0 mb-1">
                                        <div class="text-start">
                                            <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 mb-1">
                                        <div class="text-start">
                                            <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 mb-1">
                                        <div class="text-start">
                                            <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 mb-1">
                                        <div class="text-start">
                                            <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 class="col-md-4 p-0 mb-1">
                                        <div class="text-start">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointIndigo d-inline-block ms-2">Déjà
                                                livré
                                            </span>
                                            <div><span class="fs-12 fw-bold" id="Tstatus6">0</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-4 p-0 mb-1">
                                        <div class="text-start">
                                            <span
                                                class="text-muted fs-14 hrm-jobs-legend pointGris d-inline-block ms-2">Annulé
                                            </span>
                                            <div><span class="fs-12 fw-bold" id="Tstatus7">0</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div class="d-flex justify-content-center align-items-center pt-3">
                                <p class="text-muted fs-16">Valorisation commandes totales :&nbsp;</p>
                                <h6 class="fw-bold" style="margin-top : -10px;" id="CATTGrapheCdeEtape"></h6>
                            </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>
                            {{-- Totaux du bloc, sur le modèle du « Total Commandes » des statistiques
                                 par statut. Les quatre sont agrégés sur les mêmes factures, de sorte
                                 que Total HT - Total Remise = Total HT Net se vérifie à l'œil. --}}
                            <hr class="my-2">
                            <div class="d-flex justify-content-around align-items-center flex-wrap">
                                <div class="d-flex align-items-center px-2">
                                    <p class="text-muted fs-16 mb-0">Total HT :&nbsp;</p>
                                    <h6 class="fw-bold mb-0" id="libFactureClientModeCdeTotalHT">0</h6>
                                </div>
                                <div class="d-flex align-items-center px-2">
                                    <p class="text-muted fs-16 mb-0">Total Remise :&nbsp;</p>
                                    <h6 class="fw-bold mb-0" id="libFactureClientModeCdeTotalRemise">0</h6>
                                </div>
                                <div class="d-flex align-items-center px-2">
                                    <p class="text-muted fs-16 mb-0">Total HT Net :&nbsp;</p>
                                    <h6 class="fw-bold mb-0" id="libFactureClientModeCdeTotalHTNet">0</h6>
                                </div>
                                <div class="d-flex align-items-center px-2">
                                    <p class="text-muted fs-16 mb-0">Total Taxe :&nbsp;</p>
                                    <h6 class="fw-bold mb-0" id="libFactureClientModeCdeTotalTaxe">0</h6>
                                </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="{{ assetVersionne('assets/js/sales-dashboard.js') }}"></script>
    <script src="{{ assetVersionne('assets/js/fonction/fonctions-custom.js') }}"></script>
    <script src="{{ assetVersionne('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()
                        // Combo client en select2 AJAX (recherche à la frappe) — plus de préchargement des ~9900 clients.
                        initSelect2ClientAjax('#IDCLIENT', { labelFirst: 'TOUS LES CLIENTS', dropdownParent: $('#offcanvasTop') });
                        preselectClientSelect2('#IDCLIENT', response.data.IDCLIENT).then(() => {
                            $('#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, '-')

                        // Absent des sessions ouvertes avant l'ajout du filtre : on retombe sur TOUS.
                        $('#TypeProduit').val(response.data.TypeProduit ?? -1).trigger('change')
                        $('#labelleFiltreTypeProduit').html($('#TypeProduit option:selected').html());

                        chargerListeTopClientsSelonCde()
                        chargerListeTopClientsSelonFact()
                        statProduit($('#IDAGENCE').val(), $('#TypeProduit').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))
                    }


                    /* Huit compteurs à remettre à zéro, pas cinq : la boucle s'arrêtait à
                       Tstatus4, si bien que « Livré » gardait le montant de la recherche
                       précédente quand la nouvelle ne ramenait aucune commande livrée. */
                    for (var i = 0; i < 8; i++) {
                        $('#Tstatus' + i).text(0)
                    }
                    nbreCmdeEtape1 = 0;
                    nbreCmdeEtape2 = 0;
                    nbreCmdeEtape3 = 0;
                    nbreCmdeEtape4 = 0;
                    nbreCmdeEtape5 = 0;
                    nbreCmdeEtape6 = 0;
                    nbreCmdeEtape7 = 0;
                    nbreCmdeEtape8 = 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;
                        }

                        /* Étapes 7 et 8 : les commandes du flux « facture déjà livrée » et les
                           commandes annulées. Elles comptaient déjà dans le total sans avoir de
                           case à elles — d'où un total non nul au-dessus de six compteurs à zéro. */
                        if (value.EtapeCommande == 7) {
                            $('#Tstatus6').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape7 = value.nbreCommande;
                        }

                        if (value.EtapeCommande == 8) {
                            $('#Tstatus7').text(formatNumberPerf(value.TotalHT))
                            nbreCmdeEtape8 = value.nbreCommande;
                        }

                        CATTGrapheCdeEtape += parseFloat(value.TotalHT)
                    })

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

                    var options = {

                        series: [nbreCmdeEtape1, nbreCmdeEtape2, nbreCmdeEtape3, nbreCmdeEtape4,
                            nbreCmdeEtape5, nbreCmdeEtape6, nbreCmdeEtape7, nbreCmdeEtape8
                        ],
                        labels: ["Saisie", "Non collecte", "En collecte", "Facturé", "Expédié", "Livré",
                            "Déjà livré", "Annulé"
                        ],
                        /* Couleurs imposées, dans l'ordre des libellés : ce sont celles des
                           pastilles de la légende. Sans ce tableau, le donut prendrait la palette
                           par défaut d'ApexCharts et une part pourrait ne plus avoir la couleur du
                           statut qu'elle désigne. */
                        colors: ['#E6533C', '#26BF94', '#D297E1', '#12CEDF', '#FFC540', '#98BDF5',
                            '#6C5FFC', '#8C9097'
                        ],
                        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',
                                        }

                                    }
                                }
                            }
                        },
                    };

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

                    // Les quatre totaux portent sur TOUTES les lignes remontées, et non sur la
                    // seule somme des cinq modes affichés. Deux raisons : l'identité
                    // HT - Remise = HT Net n'a de sens que sur un ensemble unique, et une facture
                    // dont le mode de passation sortirait des cinq cases doit peser dans le total
                    // plutôt que d'en disparaître sans bruit.
                    let $ttFactClientParModeCde = 0
                    let $ttFactClientRemiseParModeCde = 0
                    let $ttFactClientHTNetParModeCde = 0
                    let $ttFactClientTaxeParModeCde = 0

                    dataFactureClientParModeCde.forEach(function(value) {

                        $ttFactClientParModeCde += parseFloat(value.TotalHT) || 0
                        $ttFactClientRemiseParModeCde += parseFloat(value.TotalRemise) || 0
                        $ttFactClientHTNetParModeCde += parseFloat(value.TotalHTNet) || 0
                        $ttFactClientTaxeParModeCde += parseFloat(value.TotalTaxe) || 0
                    })

                    $('#libFactureClientModeCdeTotalHT').text(formatNumberPerf($ttFactClientParModeCde))
                    $('#libFactureClientModeCdeTotalRemise').text(formatNumberPerf($ttFactClientRemiseParModeCde))
                    $('#libFactureClientModeCdeTotalHTNet').text(formatNumberPerf($ttFactClientHTNetParModeCde))
                    $('#libFactureClientModeCdeTotalTaxe').text(formatNumberPerf($ttFactClientTaxeParModeCde))
                }
            })
        }

        function statProduit(IDAGENCE, TypeProduit) { 
            $.ajax({
                type: "get",
                url: "{{ route("statProduit") }}",
                data: {"data" : IDAGENCE, "TypeProduit" : TypeProduit ?? $('#TypeProduit').val()} ,
                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());

                        $('#TypeProduit').val(response.data.TypeProduit ?? -1).trigger('change')
                        $('#labelleFiltreTypeProduit').html($('#TypeProduit option:selected').html());

                        chargerListeTopClientsSelonCde()
                        chargerListeTopClientsSelonFact()
                        GetAllStatistique()
                        statProduit($('#IDAGENCE').val(), $('#TypeProduit').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 est initialisé en select2 AJAX via initSelect2ClientAjax() (dans chargerSessionFiltre).
        // $('#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