{% 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_msDetalle')}}',data, function(res){



                var monitor1=res.monitor1;
                
                $("#tabla1").empty();
               

               // var total1 = getTotal(monitor1,[1,2,3,4,5,6]);

                $("#tabla1").append(createTable(res.monitor1));
                

                $.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','Resueltas','Resueltas SLA','TOTAL'];
                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   
                           ){
                       
                       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;
            }

        }



    </script>
    








    <div class="container-fluid">

        <div class="row">

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



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

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

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

                                                <select class="form-control" 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" >
                                                <select class="form-control" id="region">
                                                    <option value="TODOS">{{'inbox.all' | trans}}</option>
                                                    <option value="Region 1">Region 1</option>
                                                    <option value="Region 2">Region 2</option>
                                                    <option value="Region 3">Region 3</option>
                                                    <option value="Region 4">Region 4</option>
                                                    <option value="Region 5">Region 5</option>
                                                    <option value="Region 6">Region 6</option>
                                                    <option value="Region 7">Region 7</option>
                                                    <option value="Region 8">Region 8</option>
                                                    <option value="Region 9">Region 9</option>
                                                </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="tabla1" class="col-md-12">

            </div>


        </div>
        
        
       

    </div>





{% endblock %}