{% 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;">
                <label for="projectFilter"><strong>Filtrer par projet :</strong></label><br>
                <select id="projectFilter" multiple style="width: 300px; 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: 300px; 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: 300px; 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>Catégorie</th>
                    </tr>
                    </thead>
                    <tbody>
                        {% for issue in issues %}
                            <tr>
                                <td>#{{issue.id}}</td>
                                <td>{{issue.project.title}}</td>
                                <td>{{issue.redmine.subject}}</td>
                                <td>{{issue.redmine.status.name}}</td>
                                <td>{{issue.redmine.category is defined?issue.redmine.category.name:'Aucune'}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        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(1).data().each(function(value) {
            projectSet.add(value);
        });
        const statusSet = new Set();
        table.column(3).data().each(function(value) {
            statusSet.add(value);
        });
        const categorySet = new Set();
        table.column(4).data().each(function(value) {
            categorySet.add(value);
        });
        console.log(categorySet);

        // É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 $categorySelect = $('#categoryFilter');
        Array.from(categorySet).sort().forEach(function(category) {
            const option = $('<option>', {
                value: category,
                text: category,
                selected: false
            });
            $categorySelect.append(option);
        });

        // Étape 3 : Ajouter le filtre personnalisé à DataTables
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            const selectedProjects = $('#projectFilter').val();
            const selectedStatuses = $('#statusFilter').val();
            const selectedCategories = $('#categoryFilter').val();

            const project = data[1]; // Colonne "Projet"
            const status = data[3];  // Colonne "Statut"
            const category = data[4];  // Colonne "Categorie"

            const projectMatch = !selectedProjects || selectedProjects.length === 0 || selectedProjects.includes(project);
            const statusMatch = !selectedStatuses || selectedStatuses.length === 0 || selectedStatuses.includes(status);
            const categoryMatch = !selectedCategories || selectedCategories.length === 0 || selectedCategories.includes(category);

            return projectMatch && statusMatch && categoryMatch;
        });


        // Étape 4 : Rafraîchir le tableau quand le select change
        $selectProject.on('change', function() {
            table.draw();
        });       
        $statusSelect.on('change', function() {
            table.draw();
        });             
        $categorySelect.on('change', function() {
            table.draw();
        });             
    });
</script>
{% endblock %}