{% 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;
        }


    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
    
   var dat={}
  
 //////////////////////////////////////////////////////////////////
    
    
   $(function () {
              $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                    $("#cantidad").html(0);     
                   getChart();
                   
            });

           $('#Filtros_fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    onClose: function( selectedDate ) {
                             $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                    }
            }); 

            $('#Filtros_fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
            });
            
            $("#clear").click(function(){
                $("#region").val("TODOS");      
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");  
            });             

            $('#generar').trigger('click');

        });

        
        function reporteBateria(){

           var data = {};

               
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val();    
                data['pais'] = 36;                 
                
            $.getJSON('{{path ('MonitorSmartRsc_ReporteSmartRsc',{'idproyectos':idproyectos, 'idmodule':idmodule})}}',data, function (data) {

                    var bateria  = data.baterias;
                    dat=bateria;
                            if(bateria.length == 0){
                                    //console.log(dat.inicio);
                    $("#primer_reporte").empty();
                    $("#primer_reporte").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;

                            }
                    $("#cantidad").html(bateria.length);
                   
                    //$("#primer_reporte" ).slider();
                    
                    /////////////////////////////////////////////////////////
                    
                    $("#cantidad").html(bateria.length);
                   var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                     
                    
                    
                     var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                    // initial sort set using sortList option
                    $(".table1").tablesorter({
                        theme: 'blue',
                        // sort on the first column and second column in ascending order
                        widgets: ["zebra", "filter"],
                        widgetOptions: {
                            // extra css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter: '',
                            // If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows: false,
                            // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                            // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                            filter_hideFilters: false,
                            // Set this option to false to make the searches case sensitive
                            filter_ignoreCase: true,
                            // jQuery selector string of an element used to reset the filters
                            filter_reset: '.reset',
                            // Use the $.tablesorter.storage utility to save the most recent filters
                            filter_saveFilters: true
                        }
                    }).tablesorterPager(pagerOptions);
                    
                    
                    /////////////////////////////////////////////////////////
                    
                    $.isLoading("hide");
                });
       }
     
        
        
      
        function translate(translation,table){

            var translationHeader = Object.keys(translation);

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

                table = table.replace(translationHeader[i],translation[translationHeader[i]]);


            }

            return table;
        }
        
        
       
        
     

  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);
  }
  
  ///////////////////////////////////////////////////////////////////////////////////////////////777
  
   function getChart(){
                var data = {};
                 document.getElementById('Cchart1').style.display = '';
                 document.getElementById('Cchart6').style.display = 'none';
               
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val();    
                data['pais'] = {{idproyectos}};   
            
            $.getJSON('{{path ('MonitorSmartRsc_ReporteKPI')}}',data, function (data) {

                var chart = data.kpi;
               console.log(data.inicio);
                var calidad=data.calidad;
               
               
                 dat=chart;
                $("#message").empty();
                if (chart.length == 0){

                    $.isLoading("hide");

                    $("#message").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    return false;

                }
                var header =  Object.keys(chart[0]);
              
                
                var categoria = getDataToObject(chart,header,1,false); //en la primera osicion va el nombre del div,en la 3ra, la posicion del array donde viene la categoria   
                var chart1 = getDataToObject(chart,header,17,true);
               
                var chart2 = getDataToObject(chart,header,3,true);
                var chart3 = getDataToObject(chart,header,12,true);
                var chart4 = getDataToObject(chart,header,14,true);
                var chart5 = getDataToObject(chart,header,16,true);
                
                var chart8= getDataToObject(chart,header,9,true);
              
                createChart('chart1',categoria,chart1,"KPI");
                createChart('chart2',categoria,chart2,"LPU");
                createChart('chart3',categoria,chart3,"PRO:");
                createChart('chart4',categoria,chart4,"CH.IN");
                createChart('chart5',categoria,chart5,"CH.OUT");
               createChart('chart8',categoria,chart8,"Calidad");
                $("#table").empty().append(createTable(chart,[], false));
                $.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 createChart(render,categoria,data,label){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    
                    spacingBottom: 5,
                    spacingTop: 50,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: 200,
                    width: null,
                     
                },
                
                title: {
                    text: ''
                },
                subtitle: {
                    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+"%";
                        }
                    }
                },
                tooltip: {
                        enabled: true
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                    series : {

                        dataLabels : {

                            enable : true,
                            format : '{y} %'
                        },
                        events: {
                            click: function (event) {
                                //event.point.series[0].data = [[35]];
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'buttom',
                    floating: true,
                    x: 0,
                    y: 10
                },
                credits: {
                    enabled: false
                },
                series: [ {
                    showInLegend: false,
                    name: label+"%",
                    data: data,
                    color: {
                        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                        stops: [
                            [0, '#398235'],
                            [0.5, '#8ab66b'],
                            [1, '#c9de96']
                        ]
                    },

                    tag : 1

                }]
            };
            options.plotOptions.series.events = {
                click: function(event) {
                            
                    $.isLoading({
                        text:       "Loading"
                    });
                    getDetailKpi(event.point.category,dat,categoria);


                    function getDetailKpi(tecnico,datos,categoria2){
                             
                          var kpis={};  
                          
                         for(i=0;i<datos.length;i++)
                         {
                             
                             if(tecnico==datos[i]["tecnico"])
                             {
                                    var color = {
                                      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                                                stops: [
                                                    [0, '#398235'],
                                                    [0.5, '#8ab66b'],
                                                    [1, '#c9de96']
                                                ]
                                            };
                                  
                                   
                                  var chart = $('#chart1').highcharts();
                                  var chart2 = $('#chart2').highcharts();
                                  var chart3 = $('#chart3').highcharts();
                                  var chart4 = $('#chart4').highcharts();
                                  var chart5 = $('#chart5').highcharts();
                                  var chart8 = $('#chart8').highcharts();
                                  $('#chart1').scrollTop( 0 )
                                  $('#chart2').scrollTop( 0 )
                                  $('#chart3').scrollTop( 0 )
                                  $('#chart4').scrollTop( 0 )
                                  $('#chart5').scrollTop( 0 )
                                  $('#chart8').scrollTop( 0 )
                                  var categories = new Array();
                                  var header =print_r(datos[i],1);
                                  
                                 
                                  //categoriesKPI.push(hear);
                                  //var a=hear.s;
                                  categories.push(datos[i]["tecnico"]);
                                  var data = new Array();
                                  data.push(parseInt(datos[i]["Produccion"]));
                                  chart.series[0].remove();
                                  chart2.series[0].remove();
                                  chart3.series[0].remove();
                                  chart4.series[0].remove();
                                  chart5.series[0].remove();
                                  chart8.series[0].remove();
                                  chart.chartHeight = 150;

                                  chart2.chartHeight = 150;
                                  chart3.chartHeight = 150;
                                  chart4.chartHeight = 150;
                                  chart5.chartHeight = 150;
                                  chart8.chartHeight = 150;
                                  //options.series = series
                              
                                
                                   // createChart('chart5',categoria,chart5,"CH.OUT");
                                  createChart2(parseInt(datos[i]["% Produccion"]),parseInt(datos[i]["% Calidad"]),parseInt(datos[i]["% LPU"]),parseInt(datos[i]["% CHIN"]),parseInt(datos[i]["% CH_OUT"]));
                                  
                                    chart.xAxis[0].update({categories: categories,tickInterval:20},true);
                                  chart2.xAxis[0].update({categories:categories,tickInterval:20},true);
                                  chart3.xAxis[0].update({categories:categories,tickInterval:20},true);
                                  chart4.xAxis[0].update({categories:categories,tickInterval:20},true);
                                  chart5.xAxis[0].update({categories:categories,tickInterval:20},true);
                                  chart8.xAxis[0].update({categories:categories,tickInterval:20},true);
                                 // chart2.plotOptions.series.dataLabels.format = '{y}';
                                  
                
                                    chart.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);
                                    chart2.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);
                                  chart3.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);
                              
                                  chart4.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);
                                  chart5.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);
                              chart8.yAxis[0].update({labels: {

                                      overflow: 'justify',
                                      formatter: function() {
                                          return this.value;
                                      }
                                  }},true);

                                  chart.addSeries( { showInLegend: false,data:[parseInt(datos[i]["KPI"])],color: color}, false);
                                  
                                  
                                  chart2.addSeries( { showInLegend: false,data:[parseInt(datos[i]["LPU"])],color: color, dataLabels : {

                                      enable : true,
                                      format : '{y}'
                                  }}, false);
                                  chart3.addSeries( { showInLegend: false,data: [parseInt(datos[i]["Produccion"])],color: color,dataLabels : {

                                      enable : true,
                                      format : '{y}'
                                  }}, false);
                                  chart4.addSeries( { showInLegend: false,data: [parseInt(datos[i]["ch_in"])],color: color,dataLabels : {

                                      enable : true,
                                      format : '{y}'
                                  }}, false);
                                  chart5.addSeries( { showInLegend: false,data: [parseInt(datos[i]["ch_Out"])],color: color,dataLabels : {

                                      enable : true,
                                      format : '{y}'
                                  }}, false);
                               chart8.addSeries( { showInLegend: false,data:[parseInt(datos[i]["Tickets Aceptados"])],color: color, dataLabels : {

                                      enable : true,
                                      format : '{y}'
                                  }}, false);
                                  chart.redraw();
                                  chart2.redraw();
                                  chart3.redraw();
                                  chart4.redraw();
                                  chart5.redraw();
                                  chart8.redraw();
                                  $.isLoading("hide");
                                 
                            }
                            //arr= print_r(kpis[0]["tecnico"],3)
                            
                    }

               
               
                  }

                   



                    //chart.series[0].update({name: 'murphy'});
                }
            };
            return $('#' +render).highcharts(options);
        }
        function createTable(monitor,hide,check,total,nombreColTotal){

            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive" style="font-size: 6pt"> <thead>' +

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

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

                if( hide.indexOf(header[j]) === -1) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

                if(check && j ==0){
                    table += "<th class='text-center'>" + " " + "</th>"
                }


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

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


                for (var j = 0; j < header.length; j++) {
                    if( hide.indexOf(header[j]) === -1) {
                        table += "<td>" + monitor[i][header[j]] + "</td>";
                    }

                    if(check && j== 0){

                        table += "<td>"+ "<input type='checkbox' class='checkup' user='" + monitor[i][header[1]] + "'ticket='" + monitor[i][header[0]] + "'/>"+"</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 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 print_r(arr,level) {
  var dumped_text = "";
  if(!level) level = 0;
  var level_padding = "";
  for(var j=0;j<level+1;j++) level_padding += "    ";
    if(typeof(arr) == 'object') { //Array/Hashes/Objects 
      for(var item in arr) {
        var value = arr[item];
        if(typeof(value) == 'object') { //If it is an array,
          dumped_text += level_padding + "'" + item + "' ...\n";
          dumped_text += print_r(value,level+1);
        } else {
          dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
        }
      }
    } else { //Stings/Chars/Numbers etc.
    dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
  }
  return dumped_text;
 }
 
 
 
 
 
 
 
 
 
 
 function createChart2(pro,cal,lpu,ch_in,ch_out){
     document.getElementById('Cchart1').style.display = 'none';
     document.getElementById('Cchart6').style.display = '';
            var options = { chart: {
                    renderTo: 'chart6',
                    type: 'bar',
                    
                    spacingBottom: 5,
                    spacingTop: 50,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: 200,
                    width: null,
                     
                },
                
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories:  ['Producción','Calidad','Lpu', 'Check_in', 'Check_out'],
                    title: {
                        text: null
                    },
                    labels:{

                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {

                        overflow: 'justify',
                        formatter: function() {
                            return this.value+"%";
                        }
                    }
                },
                tooltip: {
                        enabled: true
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                    series : {

                        dataLabels : {

                            enable : true,
                            format : '{y} %'
                        },
                        events: {
                            click: function (event) {
                                //event.point.series[0].data = [[35]];
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'center',
                    verticalAlign: 'buttom',
                    floating: true,
                    x: 0,
                    y: 10
                },
                credits: {
                    enabled: false
                },
                series: [ {
                    showInLegend: false,
                     name: 'KPI',
                     data: [(pro*30/100),cal,(lpu*10/100),(ch_in*10/100),(ch_out*10/100)],
                    
                    color: {
                        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                        stops: [
                            [0, '#398235'],
                            [0.5, '#8ab66b'],
                            [1, '#c9de96']
                        ]
                    },

                    tag : 1

                }]
            };
             return $('#' +'chart6').highcharts(options);
        }
  ///////////////////////////////////////////////////////////////////////////////////////////////////
</script>
 <div class="container-fluid">
     
      <div class="col-lg-2" id="parametros">
            <div class="panel panel-primary">
                <!-- Default panel contents -->
                 <div class="panel-heading">Valores KPI</div>
                <div class="row">
                 <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%"><label>{{'Calidad' | trans}} 40%</label> </div>
                <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%"><label>Produccion 30%</label> </div>
               <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%"><label>LPU 10%</label> </div>
                <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%"><label>Check in 10%</label> </div>
                <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%"><label>Check out 10%</label> </div>
                </div>
            </div>
           <div class="panel panel-primary">
            <div class="panel-heading">Evaluando</div>
                  <div class='row'>
                    <div class="panel-body">
                        <div class='col-lg-12 '>
                            <select id="year" disabled style="width:100%">
                                <option value="1">Técnico</option>
                                <option value="2">Supervisor</option>
                            </select>
                        </div>
                    </div>

                  </div>
           </div>
            <div class="panel panel-primary" id="month">
                <!-- Default panel contents -->

                <div class="panel-heading">{{'Fecha' | trans}}</div>
                  <div class="row">
                    <div class="col-lg-11 col-md-offset-1"  style="margin-top: 1%">
                        <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                        <input style='width:90%' type="text" id="Filtros_fechaIni" value={{dateStart}}>
                    </div>
                    <div class="col-lg-12 col-lg-11 col-md-offset-1"  style="margin-top: 1%">
                        <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                        <input style='width:90%' type="text" id="Filtros_fechaFin" value={{dateEnd}}>
                        <br>
                         <br>

                    </div>
                 </div>
      </div>
        
             
                <div class="panel-footer col-lg-12" style="margin-top: 3%">
                 <div class="col-md-12"  style="margin-top: 1%">
                    <a  id="generar" class="btn btn-default">
                    <button class="reconocer" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                    </a>
                   
                        <div class="btn-group" style='margin-top:4px'>
                            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> Exportar Tabla</button>
                            <ul class="dropdown-menu" role="menu">
                                 <li><a href="#" onclick="$('#table').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                            </ul>
                        </div>
                </div>
                </div> 
         
        </div>   
             <div class="col-lg-10" id="message">

        </div>
        <div class="col-lg-10" id="chart">
            <div class="row">
              <div class="col-lg-6" style="display:true" id="Cchart1">
                  <div class="panel panel-primary" >
                      <div class="panel-heading">KPI</div>
                      <div class="panel-body fixed-panel" id="chart1" >

                      </div>
                  </div>

              </div>
                <div class="col-lg-6" style="display:none" id="Cchart6">
                  <div class="panel panel-primary">
                      <div class="panel-heading">KPI</div>
                      <div class="panel-body fixed-panel" id="chart6" >

                      </div>
                  </div>

              </div>
                  <div class="col-lg-6" style="display:true" id="Cchart8">
                  <div class="panel panel-primary" >
                      <div class="panel-heading">{{'Calidad' | trans | upper}}</div>
                      <div class="panel-body fixed-panel" id="chart8" >

                      </div>
                  </div>

              </div>
               <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">PRODUCCIÓN</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">CHECK IN</div>
                        <div class="panel-body fixed-panel" id="chart4">

                        </div>
                    </div>

                </div>
            </div> <!-- end row1-->
            <div class="row">
               

             
                  <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">CHECK OUT</div>
                        <div class="panel-body fixed-panel" id="chart5">

                        </div>
                    </div>

                </div>
                
                 <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">LPU</div>
                        <div class="panel-body fixed-panel" id="chart2">

                        </div>
                    </div>

                </div>
            </div> <!-- end row2-->
            <div class="row">
              
   
                <div class="col-lg-12">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">DATA</div>
                        <div class="panel-body fixed-panel" id="table">

                        </div>
                    </div>

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