{#--Tab Statistiques Fournisseur--#}
<style>

    .global-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.6);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }



</style>

{% block extra_scripts %}
    <script src="{{ asset('js/admin/supplier-charts.js') }}"></script>
{% endblock %}
{# ▸ Dates dernier bon de réception & dernière facture #}
<div class=" m-portlet--full-height h-100 d-flex align-items-center  py-3 mb-3 flex-wrap gap-3" style="row-gap: 0.5rem; column-gap: 2rem;">

    <div class="d-flex align-items-center flex-wrap">
        <i class="fa fa-calendar-check text-info me-2"></i>
        <span class="fw-bold me-2">Dernier bon de réception :</span>
        {% if lastReceptionDate %}
            <span>{{ lastReceptionDate|date('d/m/Y') }}</span>
            <small class="ms-2 {{ receptionColorClass }}">(Il y a {{ daysSinceLastReception }} jrs)</small>
        {% else %}
            <span class="text-muted">Aucun bon enregistré</span>
        {% endif %}
    </div>

    <div class="border-left ps-4 d-flex align-items-center flex-wrap" style="border-color: #ddd !important;">
        <i class="fa fa-file-invoice text-primary me-2"></i>
        <span class="fw-bold me-2">Dernière facture :</span>
        {% if lastFactureDate %}
            <span>{{ lastFactureDate|date('d/m/Y') }}</span>
            <small class="ms-2 {{ factureColorClass }}">(Il y a {{ daysSinceLastFacture }} jrs)</small>
        {% else %}
            <span class="text-muted">Aucune facture enregistrée</span>
        {% endif %}
    </div>

</div>

<div class="row">

    {# Menu gauche #}
    <div class="col-md-3">
        <div class="list-group" id="graphMenu">

            {# Total Achat par Année #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center active"
            data-bs-target="#graphAchatAnnee">
                <i class="fa fa-chart-bar me-2"></i>
                <span>Total Achat par Année</span>
            </a>

            {# Total Achat par Mois #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center"
            data-bs-target="#graphAchatMois">
                <i class="fa fa-calendar-alt me-2"></i>
                <span>Total Achat par Mois</span>
            </a>

            {# Évolution Mensuelle #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center"
            data-bs-target="#graphEvolution">
                <i class="fa fa-line-chart me-2"></i>
                <span>Évolution Mensuelle</span>
            </a>

            {# Montant Moyen par Document #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center"
            data-bs-target="#graphMoyen">
                <i class="fa fa-coins me-2"></i>
                <span>Montant Moyen par Document</span>
            </a>

            {# Mode de Paiement #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center"
            data-bs-target="#graphPaiement">
                <i class="fa fa-balance-scale me-2"></i>
                <span>Mode de Paiement</span>
            </a>

            {# Achat par Catégorie #}
            <a href="#"
            class="list-group-item list-group-item-action d-flex align-items-center"
            data-bs-target="#graphCategorie">
                <i class="fa fa-tags me-2"></i>
                <span>Achat par Catégorie</span>
            </a>

        </div>

    </div>

    {# Menu droit #}
    <div class="col-md-9">
        <div id="graphContainer">

            <div id="graphAchatAnnee" class="graph-block">
                {# 1- Statistiques Achat Fournisseur #}
                <div class="card-body">
                    <div class="form-inline mb-3">
                        <label class="me-2 mb-0">Données</label>
                        <select id="datasetYearChart" class=" me-3 no-select2">
                            <option value="achat" selected>Achats</option>
                            <option value="vente">Ventes</option>
                            <option value="les_deux">Achats & Ventes</option>
                        </select>

                        <label class="me-2 mb-0">Type</label>
                        <select id="typeYearChart" class=" me-3 no-select2">
                            <option value="reception">Bon de réception</option>
                            <option value="facture">Facture</option>
                        </select>

                        <label class="me-2 mb-0">De</label>
                        <select id="startYear" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">À</label>
                        <select id="endYear" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">Mode</label>
                        <select id="modeYearChart" class=" me-3 no-select2">
                            <option value="montant" selected>Montant</option>
                            <option value="quantite">Quantité</option>
                        </select>
                    </div>

                    <canvas id="achatYearChart" height="140"></canvas>
                </div>
            </div>

            <div id="graphAchatMois" class="graph-block d-none">
                {# 2. Total achat par mois (pour une année) #}
                <div class="card-body">
                    <div class="form-inline mb-3">
                        <label class="me-2 mb-0">Type</label>
                        <select id="typeMonthChart" class=" me-3 no-select2">
                            <option value="reception">Bon de réception</option>
                            <option value="facture">Facture</option>
                        </select>

                        <label class="me-2 mb-0">Année</label>
                        <select id="yearForMonthChart" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">Affichage</label>
                        <select id="modeMonthChart" class=" me-3 no-select2">
                            <option value="montant" selected>Montant</option>
                            <option value="quantite">Quantité</option>
                        </select>

                    </div>

                    <canvas id="achatMonthChart" height="140"></canvas>

                </div>
            </div>

            <div id="graphEvolution" class="graph-block d-none">
                 {# 3. Évolution mensuelle des achats #}
                <div class="card-body">

                    <div class="form-inline mb-3">
                        <label class="me-2 mb-0">Type</label>
                        <select id="typeEvolutionChart" class=" me-3 no-select2">
                            <option value="reception">Bon de réception</option>
                            <option value="facture">Facture</option>
                        </select>

                        <label class="me-2 mb-0">De</label>
                        <select id="startYearEvolution" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">À</label>
                        <select id="endYearEvolution" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">Affichage</label>
                        <select id="evolutionChartType" class=" no-select2">
                            <option value="line">Courbe</option>
                            <option value="bar">Barres groupées</option>
                        </select>
                    </div>
                     <canvas id="achatEvolutionChart" height="120"></canvas>
                </div>
            </div>

            <div id="graphMoyen" class="graph-block d-none">
                {# 4. Montant moyen par bon (réception/facture) #}
                <div class="card-body">
                    <div class="form-inline mb-3">
                        <label class="me-2">Type</label>
                        <select id="typeMoyenChart" class=" me-3 no-select2">
                            <option value="reception">Bon de réception</option>
                            <option value="facture">Facture</option>
                            <option value="retour">Bon de retour</option>
                        </select>

                        <label class="me-2">De</label>
                        <select id="startYearMoyen" class=" me-3 no-select2"></select>

                        <label class="me-2">À</label>
                        <select id="endYearMoyen" class=" no-select2"></select>
                    </div>
                    <canvas id="achatMoyenChart" height="120"></canvas>
                </div>
            </div>

            <div id="graphPaiement" class="graph-block d-none">
                {# 5. Répartition des achats par mode de paiement #}

                <div class="card-body">

                    <div class="form-inline mb-3">
                        <label class="me-2 mb-0">Type</label>
                        <select id="typePaiementChart" class=" me-3 no-select2">
                            <option value="reception" selected>Bon de réception</option>
                            <option value="facture">Facture</option>
                        </select>

                        <label class="me-2 mb-0">Année</label>
                        <select id="yearPaiementChart" class=" me-3 no-select2"></select>

                        <label class="me-2 mb-0">Affichage</label>
                        <select id="chartTypePaiement" class=" no-select2">
                            <option value="doughnut" selected>Donut</option>
                            <option value="pie">Camembert</option>
                        </select>
                    </div>

                    <canvas id="paiementChart" height="140"></canvas>

                </div>
            </div>

            <div id="graphCategorie" class="graph-block d-none">
                {# 6. Total Achat par Catégorie Produit #}
                <div class="card-body">
                    <div class="form-inline mb-3">
                        <label class="me-2">Type</label>
                        <select id="typeCategorieChart" class=" me-3 no-select2">
                            <option value="reception" selected>Bon de réception</option>
                            <option value="facture">Facture</option>
                        </select>

                        <label class="me-2">Année</label>
                        <select id="yearCategorieChart" class=" me-3 no-select2"></select>

                        <label class="me-2">Affichage</label>
                        <select id="modeCategorieChart" class=" me-3 no-select2">
                            <option value="montant">Montant</option>
                            <option value="quantite">Quantité</option>
                        </select>

                        <label class="me-2">Graphique</label>
                        <select id="chartTypeCategorie" class=" no-select2">
                            <option value="doughnut">Donut</option>
                            <option value="pie">Camembert</option>
                            <option value="bar">Barres</option>
                        </select>
                    </div>

                    <canvas id="achatCategorieChart" height="140"></canvas>
                </div>
            </div>

        </div>
    </div>
</div>
<div id="globalLoading" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background: rgba(255,255,255,0.7); z-index: 9999; display: flex; justify-content: center; align-items: center;">
    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
        <span class="sr-only">Chargement...</span>
    </div>
</div>



<script>
    function showGlobalLoading() {
        document.getElementById('globalLoading').classList.remove('d-none');
    }

    function hideGlobalLoading() {
        document.getElementById('globalLoading').classList.add('d-none');
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('#graphMenu a').forEach(link => {
            link.addEventListener('click', async function (e) {
                e.preventDefault();

                // Activer le lien
                document.querySelectorAll('#graphMenu a').forEach(a => a.classList.remove('active'));
                this.classList.add('active');

                // Cacher tous les blocs
                document.querySelectorAll('.graph-block').forEach(block => block.classList.add('d-none'));

                // Afficher le bloc sélectionné
                var targetId = this.getAttribute('data-bs-target');
                var targetEl = document.querySelector(targetId);
                targetEl.classList.remove('d-none');

                // Afficher le chargement global
                showGlobalLoading();

                // Initialiser le graphique si pas déjà chargé
                if (!targetEl.dataset.loaded) {
                    targetEl.dataset.loaded = 'true';

                    if (targetId === '#graphAchatAnnee') {
                        await initAchatCharts();
                    } else if (targetId === '#graphAchatMois') {
                        await initAchatMoisChart();
                    } else if (targetId === '#graphMoyen') {
                        await initMontantMoyenChart();
                    } else if (targetId === '#graphEvolution') {
                        await initAchatEvolutionChart();
                    } else if (targetId === '#graphPaiement') {
                        await initPaiementChart();
                    } else if (targetId === '#graphCategorie') {
                        await initAchatCategorieChart();
                    }
                }

                // Masquer le chargement global
                hideGlobalLoading();
            });
        });
    });
</script>