{% 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: 200px;
        /* max-height: 800px; */
        overflow-y: auto;
    }
    #parametros .panel-body .row{

        padding-left: 5px;
    }
    #chart .panel-body {
        padding: 0px;
    }
    .btn-claro {
        color: #fff;
        /*background-color: #00569C;
        border-color: #3D59CA;*/
        background-color: #428bca;
        border-color: #3071a9;
    }
    .btn-claro:hover, .btn-claro:focus {
        color: #fcfcfc;
        text-decoration: none;
    }
    .tabla-detalle
    {
            text-transform: uppercase;
            font-size: 9px;
    }

    .disabledTab{
        pointer-events: none;
    }
    #menuTop { margin-top: 0px; }

    .form-inline .form-group { margin-bottom: 20px; }

    .form-group{ margin-left: 20px; }

    hr.style14 {
        border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }

    .hrHide { display: none; }

    .highcharts-container{width:100% !important;}


    table th{
        {#text-transform: uppercase;#}
        font-weight: bold;
        font-size: 12px;
    }

    table td{
        {#text-transform: uppercase;#}
        font-weight: normal;
        font-size: 12px;
    }

    .commentList {
        padding:0;
        list-style:none;
        max-height:100px;
        overflow:auto;
    }
    .commentList li {
        margin:0;
        margin-top:10px;
    }
    .commentList li > div {
        display:table-cell;
    }
    .commentText p {
        margin:0;
    }
    .sub-text {
        color:#aaa;
        font-family:verdana;
        font-size:11px;
    }
    /********************************************************************/
    .panel.with-nav-tabs .panel-heading{
        padding: 5px 5px 0 5px;
    }
    .panel.with-nav-tabs .nav-tabs{
        border-bottom: none;
    }
    .panel.with-nav-tabs .nav-justified{
        margin-bottom: -1px;
    }
    /*** PANEL PRIMARY ***/
    .with-nav-tabs.panel-primary .nav-tabs > li > a,
    .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
        color: #fff;
    }
    .with-nav-tabs.panel-primary .nav-tabs > .open > a,
    .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
    .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
        color: #fff;
        background-color: #3071a9;
        border-color: transparent;
    }
    .with-nav-tabs.panel-primary .nav-tabs > li.active > a,
    .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
        color: #428bca;
        background-color: #fff;
        border-color: #428bca;
        border-bottom-color: transparent;
    }
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
        background-color: #428bca;
        border-color: #3071a9;
    }
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
        color: #fff;
    }
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
        background-color: #3071a9;
    }
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
    .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
        background-color: #4a9fe9;
    }
    /********************************************************************/
    input {
        -webkit-appearance: textfield;
        background-color: white;
        color: #1b1b1b;
        font-weight: lighter;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 1px;
        border-width: 1px;
        border-style: solid;
        border-color: #1B1B1B !important;
        border-image: initial;
    }
    .dataTables_length select {
        width: 60px;
    }
    .dataTables_length label {
        font-weight: normal;
    }
    table.dataTable thead th{
        border-bottom: 1px solid #3071a9 !important;
    }
    table.dataTable tfoot th{
        border-top: 1px solid #3071a9 !important;
    }
    .dataTables_scroll{
        border: 1px solid #3071a9 !important;
    }
    div.dt-buttons {
        position: relative !important;
        float: right !important;
        margin-right: -5px !important;
    }
    .header_dt{
        color: #fff;
        background-color: #428bca;
        border-color: #3071a9 !important;
    }
    .highcharts-graph {
        filter: url(#glow);
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: 2px 5px !important;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid #ddd;
    }
    .Resizer {
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
    }

    .contentWindow{
        position: absolute;
        background-color: #B4E0DE;
    }

    .resizer{
        position: absolute;
        z-index: 100;
        background-color: #4E6160;
    }

    .verticalResizer{
        cursor: ns-resize;
    }

    .horizontalResizer{
        cursor: ew-resize;
    }
    .panel .panel-primary {
        min-height: 100px;
        max-height: 300px;
        height: 300px;
        overflow-y: scroll;
        overflow-x: scroll;
    }
    .nav-link.active {
        font-weight: bold;
    }

    .badge {
        font-size: 85%;
    }

    .gradiente {
      height: 100px;
      background-color: #428BCA; /* For browsers that do not support gradients */
      background-image: linear-gradient(0deg, #428BCA, #031A48);
    }

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

        };
        $(document).ready(function() {
            $('.double-scroll').doubleScroll();
            $('#primer_reporte').doubleScroll({resetOnWindowResize: true});
        });

        $(function () {
          $(".activar_5g").show();
             $("#generar").click(function(){
                   $.isLoading({
                        text:       "Loading"
                    });
                   //$("#cantidad").html(0);
                   reporteBateria();
            });


            $(".activar_ota_por_validar").click(function(){
              //alert($("#total_monitor").val());
                if ($("#total_monitor").val()>0){
                    $(".pager_otas_por_validar").show();
                            var pagerOptions1 = {
                                container: $(".pager"),
                                output: 'Rows : {endRow}',
                                fixedHeight: false,
                                removeRows: true,
                                cssGoto: '.gotoPage'
                            };
                            $(".table2").tablesorter({
                                theme: 'blue',
                                widgets: ["zebra", "filter"],
                                widgetOptions: {
                                    filter_cssFilter: '',
                                    filter_childRows: false,
                                    filter_hideFilters: false,
                                    filter_ignoreCase: true,
                                    filter_reset: '.reset',
                                    filter_saveFilters: true
                                }
                  }).tablesorterPager(pagerOptions1);
                    $(".pager").show();
                }else{
                    $(".pager_otas_por_validar").hide();
                }
            });
            $(".activar_ota_validadas").click(function(){
                resizeChart();
                if ($("#total_monitor_validadas").val()>0){
                          $(".pager_otas_validadas").show();
                          var pagerOptions2 = {
                              container: $(".pager"),
                              output: 'Rows : {endRow}',
                              fixedHeight: false,
                              removeRows: true,
                              cssGoto: '.gotoPage'
                          };
                            $(".table1").tablesorter({
                                theme: 'blue',
                                widgets: ["zebra", "filter"],
                                widgetOptions: {
                                    filter_cssFilter: '',
                                    filter_childRows: false,
                                    filter_hideFilters: false,
                                    filter_ignoreCase: true,
                                    filter_reset: '.reset',
                                    filter_saveFilters: true
                                }
                    }).tablesorterPager(pagerOptions2);
                    $(".pager").show();
                }else{
                    $(".pager_otas_validadas").hide();
                }
            });
            $(".activar_usage_by_pais").click(function(){
                resizeChart();
            });

            $('#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(){
                $("#pais").val();
                $("#region").val("TODOS");
                $("#evento").val("todos");
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
            });


            {%if idproyectos == 35 or idproyectos == 30 or idproyectos == 32 or idproyectos == 36 or idproyectos == 37 or idproyectos == 57%}
                   {%if idproyectos == 35 %} {%set idpais=1%} {%set pais='Guatemala'%}{%endif%}
                   {%if idproyectos == 30 %} {%set idpais=2%} {%set pais='Honduras'%}{%endif%}
                   {%if idproyectos == 32 %} {%set idpais=4%} {%set pais='Nicaragua'%}{%endif%}
                   {%if idproyectos == 36 %} {%set idpais=3%} {%set pais='El Salvador'%}{%endif%}
                   {%if idproyectos == 37 %} {%set idpais=5%} {%set pais='Costa Rica'%}{%endif%}
                   {%if idproyectos == 57 %} {%set idpais=6%} {%set pais='Panama'%}{%endif%}

                   $("#pais option").remove();
                   $("#pais").append('<option value={{idpais}}>{{pais}}</option>');
                    //Llenar Combos
                    $.isLoading({
                        text: "Loading"
                    });
                   //llenarCluster();
            {%endif%}

            $("#region").change(function(){
               if  ($("#region").val() != "TODOS"){
                        $.isLoading({
                                text: "Loading"
                        });
                      llenarCluster();
               }else{
                    $("#cluster option").remove(); $("#cluster").append('<option value="TODOS">ALL</option>');
               }
             //  $('#generar').trigger('click');
            });

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

            $("#cluster").change(function(){
              if  ($("#cluster").val() != "TODOS"){
                       $.isLoading({
                               text: "Loading"
                       });
                     llenarCountry();
              }else{
                   $("#pais option").remove(); $("#pais").append('<option value="TODOS">ALL</option>');
              }
            });

            $("#pais").change(function(){
              if  ($("#pais").val() != "TODOS"){
                       $.isLoading({
                               text: "Loading"
                       });
                     llenarProject();
              }else{
                   $("#project option").remove(); $("#project").append('<option value="TODOS">ALL</option>');
              }
            });

            $(document).on("click", ".downloadTemplate", function () {
              var data = {};
              data['fechaIni'] = $("#Filtros_fechaIni").val();
              data['fechaFin'] = $("#Filtros_fechaFin").val();
              data['region'] =  $("#region").val();
              data['cluster'] =  $("#cluster").val();
              data['pais'] =  $("#pais").val();
              data['project'] =  $("#project").val();
              data['idproyectos'] =  "" + {{idproyectos}};

              var ruta = `{{path('reporteusabilidad_DownloadUsabilidad')}}?fechaIni=${ data['fechaIni']}&fechaFin=${ data['fechaFin']}&region=${ data['region']}&cluster=${ data['cluster']}&pais=${ data['pais']}&project=${data['project']}&idproyectos=${data['idproyectos']}`
              //window.open(ruta);
              $('#downloadTemplate').attr("href",ruta);

              //alert(ruta);
            });

        });

        function myFunction(index , idelment) {
          // Declare variables
          var input, filter, table, tr, td, i, tmpstr;

          input = document.getElementById('id'+index+'id');
         //   index =index-1;
          filter = input.value.toUpperCase();
          table = document.getElementById("tabla1");
          tr = table.getElementsByTagName("tr");

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

           td = tr[i].getElementsByTagName("td")[index];

            if (td) {
                tmpstr = td.innerHTML.toUpperCase();
              if (tmpstr.search(filter) > -1) {
                       tr[i].style.display = "";
              } else {
                  if(i>1)
                  {
                      tr[i].style.display = "none";
                  }

              }
            }
          }
        }

