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

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification SCRUM
    {% elseif mode=="submit" %}
    Création SCRUM
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }} 
    
    <a class="btn btn-secondary" href={{ path('app_scrum') }}>Annuler</a>

    {% if mode=="update" %}
    <a  href="{{ path('app_scrum_delete',{'id':scrum.id}) }}"
        class="btn btn-danger float-right"
        data-method="delete"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?">
          Supprimer
    </a>
    {% endif %}

    <br><br>

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Informations
                </div>

                <div class="card-body">
                    {{ form_row(form.category) }}
                    {{ form_row(form.name) }}
                    {{ form_row(form.giteaid) }}
                    {{ form_row(form.users) }}
                </div>
            </div>    
        </div>

        {% if mode=="update" %}
        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Equipes
                    <button id="addteam" type="button" class="btn float-right fa fa-plus"></button>                    
                </div>

                <div id="scrumteams" class="card-body">
                    <ol id="scrumteams" class="list-group list-group-numbered">

                    </ol>                
                </div>
            </div> 

            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Colonnes
                    <button id="addcolumn" type="button" class="btn float-right fa fa-plus"></button>                    
                </div>

                <div id="scrumcolumns" class="card-body">
                    <ol id="scrumcolumns" class="list-group list-group-numbered">

                    </ol>                
                </div>
            </div>    
        </div>
        {% endif %}
    </div>
{{ form_end(form) }}

<div id="mymodalcolumn" class="modal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <iframe frameborder=0 width="100%" height="600px"></iframe>
            </div>            
        </div>
    </div>
</div>

<div id="mymodalteam" class="modal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <iframe frameborder=0 width="100%" height="600px"></iframe>
            </div>            
        </div>
    </div>
</div>

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $("#scrum_giteaid").select2();
        $("#scrum_name").focus();
        {% if mode=="update" %}
        loadscrumcolumns();
        loadscrumteams();
        {%endif%}
    });

    {% if mode=="update" %}
    $("#addcolumn").click(function() {
        ModalLoad('mymodalcolumn','Ajouter une colonne','{{path('app_scrumcolumn_submit',{scrumid:scrum.id})}}');
    });

    $('#scrumcolumns').on('click', '.modcolumn', function(event) {  
        url="{{path('app_scrumcolumn_update',{id:'xxx'})}}";
        url=url.replace("xxx",$(this).data("id"));
        ModalLoad('mymodalcolumn','Modifier une colonne',url);
    });

    $('#mymodalcolumn').on('hidden.bs.modal', function () {
        loadscrumcolumns();
    });

    function loadscrumcolumns() {
        $("#scrumcolumns").empty();
        $.ajax({
            method: "POST",
            url: "{{path("app_scrumcolumn_select",{scrumid:scrum.id})}}",
            success: function(datas, dataType)
            {
                
                jQuery.each(datas, function(i, wid) {
                    html ='<li data-id="'+wid.id+'" class="list-group-item d-flex justify-content-between">';
                    html+='<div>';
                    html+='<div class="mr-3 p-2 d-inline-block"><i class="fas fa-arrows-alt-v fa-2x"></i></div>';                    
                    html+='<div class="d-inline-block">';
                    html+=wid.name;
                    html+='</div>';
                    html+='</div>';
                    html+='<button type="button" data-id="'+wid.id+'" class="modcolumn btn float-right fa fa-file"></button>';
                    html+='</li>';
                    $("#scrumcolumns").append(html);
                    
                }); 

                $( "#scrumcolumns" ).sortable({
                    axis: "y",
                    handle: ".fa-arrows-alt-v",
                    update: function( event, ui ) {
                        lstordered="";
                        $( "#scrumcolumns li" ).each(function( index ) {
                            if(index==0) lstordered=$(this).data("id");
                            else lstordered=lstordered+","+$(this).data("id");
                        });    
                        $.ajax({
                            method: "POST",
                            url: "{{path("app_scrumcolumn_order",{scrumid:scrum.id})}}",
                            data: {
                                lstordered:lstordered
                            }
                        });
                    }
                });
            },
        });         

    }


    $("#addteam").click(function() {
        ModalLoad('mymodalteam','Ajouter une colonne','{{path('app_scrumteam_submit',{scrumid:scrum.id})}}');
    });

    $('#scrumteams').on('click', '.modteam', function(event) {  
        url="{{path('app_scrumteam_update',{id:'xxx'})}}";
        url=url.replace("xxx",$(this).data("id"));
        ModalLoad('mymodalteam','Modifier une team',url);
    });

    $('#mymodalteam').on('hidden.bs.modal', function () {
        loadscrumteams();
    });

    function loadscrumteams() {
        $("#scrumteams").empty();
        $.ajax({
            method: "POST",
            url: "{{path("app_scrumteam_select",{scrumid:scrum.id})}}",
            success: function(datas, dataType)
            {
                
                jQuery.each(datas, function(i, wid) {
                    html ='<li data-id="'+wid.id+'" class="list-group-item d-flex justify-content-between">';
                    html+='<div>';
                    html+='<div class="mr-3 p-2 d-inline-block"><i class="fas fa-arrows-alt-v fa-2x"></i></div>';                    
                    html+='<div class="d-inline-block">';
                    html+=wid.name;
                    html+='</div>';
                    html+='</div>';
                    html+='<button type="button" data-id="'+wid.id+'" class="modteam btn float-right fa fa-file"></button>';
                    html+='</li>';
                    $("#scrumteams").append(html);
                    
                }); 

                $( "#scrumteams" ).sortable({
                    axis: "y",
                    handle: ".fa-arrows-alt-v",
                    update: function( event, ui ) {
                        lstordered="";
                        $( "#scrumteams li" ).each(function( index ) {
                            if(index==0) lstordered=$(this).data("id");
                            else lstordered=lstordered+","+$(this).data("id");
                        });    
                        $.ajax({
                            method: "POST",
                            url: "{{path("app_scrumteam_order",{scrumid:scrum.id})}}",
                            data: {
                                lstordered:lstordered
                            }
                        });
                    }
                });
            },
        });         

    }
    {% endif %}

{% endblock %}