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

{% block localstyle %}
    #main {
        padding-left:0px;
        margin-bottom:0px;
    }
    #mycontent { display:none; }

    .flot-chart {
      display: block;
      height: 450px;
    }
    .flot-chart-content {
      width: 400px;
      height: 250px;
    }

    .flot-chart-subcontent {
      height: 200px;
      width: 40%;
    }

{% 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:1500px;">
            <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>

        <div class="pl-3" style="width:100%;">
            <div class="mt-4 mb-3" style="zoom:80%">
                <button class="btn btn-success" onClick="showFilters()"><i class="fas fa-filter"></i></button>
                <a class="btn btn-success" href="{{path('app_scrum_view',{id:scrum.id})}}"><i class="fas fa-columns"></i></a>
                <a class="btn btn-success" href="{{path('app_issuescrum',{id:scrum.id})}}"><i class="fas fa-ticket-alt"></i></a>
                <span id="textfilters"></span>
            </div>
                    
            <h1>{{ scrum.name }}</h1>

            <div class="d-flex flex-column mt-4">
            {% for milestone in tbstat %}
                <div class="flot-chart mr-4" data-milestone="{{ milestone.id }}">
                    <h4>{{milestone.name}}</h4>
                    <div class="mt-4">      
                        <div id="floatdonut{{ milestone.id }}" class="flot-chart-content" style="float:left"></div>
                        <div class="mt-3 pb-3"  style="width:100%">
                            
                            <div class="d-flex justify-content-between mt-4">    
                                {% for column in milestone.stat %}
                                    <div style="width:250px">
                                        <div style="background-color:{{column.color}}; padding:3px;margin-bottom:3px;">{{ column.label }} = {{ column.total }}</div>
                                        <small>
                                            <div style="line-height:15px; width:100%">
                                                {% for label in column.labels %}
                                                    <li >{{label.label}} = {{label.total}}</li>
                                                {% endfor %}
                                            </div>
                                        </small>
                                    </div>
                                {%endfor%}
                            </div>
                        </div>
                    </div>
                </div>    
            {% endfor %}
            </div>
        </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();

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

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

            location.reload();
        }
        $('#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();
        });        

        {% for milestone in tbstat %}
            var data = [
            {% for data in milestone.stat %}
                {
                    label: "{{ data.label}}",
                    data: {{ data.total }},
                    color: "{{ data.color }}",
                },
            {% endfor %}
            ];

            var plotObj = $.plot($("#floatdonut{{ milestone.id }}"), data, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        label: {
                            show: true,
                            radius: 1,
                            threshold: 0.1,
                            background: { 
                                opacity: 0.5,
                                color: '#cdcdcd',
                            },
                            formatter: function(label, series) {
                                return '<span style="color:#000; padding:3px;">' + label + '</span>';                            
                            }
                        }                         
                    }
                },
                legend: {
                    show: false,
                },                
            });

            {% for data in milestone.stat %}
                {% for data in milestone.stat %}
                    var data = [
                    {% for label in data.labels %}
                        {
                            label: "{{ label.label}}",
                            data: {{ label.total }},
                            color: "{{ label.color }}",
                        },
                    {% endfor %}
                    ];
                    var plotObj = $.plot($("#floatsubdonut{{ milestone.id }}-{{ data.id }}"), data, {
                        series: {
                            pie: {
                                show: true,
                                label: {
                                    show: false,
                                    radius: 3/4,
                                    threshold: 0.1,
                                    background: { 
                                       opacity: 0.5,
                                        color: '#cdcdcd',
                                    },
                                }                                
                            }
                        },
                        legend: {
                            show: false,
                        },
                    });
                {% endfor %}
            {% endfor %}
        {% endfor %}  

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

        // Appliy filters
        showhide();
        $("#mycontent").show();              
    });
{% endblock %}