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

{% endblock %}

{% block dashboard %}

    <style>
        
        .Name{
            width: 400px;
        }
        .double-scroll {
            width: 100%;
            margin-bottom: 20px;
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

        .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: 30px;
        }
        /* .table{
             font-size: 12px;
             width: 3000px;
         }
 */
        .estilod{
            background-color: green;

        }

        .estilof{
            background-color: red;

        }
        espacio{
            padding-top: 20px;
        }

    </style>


    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script>

        $(function () {
            
            
            var starYear = 2016;
            var d = new Date();
            var year = d.getFullYear();
            var month = new Array();



            for(var i=starYear; year >= i;i++ )
            {
                $('#ano').append($("<option/>", {
                    value: i,
                    text: i
                }));

            }

            month[0] = "ENERO";
            month[1] = "FEBRERO";
            month[2] = "MARZO";
            month[3] = "ABRIL";
            month[4] = "MAYO";
            month[5] = "JUNIO";
            month[6] = "JULIO";
            month[7] = "AGOSTO";
            month[8] = "SEPTIEMBRE";
            month[9] = "OCTUBRE";
            month[10] = "NOVIEMBRE";
            month[11] = "DICIEMBRE";
            var n = month[d.getMonth()];
            var options = new Array();
            var semana = ISO8601_week_no(new Date()) - 1;
            for(var i=semana;i>=1;i--){

                $('#semana').append($("<option/>", {
                    value: i,
                    text: i
                }));
            }

            $("#ano").change(function(){
                var yearSelected = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date()) - 1;

                $('#mes').empty();

                for(var i=0;i<month.length;i++) {
                    if (yearSelected < year) {
                        $('#mes').append($("<option/>", {
                            value: i + 1,
                            text: month[i]
                        }));
                    }else if(i <=  d.getMonth()){
                        $('#mes').append($("<option/>", {
                            value: i + 1,
                            text: month[i]
                        }));

                    }
                }
                $('#semana').empty();

                if (yearSelected < year) {
                    var semana = 52;
                    for(var i=semana;i>=1;i--){

                        $('#semana').append($("<option/>", {
                            value: i,
                            text: i
                        }));
                    }

                }else{

                    for(var i=semana;i>=1;i--){

                        $('#semana').append($("<option/>", {
                            value: i,
                            text: i
                        }));
                    }
                }

            });

            for(var i=0;i<month.length;i++){

                if(i <=  d.getMonth()){

                    options.push( );

                    $('#mes').append($("<option/>", {
                        value: i + 1,
                        text: month[i]
                    }));

                }
            }


            $("#tipoBusqueda").on('change load',function(){

                $(this).val() == 'mes' ? $("#mes").removeAttr('class','hide'):$("#mes").addClass('hide');
                $(this).val() == 'semana' ? $("#semana").removeAttr('class','hide'):$("#semana").addClass('hide');
            });
            
            
         


            $("#generar").click(function(){
                
            
                
              console.log($("#tipoBusqueda").val());

               if($("#ano").val()!=""){
                    if($("#tipoBusqueda").val()!='mes'){
                     $("#tabla1").empty();
                     $("#tabla1").append('<div class="alert alert-warning" role="alert">\n\
                        Selecciona año y mes</div>');
                        
                   
                }
                else{
                     $.isLoading({
                      text:       "Loading"
                        });
                     cargarDatos();
                }

                }
                else{
                     $("#tabla1").empty();
                     $("#tabla1").append('<div class="alert alert-warning" role="alert">\n\
                        Selecciona año y mes</div>');

                }

            });

        });
        
        function ISO8601_week_no(dt){
            var tdt = new Date(dt.valueOf());
            var dayn = (dt.getDay() + 6) % 7;
            tdt.setDate(tdt.getDate() - dayn + 3);
            var firstThursday = tdt.valueOf();
            tdt.setMonth(0, 1);
            if (tdt.getDay() !== 4)
            {
                tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - tdt) / 604800000);
        }



     




         function cargarDatos(){
            
            data = {};

            var tipo  = $("#tipoBusqueda").val();

            switch (tipo){

                case 'semana':
                    data = {'semana': $("#semana").val()}
                    break;
                case 'mes':
                    data = {'mes' : $("#mes").val()}
                    break;
                case 'ano':

                    break;
            }

            data['region'] = $("#region").val();
            data['ano'] = $("#ano").val();
            
            
           // console.log(data['region'],data['ano'],data['mes']);

       
            var tablaDatos =$('#datos');

            $.getJSON('{{path('reportemsmexico_msRegiones')}}',data, function(res){
                
                
                var monitor1=res.monitor1;
                
               
                
                var chart=res;
                
                console.log(chart.monitor1);
                
                $("#tabla1").empty();
                $("#tabla1").append(createTable(res.monitor1));
                
                var Region=['R1','R2','R3','R4','R5','R6','R7','R8','R9'];
                var arrayReturn = new Array();

                
                 for (var j = 0; j < 22; j++) {
                     var indicador=[];
                      for (var i = 1; i < 10; i++) {
                            indicador.push(chart.monitor1[j][i]);
                      }
                        arrayReturn.push({'name': chart.monitor1[j][0], 'data': indicador});
                      //  console.log(indicador);
                 }
                
                
                
                
                
                 //Grafica general
                 if (chart.monitor1.length>0){
                    var categoria5 = getDataToObject(chart.monitor1,Object.keys(chart.monitor1[0]),0,false); 
                  
                    var chart5 = getDataToObjectBar2(chart.monitor1,Object.keys(chart.monitor1[0]));
                }  
                if (chart.monitor1.length>0) createChartBar2('chart5',Region,arrayReturn,1000); 
                else { $("#chart5").empty(); $("#chart5").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}

              
                
                    $.isLoading("hide");

            });


            function getTotal(valor,key){
                var total = new Array();
                /*total[1] = 0;
                 total[2] = 0;*/
                var header = Object.keys(valor[0]);


                for(var i = 0; i< valor.length;i++){

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

                        if(typeof total[key[j]] === "undefined"){

                            total[key[j]] = 0;
                        }

                        total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                    }

                }
                return total;
            }
         
            function createTable(monitor,total,nombreColTotal){


                var header = Object.keys(monitor[0]);
                var header2 = ['KPI Name','R1','R2','R3','R4','R5','R6','R7','R8','R9'];
               // console.log(header2);
                
                var table = '<table  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

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

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


                    table += "<th class='text-center c" + header2[j] + "'>" + header2[j] + "</th>"



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

                for (var i = 0; i < monitor.length; i++) {
                    table += "<tr>";
                    for (var j = 0; j < header.length; j++) {
                        
                        if(monitor[i][header[1]]==0 && 
                           monitor[i][header[2]]==0  && 
                           monitor[i][header[3]]==0  && 
                           monitor[i][header[4]]==0  && 
                           monitor[i][header[5]]==0  && 
                           monitor[i][header[6]]==0  && 
                           monitor[i][header[7]]==0  && 
                           monitor[i][header[8]]==0  && 
                           monitor[i][header[9]]==0 ){
                       
                       console.log('no imprimir');
                            
                        }
                        else{
                              table += "<td>" + monitor[i][header[j]]  + "</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;
            }

        }
        
        
         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 getDataToObjectBar2(data,header){
                    var arrayReturn = new Array();
                    var data1 = new Array();
                    var data2 = new Array();    
                    var data3 = new Array();   
                    var data4 = new Array();
                    var data5 = new Array(); 
                    
                    var data6 = new Array();    
                    var data7 = new Array();   
                    var data8 = new Array();
                    var data9 = new Array(); 
                    
                    for(var i = 0; i< data.length; i++){
                        data1.push(parseFloat(data[i][header[1]]));
                        data2.push(parseFloat(data[i][header[2]]));
                        data3.push(parseFloat(data[i][header[3]])); 
                        data4.push(parseFloat(data[i][header[4]])); 
                        data5.push(parseFloat(data[i][header[5]])); 
                        
                        data6.push(parseFloat(data[i][header[6]]));
                        data7.push(parseFloat(data[i][header[7]])); 
                        data8.push(parseFloat(data[i][header[8]])); 
                        data9.push(parseFloat(data[i][header[9]])); 
                    }

                    arrayReturn.push({'name': header[1], 'data': data1});    
                    arrayReturn.push({'name': header[2], 'data': data2});
                    arrayReturn.push({'name': header[3], 'data': data3}) ; 
                    arrayReturn.push({'name': header[4], 'data': data4}) ;
                    arrayReturn.push({'name': header[5], 'data': data5}) ;
                    arrayReturn.push({'name': header[6], 'data': data6}) ;
                    arrayReturn.push({'name': header[7], 'data': data7}) ;
                    arrayReturn.push({'name': header[8], 'data': data8}) ;
                    arrayReturn.push({'name': header[9], 'data': data9}) ;

                    return arrayReturn;
                }

         function createChartBar2(render,categoria,arrayReturn,wd){
            //console.log(data);
            var options = {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: 'Monitor KPI'
                            },

                            xAxis: {
                                categories: 
                                   categoria
                                
                                
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: ''
                                }
                            },
                            legend: {
                                align: 'right',
                                verticalAlign: 'middle',
                                layout: 'vertical'
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: arrayReturn
                            };

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



    </script>
    








    <div class="container-fluid">

        <div class="row">

            <p class="text-center" style="font-size: 14pt;font-weight: bold;">
                MONITOR KPI GENERAL
            </p>
       </div>



        <div class="row">
                                            <div class="col-lg-2" id="parametros">

                                                <select id="ano">
                                                    <option value="">{{'Seleccione Año' | trans}}</option>

                                                </select>
                                            </div>
                                            <div class="col-lg-2" id="parametros">

                                                <select id="tipoBusqueda">
                                                    <option value=""> {{'Seleccione Fecha' | trans}}</option>

                                                    <option value="mes">{{'monitoriii.month' | trans}}</option>

                                                    <option value="ano">{{'monitoriii.year' | trans}}</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-2" id="parametros" >
                                                <select class="hide" id="mes">



                                                </select>
                                                <select class="hide" id="semana">



                                                </select>
                                            </div>
                                           

                                            <div class="col-lg-2" id="parametros" >
                                                <button class="btn btn-primary" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                                            </div>

                                            <div class="col-lg-2">


                                            </div>

                                        </div>
                    


        <div class="btn-group pull-right">
        <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> 
            <i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
        <ul class="dropdown-menu" role="menu">
        <li>
        <a href="#" onclick="$('#tabla1').tableExport({type: 'excel', escape: 'false'});">
            Excel

        </a>
        </li>
        </ul>
        </div>
        
        <div class="row" style="padding-top: 20px;padding-bottom: 20px">


            <div id="chart5" class="col-md-12">

            </div>


        </div>



        <div class="row" style="padding-top: 20px;padding-bottom: 20px">


            <div id="tabla1" class="col-md-12">

            </div>


        </div>
        





    </div>





{% endblock %}
{# empty Twig template #}