{# Modal HTML + script JS inclus ici #}
<div class="modal fade" id="modalDeclinationStats" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document" style="max-width: 50%;">
        <div class="modal-content" style="min-width: fit-content;">
            <div class="modal-header badge-titre">
                <h5 class="modal-title">
                    Statistiques des déclinaisons de :
                    <span id="ref-product-title"></span>
                </h5>
                <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
                <div id="loadingDeclinationStats"
                    class="text-center my-4 py-4 px-3 bg-light rounded shadow-sm d-none"
                    style="border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; gap: 10px;">

                    <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
                        <span class="sr-only">Chargement...</span>
                    </div>
                    <span class="fw-bold text-primary" style="font-size: 1.1rem;">Chargement des statistiques...</span>
                </div>


                {# Nav tabs Bootstrap 4 #}
                <ul class="nav nav-tabs mb-3" id="decliStatsTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab-tableau" data-bs-toggle="tab" href="#tabContentTableau" role="tab"> <i class="fa fa-table me-1"></i> Declinaison 1 </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-all-decli" data-bs-toggle="tab" href="#tabContentAllDecli" role="tab"><i class="fa fa-list me-1"></i> Toutes les déclinaisons </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-graphique" data-bs-toggle="tab" href="#tabContentGraphique" role="tab"> <i class="fa fa-chart-bar me-1"></i> Graphique </a>
                    </li>

                </ul>

                {# Tab Content #}
                <div class="tab-content">

                     {# Tab Declinaison 1 #}
                    <div class="tab-pane fade show active" id="tabContentTableau" role="tabpanel">
                        <div id="contentDeclinationStats"></div>
                    </div>

                     {# Tab Declinaison 1 + 2 #}
                     <div class="tab-pane fade" id="tabContentAllDecli" role="tabpanel">
                        <div id="contentAllDecliStats"></div>
                    </div>

                     {# Tab Graphique #}

                    <div class="tab-pane fade" id="tabContentGraphique" role="tabpanel">

                        {# Toolbar: type de graphique à droite #}
                        <div class="d-flex justify-content-end mb-2">
                            <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique"  style="margin-top:10px;">
                                <select id="typeGraphDecli" class="form-control form-control-sm w-auto no-select2 type-select">
                                    <option value="bar" selected>Barres</option>
                                    <option value="pie">Secteur</option>
                                </select>
                            </div>
                        </div>

                        {# Wrapper à hauteur fixe pour mieux contrôler la taille #}
                        <div id="decliChartWrap">
                            <canvas id="decliChart"></canvas>
                        </div>

                    </div>

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



<script>
// ✅ Ces fonctions doivent être dans le scope global
window.renderDeclinationChart = function(stats, type = 'bar') {
    var canvas = document.getElementById('decliChart');
    if (!canvas) {
        console.warn('Canvas "decliChart" introuvable.');
        return;
    }

    var ctx = canvas.getContext('2d');
    // ✅ Détruire l'ancien graphique avant de créer un nouveau
    if (window.decliChartInstance) {
        window.decliChartInstance.destroy();
    }
    stats.sort((a, b) => b.qtTotal - a.qtTotal);

    var labels = stats.map(row => row.valeur);
    var data = stats.map(row => row.qtTotal);

    if (window.decliChartInstance) {
        window.decliChartInstance.destroy();
    }

    window.decliChartInstance = new Chart(ctx, {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: 'Quantité commandée',
                data: data,
                backgroundColor: type === 'pie' ? window.generateColors(data.length) : '#5c9ded'
            }]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        precision: 0
                    }
                }]
            }
        }
    });
};

window.generateColors = function(n) {
    var colors = [];
    for (var i = 0; i < n; i++) {
        colors.push(`hsl(${Math.floor(360 * i / n)}, 60%, 60%)`);
    }
    return colors;
};

// ✅ Ce bloc peut rester dans DOMContentLoaded
document.addEventListener('DOMContentLoaded', function () {

    $(document).on('click', '.show-declination-stats', function () {
        var productId = $(this).data('id');
        var reference = $(this).data('ref');
        var dateBefore = $('#filter_statistic_dateBefore').val();
        var dateAfter = $('#filter_statistic_dateAfter').val();

        $('#ref-product-title').text(reference);
        $('#loadingDeclinationStats').removeClass('d-none');
        $('#contentDeclinationStats').html('');
        $('#contentAllDecliStats').html('');

        // Ouvrir la modale

        const modalEl = document.getElementById('modalDeclinationStats');
        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();



        // 1. Charger le tableau principal et les données pour le graphique
        $.ajax({
            url: Routing.generate('statistic_declination_stats'),
            method: 'GET',
            data: {
                id: productId,
                dateBefore: dateBefore,
                dateAfter: dateAfter
            },
            success: function (response) {
                $('#loadingDeclinationStats').addClass('d-none');
                $('#contentDeclinationStats').html(response.html);
                window.statsDeclinaisonData = response.stats;

                // Générer le graphique par défaut en barres
                renderDeclinationChart(window.statsDeclinaisonData, 'bar');
            },
            error: function () {
                $('#loadingDeclinationStats')
                    .addClass('d-none')
                    .html('<div class="alert alert-danger">Erreur de chargement</div>');
            }
        });

        // 2. Charger immédiatement le tableau “Toutes les déclinaisons”

        $('#contentAllDecliStats').html('<div class="text-center my-3">Chargement...</div>');
        $.ajax({
            url: Routing.generate('statistic_declination_all_stats'),
            method: 'GET',
            data: {
                id: productId,
                dateBefore: dateBefore,
                dateAfter: dateAfter
            },
            success: function (response) {
                $('#contentAllDecliStats').html(response.html);
            },
            error: function () {
                $('#contentAllDecliStats').html('<div class="alert alert-danger">Erreur de chargement</div>');
            }
        });
    });

    // Changement de type du graphique
    $(document).on('change', '#typeGraphDecli', function () {
        var type = $(this).val();
        renderDeclinationChart(window.statsDeclinaisonData, type);
    });




});
</script>