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

{% block localstyle %}
{% endblock %}

{% block body %}
    <div class="d-flex justify-content-start mt-3">

        <div class="pr-2">
            <a class="btn btn-success btn-sm mt-2" href={{ path('app_scrum_submit') }}><i class="fa fa-plus mr-2"></i>Ajouter un Scrum</a>
        </div>

        <div style="width:300px" class="pr-2">
            <label class="control-label">Filtre CATEGORIES</label>
            <select id="filtercategorys" multiple="multiple" class="form-control">
                {% for giteacategory in giteacategorys %}
                    <option value="{{giteacategory}}">{{giteacategory}}</option>
                {% endfor %}
            </select>
        </div>

        <div style="width:300px" class="pr-2">
            <label class="control-label">Filtre PROJETS</label>
            <select id="filterrepos" multiple="multiple" class="form-control">
                {% for gitearepo in gitearepos %}
                    <option value="{{gitearepo.id}}">{{gitearepo.full_name}}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="mt-4" style="zoom:80%">
        <table class="table table-striped table-bordered table-hover" id="dataTables" style="width:100%">
            <thead>
                <tr>
                    <th class="no-sort"></th>
                    <th style="width:100px">Catégorie</th>
                    <th style="width:200px">Projet</th>
                    <th>Description</th>
                    <th style="width:100px" class="no-string">Tickets</th>
                </tr>
            </thead>
            <tbody>
                {% for scrum in scrums %}
                    <tr data-category="{{scrum.category}}" data-repo="{{scrum.giteaid}}">
                        <td>
                            <a href="{{path('app_scrum_view',{id:scrum.id})}}"><i class="fas fa-columns fa-2x mr-1"></i></a>
                            <a href="{{path('app_issuescrum',{id:scrum.id})}}"><i class="fas fa-ticket-alt fa-2x mr-1"></i></a>
                            <a href="{{path('app_scrum_update',{id:scrum.id})}}"><i class="fas fa-file fa-2x"></i></a>
                        </td>
                        <td>
                            {{scrum.category}}
                        </td>
                        <td>
                            {{scrum.name}}
                        </td>
                        <td>
                            {{scrum.giteajson.description}}
                        </td>
                        <td>
                            {{scrum.giteajson.open_issues_count}}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block localjavascript %}
    var table;

    function showhide() {
        categoryfilters=$("#filtercategorys").val();
        repofilters=$("#filterrepos").val();

        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex, rowObj, counter) {
            el=table.row(dataIndex).nodes().to$();

            category = $(el).data('category');
            repo = $(el).data('repo');
            
            toreturn=true;
            if(categoryfilters.length!==0 && jQuery.inArray(category.toString(), categoryfilters )<0) { 
                toreturn=false;
            }

            if(repofilters.length!==0 && jQuery.inArray(repo.toString(), repofilters )<0) { 
                toreturn=false;
            }

            
            return toreturn;
        });

        table.draw();
        //$.fn.dataTable.ext.search.pop();            

    }

    function filtercategorys() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filtercategorys',
                id:0,
                value: $("#filtercategorys").val()
            }
        });

        showhide();
    } 

    function filterrepos() {
        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'filterrepos',
                id:0,
                value: $("#filterrepos").val()
            }
        });

        showhide();
    } 

    $(document).ready(function() {

        $('#filtercategorys').select2();
        {% if filtercategorys %}
            {% for category in filtercategorys %}
                $("#filtercategorys").val($("#filtercategorys").val().concat("{{category}}"));
            {%endfor%}
            $('#filtercategorys').trigger('change');
        {% endif %}
        $('#filtercategorys').on("select2:select", function(e) {
            filtercategorys(); 
        });
        $('#filtercategorys').on("select2:unselect", function(e) { 
            filtercategorys();
        });

        $('#filterrepos').select2();
        {% if filterrepos %}
            {% for repo in filterrepos %}
                $("#filterrepos").val($("#filterrepos").val().concat("{{repo}}"));
            {%endfor%}
            $('#filterrepos').trigger('change');
        {% endif %}
        $('#filterrepos').on("select2:select", function(e) {
            filterrepos(); 
        });
        $('#filterrepos').on("select2:unselect", function(e) { 
            filterrepos();
        });

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

        showhide();
    });
{% endblock %}