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

{% block dashboard %}
<style>
.double-scroll {
    width: 100%;
    margin-bottom: 40px;
}
/* pager wrapper, div */
.pager {
    padding-left: 0;
     margin: 0;
    text-align: left;
    list-style: none;
}
/* pager wrapper, in thead/tfoot */
td.pager {
    background-color: #e6eeee;
}
/* pager navigation arrows */
.pager img {
    vertical-align: middle;
    margin-right: 2px;
}
/* pager output text */
.pager .pagedisplay {
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px 0 5px;
    width: 50px;
    text-align: center;
}

/*** loading ajax indeterminate progress indicator ***/
#tablesorterPagerLoading {
    background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
    position: absolute;
    z-index: 1000;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
    display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.pager img.disabled {
    /* visibility: hidden */
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.tablesorter-pager select {
    margin: 0;
    padding: 0;
    width: 50px;
}

.wrapper{padding-bottom:50px;}
.header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
.header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
.top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
pre,.well{background:#FFFFFF;}
.syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
.isloading-wrapper.isloading-right{margin-left:10px;}
.isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

/*Glyphicon Spinner*/
.glyphicon-spin {
    -animation: spin .9s infinite linear;
    -webkit-animation: spin2 .9s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
#menuTop {
    margin-top: 30px;
}
    body {
        /*margin-top: 80px;*/
    }
h1{
    font-size: 36px;
}
.tablesorter-header-inner,table.tablesorter thead tr th,.tablesorter-filter {
    color: #fff;
    background-color: #082a99;
    border-color: #2643a5;

}
table.tablesorter thead tr th{

    height: 40px;
}

.tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
    background-color: #082a99;}
.tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
    background-color: #082a99;}


.tablesorter-blue .tablesorter-filter-row td {
    background: #2643a5;}

input[type="search"]{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.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);
}
.container {
    width: 100%;
    height: 400px;
}
.chart {
  width: 80%;
}
</style>
<link  href="{{ asset('bootstrap-multiselect/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
<script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
<script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>
<script src="{{ asset('js/tableExport.js') }}"></script>
<script src="{{ asset('js/jquery.base64.js') }}"></script>
<script>
$(function () {
    $(".openModal").live('click',function(){
        var reporte_id = 0;
        if($(this).hasClass('validados')){
            reporte_id = 49;
        }else{
            reporte_id = 52;
            $("#idReporteDetalle").val(217);
        }
        $("#detalle").modal();
        $("#detalle .modal-body").empty();
        var data = {'reporte_id':reporte_id}
        $.getJSON('{{ path('reporteappenate_getDetalle') }}',data,function(data){
            $("#detalle .modal-body").html(createTableSimple(data.monitor));
        });
    });
    var intervalTime = null;
    $("#autoload").click(function(){
        var time = parseInt($("#time").val());
        if($(this).prop('checked')){
            intervalTime  =  window.setInterval(getReporte, time);
        }else{
            clearInterval(intervalTime);
        }
    });
    $("#export").click(function(){
        $("#formExport").submit();
        return false;
    });
    $("#exportDetalle").click(function(){
        $("#formExportDetalle").submit();
        return false;
    });
    $('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: new Date(),
        defaultDate: new Date(),
    }).datepicker("setDate", new Date());
    $("#type").change(function(){
        if($(this).val() == 1){
            $("#chart1").show();
            $("#chart3").hide();

        }else{
            $("#chart1").hide();
            $("#chart3").show();
        }
    });

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

        }
    });

    $('#Filtros_fechaFin').datepicker({
        dateFormat: 'yy-mm-dd',
    });

    var starYear = 2019;
    var d = new Date();
    var year = d.getFullYear();
    var month = new Array();
    $(".checklist").live('click', function () {
        window.location.href = $(this).attr('href');
    });
    for(var i=starYear; year >= i;i++ )
    {
        $('#ano').append($("<option/>", {
            value: i,
            text: i
        }));

    }
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";
    var n = month[d.getMonth()];
    var options = new Array();
    for(var i=0;i<month.length;i++){
        if(i <=  d.getMonth()){
            $('#mes').append($("<option/>", {
                value: i + 1,
                text: month[i]
            }));
        }
    }
    $("#ano").change(function(){
        var yearSelected = parseInt($(this).val());
        var semana = ISO8601_week_no(new Date());
        $('#mes').empty();
        for(var i=0;i<month.length;i++) {
            if (yearSelected < year) {
                $('#mes').append($("<option/>", {
                    value: i + 1,
                    text: month[i]
                }));
            }else if(i <=  d.getMonth()){
                $('#mes').append($("<option/>", {
                    value: i + 1,
                    text: month[i]
                }));
            }
        }
        $('#semana').empty();
        if (yearSelected < year) {
            var semana = 52;
            for(var i=semana;i>=1;i--){
                $('#semana').append($("<option/>", {
                    value: i,
                    text: i
                }));
            }
        }else{
            for(var i=semana;i>=1;i--){
                $('#semana').append($("<option/>", {
                    value: i,
                    text: i
                }));
            }
        }
    });
    $("#tipoBusqueda").on('change load',function(){
        $(this).val() == 'mes' ? $("#mes").removeAttr('class','hide'):$("#mes").addClass('hide');
        $(this).val() == 'semana' ? $("#semana").removeAttr('class','hide'):$("#semana").addClass('hide');
        $(this).val() == 'dia' ? $("#dia").removeClass('hide'):$("#dia").addClass('hide');
    });
    //GENERAR EL REPORTE
    $("#generar").click(function(){
        if($("#ano").val() == "" || $("#tipoBusqueda").val() == "") return false;
        $.isLoading({
            text: "Loading"
        });
        var idproceso = 188;
        var idReporte = 0;
        $("#idReporte").val(idReporte);
        getReporte();
        resizeChart();
    });

    $(document).on("click", ".downloadTemplate", function () {
        var data = {};
        data['startDate'] = $("#Filtros_fechaIni").val();
        data['endDate'] = $("#Filtros_fechaFin").val();
        data['idproceso'] = 189;
        data['idproyectos'] =  ""+{{idproyectos}};

        var ruta = "{{path('reportMillicon_DownloadSvDigicelImplement')}}?idproyectos=" + data['idproyectos']
                + "&idproceso=" + data['idproceso'] + "&startDate=" + data['startDate'] + "&endDate=" + data['endDate'] + "";

        $('#downloadTemplate').attr("href",ruta);

        //alert(ruta);
    });

});
function getReporte(){
    data = {};
    /*var tipo  = $("#tipoBusqueda").val();
    switch (tipo){
        case 'semana':
            data = {'semana': $("#semana").val()}
            break;
        case 'mes':
            data = {'mes' : $("#mes").val()}
            break;
        case 'dia':
            data = {'dia' : $("#dia").val()}
            break;
    }*/
    //data['ano'] = $("#ano").val();
    parametros = {};

    var inicio = $('#Filtros_fechaIni').val();
    var fin = $('#Filtros_fechaFin').val();
    if (inicio!="") { data['inicio'] = inicio; }
    if (fin!="") { data['fin'] = fin; }

    var valor = $('#Filtros_fechaIni').val() + " | "+ $('#Filtros_fechaFin').val();
    var detail = $("#detail").val();

    var parametros = {
        'FechaInicio': inicio,
        'FechaFin': fin,
        'date': valor,
        'detail': detail,
        'idproyectos':'{{idproyectos}}'
    };

    data['idproceso'] = 189
        $.getJSON('{{ path('DigicelDeliveries_getDetailImpleDelivSv') }}',data,function(data){
            var monitor = data.monitor;
            var chart = data;
            //var chart1 = data.chart1;
            console.log(chart.grafico_SITEEstatus.categories);
            console.log(chart.grafico_SITEEstatus.categories);
            if (chart.grafico_SITEEstatus.categories.length > 0){
                $("#grafico_SITEEstatus").empty();
                var series = getDataToObjectSerieAll(chart.grafico_SITEEstatus.data, Object.keys(chart.grafico_SITEEstatus.data[0]));
                createChartColumn('grafico_SITEEstatus', chart.grafico_SITEEstatus.categories, series, 'ATP VALIDADOS VS RECHAZADOS',
                        null, inicio, fin, null,null,"{{ path('DigicelDeliveries_detalleDashboradDelivSv') }}", chart.grafico_SITEEstatus.data,parametros,null,null,null,null,null,null);
            }else{
                if ($("#grafico_SITEEstatus").highcharts()!=undefined){
                    $("#grafico_SITEEstatus").highcharts().destroy();
                }
                $("#grafico_SITEEstatus").empty().append('<div class="alert-black alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
            }

            //GRAFICO OTAS VALIDADAS
           if (chart.grafico_SITEValidados.categories.length > 0){
               $("#grafico_SITEValidados").empty();
               var series = getDataToObjectSerieAll1(chart.grafico_SITEValidados.data,Object.keys(chart.grafico_SITEValidados.data[0]));
               createChartColumnPareto('grafico_SITEValidados', chart.grafico_SITEValidados.categories, series, 'PARETO CHART - WORST OFFENDERS',
                      null, null, null, null, parametros,null,"{{ path('DigicelDeliveries_detalleDashboradDelivSv') }}",  chart.grafico_SITEValidados.data,320,'')
           }else{
               if ($("#grafico_SITEValidados").highcharts()!=undefined){
                   $("#grafico_SITEValidados").highcharts().destroy();
               }
               $("#grafico_SITEValidados").empty().append('<div class="alert-black alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
           }

           //GRAFICO OTAS RECHAZADAS
           if (chart.grafico_SITERechazados.categories.length > 0){
               $("#grafico_SITERechazados").empty();
               var series = getDataToObjectSerieAll1(chart.grafico_SITERechazados.data,Object.keys(chart.grafico_SITERechazados.data[0]));
               createChartColumnPareto('grafico_SITERechazados', chart.grafico_SITERechazados.categories, series, 'PARETO CHART - WORST SUPERVISOR',
                      null, null, null, null, parametros,null,"{{ path('DigicelDeliveries_detalleDashboradDelivSv') }}",  chart.grafico_SITERechazados.data,320,'')
           }else{
               if ($("#grafico_SITERechazados").highcharts()!=undefined){
                   $("#grafico_SITERechazados").highcharts().destroy();
               }
               $("#grafico_SITERechazados").empty().append('<div class="alert-black alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
           }

            var flag = true;
            if(monitor.length == 0){
                $("#reporte1").empty();
                //$("#chart1").empty();
                //$("#chart2").empty();
                $("#reporte1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                $.isLoading("hide");
                $("#inicio").show();
                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(flag){
                createColumnChart('chart1','Implementation Deliverables By Region',chart1);
                var total = getTotal(chart1,[1,2,3,4,5,6,7,8,9,10,11],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]})
                }
                createColumnChart('chart2','Implementation Deliverables',AuxArray);
            }*/
            var objectType = {"9":1,"10":2,"11":3,"12":4,"13":5,"14":6};
            $("#reporte1").empty().append(createTable(monitor,undefined,undefined,objectType));
            $('.double-scroll').doubleScroll();
            var pagerOptions = {
                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(pagerOptions);
            $(".pager").show();
            $("#inicio").show();
            $("#autoload").attr('disabled',false);
            $.isLoading('hide');
        }).fail(function(){
        $.isLoading('hide');
    });
}

function createChartColumn(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();
    if (render=='grafico_SITEEstatusActual'){
        if (series.length>0){
            $.each(series, function(key, value) {
                $.each(value, function(k, v) {
                    if(k==0){//total
                       data.push({"color":'#00A9E5',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==1){//otas validadas
                      data.push({"color":'#90ED7D',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==2){ //otas por validar
                      data.push({"color":'#FF0000',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==3){ //otas rechazadas
                      data.push({"color":'#E3F705',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    } else if (k==4){ //%validas
                      data.push({"color":'#0C265D',"name":v.name,"data":v.data,yAxis: 1});
                    } else if (k==5){ //%rechazadas
                      data.push({"color":'#F7610F',"name":v.name,"data":v.data,yAxis: 1});
                    }
                });
            });
        }
    }
    if (render=='grafico_SITEEstatus'){
        if (series.length>0){
            $.each(series, function(key, value) {
                $.each(value, function(k, v) {
                    if(k==0){//TOTAL
                       data.push({"color":'#0C265D',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if(k==1){//VALIDADOS FTR
                       data.push({"color":'#00A9E5',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==2){//APROBADO
                      data.push({"color":'#90ED7D',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==3){ //RECHAZADO
                      data.push({"color":'#FF0000',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==4){ //POR REVISAR
                      data.push({"color":'#E3F705',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==5){ //VALIDADOS FTR
                      data.push({"color":'#0C265D',"name":v.name,"data":v.data,yAxis: 1});
                    } else if (k==6){ //% RECHAZADO
                      data.push({"color":'#F7610F',"name":v.name,"data":v.data,yAxis: 1});
                    }
                });
            });
        }
    }
    if (render=='grafico_OTARechazadasOfensores'){
        if (series.length>0){
            $.each(series, function(key, value) {
                $.each(value, function(k, v) {
                    if(k==0){
                       data.push({"color":'#00A9E5',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }else if (k==1){
                      data.push({"color":'#FF0000',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                    }
                });
            });
        }
    }
    if (render=='grafico_OTARechazadasCausas'){
        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 subtitle = '';
    if ($('#asp').val()){
        if ($('#asp').val().length>0){
            var array_asp = $('#asp').val();
            var detalle_asp = $('#asp option').length===array_asp.length?'ALL':$('#asp').val();
            subtitle+= " <b>ASP:</b> "+detalle_asp;
        }
    }
    if ($('#region').val()){
        if ($('#region').val().length>0){
            var array_region = $('#region').val();
            var detalle_region = $('#region option').length===array_region.length?'ALL':$('#region').val();
            subtitle+= " <b>REGION:</b> "+detalle_region;
        }
    }
    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;
    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: [-10, -20, -30, -40, -50]
            }
        },
        yAxis: [{
            title: {
                text: 'Qty'
            },
            min: 0,
            labels: {
                overflow: 'justify',
                style: {
                    fontSize: '9px',
                },
            },
        }, {
            title: {
                text: 'Percent (%)'
            },
            max: 100,//render=='grafico_SITEEstatusActual'?600:100,
            min: 0,
            opposite: true,
            labels: {
                format: "{value}%"
            }
        }],
        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 () {
                        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];
                                var selected_serie = this.series.name;
                                //console.log(row,rawData,selected_serie);
                                parametros['categoria'] = '';
                                parametros['ofensor'] = '';
                                var subtitle_detalle = '';
                                if (render=='grafico_SITEEstatusActual' || render=='grafico_OTARechazadasOfensores' || render=='grafico_OTARechazadasCausas' || render=='grafico_SITEEstatus'){
                                    var t = '';
                                    parametros['categoria'] = '';
                                    parametros['asp_categoria'] = '';
                                    if(render=='grafico_SITEEstatus'){
                                        t = "ATP'S VALIDADOS VS SITES RECHAZADOS";
                                        subtitle_detalle = "["+selected_serie+"]";
                                    }
                                    if(render=='grafico_SITEEstatusActual'){
                                        t = "SITES VALIDADOS VS SITES RECHAZADOS - ACTUAL ";
                                        subtitle_detalle = "["+selected_serie+"]";
                                    }
                                    if(render=='grafico_OTARechazadasOfensores'){
                                        t = "SITES RECHAZADOS OFENSORES ";
                                    }
                                    if(render=='grafico_OTARechazadasCausas'){
                                        t = "SITES RECHAZADOS CAUSAS";
                                        parametros['kpi'] = "DETALLE_OTA_RECHAZADAS_CAUSAS";
                                        parametros['categoria'] = selected_serie;
                                    }
                                    parametros['mes'] = row._cat_Month?row._cat_Month:'';
                                    parametros['week'] = row._cat_Week?row._cat_Week:'';
                                    parametros['year'] = row._cat_Year?row._cat_Year:'';
                                    var title_detalle = t;

                                    if (row._cat_ASP){
                                        if (row._cat_ASP!='TOTAL'){
                                            parametros['asp_categoria'] = row._cat_ASP;
                                        }
                                    }
                                    //console.log(selected_serie);
                                    if(render=='grafico_SITEEstatus'){
                                        if (selected_serie=='TOTAL'){
                                            parametros['kpi'] = "DETALLE_ATP_TOTAL";
                                        }else if (selected_serie=='VALIDADOS FTR'){
                                            parametros['kpi'] = "DETALLE_ATP_VALIDADOS_FTR";
                                        }else if (selected_serie=='POR REVISAR'){
                                            parametros['kpi'] = "DETALLE_ATP_POR_REVISAR";
                                        }else if (selected_serie=='VALIDADOS NO FTR'){
                                            parametros['kpi'] = "DETALLE_ATP_APROBADO";
                                        }else if (selected_serie=='RECHAZADO'){
                                            parametros['kpi'] = "DETALLE_ATP_RECHAZADO";
                                        }else if (selected_serie=='% VALIDADOS FTR' || selected_serie=='% RECHAZADOS'){
                                            $.isLoading("hide");
                                            return false;
                                        }
                                    }

                                    if(render=='grafico_OTARechazadasOfensores'){
                                        if (selected_serie=='CALIDAD'){
                                            parametros['kpi'] = "DETALLE_OTA_RECHAZADAS_OFENSORES_CALIDAD";
                                        }else if (selected_serie=='CAMBIO'){
                                            parametros['kpi'] = "DETALLE_OTA_RECHAZADAS_OFENSORES_CAMBIO";
                                        }
                                    }
                                }
                                parametros['selected_serie'] = selected_serie;
                                generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                            }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 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 = parseFloat(data[i][header[key]]);
        }
        arrayReturn.push(valor);
    }
    return arrayReturn;
}

function getDataToObjectSerie(data, header){
    var arrayReturn = new Array();
    var data1 = new Array();

    for (var i = 0; i < data.length; i++){
        data1.push(parseFloat(data[i][header[header.length - 1]]));
    }
    arrayReturn.push({'name': header[header.length - 1], 'data': data1, 'dataLabels': {'enabled': true}});
    return arrayReturn;
}
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(parseInt(chart[i][header[j]]));
        }
    }
    return new Array(x,y);
}

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 getParams(type){
    var obj={};
    switch (type){
        case 'ftr':
            obj={
                'robust':{'low': 0, 'high':80},
                'commitment':{'low': 80, 'high':85},
                'strech':{'low': 85, 'high':100}
            }
            break;
        case 'otd':
            obj={
                'robust':{'low': 0, 'high':75},
                'commitment':{'low': 80, 'high':85},
                'streched':{'low': 85, 'high':100}
            }
            break;
    }
}

$('html').on('click', '.openModal', open);

function createChartColumnPareto(render, categoria, series, title, w,
                           target_line, target_line2, target_line3, parametros, orderArray, path, rawData,height,subtitle){
    //ajustar la serie para la doble axies
    var arrayReturn = new Array();
    var data = new Array();
    if (series.length>0){
        $.each(series, function(key, value) {
            $.each(value, function(k, v) {
                if(k==0){
                   data.push({"name":v.name,"data":v.data,type: 'column'});
                }else{
                    data.push({"name":"%","data":v.data,yAxis: 1});
                }
            });
        });
    }
    var table_dt = "";
    var dt = "";
    var posProy = 0;
    var col = 4;
    var rotation = 0;
    var kpi = "";
    var porcentaje = data[0].data;
    if (porcentaje!="" && porcentaje!=undefined){
        var yMax = porcentaje.reduce(function(a, b) {
            return Math.max(a, b);
        });
        if (yMax==0){
            yMax=35;
        }
    }else{
        var yMax=35;
    }
    //console.log(yMax);
    //var height = 320;
     var options = {
        chart: {
            //height: height,
            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
          },
          enableMouseTracking : false,
          xAxis: {
                categories: [],
                lineWidth: 1,
                lineColor: '#4c4c4c',
                //tickColor: '#4c4c4c',
                //tickWidth: 1,
                //minorTickWidth: 1,
                crosshair: true,
                labels: {
                    groupedOptions: [{ // 1st-level
                        autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
                        //rotation: -30,
                        lineWidth: 1,
                        tickWidth: 1,
                        style: {
                            fontSize: '10px',
                            color: '#333333'
                            //color: '#4c4c4c'
                        }
                    }, // 2nd-level
                        {
                            autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
                            //rotation: 0,
                            lineWidth: 0,
                            tickWidth: 0,
                            //align: 'right',
                            style: {
                                fontSize: '9px',
                                color: '#333333'
                                //color: '#4c4c4c'
                            }
                        }
                    ],
                    lineWidth: 0,
                    tickWidth: 0,
                    rotation: 0,
                    style: {
                        fontSize: '10px',
                        color: '#333333'
                        //color: '#4c4c4c'
                    },
                    formatter: function () {//use formatter to check if length of string is greater than 20 and maintain its width.
                        if(this.value.length > 15){
                            return this.value.substring(0, 15) + '...';
                        }
                        return this.value;
                    }
                },
                overflow: 'justify',
                scrollbar: {
                    enabled: false
                }
          },
          plotOptions:{
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                depth: 40,
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none'
                }
            },
            series:{
                shadow:true,
                dataLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            }
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal'
                    },
                    yAxis: {
                        labels: {
                            align: 'left',
                            x: 0,
                            y: -5
                        },
                        title: {
                            text: null
                        }
                    },
                    subtitle: {
                        text: null
                    },
                    credits: {
                        enabled: false
                    }
                }
            }]
        },
        legend: {
            backgroundColor: 'rgba(66, 139, 202, 0.5)'

        },

          yAxis: [{ // Primary yAxis
            plotLines: [
                {
                    value: 0,
                    width: 1,
                    color: '#808080'
                }
            ],
            title: {
              text: 'Qty',
              style: {
                color: Highcharts.getOptions().colors[1]
              }
            },
            min: 0,
            tickPositions: [0,5,10,20,30,50,70,yMax],
          },{ // Secondary yAxis
            title: {
              text: 'Percent (%)'
            },
            //max: 100,
            min: 0,
            tickPositions: [0,30,40,50,60,70,80,90,100],
            opposite: true,
            labels: {
                format: "{value}%"
            },
          }],
          tooltip: {
            shared: false
          },
          colors: ['#275f76', '#e55550', '#4fa165', '#910000', '#1aadce',
                    '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
          series: data
    };

    if (target_line != null){
        options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
            value: target_line[0],
            color: '#2e8201', //Verde Grama
            dashStyle: 'ShortDot',
            width: 3,
            zIndex: 4,
            label: {
                verticalAlign: 'bottom',
                textAlign: 'right',
                align: 'right',
                y: -10,
                style: {
                    fontSize: '10px',
                    color: '#606060'
                },
                text: target_line[1]
            }
        };
    }

    if (target_line2 != null){
        options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
            value: target_line2[0],
            color: '#7cf23c', //Verde Manzana
            dashStyle: 'ShortDot',
            width: 3,
            zIndex: 4,
            label: {
                verticalAlign: 'bottom',
                textAlign: 'right',
                align: 'right',
                y: -10,
                style: {
                    fontSize: '10px',
                    color: '#606060'
                },
                text: target_line2[1]
            }
        };

    }

    if (target_line3 != null){
        options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] = {
            value: target_line3[0],
            color: '#f7e81d', //Amarillo
            dashStyle: 'ShortDot',
            width: 3,
            zIndex: 4,
            label: {
                verticalAlign: 'bottom',
                textAlign: 'right',
                align: 'right',
                y: 10,
                style: {
                    fontSize: '10px',
                    color: '#606060'
                },
                text: target_line3[1]
            }
        };
    }

    // 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=='%OTD'){
                            return this.point.y.toFixed(2) + '%';
                        }else{
                            if (this.point.y!=0){
                                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){
                                parametros['selected_serie'] = '';
                                var row = rawData[this.x];
                                parametros['categoria'] = '';
                                parametros['ofensor'] = '';
                                var categoriaDetalle =  row['_cat_RootCause'];
                                var selected_serie = this.series.name;
                                //console.log(selected_serie);
                                if (render=='grafico_OTARechazadasCausasTop' || render=='grafico_SITEValidados' || render=='grafico_SITERechazados'){
                                    var t = '';
                                    if(render=='grafico_SITEValidados'){
                                        t = "PARETO CHART - ATP VALIDADOS ASP";
                                        parametros['kpi'] = "DETALLE_WORST_OFFENDERS_ASP";
                                    }
                                    if(render=='grafico_SITERechazados'){
                                        t = "PARETO CHART - ATP VALIDADOS SUPERVISORES";
                                        parametros['kpi'] = "DETALLE_WORST_OFFENDERS_SUPERVISORES";
                                    }

                                    parametros['mes'] = row._cat_Month?row._cat_Month:'';
                                    parametros['week'] = row._cat_Week?row._cat_Week:'';
                                    parametros['year'] = row._cat_Year?row._cat_Year:'';
                                    var title_detalle = t;
                                    var subtitle_detalle = '';
                                    if (row._cat_ASP){
                                        if (row._cat_ASP!='TOTAL'){
                                            parametros['asp_categoria'] = row._cat_ASP;
                                        }else{
                                           parametros['asp_categoria'] = '';
                                        }
                                    }else{
                                        parametros['asp_categoria'] = '';
                                    }

                                    if (row._cat_REVISOR){
                                        if (row._cat_REVISOR!='TOTAL'){
                                            parametros['revisor_categoria'] = row._cat_REVISOR;
                                        }else{
                                           parametros['revisor_categoria'] = '';
                                        }
                                    }else{
                                        parametros['revisor_categoria'] = '';
                                    }

                                    if (selected_serie=='%'){
                                        $.isLoading("hide");
                                        return false;
                                    }
                                    parametros['categoria'] = row._cat_RootCause?row._cat_RootCause:'';
                                    parametros['ofensor'] = row._cat_offender?row._cat_offender:'';
                                    generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                }
                            }else{
                                alert('Data Not Found');
                            }
                        }
                    }
                }
            }
        };
    }

    var num = categoria.length;

    var baseMargin = render=='graficoDashAsp' ? 170 : 90;
    var marginBottom = baseMargin + ((num-1) * 20);
    var menor = series[1];
    var mayor = series[2];
    options.chart.marginBottom = marginBottom;


    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 getDataToObjectSerieAll1(data, header){
    var arrayReturn = new Array();
    var data1 = new Array();
    var menor = 1000;
    var mayor = -1;
    var total = 0;
    var valorA=0;
    var dataAux = new Array()

    for (var i = 0; i < header.length; i++){
        var dataAux = new Array();
        var dataAux1 = new Array();
        valorA=0;
        total = 0;
        if (header[i].indexOf('_cat_') < 0){
            for (var j=0; j<data.length; j++){

                var valor = parseFloat(data[j][header[i]]);
                valorA+= valor;
                total+=valor;
                dataAux.push(valor);
                dataAux1.push(valorA);
                //console.log(valorA);
                if (valor < menor){
                    menor = valor;
                }
                if (valor > mayor){
                    mayor = valor;
                }

            }

            for (var k=0; k<dataAux1.length; k++){
                dataAux1[k]=Math.round(parseFloat((dataAux1[k]/total)*100));
            }

            if(header[i]!="pareto") arrayReturn.push({'name': header[i], 'data': dataAux, 'dataLabels': {'enabled': true}});
            arrayReturn.push({'name': 'pareto1', 'data': dataAux1, 'dataLabels': {'enabled': true}});
        }
    }
    data1[0] = arrayReturn;
    data1[1] = menor;
    data1[2] = mayor;
    return data1;
}

function generateModal(ruta, objParams, numerar, title, subtitle, orderArray)
{
  //console.log(ruta, objParams, numerar, title, subtitle, orderArray);
  //alert("RUTA:"+ruta);alert("PARAM:"+objParams);alert("NUMERAR:"+numerar);alert("TITLE:"+title);alert("SUBTITLE:"+subtitle);alert("ORDARRAY:"+orderArray);

  var title_ = title!=null ? title.trim() : "";
  var ordArr = orderArray!=null ? orderArray : null;
  $("#datatableModalDetalle").empty().isLoading();
  $('#myModal .punto-grafica').empty().hide();
  $('#myModal .modal_detalle_titulo').empty();

  if (title != null)
  {
      $('#myModal .modal_detalle_titulo').html(title);
      //title_ = title.trim();
      title_ = title_.replace(' ','_');
      title_ = title_.replace('-','');
      title_ = title_.replace(' ','');
  }
  else
  {
      $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
      title = '{{'monitorii.detail' | trans }}';
      title_ = title_.replace(' ','_');
      title_ = title_.replace('-','');
      title_ = title_.replace(' ','');
  }

  if (subtitle != null)
  {
      $('#myModal .punto-grafica').html(subtitle).show();
  }

  $.getJSON(ruta, objParams, function (data)
  {
      if (data.length > 0){
          var total_general = 0;
          var porcentaje_ohs = 0;
          var total_registros = 0;
          var col = createTableDTDetail(Object.keys(data[0]),'tableModalDetalle', 'datatableModalDetalle',objParams.kpi,porcentaje_ohs,total_registros);
          buildDatatablePrin('tableModalDetalle',col,data,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, porcentaje_ohs, 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();

    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;

        if (t=='DESCRPTION'){
            strHeader += '<th class="text-center" style="width: 350px;">' + t + '</th>';
        }else{
            strHeader += '<th class="text-center">' + t + '</th>';
        }

        //console.log(title);
        if (title=="Total Not Accepted" || title=="Not Ok" || title=="SYSTEM FAULT FOUND"  || title=="ISSUES"){
            columns.push({data: data[i], title: t, visible:visible,
                render: function ( dato, type, row ) {
                    if (dato>0){
                        var kpi="";
                        var popup_title = "";
                        var strIssuesHtml = "<ol>";
                        var strIssuesText = "";
                        var url= "";
                        if (row.hasOwnProperty('_ISSUES')){
                            kpi='ftr';
                            popup_title = 'Issues';
                            var issues = row['_ISSUES'];
                            //console.log(issues);
                            if (issues){
                                var arrIssues = issues.split("<br>");
                                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'){
                            /*return '<a href="javascript://" ' +
                             'onClick=\'generateModal("' + url + '",' + JSON.stringify(parametros) + ',true,"' + table_title +  '","' + subtitle +  '",' + ord +  ')\'">' + dato + '</a>';*/
                            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 if (title=='_ISSUES'){
            columns.push({data: data[i], title: t, visible:visible,
                render: function ( dato, type, row ) {
                    if (Array.isArray(dato)){
                        if (dato.length>0){
                            var strIssuesHtml = "<ol>";
                            var strIssuesText = "";
                            if (row.hasOwnProperty('_ISSUES')){
                                var issues = row['_ISSUES'];
                                var arrIssues = issues.split("<br>");
                                if (Array.isArray(arrIssues)){
                                    for (var i=0; i<arrIssues.length; i++){
                                        strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
                                        strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
                                    }
                                }
                                strIssuesHtml += "</ol>";
                            }
                            if (type==='display'){
                                return strIssuesHtml;
                            }else{
                                return strIssuesText;
                            }
                        }
                    }
                    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;
}

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 createTable(monitor,total,nombreColTotal,type){
    var header = Object.keys(monitor[0]);
    var headerType = Object.keys(type);
    var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1" id="tableSitios"> <thead>' +
            '<tr class="btn-info">';
    for (var j = 0; j < header.length; j++) {
        table += "<th class='text-center'>" + header[j] + "</th>";
    }
    table += "</tr></thead>";
    for (var i = 0; i < monitor.length; i++) {
        table += "<tr id='"+ monitor[i][header[0]] +"'>";
        for (var j = 0; j < header.length; j++) {
            if( $.inArray(j,headerType))
            {
                var typeString = 'id="' + type[j] + '"';
            }
            //table += "<td " + typeString + ">" + monitor[i][header[j]] + "</td>";

            if (header[j] == 'ATS-CHECKIN'){
              var un = monitor[i]['ATS-CHECKIN'];
              table += "<td class='text-center'>"+ un +"</td>";
            }else if (header[j] == 'SALIDA') {
              var un = monitor[i]['SALIDA'];
              table += "<td class='text-center'>"+ un +"</td>";
            }

            if (header[j] != 'ATS-CHECKIN' && header[j] != 'SALIDA' ) {

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

        }
        table += "</tr>";
        if(typeof total !== "undefined") {
            if (i == monitor.length - 1) {
                var headerTotal = Object.keys(total);
                table += '<tr><td>' + nombreColTotal +'</td>';
                for(var x=0; x<headerTotal.length;x++){
                    table += '<td>';
                    table += total[headerTotal[x]];
                    table += '</td>';
                }
                table += '</tr>';
            }
        }
    }
    table += "</table>";

    return table;
}
function createTableSimple(monitor,total,nombreColTotal){
    var header = Object.keys(monitor[0]);
    var table = '<table id="tableSitios"  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +
            '<tr class="btn-info">';
    for (var j = 0; j < header.length; j++) {
        table += "<th class='text-center'>" + header[j] + "</th>"
    }
    table += "</tr></thead>";
    for (var i = 0; i < monitor.length; i++) {
        table += "<tr>";
        for (var j = 0; j < header.length; j++) {
            if( typeof monitor[i][header[j]] === 'object'){
                table += "<td>" + monitor[i][header[j]].date.substring(0,19)  + "</td>";
            }else{
                table += "<td>" + monitor[i][header[j]]  + "</td>";
            }
        }
        table += "</tr>";
        if(typeof total !== "undefined") {
            if (i == monitor.length - 1) {
                var headerTotal = Object.keys(total);
                table += '<tr><td>' + nombreColTotal +'</td>';
                for(var x=0; x<headerTotal.length;x++){
                    table += '<td>';
                    table += total[headerTotal[x]];
                    table += '</td>';
                }
                table += '</tr>';
            }
        }
    }
    table += "</table>";
    return table;
}

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 resizeChart(){

        var panel_width = $('.tab-content').width();
        var offset = 22;
        $('#grafico_SITEEstatus').width(panel_width-offset);
        $('#grafico_SITEValidados').width(panel_width-offset);
        $('#grafico_SITERechazados').width(panel_width-offset);

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

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 _detail(ticket,site,entregable,opcion){
    $('#myModalLabel').html("");
    $("#reporte_detail").empty();
    $.isLoading({
        text:       "Loading"
    });
    reporteDetail(ticket,site,entregable,opcion);
    $('#myModalDetalle').modal('show');
}
function reporteDetail(ticket,sitio,entregable,opcion) {
    data = {};
    data['ticket'] = ticket;
    data['sitio'] = sitio;
    data['entregable'] = entregable;
    data['opcion'] = opcion;
    data['idproyectos'] = '{{idproyectos}}';
    data['idproceso'] = 189;
    $.getJSON('{{path('DigicelDeliveries_reporteDetailImplementDelivSv')}}', data, function (data) {
        var detalle = data.detalle;
        if (detalle.length == 0) {
            $("#reporte_detail").empty();
            $("#reporte_detail").append('<div class="alert alert-warning" role="alert">NO SE HA ENCONTRADO DATA</div>');
            $.isLoading("hide");
            return false;
        }
        $('#myModalLabel').html("DETALLE " + detalle[0]['entregable']);
        $("#reporte_detail").empty().append(createTableDetail(detalle,opcion));
        $.isLoading("hide");
    })
    return true;
}
function createTableDetail(monitor,opcion){
    var table;
    var idproyectos = '{{idproyectos}}';
    if (monitor.length >0) {
        table = '<table id="tablaDetail" class="table table-bordered table-hover table-striped table-responsive">';
        table += "<thead class='tabledetail'><tr>";
        table += "<th style='vertical-align:middle;' class='text-center'>#</th>";
        table += "<th style='vertical-align:middle;' class='text-center'>ARCHIVO</th>";
        table += "<th style='vertical-align:middle;' class='text-center'>FECHA</th>";
        table += "</tr></thead>";
        var strLast="";
        for (var i = 0; i < monitor.length; i++) {
            isLast = monitor[i]['isLast'];
            if (isLast==1) {strLast="*"}else{strLast='';}
            table += "<tr>";
            table += "<td class='text-center' nowrap>" + (i+1 ) + "</td>";
            table += "<td class='text-left'><a target='_blank' href='"
                    + monitor[i]['path'] + "'>"
                    +"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>&nbsp;" +
                    monitor[i]['filename'] + strLast+ "</a></td>";
            table += "<td class='text-center' nowrap>" + monitor[i]['fecha'] + "</td>";
            table += "</tr>";

        }
        table += "</table>";
    }
    return table;
}
</script>
    <div class="container-fluid">
      <div class="row">
          <div style="text-align: center" class="col-lg-2">
              <img id="logo" src="{{ asset('images/logoEricsson.png')  }}"  width="220" height="72">
          </div>
          <div class="col-lg-8 col-md-12">
              <h1 class="text-center text-primary">
                  <i class="fa fa-file-text-o"></i> Entregables de Implementacion Digicel
              </h1>
          </div>
          <div style="text-align: center" class="col-lg-2">
              <img id="logo" src="{{ asset('images/logoDigicel.png')  }}"  width="176" height="57">
          </div>
      </div>

        <!-- <row>
            <div class="col-lg-12 col-md-12">
                <h1 class="text-center text-primary"><i class="fa fa-file-text-o"></i> Entregables de Implementacion Digicel </h1>
            </div>
        </row>-->
        <!--<div class="row">
            <div class="col-lg-2" id="parametros">
                <select class="form-control" id="ano">
                    <option value="">{{'Seleccione Año' | trans}}</option>
                </select>
            </div>
            <div class="col-lg-2" id="parametros">
                <select class="form-control" id="tipoBusqueda">
                    <option value=""> {{'Seleccione Fecha' | trans}}</option>
                    <option value="dia">DAY</option>
                    <option value="semana">{{'monitor.week' | trans}}</option>
                    <option value="mes">{{'monitoriii.month' | trans}}</option>
                    <option value="ano">{{'monitoriii.year' | trans}}</option>
                </select>
            </div>
            <div class="col-lg-2 " id="parametros" >
                <select class="hide" id="mes">

                </select>
                <select class="hide" id="semana">

                </select>
                <input type="text" id="dia" class="hide form-control datepicker">
            </div>
          </div> -->
          <div class="col-lg-3" id='div_fechaFin'>
              <input placeholder="{{'monitor.etiqueta.fechaI' | trans}}" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="Filtros_fechaIni" name="Filtros_fechaIni" value="">
          </div>

          <div class="col-lg-3" id='div_fechaIni'>
              <input placeholder="{{'monitor.etiqueta.fechaF' | trans}}" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="Filtros_fechaFin" name="Filtros_fechaFin" value="">
          </div>
            <div class="col-lg-2" id="parametros">
            </div>
            <div class="col-lg-3" id="parametros" >
                <button class="btn btn-claro" id="generar">{{'monitoriii.generate' | trans}}</button>
            </div>
            {% if identity is not empty %}
               {%if idproyectos!=79%}
               <!-- <div class="row">
                   <div class="col-lg-12">
                       <img id="logo" class="pull-right" src="{{ asset('images/logoDigicel.png') }}"  width="220" height="72" >

                   </div>
               </div> -->
                <!-- <div class="pull-right" style="">

                    <div class="col-lg-12">
                        <img id="logo" src="{{ asset( identity.pathLogo ) }}"  width="330" height="100">
                        <p class="text-center" style="font-size: 14pt;font-weight: bold;">{{ identity.alias }}</p>
                    </div>
                </div>-->
                {%endif%}
            {% endif %}
        </div>
        <br/>
        <div class="row">
            <div id="panel_content" class="col-lg-12">
                <div class="panel with-nav-tabs panel-primary">
                    <div class="panel-heading charts">
                        <ul class="nav nav-tabs" id="myTabs">

                            <li role="presentation" id="tabsOtasEstatus" class="click_tab active" data-filtro="div_fechaIni div_fechaFin div_asp"><a data-toggle="tab" href="#_tabsOtasEstatus" class="exportar_excel" data="NO">MONITOR</a></li>

                            <li role="presentation" id="tabsOtasRechazadas" class="click_tab" data-filtro="div_fechaIni div_fechaFin div_asp"><a data-toggle="tab" href="#_tabsOtasRechazadas" class="exportar_excel" data="NO">CHARTS</a></li>

                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">

                            <!-- OTAS ESTATUS -->
                            <div id="_tabsOtasEstatus" class="tab-pane fade active in">

                              <div class="container-fluid" id="inicio" style="display: none">
                                  <div class="tab-content" style="margin-top: 20px;">
                                      <div id="_summary" class="tab-pane fade in active">
                                          <!--<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 col-md-offset-9">
                                                  <div class="btn-group pull-right">
                                                      <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                                                      <ul class="dropdown-menu" role="menu">
                                                          <!--<li><a href="#" onclick="$('#reporte1').tableExport({type: 'excel', escape: 'false'});">
                                                                  <img src={{ asset("images/xls.png")}} width="24px"> XLS
                                                              </a>
                                                          </li>-->
                                                          <li>
                                                              <a class="downloadTemplate" href="{{ path("reportMillicon_DownloadSvDigicelImplement")}}"
                                                                 id="downloadTemplate"> <img src={{ asset("images/xls.png")}} width="24px"> XLS
                                                              </a>
                                                          </li>
                                                      </ul>
                                                  </div>
                                              </div>
                                              <div class="pager">
                                                  <span class="pagedisplay"></span>
                                              </div>
                                              <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                                          </div>
                                          <div class="row double-scroll" id="reporte1" >
                                          </div>
                                          <div id="pager" class="pager" style="display: none;text-align: center; ">
                                              <form>
                                                  <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                                                  <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>

                                                  <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                                                  <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                                                  <span class="pagedisplay"></span>
                                                  <select class="pagesize" title="Select page size">
                                                      <option selected="selected" value="1000">1000</option>
                                                      <option  value="500">500</option>
                                                      <option  value="100">100</option>
                                                  </select>
                                              </form>
                                          </div>
                                      </div>
                                      <div id="_detail" class="tab-pane fade in">
                                          <div class="col-lg-6" id="chart3">
                                          </div>
                                          <div class="col-lg-6" id="chart4">
                                          </div>
                                      </div>
                                  </div>
                              </div>

                            </div>
                            <!-- OTAS RECHAZADAS -->
                            <div id="_tabsOtasRechazadas" class="tab-pane fade">

                              <div class="row">
                                  <div id="grafico_SITEEstatusActual" class="col-md-12" style="width: 100%; min-width: 320px;">
                                  </div>
                              </div>
                              <div class="row" style="margin-top: 30px;">
                                  <div id="grafico_SITEEstatus" class="col-md-12" style="width: 100%; min-width: 320px;">
                                  </div>
                              </div>
                              <div class="row" style="margin-top: 30px;">
                                  <div id="grafico_SITEValidados" class="col-md-12" style="width: 100%; min-width: 320px;">
                                  </div>
                              </div>
                              <div class="row" style="margin-top: 30px;">
                                  <div id="grafico_SITERechazados" class="col-md-12" style="width: 100%; min-width: 320px;">
                                  </div>
                              </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>

<div class="modal fade" id="myModalDetalle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header  bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title text-center" id="myModalLabel">DETALLE</h2>
            </div>

            <div class="modal-body">
                <div class="row" style="overflow-x: auto;">
                    <div id="reporte_detail" class="col-md-12"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </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 %}