{% 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: 350px;
    }

{% 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>

        <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_scrum_table',{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 jalon in tbestim %}
                    {% if jalon.nbjrs>0 %}
                        <div class="card mb-4" data-milestone="{{ jalon.idjal }}">
                            <div class="card-header">{{jalon.nmjal}}</div>
                            <div class="card-body d-flex justify-content-center">  
                                <div class="d-flex flex-column">
                                    <div class="d-flex justify-content-center">    
                                        <div id="floatdonut{{ jalon.idjal }}" class="flot-chart-content"></div>
                                        <div style="min-width:250px; color: #ffffff; padding: 3px;">
                                            {% for column in jalon.columns %}
                                                <div style="padding: 3px; background-color:#{{column.color}}">{{column.nmcol}}<span class="float-right">{{column.nbjrs}}</<span></div>
                                            {% endfor %}
                                            <div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{jalon.nbjrs}}</<span></div>
                                        </div>                                
                                    </div>
                                    <div class="d-flex flex-wrap justify-content-center">
                                        {% for sprint in jalon.sprints %}
                                            {% if jalon.nbjrs != sprint.nbjrs and sprint.nbjrs>0 %}
                                                <div class="card mt-4 mr-4" data-sprint="{{ jalon.idjal~"-"~sprint.idspr }}">
                                                    <div class="card-header">{{sprint.nmspr}}</div>
                                                    <div class="card-body d-flex flex-column">      
                                                        <div id="floatdonut{{ jalon.idjal~"-"~sprint.idspr }}" class="flot-chart-subcontent" style="float:left"></div>
                                                        <div class="mt-3" style="color: #ffffff;">
                                                            {% for column in sprint.columns %}
                                                                <div style="padding: 3px; background-color:#{{column.color}}">{{column.nmcol}}<span class="float-right">{{column.nbjrs}}</<span></div>
                                                            {% endfor %}
                                                            <div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{sprint.nbjrs}}</<span></div>
                                                        </div>
                                                    </div>
                                                </div> 

                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div> 

                    {% endif %}
                {% 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;
                });
            }

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

        {% for jalon in tbestim %}
            var data = [
            {% for column in jalon.columns %}
                {
                    label: "{{ column.nmcol}}",
                    data: {{ column.nbjrs }},
                    color: "#{{ column.color }}",
                },
            {% endfor %}
            ];

            var plotObj = $.plot($("#floatdonut{{ jalon.idjal }}"), 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 sprint in jalon.sprints %}
                var data = [
                {% for column in sprint.columns %}
                    {
                        label: "{{ column.nmcol}}",
                        data: {{ column.nbjrs }},
                        color: "#{{ column.color }}",
                    },
                {% endfor %}
                ];

                var plotObj = $.plot($("#floatdonut{{ jalon.idjal~"-"~sprint.idspr }}"), 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,
                    },                
                });
            {% endfor %}
        {% endfor %} 

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

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