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

{% block localstyle %}
    html { height:100%}
    body { height:100%; background-color:#efefef;}
    main { height:100%}

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

{% block body %}
    {% 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-label="{{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 %}
                            <h3> JALON = Aucun</h3>
                        {% else %}
                            <h3> JALON = {{issue.giteajson.milestone.title}}</h3>
                        {% endif %}

                        {% if issue.giteamilestone is empty %}
                            {% set tbidmiletone = tbidmiletone|merge([-100]) %}
                        {% else %}
                            {% set tbidmiletone = tbidmiletone|merge([issue.giteamilestone]) %}
                        {% endif %}
                        <ul class="scrumcolumn list-group" style="min-height:50px" data-label="{{ column.giteaid }}" data-milestone="{{issue.giteamilestone}}">
                        {% set idmiletone=issue.giteamilestone %}
                    {% endif %}

                    <div data-id="{{ issue.id }}" data-issue="{{ issue.id }}" data-label="{{ issue.scrumcolumn.giteaid }}" data-milestone="{{issue.giteamilestone}}" class="card mb-1 issue issue-{{issue.id}}">
                        <div class="card-footer p-1" style="line-height:10px; border-top:none;">
                            <div class="d-inline-block"><i class="fas fa-arrows-alt" style="cursor:move"></i></div>
                            <button type="button" data-id="{{ issue.id }}" class="modcolumn btn float-right fa fa-file p-0 m-0"></button>                                
                        </div>
                        
                        <div class="card-body p-1" style="line-height:10px;">
                            <div class="d-inline-block">
                                <small>
                                    {{issue.giteanumber}} - {{ issue.giteatitle }}
                                </small>
                            </div>
                        </div>
                    </div>
                {% endfor %}

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

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

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

{% block localjavascript %}
    $(document).ready(function() {
        $( ".scrumcolumn" ).sortable({
            handle: ".fa-arrows-alt",
            connectWith: ".scrumcolumn",
            cursor: "move",
            stop: function( event, ui ) {
                id=$(ui.item).data("issue");
                oldlabel=$(ui.item).data("label");
                oldmilestone=$(ui.item).data("milestone");
                newlabel=$(ui.item).parent().data("label");
                newmilestone=$(ui.item).parent().data("milestone");
                console.log("ID = "+id+" = Label : "+oldlabel+">>"+newlabel+" = Milestone : "+oldmilestone+">>"+newmilestone );

                if(oldlabel!=newlabel||oldmilestone!=newmilestone) {
                    $.ajax({
                        method: "POST",
                        url: "{{path("app_scrumissue_change")}}",
                        data: {
                            id:id,
                            oldlabel:oldlabel,
                            oldmilestone:oldmilestone,
                            newlabel:newlabel,
                            newmilestone:newmilestone,
                        },
                        success: function() {
                            $(ui.item).data("label",newlabel);
                            $(ui.item).data("milestone",newmilestone);
                        },
                        error: function (request, status, error) {
                            $( ".scrumcolumn" ).sortable('cancel');
                        }
                    });                
                }               
            }
        });        
    });
{% endblock %}