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

{% endblock %}

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

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

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

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

        #menuTop {
            margin-top: 10px;
        }
        .fixed-panel {
            min-height: 100px;
            max-height: 200px;
            overflow-y: scroll;
        }
        #parametros .panel-body .row{

            padding-left: 5px;
        }
        #chart .panel-body {
             padding: 0px;
        }
        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

            }
            .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;

            } 
            .table th{
                font-size: 9pt;
            }
            .table td{
                font-size: 8pt;
            }        

    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        
        function abrirPopup(opcion) {
            
            var $modal = $('#myModal'),
            $modalBody = $('#myModal .modal-body').empty();
            $modalBody.html('').isLoading();
            generateModal(opcion);
            $modal.modal('show');
        }

        function generateModal(opcion){
            var fechaIni = $('#Filtros_fechaIni').val(); 
            var fechaFin = $('#Filtros_fechaFin').val();
            var pais = $('#pais').val();
            $('#myModal .modal-body').empty();
            $.getJSON('{{path('popupSGP', {idproyectos: idproyectos})}}' + '?opcion=' + opcion + '&pais=' + pais + '&FechaInicio=' + fechaIni + '&FechaFin=' + fechaFin, function(data) {
                 $('#myModal .modal-body').isLoading('hide');
                if ( data.length === 0 ) {

                    $('#myModal').modal('hide');
                   
                    return false;
                }
                var monitor = data,
                        header = Object.keys( data[0] ),
                        table = '<table class="table table-hover table-condensed table-responsive"><thead><tr class="btn-claro">';

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

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

                        table += "<td class ='text-left'>" +  monitor[i][header[j]] +"</td>";
                    }
                    table += "</tr>";
                }

                table += "</table>";
                $('#myModal .modal-body').isLoading('hide').html(table);
            });

        }//final de generar data para el popup *******************
        
        $(function () {
            $.isLoading({
                text:       "Loading"
            });
           
            $('#Filtros_fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    onClose: function( selectedDate ) {
                             $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                    }
            }); 

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

            var f = new Date();
            var mes = (f.getMonth() + 1);
            var diaFinal =f.getDate();
            if (diaFinal < 10)
            {
                diaFinal = '0' + diaFinal;   
            }
            if (mes < 10) mes = '0'+mes;
            var fechaI= f.getFullYear() +'-'+mes + "-01";
            var fechaF= f.getFullYear() +'-'+mes + "-"+ diaFinal;            
            if ( ((new Date(fechaF) - new Date(fechaI)) / (24 * 3600 * 1000)) < 7 )
            {
                 var unixIni = ( new Date(fechaI).getTime() );
                 unixIni = unixIni - ( 3600 * 24 * 7 * 1000);
                 
                 var fmi = new Date(unixIni);
                 mes = (fmi.getMonth() + 1);
                 if (mes < 10) mes = '0'+mes;
                 fechaI= fmi.getFullYear() +'-'+mes + "-"+fmi.getDate();  
            }
            if ({{idproyectos}} != 34) {
                $('#pais').val({{idproyectos}});
                $('#pais').prop('disabled', true);
            }
            
            $('#Filtros_fechaIni').val(fechaI);
            $('#Filtros_fechaFin').val(fechaF);
            
            $("#clear").click(function () {
                $("#pais").val();
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
            });

            getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val());

             $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                
                getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val());
            });

        });

        function getChart(inicio, fin, pais){

            $.getJSON('{{path('sgp_DashboardSGP',{'idproyectos':idproyectos})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais}, function (data) 
            {
              console.log("Tabla",data);
                var chart = data;
                var data3 = chart.graficoTabla;
                
                console.log(chart.grafico1);
                $.getJSON('{{path('sgp_DashboardSGP_2',{'idproyectos':idproyectos})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais}, function (data) 
                {
                    console.log("Grafica Torta", data);
                    var chart = data;
                    $.getJSON('{{path('sgp_DashboardSGP_3',{'idproyectos':idproyectos})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais}, function (data) 
                  {
                    console.log("Grafica Barras", data);
                         //Produccion y productividad
                        var chart_2 = data;
                        if (chart_2.grafico4.length>0)
                        {
                            var categoria1 = getDataToObject(chart_2.grafico4,Object.keys(chart_2.grafico4[0]),0,false); 
                            var chart1 = getDataToObjectLinea(chart_2.grafico4,Object.keys(chart_2.grafico4[0]));
                        }
                         //if (chart.grafico4.length>0) createChart('chart4',categoria1,chart4,180); else { $("#chart4").empty(); $("#chart4").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}

                         if (chart_2.grafico4.length>0) createChartLinea('chart1',categoria1,chart1);
                         
                         generateTable(data3);
                         if (chart.grafico1.length>0)
                    {
                    var at = 0;
                    for (i in chart.grafico1)
                    {
                        at = at + parseInt(chart.grafico1[i]['CANTIDAD']);
                    }
                    //alert(at);
                    if (at > 0) { var chartTipoPie = getDataToObjectPie(chart.grafico1,Object.keys(chart.grafico1[0])); }
                   // else  { $("#chart8").empty(); $("#chart8").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                    }
                    
                 
                 else { $("#chart1").empty(); $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}
                 
                 var chartTipoPie_2 = [];
                var a = 0, b = 0;
                for (i in chartTipoPie)
                {
                    if (0 == parseInt(chartTipoPie[i].y)) 
                    { if (b >= 0) { continue; } b++; } 
                    
                    chartTipoPie_2[a] = { name: chartTipoPie[i].name, y: parseInt(chartTipoPie[i].y) };
                    a++;
                }
                if (chart.grafico1.length > 0 && at > 0) createChartPie('chart8', chartTipoPie_2); 
                else { $("#chart8").empty(); $("#chart8").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');}                 
                
                         $.isLoading("hide");
                    });
                
                });
                
            });
        }
        
        function getDataToObject(data,header ,key,int)
        {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){

                var valor = data[i][header[key]];

                if(int){
                    valor = parseInt(data[i][header[key]]);
                }

                arrayReturn.push(valor);
            }

            return arrayReturn;
        }
        
        function getDataToObjectBar(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();              
            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[2]]));
                data2.push(parseFloat(data[i][header[3]]));
                data3.push(parseFloat(data[i][header[4]]));                
            }

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

            return arrayReturn;
        }
        
        function getDataToObjectPie(data,header)
        {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){
                arrayReturn.push({'name': data[i][header[0]], 'y': parseInt(data[i][header[1]])})
            }
            return arrayReturn;
        }
        
        function getDataToObjectLinea(data,header)
        {
            var arrayReturn = new Array();
            var data1 = new Array();
            var data2 = new Array();    
            var data3 = new Array();   

            for(var i = 0; i< data.length; i++){
                data1.push(parseFloat(data[i][header[1]]));
                data2.push(parseFloat(data[i][header[2]]));
                data3.push(parseFloat(data[i][header[3]]));                
            }
            
            arrayReturn.push({'name': header[2], 'data': data2,'dataLabels':{'enabled':true}});    
            arrayReturn.push({'name': header[1], 'data': data1,'yAxis':1,'dataLabels':{'enabled':true}});
            arrayReturn.push({'name': header[3], 'data': data3,'yAxis':1});           

            return arrayReturn;
        }   
        
        function createChart(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 700
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels:{

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

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

                        dataLabels : {

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

                    tag : 1

                }]
            };

            return $('#' +render).highcharts(options);
        }
        
        function createChartBar(render,categoria,data,wd){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'bar',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: wd,
                    width: 500
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels:{

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

                        overflow: 'justify',
                        formatter: function() {
                            return this.value;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: data
            };

            return $('#' +render).highcharts(options);
        } 
        var colores = ['#1D3E93','#98C94C','#E0F2BE','#cae4e9','#a1c517','#0B12E2','#8A0868','#009045','#FF9500','thistle','#73D7F6','#dca7a7','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'];
        function createChartPie(render,data){
            
            var options = {
                chart: {
                    renderTo: render,
                    type: 'pie',
                    height: 200,
                    width: 500,                    
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: ''
                }, //no toquen 4
                //
                colors: [colores[0], colores[8], colores[6], colores[4], colores[7], colores[1], colores[2]],
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) 
                                {
                                    var paraAbrir = this.name.toLowerCase();
                                    if (paraAbrir === "pendientes validar" || paraAbrir ===  'sin folio')
                                    {
                                        var opcion = 1;
                                        if (paraAbrir === "sin folio") opcion = 2; 
                                        abrirPopup(opcion);
                                    }
                                }
                                }
                            },
                        depth: 40,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y}',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },               
                series: [{
                    data: data
                }]
           };
           /*var prevent = 0;
           var infoextra = '';
           alert(JSON.stringify(data));
           for (i in data)
           { 
               if (data[i].y > 0) 
               {
                   prevent++; 
                   infoextra = data[i].name +": " + data[i].y;
               }
           } 
            if (prevent > 1)*/ { return $('#' +render).highcharts(options); }
            //else { $('#' +render).html('<div style="padding: 10px;">No hay suficientes datos para una grafica. ' + infoextra +  "</div>"); }
            return '';
        }
        
        function createChartLinea(render,categoria, data){
            if (typeof (data[1]) !== 'undefined') {
            var maxHeight = 0;
                for (i in data[1].data){ 
                    if (data[1].data[i] > maxHeight) {
                        maxHeight = data[1].data[i]; 
                       
                    }
                }
            }
            if (maxHeight > 200) maxHeight = 200; 
            var options = {
                chart: {
                    renderTo: render,
                    height: 200,
                    width: 600                    
                },
                xAxis: {
                   categories:  categoria
                },
                yAxis: [{
                    min: 0,
                    max: maxHeight,
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                  },{
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }, {
                    title: {
                        text: ''
                    },
                    min:0,
                    opposite: true
                    }],
                title: {
                    text: ''
                },
                 tooltip: {
                    shared: true
                },
                colors: [
                         '#a1c517','#0082b6','#b88fef','#009045','#db004f'
                        ],
                series: 
                
                [
                { type: 'spline', name: data[1].name, data: data[1].data},//programados
                 { type: 'column', name: data[0].name, data: data[0].data},//programados
                  {type: 'column', name: data[2].name, data: data[2].data}//programados
                ]
           };
            //alert(JSON.stringify(data));
            return $('#' +render).highcharts(options);
        }
    </script>

       {%if idproyectos == 41 %}
        <style>
        .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
       }            
        </style>
        {%endif%}
        
    <div class="container">
         <div class="row">
                 <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitores.pais' | trans}}: </label>                 
                    <select class="form-control" id="pais">
                        <option value="TODOS">{{'inbox.all' | trans | upper}}</option>
                        <option value="37">Costa Rica</option> 
                        <option value="36">El Salvador</option>
                         <option value="35">Guatemala</option>                    
                        <option value="30">Honduras</option>
                        <option value="32">Nicaragua</option> 
                    </select>
                </div>              
                <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                    <input class="form-control" type="text" id="Filtros_fechaIni" value="">
                </div>
                <div class="col-lg-2"  style="margin-top: 1%">
                    <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                    <input class="form-control" type="text" id="Filtros_fechaFin" value="">
                </div>
                <div class="col-lg-2" id="parametros" style="margin-top: 1%">
                    <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                    <button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>                    
                </div>   
              {%if idproyectos != 41 %}
                <div class="col-lg-4">
                    <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >

                 </div>  
              {%endif%}
           </div>
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>{{'DASHBOARD PROGRAMACIÓN DIARIA MP SGP'| trans}}</h1>
                 </div>

        </div>                    
                         </div> 

        <div class="col-lg-18" id="chart">
       
           
                  
            <div class="row">
               <div class="col-lg-6">
                  <div class="panel panel-primary" style="height: auto;">
                      <div class="panel-heading">{{'Cumplimiento de la programacion' | trans}}</div>
                      <div class="panel-body fixed-panel" id="chart1">

                      </div>
                  </div>

              </div>                
                  <div class="col-lg-6">
                    <div class="panel panel-primary" >
                        <div class="panel-heading">Status en SGP de los MP's ejecutados</div>
                        <div class="panel-body fixed-panel" id="chart8">

                        </div>
                    </div>

                </div>

            </div> <!-- end row5-->            
        </div>
                     <div class="col-lg-offset-9"  style="margin-top: 1%">
                            <div class="btn-group pull-right">
                                <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                                <ul class="dropdown-menu" role="menu">
                                     <li><a href="#" onclick="$('#auditTable').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                                </ul>
                            </div>
                    </div><br />
                    <div id="auditTable" style="margin-top: 40px;"></div>
                        <div id="tab"></div>
     <!-- end container-->
     <!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 80%; height: 600px; top: 300px;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header ">
            <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"><strong>{{ 'monitorii.detail' | trans }}</strong></h2>
            </div>
            <div class="modal-body" style="margin-top: 1%;">
                
            </div>
            
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                {{ 'monitorii.close' | trans }}
                <span class="glyphicon glyphicon-remove"></span>
            </button>
            </div>
        </div>
    </div>
