{# ------------------- 2️⃣ Achats ------------------- #}
<div class="tab-pane fade" id="tabAchats">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group graph-menu" id="graphMenuAchats">

                {# 1. Montant total des achats #}
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"  data-bs-target="#graphMontantTotalAchats">
                    <span>
                        <i class="fa fa-shopping-cart text-success me-2"></i> Montant total des achats
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2" data-bs-toggle="tooltip" data-placement="left"
                    title="Affiche le montant total des achats nets (hors frais de livraison) effectués auprès de tous les fournisseurs sur la période choisie."></i>
                </a>

                {# 2. Évolution des achats #}
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                data-bs-target="#graphEvolutionAchats">
                    <span>
                        <i class="fa fa-chart-line text-primary me-2"></i> Évolution des achats
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2" data-bs-toggle="tooltip" data-placement="left"
                    title="Suit l’évolution des achats totaux dans le temps (par année, mois ou période personnalisée)."></i>
                </a>


                {# 3. Répartition des achats par catégorie produit #}
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                data-bs-target="#graphRepartitionCategorieAchats">
                    <span>
                        <i class="fa fa-chart-pie text-danger me-2"></i> Répartition par catégorie produit
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2" data-bs-toggle="tooltip" data-placement="left"
                    title="Montre la part de chaque catégorie de produits dans le total des achats sur la période sélectionnée."></i>
                </a>

                {# 4. Répartition des achats par fournisseur #}
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                data-bs-target="#graphRepartitionFournisseur">
                    <span>
                        <i class="fa fa-industry text-secondary me-2"></i> Répartition par fournisseur
                    </span>
                    <i class="fa fa-info-circle text-secondary ms-2" data-bs-toggle="tooltip" data-placement="left"
                    title="Affiche la répartition des achats totaux entre vos différents fournisseurs."></i>
                </a>


            </div>
        </div>

        <div class="col-md-9">
            <div id="graphContainerAchats">

                {# 1. Achat : Montant total des achats #}
                <div id="graphMontantTotalAchats" class="graph-block">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Affiche le <b>montant total des achats</b> (HT ou TTC) par période.<br>
                            Par défaut, la période <em>Cette année</em> est sélectionnée.
                            En mode <em>Personnalisée</em>, l’agrégation peut se faire <b>par année</b>, <b>par mois</b> ou <b>entre deux dates</b>.
                        </div>
                        </div>

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

                        {# Période rapide (aligné à gauche) #}
                        <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodMontantAchats" 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>

                        {# Options personnalisées (au centre) #}
                        <div id="customMontantAchatsWrapper" class="w-100 d-none">
                            <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label class="mb-0 me-2">Mode</label>
                            <select id="modeMontantAchats" 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="anneeAchatSelectGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label class="me-2 mb-0">De</label>
                            <select id="startYearAchat" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label class="me-2 mb-0">À</label>
                            <select id="endYearAchat" class="form-control form-control-sm w-auto no-select2"></select>
                            </div>

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

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

                        {# Type de graphique (poussé à droite) #}
                        <div class="ms-auto mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeMontantAchats" 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 visuel #}
                        <div class="graph-divider"></div>

                        {# Conteneur graphique #}
                        <div style="height:420px;">
                        <canvas id="chartMontantTotalAchats"></canvas>
                        </div>

                    </div>
                </div>




                {# 2. Achat : Évolution des achats #}
                <div id="graphEvolutionAchats" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Suivi temporel des <b>achats (réceptions)</b> avec granularité automatique
                                <em>(jour / mois / année)</em> selon la période sélectionnée. Par défaut <em>Cette année</em>.
                            </div>
                        </div>

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

                            {# Période — gauche #}
                            <div class="mb-2 me-3 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                                <select id="quickPeriodEvolutionAchat" 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>

                            {# Toggle HT/TTC — pousse à droite #}
                            <div class="ms-auto mb-2 d-inline-flex align-items-center graph-basis-right" title="Base de calcul">
                                <div id="basisEvolutionAchat" 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="basisEvolutionAchatHT">
                                    <input type="radio" autocomplete="off" checked> HT
                                </label>
                                <label class="btn btn-outline-dark" data-value="ttc" id="basisEvolutionAchatTTC">
                                    <input type="radio" autocomplete="off"> TTC
                                </label>
                                </div>
                            </div>

                            {# Type — à l’extrémité droite #}
                            <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                                <select id="chartTypeEvolutionAchat" 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>

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

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

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

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

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

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

                    </div>
                </div>



                {# 3. Achat : Répartition par catégorie produit #}
                <div id="graphRepartitionCategorieAchats" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Répartition des <b>achats</b> par <b>catégorie</b> sur la période choisie.
                                Métrique au choix : <b>Montant</b> (HT/TTC) ou <b>Nombre de BR</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="quickPeriodRepartitionCategorieAchats" 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 #}
                            <div class="me-3 mb-2 d-inline-flex align-items-center" title="Métrique">
                                <label for="metricRepartitionCategorieAchats" class="me-2 mb-0">Métrique</label>
                                <select id="metricRepartitionCategorieAchats" class="form-control form-control-sm w-auto no-select2">
                                <option value="amount" selected>Montant d’achats</option>
                                <option value="orders">Nb bons de réception</option>
                                </select>
                            </div>

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

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

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

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

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

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

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

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

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

                    </div>
                </div>

                {# 4. Achat : Répartition des achats par fournisseur #}
                <div id="graphRepartitionFournisseur" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Répartition des <b>achats</b> par <b>fournisseur</b> sur la période choisie.
                                Métrique : <b>Montant</b> (HT/TTC) ou <b>Nombre de réceptions</b>.
                            </div>
                        </div>

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

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

                            {# Données (métrique) #}
                            <div class="me-3 mb-2 d-inline-flex align-items-center" title="Métrique">
                                <label class="mb-0 me-2" for="metricAchatFournisseur">Données</label>
                                <select id="metricAchatFournisseur" class="form-control form-control-sm w-auto no-select2">
                                <option value="ca" selected>Montant des achats</option>
                                <option value="count">Nombre de réceptions</option>
                                </select>
                            </div>

                            {# Pousse les contrôles de droite #}
                            <div class="ms-auto"></div>

                            {# HT/TTC (actif si Montant) — droite #}
                            <div class="mb-2 d-inline-flex align-items-center graph-basis-right" id="basisBlockAchatFournisseur" title="Base de calcul (Montant)">
                                <div id="basisAchatFournisseur" 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="basisAchatFournisseurHT">
                                    <input type="radio" autocomplete="off" checked> HT
                                </label>
                                <label class="btn btn-outline-dark" data-value="ttc" id="basisAchatFournisseurTTC">
                                    <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="chartTypeAchatFournisseur" class="form-control form-control-sm w-auto no-select2 type-select">
                                <option value="doughnut">Donut</option>
                                <option value="bar" selected>Barres</option>
                                </select>
                            </div>
                        </div>

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

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

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

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

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

                    </div>
                </div>




            </div>
        </div>

    </div>
</div>