{# ===================== Produit > Stats (menu vertical + blocs) ===================== #}

{% if "STATISTIQUE" in arrayRight or is_granted('ROLE_SUPER_ADMIN') %}
<div class="tab-pane" id="content_stats"  role="tabpanel"
     data-produit-id="{{ produit.id }}"
      data-endpoint-sales-trend="{{ path('produit_stats_sales_trend', {'id': produit.id}) }}"
      data-endpoint-years="{{ path('produit_stats_first_last_year', {'id': produit.id}) }}"
      data-endpoint-by-region="{{ path('produit_stats_by_region', { id: produit.id }) }}"
      data-endpoint-by-source="{{ path('produit_stats_by_source', {'id': produit.id}) }}"
      data-endpoint-by-status="{{ path('produit_stats_by_status', { id: produit.id }) }}"
      data-endpoint-exchange-rate="{{ path('produit_stats_exchange_rate', {'id': produit.id}) }}"
      data-endpoint-by-decli="{{ path('produit_stats_by_declination', {'id': produit.id}) }}"
>

  {# ====== Filtres globaux (conservés pour getGlobalFilters) ====== #}
    {# Notice d’info #}

  <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 ci-dessous.
        </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 graph-period-left">
            <select id="quickPeriodProd" class=" 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="customProdWrapper" class="custom-prod-wrapper d-none mb-2">
          <div class="me-3 mb-2 align-items-center" style="display:inline-flex;">
            <label for="modeProd" class="me-2 mb-0">Mode</label>
            <select id="modeProd" class=" 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="anneeProdGroup" class="me-3 mb-2 align-items-center" style="display:inline-flex;">
              <label for="startProdYear" class="me-2 mb-0">De</label>
              <select id="startProdYear" class=" w-auto me-2 no-select2"></select>
              <label for="endProdYear" class="me-2 mb-0">À</label>
              <select id="endProdYear" class=" w-auto no-select2"></select>
          </div>

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

          <div id="periodeProdGroup" class="me-3 mb-2 d-none align-items-center" style="display:inline-flex;">
            <label for="startDateProd" class="me-2 mb-0">De</label>
            <input type="date" id="startDateProd" class=" w-auto me-2">
            <label for="endDateProd" class="me-2 mb-0">À</label>
            <input type="date" id="endDateProd" class=" w-auto">
          </div>
        </div>


        <div class="ms-auto mb-2 d-inline-flex align-items-center" style="margin-right:5px">
            <div id="basisProd" 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>
        <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="showLabelsGlobalSwitch" title="Afficher les labels" checked>
                <span></span>
            </label>
        </div>

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

      </div>
    </div>

  {# ====== Résumé KPI ====== #}
  <div class="stats-kpi-row">
    <div class="stats-kpi">
      <div class="stats-kpi-label">CA total</div>
      <div class="stats-kpi-value">
        <span id="statProdCaTotalHt">—</span>
        <span class="stats-kpi-sub">HT</span>
      </div>
      <div class="stats-kpi-sub">
        <span id="statProdCaTotalTtc">—</span> TTC
      </div>
      <div id="statProdCaDelta" class="stats-kpi-delta stats-kpi-delta--neutral">—</div>
    </div>
    <div class="stats-kpi">
      <div class="stats-kpi-label">Marge totale</div>
      <div id="statProdMargeTotal" class="stats-kpi-value">—</div>
      <div class="stats-kpi-sub">Sur la période</div>
      <div id="statProdMargeDelta" class="stats-kpi-delta stats-kpi-delta--neutral">—</div>
    </div>
    <div class="stats-kpi">
      <div class="stats-kpi-label">Commandes</div>
      <div id="statProdOrdersTotal" class="stats-kpi-value">—</div>
      <div class="stats-kpi-sub">Statuts expédié/livré/payé</div>
      <div id="statProdOrdersDelta" class="stats-kpi-delta stats-kpi-delta--neutral">—</div>
    </div>
  </div>

  {# ====== Grille 2 colonnes: menu vertical + zone graphes ====== #}
  <div class="row">
    {# --------- Menu vertical --------- #}
    <div class="col-md-3">
      <div class="list-group graph-menu" id="graphMenuProduit">
        {# 1) Évolution des ventes #}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"
           data-bs-target="#blockProdSalesTrend">
          <span><i class="fa fa-chart-line 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="CA net et/ou marge du produit (Expédié/Livré/Payé)."></i>
        </a>

         {# 2) Ventes par déclinaison #}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
          data-bs-target="#blockProdDecli">
          <span><i class="fa fa-tags text-danger me-2"></i> Ventes par déclinaison</span>
          <i class="fa fa-info-circle text-secondary ms-2"
            data-bs-toggle="tooltip" data-placement="left"
            title="Répartition des ventes du produit par valeur de déclinaison (ex. taille, couleur). Affiche quantités, CA ou marge sur la période sélectionnée."></i>
        </a>

        {# 3) Ventes 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="#blockProdByRegion">
          <span><i class="fa fa-map-marker-alt text-primary me-2"></i> Ventes 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 par région/ville en nb commandes / CA / marge."></i>
        </a>

        {# 4) Ventes par source #}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
           data-bs-target="#blockProdBySource">
          <span><i class="fa fa-bullhorn text-warning me-2"></i> Ventes par source</span>
          <i class="fa fa-info-circle text-secondary ms-2"
          data-bs-toggle="tooltip" data-placement="left"
             title="Facebook, Instagram, boutique, etc."></i>
        </a>

        {# 5) Ventes par statut #}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
           data-bs-target="#blockProdStatus">
          <span><i class="fa fa-tasks text-success me-2"></i> Ventes par statut</span>
          <i class="fa fa-info-circle text-secondary ms-2"
          data-bs-toggle="tooltip" data-placement="left"
             title="Répartition des statuts pour ce produit."></i>
        </a>

         {# 6) Taux d'échnanges #}
        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
          data-bs-target="#blockProdExchangeRate">
          <span><i class="fa fa-exchange-alt text-success me-2"></i> Taux d’échanges validés</span>
          <i class="fa fa-info-circle text-secondary ms-2"
            data-bs-toggle="tooltip" data-placement="left"
            title="Évolution du pourcentage d’échanges validés pour ce produit, par période. Les échanges annulés sont exclus."></i>
        </a>



      </div>
    </div>

    {# --------- Zone graphiques --------- #}
    <div class="col-md-9">
      <div id="graphContainerProduit">

        {# === Bloc 1 : Évolution des ventes (conserve IDs existants) === #}
        <div id="blockProdSalesTrend" 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>chiffre d’affaires net</strong> (hors frais de livraison) et de la <strong>marge</strong> du produit sur la période sélectionnée.
                Les calculs incluent uniquement les commandes aux statuts <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em>.
                La base de calcul (<strong>HT</strong>/<strong>TTC</strong>) suit le sélecteur global des filtres.
              </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="metricProdTrend" class="me-2 mb-0">Données</label>
                <select id="metricProdTrend" class=" w-auto no-select2">
                  <option value="orders">Nombre de commandes</option>
                  <option value="ca">Chiffre d’affaires (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="chartTypeProdTrend" class=" w-auto no-select2 type-select">
                  <option value="line" selected>Courbe</option>
                  <option value="bar">Barres</option>
                </select>
              </div>
              <div class="chart-actions mb-2">
                <button type="button" class="btn btn-sm btn btn-secondary js-export-chart" data-bs-target="graphProdSalesTrend" title="Exporter en PNG">
                  <i class="fa fa-download"></i> PNG
                </button>
              </div>
            </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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

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

         {# --- Bloc 2 : Vente par declinaison --- #}
        <div id="blockProdDecli" class="graph-block d-none">
          <div class="info-hint mb-2">
            <div class="small">
              <i class="fa fa-info-circle me-1"></i>
              Répartition des ventes par <strong>valeur de déclinaison</strong> du produit, sur la période sélectionnée.
              Les calculs portent sur les commandes <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em>.
              {# Option "Position" permet de cibler la déclinaison n°1 (ex: Taille) ou n°2 (ex: Couleur), si utilisé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="metricProdDecli" class="mb-0 me-2">Données</label>
              <select id="metricProdDecli" class=" w-auto no-select2">
                <option value="qty" selected>Quantités</option>
                <option value="orders">Nb commandes</option>
              </select>
            </div>

            <div class="me-3 mb-2 d-inline-flex align-items-center">
              <label for="decliPosition" class="mb-0 me-2">Déclinaison</label>
              <select id="decliPosition" class=" w-auto no-select2">
                  <option value="">Toutes</option>
                  {% for pos in decliPositions %}
                    <option value="{{ pos.position }}">{{ pos.name }}</option>
                  {% endfor %}
                </select>
            </div>

            <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
              <select id="chartTypeProdDecli" class=" w-auto no-select2 type-select">
                <option value="bar" selected>Barres</option>
                <option value="doughnut">Donut</option>
              </select>
            </div>
          </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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

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

        {# === Bloc 3 : Ventes par région/ville === #}
        <div id="blockProdByRegion" class="graph-block d-none">
          <div class="graph-card">
            {# --- Info + Toolbar : Ventes par région/ville (produit) --- #}
            <div class="info-hint mb-2">
              <div class="small">
                <i class="fa fa-info-circle me-1"></i>
                Répartition du <strong>CA net</strong> (hors frais de livraison), de la <strong>marge</strong> ou du
                <strong>nombre de commandes</strong> par <b>région/ville</b> pour ce produit, sur la période sélectionnée.
                Les calculs incluent uniquement les commandes aux statuts <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em>.
                La base de calcul (<strong>HT</strong>/<strong>TTC</strong>) suit le sélecteur global des filtres.
              </div>
            </div>

            <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
              {# Données #}
              <div class="me-3 mb-2 d-inline-flex align-items-center">
                <label for="metricProdRegion" class="mb-0 me-2">Données</label>
                <select id="metricProdRegion" class=" 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>

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

              {# Filtre Région (conditionnel) #}
              <div id="regionFilterProdWrapper" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                <select id="regionProdRegion" class=" w-auto no-select2"></select>
              </div>

              {# Top X #}
              <div class="me-3 mb-2 d-inline-flex align-items-center">
                <label for="limitProdRegion" class="mb-0 me-2">Top</label>
                <select id="limitProdRegion" class=" 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>

              {# Type de graphique #}
              <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                <select id="chartTypeProdRegion" class=" w-auto no-select2 type-select">
                  <option value="bar" selected>Barres</option>
                  <option value="doughnut">Donut</option>
                </select>
              </div>
            </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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


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

        {# === Bloc 4 : Ventes par source === #}
        <div id="blockProdBySource" class="graph-block d-none">
          <div class="graph-card">
           {# --- Info + Toolbar : Ventes par source (produit) --- #}
            <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, boutique, etc.) du
                <strong>CA net</strong> (hors frais de livraison), de la <strong>marge</strong> ou du
                <strong>nombre de commandes</strong> pour ce produit, sur la période sélectionnée.
                Les calculs incluent uniquement les commandes aux statuts <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em>.
                La base de calcul (<strong>HT</strong>/<strong>TTC</strong>) suit le sélecteur global des filtres.
              </div>
            </div>

            <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
              {# Données #}
              <div class="me-3 mb-2 d-inline-flex align-items-center">
                <label for="metricProdSource" class="mb-0 me-2">Données</label>
                <select id="metricProdSource" class=" 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>

              {# Type de graphique #}
              <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                <select id="chartTypeProdSource" class=" w-auto no-select2 type-select">
                  <option value="bar" selected>Barres</option>
                  <option value="doughnut">Donut</option>
                </select>
              </div>
            </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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

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

        {# === Bloc 5 : Ventes par statut === #}
        <div id="blockProdStatus" class="graph-block d-none">
          <div class="graph-card">
           {# --- Info + Toolbar : Ventes par statut (produit) --- #}
            <div class="info-hint mb-2">
              <div class="small">
                <i class="fa fa-info-circle me-1"></i>
                Répartition des <strong>Ventes par statut</strong> pour ce produit, avec possibilité d’afficher le
                <strong>nombre de commandes</strong>, le <strong>CA net</strong> (hors frais de livraison) et/ou la
                <strong>marge</strong>, sur la période sélectionnée.
                Les calculs incluent uniquement les statuts <em>Expédié</em>, <em>Livré</em> ou <em>Payé</em> pour les montants.
                La base de calcul (<strong>HT</strong>/<strong>TTC</strong>) suit le sélecteur global des filtres.
              </div>
            </div>

            <div class="graph-toolbar d-flex align-items-center flex-wrap mb-2">
              {# Données #}
              <div class="me-3 mb-2 d-inline-flex align-items-center">
                <label for="metricProdStatus" class="mb-0 me-2">Données</label>
                <select id="metricProdStatus" class=" 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>

              {# Type de graphique #}
              <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                <select id="chartTypeProdStatus" class=" w-auto no-select2 type-select">
                  <option value="bar" selected>Barres</option>
                  <option value="doughnut">Donut</option>
                </select>
              </div>
            </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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


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

        {# --- Bloc 6 : Taux d'échanges --- #}
        <div id="blockProdExchangeRate" class="graph-block d-none">
          <div class="info-hint mb-2">
            <div class="small">
              <i class="fa fa-info-circle me-1"></i>
              Part des <strong>échanges validés</strong> concernant ce produit, par période sélectionnée
              (granularité auto <em>jour</em>/<em>mois</em>). Les <strong>échanges annulés</strong> sont exclus du numérateur.
              Le taux est calculé comme <strong>(échanges validés) ÷ (commandes Expédié/Livré/Payé)</strong> × 100.
              La base HT/TTC ne s’applique pas (taux en %), mais les filtres de période sont partagés.
            </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 class="mb-0 me-2">Données</label>
              <select id="metricProdExchangeRate" class=" w-auto no-select2">
                <option value="rate" selected>Taux (%)</option>
                <option value="exchanges">Nb échanges validés</option>
                <option value="orders">Nb commandes (base)</option>
              </select>
            </div>

            <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
              <select id="chartTypeProdExchangeRate" class=" w-auto no-select2 type-select">
                <option value="bar" selected>Barres</option>
                <option value="line">Courbe</option>
              </select>
            </div>
          </div>

            <div class="graph-legend">
              <span class="legend-item"><span class="legend-dot legend-dot--ca"></span>CA</span>
              <span class="legend-item"><span class="legend-dot legend-dot--marge"></span>Marge</span>
              <span class="legend-item"><span class="legend-dot legend-dot--orders"></span>Commandes</span>
            </div>

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

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



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

{# ===================== Scripts ===================== #}
{% block extra_scripts %}

{% endblock %}