</div>
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script>
         function generateTable(data){
            var table = '<table id="tab" class="table table-striped table-bordered table-hover responsive table-condensed nowrap" width="100%">';
            table += '<thead><tr class="btn-claro">';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center" >DIA</th><th style="vertical-align:middle; width: 50px;" class="text-center">PROGRAMADOS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">EJECUTADOS CON REPORTES COMPLETOS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">EJECUTADOS CON REPORTES INCOMPLETOS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">PENDIENTES POR CARGAR</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">RECHAZADOS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">SIN FOLIO</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">BANDEJA CLARO</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">PENDIENTES VALIDAR</th>';
             table += '<th style="vertical-align:middle; width: 50px;" class="text-center">VALIDADOS</th>';
            table += '</tr></thead><tbody>';
            var totalProg = 0, ejec_completos = 0, ejec_incompletos = 0;
            var totalPendientes = 0, total_rechazados = 0, total_sin_folio = 0;
            var total_claro = 0, total_pendvalidar = 0, total_validados = 0;
            for (var i in data) {
                table += '<tr>';
                table += '<td>' + data[i].DIA + '</td>';
{#                table += '<td>' + data[i].subcluster + '</td>';#}
                table += '<td>' + data[i].PROGRAMADOS + '</td>';
                    totalProg += parseInt(data[i].PROGRAMADOS);
                table += '<td>' + data[i]['EJECUTADOS CON REPORTES COMPLETOS'] + '</td>';
                    ejec_completos += parseInt(data[i]['EJECUTADOS CON REPORTES COMPLETOS']);
                table += '<td>' + data[i]['EJECUTADOS CON REPORTES INCOMPLETOS'] + '</td>';
                    ejec_incompletos += parseInt(data[i]['EJECUTADOS CON REPORTES INCOMPLETOS']);
                table += '<td>' + data[i]['PENDIENTES POR CARGAR'] + '</td>';
                    totalPendientes += parseInt(data[i]['PENDIENTES POR CARGAR']); 
                table += '<td>' + data[i].RECHAZADOS + '</td>';
                    total_rechazados += parseInt(data[i].RECHAZADOS); 
                table += '<td>' + data[i]['SIN FOLIO'] + '</td>';
                    total_sin_folio += parseInt(data[i]['SIN FOLIO']);
                table += '<td>' + data[i]['BANDEJA CLARO'] + '</td>';
                    total_claro += parseInt(data[i]['BANDEJA CLARO']);
                table += '<td>' + data[i]['PENDIENTES VALIDAR'] + '</td>';
                    total_pendvalidar += parseInt(data[i]['PENDIENTES VALIDAR']);
                table += '<td>' + data[i].VALIDADOS + '</td>';
                    total_validados += parseInt(data[i]['VALIDADOS']);
                table += '</tr>';
            } 
            var table2 = '';
            table += "<tr><td></td><td>"+totalProg+"</td><td>"+ejec_completos+"</td><td>" + ejec_incompletos +"</td>";
            table += "<td>"+ totalPendientes+"</td><td>"+ total_rechazados+"</td><td>"+total_sin_folio+"</td>";
            table += "<td>" + total_claro + "</td><td>"+ total_pendvalidar +"</td><td>"+ total_validados+"</td>";
            table += "</tr>";
            table += '</tbody></table>';
            
            $("#auditTable").empty().append(table);
            $("#tab").dataTable({
                 bSort: false, 
                iDisplayLength: 50,
        responsive: true,
                 buttons: [{
                        extend: 'excel',
                        text: 'Excel',
                        filename: 'SGP_Final',
                    }, 'colvis'] } ,
        );
        }
        </script>
{% endblock %}