{% 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;
            } 
            .btn-danger { color: #fff !important; }
 .btn-yellow {
    background-color: #ffff0c;
    color: #000000;
    background-image: -moz-linear-gradient(top, #ecea19, #ecea19);
    background-image: -ms-linear-gradient(top, #ecea19, #ecea19);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ecea19), to(#ecea19));
    background-image: -webkit-linear-gradient(top, #ecea19, #ecea19);
    background-image: -o-linear-gradient(top, #ecea19, #ecea19);
    background-image: linear-gradient(top, #ecea19, #ecea19);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'78cd51, endColorstr='#'5AAD34, GradientType=0);
    border-color: #ecea19 #ffff0c #ecea19;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-yellow {
    color: #fff;
    background-color: #000000;
    border-color: #ecea19;
}
.btn-orange {
    color: #fff;
    background-color: rgb(255, 165, 0) !important;
    border-color: #ecea19;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
            background-color: #aa0001;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }
</style>
<script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
<script>
    function ucwords (str) {
        str = str.toLowerCase();
        return (str + '')
          .replace(/^(.)|\s+(.)/g, function ($1) {
            return $1.toUpperCase()
          })
    }
    $(function () {
            $("#clear").click(function () {
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
                $('#SGPEstatus').val("");
                $('#folio_sitio').val("");
                $('#pais').val("");
            });           
      window.availableTags = [];
    $('#folio_sitio').click(
            function() 
            {
                var inicio = $('#Filtros_fechaIni').val();
                var fin = $('#Filtros_fechaFin').val();
                $.getJSON('{{path('jaxsgp_Folios')}}',{'FechaInicio':inicio,'FechaFin':fin }, function (data) {
                     for (f in data.folios)
                     {
                         window.availableTags[f] = data.folios[f].folio;
                     }
                     
                });
            }
        );
    $( "#folio_sitio" ).autocomplete({
            minLength: 4,  
            source: window.availableTags
    });
  
         
            $.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);
            
            if (mes < 10) mes = '0'+mes;
            var fechaI= f.getFullYear() +'-'+mes + "-01";
            var fechaF= f.getFullYear() +'-'+mes + "-"+f.getDate();            

            if ({{idproyectos}} != 34) {
                $('#pais').val({{idproyectos}});
                $('#pais').prop('disabled', true);
            }
            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();  
            }
            $('#Filtros_fechaIni').val(fechaI);
            $('#Filtros_fechaFin').val(fechaF);

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

        });
        function crearTabla(inicio, fin, pais, sgpestatus, foliostio)
        {   
              sgpestatus = (typeof(sgpestatus) !== 'undefined') ? sgpestatus : '';
              foliostio = (typeof(foliostio) !== 'undefined') ? foliostio : '';
              //alert(sgpestatus);
             // alert( foliostio );
                $.getJSON('{{path('jaxsgp_SitiosSGP',{'idproyectos':idproyectos})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais, 'sgpestatus' : sgpestatus, 'foliostio': foliostio}, function (data) {
                    generateTable(data.tabla1);
                    $.isLoading("hide");
            });
        }
        function getSGPClase(dayswarnInt)
        {
            var clases = '';
            if (dayswarnInt <= 1 )  clases = 'class="btn-success"'
                 else if (dayswarnInt == 2 ) clases = 'class="btn-yellow"'; 
                 else if (dayswarnInt == 3 )  clases = 'class="btn-orange"';
                 else if (dayswarnInt == 4 )  clases = 'class="btn-alert"';
                 else clases = 'class="btn-danger"';
            return clases;
        }
        function getbeforeSGPClase(dayswarnInt)
        {   
            var clases = '';
            if (dayswarnInt == 0 )  clases = 'class="btn-success"'
                 else if (dayswarnInt == 1 ) clases = 'class="btn-yellow"'; 
                 else if (dayswarnInt == 2 )  clases = 'class="btn-orange"';
                 else if (dayswarnInt == 3 )  clases = 'class="btn-alert"';
                 else clases = 'class="btn-danger"';
             return clases;  
        }
    </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;
       }   
        table.tablesorter thead tr th, table.tablesorter tfoot tr th {
            background-color: #00569C;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }       
        </style>
        {%endif%}
    <div class="container-fluid">
         <div class="row">
                 <div class="col-lg-1"  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.estados' | trans}}: </label>  
                    <select class="form-control" id="SGPEstatus">
                        <option value="">{{'inbox.all' | trans | upper}}</option>
                         <option value="SINFOLIO">SIN FOLIO</option>
                        <option>AUTORIZADO</option>
                        <option>AUTORIZADO POR GERENTE</option>
                        <option>EN PROCESO</option>
                        <option>INICIO</option>
                        <option>PENDIENTE</option>
                        <option>REALIZADO</option>
                        <option>RECHAZADO</option>
                        <option>VALIDADO</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"  style="margin-top: 1%">
                  <label>Folio:</label>
                  <input class="form-control" type="text" value="" id="folio_sitio" style="width: 200px;" />
              </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-1">
                    <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>{{'ALARMAS AUTOMATICAS MP PENDIENTES EN PWM y SGP'| trans}}</h1>
                 </div>
          </div>        
                    
                    <div class="row">
         <div class="col-lg-3"  style="margin-top: 1%">
                {{'ticketDetail.etiqueta.cantidad'| trans}}: <span id="cantidad" class="bold">0</span>
             </div>
             <div class="col-lg-offset-12"  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>
                    </div><br/><br/>
                    
                         </div> 

        
                    <div id="auditTable" class=""></div>
                        <div id="tab" class="row"></div>
     <!-- end container-->
  
    <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-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters">';
            table += '<thead><tr class="btn-claro">';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">PAIS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center" >ID SITIO</th>';
            table += '<th style="vertical-align:middle; width: 30px;" class="text-center" >SITIO</th>';
            table += '<th style="vertical-align:middle; width: 30px;" class="text-center" >SUPERVISOR</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">FECHA FIN PWM</th>';
           // table += '<th style="vertical-align:middle; width: 50px;" class="text-center" >INICIO SGP</th>';
           table += '<th style="vertical-align:middle; width: 50px;" class="text-center">ESTATUS SGP</th>';
             
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">FOLIO</th>';
           
              table += '<th style="vertical-align:middle; width: 10%;" class="text-center">FECHA DE <br />CREACIÓN DE FOLIO</th>';
            table += '<th style="vertical-align:middle; width: 10%;" class="text-center">FECHA DE <br />CARGA SGP</th>';
            
            table += '<th style="vertical-align:middle; width: 10%;" class="text-center">FECHA DE <br />APROBACIÓN SGP</th>';
          table += '<th style="vertical-align:middle; width: 10%;" class="text-center">DIAS TRANSCURRIDOS EN SGP</th>';
               
        table += '</tr></thead><tbody>';
             $("#cantidad").html(data.length);
             for (var i in data) {  
                table += '<tr>';
               table += '<td>' + data[i].PAIS + '</td>';
                table += '<td>' + data[i].MNEMONICO + '</td>';
                table += '<td>' + data[i].SITIO + '</td>';
                table += '<td>' + ucwords(data[i].SUPERVISOR) + '</td>';
                 table += '<td>' + data[i].FECHA_DE_TERMINACION +  '</td>';
                table += '<td>' + data[i].ESTATUS + '</td>';
                var classSol = '';
                if (data[i].FOLIO === '') classSol = 'class="btn-danger"';   
                //dias que se necesitan para poner el folio en rojo:
                //TRANSPIRADOS_FECHACREACION: es now() menos fechaCreacion del ticket
                //TRANSPIRADOS_FECHASOLICIT: es now() TRANSPIRADOS_FECHASOLICIT en sgp
                //asi que tam es fecha de solicitud - fecha de creacion, contando que now() se cancela
                //Fecha de creacion es Fecha de Terminacion aqui, que aparece como fecha fin PWM
                //SIMPLEMENTE PONE ROJO EN EL FOLIO CUANDO FECHA DE CREACION DE FOLIO ES MAYOR QUE FECHA FIN PWM
                var tam = parseInt(data[i].TRANSPIRADOS_FECHACREACION) - parseInt(data[i].TRANSPIRADOS_FECHASOLICIT);
                var dayswarn_2 = data[i].DIAS_TRANSPIRADOS;
                var dayswarn = data[i].TRANSPIRADOS_FECHACREACION;
                var clases = '', tiempoSGP  = '';
                if (parseInt(data[i].TRANSPIRADOS_FECHASOLICIT) <= parseInt(dayswarn)) 
                { tiempoSGP = parseInt(data[i].TRANSPIRADOS_FECHASOLICIT) - 1; }
                else {  tiempoSGP = parseInt(dayswarn) - 1; }
                //console.log(parseInt(data[i].TRANSPIRADOS_FECHASOLICIT) + " >= " +parseInt(dayswarn));
                var ense = '', folioStyle = '';
                if (tam > 0 && data[i].FOLIO != '') { folioStyle = " style='background: #f1360a; color: #fff;'";}
                table += '<td ' + classSol + ' ' + folioStyle + '>' + data[i].FOLIO + '</td>';
                if (data[i].FOLIO !== '' && data[i].FIN === '') clases = getbeforeSGPClase(tiempoSGP);
                else if (data[i].FIN !== '')
                {
                    //console.log(parseInt(data[i].DIAS_TRANSPIRADOS) + " - " + tiempoSGP);
                    var tiempodeReportar = tiempoSGP - (parseInt(data[i].DIAS_TRANSPIRADOS) - 1);
                    if (tiempodeReportar > 3) { clases = 'class="btn-danger"'; }
                    //var ense = "(" + tiempoSGP + " - " + (parseInt(data[i].DIAS_TRANSPIRADOS) -1) + " ) <-----";
                }
                
                // diasOffset = 3;//para dias transpirados, es 1, 2, 3, 4. Aqui es lo mismo, pero añadimos 3 dias
                 var clases_2 = '', tiempoAprobacionSGP = '-';
                 if (dayswarn_2 != '' && data[i].ESTATUS !== "VALIDADO") 
                 {
                     clases_2 = getSGPClase((parseInt(data[i].DIAS_TRANSPIRADOS) - 1));
                     tiempoAprobacionSGP = (parseInt(data[i].DIAS_TRANSPIRADOS) - 1) + " DIAS";
                 } else if ( (parseInt(data[i].DIAS_TRANSPIRADOS) - 1) > 0 ) tiempoAprobacionSGP = (parseInt(data[i].DIAS_TRANSPIRADOS) - 1) + " DIAS";
                 table += '<td>'+ data[i].FECHA_SOLICITUD + '</td>';
                 table += '<td ' + clases + '>' + ense  + " " +data[i].FIN + '</td>';//fecha de carga SGP
                 //console.log("aprobacion unix: " + data[i].APROBACION_DIASDIFF);
                // console.log("Fin unix: " + data[i].FIN_DIASDIFF);
                 var dias_pasados = '', fechaAprobStyle = '';
                 if (data[i].APROBACION_DIASDIFF > 0 && data[i].FIN_DIASDIFF > 0)
                 {
                      dias_pasados =  data[i].FIN_DIASDIFF - data[i].APROBACION_DIASDIFF;
                      //console.log("--->dias pasados es " + dias_pasados + " <---");
                      if (dias_pasados > 5) fechaAprobStyle = " style='background: #f1360a; color: #fff;'";
                 }
                 if (data[i].FECHA_APROBACION == 'NA') data[i].FECHA_APROBACION = '';
             if  (!data[i].FECHA_APROBACION && data[i].ESTATUS == "VALIDADO")
             //si no hay fecha de aprobacion y es validado
             {
                  tiempoAprobacionSGP = "0 DIAS";//PELIGROSO PATCH!
                  data[i].FECHA_APROBACION = data[i].FIN;//PELIGROSO PATCH!
             }
             table += '<td ' + clases_2 + ' ' + fechaAprobStyle +' >'+ data[i].FECHA_APROBACION + '</td>'; 
             
             var contrato = '';
             //aviso y color para poner en DIAS TRANSCURRIDOS EN SGP:
             if  (data[i].FECHA_APROBACION)//si hay fecha de aprobacion, los dias transcurridos son a base de ella:
             {
                var fechaAprobSplit = data[i].FECHA_APROBACION.split('/');
                fechaAprobSplit = fechaAprobSplit[2] + "-" + fechaAprobSplit[1] + "-" + fechaAprobSplit[0];
                var fechaAprobSplitUnix = parseInt((new Date(fechaAprobSplit).getTime() / 1000).toFixed(0));
                var fechaFinSplit = data[i].FIN.split('/');
                fechaFinSplit = fechaFinSplit[2] + "-" + fechaFinSplit[1] + "-" + fechaFinSplit[0];
                var fechaFinSplitUnix = parseInt((new Date(fechaFinSplit).getTime() / 1000).toFixed(0));
                tiempoAprobacionSGP =  Math.abs(Math.ceil((fechaFinSplitUnix - fechaAprobSplitUnix) / (3600 * 24))) +  " DIAS"; 
             }
             
             
             
             if ( parseInt(tiempoAprobacionSGP) > 5 )
             {
                 fechaAprobStyle = "style='background: #f1360a; color: #fff;'";
                 contrato = " <span>(FUERA DE CONTRATO)</span></a>";
             } else if ('class="btn-danger"' != clases_2 && " style='background: #f1360a; color: #fff;'" != fechaAprobStyle) 
             {   
                 //if (fechaAprobStyle != '') alert(fechaAprobStyle);
                 clases_2 = fechaAprobStyle = '';
             }
            table += '<td ' + clases_2 + ' ' + fechaAprobStyle +'>'+ tiempoAprobacionSGP + contrato + '</td>';
                
                 table += '</tr>';
            } 
            
            table += '</tbody></table>';
            
            
            $("#auditTable").empty().append(table);
            $("#tab").dataTable({
                 bSort: false, 
                 pageLength: 100,
               lengthMenu: [ [ 20, 50, 100, 250, 500, -1 ], 
                    [ 20, 50, 100, 250, 500, 'Todos' ] ],
        responsive: true,
                 buttons: [{
                        extend: 'excel',
                        text: 'Excel',
                        filename: 'SGP_Final',
                    }, 'colvis'] } ,
        );
        
        
          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
                    $("#tab").tablesorter({
                        theme: 'red',
                        // 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);
        
        
        }
        </script>
         <div id="pager" class="pager">
            <form>
               <select class="pagesize" title="Select page size"  style="display: none;">
                    <option value="100">100</option>
                </select>
            </form>
        </div>
{% endblock %}