{# =========================== Onglet : STATISTIQUES FOURNISSEURS  =========================== #}

<div class="tab-pane fade" id="tabFournisseurs">

    <div class="row">
        {# =========================== Colonne gauche : MENU  =========================== #}
        <div class="col-md-3">
          <div id="graphMenuFournisseurs" class="list-group graph-menu">

            {# -- MENU 1 : Fournisseur : Top fournisseurs -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" data-bs-target="#graphTopFournisseurs">
              <span><i class="fa fa-trophy text-warning me-2"></i> Top fournisseurs</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="Classement des fournisseurs par montant d’achat, quantité ou nombre de commandes, sur la période."></i>
            </a>

            {# -- MENU 2 : Fournisseur : Marge & rentabilité (deuxième position) -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphFournisseurMarge">
              <span><i class="fa fa-chart-line text-success me-2"></i> Marge & rentabilité</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="Comparaison CA vs coût fournisseur pour estimer la marge et la rentabilité par fournisseur."></i>
            </a>


            {# -- MENU 3 : Fournisseur : Pareto 80/20 fournisseurs -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphParetoFournisseurs">
              <span><i class="fa fa-project-diagram text-danger me-2"></i> Pareto 80/20</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="Part cumulée des achats : identifie les fournisseurs qui concentrent ~80% du volume."></i>
            </a>


            {# -- MENU 4 : Fournisseur : Répartition par mode de paiement (par fournisseur) -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              data-bs-target="#graphPaiementFournisseurs">
              <span><i class="fa fa-credit-card text-success me-2"></i> Répartition par mode de paiement</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                title="Pour chaque fournisseur : part des montants (HT/TTC) ou nombre de BR par mode de règlement."></i>
            </a>

            {# -- MENU 7 : Fournisseur : Retours  fournisseurs -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphRetourFournisseurs">
              <span><i class="fa fa-undo text-danger me-2"></i> Retours </span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="Nombre et taux de retours imputables au fournisseur (défauts, non-conformités, erreurs)."></i>
            </a>

            {# -- MENU 8 : Fournisseur : Délais moyens de livraison -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"  data-bs-target="#graphDelaisFournisseurs">
              <span><i class="fa fa-clock text-warning me-2"></i> Délais moyens de livraison</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="Temps moyen entre la commande fournisseur et la réception effective."></i>
            </a>

            {# -- MENU 9 : Fournisseur : Respect des délais (%) -- #}
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphRespectDelaisFournisseurs">
              <span><i class="fa fa-check-circle text-info me-2"></i> Respect des délais (%)</span>
              <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                  title="% de livraisons reçues dans le délai promis vs total des livraisons."></i>
            </a>



          </div>
        </div>

        {# =========================== Colonne droite : CONTENU   =========================== #}
        <div class="col-md-9">
            <div id="graphContainerFournisseur">
               {# 6.1 Top fournisseurs #}
                <div id="graphTopFournisseurs" class="graph-block">
                  <div class="card-body">

                    {# Info #}
                    <div class="info-hint mb-2">
                      <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Classement par <b>montant d’achat</b> (HT/TTC), <b>quantité</b> ou <b>nb commandes</b>.
                      </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="quickPeriodTopFournisseurs" 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>

                      {# Top (source) — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="kindTopFournisseurs" class="me-2 mb-0">Top</label>
                        <select id="kindTopFournisseurs" class="form-control form-control-sm w-auto no-select2">
                          <option value="purchase" selected>Achats</option>
                          <option value="sales">Ventes</option>
                          <option value="margin_amount">Marge (TND)</option>
                          <option value="margin_pct">Marge (%)</option>
                        </select>
                      </div>

                      {# Métrique — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="metricTopFournisseurs" class="me-2 mb-0">Métrique</label>
                        <select id="metricTopFournisseurs" class="form-control form-control-sm w-auto no-select2">
                          <option value="amount" selected>Montant</option>
                          <option value="qty">Quantité</option>
                          <option value="orders">Nb commandes</option>
                        </select>
                      </div>

                      {# Limite — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="limitTopFournisseurs" class="me-2 mb-0">Top</label>
                        <select id="limitTopFournisseurs" class="form-control form-control-sm w-auto no-select2">
                          <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>

                      {# HT/TTC — droite #}
                      <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base de calcul (Montant)">
                        <div id="basisTopFournisseurs" 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="basisTopFournisseursHT">
                            <input type="radio" autocomplete="off" checked> HT
                          </label>
                          <label class="btn btn-outline-dark" data-value="ttc" id="basisTopFournisseursTTC">
                            <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="chartTypeTopFournisseurs" 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="customTopFournisseursWrapper" class="w-100 d-none">
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeTopFournisseurs" class="me-2 mb-0">Mode</label>
                        <select id="modeTopFournisseurs" 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="anneeTopFournisseursGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startTopFournisseursYear" class="me-2 mb-0">De</label>
                        <select id="startTopFournisseursYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endTopFournisseursYear" class="me-2 mb-0">À</label>
                        <select id="endTopFournisseursYear" class="form-control form-control-sm w-auto no-select2"></select>
                      </div>

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

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

                  </div>

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

                {# 6.2 Marge & rentabilité #}
                <div id="graphFournisseurMarge" class="graph-block d-none">
                  <div class="card-body">

                    {# Info #}
                    <div class="info-hint mb-2">
                      <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Compare le <b>CA</b> généré (ventes) au <b>coût d’achat</b> (réceptions) par fournisseur.
                        Marge = CA − Coût. 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="quickPeriodFournisseurMarge" 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>

                      {# Vue — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="viewFournisseurMarge" class="me-2 mb-0">Vue</label>
                        <select id="viewFournisseurMarge" class="form-control form-control-sm w-auto no-select2">
                          <option value="compare" selected>Comparatif (CA vs Coût)</option>
                          <option value="margin_amount">Marge (TND - %)</option>
                        </select>
                      </div>

                      {# Top — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="limitFournisseurMarge" class="me-2 mb-0">Top</label>
                        <select id="limitFournisseurMarge" class="form-control form-control-sm w-auto no-select2">
                          <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>

                      {# HT/TTC — droite #}
                      <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base (Montant)">
                        <div id="basisFournisseurMarge" 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="basisFournisseurMargeHT">
                            <input type="radio" autocomplete="off" checked> HT
                          </label>
                          <label class="btn btn-outline-dark" data-value="ttc" id="basisFournisseurMargeTTC">
                            <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="chartTypeFournisseurMarge" 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="customFournisseurMargeWrapper" class="w-100 d-none">
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeFournisseurMarge" class="me-2 mb-0">Mode</label>
                        <select id="modeFournisseurMarge" 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="anneeFournisseurMargeGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startFournisseurMargeYear" class="me-2 mb-0">De</label>
                        <select id="startFournisseurMargeYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endFournisseurMargeYear" class="me-2 mb-0">À</label>
                        <select id="endFournisseurMargeYear" class="form-control form-control-sm w-auto no-select2"></select>
                      </div>

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

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

                  </div>

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


                {# 6.3 : Pareto 80/20 #}
                <div id="graphParetoFournisseurs" class="graph-block d-none">
                  <div class="card-body">

                    {# Alerte d’info #}
                    <div class="info-hint mb-2">
                      <div class="small d-flex align-items-center">
                        <i class="fa fa-info-circle me-2"></i>
                        <span>
                          Classement décroissant (montant) + <b>% cumulé</b> des achats.
                          <a href="#" onclick="showHelpModal('Pareto Fournisseurs','Affiche le montant par fournisseur (barres) et la courbe cumulée % (axe droit).');return false;">En savoir plus</a>
                        </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="quickPeriodParetoFournisseurs" 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>

                      {# Top N — gauche #}
                      <div class="ms-2 mb-2 d-inline-flex align-items-center" title="Limiter le nombre de fournisseurs affichés">
                        <label for="limitParetoFournisseurs" class="me-2 mb-0">Top</label>
                        <select id="limitParetoFournisseurs" class="form-control form-control-sm w-auto no-select2">
                          <option>10</option><option selected>30</option><option>50</option><option>100</option>
                        </select>
                      </div>

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

                      {# HT/TTC — droite #}
                      <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base de calcul (montant)">
                        <div id="basisParetoFournisseurs" 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="basisParetoFournisseursHT">
                            <input type="radio" autocomplete="off" checked> HT
                          </label>
                          <label class="btn btn-outline-dark" data-value="ttc" id="basisParetoFournisseursTTC">
                            <input type="radio" autocomplete="off"> TTC
                          </label>
                        </div>
                      </div>
                    </div>

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

                    {# Personnalisée #}
                    <div id="customParetoFournisseursWrapper" class="w-100 d-none">
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeParetoFournisseurs" class="me-2 mb-0">Mode</label>
                        <select id="modeParetoFournisseurs" 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="anneeParetoFournisseursGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startParetoFournisseursYear" class="me-2 mb-0">De</label>
                        <select id="startParetoFournisseursYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endParetoFournisseursYear" class="me-2 mb-0">À</label>
                        <select id="endParetoFournisseursYear" class="form-control form-control-sm w-auto no-select2"></select>
                      </div>

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

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

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

                  </div>
                </div>


                {# 6.4 Répartition par mode de paiement (fournisseurs) #}
                <div id="graphPaiementFournisseurs" class="graph-block d-none">
                  <div class="card-body">

                    {# Info #}
                    <div class="info-hint mb-2">
                      <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Répartition des montants / bons de réception par mode de paiement, empilé par fournisseur.
                      </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="quickPeriodPaiementF" 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>

                      {# Métrique — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="metricPaiementF" class="me-2 mb-0">Métrique</label>
                        <select id="metricPaiementF" class="form-control form-control-sm w-auto no-select2">
                          <option value="amount" selected>Montant</option>
                          <option value="receipts">Nb BR</option>
                        </select>
                      </div>

                      {# Top — gauche #}
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="limitPaiementF" class="me-2 mb-0">Top</label>
                        <select id="limitPaiementF" class="form-control form-control-sm w-auto no-select2">
                          <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>

                      {# HT/TTC — droite (actif si Montant) #}
                      <div class="mb-2 d-inline-flex align-items-center graph-basis-right" id="basisBlockPaiementF" title="Base (Montant)">
                        <div id="basisPaiementF" 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="basisPaiementFHT">
                            <input type="radio" autocomplete="off" checked> HT
                          </label>
                          <label class="btn btn-outline-dark" data-value="ttc" id="basisPaiementFTTC">
                            <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="chartTypePaiementF" 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>

                    {# Personnalisée (dates) #}
                    <div id="customPaiementFWrapper" class="w-100 d-none">
                      <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modePaiementF" class="me-2 mb-0">Mode</label>
                        <select id="modePaiementF" 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="periodeSelectGroupPaiementF" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="startDatePaiementF" class="me-2 mb-0">De</label>
                        <input type="date" id="startDatePaiementF" class="form-control form-control-sm w-auto me-2">
                        <label for="endDatePaiementF" class="me-2 mb-0">À</label>
                        <input type="date" id="endDatePaiementF" class="form-control form-control-sm w-auto">
                      </div>
                    </div>

                    {# Tags modes de paiement #}
                    <div id="paymentModesTags" class="mb-2"></div>

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

                  </div>
                </div>


               {# 6.5 Retours (fournisseurs) #}
              <div id="graphRetourFournisseurs" class="graph-block d-none">
                <div class="card-body">

                  {# Info #}
                  <div class="info-hint mb-2">
                    <div class="small">
                      <i class="fa fa-info-circle me-1"></i>
                      Nombre et taux de retours imputables au fournisseur (défauts, non-conformités, erreurs), sur la période.
                    </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="quickPeriodRetourF" 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>

                    {# Métrique — gauche #}
                    <div class="me-3 mb-2 d-inline-flex align-items-center">
                      <label for="metricRetourF" class="me-2 mb-0">Métrique</label>
                      <select id="metricRetourF" class="form-control form-control-sm w-auto no-select2">
                        <option value="count" selected>Nombre de retours</option>
                        <option value="rate">Taux de retours (%)</option>
                      </select>
                    </div>

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

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

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

                  {# Personnalisée (dates) #}
                  <div id="customRetourFWrapper" class="w-100 d-none">
                    <div id="periodeSelectGroupRetourF" class="me-3 mb-2 d-inline-flex align-items-center">
                      <label for="startDateRetourF" class="me-2 mb-0">De</label>
                      <input type="date" id="startDateRetourF" class="form-control form-control-sm w-auto me-2">
                      <label for="endDateRetourF" class="me-2 mb-0">À</label>
                      <input type="date" id="endDateRetourF" class="form-control form-control-sm w-auto">
                    </div>
                  </div>

                  {# Tags types de retours #}
                  <div id="retourTypesTags" class="mb-2"></div>

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

                </div>
              </div>



                {# -- BLOC 6 : Délais moyens de livraison -- #}
                <div id="graphDelaisFournisseurs" class="graph-block d-none">
                    <div class="info-hint">
                      <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Délai moyen (en jours) entre la <strong>commande fournisseur</strong> et la <strong>réception</strong>, par fournisseur.
                      </div>
                    </div>

                    <div class="card-body">
                      <div class="d-flex flex-wrap gap-3 mb-3 align-items-start w-100">
                        {#-- Période --#}
                        <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first">
                          <select id="quickPeriodDelaisF" 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>

                        {#-- Dates perso (si custom) --#}
                        <div id="periodeSelectGroupDelaisF" class="me-3 mb-2 d-none" style="display:inline-flex; align-items:center;">
                          <label for="startDateDelaisF" class="me-2 mb-0">De</label>
                          <input type="date" id="startDateDelaisF" class="form-control form-control-sm w-auto me-2">
                          <label for="endDateDelaisF" class="me-2 mb-0">À</label>
                          <input type="date" id="endDateDelaisF" class="form-control form-control-sm w-auto">
                        </div>

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

                      <div style="height:420px;">
                        <canvas id="chartDelaisFournisseurs"></canvas>
                      </div>
                    </div>
                  </div>


                {# -- BLOC 7 : Respect des délais (%) -- #}
                <div id="graphRespectDelaisFournisseurs" class="graph-block d-none">
                  <div class="info-hint">
                    <div class="small">
                      <i class="fa fa-info-circle me-1"></i>
                      % de livraisons reçues à l’heure (<= date promise) par fournisseur, sur la période.
                    </div>
                  </div>

                  <div class="card-body">
                    <div class="d-flex flex-wrap gap-3 mb-3 align-items-start w-100">
                      {#-- 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="quickPeriodRespectDelais" 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>

                      {#-- Top X --#}
                      <div class="mb-2 d-inline-flex align-items-center">
                        <label for="limitRespectDelais" class="me-2 mb-0">Top</label>
                        <select id="limitRespectDelais" class="form-control form-control-sm w-auto no-select2">
                          <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 (optionnel) — à droite --#}
                      <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                        <select id="chartTypeRespectDelais" 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>

                    {#-- Bloc "Personnalisée" (année / mois / période) --#}
                    <div id="customRespectDelaisWrapper" class="w-100 d-none">
                      <div class="me-3 mb-2" style="display:inline-flex; align-items:center;">
                        <label for="modeRespectDelais" class="me-2 mb-0">Mode</label>
                        <select id="modeRespectDelais" 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 --#}
                      <div id="anneeRespectDelaisGroup" class="me-3 mb-2" style="display:inline-flex; align-items:center;">
                        <label for="startRespectDelaisYear" class="me-2 mb-0">De</label>
                        <select id="startRespectDelaisYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endRespectDelaisYear" class="me-2 mb-0">À</label>
                        <select id="endRespectDelaisYear" class="form-control form-control-sm w-auto no-select2"></select>
                      </div>

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

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

                    <div style="height:420px;">
                      <canvas id="chartRespectDelaisFournisseurs"></canvas>
                    </div>
                  </div>
                </div>





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

</div>