{% extends 'base.html.twig' %}

{% block localstyle %}
<style>
</style>
{% endblock %}

{% block title %}
 = Liste des Issues
{% endblock %}

{% block body %}
    <h1>
        Liste des Issues
    </h1>

    <div class="d-flex">
        <div style="width:320px; padding: 0px 10px 0px 0px">
            <div style="margin-bottom: 1em;">
                <button id="toggleView" class="btn btn-primary w-100"> Afficher Vue Graphique</button>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="projectFilter"><strong>Filtrer par projet :</strong></label><br>
                <select id="projectFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options ajoutées dynamiquement #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="statusFilter"><strong>Filtrer par statut :</strong></label><br>
                <select id="statusFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="sprintFilter"><strong>Filtrer par sprint :</strong></label><br>
                <select id="sprintFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="versionFilter"><strong>Filtrer par version :</strong></label><br>
                <select id="versionFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="trackerFilter"><strong>Filtrer par tracker :</strong></label><br>
                <select id="trackerFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="categoryFilter"><strong>Filtrer par catégorie :</strong></label><br>
                <select id="categoryFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>

            <div style="margin-bottom: 1em;">
                <label for="assignedFilter"><strong>Filtrer par intervenant :</strong></label><br>
                <select id="assignedFilter" multiple style="width: 100%; height: 150px;" class="select2">
                    {# Options JS dynamiques #}
                </select>
            </div>
        </div>

        <div style="flex-grow:1">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width:100%; zoom:80%;">
                    <thead>
                    <tr>
                        <th width="70px">Id</th>
                        <th width="130px">Projet</th>
                        <th>Nom</th>
                        <th>Statut</th>
                        <th>Sprint</th>
                        <th>Version</th>
                        <th>Tracker</th>
                        <th>Catégorie</th>
                        <th>Affecté à</th>
                        <th>Point</th>
                    </tr>
                    </thead>
                    <tbody>
                        {% for issue in issues %}
                            <tr>
                                <td>#{{issue.id}}</td>
                                <td>{{issue.project.title}}</td>
                                <td>{{issue.redmine.subject}}</td>
                                <td>{{'%02d'|format(issue.rowStatus)}}-{{issue.redmine.status.name}}</td>
                                <td>{{issue.sprintName}}</td>
                                <td>{{issue.versionName}}</td>
                                <td>{{issue.redmine.tracker.name}}</td>
                                <td>{{issue.categoryName}}</td>
                                <td>{{issue.assignedName}}</td>
                                <td>{{issue.redmine.sprint.story_points}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div id="chartContainer" style="display:none; margin-top:2em;">
                <canvas id="statusChart" width="400" height="200"></canvas>
            </div>            
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        function restoreSelectValue(selectId) {
            const stored = localStorage.getItem(selectId);
            if (stored) {
                try {
                    const values = JSON.parse(stored);
                    $(`#${selectId}`).val(values).trigger('change');
                } catch (e) {
                    console.error(`Erreur en restaurant le ${selectId}`, e);
                }
            }
        }

        const idProject=1;
        const idStatus=3;
        const idSprint=4;
        const idVersion=5;
        const idTracker=6;
        const idCategory=7;
        const idAssigned=8;

        const table = $('#dataTables').DataTable({
            columnDefs: [ 
                { "targets": "no-sort", "orderable": false }, 
                { "targets": "no-string", "type" : "num" } 
            ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 0, "desc" ]]
        });

        // Étape 1 : Récupérer les filtres possible
        const projectSet = new Set();
        table.column(idProject).data().each(function(value) {
            projectSet.add(value);
        });
        const statusSet = new Set();
        table.column(idStatus).data().each(function(value) {
            statusSet.add(value);
        });
        const sprintSet = new Set();
        table.column(idSprint).data().each(function(value) {
            sprintSet.add(value);
        });
        const versionSet = new Set();
        table.column(idVersion).data().each(function(value) {
            versionSet.add(value);
        });
        const trackerSet = new Set();
        table.column(idTracker).data().each(function(value) {
            trackerSet.add(value);
        });
        const categorySet = new Set();
        table.column(idCategory).data().each(function(value) {
            categorySet.add(value);
        });
        const assignedSet = new Set();
        table.column(idAssigned).data().each(function(value) {
            assignedSet.add(value);
        });

        // Étape 2 : Remplir dynamiquement les filtres
        const $selectProject = $('#projectFilter');
        Array.from(projectSet).sort().forEach(function(project) {
            const option = $('<option>', {
                value: project,
                text: project,
                selected: false
            });
            $selectProject.append(option);
        });
        const $statusSelect = $('#statusFilter');
        Array.from(statusSet).sort().forEach(function(status) {
            const option = $('<option>', {
                value: status,
                text: status,
                selected: false
            });
            $statusSelect.append(option);
        });
        const $sprintSelect = $('#sprintFilter');
        Array.from(sprintSet).sort().forEach(function(sprint) {
            const option = $('<option>', {
                value: sprint,
                text: (sprint?sprint:"Aucun"),
                selected: false
            });
            $sprintSelect.append(option);
        });
        const $versionSelect = $('#versionFilter');
        Array.from(versionSet).sort().forEach(function(version) {
            const option = $('<option>', {
                value: version,
                text: (version?version:"Aucune"),
                selected: false
            });
            $versionSelect.append(option);
        });
        const $trackerSelect = $('#trackerFilter');
        Array.from(trackerSet).sort().forEach(function(tracker) {
            const option = $('<option>', {
                value: tracker,
                text: tracker,
                selected: false
            });
            $trackerSelect.append(option);
        });
        const $categorySelect = $('#categoryFilter');
        Array.from(categorySet).sort().forEach(function(category) {
            const option = $('<option>', {
                value: category,
                text: (category?category:"Aucune"),
                selected: false
            });
            $categorySelect.append(option);
        });
        const $assignedSelect = $('#assignedFilter');
        Array.from(assignedSet).sort().forEach(function(assigned) {
            const option = $('<option>', {
                value: assigned,
                text: (assigned?assigned:"Aucun"),
                selected: false
            });
            $assignedSelect.append(option);
        });

        // Etape 3 : restaurer les valeurs filtrés stocké en localstorage
        restoreSelectValue('projectFilter');
        restoreSelectValue('statusFilter');
        restoreSelectValue('sprintFilter');
        restoreSelectValue('versionFilter');
        restoreSelectValue('trackerFilter');
        restoreSelectValue('categoryFilter');
        restoreSelectValue('assignedFilter');

        // Étape 4 : Ajouter le filtre personnalisé à DataTables
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            const selectedProjects = $('#projectFilter').val();
            const selectedStatuses = $('#statusFilter').val();
            const selectedSprints = $('#sprintFilter').val();
            const selectedVersions = $('#versionFilter').val();
            const selectedTrackers = $('#trackerFilter').val();
            const selectedCategories = $('#categoryFilter').val();
            const selectedAssigneds = $('#assignedFilter').val();

            const project = data[idProject];
            const status = data[idStatus];
            const sprint = data[idSprint];
            const version = data[idVersion];
            const tracker = data[idTracker];
            const category = data[idCategory];
            const assigned = data[idAssigned];

            const projectMatch = !selectedProjects || selectedProjects.length === 0 || selectedProjects.includes(project);
            const statusMatch = !selectedStatuses || selectedStatuses.length === 0 || selectedStatuses.includes(status);
            const sprintMatch = !selectedSprints || selectedSprints.length === 0 || selectedSprints.includes(sprint);
            const versionMatch = !selectedVersions || selectedVersions.length === 0 || selectedVersions.includes(version);
            const trackerMatch = !selectedTrackers || selectedTrackers.length === 0 || selectedTrackers.includes(tracker);
            const categoryMatch = !selectedCategories || selectedCategories.length === 0 || selectedCategories.includes(category);
            const assignedMatch = !selectedAssigneds || selectedAssigneds.length === 0 || selectedAssigneds.includes(assigned);

            return projectMatch && statusMatch && sprintMatch && versionMatch && trackerMatch && categoryMatch && assignedMatch;
        });


        // Étape 5 : Rafraîchir le tableau quand le select change
        const filterIds = ['projectFilter', 'statusFilter', 'sprintFilter','versionFilter', 'trackerFilter', 'categoryFilter', 'assignedFilter'];
        filterIds.forEach(function(filterId) {
            $(`#${filterId}`).on('change', function() {
                const val = $(this).val();
                localStorage.setItem(filterId, JSON.stringify(val || []));
                table.draw();

                // Si on est en vue graphique, mettre à jour le graphique
                if ($('#chartContainer').is(':visible')) {
                    updateChart();
                }
            });
        }); 

        // Etape 6 = chart
        let chartInstance = null;

        function generateGradientColors(startColor, endColor, steps) {
            function hexToRgb(hex) {
                hex = hex.replace(/^#/, '');
                return {
                    r: parseInt(hex.substring(0, 2), 16),
                    g: parseInt(hex.substring(2, 4), 16),
                    b: parseInt(hex.substring(4, 6), 16)
                };
            }

            function rgbToHex(r, g, b) {
                return '#' + [r, g, b].map(x => {
                    const hex = x.toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                }).join('');
            }

            const start = hexToRgb(startColor);
            const end = hexToRgb(endColor);
            const gradient = [];

            for (let i = 0; i < steps; i++) {
                const r = Math.round(start.r + ((end.r - start.r) * i) / (steps - 1));
                const g = Math.round(start.g + ((end.g - start.g) * i) / (steps - 1));
                const b = Math.round(start.b + ((end.b - start.b) * i) / (steps - 1));
                gradient.push(rgbToHex(r, g, b));
            }

            return gradient;
        }

        $('#toggleView').on('click', function () {
            const isTableVisible = $('#dataTables').is(':visible');

            if (isTableVisible) {
                // Passer en vue graphique
                $('#dataTables_wrapper').hide();
                $('#chartContainer').show();
                $(this).text('Afficher Vue Tableau');
                localStorage.setItem('currentView', 'chart');

                if (!chartInstance) {
                    drawChart();
                } else {
                    updateChart();
                }
            } else {
                // Passer en vue tableau
                $('#chartContainer').hide();
                $('#dataTables_wrapper').show();
                $(this).text('Afficher Vue Graphique');
                localStorage.setItem('currentView', 'table');
            }
        });

        function drawChart() {
            const dataByStatus = {};

            // Parcours des lignes filtrées de DataTables
            table.rows({ filter: 'applied' }).every(function () {
                const data = this.data();
                const status = data[idStatus];
                const points = parseFloat(data[9]) || 0;

                if (!dataByStatus[status]) {
                    dataByStatus[status] = 0;
                }
                dataByStatus[status] += points;
            });

            // Tri alphabétique des statuts
            const sortedLabels = Object.keys(dataByStatus).sort((a, b) =>
                a.localeCompare(b, 'fr', { sensitivity: 'base' })
            );

            // Données triées
            const sortedDataPoints = sortedLabels.map(label => dataByStatus[label]);

            // Dégradé du bleu vers le vert
            const gradientColors = generateGradientColors('#007bff', '#28a745', sortedLabels.length);

            // Couleurs finales : rouge si "échec", sinon couleur du dégradé
            const colors = sortedLabels.map((label, index) => {
                const lowerLabel = label.toLowerCase();
                if (lowerLabel.includes('échec') || lowerLabel.includes('echec')) {
                    return '#dc3545'; // rouge Bootstrap
                } else {
                    return gradientColors[index];
                }
            });

            // Création du graphique Chart.js
            const ctx = document.getElementById('statusChart').getContext('2d');
            chartInstance = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: sortedLabels,
                    datasets: [{
                        label: 'Points par Statut',
                        data: sortedDataPoints,
                        backgroundColor: colors,
                        borderColor: colors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    return `${context.dataset.label}: ${context.parsed.y} points`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Total des Points'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Statuts'
                            }
                        }
                    }
                }
            });
        }

        function updateChart() {
            if (chartInstance) {
                chartInstance.destroy();
                chartInstance = null;
            }
            drawChart();
        }        

        const storedView = localStorage.getItem('currentView');
        if (storedView === 'chart') {
            $('#dataTables_wrapper').hide();
            $('#chartContainer').show();
            $('#toggleView').text('Afficher Vue Tableau');
            drawChart();
        } else {
            $('#chartContainer').hide();
            $('#dataTables_wrapper').show();
            $('#toggleView').text('Afficher Vue Graphique');
        }        


        table.draw();       
        updateChart();


    });

</script>
{% endblock %}