{% extends '::base.html.twig' %}
{% block menuTop %}

{% endblock %}

{% block dashboard %}
    <style>
        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

        #menuTop {
            margin-top: 10px;
        }
        .fixed-panel {
            min-height: 100px;
            max-height: 200px;
            overflow-y: scroll;
        }
        #parametros .panel-body .row{

            padding-left: 5px;
        }
        #chart .panel-body {
             padding: 0px;
        }


    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        /*[34, 29, 36, 29, 33, 22, 31, 22, 30, 34, 28, 42, 34, 39, 43, 28, 26, 19, 24, 42, 28, 43, 38, 32, 47]*/
        $(function () {
            $.isLoading({
                text:       "Loading"
            });
            var d = new Date();
            var month = new Array();
            month[0] = "{{ 'month.january' | trans }}";
            month[1] = "{{ 'month.february' | trans }}";
            month[2] = "{{ 'month.march' | trans }}";
            month[3] = "{{ 'month.april' | trans }}";
            month[4] = "{{ 'month.may' | trans }}";
            month[5] = "{{ 'month.june' | trans }}";
            month[6] = "{{ 'month.july' | trans }}";
            month[7] = "{{ 'month.august' | trans }}";
            month[8] = "{{ 'month.september' | trans }}";
            month[9] = "{{ 'month.october' | trans }}";
            month[10] ="{{ 'month.november' | trans }}";
            month[11] ="{{ 'month.december' | trans }}";
            var currentMonth = d.getMonth();
            var currentYear = d.getFullYear();

            function disabledRadioMonth(currentMonth,currentYear){
                var radio = '';
                var year = d.getFullYear();
                for(var i = 0; i< month.length; i++)
                {
                    var selected  = '';
                    var disabledRadio  = '';

                    if(i == (currentMonth)) selected = 'checked'
                    if(i > (currentMonth)) disabledRadio = 'disabled'
                    if( year > currentYear) disabledRadio = ''
                    radio+= "<div class='row'>";
                    radio+=  "<input "+ selected +" " + disabledRadio +" type='radio' name='mes'  value='" + (i + 1) +"' >";
                    radio+=  "<label>"+month[i]+"</label>";
                    radio+=  "</div>";

                }

                $('#month > div.panel-body').empty().append(radio);
            }

           disabledRadioMonth(currentMonth,currentYear);
            $("#year").change(function(){

                $.isLoading({
                    text:       "Loading"
                });


                getChart($( "input[name='mes']").val(),$(this).val());
                disabledRadioMonth($( "input[name='mes']").val() -1,$(this).val());
            });

            getChart(currentMonth+1,currentYear);




            $( "input[name='mes']").live('change',function(){


                $.isLoading({
                    text:       "Loading"
                });

                getChart($(this).val(),$("#year").val());
            })

            $("#clear").click(function(){


                $.isLoading({
                    text:       "Loading"
                });

                getChart($( "input[name='mes']:checked").val());
            })




        });

        function getChart(month,year){

            $.getJSON('{{path('reportemexicosupervisores_chartKpi')}}',{'mes':month,'ano':year}, function (data) {

                var chart = data.kpi;
                $("#message").empty();
                if (chart.length == 0){

                    $.isLoading("hide");

                    $("#message").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    return false;

                }
                var header =  Object.keys(chart[0]);

                var categoria = getDataToObject(chart,header,0,false);
                var chart1 = getDataToObject(chart,header,6,true);
                var chart2 = getDataToObject(chart,header,1,true);
                var chart3 = getDataToObject(chart,header,2,true);
                var chart4 = getDataToObject(chart,header,3,true);
                var chart5 = getDataToObject(chart,header,4,true);

                createChart('chart1',categoria,chart1);
                createChart('chart2',categoria,chart2);
                createChart('chart3',categoria,chart3);
                createChart('chart4',categoria,chart4);
                createChart('chart5',categoria,chart5);
                $("#table").empty().append(createTable(chart,[], false));
                $.isLoading("hide");
            });
        }
        function getDataToObject(data,header ,key,int)
        {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){

                var valor = data[i][header[key]];

                if(int){

                    valor = parseInt(data[i][header[key]]);
                }

                arrayReturn.push(valor);
            }

            return arrayReturn;
        }
        function createChart(render,categoria,data){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: 200,
                    width: null,
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels:{

                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value+"%";
                        }
                    }
                },
                tooltip: {
                        enabled: false
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                    series : {

                        dataLabels : {

                            enable : true,
                            format : '{y} %'
                        },
                        events: {
                            click: function (event) {
                                //event.point.series[0].data = [[35]];
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'buttom',
                    floating: true,
                    x: 0,
                    y: 10
                },
                credits: {
                    enabled: false
                },
                series: [ {
                    showInLegend: false,
                    name: 'KPI %',
                    data: data,
                    color: {
                        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                        stops: [
                            [0, '#398235'],
                            [0.5, '#8ab66b'],
                            [1, '#c9de96']
                        ]
                    },

                    tag : 1

                }]
            };
            options.plotOptions.series.events = {
                click: function(event) {

                    $.isLoading({
                        text:       "Loading"
                    });
                     getDetailKpi($("input[name='mes']:checked").val(),event.point.category,$("#year").val());


                    function getDetailKpi(mes,supervisor,ano){


                        $.getJSON('{{path('reportemexicosupervisores_chartKpiDetalle')}}',{'ano':ano,'mes':mes,supervisor :supervisor },myCallBack);

                    }

                    function myCallBack(data){

                        var kpi = data.kpi[0];

                        var color = {
                            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                            stops: [
                                [0, '#398235'],
                                [0.5, '#8ab66b'],
                                [1, '#c9de96']
                            ]
                        };
                        var chart = $('#chart1').highcharts();
                        var chart2 = $('#chart2').highcharts();
                        var chart3 = $('#chart3').highcharts();
                        var chart4 = $('#chart4').highcharts();
                        var chart5 = $('#chart5').highcharts();

                        $('#chart1').scrollTop( 0 )
                        $('#chart2').scrollTop( 0 )
                        $('#chart3').scrollTop( 0 )
                        $('#chart4').scrollTop( 0 )
                        $('#chart5').scrollTop( 0 )
                        var categories = new Array();
                        categories.push(kpi.recurso);
                        var data = new Array();
                        data.push(parseInt(kpi.TOTAL));
                        chart.series[0].remove();
                        chart2.series[0].remove();
                        chart3.series[0].remove();
                        chart4.series[0].remove();
                        chart5.series[0].remove();

                        chart.chartHeight = 150;

                        chart2.chartHeight = 150;
                        chart3.chartHeight = 150;
                        chart4.chartHeight = 150;
                        chart5.chartHeight = 150;
                        //options.series = series
                        chart.xAxis[0].update({categories:categories,tickInterval:20},true);
                        chart2.xAxis[0].update({categories:categories,tickInterval:20},true);
                        chart3.xAxis[0].update({categories:categories,tickInterval:20},true);
                        chart4.xAxis[0].update({categories:categories,tickInterval:20},true);
                        chart5.xAxis[0].update({categories:categories,tickInterval:20},true);

                       // chart2.plotOptions.series.dataLabels.format = '{y}';
                        chart2.yAxis[0].update({labels: {

                            overflow: 'justify',
                            formatter: function() {
                                return this.value;
                            }
                        }},true);
                        chart3.yAxis[0].update({labels: {

                            overflow: 'justify',
                            formatter: function() {
                                return this.value;
                            }
                        }},true);
                        chart4.yAxis[0].update({labels: {

                            overflow: 'justify',
                            formatter: function() {
                                return this.value;
                            }
                        }},true);
                        chart5.yAxis[0].update({labels: {

                            overflow: 'justify',
                            formatter: function() {
                                return this.value;
                            }
                        }},true);

                        chart.addSeries( { showInLegend: false,data: data,color: color}, false);
                        chart2.addSeries( { showInLegend: false,data: [parseInt(kpi.asignados)],color: color, dataLabels : {

                            enable : true,
                            format : '{y}'
                        }}, false);
                        chart3.addSeries( { showInLegend: false,data: [parseInt(kpi.terminados)],color: color,dataLabels : {

                            enable : true,
                            format : '{y}'
                        }}, false);
                        chart4.addSeries( { showInLegend: false,data: [parseInt(kpi.LeadTime)],color: color,dataLabels : {

                            enable : true,
                            format : '{y}'
                        }}, false);
                        chart5.addSeries( { showInLegend: false,data: [parseInt(kpi.entregables)],color: color,dataLabels : {

                            enable : true,
                            format : '{y}'
                        }}, false);
                        chart.redraw();
                        chart2.redraw();
                        chart3.redraw();
                        chart4.redraw();
                        chart5.redraw();
                        $.isLoading("hide");

                    }



                    //chart.series[0].update({name: 'murphy'});
                }
            };
            return $('#' +render).highcharts(options);
        }
        function createTable(monitor,hide,check,total,nombreColTotal){

            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive" style="font-size: 6pt"> <thead>' +

                    '<tr class="btn-info">';

            for (var j = 0; j < header.length; j++) {

                if( hide.indexOf(header[j]) === -1) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

                if(check && j ==0){
                    table += "<th class='text-center'>" + " " + "</th>"
                }


            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                table += "<tr " + "id=" + monitor[i][header[0]] + ">";


                for (var j = 0; j < header.length; j++) {
                    if( hide.indexOf(header[j]) === -1) {
                        table += "<td>" + monitor[i][header[j]] + "</td>";
                    }

                    if(check && j== 0){

                        table += "<td>"+ "<input type='checkbox' class='checkup' user='" + monitor[i][header[1]] + "'ticket='" + monitor[i][header[0]] + "'/>"+"</td>";
                    }
                }
                table += "</tr>";

                if(typeof total !== "undefined") {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal +'</td>';

                        for(var x=0; x<headerTotal.length;x++){
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += "</table>";

            return table;
        }


    </script>
    <div class="container-fluid">

        <div class="col-lg-2" id="parametros">
            <div class="panel panel-primary">
                <!-- Default panel contents -->

                <div class="panel-heading">YEAR</div>
                <div class="panel-body">
                    <select id="year">
                        <option value="2017">2017</option>
                        <option value="2016">2016</option>
                    </select>
                </div>

            </div>
            <div class="panel panel-primary" id="month">
                <!-- Default panel contents -->

                <div class="panel-heading">MONTH</div>
                <div class="panel-body">

                </div>
                <div class="panel-footer">
                    <a  id="clear" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                        Clear
                    </a>
                </div>
            </div>

        </div>
        <div class="col-lg-10" id="message">

        </div>
        <div class="col-lg-10" id="chart">
            <div class="row">
              <div class="col-lg-6">
                  <div class="panel panel-primary" >
                      <div class="panel-heading">KPI</div>
                      <div class="panel-body fixed-panel" id="chart1">

                      </div>
                  </div>

              </div>

                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">ASIGNADOS</div>
                        <div class="panel-body fixed-panel" id="chart2">

                        </div>
                    </div>

                </div>
            </div> <!-- end row1-->
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">TERMINADOS</div>
                        <div class="panel-body fixed-panel" id="chart3">

                        </div>
                    </div>

                </div>

                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">LEADTIME</div>
                        <div class="panel-body fixed-panel" id="chart4">

                        </div>
                    </div>

                </div>
            </div> <!-- end row2-->
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">DOCUMENTACION</div>
                        <div class="panel-body fixed-panel" id="chart5">

                        </div>
                    </div>

                </div>

                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">DATA</div>
                        <div class="panel-body fixed-panel" id="table">

                        </div>
                    </div>

                </div>
            </div> <!-- end row3-->
        </div>

    </div> <!-- end container-->
{% endblock %}