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

{% endblock %}

{% block dashboard %}

    <style>
        .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 () {

            $("#generar").click(function(){
                  cargarDatos();
            });

        });


        function cargarDatos(){

            data = {};

            data['fechaInicio']=$('#fechaInicio').val();

            data['fechaFin']=$('#fechaFin').val();

            data['region'] = $("#region").val();

            data['contrato'] = $("#contrato").val();

            data['usuario'] = $("#usuario").val();

            $.getJSON('{{ path('reportemsmexico_reportemsMexicoDat') }}',data,function (dato) {
                
        
                
                var chart = dato;
                var tm2=chart.grafica1[0].WO;
                var tm3=chart.grafica1[1].WO;
                
                
                console.log(chart.grafica_g);

                 //Grafica general
                 if (chart.grafica_g.length>0){
                    var categoria5 = getDataToObject(chart.grafica_g,Object.keys(chart.grafica_g[0]),0,false); 
                  
                    var chart5 = getDataToObjectBar2(chart.grafica_g,Object.keys(chart.grafica_g[0]));
                }  
                if (chart.grafica_g.length>0) createChartBar2('chart5',categoria5,chart5,300); 
                else { $("#chart5").empty(); $("#chart5").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}

                //Grafica especifica
                    if (chart.grafica1.length > 0) {
                        var categoria1 = getDataToObject(chart.grafica1, Object.keys(chart.grafica1[0]), 0, false);

                     //   console.log(categoria1);
                        var chart1 = getDataToObjectBar(chart.grafica1, Object.keys(chart.grafica1[1]));

                      //  console.log(chart1);
                    }

                    if (tm2 > 0 ||tm3 > 0) createChartBar('chart1', categoria1, chart1); else {
                        $("#tabla").empty();
                        $("#chart1").empty();
                        $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    }



                });



            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 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[1]]));

                }

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


                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 createChartBar(render,categoria,data){
                var options = {
                    chart: {
                        renderTo: render,
                        type: 'column',

                        height: 350,
                        width: 600,
                    },
                    title: {
                        text: ''
                    },

                    colors: [
                         '#7cb5ec'
                    ],

                    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();

                                        generateModal('{{path('reportemsmexico_reportemsMexicoDetalle')}}?val='+this.x+'&fi='+$('#fechaInicio').val()+'&ff='+$('#fechaFin').val()+'&region='+$("#region").val()+'&contrato='+$("#contrato").val()+'&usuario='+$("#usuario").val());

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


                    series: data
                };

                return $('#' +render).highcharts(options);
            }
            
            function createChartBar2(render,categoria,data,wd){
            console.log(data);
            var options = {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Gráfica WO Creadas y Cerradas General'
                    },
                    
                    xAxis: {
                        categories: 
                           categoria
                        ,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: ''
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: data
                            };

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


        function generateModal(ruta){

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

            $.getJSON(ruta,function(data){

               // console.log(data.monitor[0]);

                if ( data.monitor.length == 0 ) {

                   // $('#myModal').modal('hide');
                   // $('#myModal .modal-body').isLoading('hide');
                    return false;
                }
                console.log(data.monitor[0].Status);
                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 class='id" +monitor[i].id_h + " '>";
                    for (var j = 0; j < header.length; j++) {

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

                table += "</table>";
                $('#tabla').html(table);
            });

        }



</script>






    <div class="container-fluid">
        
        

            <div class="row">

                <p class="text-center" style="font-size: 14pt;font-weight: bold;">
                    MONITOR WFM MS MEXICO WO CREADAS Y CERRADAS EN PERIODO
                </p>
            </div>


            <div class="row" style="padding-top: 40px;">
                <div class="col-md-2">
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control"  id="fechaInicio" />
                            <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                        </div>
                    </div>

                    <script type="text/javascript">
                        
                        $(function () {
                            var f = new Date();
                            var m=f.getMonth()+1;
                            var y=f.getFullYear()
                            
                           var dia=1;
                            var a =m+"/"+dia+"/"+y;
                            
                            
                            
                            $('#datetimepicker1').datetimepicker({
                              
                                format: 'L',
                                 defaultDate: a

                            });
                        });
                    </script>

                </div>

                <div class="col-md-2">
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' class="form-control" id="fechaFin"/>
                            <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                        </div>
                    </div>

                    <script type="text/javascript">
                        $(function () {
                            var f2 = new Date();
                           var fecha=(f2.getMonth() +1) + "/" + f2.getDate() + "/" + f2.getFullYear();
                          fa=fecha;
                            $('#datetimepicker2').datetimepicker({
                                format: 'L',
                              
                                defaultDate: fa

                            });
                        });
                    </script>
                </div>

                <div class="col-md-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 4">Region 5</option>
                        <option value="Region 6">Region 6</option>
                        <option value="Region 4">Region 7</option>
                        <option value="Region 4">Region 8</option>
                        <option value="Region 9">Region 9</option>
                    </select>
                </div>

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

                    <div>
                        <select class="form-control" id="contrato" name="Customer">
                            <option>Contrato*</option>

                            {% for dContrato in dataContrato %}
                                <option value="{{ dContrato.contrato}}"> {{ dContrato.contrato }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="col-md-2">
                    <div>
                        <select class="form-control" id="usuario" name="Customer">
                            <option>Usuario*</option>
                            {% for dUsuario in dataUsuario %}
                                <option value="{{ dUsuario.usuario}}"> {{ dUsuario.usuario }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

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


                </div>

            </div>
        
        <div class="row" style="padding-bottom: 20px">
            <div id='chart5'>
            </div>
        </div>

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

                </div>

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

                </div>
                
                <div  class="col-md-5">

                </div>

            </div>

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

                <div id="tabla">

                </div>

            </div>

    </div>




{% endblock %}