function reporteBateria(){
    $(".activar_ota_por_validar").addClass('active');
    $(".activar_ota_validadas").removeClass('active');
    $(".activar_usage_by_pais").removeClass('active');

    $("#otas_por_validar").addClass('active');
    $("#otas_por_validadas").removeClass('active');
    $("#usage_by_pais").removeClass('active');
    otas_por_validadas
    var data = {};
    //data['region'] = $("#region").val();
    //data['pais'] = $("#pais").val();
    data['fechaIni'] = $("#Filtros_fechaIni").val();
    data['fechaFin'] = $("#Filtros_fechaFin").val();
    data['region'] =  $("#region").val();
    data['cluster'] =  $("#cluster").val();
    data['pais'] =  $("#pais").val();
    data['project'] =  $("#project").val();
    data['idproyectos'] =  "" + {{idproyectos}};

$.getJSON('{{path('reporteusabilidad_getReporteUsabilidad')}}',data, function (data) {

        var bateria  = data.bateria;
        var bateria1  = data.bateria1;
        var porcent = data.porcent;
        var chart0 = data.chart0;
        var chart1 = data.chart1;
        var chart2 = data.chart2;
        var chart = data;
        var flag = true;

        if (chart.chart1.categories.length > 0){
            $("#chart1").empty();
            url = "{{ path('aspir_detalle_tabla_rusia') }}";
            var series = getDataToObjectSerieAll(chart.chart1.data, Object.keys(chart.chart1.data[0]));
            createChartColumnTargetPorcenteMenorVeinte('chart1', chart.chart1.categories, series, 'USAGE BY COUNTRY',
                    null, null, null, null,null,"{{ path('aspir_detalle_tabla_rusia') }}", chart.chart1.data,parametros,15,'Rob=15%',17,'Com=17%',20,'Str=20%');
        }else{
            if ($("#chart1").highcharts()!=undefined){
               $("#chart1").highcharts().destroy();
            }
            $("#chart1").empty().append('<div class="alert-black alert-warning" style="width: 100%" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
        }

        $("#total_monitor").val(bateria.length);
        $("#total_monitor_validadas").val(bateria1.length);

        if(bateria.length == 0){
          $(".pager_otas_validadas").hide();
          $("#reporte_otas_por_validar").empty();
          $("#reporte_otas_por_validar").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
          $.isLoading("hide");
          //return false;

          if(chart1.length == 0){
              $("#chart1").empty();
              $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
              $.isLoading("hide");
              $("#inicio").show();
              flag = false;

          }if(chart2.length == 0){
              $("#chart2").empty();
              $("#chart2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
              $.isLoading("hide");
              $("#inicio").show();
              flag = false;

          }

        }else {

          /*if(flag){

              createColumnChart('chart1','USAGE BY COUNTRY',chart1);


              var total = getTotal(chart1,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],2);
              total.shift();
              var header = Object.keys(chart1[0]);
              var AuxArray = new Array();
              for(var i=1;i<header.length;i++){

                  AuxArray.push({'estado':header[i],'Sitios': total[i-1]})
              }

          }*/

          if(flag){

              createColumnChart2('chart2','USAGE BY MODULE',chart2);


              var total = getTotal(chart2,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],2);
              total.shift();
              var header = Object.keys(chart2[0]);
              var AuxArray = new Array();
              for(var i=1;i<header.length;i++){

                  AuxArray.push({'estado':header[i],'Sitios': total[i-1]})
              }

          }


          //$("#cantidad").html(bateria.length);
          $("#reporte_otas_por_validar").empty().append(createTable(bateria,'','',2));
           $.isLoading("hide");
           //$(".pager_otas_por_validar").hide();

           var pagerOptions1 = {
               container: $(".pager"),
               output: 'Rows : {endRow}',
               fixedHeight: false,
               removeRows: true,
               cssGoto: '.gotoPage'
           };
          $(".table2").tablesorter({
              theme: 'blue',
              widgets: ["zebra", "filter"],
              widgetOptions: {
                  filter_cssFilter: '',
                  filter_childRows: false,
                  filter_hideFilters: false,
                  filter_ignoreCase: true,
                  filter_reset: '.reset',
                  filter_saveFilters: true
              }
          }).tablesorterPager(pagerOptions1);
          $(".pager").show();
        }


        if(bateria1.length == 0){

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

          if(chart1.length == 0){
              $("#chart3").empty();
              if ($("#chart3").highcharts()!=undefined){
                    $('#chart3').highcharts().reflow();
              }
              $("#chart3").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
              resizeChart();
              $.isLoading("hide");
              $("#inicio").show();
              flag = false;

          }

        }else {

          if(flag){

              createColumnChart3('chart3','USAGE BY USER',chart0,porcent);


              var total = getTotal(chart0,[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],2);
              total.shift();
              var header = Object.keys(chart0[0]);
              var AuxArray = new Array();
              for(var i=1;i<header.length;i++){

                  AuxArray.push({'estado':header[i],'Sitios': total[i-1]})
              }

          }

          //$("#cantidad").html(bateria.length);
          $("#reporte_otas_validadas").empty().append(createTable(bateria1,'','',1));
          resizeChart();

           $.isLoading("hide");


        }

    });
}


       function createArrayToChart(chart,text)
       {
           var header = Object.keys(chart[0]);
           var x = new Array();
           var y = new Array();


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

                x.push(chart[i][header[0]]);

           }

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

               y.push({name:"",data:[]});
           }


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

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

                   if(i == 0){

                       y[j-1].name = header[j];
                   }
                  y[j-1].data.push(parseFloat(chart[i][header[j]]));
               }

           }



           return new Array(x,y);

       }

       function createArrayToPieChart(chart)
       {
           if(chart.length == 0) return false;
           var auxArray = new Array();
           var header = Object.keys(chart[0]);
           for(var i=0;i<chart.length;i++){



                   auxArray.push({'name':chart[i][header[0]],y:parseFloat(chart[i][header[1]])});



           }

           return auxArray;
       }

       function createColumnChart(renderTo,title,chart)
       {
           var data = createArrayToChart(chart);
           Highcharts.setOptions({
              colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c"],
          });

           var segundaGraficaOpt = {
               chart: {
                   type: 'column',
                   renderTo: renderTo,
                   borderColor: '#428bca',
                   borderWidth: 1,
                   zoomType: 'xy',
                   backgroundColor: {
                       linearGradient: [0, 0, 0, 450],
                       stops: [
                           [0, 'rgba(66, 139, 202, 0.3)'], //start
                           [0.5, '#ffffff'], // middle
                           [1, 'rgba(66, 139, 202, 0.2)'] //end
                       ]
                   }

               },

               title: {
                   text: title
               },

               xAxis: {
                   categories: data[0],
                   labels: {
                    rotation: -45
                   },
                   crosshair: true
               },

               yAxis: {

                   title: {
                       text: ''
                   },
                   plotLines:[]
               },

               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:.0f}</b></td></tr>',
                   footerFormat: '</table>',
                   shared: true,
                   useHTML: true
               },

               plotOptions: {
                   column: {
                      cursor: 'pointer',
                      //series: data[1],
                      events:
                      {
                        click: function(e) {
                          var modulo = e.point.category;
                          var estatus = this.name;
                          var title = "USAGE BY COUNTRY";
                          var subtitle = "";
                          var ord = null;
                          //console.log(e.point.series.name);
                          //console.log(e.point.category);
                          alert(modulo);
                          alert(estatus);
                          generateModal(modulo,true,title,subtitle,ord);
                        }
                      },
                       pointPadding: 0.2,
                       borderWidth: 0,
                       depth: 40,
                       dataLabels: {
                           enabled: true,
                           crop: false,
                           overflow: 'none'
                       }
                   }
               },

               series: data[1]
           };
            //console.log("data[1]",data[1],"data",data);
           new Highcharts.Chart(segundaGraficaOpt)
       }

       function createColumnChart2(renderTo,title,chart)
       {
           var data = createArrayToChart(chart);
           Highcharts.setOptions({
              colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c"],
          });

          //var porcentaje0 = data[1];
          var porcentaje = data[1][0].data;
          //var name = data[1].name;
          //console.log(data);
          ///console.log(porcentaje0);
          //console.log(porcentaje);
          //console.log(name);
          //console.log(data[1]->data);
          console.log(data[1][0].data);
          if (porcentaje!="" && porcentaje!=undefined){
              var yMax = porcentaje.reduce(function(a, b) {
                  return Math.max(a, b);
              });
              if (yMax==0){
                  yMax=10;
              }
          }else{
              var yMax=10;
          }

           var segundaGraficaOpt = {
               chart: {
                   type: 'column',
                   renderTo: renderTo,
                   borderColor: '#428bca',
                   borderWidth: 1,
                   zoomType: 'xy',
                   backgroundColor: {
                       linearGradient: [0, 0, 0, 450],
                       stops: [
                           [0, 'rgba(66, 139, 202, 0.3)'], //start
                           [0.5, '#ffffff'], // middle
                           [1, 'rgba(66, 139, 202, 0.2)'] //end
                       ]
                   }

               },

               title: {
                   text: title
               },

               xAxis: {
                   categories: data[0],
                   /*labels: {
                    rotation: -45
                },*/
                   crosshair: true
               },

               yAxis: {

                   title: {
                       text: ''
                   },
                   //min: -2,
                   //tickPositions: [1,2,3,4,5,yMA],
                   //opposite: true,
                   plotLines:[]
               },

               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:.0f}</b></td></tr>',
                   footerFormat: '</table>',
                   shared: true,
                   useHTML: true
               },

               plotOptions: {
                   column: {
                      cursor: 'pointer',
                      //series: data[1],
                      events:
                      {
                        click: function(e) {
                          var modulo = e.point.category;
                          var estatus = this.name;
                          var title = "USAGE BY MODULE";
                          var subtitle = "";
                          var ord = null;
                          //console.log(e.point.series.name);
                          //console.log(e.point.category);
                          //alert(title);
                          //alert(modulo);
                          generateModal(modulo,true,title,subtitle,ord);
                        }
                      },
                       pointPadding: 0.2,
                       borderWidth: 0,
                       depth: 40,
                       dataLabels: {
                           enabled: true,
                           crop: false,
                           overflow: 'none'
                       }
                   }
               },

               series: data[1]
           };
            //console.log("data[1]",data[1],"data",data);
           new Highcharts.Chart(segundaGraficaOpt)
       }


                function createColumnChart3(renderTo,title,chart)
                {
                    var data = createArrayToChart(chart);
                    Highcharts.setOptions({
                       colors: ["#2a587f", "#434348", "#90ed7d", "#f7a35c"],
                   });

                    var segundaGraficaOpt = {
                        chart: {
                            type: 'column',
                            renderTo: renderTo,
                            borderColor: '#428bca',
                            borderWidth: 1,
                            zoomType: 'xy',
                            backgroundColor: {
                                linearGradient: [0, 0, 0, 450],
                                stops: [
                                    [0, 'rgba(66, 139, 202, 0.3)'], //start
                                    [0.5, '#ffffff'], // middle
                                    [1, 'rgba(66, 139, 202, 0.2)'] //end
                                ]
                            }

                        },

                        title: {
                            text: title
                        },

                        xAxis: {
                            categories: data[0],
                            labels: {
                             rotation: -45
                            },
                            crosshair: true
                        },

                        yAxis: {

                            title: {
                                text: ''
                            },
                            plotLines:[]
                        },

                        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:.0f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },

                        plotOptions: {
                            column: {
                               cursor: 'pointer',
                               //series: data[1],
                               events:
                               {
                                 click: function(e) {
                                   var modulo = e.point.category;
                                   var estatus = this.name;
                                   var title = "USAGE BY USER";
                                   var subtitle = "";
                                   var ord = null;
                                   //console.log(e.point.series.name);
                                   //console.log(e.point.category);
                                   //alert(asp);
                                   //alert(estatus);
                                   generateModal(modulo,true,title,subtitle,ord);
                                 }
                               },
                                pointPadding: 0.2,
                                borderWidth: 0,
                                depth: 40,
                                dataLabels: {
                                    enabled: true,
                                    crop: false,
                                    overflow: 'none'
                                }
                            }
                        },

                        series: data[1]
                    };
                     //console.log("data[1]",data[1],"data",data);
                    new Highcharts.Chart(segundaGraficaOpt)
                }

               function createPieChart(renderTo,title,chart)
               {
                   var data = createArrayToPieChart(chart);
                   //console.log(data);
                       var pie = {
                           chart: {
                               plotBackgroundColor: null,
                               plotBorderWidth: null,
                               plotShadow: false,
                               type: 'pie',
                               renderTo: renderTo
                           },
                           title: {
                               text: title
                           },
                           tooltip: {
                               pointFormat: '{series.name}: <b>{point.y:.0f}</b>'
                           },
                           plotOptions: {
                               pie: {
                                   allowPointSelect: true,
                                   cursor: 'pointer',
                                   dataLabels: {
                                       enabled: true,
                                       format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                       style: {
                                           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                       }

                                   },
                                   showInLegend: true
                               }
                           },
                           series: [{
                               name: 'Sites',
                               colorByPoint: true,
                               data: data
                           }]
                       };
                   new Highcharts.Chart(pie);
               }

         function getDataToObjectSerieAll(data, header){
             var arrayReturn = new Array();
             var data1 = new Array();
             var menor = 1000;
             var mayor = -1;

             for (var i = 0; i < header.length; i++){
                 var dataAux = new Array();
                 if (header[i].indexOf('_cat_') < 0){
                     for (var j=0; j<data.length; j++){
                         var valor = parseFloat(data[j][header[i]]);
                         dataAux.push(valor);
                         if (valor < menor){
                             menor = valor;
                         }
                         if (valor > mayor){
                             mayor = valor;
                         }
                     }
                     arrayReturn.push({'name': header[i], 'data': dataAux, 'dataLabels': {'enabled': true}});
                 }
             }
             data1[0] = arrayReturn;
             data1[1] = menor;
             data1[2] = mayor;
             return data1;
         }

        function generateModal(modulo,numerar, title, subtitle, orderArray)
        {

            var name = modulo.name;
            var title_ = name!=null ? title.trim() : "";
            var ordArr = orderArray!=null ? orderArray : null;
            $("#datatableModalDetalle").empty().isLoading();
            $('#myModal .punto-grafica').empty().hide();
            $('#myModal .modal_detalle_titulo').empty();
            if (name != null)
            {
                $('#myModal .modal_detalle_titulo').html(name);
                title_ = title_.replace(' ','_');
                title_ = title_.replace('-','');
                title_ = title_.replace(' ','');
            }
            else
            {
                $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
                name = '{{'monitorii.detail' | trans }}';
                title_ = title_.replace(' ','_');
                title_ = title_.replace('-','');
                title_ = title_.replace(' ','');
            }
            if (subtitle != null)
            {
                $('#myModal .punto-grafica').html(subtitle).show();
            }

            var data = {};
            data['fechaIni']  = $("#Filtros_fechaIni").val();
            data['fechaFin']  = $("#Filtros_fechaFin").val();
            data['region']  =  $("#region").val();
            data['cluster']  =  $("#cluster").val();
            data['pais']  =  $("#pais").val();
            data['project']  =  $("#project").val();
            data['idproyectos'] =  "" + {{idproyectos}};

            if (title == 'USAGE BY MODULE') {
              data['modulo'] = modulo.name;
              $.getJSON('{{path('reporteusabilidad_reporteUsabilidadDetalle')}}',data, function (data)
              {
                var bateria  = data.bateria;

                  if (bateria.length > 0){
                      var total_general = 0;
                      var porcentaje_ohs = 0;
                      var total_registros = 0;
                      var col = createTableDTDetail(Object.keys(bateria[0]),'tableModalDetalle', 'datatableModalDetalle',title_,total_registros);
                      buildDatatablePrin('tableModalDetalle',col,bateria,title_,ordArr);
                      $('[data-toggle="popover"]').popover('destroy');
                      $('[data-toggle="popover"]').popover({
                          template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
                      }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
                  }else{
                      $("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                  }
                  $("#datatableModalDetalle").isLoading('hide');
              });

            }else if (title == 'USAGE BY USER') {
              data['modulo'] = modulo.name;
              $.getJSON('{{path('reporteusabilidad_reporteUsabilidadDetalle2')}}',data, function (data)
              {
                var bateria  = data.bateria;

                  if (bateria.length > 0){
                      var total_general = 0;
                      var porcentaje_ohs = 0;
                      var total_registros = 0;
                      var col = createTableDTDetail(Object.keys(bateria[0]),'tableModalDetalle', 'datatableModalDetalle',title_,total_registros);
                      buildDatatablePrin('tableModalDetalle',col,bateria,title_,ordArr);
                      $('[data-toggle="popover"]').popover('destroy');
                      $('[data-toggle="popover"]').popover({
                          template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
                      }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
                  }else{
                      $("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                  }
                  $("#datatableModalDetalle").isLoading('hide');
              });

            }else if (title == 'USAGE BY COUNTRY') {
              data['modulo'] = modulo;
              $.getJSON('{{path('reporteusabilidad_reporteUsabilidadDetalle3')}}',data, function (data)
              {
                var bateria  = data.bateria;
                  if (bateria.length > 0){
                      var total_general = 0;
                      var porcentaje_ohs = 0;
                      var total_registros = 0;
                      var col = createTableDTDetail(Object.keys(bateria[0]),'tableModalDetalle', 'datatableModalDetalle',title_,total_registros);
                      buildDatatablePrin('tableModalDetalle',col,bateria,title_,ordArr);
                      $('[data-toggle="popover"]').popover('destroy');
                      $('[data-toggle="popover"]').popover({
                          template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
                      }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
                  }else{
                      $("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
                  }
                  $("#datatableModalDetalle").isLoading('hide');
              });

            }

            $('#myModal').modal('show');
        }

        function createTableDTDetail(data, tableRender, dtRender, type, total_registros){
           var strHeader = "";
           var strFooter="";
           var columns = [];
           var col_issues = 8;
           var strType = (type == null ? "" : type);
           var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
                   '<thead><tr class="header_dt">';
           $('#' + dtRender).empty();
           //console.log('strType',strType);
           switch(strType.toLocaleUpperCase()){
               case 'QP':
               case 'QP_DETAIL':
                   col_issues = 8;
                   break;
               case 'OHS':
               case 'OHS_DETAIL':
                   col_issues = 9;
                   break;
               case 'FTR':
                   col_issues = 8;
                   break;
               case 'FTR_ASP':
                   col_issues = 8;
                   break;
           }
           for (var i=0; i<data.length; i++){
               var title = data[i];
               var t = title.replace(/_/g,' ');
               t = title.replace('#','');
               var visible = title.startsWith('_') ? false : true;
               strHeader += '<th class="text-center">' + t + '</th>';
               if (title=="USAGE BY MODULE" || title=="Not Ok" || title=="ISSUES ERROR" || title=="SYSTEM FAULT FOUND" || title=="Total Corrected"){
                   columns.push({data: data[i], title: t, visible:visible,
                       render: function ( dato, type, row ) {
                           if (dato>0){
                               var kpi="";
                               var popup_title = "";
                               var strIssuesText = "";
                               var url= "";
                               if (row.hasOwnProperty('_ISSUES')){
                                   kpi='ftr';
                                   popup_title = 'Issues';
                                   var issues = row['_ISSUES'];
                                   var arrIssues = issues == null ? null : issues.split("<br>");
                                   if (arrIssues!=null){
                                       var strIssuesHtml = "<ol>";
                                       if (Array.isArray(arrIssues)){
                                           for (var i=0; i<arrIssues.length; i++){
                                               strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
                                               strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
                                           }
                                       }else{
                                           strIssuesHtml = issues;
                                       }
                                       strIssuesHtml += "</ol>";
                                   }
                               }
                               if (type==='display' && strIssuesText!=''){
                                   return '<a href="javascript://"  data-toggle="popover" data-title="<b>Issues</b>" ' +
                                           'data-container="body" data-placement="left" data-html="true" ' +
                                           'data-trigger="focus" ' +
                                           'data-content="' + strIssuesHtml  + '"' +
                                           '>' + dato + '</a>';
                               }else{
                                   return dato;
                               }
                           }
                           return dato;
                       }
                   });
               }else{
                   columns.push({data: data[i], title: t, visible:visible});
               }
           }
           strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
           $('#' + dtRender).empty();
           $('#' + dtRender).html(strTable);
           $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
           $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
               var title = $(this).text();
               $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
               $( 'input', this ).on( 'keyup change', function () {
                   if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                       var table = $('#' + tableRender).DataTable();
                       if ( table.column(i).search() !== this.value ) {
                           table
                                   .column(i)
                                   .search( this.value )
                                   .draw();
                       }
                   }
               } );
           } );
           return columns;
        }

        //configuracion de los datatable
        function buildDatatablePrin(render, columnas, data,suffix_export,orderArray)
        {
            var a=[];b=[];
            var Defs = [];
            var ini = (columnas.length) -5;
            var kpi = '';
            if (render=='table_IssuesExecuted'){
                kpi = 'Issues Executed';
            }else if(render=='table_ExecutedNotExecuted'){
                kpi = 'Reasons Not Executed';
            }

            for (var i=0; i<=(columnas.length - 1); i++){
                a.push(i);
            }
            Defs.push({ targets: a, className: 'dt-body-center' });
            for (var i=0; i<=(columnas.length - 1); i++){
                if (columnas[i].visible){
                    b.push(i);
                }
            }
            table = $('#'+render).DataTable( {
                dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                data:data,
                "deferRender": false,
                "processing": true,
                "language": {
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                //"order": [[ 0, "asc" ]],
                "ordering": false,
                columns: columnas,
                columnDefs: Defs,
                lengthMenu: [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Table Excel ' + kpi,
                        exportOptions: {
                            columns: b,
                            orthogonal: 'export'
                        },
                        title: 'Usage' + kpi
                    }
                ],
                drawCallback: function() {
                    $('[data-toggle="popover"]').popover();
                }
            } );
        }

        function createChartColumnTargetPorcenteMenorVeinte(render, categoria, series, title, w,
                                   inicio, fin, pais, orderArray, path, rawData,parametros,
                                   target11Value,target11Name,
                                   target12Value,target12Name,
                                   target13Value,target13Name)
        {
            var arrayReturn = new Array();
            var data = new Array();
            var subtitle = '';
            if (render=='chart1'){
                if (series.length>0){
                    $.each(series, function(key, value) {
                        $.each(value, function(k, v) {
                               data.push({"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                        });
                    });
                }
            }



            var table_dt = "";
            var dt = "";
            var posProy = 0;
            var col = 4;
            var rotation = 0;
            var step = Math.ceil(rawData.length/50);
            var kpi = "";
            var height = 250;
            switch (render){
                case 'grafico_OHSRatio':
                    table_dt = '';
                    dt = '';
                    posProy = 2;
                    kpi = "detalle_horas";
                    break;
                case 'grafico_QARatio':
                    table_dt = '';
                    dt = '';
                    posProy = 2;
                    kpi = "detalle_horas";
                    break;

            }
            var options = {
                chart: {
                    //height: height,
                    borderColor: '#428bca',
                    borderWidth: 1,
                    zoomType: 'xy',
                    backgroundColor: {
                        linearGradient: [0, 0, 0, 450],
                        stops: [
                            [0, 'rgba(66, 139, 202, 0.3)'], //start
                            [0.5, '#ffffff'], // middle
                            [1, 'rgba(66, 139, 202, 0.2)'] //end
                        ]
                    }
                  },
                  credits: {
                    enabled: false
                  },
                  title: {text: title},
                  subtitle: {
                    text: subtitle
                  },
                  xAxis: {
                    categories: [],
                    crosshair: true,
                    labels: {
                        autoRotation: -50,//[-50, -50, -50, -50, -50]
                        formatter: function () {
                            if(this.value.length > 15){
                                return this.value.substring(0, 15) + '...';
                            }
                            return this.value;
                        }
                        //rotation: -50,
                    },
                    overflow: 'justify',
                    scrollbar: {
                        enabled: false
                    }
                },
                yAxis: [{
                    title: {
                        text: 'Qty'
                    },
                    //max: 100,
                    min: 0,
                    labels: {
                        overflow: 'justify'
                    },
                }],
                series: data
            };

            var formato = '{point.y}';
            // OPCIONAL: El path para la tabla detallada
            if (path != null){
                options['plotOptions'] =
                {
                    series:
                    {
                        cursor: 'pointer',
                        borderWidth: 0,
                        dataLabels:
                        {
                            enabled: true,
                            formatter: function () {
                                if (this.series.name=='% OHS' || this.series.name=='%QA Ratio'){
                                    return this.point.y + '%';
                                }else{
                                    return this.point.y;
                                }
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -40,
                            y: 80,
                            floating: true,
                            borderWidth: 1,
                            backgroundColor: '#FFFFFF',
                            shadow: true
                        },
                        point:
                        {
                            events:
                            {
                                click: function (e){
                                    if (rawData != null){
                                        var row = rawData[this.x];
                                        //console.log(row,rawData);
                                        var title = "USAGE BY COUNTRY";
                                        var subtitle = "";
                                        var ord = null;
                                        var modulo = row._cat_modulo;
                                        var pais = row._cat_pais;
                                        var selected_serie = this.series.name;
                                        var param = pais.concat('-',modulo);
                                        //alert(modulo);
                                        //alert(pais);
                                        //alert(param);
                                        generateModal(param,true,title,subtitle,ord);
                                    }else{
                                        alert('Data Not Found');
                                    }
                                }
                            }
                        }
                    }
                };
            }
            var num = categoria.length;
            for (var k=0; k<rawData.length; k++){
                var hasThisCategory = false;
                var categoryIndex = -1;
                var categoryPath = options.xAxis.categories;
                var lastCat = categoria[categoria.length - 1]['sql_name'];
                if (categoria.length>=1){ //Si hay 2 o mas categorias
                    // I. level of categories
                    if (categoria.length >= 1) {
                        Highcharts.each(categoryPath, function(category, i) {
                            if (category.name === rawData[k][categoria[0]['sql_name']]) {
                                hasThisCategory = true;
                                categoryIndex = i;
                            }
                        });
                        if (!hasThisCategory) {
                            categoryPath.push({
                                name: rawData[k][categoria[0]['sql_name']],
                                categories: []
                            });
                        }
                        if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                    }

                    if (categoria.length >= 3){
                        // II. level of categories
                        categoryPath = categoryPath[categoryIndex].categories;
                        hasThisCategory = false;
                        categoryIndex = -1;
                        Highcharts.each(categoryPath, function(category, i) {
                            if (category.name === rawData[k][categoria[1]['sql_name']]) {
                                hasThisCategory = true;
                                categoryIndex = i;
                            }
                        });
                        if (!hasThisCategory) {
                            categoryPath.push({
                                name: rawData[k][categoria[1]['sql_name']],
                                categories: []
                            });
                        }
                        if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                    }

                    if (categoria.length >=4){
                        // III. level of categories
                        categoryPath = categoryPath[categoryIndex].categories;
                        hasThisCategory = false;
                        categoryIndex = -1;
                        Highcharts.each(categoryPath, function(category, i) {
                            if (category.name === rawData[k][categoria[2]['sql_name']]) {
                                hasThisCategory = true;
                                categoryIndex = i;
                            }
                        });
                        if (!hasThisCategory) {
                            categoryPath.push({
                                name: rawData[k][categoria[2]['sql_name']],
                                categories: []
                            });
                        }
                        if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                    }

                    if (categoria.length >=5){
                        // IV. level of categories
                        categoryPath = categoryPath[categoryIndex].categories;
                        hasThisCategory = false;
                        categoryIndex = -1;
                        Highcharts.each(categoryPath, function(category, i) {
                            if (category.name === rawData[k][categoria[3]['sql_name']]) {
                                hasThisCategory = true;
                                categoryIndex = i;
                            }
                        });
                        if (!hasThisCategory) {
                            categoryPath.push({
                                name: rawData[k][categoria[3]['sql_name']],
                                categories: []
                            });
                        }
                        if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                    }
                    if (categoria.length >=6){
                        // V. level of categories
                        categoryPath = categoryPath[categoryIndex].categories;
                        hasThisCategory = false;
                        categoryIndex = -1;

                        Highcharts.each(categoryPath, function(category, i) {
                            if (category.name === rawData[k][categoria[4]['sql_name']]) {
                                hasThisCategory = true;
                                categoryIndex = i;
                            }
                        });
                        if (!hasThisCategory) {
                            categoryPath.push({
                                name: rawData[k][categoria[4]['sql_name']],
                                categories: []
                            });
                        }
                        if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                    }
                    // Last level of categories
                    if (categoria.length >1) {
                        categoryPath = categoryPath[categoryIndex].categories;
                    }else{
                        //categoryPath = categoryPath[categoryIndex].categories;
                    }
                    hasThisCategory = false;
                    categoryIndex = -1;
                    Highcharts.each(categoryPath, function(category, i) {
                        if (category === rawData[k][lastCat]) {
                            hasThisCategory = true;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push(rawData[k][lastCat]);
                    }
                }
            }
            return $('#' + render).highcharts(options);
        }

        function getTotal(valor,key,tipo)
        {
            var total = new Array();

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

                    if (tipo==1){
                        total[key[j]] +=  parseFloat(valor[i][header[key[j]]]);
                        if (i == (valor.length-1)) total[key[j]]=parseFloat(total[key[j]]).toPrecision(3);
                    //alert(total[key[j]]);
                    }
                    else
                        total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                    }

                }
            return total;
        }

            function createTable(monitor, total, nombreColTotal, option) {
                var header = Object.keys(monitor[0]);
                var table;

                if (option == 1) {
                    table = '<table  id="tabla1" class="table table-bordered table-hover table-striped table1" style="text-align:left">';
                } else{
                    table = '<table  id="tabla2" class="table table-bordered table-hover table-striped table2">';
                }
                table += "<thead><tr>";
                for (var j = 0; j < header.length; j++) {
                    if (header[j] == 'URL') {
                        header[j] = 'ENTREGABLE';
                    };
                    var strHideFilter = "";
                    if (header[j] == 'ENTREGABLE') {
                         strHideFilter = " sorter-false filter-false "
                    }

                    if (header[j] != 'CLASS' && header[j] != 'ID' && header[j] != 'DatoF') {

                        if (option == 1) {
                            table += "<th style='vertical-align:middle; width:300px' class='text-center " + strHideFilter + "'>" + header[j] + "</th>";
                        } else{
                            table += "<th style='vertical-align:middle;' class='text-center " + strHideFilter + "'>" + header[j] + "</th>";
                        }
                    }

                    /* if(j == header.length-1)
                     {
                     table += "<th style='vertical-align:middle;' class='text-center'>FICHA</th>";
                     }*/

                }

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

            //EVITA CAMPOS DE BUSQUEDA SI ES UN DETALLE EN EL MONITOR, 17 ES EL NUMERO DE CAMPOS DEL QUERY PRINCIPAL DEL MONITOR
            /*if(header.length > 2) {
                var flagnumber = 0;
                for (var j = 0; j < header.length; j++) {

                    if (header[j] != 'CLASS' && header[j] !== 'ID' && header[j] != 'ENTREGABLE' && header[j] != 'DatoF') {
                        var tmpid = 'id' + flagnumber + 'id';
                        table += "<td style='vertical-align:middle; height: 52px;' class='text-center'>\n\
                                <input  class='form-control' style=font-size:9px type=input id=" + tmpid + " onkeyup=myFunction(" + flagnumber + "," + "id" + flagnumber + "id" + ")></td>";
                        flagnumber += 1;
                    }
                }
            }
                table += "</tr></thead>";*/

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

                        if (header[j] != 'CLASS' && header[j] != 'ID' && header[j] != 'DatoF') {

                            if (header[j] != 'FICHA' && header[j] != 'ENTREGABLE' && header[j] != 'ESTATUS' && header[j] != 'AUDITAR' && header[j] != 'AUDITAR SUP' && header[j] != 'AUDITAR RSC' && header[j] != '% AUDITADOS' && header[j] != '% DE AUDITADOS RSC' && header[j] != '% DE AUDITADOS SUP')
                            {

                                //  table += "<td class="+clases+">VER</td>";
                                if (j == header.length)
                                {
                                    //clases = 'btn-info';
                                    // table += "<th value=ver class="+clases+">VER</th>";

                                } else
                                {
                                    table += "<td   class=" + clases + ">" + monitor[i][header[j]] + "</td>";
                                }
                            }


                        }

                    }
                    table += "</tr>";

                }
                table += "</table>";

                return table;
            }


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

     function llenarCluster(){
            $("#cluster option").remove();
            $("#cluster").append('<option value="TODOS">ALL</option>');
            var data = {};
            data['region']=$("#region").val();
                //$.isLoading("hide");
            $.getJSON('{{path('reporteusabilidad_llenarCluster')}}',data, function (data) {
                    var clusters  = data.cluster;

                    for (var i = 0; i < clusters.length; i++) {
                        $("#cluster").append('<option value="'+clusters[i]['id']+'">' +clusters[i]['cluster']+ '</option>');
                    }

                    $.isLoading("hide");

                });
        };

        function llenarCountry(){
               $("#pais option").remove();
               $("#pais").append('<option value="TODOS">ALL</option>');
               var data = {};
               data['cluster']=$("#cluster").val();
                   //$.isLoading("hide");
               $.getJSON('{{path('reporteusabilidad_llenarCountry')}}',data, function (data) {
                       var countrys  = data.country;

                       for (var i = 0; i < countrys.length; i++) {
                           $("#pais").append('<option value="'+countrys[i]['id']+'">' +countrys[i]['country']+ '</option>');
                       }

                       $.isLoading("hide");

                   });
           };

           function llenarProject(){
                  $("#project option").remove();
                  $("#project").append('<option value="TODOS">ALL</option>');
                  var data = {};
                  data['pais']=$("#pais").val();
                      //$.isLoading("hide");
                  $.getJSON('{{path('reporteusabilidad_llenarProject')}}',data, function (data) {
                          var projects  = data.project;

                          for (var i = 0; i < projects.length; i++) {
                              $("#project").append('<option value="'+projects[i]['idproyectos']+'">' +projects[i]['proyecto']+ '</option>');
                          }

                          $.isLoading("hide");

                      });
              };

        function resizeChart(){
            try{
                var panel_width = $('.tab-content').width();
                var offset = 32;
                console.log(panel_width-offset);

                $('#chart1').width(panel_width-offset);

                if ($("#chart1").highcharts()!=undefined){
                    $('#chart1').highcharts().reflow();
                }

                $('#chart3').width(panel_width-offset);

                if ($("#chart3").highcharts()!=undefined){
                    $('#chart3').highcharts().reflow();
                }

                $('#chart2').width(panel_width-offset);

                if ($("#chart2").highcharts()!=undefined){
                    $('#chart2').highcharts().reflow();
                }
                //redrawDt();
            }catch(err) {
                //console.log(err.message);
            }
        }

        $("#activar_5g").click(function(){
            resizeChart();
        });
    </script>

    <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-2">
             <label>{{'monitor.etiqueta.region' | trans}}: </label>
             <select class="form-control" id="region">
                 <option value="TODOS">{{'inbox.all' | trans}}</option>
                 {%for region in regiones%}
                     <option value="{{region.id}}">{{region.region}}</option>
                 {%endfor%}
             </select>
         </div>
         <div class="col-lg-2">
              <label>{{'Cluster' | trans}}: </label>
             <select class="form-control" id="cluster">
                 <option value="TODOS">{{'inbox.all' | trans}}</option>
             </select>
         </div>
         <div class="col-lg-2">
            <label>{{'monitores.pais' | trans}}: </label>
            <select class="form-control" id="pais">
                <option value="TODOS">{{'inbox.all' | trans}}</option>
            </select>
         </div>
         <div class="col-lg-2">
            <label>{{'Project' | trans}}: </label>
            <select class="form-control" id="project">
                <option value="TODOS">{{'inbox.all' | trans}}</option>
            </select>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-lg-2">
              <label> {{'monitor.etiqueta.fechaI' | trans}}:</label>
              <input class="form-control" type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
          </div>
          <div class="col-lg-2">
              <label> {{'monitor.etiqueta.fechaF' | trans}}: </label>
              <input class="form-control" type="text" id="Filtros_fechaFin" value="{{ dateEnd }}">
          </div>
          <div class="col-lg-2" id="parametros" style="vertical-align: bottom">
            <br>
             <button class="btn btn-claro" id="generar" style="vertical-align: bottom">{{'ticketDetail.boton.generar' | trans}}</button>
             <button class="btn btn-claro" id="clear" style="vertical-align: bottom">{{'ticketDetail.boton.limpiar' | trans}}</button>
          </div>
        </div>
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>{{'TOOL USAGE' | trans}}</h1>
                 </div>

        </div>
        <!--<div class="row">
            <div class="col-lg-6" id="chart1">
            </div>
            <div class="col-lg-6" id="chart2">
            </div>
        </div>-->
        <div class="row">
          <div class="col-lg-offset-9"  style="margin-top: 1%">
              <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 class="downloadTemplate" href="{{ path("reporteusabilidad_DownloadUsabilidad")}}" id="downloadTemplate"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li></ul>
              </div>
          </div>
        </div>
        <br />
        <!--<div class="row">
            <div class="col-md-12" id="primer_reporte" style="overflow-x: auto;">
            </div>
        </div>-->
        <!--<div class="row" style="overflow-x: scroll; transform: rotateX(180deg);">
            <div class="double-scroll top-uno" id="primer_reporte" style="transform: rotateX(180deg);"></div>

        </div>-->


    </div>
    <input type="hidden" id="total_monitor" name="total_monitor" value="0">
    <input type="hidden" id="total_monitor_validadas" name="total_monitor_validadas" value="0">
    <div class="row panel_content" style="margin: 10px 0 0 10px !important;">
        <div id="panel_content" class="col-lg-12">
            <ul class="nav nav-pills nav-justified activar_5g">
                <li idprocesos="155" headerid="1" gruopquery="4" class="active mainTab activar_ota_por_validar">
                    <a data-toggle="tab" href="#otas_por_validar"><strong>USAGE BY MODULE</strong></a>
                </li>
                <li idprocesos="155" headerid="1" gruopquery="4" class="mainTab activar_ota_validadas">
                    <a data-toggle="tab" href="#otas_por_validadas"><strong>USAGE BY USER</strong></a>
                </li>
                <li idprocesos="155" headerid="1" gruopquery="4" class="mainTab activar_usage_by_pais">
                    <a data-toggle="tab" href="#usage_by_pais"><strong>USAGE BY CONTRY</strong></a>
                </li>
            </ul>
            <div class="tab-content activar_5g" style="margin-top: 20px;width:100%">
                <div id="otas_por_validar" class="tab-pane active">
                    <div class="row">
                        <!--<div class="col-lg-6" id="chart1">
                        </div>-->
                        <div class="col-lg-10" id="chart2">
                        </div>
                    </div>
                </div>
                <div id="otas_por_validadas" class="tab-pane">
                    <div class="row">
                        <div class="col-lg-10" id="chart3">
                        </div>
                        <div class="col-lg-2">
                        </div>
                    </div>
                </div>
                <div id="usage_by_pais" class="tab-pane">
                    <div class="row">
                        <div class="col-lg-10" id="chart1">
                        </div>
                        <div class="col-lg-2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width:1250px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="myModalLabel"><strong>{# {'monitorii.detail' | trans } #}<span class="modal_detalle_titulo"></span></strong></h2>
                    <div class="punto-grafica text-center"></div>
                </div>
                <div class="modal-body">
                    <div class="tabla-datos">

                    </div>
                    <div id="datatableModalDetalle" class="col-sm-12" {#style="overflow-x: scroll"#}>
                        <table id="tableModalDetalle" class="display nowrap" width="100%">
                            <tbody id="tbodyModalDetalle">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-claro" data-dismiss="modal">
                        {{'monitorii.close' | trans}}
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/grouped-categories.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bootstrap-multiselect/js/bootstrap-multiselect.js') }}"></script>
{% endblock %}