{% 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 () {
         $("#clear").click(function () {
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
                $('#SGPEstatus').val("");
                $('#folio_sitio').val("");
                $('#pais').val("");
            }); 
        $('#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);
            $.isLoading({
                    text:       "Loading"
                });
            crearTabla($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val());
            $("#generar").click(function() {
                $.isLoading({
                    text:       "Loading"
                });//
                crearTabla($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val(),$('#pais').val(), $('#folio_sitio').val());
               
            });
    });
    function crearTabla(inicio, fin, pais, foliostio)
    {   
          //sgpestatus = (typeof(sgpestatus) !== 'undefined') ? sgpestatus : '';
          foliostio = (typeof(foliostio) !== 'undefined') ? foliostio : '';
          $.getJSON('{{path('jax_ReportesNoEntg',{})}}',{'FechaInicio':inicio,'FechaFin':fin,'pais':pais, 'foliostio': foliostio}, function (data) {
                generateTable(data.tabla1);
                  $.isLoading("hide");
                
        });
    }
    </script>
            
                        
  <div class="modal fade" id="myModalEntregables" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="height: auto; max-height: 600px; overflow-y: auto;">
                <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">Entregables en GDrive</h2>
                </div>
                <div class="modal-body">

            </div>
               

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


           <div class="row">
                 <div class="col-lg-2"  style="margin-left: 2%; 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> 
                        <option value="57">Panamá</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: 4%">
                    <h1>{{'REPORTES NO AUTOMATIZADOS'| trans}}</h1>
                    <br />
                 </div>
          </div>        
                    
                    <div class="row">
         <div class="col-lg-3"  style="margin-top: 1%; margin-left: 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 id="auditTable" class=""></div>
                        <div id="tab" class="row"></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 formatearFecha(fecha, usarhora)
        { return fecha;
            /*if (typeof(usarhora) != 'undefined')
            {
            var nf = fecha.split(' ');
            var hora = nf[1];
            nf = nf[0];
            } else { hora = ''; nf = fecha; }
            var nf_2 = nf.split('-');
            return nf_2[2] + "/" + nf_2[1] + "/" + nf_2[0] +  " " + hora;*/
        }
        function generateTable(data){
            var $paises = [];
            $paises[36] = "El Salvador";
            $paises[35] = "Guatemala";
            $paises[30] = "Honduras";
            $paises[32] = "Nicaragua";
            $paises[57] = "Panama";
            $paises[37] = "Costa Rica";
    
            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">ID Ticket</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">PAIS</th>';
            table += '<th style="vertical-align:middle; width: 50px;" class="text-center">MNEMONICO</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">ESTATUS</th>';
              table += '<th style="vertical-align:middle; width: 10%;" class="text-center">ENTREGABLES</th>';
            
            table += '<th style="vertical-align:middle; width: 10%;" class="text-center">INICIO DE PROGRAMADA</th>';
             table += '</tr></thead><tbody>';
            $("#cantidad").html(data.length);
            var documentowithURL = '';
            for (var i in data) { 
                   documentowithURL = (data[i].fileid != '') ? "<a target='_blank' style='text-decoration: underline;' href='https://drive.google.com/file/d/"+ data[i].fileid +"/view'>" + data[i].documento +"</a>": data[i].documento; 
                   table += "<tr>";
                   table += "<td>" 
                   table += "<a target='_blank' style='text-decoration: underline;' href='https://pwmrlamfsoeri.com/site/web/app.php/en/controlCasos/ticketDetalle/" + data[i].pais +"/" + data[i].idticket +"?idinforme=0&accion=Ticket+Detalle'>"        
                   + data[i].idticket +"</a></td>";
                   table += "<td>" + $paises[data[i].pais] +"</td>";
                   table += "<td>" + data[i].mnemonico +"</td>";
                   table += "<td>" + data[i].folio +"</td>";
                   var estatusStyle = '';
                   if (data[i].estatus.toUpperCase() == 'VALIDADO') { estatusStyle = 'style=\'background: #00AA00; color: #fff;\''; }
                   else if (data[i].estatus.toUpperCase() == 'REALIZADO')
                   { estatusStyle = 'class=\'btn-yellow\''; }
                   else if (data[i].estatus.toUpperCase() == 'AUTORIZADO')
                   { estatusStyle = 'style=\'background: #00AA00; color: #fff;\''; }
                   else estatusStyle = 'style=\'background: #f1360a; color: #fff;\'';
                  table += "<td " + estatusStyle + " >" + data[i].estatus +"</td>";
                    table += "<td><a href=\"javascript:void(0)\" onClick=\"openEntregables('"+data[i].mnemonico +"', '" + data[i].pais +"', '"+ data[i].idticket +"', '"+ data[i].inicio_programada+"')\">Entregables</a></td>";
                  
                   table += "<td>" + formatearFecha(data[i].inicio_programada) +"</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: 'ReportesEntregados_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);
                    
        }
        
         function openEntregables(mnemomico, idproyectos, idticket, inicioprogramada){
           $('#myModalEntregables .modal-body').html('Cargando');
           $('#myModalEntregables').modal();
           $.ajax({
            method: "POST",
            url: "{{ path('getggdriveentreg')}}",
            data: {mnemomico: mnemomico, idproyectos: idproyectos, idticket: idticket, inicioprogramada: inicioprogramada}
          })
            .done(function( data ) {
                //s":{ "total":5,"casoEspecial":false}}
                $('#myModalEntregables .modal-body').html('<h2>Ticket: ' + idticket + "</h2><table style='width: 300px;'>");
                if (data.entregables.total > 0)
                {
                $('#myModalEntregables .modal-body').append('<tr><td class="btn-claro" style="padding: 5px;">Entregables Necesarios:</td><td class="btn-claro" style="padding: 5px;">' + data.entregables.total + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_ACCESO:</td><td style="padding: 3px;">' + data.entregables.MAPLE_ACCESO + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_INFRA:</td><td style="padding: 3px;">' + data.entregables.MAPLE_INFRA + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_ENERGIA:</td><td style="padding: 3px;">' + data.entregables.MAPLE_ENERGIA + "</td></tr>");
               
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_MG:</td><td style="padding: 3px;">' + data.entregables.MAPLE_MG + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_RECT:</td><td style="padding: 3px;">' + data.entregables.MAPLE_RECT + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_TIERRA:</td><td style="padding: 3px;">' + data.entregables.MAPLE_TIERRA + "</td></tr>");
                $('#myModalEntregables .modal-body').append('<tr><td style="padding: 3px;">MAPLE_AA:</td><td style="padding: 3px;">' + data.entregables.MAPLE_AA + "</td></tr>");
                
                $('#myModalEntregables .modal-body').append('<tr><td colspan="2" style="padding: 3px;"><span style="color: #a00;">' + data.errores +  "</span></td></tr>");
                } else  $('#myModalEntregables .modal-body').append('<span style="color: #a00;">No hay informacion para los entregables</span>');
                
                $('#myModalEntregables .modal-body').append('</table><h2>Lo que Tenemos:</h2><ul>');
                
               
                for (i in data.tabla1)
                {
                    
                    $('#myModalEntregables .modal-body').append("<li><a target='_blank' style='text-decoration: underline;' href='https://drive.google.com/file/d/"+ data.tabla1[i].drive_id +"/view'>" + data.tabla1[i].filename.substring(0, 60) + "...</a></li>");
                }
                $('#myModalEntregables .modal-body').append("</ul>");
            });
        }
        </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 %}