{% 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;
        }
        .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
       }      

    </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"
            });
            
        $('#Filtros_year').change(function(){
            var fecha = new Date();
            var year = $("#Filtros_year option:selected").val();
            var meses = new Array ("{{ 'month.january' | trans }}","{{ 'month.february' | trans }}","{{ 'month.march' | trans }}","{{ 'month.april' | trans }}","{{ 'month.may' | trans }}","{{ 'month.june' | trans }}","{{ 'month.july' | trans }}","{{ 'month.august' | trans }}","{{ 'month.september' | trans }}","{{ 'month.october' | trans }}","{{ 'month.november' | trans }}","{{ 'month.december' | trans }}");
            var select = '';
            mes = '1';
            $('#Filtros_mes option').remove();
            if (year == fecha.getFullYear()){
                mes = fecha.getMonth()+1;
                select = "selected='selected'";
            }else{
                mes = '12';
            }
            //AGREGAR OPCIONES
            $('#Filtros_mes').append('<option value="">{{ 'site.select' | trans}}...</option>');
            if (year != ""){
                for(var i = 0; i < mes; i++) {
                    if (year != fecha.getFullYear()){
                        if (i == '11'){
                            select = "selected='selected'";
                        }else{
                            select = "";
                        }
                    }
                    val = i + 1;
                    if (val < 10){
                        val = '0'+val;
                    }
                    $('#Filtros_mes').append('<option '+select+ 'value='+val+'>'+meses[i]+'</option>');
                }
            }
        });

            // DIAS DE UN MES DADO EL AÑO  daysInMonth(2, 2009); // 28
            function daysInMonth(humanMonth, year) {
                return new Date(year || new Date().getFullYear(), humanMonth, 0).getDate();
            }
        
            //SELECCIONAR AÑO Y MES
            {% if year is defined %}
            var fecha = new Date();
            var meses = new Array ("{{ 'month.january' | trans }}","{{ 'month.february' | trans }}","{{ 'month.march' | trans }}","{{ 'month.april' | trans }}","{{ 'month.may' | trans }}","{{ 'month.june' | trans }}","{{ 'month.july' | trans }}","{{ 'month.august' | trans }}","{{ 'month.september' | trans }}","{{ 'month.october' | trans }}","{{ 'month.november' | trans }}","{{ 'month.december' | trans }}");
            var year = '{{year}}';
            var select = '';
            var mes = '1';
            $('#Filtros_mes option').remove();
            if (year == fecha.getFullYear()){
                mes = fecha.getMonth()+1;
                select = "selected='selected'";
            }else{
                mes = '12';
            }
            //AGREGAR OPCIONES
            $('#Filtros_mes').append('<option value="">{{ 'site.select' | trans}}...</option>');
            for(var i = 0; i < mes; i++) {
                val = i + 1;
                if (val < 10){
                    val = '0'+val;
                }
                $('#Filtros_mes').append('<option value='+val+'>'+meses[i]+'</option>');
            }
            //SELECCIONA EL MES BUSCADO
            $("#Filtros_year option[value='{{year}}']").attr("selected",true);
            $("#Filtros_mes option[value='{{mes}}']").attr("selected",true);
            {% else %}
            var year = "";
            var mes = "";
            {% endif %}
            
            
            getChart($('#Filtros_year').val(),$('#Filtros_mes').val());

             $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                
                getChart($('#Filtros_year').val(),$('#Filtros_mes').val());
            });
            
        });

        function getChart(year, mes){

            $.getJSON('{{path('kpimaya_DashboardKPI',{'idproyectos':idproyectos})}}',{'year':year,'mes':mes}, function (data) {

                var chart = data;

                console.log(data);
                
                //Produccion y productividad
                if (chart.grafico1.length>0){
                    var categoria1 = ['TOTAL','OCCIDENTE','CENTRAL','ORIENTE'];
                    var chart1 = getDataToObjectColumnSimple(chart.grafico1,Object.keys(chart.grafico1[0]),'%ATENCIÓN');
                }
                //Cumplimiento de la programación diaria
                if (chart.grafico2.length>0){
                    var categoria2 = ['TOTAL','OCCIDENTE','CENTRAL','ORIENTE'];
                    var chart2 = getDataToObjectColumnSimple(chart.grafico2,Object.keys(chart.grafico2[0]),'%CUMPLIMIENTO');
                    console.log(chart2);                    
                }    
                //Tipo de Supervisión
                if (chart.grafico3.length>0){
                    var categoria3 = getDataToObject(chart.grafico3,Object.keys(chart.grafico3[0]),0,false); 
                    var chart3 = getDataToObjectColumn(chart.grafico3,Object.keys(chart.grafico3[0]));
                    console.log(chart3);
                }
                //Asp
                if (chart.grafico4.length>0){                
                    var categoria4 = getDataToObject(chart.grafico4,Object.keys(chart.grafico4[0]),0,false); 
                    var chart4 = getDataToObjectBar(chart.grafico4,Object.keys(chart.grafico4[0]));
                   // console.log(chart4);
                }    

                if (chart.grafico1.length>0) createChartColumnSimple('chart1',categoria1,chart1,250); else { $("#chart1").empty(); $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                if (chart.grafico2.length>0) createChartColumnSimple('chart2',categoria2,chart2,250); else { $("#chart2").empty(); $("#chart2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                if (chart.grafico3.length>0) createChart('chart3',categoria3,chart3,300); else { $("#chart3").empty(); $("#chart3").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                if (chart.grafico4.length>0) createChartBar('chart4',categoria4,chart4, 250); else { $("#chart4").empty(); $("#chart4").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                $.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 getDataToObjectColumn(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
        
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]]));
              
            }

            arrayReturn.push({'name': 'CANTIDAD DE FALLAS', 'data': data1,'dataLabels':{'enabled':true,'color': '#FFFFFF','align': 'center','y': 7,'style': {'fontSize': '10px', 'fontFamily': 'Verdana, sans-serif'}}}) ;
    

            return arrayReturn;
        }
        
        function getDataToObjectColumnSimple(data,header,t)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
        
            for(var i = 1; i< 5; i++){
                data1.push(parseFloat(data[0][header[i]]));
            }
            
            arrayReturn.push({'name': t, 'data': data1,'dataLabels':{'enabled':true,'color': '#FFFFFF','align': 'center','y': 7,'style': {'fontSize': '10px', 'fontFamily': 'Verdana, sans-serif'}}}) ;
            return arrayReturn;
        }        
        
        function getDataToObjectBar(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();              
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[2]]));
                data2.push(parseFloat(data[i][header[3]]));
                data3.push(parseFloat(data[i][header[4]]));                
            }

            arrayReturn.push({'name': header[2], 'data': data1,'dataLabels':{'enabled':true,'color': '#FFFFFF','align': 'center','y': 7,'style': {'fontSize': '10px', 'fontFamily': 'Verdana, sans-serif'}}}) ;
            arrayReturn.push({'name': header[3], 'data': data2,'dataLabels':{'enabled':true,'color': '#FFFFFF','align': 'center','y': 7,'style': {'fontSize': '10px', 'fontFamily': 'Verdana, sans-serif'}}}) ;
            arrayReturn.push({'name': header[4], 'data': data3,'dataLabels':{'enabled':true ,'color': '#FFFFFF','align': 'center','y': 7,'style': {'fontSize': '10px', 'fontFamily': 'Verdana, sans-serif'}}}) ;

            return arrayReturn;
        }
        
        function createChart(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels: {
                        rotation: -45,
                        style: {
                            fontSize: '7px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}'
                },                
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                colors: [
                         '#0082b6','#b88fef','#009045','#db004f','#a1c517',
                        ],
                series: data

            };

            return $('#' +render).highcharts(options);
        }
        
        function createChartBar(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    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;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },                
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: data
            };

            return $('#' +render).highcharts(options);
        }  
        
        function createChartColumnSimple(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels: {
                        rotation: -45,
                        style: {
                            fontSize: '7px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    max: 105,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}%'
                },                
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                colors: [
                         '#0082b6','#b88fef','#009045','#db004f','#a1c517',
                        ],
                series: data

            };

            return $('#' +render).highcharts(options);
        }

