{# ------------------- 1️⃣ Ventes ------------------- #}
<div class="tab-pane fade show active" id="tabVentes">
    <div class="row">
        {# Menu vertical #}
        <div class="col-md-3">
            <div class="list-group graph-menu" id="graphMenuVentes">

                {# ===================== Menu : Chiffre d’affaires global ===================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"
                    data-bs-target="#graphChiffreAffaire">
                    <span>
                        <i class="fa fa-chart-line text-success me-2"></i> Chiffre d’affaires global
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="CA net (hors frais de livraison) et/ou marge, calculés sur les commandes Expédié/Livré/Payé. Périodes rapides et mode personnalisé disponibles."></i>
                </a>

                {# ===================== Menu : Évolution mensuelle ============================ #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphEvolutionMensuelle">
                    <span>
                        <i class="fa fa-calendar-alt text-primary me-2"></i> Évolution mensuelle
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Évolution mensuelle du CA net (hors livraison) par année, sur les commandes Expédié/Livré/Payé. Compare plusieurs années ou filtre par 12 derniers mois / entre 2 années / période personnalisée."></i>
                </a>

                {# ===================== Menu : Évolution des ventes =========================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphEvolutionVentes">
                    <span>
                        <i class="fa fa-chart-area text-info me-2"></i> Évolution des ventes
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Suivi du CA net ou du nombre de commandes, agrégé par jour/semaine/mois selon la période. Commandes prises en compte : Expédié/Livré/Payé."></i>
                </a>

                {# ===================== Menu : Marge brute sur ventes ========================= #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphMargeVentes">
                    <span>
                        <i class="fa fa-coins text-success me-2"></i> Marge brute sur ventes
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Marge brute = CA net (hors livraison) − coût d’achat des produits vendus, calculée et visualisée par période. Statuts : Expédié/Livré/Payé."></i>
                </a>

                {# ===================== Menu : Panier moyen ================================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphPanierMoyen">
                    <span>
                        <i class="fa fa-balance-scale text-warning me-2"></i> Panier moyen
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Montant moyen par commande = CA net (hors livraison) ÷ nombre de commandes Expédié/Livré/Payé, sur la période choisie."></i>
                </a>

                {# ===================== Menu : Répartition par catégorie ====================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphRepartitionCategorie">
                    <span>
                        <i class="fa fa-chart-pie text-danger me-2"></i> Répartition par catégorie
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Part de chaque catégorie dans le CA net (hors livraison) sur la période sélectionnée, pour identifier les catégories dominantes. Statuts : Expédié/Livré/Payé."></i>
                </a>

                {# ===================== Menu : Répartition par région/ville =================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphRepartitionRegion">
                    <span>
                        <i class="fa fa-map-marker-alt text-info me-2"></i> Répartition par région/ville
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Répartition du CA net (hors livraison) ou du nombre de commandes par ville/région, sur la période choisie. Statuts : Expédié/Livré/Payé."></i>
                </a>

                {# ===================== Menu : Moyens de paiement Clients ===================== #}
                <a href="#"
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    data-bs-target="#graphPaiementClient">
                    <span>
                        <i class="fa fa-credit-card me-2 text-primary"></i> Moyens de paiement Clients
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2"
                        data-bs-toggle="tooltip" data-placement="left"
                        title="Répartition des moyens de paiement utilisés sur les commandes Expédié/Livré/Payé, pour analyser les préférences des clients."></i>
                </a>


            </div>
        </div>

        {# Conteneur graphique #}
        <div class="col-md-9">
                {# ---------------------- 1. Onglet Ventes ---------------------- #}
            <div id="graphContainerVentes">

                {# 1.1. Chiffre d’affaires global #}
                <div id="graphChiffreAffaire" class="graph-block">


                    <div class="card-body">
                        {# Notice d’info #}
                        <div class="info-hint">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Sommes du <strong>chiffre d’affaires net</strong> (hors frais de livraison) et de la <strong>marge</strong>,
                                calculées sur les commandes <em>Expédié/Livré/Payé</em>.
                                Par défaut, la période <em>Cette année</em> est sélectionnée.
                            </div>
                        </div>
                        {# Zone de filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                            {# Gauche: période (inchangé) #}
                            <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                                <div class="me-3 mb-2 d-inline-flex align-items-center">
                                <select id="quickPeriodChiffreAffaire" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                                    <option value="all">Toute la période</option>
                                    <option value="7days">7 derniers jours</option>
                                    <option value="30days">30 derniers jours</option>
                                    <option value="week">Cette semaine</option>
                                    <option value="last_week">Semaine dernière</option>
                                    <option value="month">Ce mois</option>
                                    <option value="last_month">Mois dernier</option>
                                    <option value="year" selected>Cette année</option>
                                    <option value="last_year">Année dernière</option>
                                    <option value="custom">Personnalisée</option>
                                </select>
                                </div>
                            </div>

                            {# Centre: Données #}
                            <div class="me-3 mb-2 d-inline-flex align-items-center">
                                <label for="metricChiffreAffaire" class="me-2 mb-0">Données</label>
                                <select id="metricChiffreAffaire" class="form-control form-control-sm w-auto no-select2">
                                <option value="ca">Chiffre d'affaires (CA)</option>
                                <option value="margin">Marge</option>
                                <option value="ca+margin" selected>CA + Marge</option>
                                </select>
                            </div>

                            {# Droite: Type + HT/TTC #}
                            <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right chart-control">

                                <div id="basisChiffreAffaire" class="btn-group btn-group-sm me-2" role="group" title="Base">
                                    <button type="button" class="btn btn btn-secondary active" data-value="ht">HT</button>
                                    <button type="button" class="btn btn btn-secondary" data-value="ttc">TTC</button>
                                </div>

                                 <select id="chartTypeChiffreAffaire" class="form-control form-control-sm w-auto no-select2 type-select me-2">
                                    <option value="bar" selected>Barres</option>
                                    <option value="line">Courbe</option>
                                </select>

                            </div>




                            {# Bloc "Personnalisée" (inchangé, garde w-100 d-none) #}
                            <div id="customCAWrapper" class="w-100 d-none">
                                {# Sélecteur de mode (inchangé) #}
                                <div class="me-3 mb-2" style="display:inline-flex; align-items:center;">
                                <label for="modeChiffreAffaire" class="me-2 mb-0">Mode</label>
                                <select id="modeChiffreAffaire" class="form-control form-control-sm w-auto no-select2">
                                    <option value="annee" selected>Par année</option>
                                    <option value="mois">Par mois</option>
                                    <option value="periode">Par période</option>
                                </select>
                                </div>

                                {# Année (inchangé) #}
                                <div id="anneeSelectGroup" class="me-3 mb-2" style="display:inline-flex; align-items:center;">
                                    <label for="startCAYear" class="me-2 mb-0">De </label>
                                    <select id="startCAYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                                    <label for="endCAYear" class="me-2 mb-0">À </label>
                                    <select id="endCAYear" class="form-control form-control-sm w-auto no-select2"></select>
                                </div>

                                {# Mois (inchangé) #}
                                <div id="moisSelectGroup" class="me-3 mb-2 d-none" style="display:inline-flex; align-items:center;">
                                    <label for="singleYear" class="me-2 mb-0">Année</label>
                                    <select id="singleYear" class="form-control form-control-sm w-auto no-select2"></select>
                                </div>

                                {# Période libre (inchangé : classes + style conservés) #}
                                <div id="periodeSelectGroup" class="me-3 mb-2 d-none" style="display:inline-flex; align-items:center;">
                                    <label for="startCADate" class="me-2 mb-0">De </label>
                                    <input type="date" id="startCADate" class="form-control form-control-sm w-auto me-2">
                                    <label for="endCADate" class="me-2 mb-0">À </label>
                                    <input type="date" id="endCADate" class="form-control form-control-sm w-auto">
                                </div>
                            </div>



                        </div>

                        <div class="graph-divider"></div>

                        {# Graphique #}
                         <div class="graph-canvas" style="height:420px;">
                            <div id="prodChiffreAffaireLoader" class="graph-loader align-items-center justify-content-center text-muted" >
                                <i class="fa fa-spinner fa-spin me-2"></i> Chargement…
                            </div>
                            <canvas id="chartChiffreAffaire"></canvas>
                         </div>
                    </div>
                </div>

                {# 1.2. Évolution mensuelle du chiffre d'affaire (courbe) #}
                <div id="graphEvolutionMensuelle" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Évolution du <b>CA net</b> par <b>mois</b> pour chaque <b>année sélectionnée</b> (commandes <em>Livré/Payé</em>). Par défaut l’<em>année en cours</em>.
                                <span class="d-none d-md-inline">Astuce&nbsp;: cliquez une année dans la légende pour la masquer/afficher.</span>
                            </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                            {# Période — gauche #}
                            <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                                <select id="periodEvolutionMensuelle" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                                <option value="year" selected>Cette année</option>
                                <option value="last12">12 derniers mois</option>
                                <option value="between_years">Entre 2 années</option>
                                <option value="custom_months">Personnalisée (mois)</option>
                                </select>
                            </div>

                            {# Pousse à droite #}
                            <div class="ms-auto"></div>

                            {# … dans la toolbar, remplacer le bloc droite par : #}
                            <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right">
                                <div id="basisEvolutionMensuelle" class="btn-group btn-group-sm me-2" role="group" title="Base">
                                    <button type="button" class="btn btn btn-secondary active" data-value="ht">HT</button>
                                    <button type="button" class="btn btn btn-secondary" data-value="ttc">TTC</button>
                                </div>
                                <select id="typeEvolutionMensuelle" class="form-control form-control-sm w-auto no-select2 type-select">
                                    <option value="line" selected>Courbe</option>
                                    <option value="bar">Barres</option>
                                </select>
                            </div>


                             {# Sélecteurs conditionnels #}
                            <div class="w-100 mt-2">

                                {# Entre 2 années #}
                                <div id="anneeRangeEvolution" class="me-3 mb-2 d-none  align-items-center">
                                    <label for="startYearEvolution" class="me-2 mb-0">De</label>
                                    <select id="startYearEvolution" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                                    <label for="endYearEvolution" class="me-2 mb-0">À</label>
                                    <select id="endYearEvolution" class="form-control form-control-sm w-auto no-select2"></select>
                                </div>

                                {# Personnalisée (mois) #}
                                <div id="moisRangeEvolution" class="me-3 mb-2 d-none align-items-center">
                                    <label for="startMonthEvolution" class="me-2 mb-0">De</label>
                                    <input type="month" id="startMonthEvolution" class="form-control form-control-sm w-auto me-2">
                                    <label for="endMonthEvolution" class="me-2 mb-0">À</label>
                                    <input type="month" id="endMonthEvolution" class="form-control form-control-sm w-auto">
                                </div>
                            </div>
                        </div>


                        {# Séparateur #}
                        <div class="graph-divider"></div>


                        {# Graphique #}
                        <div style="height:420px;">
                            <canvas id="chartEvolutionMensuelle"></canvas>
                        </div>

                    </div>
                </div>


                {# 1.3. Évolution des ventes par jour/semaine/mois #}
                <div id="graphEvolutionVentes" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Suit l’évolution des <b>ventes nettes</b> ou du <b>nombre de commandes</b> sur la période sélectionnée,
                                agrégation <b>auto</b> par <em>jour</em> (≤ 30 j) sinon <em>mois</em>.
                                Calcul sur commandes <em>Expédié/Livré/Payé</em>. Par défaut <em>ce mois</em>.
                            </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodEvolutionVentes" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month" selected>Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year">Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Données — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="metricEvolutionVentes" class="me-2 mb-0">Données</label>
                            <select id="metricEvolutionVentes" class="form-control form-control-sm w-auto no-select2">
                            <option value="ca" selected>Chiffre d’affaires</option>
                            <option value="orders">Nb Commandes</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="typeEvolutionVentes" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Période personnalisée #}
                        <div id="dateRangeEvolutionWrapper" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateEvolution" class="me-2 mb-0">Date début</label>
                            <input type="date" id="startDateEvolution" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateEvolution" class="me-2 mb-0">Date fin</label>
                            <input type="date" id="endDateEvolution" class="form-control form-control-sm w-auto">
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartEvolutionVentes"></canvas>
                        </div>

                    </div>
                </div>


                {# 1.4 Marge brute sur ventes — moyenne #}
                <div id="graphMargeVentes" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Marge = <b>Ventes nettes</b> (hors livraison) − <b>Coûts d’achat</b>. Agrégation auto jour (≤30j) / mois (>30j). Base <b>HT</b> par défaut.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodMargeVentes" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Base HT/TTC — droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base (Montant)">
                            <div id="basisMargeVentes" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                            <label class="btn btn-outline-dark active" data-value="ht" id="basisMargeVentesHT">
                                <input type="radio" autocomplete="off" checked> HT
                            </label>
                            <label class="btn btn-outline-dark" data-value="ttc" id="basisMargeVentesTTC">
                                <input type="radio" autocomplete="off"> TTC
                            </label>
                            </div>
                        </div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeMargeVentes" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc "Personnalisée" #}
                        <div id="customMargeVentesWrapper" class="w-100 d-none">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeMargeVentes" class="me-2 mb-0">Mode</label>
                            <select id="modeMargeVentes" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeMargeVentesGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startMargeVentesYear" class="me-2 mb-0">De</label>
                            <select id="startMargeVentesYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endMargeVentesYear" class="me-2 mb-0">À</label>
                            <select id="endMargeVentesYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisMargeVentesGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleMargeVentesYear" class="me-2 mb-0">Année</label>
                            <select id="singleMargeVentesYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeMargeVentesGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateMargeVentes" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateMargeVentes" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateMargeVentes" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateMargeVentes" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartMargeVentes"></canvas>
                        </div>

                    </div>
                </div>

                {# 1.5 Panier moyen #}
                <div id="graphPanierMoyen" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Le <b>panier moyen</b> = <b>CA net</b> / <b>nb commandes</b> sur la période. Par défaut <em>cette année</em>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="periodPanierMoyen" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="typePanierMoyen" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc "Personnalisée" #}
                        <div id="customPanierWrapper" class="w-100 d-none">
                        {# Mode #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modePanierMoyen" class="me-2 mb-0">Mode</label>
                            <select id="modePanierMoyen" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        {# Années : de ... à ... #}
                        <div id="anneeSelectGroupPanier" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startYearPanier" class="me-2 mb-0">De</label>
                            <select id="startYearPanier" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endYearPanier" class="me-2 mb-0">À</label>
                            <select id="endYearPanier" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        {# Mois : une seule année #}
                        <div id="moisSelectGroupPanier" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singlePanierYear" class="me-2 mb-0">Année</label>
                            <select id="singlePanierYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        {# Période libre #}
                        <div id="periodeSelectGroupPanier" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDatePanier" class="me-2 mb-0">De</label>
                            <input type="date" id="startDatePanier" class="form-control form-control-sm w-auto me-2">
                            <label for="endDatePanier" class="me-2 mb-0">À</label>
                            <input type="date" id="endDatePanier" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartPanierMoyen"></canvas>
                        </div>

                    </div>
                </div>


                {# 1.6 Répartition par catégorie #}
                <div id="graphRepartitionCategorie" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Répartition des ventes par <b>catégorie</b>, en <b>CA</b> ou <b>nombre de commandes</b>. Période configurable.
                            </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                            {# Période — gauche #}
                            <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                                <select id="quickPeriodRepartition" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                                <option value="all">Toute la période</option>
                                <option value="7days">7 derniers jours</option>
                                <option value="30days">30 derniers jours</option>
                                <option value="week">Cette semaine</option>
                                <option value="last_week">Semaine dernière</option>
                                <option value="month">Ce mois</option>
                                <option value="last_month">Mois dernier</option>
                                <option value="year" selected>Cette année</option>
                                <option value="last_year">Année dernière</option>
                                <option value="custom">Personnalisée</option>
                                </select>
                            </div>

                            {# Données — gauche #}
                            <div class="me-3 mb-2 d-inline-flex align-items-center">
                                <label for="metricRepartitionCategorie" class="me-2 mb-0">Données</label>
                                <select id="metricRepartitionCategorie" class="form-control form-control-sm w-auto no-select2">
                                <option value="ca" selected>Chiffre d’affaires</option>
                                <option value="orders">Nb Commandes</option>
                                </select>
                            </div>

                            {# Pousse à droite #}
                            <div class="ms-auto"></div>

                            {# Type — extrémité droite #}
                            <div class="mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                                <select id="chartTypeRepartition" class="form-control form-control-sm w-auto no-select2 type-select">
                                <option value="bar" selected>Barres</option>
                                <option value="doughnut">Donut</option>
                                </select>
                            </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Mode personnalisé #}
                        <div id="customRepartitionWrapper" class="w-100 d-none">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeRepartition" class="me-2 mb-0">Mode</label>
                            <select id="modeRepartition" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeRepartitionGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startRepartitionYear" class="me-2 mb-0">De</label>
                            <select id="startRepartitionYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endRepartitionYear" class="me-2 mb-0">À</label>
                            <select id="endRepartitionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisRepartitionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleRepartitionYear" class="me-2 mb-0">Année</label>
                            <select id="singleRepartitionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeRepartitionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateRepartition" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateRepartition" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateRepartition" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateRepartition" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartRepartitionCategorie"></canvas>
                        </div>

                    </div>
                </div>

                {# 1.7 Répartition par région/ville #}
                <div id="graphRepartitionRegion" class="graph-block d-none">
                    <div class="card-body">

                        {# Description #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Répartition du <b>CA</b> ou du <b>nombre de commandes</b> par <b>région</b> ou <b>ville</b>. Période configurable.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first">
                            <select id="quickPeriodRepartitionRegion" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Données — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="metricRepartitionRegion" class="me-2 mb-0">Données</label>
                            <select id="metricRepartitionRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="ca" selected>Chiffre d’affaires</option>
                            <option value="orders">Nombre de commandes</option>
                            </select>
                        </div>

                        {# Grouper par — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="groupByRepartitionRegion" class="me-2 mb-0">Grouper par</label>
                            <select id="groupByRepartitionRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="region" selected>Région</option>
                            <option value="city">Ville</option>
                            </select>
                        </div>

                        {# Filtre région — conditionnel #}
                        <div id="regionFilterWrapper" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="regionRepartitionRegion" class="me-2 mb-0">Région</label>
                            <select id="regionRepartitionRegion" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        {# Top — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="limitRepartitionRegion" class="me-2 mb-0">Top</label>
                            <select id="limitRepartitionRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="0">Tous</option><option>5</option><option selected>10</option><option>15</option>
                            <option>20</option><option>30</option><option>40</option><option>50</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeRepartitionRegion" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Donut</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Mode personnalisé #}
                        <div id="customRepartitionRegionWrapper" class="w-100 d-none">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeRepartitionRegion" class="me-2 mb-0">Mode</label>
                            <select id="modeRepartitionRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeRepartitionRegionGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startRepartitionRegionYear" class="me-2 mb-0">De</label>
                            <select id="startRepartitionRegionYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endRepartitionRegionYear" class="me-2 mb-0">À</label>
                            <select id="endRepartitionRegionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisRepartitionRegionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleRepartitionRegionYear" class="me-2 mb-0">Année</label>
                            <select id="singleRepartitionRegionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeRepartitionRegionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateRepartitionRegion" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateRepartitionRegion" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateRepartitionRegion" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateRepartitionRegion" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartRepartitionRegion"></canvas>
                        </div>

                    </div>
                </div>

             {# 1.8 Répartition par moyens de paiement des clients #}
            <div id="graphPaiementClient" class="graph-block d-none">
                <div class="card-body">

                    {# Description #}
                    <div class="info-hint mb-2">
                    <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Répartition des commandes par <b>moyen de paiement</b> sur la période sélectionnée.
                    </div>
                    </div>

                    {# Toolbar filtres #}
                    <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left" title="Période">
                            <select id="quickPeriodClientPaiement" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeClientPaiement" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Donut</option>
                            </select>
                        </div>
                    </div>

                    {# Séparateur #}
                    <div class="graph-divider"></div>

                    {# Bloc "Personnalisée" #}
                    <div id="customClientPaiementWrapper" class="w-100 d-none">
                    <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeClientPaiement" class="me-2 mb-0">Mode</label>
                        <select id="modeClientPaiement" class="form-control form-control-sm w-auto no-select2">
                        <option value="annee" selected>Par année</option>
                        <option value="mois">Par mois</option>
                        <option value="periode">Par période</option>
                        </select>
                    </div>

                    <div id="anneeClientPaiementGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startClientPaiementYear" class="me-2 mb-0">De</label>
                        <select id="startClientPaiementYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endClientPaiementYear" class="me-2 mb-0">À</label>
                        <select id="endClientPaiementYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="moisClientPaiementGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="singleClientPaiementYear" class="me-2 mb-0">Année</label>
                        <select id="singleClientPaiementYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="periodeClientPaiementGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="startDateClientPaiement" class="me-2 mb-0">De</label>
                        <input type="date" id="startDateClientPaiement" class="form-control form-control-sm w-auto me-2">
                        <label for="endDateClientPaiement" class="me-2 mb-0">À</label>
                        <input type="date" id="endDateClientPaiement" class="form-control form-control-sm w-auto">
                    </div>
                    </div>

                    {# Graphique #}
                    <div style="height:420px;">
                    <canvas id="clientPaiementChart"></canvas>
                    </div>

                </div>
            </div>




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