{# ===================== Client > Stats (menu en haut + blocs) ===================== #}
<style>
  :root{
    --crm-border:#e9ecef;
    --crm-muted:#6c757d;
    --crm-title:#2f3b52;
    --crm-bg:#fff;
  }

  #content_client_stats .graph-card{
    background:var(--crm-bg);
    border:1px solid var(--crm-border);
    border-radius:10px;
    padding:12px 12px 16px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    margin-bottom:12px;
  }
  #content_client_stats .graph-head{
    display:flex;align-items:center;justify-content:space-between;
    margin:4px 2px 10px;
    font-weight:600;color:var(--crm-title);
  }

  .graph-loader{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.85); border-radius:10px; z-index:5; display:none;
  }

  .graph-divider{ height:1px; background:#f0f2f5; margin:6px 0 10px; }

  @media (max-width: 767.98px) {
    #content_client_stats .info-hint{ display:none !important; }
  }

  /* ===== Menu graphes en haut (horizontal) ===== */
  #graphMenuClient.list-group-horizontal{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: .25rem;
  }

  #graphMenuClient.list-group-horizontal .list-group-item{
    border: 1px solid var(--crm-border);
    border-radius: 10px !important;
    margin-right: 6px;
    background: #f8f9fa;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
  }

  #graphMenuClient.list-group-horizontal .list-group-item:hover{
    background:#ffffff;
    border-color:#dfe3e7;
  }

  #graphMenuClient.list-group-horizontal .list-group-item.active{
    background: #ffffff;
    border-color: #cfe2ff;
    color: #0b5ed7;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    position: relative;
  }

  #graphMenuClient.list-group-horizontal .list-group-item.active::before{
    content:"";
    position:absolute;
    left: 10px;
    bottom: -6px;
    width: calc(100% - 20px);
    height: 3px;
    border-radius: 3px;
    background: #0d6efd;
  }

 .graph-menu-grid{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1400px){
  .graph-menu-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1200px){
  .graph-menu-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 992px){
  .graph-menu-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.graph-menu-grid .list-group-item{
  border: 1px solid var(--crm-border);
  border-radius: 10px;
  background: #f8f9fa;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graph-menu-grid .list-group-item:hover{
  background: #fff;
  border-color: #dfe3e7;
}

.graph-menu-grid .list-group-item.active{
  background: #fff;
  border-color: #cfe2ff;
  color: #0b5ed7;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  position: relative;
}

.graph-menu-grid .list-group-item.active::before{
  content:"";
  position:absolute;
  left: 10px;
  bottom: -6px;
  width: calc(100% - 20px);
  height: 3px;
  border-radius: 3px;
  background: #0d6efd;
}
</style>

<div class="tab-pane" id="static" role="tabpanel">
  {% if "STATISTIQUE" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
    <div id="content_client_stats"
         class="tab-pane {{ app.request.get('tab') == 'content_client_stats' ? 'active' : '' }}"
         role="tabpanel"
         data-client-id="{{ user.id }}"
         {# Endpoints globaux #}
         data-endpoint-years="{{ path('client_stats_first_last_year', {'id': user.id}) }}"
         {# Endpoints graphiques #}
         data-endpoint-sales-trend="{{ path('client_stats_sales_trend', {'id': user.id}) }}"
         data-endpoint-by-source="{{ path('client_stats_by_source', {'id': user.id}) }}"
         data-endpoint-by-category="{{ path('client_stats_by_category', {'id': user.id}) }}"
         data-endpoint-by-status="{{ path('client_stats_by_status', {'id': user.id}) }}"
         data-endpoint-repurchase-delay="{{ path('client_stats_repurchase_delay', {'id': user.id}) }}"
         data-endpoint-aov="{{ path('client_stats_aov', {'id': user.id}) }}"
         data-endpoint-exchange="{{ path('client_stats_exchange', {'id': user.id}) }}"
         {# Endpoints supplémentaires #}
         data-endpoint-by-declination="{{ path('client_stats_by_declination', {'id': user.id}) }}"
         data-endpoint-repeated-products="{{ path('client_stats_repeated_products', {'id': user.id}) }}"
         data-endpoint-payment-modes="{{ path('client_stats_payment_modes', {'id': user.id}) }}"
         data-endpoint-promo-vs-full="{{ path('client_stats_promo_vs_full', {'id': user.id}) }}">

      {# ====== Filtres globaux (client) ====== #}
      <div class="graph-card mb-4">
        <div class="info-hint mb-2">
          <div class="small">
            <i class="fa fa-info-circle me-1"></i>
            Ces <b>filtres</b> s’appliquent à tous les graphiques de la fiche client.
          </div>
        </div>

        <div class="graph-toolbar d-flex align-items-center flex-wrap">
          <div class="me-3 mb-2 d-inline-flex align-items-center">
            <select id="quickPeriodClient" class="form-control form-control-sm w-auto no-select2 period-with-icon" title="Choisir la période">
              <option value="all" selected>Toute la période</option>
              <option value="3days">3 derniers jours</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">Cette année</option>
              <option value="last_year">Année dernière</option>
              <option value="custom">Personnalisée</option>
            </select>
          </div>

          {# Mode personnalisé #}
          <div id="customClientWrapper" class="w-100 d-none mt-2" style="display:inline-flex;">
            <div class="me-3 mb-2 align-items-center" style="display:inline-flex;">
              <label for="modeClient" class="me-2 mb-0">Mode</label>
              <select id="modeClient" 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="anneeClientGroup" class="me-3 mb-2 align-items-center" style="display:inline-flex;">
              <label for="startClientYear" class="me-2 mb-0">De</label>
              <select id="startClientYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
              <label for="endClientYear" class="me-2 mb-0">À</label>
              <select id="endClientYear" class="form-control form-control-sm w-auto no-select2"></select>
            </div>

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

            <div id="periodeClientGroup" class="me-3 mb-2 d-none align-items-center" style="display:inline-flex;">
              <label for="startDateClient" class="me-2 mb-0">De</label>
              <input type="date" id="startDateClient" class="form-control form-control-sm w-auto me-2">
              <label for="endDateClient" class="me-2 mb-0">À</label>
              <input type="date" id="endDateClient" class="form-control form-control-sm w-auto">
            </div>
          </div>

          {# Base HT/TTC pour CA/Marge #}
          <div class="ms-auto mb-2 d-inline-flex align-items-center" style="margin-right:5px">
            <div id="basisClient" class="btn-group btn-group-sm" role="group" title="Base">
              <button type="button" class="btn btn btn-secondary" data-value="ht">HT</button>
              <button type="button" class="btn btn btn-secondary active" data-value="ttc">TTC</button>
            </div>
          </div>

          {# Labels datalabels #}
          <div class="me-3 mb-2 d-flex align-items-center" style="margin-right:5px">
            <label class="m-switch m-switch--icon-check m-switch--secondary mb-0">
              <input type="checkbox" id="showLabelsClientSwitch" title="Afficher les labels" checked>
              <span></span>
            </label>
          </div>

          {# Bouton global Recharger #}
          <div class="mb-2 d-flex align-items-center">
            <button id="btnReloadAllClientCharts" class="btn btn-sm btn btn-secondary" title="Recharger tous les graphiques">
              <i class="fa fa-sync me-1"></i>
            </button>
          </div>
        </div>
      </div>

      {# ====== Menu en haut + graphes pleine largeur ====== #}
      <div class="row">

        {# ▸ MOBILE : select #}
        <div class="col-12 d-md-none mb-2">
          <select class="form-select form-select-sm"
                  onchange="document.querySelector(this.value).click()">
            <option value="[data-bs-target='#blockClientSalesTrend']">Évolution des achats</option>
            <option value="[data-bs-target='#blockClientBySource']">Sources des commandes</option>
            <option value="[data-bs-target='#blockClientByCategory']">Catégories achetées</option>
            <option value="[data-bs-target='#blockClientByStatus']">Commandes par statut</option>
            <option value="[data-bs-target='#blockClientRepurchaseDelay']">Délai entre commandes</option>
            <option value="[data-bs-target='#blockClientAOV']">Panier moyen</option>
            <option value="[data-bs-target='#blockClientExchange']">Nb et taux d’échanges</option>
            <option value="[data-bs-target='#blockClientByDeclination']">Commandes par déclinaison</option>
            <option value="[data-bs-target='#blockClientRepeatedProducts']">Produits récurrents</option>
            <option value="[data-bs-target='#blockClientPaymentModes']">Modes de paiement</option>
            <option value="[data-bs-target='#blockClientPromoVsFull']">Promo vs plein tarif</option>
          </select>
        </div>

        {# ▸ DESKTOP : menu horizontal #}
        <div class="col-12 mb-2 d-none d-md-block">
          <div id="graphMenuClient" class="graph-menu-grid">
            {# garde EXACTEMENT les mêmes <a ... data-bs-target="..."> ... </a> #}

            <a href="#" class="list-group-item list-group-item-action active"
              data-bs-target="#blockClientSalesTrend">
              <i class="fa fa-chart-line text-info"></i> <span>Évolution Achats</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientBySource">
              <i class="fa fa-bullhorn text-warning"></i> <span>Sources</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientByCategory">
              <i class="fa fa-tags text-danger"></i> <span>Catégories</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientByStatus">
              <i class="fa fa-tasks text-success"></i> <span>Statuts</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientRepurchaseDelay">
              <i class="fa fa-clock text-secondary"></i> <span>Délai</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientAOV">
              <i class="fa fa-shopping-basket text-primary"></i> <span>Panier moyen</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientExchange">
              <i class="fa fa-exchange-alt text-success"></i> <span>Échanges</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientByDeclination">
              <i class="fa fa-tags text-info"></i> <span>Déclinaisons</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientRepeatedProducts">
              <i class="fa fa-sync-alt text-primary"></i> <span>Récurrents</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientPaymentModes">
              <i class="fa fa-credit-card text-danger"></i> <span>Paiement</span>
            </a>

            <a href="#" class="list-group-item list-group-item-action"
              data-bs-target="#blockClientPromoVsFull">
              <i class="fa fa-gift text-pink"></i> <span>Promo</span>
            </a>
          </div>
        </div>

        {# ▸ Zone graphiques pleine largeur #}
        <div class="col-12">
          <div id="graphContainerClient">

            {# === 1) Évolution des achats === #}
            <div id="blockClientSalesTrend" class="graph-block">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Sommes du <strong>CA net</strong> (hors frais de livraison) et/ou de la <strong>marge</strong> issus des commandes de ce client.
                    Statuts pris en compte: <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em>. La base (<strong>HT</strong>/<strong>TTC</strong>) suit le sélecteur global.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="metricClientTrend" class="me-2 mb-0">Données</label>
                    <select id="metricClientTrend" class="form-control form-control-sm w-auto no-select2">
                      <option value="orders">Nb commandes</option>
                      <option value="ca">CA</option>
                      <option value="margin">Marge</option>
                      <option value="ca_margin" selected>CA + Marge</option>
                    </select>
                  </div>

                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientTrend" 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>
                </div>

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

                <div style="position:relative; height:380px;">
                  <div id="clientSalesTrendLoader" 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="graphClientSalesTrend"></canvas>
                </div>
              </div>
            </div>

            {# === 2) Sources des commandes === #}
            <div id="blockClientBySource" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Répartition par <strong>source</strong> (Facebook, Instagram, site, etc.) des commandes de ce client,
                    en <strong>nb</strong>, <strong>CA</strong> ou <strong>marge</strong>. Base HT/TTC selon filtre global.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="metricClientSource" class="mb-0 me-2">Données</label>
                    <select id="metricClientSource" class="form-control form-control-sm w-auto no-select2">
                      <option value="orders" selected>Nb commandes</option>
                      <option value="ca">CA</option>
                      <option value="margin">Marge</option>
                      <option value="ca_margin">CA + Marge</option>
                    </select>
                  </div>
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientSource" class="form-control form-control-sm w-auto no-select2 type-select">
                      <option value="bar" selected>Barres</option>
                      <option value="doughnut">Secteurs</option>
                    </select>
                  </div>
                </div>

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

                <div style="position:relative; height:380px;">
                  <div id="clientBySourceLoader" 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="graphClientBySource"></canvas>
                </div>
              </div>
            </div>

            {# === 3) Catégories produits achetés === #}
            <div id="blockClientByCategory" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Répartition par <strong>catégorie produit</strong> achetée par ce client
                    (quantités/CA/marge) sur la période sélectionnée.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="metricClientCategory" class="mb-0 me-2">Données</label>
                    <select id="metricClientCategory" class="form-control form-control-sm w-auto no-select2">
                      <option value="qty" selected>Quantités</option>
                      <option value="orders">Nb commandes</option>
                      <option value="ca">CA</option>
                      <option value="margin">Marge</option>
                      <option value="ca_margin">CA + Marge</option>
                    </select>
                  </div>
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientCategory" class="form-control form-control-sm w-auto no-select2 type-select">
                      <option value="bar" selected>Barres</option>
                      <option value="doughnut">Secteurs</option>
                    </select>
                  </div>
                </div>

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

                <div style="position:relative; height:380px;">
                  <div id="clientByCategoryLoader" 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="graphClientByCategory"></canvas>
                </div>
              </div>
            </div>

            {# === 4) Commandes par statut === #}
            <div id="blockClientByStatus" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Répartition des <strong>commandes</strong> du client par <strong>statut</strong>,
                    avec possibilité d’afficher <strong>nb</strong>, <strong>CA</strong> et/ou <strong>marge</strong>.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="me-3 mb-2 d-inline-flex align-items-center">
                    <label for="metricClientStatus" class="mb-0 me-2">Données</label>
                    <select id="metricClientStatus" class="form-control form-control-sm w-auto no-select2">
                      <option value="orders" selected>Nb commandes</option>
                      <option value="ca">CA</option>
                      <option value="margin">Marge</option>
                      <option value="ca+margin">CA + Marge</option>
                    </select>
                  </div>
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientStatus" class="form-control form-control-sm w-auto no-select2 type-select">
                      <option value="bar" selected>Barres</option>
                      <option value="doughnut">Secteurs</option>
                    </select>
                  </div>
                </div>

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

                <div style="position:relative; height:380px;">
                  <div id="clientStatusLoader" 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="graphClientByStatus"></canvas>
                </div>
              </div>
            </div>

            {# === 5) Délai moyen entre commandes === #}
            <div id="blockClientRepurchaseDelay" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Délai moyen (en jours) entre deux commandes successives de ce client, selon la période/granularité sélectionnée.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientRepurchaseDelay" 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>

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

                <div style="position:relative; height:380px;">
                  <div id="clientRepurchaseDelayLoader" 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="graphClientRepurchaseDelay"></canvas>
                </div>
              </div>
            </div>

            {# === 6) Panier moyen (AOV) === #}
            <div id="blockClientAOV" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    <strong>Panier moyen</strong> du client (montant moyen par commande) sur la période sélectionnée.
                    Base HT/TTC selon filtre global.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientAOV" 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>

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

                <div style="position:relative; height:380px;">
                  <div id="clientAOVLoader" 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="graphClientAOV"></canvas>
                </div>
              </div>
            </div>

            {# === 7) Taux de d’échange === #}
            <div id="blockClientExchange" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small">
                    <i class="fa fa-info-circle me-1"></i>
                    Part des <strong>échanges</strong> sur les commandes du client.
                    Calculs en % sur la base des commandes Expédié/Livré/Payé.
                  </div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientExchange" 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>

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

                <div style="position:relative; height:380px;">
                  <div id="clientExchangeLoader" 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="graphClientExchange"></canvas>
                </div>
              </div>
            </div>

            {# Déclinaisons #}
            <div id="blockClientByDeclination" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small"><i class="fa fa-info-circle me-1"></i> Répartition des commandes du client par <strong>déclinaison</strong> (ex. taille, couleur).</div>
                </div>

                <div class="mb-3">
                  <label for="selectDeclinationType" class="mb-1">Filtrer par déclinaison :</label>
                  <select id="selectDeclinationType" class="form-control-sm w-auto d-inline-block mb-2">
                    {# rempli dynamiquement #}
                  </select>
                </div>

                <div style="position:relative; height:380px;">
                  <div id="clientDeclinationLoader" 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="graphClientByDeclination"></canvas>
                </div>
              </div>
            </div>

            {# Produits récurrents #}
            <div id="blockClientRepeatedProducts" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small"><i class="fa fa-info-circle me-1"></i> Produits <strong>achetés plusieurs fois</strong> par ce client.</div>
                </div>
                <div style="position:relative; height:380px;">
                  <div id="clientRepeatedProductsLoader" 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="graphClientRepeatedProducts"></canvas>
                </div>
              </div>
            </div>

            {# Paiement #}
            <div id="blockClientPaymentModes" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small"><i class="fa fa-info-circle me-1"></i> Analyse des <strong>modes de paiement</strong> utilisés par ce client.</div>
                </div>

                <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
                  <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                    <select id="chartTypeClientPaymentModes" class="form-control form-control-sm w-auto no-select2 type-select">
                      <option value="horizontalBar" selected>Barres</option>
                      <option value="doughnut">Secteurs</option>
                    </select>
                  </div>
                </div>

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

                <div style="position:relative; height:380px;">
                  <div id="clientPaymentModesLoader" 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="graphClientPaymentModes"></canvas>
                </div>
              </div>
            </div>

            {# Promo vs plein tarif #}
            <div id="blockClientPromoVsFull" class="graph-block d-none">
              <div class="graph-card">
                <div class="info-hint mb-2">
                  <div class="small"><i class="fa fa-info-circle me-1"></i> Répartition des achats entre <strong>articles en promotion</strong> et <strong>plein tarif</strong>.</div>
                </div>
                <div style="position:relative; height:380px;">
                  <div id="clientPromoVsFullLoader" 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="graphClientPromoVsFull"></canvas>
                </div>
              </div>
            </div>

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

    </div>
  {% endif %}
</div>

{# ===================== Scripts ===================== #}
{% block extra_scripts %}
  <script src="{{ asset('js/admin/statistic-client-charts.js') }}"></script>
{% endblock %}