</script>

 
    <div class="container">
         <div class="row">
                <div class="col-lg-3"  class="form-group">
                    <label>{{ 'monitoriii.year' | trans }}:&nbsp;</label>
                    <select class="form-control" name="Filtros_year" id="Filtros_year">
                        <option value="">{{ 'site.select' | trans}}...</option>
                        {% for i in range(2017,"now"|date("Y")) %}
                            <option value="{{ i }}">{{ i }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-3"  class="form-group">
                    <label>{{ 'monitoriii.month' | trans }}:&nbsp;</label>
                    <select class="form-control" name="Filtros_mes" id="Filtros_mes">
                        <option value="">{{ 'site.select' | trans}}...</option>
                    </select>

                </div>
                <div class="col-lg-2" id="parametros" style="margin-top: 1%">
                   <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                </div>             
                <div class="col-lg-4">
                    <img id="logo" class="pull-right" src="{{ asset('images/telefonica.png') }}"  width="220" height="72" >

                 </div>             
           </div>
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1> KPI MP</h1>
                 </div>

        </div>                    
         
        <div class="col-lg-18" id="chart">
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Kpi de atención de alarmas</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">Porcentaje de cumplimiento mensual de Mp</div>
                        <div class="panel-body fixed-panel" id="chart2">

                        </div>
                    </div>

                </div>
            </div> <!-- end row2-->
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Sitios con más fallas en el mes</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">Histórico de cumplimiento de Mp´s</div>
                        <div class="panel-body fixed-panel" id="chart4">

                        </div>
                    </div>

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

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