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

{% endblock %}


{% block dashboard %}
    <style>

        .double-scroll {
            width: 400px;
        }
        .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: #aa0001;
            border-color: #e06a70;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
        }

    </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/jquery.base64.js')}}" type="text/javascript"></script>




    <script>
        $(function () {
           

            $('.double-scroll').doubleScroll();
            $('#chart1').doubleScroll({
                resetOnWindowResize: true
            });



            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(){
                
                $("#tabla1").empty();
                
                if( $("#ano").val()!=""){
                    $.isLoading({
                      text:       "Loading"
                        });
                    getChart();
                }
                else{
                    console.log("a");
                }
            });
        });


        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 getChart() {
            
             $("#chart1").empty();
             $("#tabla1").empty();
             $("#tabla").empty();
             
            datos = {};

            datos['anio']=$('#ano').val();

            datos['mes']=$('#mes').val();

            datos['region'] = $("#region").val();
            
            
            $.getJSON('{{ path('reportemsmexico_msFm') }}',datos,function (data) {
                
               var chart=data;
               console.log(chart.grafico);
               
               if (chart.grafico.length>0){
                    var categoria = getDataToObject(chart.grafico,Object.keys(chart.grafico[0]),0,false); 
                  
                    var chart5 = getDataToObjectBar2(chart.grafico,Object.keys(chart.grafico[0]));
                    
                    // $("#tabla1").append(createTable(chart.tabla));
                }  
                
                if(chart.tabla.length>=1){
                     $("#tabla1").append(createTable(chart.tabla));
                }
                if (chart.grafico.length>0) createChartBar2('chart1',categoria,chart5,300); 
                else { $("#chart1").empty(); $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}


                $.isLoading("hide");
               
            });

        }


        function generateModal(ruta){
            $('#tabla').empty();

            $.getJSON(ruta,function(data){
                
                console.log(data);

                $('#tabla').isLoading();
                
                if ( data.monitor.length == 0 ) {

                   // $('#myModal').modal('hide');
                    //$('#myModal .modal-body').isLoading('hide');
                    return false;
                }

                var monitor = data.monitor,
                    header = Object.keys( data.monitor[0] ),
                    table = '<table class="table table-hover table-condensed table-responsive"><thead><tr class="bg-primary">';

                for (var j = 0; j < header.length; j++) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

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

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

                        table += "<td>" +  monitor[i][header[j]] +"</td>";
                    }
                    table += "</tr>";
                }

                table += "</table>";
                $('#tabla').isLoading('hide').html(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();              
                    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]]));                
                    }

                    arrayReturn.push({'name': header[1], 'data': data1});    
                    arrayReturn.push({'name': header[2], 'data': data2});
                    arrayReturn.push({'name': header[3], 'data': data3}) ;           

                    return arrayReturn;
                }
                
        
        function createChartBar2(render,categoria,data,wd){
                var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    height:400,
                    width:600
                },
                title: {
                    text: ''
                },
                colors: [
                    'green',
                    'orange',
                    'red'
                ],
                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;
                        }
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    //$('#myModal .modal-body').empty().isLoading();

                                    console.log(this.pointAttr[""].fill);
                                    console.log(this.category);
                                    console.log(this.x);
                                    console.log(this.y);

                                    generateModal('{{path('reportemsmexico_detalleDentrokpi')}}?categoria='+this.category+'&indicador='+this.pointAttr[""].fill+'&anio='+$('#ano').val()+'&mes='+$('#mes').val()+'&region='+$("#region").val());


                                    // $('#myModal').modal('show');
                                }
                            }
                        }
                    }
                },
                legend: {
                    reversed: true
                },


                series: data
            };

            return $('#' +render).highcharts(options);
        }        
        
        function createTable(monitor,total,nombreColTotal){


                var header = Object.keys(monitor[0]);
                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'>" + header[j] + "</th>"



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

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

                        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">

        <div class="row">

            <p class="text-center" style="font-size: 14pt;font-weight: bold;">
                {{'MONITOR FM EJECUCION' | trans}}
            </p>

        </div>


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

            <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="1">Region 1</option>
                    <option value="2">Region 2</option>
                    <option value="3">Region 3</option>
                    <option value="4">Region 4</option>
                    <option value="5">Region 5</option>
                    <option value="6">Region 6</option>
                    <option value="7">Region 7</option>
                    <option value="8">Region 8</option>
                    <option value="9">Region 9</option>
                </select>
            </div>
            
            <div class="col-lg-1">
                <button class="btn btn-primary" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
            </div>

        </div>


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

            <div class="col-md-6"  id="chart1">

            </div>
            
            <div class="col-md-6"  id="tabla1">

            </div>

        </div> <!-- end row1-->


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

            <div   id="tabla">

            </div>

        </div> <!-- end row1-->






    </div> <!-- end container-->







{% endblock %}