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

{% block localstyle %}
    html { height:100%}
    body { height:100%; background-color:#efefef;}
    #main {
        padding-left:0px;
        margin-bottom:0px;
    }

    h3 { font-size:14px; margin-top:15px;}
    #mycontent { width: 5000px; display:none; }

    .btn-link {
        cursor:pointer;
    }

    .control-label {
        margin-bottom:0px;
    }
    
    .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">
        <div id="filters" class="d-flex flex-column pl-2 pr-2 " style="width:350px; background-color:var(--colorbgbodydark);min-height:1000px;">
            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre JALONS</label>
                <select id="filtermilestones" multiple="multiple" class="form-control">
                    {% for giteamilestone in giteamilestones %}
                        <option value="{{giteamilestone.id}}">{{giteamilestone.title}}</option>
                    {% endfor %}
                    <option value="-100">Aucun</option>
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre EQUIPES</label>
                <select id="filterteams" multiple="multiple" class="form-control">
                    {% for team in scrum.scrumteams %}
                        <option value="{{team.giteaid}}">{{team.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre ETIQUETTES</label>
                <select id="filterlabels" multiple="multiple" class="form-control">
                    {% for gitealabel in gitealabels %}
                        <option value="{{gitealabel.id}}">{{gitealabel.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre AFFECTATIONS</label>
                <select id="filterassignees" multiple="multiple" class="form-control">
                    {% for giteaassignee in giteaassignees %}
                        <option value="{{giteaassignee.id}}">{{giteaassignee.login}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="pl-3" style="width:100%;">
            <div id="haveupdate" style="display:none" class="alert alert-danger pr-2 mt-3">
                Votre projet a été mise à jour par un tier. Souhaitez-vous raffraichir votre projet ?<br>
                <a href="{{path('app_scrum_view',{id:scrum.id})}}" class="btn btn-success mt-3">Rafraichir</a>
            </div>

            <div class="mt-4" style="zoom:80%">
                <button class="btn btn-success" onClick="showFilters()"><i class="fas fa-filter"></i></button>
                <a href="{{giteaUrl}}/{{scrum.giteajson.owner.login}}/{{scrum.giteajson.name}}/issues/new" class="btn btn-success">Nouveau Ticket</a>
                <span id="textfilters"></span>
            </div>

            {% for column in scrum.scrumcolumns %}
                {% set idmiletone="-100" %}
                {% set tbidmiletone=[] %}
                {% set haveissues=false %}
                <div class="card d-inline-block mt-3 align-top mb-5" data-column="{{column.giteaid}}" style="width: 18rem;">
                    <div class="card-header">{{ column.name }}</div>
                    <div class="card-body p-1">
                        {% for issue in column.scrumissues %}
                            {% set haveissues=true %}
                            {% if idmiletone!=issue.giteamilestone %}
                                {% if idmiletone!=-100 %}</ul>{% endif %}
                                
                                {% if issue.giteamilestone is empty %}
                                    {% set tbidmiletone = tbidmiletone|merge([-100]) %}
                                    {% set idmilestone = -100 %}
                                    {% set namemilestone = "Aucun" %}
                                {% else %}
                                    {% set tbidmiletone = tbidmiletone|merge([issue.giteamilestone]) %}
                                    {% set idmilestone = issue.giteamilestone %}
                                    {% set namemilestone = issue.giteajson.milestone.title %}
                                {% endif %}

                                <h3 data-milestone="{{idmilestone}}">JALON = {{namemilestone}}</h3>
                                <ul class="scrumcolumn list-group" style="min-height:50px" data-column="{{column.giteaid}}" data-milestone="{{idmilestone}}">
                                {% set idmiletone=issue.giteamilestone %}
                            {% endif %}

                            {% set datalabels="" %}
                            {% set datateams="" %}
                            {% for label in issue.giteajson.labels %}
                                {% if label.id not in giteacolumns and label.id in giteateams %}
                                    {% set datateams=datateams~"datateam"~label.id~" " %}
                                {% endif %}

                                {% if label.id not in giteacolumns and label.id not in giteateams %}
                                    {% set datalabels=datalabels~"datalabel"~label.id~" " %}
                                {% endif %}
                            {% endfor %}

                            {% set dataassignees="" %}
                            {% for assignee in issue.giteajson.assignees %}
                                {% set dataassignees=dataassignees~"dataassignee"~assignee.id~" " %}
                            {% endfor %}

                            <div data-id="{{ issue.id }}" data-issue="{{ issue.id }}" data-column="{{column.giteaid}}" data-milestone="{{idmilestone}}" class="card mb-1 issue issue-{{issue.id}} {{datateams}} {{datalabels}} {{dataassignees}}">
                                <div class="card-footer p-1" style="line-height:10px; border-top:none;">
                                    <div class="float-left btn btn-link p-0 m-0 fas fa-arrows-alt" style="cursor:move"></div>
                                    <a target="_blank" class="modcolumn btn btn-link float-right fa fa-file p-0 m-0" href="{{issue.giteajson.html_url}}"></a>                                
                                </div>
                                
                                <div class="card-body p-1" style="line-height:10px;">
                                    <div>
                                        <small>
                                            {{issue.giteanumber}} - {{ issue.giteatitle }}<br><br>
                                            <small>Crée le {{issue.giteajson.created_at|date("d/m/y")}}</small><small style ="float:right">Modifié le {{issue.giteajson.updated_at|date("d/m/y")}}</small><br><br>
                                            
                                            {% for label in issue.giteajson.labels %}
                                                {% if label.id not in giteacolumns and label.id in giteateams %}
                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                        <i class="fas fa-tag"></i>
                                                        {{ label.name }}
                                                    </span>
                                                {% endif %}
                                            {% endfor %}
                                            <br>
                                            {% for label in issue.giteajson.labels %}
                                                {% if label.id not in giteacolumns and label.id not in giteateams %}
                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                        <i class="fas fa-tag"></i>
                                                        {{ label.name }}
                                                    </span>
                                                {% endif %}
                                            {% endfor %}

                                            <div>
                                            {% for assignee in issue.giteajson.assignees %}
                                                <img src="{{assignee.avatar_url}}" class="assignee" title="{{assignee.username}}">
                                            {% endfor %}
                                            </div>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                        {% if haveissues %}
                            </ul>                        
                        {% endif %}

                        {% for giteamilestone in giteamilestones %}
                            {% if giteamilestone.id not in tbidmiletone %}
                                <h3 data-milestone="{{giteamilestone.id}}"> JALON = {{giteamilestone.title}}</h3>
                                <ul class="scrumcolumn list-group" style="min-height:50px" data-column="{{ column.giteaid }}" data-milestone="{{giteamilestone.id}}"></ul>
                            {% endif %}
                        {%endfor%}

                        {% if -100 not in tbidmiletone %}
                            <h3 data-milestone="-100"> JALON = Aucun</h3>
                            <ul class="scrumcolumn list-group" style="min-height:50px" data-column="{{ column.giteaid }}" data-milestone="-100"></ul>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    function showFilters() {
        if($("#filters").hasClass("d-flex")) {
            toshow=0;
            $("#filters").addClass("d-none");
            $("#filters").removeClass("d-flex");
        }
        else {
            toshow=1;
            $("#filters").addClass("d-flex");
            $("#filters").removeClass("d-none");
        }

        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'showfilters',
                id:{{scrum.id}},
                value: toshow
            }
        });        
    }

    $(document).ready(function() {
        // Apply Filter
        function showhide() {
            if($("#filtermilestones").val().length !== 0) {
                $("[data-milestone]").hide();     
                $.each($("#filtermilestones").val(), function( index, value ) {
                    $("[data-milestone="+value+"]").show();
                });
            }
            else $("[data-milestone]").show();

            $(".issue").show();
            
            $( ".issue" ).each(function( index ) {
                domissue=$(this);
                toshow=true;

                if(toshow&&$("#filterteams").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterteams").val(), function( index, value ) {
                        if (domissue.hasClass("datateam"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterlabels").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterlabels").val(), function( index, value ) {
                        if(domissue.hasClass("datalabel"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterassignees").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterassignees").val(), function( index, value ) {
                        if (domissue.hasClass("dataassignee"+value))
                            toshow=true;
                    });
                }

                if(!toshow) domissue.hide();
            });

            textfilters="";
            if($("#filtermilestones").val().length!==0) {
                data = $("#filtermilestones").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>JALONS</b> =";
                $.each($("#filtermilestones").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterteams").val().length!==0) {
                data = $("#filterteams").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
                $.each($("#filterteams").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterlabels").val().length!==0) {
                data = $("#filterlabels").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>ETIQUETTES</b> =";
                $.each($("#filterlabels").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterassignees").val().length!==0) {
                data = $("#filterassignees").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>AFFECTATIONS</b> =";
                $.each($("#filterassignees").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            } 

            $("#textfilters").html(textfilters);            
        }

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

            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();
        });

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

            showhide();
        }

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

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

            showhide();
        }
        $('#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();
        });

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

            showhide();
        }
        $('#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();
        });

        {% if not showfilters %}
        $("#filters").addClass("d-none");
        $("#filters").removeClass("d-flex");
        {% endif %}

        // Appliy filters
        showhide();
        $("#mycontent").show();

        lastupdate="{{scrum.updatedate|date("Ymd H:i:s")}}";
        
        // Sort columns
        $( ".scrumcolumn" ).sortable({
            handle: ".fa-arrows-alt",
            connectWith: ".scrumcolumn",
            cursor: "move",
            update: function( event, ui ) {
                id=$(ui.item).data("issue");
                oldcolumn=$(ui.item).data("column");
                oldmilestone=$(ui.item).data("milestone");
                newcolumn=$(ui.item).parent().data("column");
                newmilestone=$(ui.item).parent().data("milestone");
                console.log("ID = "+id+" = Column : "+oldcolumn+">>"+newcolumn+" = Milestone : "+oldmilestone+">>"+newmilestone );

                if(oldcolumn!=newcolumn||oldmilestone!=newmilestone) {

                    $.ajax({
                        method: "POST",
                        url: "{{path("app_scrumissue_change")}}",
                        data: {
                            id:id,
                            oldcolumn:oldcolumn,
                            oldmilestone:oldmilestone,
                            newcolumn:newcolumn,
                            newmilestone:newmilestone,
                        },
                        success: function(data) {
                            $(ui.item).data("column",newcolumn);
                            $(ui.item).data("milestone",newmilestone);
                            if(data) lastupdate=data;
                        },
                        error: function (request, status, error) {
                            $( ".scrumcolumn" ).sortable('cancel');
                        }
                    });                
                }               

                lstordered="";
                $(".scrumcolumn div" ).each(function( index ) {
                    if($(this).data("id")) {
                        if(index==0) lstordered=$(this).data("id");
                        else lstordered=lstordered+","+$(this).data("id");
                    }    
                }); 

                console.log(lstordered);                 
                $.ajax({
                    method: "POST",
                    url: "{{path("app_scrumissue_order")}}",
                    data: {
                        id:{{scrum.id}},
                        lstordered:lstordered,
                    }
                });                  
            }
        });  

        
        var intervalId = window.setInterval(function(){
            console.log(lastupdate);
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_ctrlchange")}}",
                data: {
                    id:{{scrum.id}},
                    lastupdate:lastupdate
                },
                success: function(fgupdated) {
                    if(fgupdated) {
                        $("#haveupdate").show();
                    }
                }
            });                  
        }, 60000);
                 
    });
{% endblock %}