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

{% endblock %}

{% block dashboard %}
    <style>
       .double-scroll {
            width: 100%;
            margin-bottom: 20px;
        }

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

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

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

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

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        #menuTop {
            margin-top: 30px;
        }
       /* .table{
            font-size: 12px;
            width: 3000px;
        }
*/
        .estilod{
            background-color: green;

        }

        .estilof{
            background-color: red;

        }
        espacio{
            padding-top: 20px;
        }
        .btn-orange {
            color: #fff;
            background-color: rgb(255, 165, 0) !important;
            border-color: #ecea19;
        }        

</style>
      {%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;
       }    
            .modal-header{
                background:#00569C;
                font:oblique bold;
                text-transform: uppercase;
            }   
        table.tablesorter thead tr th {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }            
        </style>
        {%else%}
            <style>
        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

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

            }
            .modal-header{
                background:#aa0001;
                font:oblique bold;
                text-transform: uppercase;
            }
            
        table.tablesorter thead tr th {
            background-color:#aa0001;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }            
            </style>
            {%endif%}
  <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    
    <script>
        var idtr='';
          $(function () {
              $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                    $("#cantidad").html(0);  
                   
                    getReporte();
                    
                     //$('#myModalDetalle').modal();  
            });

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

                    }
            }); 

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

         $("td").live("click",function(e){
           
             data = {};
             valor=null;
                var id = $(this).attr("id");
                 if(id)
            {
               valor = id.split('-');
                var pais=valor[0];
                var tipo=valor[1];
                //alert(pais);
                //alert(tipo);
                data['pais'] =pais;
                data['tipo'] =tipo;
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val(); 
                 $.isLoading({
                    text:       "Loading"
                });

                  $.getJSON('{{path('MonitorSmartRsc_PendienteDetalleClaro')}}',data, function (data) {
                    
                       var datos  = data.datos;
                       
                       console.log(data.query);
                        document.getElementById('myModalLabel').innerHTML='DETALLES DE REPORTES <br>CANTIDAD DE REGISTROS: '+datos.length; 
                        $("#detalleT").empty().append(createDetalle(datos));
                        $('#myModalDetalle .modal-body').empty();
                        $('#myModalDetalle').modal();
                      data.forma;

            }).done(function(datos){


            
                $('#myModalDetalle .modal-body').empty();
                var tierra = ''
                tierra += '<div class="table-responsive">'
                 tierra += '</div>'
                $('#myModalDetalle .modal-body').append(tierra);
                 $.isLoading("hide");
            });

               // alert($(this).attr("id"));
               
}});
            $('#generar').trigger('click');
        });
        /*function reporte()
        {
            
           data = {};

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

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

                            }
                    $("#cantidad").html(datos.length);
                    $("#primer_reporte").empty().append(createTable(datos));
                    //$("#detalleT").empty().append(createDetalle(datos));
                    //$("#primer_reporte" ).slider();
                    //alert(datos[0]['idproyectos']);
                    /////////////////////////////////////////////////////////
                    
                    $("#cantidad").html(datos.length);
                   var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
      };
                     
                    
                    
                     var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                    // initial sort set using sortList option
                    $(".table1").tablesorter({
                        theme: 'blue',
                        // sort on the first column and second column in ascending order
                        widgets: ["zebra", "filter"],
                        widgetOptions: {
                            // extra css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter: '',
                            // If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows: false,
                            // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                            // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                            filter_hideFilters: false,
                            // Set this option to false to make the searches case sensitive
                            filter_ignoreCase: true,
                            // jQuery selector string of an element used to reset the filters
                            filter_reset: '.reset',
                            // Use the $.tablesorter.storage utility to save the most recent filters
                            filter_saveFilters: true
                        }
                    }).tablesorterPager(pagerOptions);
                    
                    
                    /////////////////////////////////////////////////////////
                    
                    $.isLoading("hide");
                });
       }*/
        
        
        function createTable(datos){
            
                var header = Object.keys(datos[0]);
                var table = '<table class="table relleno table-bordered table-hover table-striped table-responsive tablesorter tablesorter-blue " id="tables23"> <thead>';
              table+='  <tr class="btn-claro">';
                      for(i=0;i<header.length;i++)
                      {
                          table+="<th width='20%'>"+header[i]+"</th>"
                      }
               table+='</tr></thead>';
                for(i=0;i<datos.length;i++)
                {
                   
                   table+="<tr>";
                    for(j=0;j<header.length;j++)    
                    {
                        if(header[j]=='PAIS')
                        {
                           
                           Style='text-align:left'
                            clase='';
                        }
                        else
                        {
                            Style='text-align:right'
                           clase='';
                        }
                        if(header[j]=='PENDIENTES POR REVISIÓN')
                        {
                        table +='<td style="text-align:right" id="'+datos[i]['PAIS']+'-REALIZADO'+'"class="">'+datos[i][header[j]]+'</td>';
                        }
                         if(header[j]=='SIN FOLIO')
                        {
                        table +='<td id="'+datos[i]['PAIS']+'-SIN FOLIO" style="'+Style+'">'+datos[i][header[j]]+'</td>';
                        }
                        if(header[j]!='PENDIENTES POR REVISIÓN'&&header[j]!='SIN FOLIO')
                        {
                            table +='<td class="std" style="'+Style+'">'+datos[i][header[j]]+'</td>';
                        }
                }
                     
                   }
                     
                   table+="</tr></table>";    
               return table;
              
    }
       //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       function getReporte(){
                
                data = {};
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val(); 
            
                  $.getJSON('{{path('MonitorSmartRsc_PendienteClaro',{'idproyectos':idproyectos})}}',data, function (data) {
                    
                   var datos  = data.datos;
                 
                    if(datos.length === 0){
                        
                        $("#septima_grafica").empty();
                        $("#septima_grafica").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                        $.isLoading("hide");
                        return false;
                        }
                        $.isLoading("hide");

                         var region = [];
                         var revisado = []; 
                         var pendiente = [];
                         var noReincidentes = [];
                         var porcentajeNoR = [];
                         
                        for (var i = 0; i < data.datos.length; i++)
                        {
                           
                        region.push(data.datos[i].PAIS);
                         var valoresP=parseInt(data.datos[i]['PENDIENTES POR REVISIÓN']); 
                        var valoresR=parseInt(data.datos[i]['SIN FOLIO']);
                         revisado.push(valoresP);
                        pendiente.push(valoresR);
                        
                        
                        }
                        
                    // Se declara los colores para las series
                    var colors = ['#81BEE1','#E3282E']; 
                    
                    var septimaGraficaOpt = {
                    chart: {
                                type: 'column',
                                renderTo: 'septima_grafica',
                                options3d:{
                                enabled: true,
                                alpha: 10,
                                beta: 10,
                                viewDistance: 45,
                                depth: 30
                              }
                            },
                            title: {
                                text: ''
                            },

                            xAxis: {
                                categories: region
                            },

                            yAxis: {
                                allowDecimals: false,
                                min: 0,
                                title: {
                                    text: ''
                                }
                            },
                            stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                              }
                            },
                            legend: {
                               align: 'right',
                                verticalAlign: 'middle',
                                layout: 'vertical',
                                x: -30,
                                y: 25,
                                floating: false,
                                backgroundColor: (Highcharts.theme && Highcharts.theme.background5) || 'white',
                                borderWidth: 1,
                                shadow: false
                           },
                            tooltip: {
                                headerFormat: '<b>{point.key}</b><br>',
                                pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
                            },
                            plotOptions: {
                            series: {
                                
                            cursor: 'pointer',
                            borderWidth: 0,
                            stacking: 'normal',
                            depth: 60,
                            dataLabels: {
                                enabled: true,
                           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            },
                             point: {
                                events: {
                                    click: function(e) {  

                                        var region = e.currentTarget.category,
                                        fechaIni = $("#Filtros_fechaIni").val(),  
                                        fechaFin = $("#Filtros_fechaFin").val();  

                                        $('#myModal .modal-body').empty().isLoading();
                                        generateModal('{{ path('MonitorSmartRsc_PendienteClaro',{'idproyectos':idproyectos})}}');
                                        $('#myModal').modal('show');
                                        }
                                    }
                                }
                            } 
                        },
                            series: [{
                               name: 'SIN FOLIO',
                                data: pendiente,
                                stack: 'reincidente',
                                color: colors[0]
                            }, {
                                name: 'PENDIENTES POR REVISIÓN',
                                data: revisado,
                                stack: 'reincidente',
                                color: colors[1]
                            }]
                        };
                    var chart7 = new Highcharts.Chart(septimaGraficaOpt);
                      $("#cantidad").html(datos.length);
                    $("#primer_reporte").empty().append(createTable(datos));  
                    });
                     //reporte();
                    
                }
                        
          function createDetalle(datos){
            
                var header = Object.keys(datos[0]);
                
                
                var table = '<table class="table relleno table-bordered table-hover table-striped table-responsive tablesorter tablesorter-blue " id="tables23"> <thead>';
              table+='  <tr class="btn-claro">';
                      for(i=0;i<header.length;i++)
                      {
                          table+="<th>"+header[i]+"</th>"
                      }
               table+='</tr></thead>';
                for(i=0;i<datos.length;i++)
                {
                   
                   table+="<tr>";
                    for(j=0;j<header.length;j++)    
                    {
                    
                        if(header[j]=='FECHA FIN PWM' || header[j]=='FECHA DE CARGA SGP')
                        {
                         Style='text-align:right'
                             
                   
                        }
                        else
                        {
                          
                           Style='text-align:left';
                            
                        }
                table +='<td style="'+Style+'">'+datos[i][header[j]]+'</td>';
                 
                    /////table+="<td class='"+clase+"'>"+datos[i]["espera"]+"</td>";
                 
                  
                    }
                     
                }   table+="</tr></table>";    
               return table;
              
    }
    function ides(id)
{
  idtr=id.replace('mp','');
  idtr=idtr.split('-');
 
}
    </script>

 <div class="container-fluid">
        <div class="row">
            <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="{{ dateStart }}">
            </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="{{ dateEnd }}">
           
            </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="row">
                <div class="col-lg-6">
                        <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >

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

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1> {{'INFORMES PENDIENTES POR REVISIÓN CLIENTE'| trans}}</h1>
                   
                 </div>

        </div>
             <div class="row">
              <div class="col-lg-12"  id="septima_grafica" style="margin-top:1%"></div>
              <div class="col-lg-8 col-md-offset-2" id="primer_reporte" style="margin-top:1%"></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"></h2>
                </div>
                <div class='col-md-12'>
                    <div class='col-md-12'>
                         <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="$('#myModalDetalle').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                <div class='col-md-12' id='detalleT'  style='height:315px; overflow: scroll;'>
                    
                </div>
                </div>
                <div class="modal-footer">
                   
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

                </div>
            </div>
        </div>
    </div>
{% endblock %}