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

{% block localstyle %}
    .tag {
        border-radius: 5px;
        padding: 8px 8px;
        margin-bottom: 5px;
        display: inline-block;
        min-width: 35px;
        text-align: center;
        color: #ffffff !important;
        zoom: 80%;
    }

    .tag i {
        margin-right:5px;
    }

    .assignee {
        width:30px;
        margin: 5px 5px 0px 0px;
    }

{% endblock %}

{% block body %}
    <div class="d-flex justify-content-start mt-3">
        <div style="width:200px" class="pr-2">
            <label class="control-label">Filtre TICKET</label>
            <input type="number" id="filterticket" class=" form-control">
        </div>

        {% if id == 0 %}
        <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>
        {% endif %}

        <div style="width:600px" class="pr-2">
            <label class="control-label">Filtre JALONS</label>
            <select id="filtermilestones" multiple="multiple" class="form-control">
                {% for giteamilestone in giteamilestones %}
                    <option value="{{giteamilestone.id}}">{{giteamilestone.title}}</option>
                {% endfor %}
            </select>
        </div>

        <div style="width:300px" class="pr-2">
            <label class="control-label">Filtre STATUTS</label>
            <select id="filtercolumns" multiple="multiple" class="form-control">
                {% for giteacolumn in giteacolumns %}
                    <option value="{{giteacolumn}}">{{giteacolumn}}</option>
                {% endfor %}
            </select>
        </div>

        <div style="width:300px" class="pr-2">
            <label class="control-label">Filtre ETIQUETTES</label>
            <select id="filterlabels" multiple="multiple" class="form-control">
                {% for gitealabel in gitealabels %}
                    {% if gitealabel not in giteacolumns %}
                        <option value="{{gitealabel}}">{{gitealabel}}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>


        <div style="width:300px" class="pr-2">
            <label class="control-label">Filtre AFFECTATIONS</label>
            <select id="filterassignees" multiple="multiple" class="form-control">
                {% for giteaassignee in giteaassignees %}
                    <option value="{{giteaassignee.username}}">{{giteaassignee.username}}</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>
                    {%if id==0 %}<th style="width:100px">Projet</th>{%endif%}
                    <th style="width:200px">Jalon</th>
                    <th>Statut</th>
                    <th class="no-string">N°</th>
                    <th>Titre</th>
                    <th style="width:135px">Affecté à</th>
                    <th>Etiquettes</th>
                </tr>
            </thead>

            <tbody>
                {% for gitearepo in gitearepos %}
                    {% for giteaissue in gitearepo.issues %}
                        {% set dataticket = giteaissue.number %}
                        {% set datarepo = gitearepo.id %}

                        {% if giteaissue.milestone  %}
                            {% set datamilestone = giteaissue.milestone.id %}
                        {%else%}
                            {% set datamilestone = gitearepo.full_name %}
                        {%endif%}
                        
                        {% set statut = "Backlog" %}
                        {% set labels = "" %}
                        {% set datalabels = "" %}
                        {% for label in giteaissue.labels %}
                            {% if label.id in gitearepo.columns %}
                                {% set statut= label.name %}
                            {% else %}
                                {% set labels=labels~'<span class="btn-link tag mr-1" style="background-color:#'~label.color~'"><i class="fas fa-tag"></i>'~label.name~'</span>' %}
                                {% set datalabels=datalabels~','~label.name %}
                            {% endif %}
                        {% endfor %}

                        {% set dataassignees="" %}
                        {% for assignee in giteaissue.assignees %}
                            {% set dataassignees=dataassignees~','~assignee.username %}
                        {% endfor %}

                        <tr data-category="{{gitearepo.category}}" data-repo="{{datarepo}}" data-milestone="{{datamilestone}}" data-ticket="{{dataticket}}" data-column="{{statut}}" data-labels="{{datalabels}}" data-assignees="{{dataassignees}}">
                            <td>
                                <a target="_blank" class="btn btn-link fa fa-file" href="{{giteaissue.html_url}}"></a>
                            </td>
                            {%if id==0 %}<td>{{ gitearepo.full_name }}</td>{%endif%}
                            <td>{% if giteaissue.milestone  %}{{ giteaissue.milestone.title }} {%endif%}</td>
                            <td>{{ statut }}</td>
                            <td>{{ giteaissue.number }}</td>
                            <td>{{ giteaissue.title }}</td>
                            <td>
                                {% for assignee in giteaissue.assignees %}
                                    <img src="{{assignee.avatar_url}}" class="assignee" title="{{assignee.username}}">
                                {% endfor %}         
                            </td>
                            <td>{{ labels|raw }}</td>
                        </tr>
                    {% endfor %}  
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block localjavascript %}
    var table;

    function showhide() {
        ticketfilter=$("#filterticket").val();
        categoryfilters=$("#filtercategorys").val();
        repofilters=$("#filterrepos").val();
        milestonefilters=$("#filtermilestones").val();
        columnfilters=$("#filtercolumns").val();
        labelfilters=$("#filterlabels").val();
        assigneefilters=$("#filterassignees").val();

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

            {% if id == 0 %}
            category = $(el).data('category');
            repo = $(el).data('repo');
            {% endif %}
            ticket= $(el).data('ticket');
            milestone = $(el).data('milestone');
            column = $(el).data('column');
            labels = $(el).data('labels').split(',');
            assignees = $(el).data('assignees').split(',');
            
            toreturn=true;

            {% if id == 0 %}
            if(categoryfilters.length!==0 && jQuery.inArray(category.toString(), categoryfilters )<0) { 
                toreturn=false;
            }

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

            if(ticketfilter.length!==0 && ticket.toString()!=ticketfilter) { 
                toreturn=false;
            }
            
            if(milestonefilters.length!==0 && jQuery.inArray(milestone.toString(), milestonefilters )<0) { 
                toreturn=false;
            }
            
            if(columnfilters.length!==0 && jQuery.inArray(column.toString(), columnfilters )<0) { 
                toreturn=false;
            }

            if(toreturn&&(labelfilters.length!==0||assigneefilters.length!==0)) {
                if(labelfilters.length!==0) {
                    toreturn=false;
                    $.each(labelfilters, function( index, value ) {
                        if(jQuery.inArray(value, labels )>0) {
                            toreturn=true;
                        }
                    });                
                }

                if(assigneefilters.length!==0&&toreturn) {
                    toreturn=false;
                    $.each(assigneefilters, function( index, value ) {
                        if(jQuery.inArray(value, assignees )>0) {
                            toreturn=true;
                        }
                    });                
                }
            }
            
            return toreturn;
        });

        table.draw();
    }

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

        showhide();
    } 

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

        showhide();
    } 
    {% endif %}

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

        showhide();
    } 

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

        showhide();
    } 

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

        showhide();
    } 

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

        showhide();
    } 

    $(document).ready(function() {
        {% if id== 0 %}
        $('#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();
        });
        {% endif %}

        $("#filterticket").on("keyup", function() {
            showhide();
        });

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

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

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

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

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

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