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

{% block menuTop %}{% endblock %}


{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <style>
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

        /* pager wrapper, div */
        .pager {
            padding-left: 0;
            margin: 0;
            text-align: left;
            list-style: none;
        }

        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }

        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }

        /* pager output text */
        .pager .pagedisplay {
            font-size: 14px;
            font-weight: bold;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

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

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }

        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

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

        .wrapper {
            padding-bottom: 50px;
        }

        .header {
            background: #000000;
        }

        .header .container {
            padding-bottom: 20px;
        }

        .header .container h1 {
            color: #FFF;
            line-height: 50px;
            margin-top: 30px;
            margin-bottom: 0;
        }

        .header .container h3 {
            color: #E0E0E0;
            font-size: 16px;
            margin-top: -5px;
        }

        .header .container h3 a {
            color: #66aacc;
        }

        .header .container h3 a:hover {
            color: #b3d5e6;
        }

        .top-menu {
            position: absolute;
            z-index: 9999;
        }

        .top-menu .nav-list {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #CCC;
            margin: 20px;
            position: fixed;
            right: 0;
        }

        pre, .well {
            background: #FFFFFF;
        }

        .syntax-container {
            background: #FCFCFC;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            border: 1px solid #e3e3e3;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }

        .isloading-wrapper.isloading-right {
            margin-left: 10px;
        }

        .isloading-overlay {
            position: relative;
            text-align: center;
        }

        .isloading-overlay .isloading-wrapper {
            background: #FFFFFF;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            display: inline-block;
            margin: 0 auto;
            padding: 10px 20px;
            top: 10%;
            z-index: 9000;
        }

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

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

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

        #menuTop {
            margin-top: 30px;
        }

        body {
             /*margin-top: 80px;*/
        }

        h1 {
            font-size: 36px;
        }


        /*color de cabecera de tabla*/
        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #307aba;
            border-color: #dedede;
            font-weight: normal;
        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #307aba;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #307aba;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #307aba;
        }

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

        #filtro{
            padding: 20px 0;
        }

        #logo{
            max-height: 70px;
        }
    </style>

{% endblock %}

{% block javascripts %}

    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>

    <script>
        $(function(){
            $('#fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    maxDate: new Date(),
                    defaultDate: new Date(),
            });

            $('#fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
                    maxDate: new Date(),
                    defaultDate: new Date(),
            });

            $('#generar').click(function() {
                $.isLoading({
                    text: 'Loading',
                });
                getReporte();
            });

            $('.revisar').live('click', function(){

              $('#comentario').hide();

                var sitio = $(this).attr('id');
                var asp = $(this).data('asp');
                var driveft = $(this).data('driveft');
                var driveftx = $(this).data('driveftx');

                $('#modalRevision').modal();
                $('#revizarTitle').text(`Revisión de sitio ${sitio}`);

                var data = {'id':sitio}
                $.getJSON('{{ path('rdviva_selectReportes') }}', data, function (data) {
                  var reporte = data.monitor;
                  $('#accion').val('Seleccione');
                  $('#ValidarComentario').val('Seleccione');
                  $('#RechazarComentario').val('Seleccione');
                  $('#comentarioRechazo').val('');
                  $('#repuesto').empty();
                  $('#repuesto').append('<option value="0">Seleccione</option>');
                  for(var c = 0; c < reporte.length; c++){
                      $('#repuesto').append("<option value='"+reporte[c]['value']+"'>"+reporte[c]['nombre']+"</option>");
                  }

                })

                $('#driveft').val(driveft);
                $('#driveftx').val(driveftx);
                $('#sitio').val(sitio);
                $('#asp').val(asp);

            });

          /*  $('.detalles').live('click', function(){
                $('#bodyDetail').empty();
                var data ={};
                var sitio = $(this).data('sitio');
                var nombre = $(this).data('nombre');

                data['sitio'] = sitio;

                $('#detailTitle').text(`Detalles Sitio ${sitio}-${nombre}`);

                $.isLoading({
                    text: 'Cargando...'
                });

                $.getJSON('{{path('rdviva_getmodalDetail')}}', data, function(data){
                    var details = data.modal;
                    for( var i in details){
                        var d = details[i];
                        $('#bodyDetail')
                        .append(`<tr>
                                    <td>${d.FECHA}</td>
                                    <td>${d.ENTRADA}</td>
                                    <td>${d.SALIDA}</td>
                                </tr>`);
                    }

                   $.isLoading('hide');
                })
                $('#modalDetalles').modal();

            });*/

////////////////////Open modal entregables CHECK IN/////////////////////////////
            $(".detalles1").live('click',function(){
              var id = $(this).attr("id");

              $("#myModalDetalle1 .modal-body").empty();

                     $("#myModalDetalle1").modal();
                     var data = {'sitio':id}
                     $.getJSON('{{ path('rdviva_DetalleEntregableIn') }}',data,function(data){
                     $("#myModalDetalle1 .modal-body").html(createTable(data.monitor));
                      $("#myModalDetalle1").modal();
                     });
                });
////////////////////////////////////////////////////////////////////////////////

////////////////////Open modal entregables CHECK OUT/////////////////////////////
            $(".detalles2").live('click',function(){
              var id = $(this).attr("id");

              $("#myModalDetalle2 .modal-body").empty();

                     $("#myModalDetalle2").modal();
                     var data = {'sitio':id}
                     $.getJSON('{{ path('rdviva_DetalleEntregableOut') }}',data,function(data){
                     $("#myModalDetalle2 .modal-body").html(createTable(data.monitor));
                      $("#myModalDetalle2").modal();
                     });
                });
////////////////////////////////////////////////////////////////////////////////

$(".detallesAtp").live('click',function(){

  var id = $(this).attr("id");

  $("#myModalDetalleAtp .modal-body").empty();

         $("#myModalDetalleAtp").modal();
         var data = {'sitio':id}
         $.getJSON('{{ path('rdviva_DetalleAtp') }}',data,function(data){
         $("#myModalDetalleAtp .modal-body").html(createTable(data.monitor));
          $("#myModalDetalleAtp").modal();

         });
    });


$(".detallesAtpTx").live('click',function(){

  var id = $(this).attr("id");

  $("#myModalDetalleAtpTX .modal-body").empty();

         $("#myModalDetalleAtpTX").modal();
         var data = {'sitio':id}
         $.getJSON('{{ path('rdviva_DetalleAtpTx') }}',data,function(data){
         $("#myModalDetalleAtpTX .modal-body").html(createTable(data.monitor));
          $("#myModalDetalleAtpTX").modal();

         });
    });

////////////////////Open modal ACCIÓN //////////////////////////////////////////
            /*$(".accionR").live('click',function(){
              var id = $(this).attr("id");

              $("#modalRevision .modal-body").empty();

                     $("#modalRevision").modal();
                     //var data = {'sitio':id}
                     //$.getJSON('{{ path('rdviva_DetalleEntregableOut') }}',data,function(data){
                     $("#modalRevision .modal-body");//.html(createTable(data.monitor));
                     $("#modalRevision").modal();
                     //});
                });*/
////////////////////////////////////////////////////////////////////////////////

            $('#accion').change(()=>{
                var selected = $('#accion option:selected').text();

                $('#btnSave').removeAttr('disabled');

                if (selected == 'Validar'){
                    var validarSelected = $('#ValidarComentario option:selected').text();
                    $('#ValidarComentario').show();
                    $('#RechazarComentario').hide();
                    $('#comentario').hide();

                }

                if(selected == 'Rechazar'){
                    $('#RechazarComentario').show();
                    $('#ValidarComentario').hide();

                    $('#RechazarComentario').change(()=>{
                        var rechazoSelected = $('#RechazarComentario option:selected').text();
                        if(rechazoSelected == 'Error en Foto'){
                            $('#comentario').show();
                        }else{
                            $('#comentario').hide();
                        }

                    });
                }

                if(selected == 'Seleccione' ){
                    $('#ValidarComentario').hide();
                    $('#RechazarComentario').hide();
                    $('#comentario').hide();
                }

            });

            $('#btnSave').live('click', function(){

                $.isLoading({
                    text: 'Guardando...'
                });
                var rep =  $('#repuesto option:selected').text();

                var data={
                    datoSitio: $('#sitio').val(),
                    asp: $('#asp').val(),
                    accion: $('#accion option:selected').text(),
                    reporte: $('#repuesto option:selected').text(),
                    aprobado: $('#ValidarComentario option:selected').text(),
                    rechazado: $('#RechazarComentario option:selected').text(),
                    comentario: $('#comentarioRechazo').val()
                }

                $.ajax({
                    type: "POST",
                    url: '{{path('rdviva_notificacionImplementacion')}}',
                    data: data,
                    success: function(res){
                        $.isLoading('hide');
                        $('#modalRevision').modal('hide');
                        $.isLoading({
                            text: "update content"
                        });
                        getReporte();
                    }

                });
            });

            function getReporte(){
                var data = {};

                data['fechaIni'] = $("#fechaIni").val();
                data['fechaFin'] = $("#fechaFin").val();

                $.getJSON('{{path('rdviva_getControl')}}', data)
                .done( data => {

                    var monitor = data.monitor;

                    if (monitor.length == 0) {
                        $('#reporte1').empty();
                        $('#reporte1').append(
                            '<div class="alert alert-warning text-center" role="alert">NO HAY SITIOS POR VALIDAR</div>');
                        $.isLoading('hide');
                        $('#inicio').show();
                        return false;
                    }

                    var objectType = {'8': 1, '9': 2};
                    $('#reporte1').empty().append( createTable(monitor, undefined, undefined, objectType, undefined) );
                    $('.double-scroll').doubleScroll();
                    var pagerOptions = {
                        container: $('.pager'),
                        output: 'Rows : {endRow}',
                        fixedHeight: false,
                        removeRows: true,
                        cssGoto: '.gotoPage',
                    };

                    $('.table1').tablesorter({
                        theme: 'blue',
                        widgets: ['zebra', 'filter'],
                        widgetOptions: {
                            filter_cssFilter: '',
                            filter_childRows: false,
                            filter_hideFilters: false,
                            filter_ignoreCase: true,
                            filter_reset: '.reset',
                            filter_saveFilters: true,
                        },
                    }).tablesorterPager(pagerOptions);

                    $('.pager').show();
                    $('#inicio').show();
                    $('#autoload').attr('disabled', false);
                    $.isLoading('hide');

                }).fail( ()=> {
                    $.isLoading('hide');
                }).always( ()=>{
                    $.isLoading('hide');
                });
            }

            function createTable(monitor, total, nombreColTotal, type, entregableAux) {

                var header = Object.keys(monitor[0]);
                //var headerType = Object.keys(type);
                var table = `<table  class="table table-bordered table-hover table-striped table-responsive table1 bg-primary" id="tableSitios"><thead>
                            <tr class="btn-info">`;


                for (var j = 0; j < header.length; j++) {
                  /*if (header[j] == 'URL') {
                      header[j] = 'ENTREGABLE';
                  };*/

                    if (header[j] != 'FECH' && header[j] != 'fecha rf' && header[j] != 'STATUS RF' && header[j] != 'STATUS RFX' && header[j] != 'status atp' && header[j] != 'status atp tx') {
                      table += "<th style='vertical-align:middle;' class='text-center'>" + header[j] + "</th>";
                      //&& header[j] != 'REPORTE FOTOGRÁFICO' && header[j] != 'REPORTE FOTOGRÁFICO TX'

                        //table += `<th class="text-center">${header[j]}</th>`;
                    }
                }


                table += '</tr></thead>';

                for (var i = 0; i < monitor.length; i++) {
                    table += "<tr id="+monitor[i]['ID']+">";
                    //table += `<tr id = ${monitor[i][header[0]]} class = "text-center">`;

                    for (var j = 0; j < header.length; j++) {
                        var clases = '';

                        if (header[j] != 'FECH'  && header[j] != 'fecha rf' && header[j] != 'ENTREGABLE' && header[j] != 'REPORTE FOTOGRÁFICO' && header[j] != 'REPORTE FOTOGRÁFICO TX' && header[j] != 'ACCIÓN' && header[j] != 'ATP' && header[j] != 'STATUS RF' && header[j] != 'STATUS RFX' && header[j] != 'status atp' && header[j] != 'ATP TX' && header[j] != 'status atp tx' ) {


                           if (header[j] == 'CHECK IN'){
                                      table += "<td class='text-center'>" + '<a  data-toggle="modal" href="#myModalDetalle1" id=' + monitor[i]['ID'] +  ' class="detalles1">Detalle</a>' + "</td>";
                                     //table += "<td class='text-center'>" + '<button type="button" id=' + monitor[i]['ID'] +  ' class="btn btn-default detalles1">Detalle</button>' + "</td>";
                                }else if (header[j] == 'CHECK OUT') {
                                      table += "<td class='text-center'>" + '<a  data-toggle="modal" href="#myModalDetalle2" id=' + monitor[i]['ID'] +  ' class="detalles2">Detalle</a>' + "</td>";
                                     //table += "<td class='text-center'>" + '<button type="button" id=' + monitor[i]['ID'] +  ' class="btn btn-default detalles2">Detalle</button>' + "</td>";
                                }else{
                                  table += "<td   class=" + clases + ">" + monitor[i][header[j]] + "</td>";
                                }
                              }


                                if (header[j] == 'ENTREGABLE')
                                {
                                    if (monitor[i]['ENTREGABLE'] != '_') {
                                        var un = monitor[i]['ENTREGABLE'];

                                       table += "<td class='text-center'><a class='btn btn-link' target='_blank' href=" + un + " ><img border=0; src='{{ asset('images/greencheck.png') }}'; width='20' height='20'></img></a></td>";

                                    }else   table += "<td class='text-center'><img border=0; src='{{ asset('images/gray_sync.png') }}'; width='20' height='20'></img></a></td>";
                                }


                                if (header[j] == 'REPORTE FOTOGRÁFICO')
                                {
                                  var status = (monitor[i][header[14]]);


                                  if(status == 'Validar'){

                                    if (monitor[i]['REPORTE FOTOGRÁFICO'] != '_') {
                                        var un = monitor[i]['REPORTE FOTOGRÁFICO'];

                                       table += "<td class='text-center btn-success' ><a target='_blank' href=" + un + " >SI</a></td>";

                                   }
                                 }else if(status == 'Rechazar'){

                                     if (monitor[i]['REPORTE FOTOGRÁFICO'] != '_') {
                                         var un = monitor[i]['REPORTE FOTOGRÁFICO'];

                                        table += "<td class='text-center btn-danger' clases=''><a  target='_blank' href=" + un + " >SI</a></td>";

                                    }
                                  }else if(monitor[i]['REPORTE FOTOGRÁFICO'] != '_') {
                                        var un = monitor[i]['REPORTE FOTOGRÁFICO'];

                                       table += "<td class='text-center'><a class='btn btn-link' target='_blank' href=" + un + " >SI</a></td>";
                                       //clases='btn-danger';

                                   }
                                 else   table += "<td class='text-center'>NO</td>";

                                }

                                if (header[j] == 'REPORTE FOTOGRÁFICO TX')
                                {
                                  var status = (monitor[i][header[15]]);


                                  if(status == 'Validar'){

                                    if (monitor[i]['REPORTE FOTOGRÁFICO TX'] != '-') {
                                        var un = monitor[i]['REPORTE FOTOGRÁFICO TX'];

                                       table += "<td class='text-center btn-success' ><a  target='_blank' href=" + un + " >SI</a></td>";

                                   }
                                 }else if(status == 'Rechazar'){

                                     if (monitor[i]['REPORTE FOTOGRÁFICO TX'] != '-') {
                                         var un = monitor[i]['REPORTE FOTOGRÁFICO TX'];

                                        table += "<td class='text-center btn-danger' clases=''><a target='_blank' href=" + un + " >SI</a></td>";

                                    }
                                  }else if(monitor[i]['REPORTE FOTOGRÁFICO TX'] != '-') {
                                        var un = monitor[i]['REPORTE FOTOGRÁFICO TX'];

                                       table += "<td class='text-center'><a  class='btn btn-link' target='_blank' href=" + un + " >SI</a></td>";

                                       //clases='btn-danger';

                                   }/*else if (header[j] == 'ACEPTADO POR'){
                                     var status = (monitor[i][header[21]]);

                                     if(status == 'APROBADO'){

                                           clases = "class='btn-success'";

                                     }else if(status == 'RECHAZADO'){
                                           clases = "class='btn-danger'";
                                     }

                                   }*/else   table += "<td class='text-center'>NO</td>";

                                }


                                if (header[j] == 'ATP')
                                {
                                  var status = (monitor[i][header[20]]);


                                  if(status == 'APROBADO'){

                                    if (monitor[i]['ATP'] != '_') {
                                        var un = monitor[i]['ATP'];
                                        //table +=`<td class="text-center"><button type="button" id="${monitor[i]['ID']}" "  class="btn btn-success detallesAtp">'+ monitor[i][header[j]] + '</button></td>`;
                                        table += "<td class='text-center btn-success'>" + '<a  data-toggle="modal" href="#myModalDetalleAtp" id=' + monitor[i]['ID'] +  ' class="detallesAtp">' + monitor[i][header[j]] +'</a>' + "</td>";
                                       //table += "<td class='text-center btn-success' ><a style='color:#000000;'>" + monitor[i][header[j]] + "</a></td>";

                                   }
                                 }else if(status == 'RECHAZADO'){

                                     if (monitor[i]['ATP'] != '_') {
                                         var un = monitor[i]['ATP'];
                                         table += "<td class='text-center btn-danger'>" + '<a  data-toggle="modal" href="#myModalDetalleAtp" id=' + monitor[i]['ID'] +  ' class="detallesAtp">' + monitor[i][header[j]] +'</a>' + "</td>";
                                        //table += "<td class='text-center btn-danger' clases=''><a style='color:#000000;'>" + monitor[i][header[j]] + "</a></td>";

                                    }
                                  }else if(monitor[i]['ATP'] != '_') {
                                        var un = monitor[i]['ATP'];

                                       table += "<td class='text-center'>" + '<a  data-toggle="modal" href="#myModalDetalleAtp" id=' + monitor[i]['ID'] +  ' class="detallesAtp">' + monitor[i][header[j]] +'</a>' + "</td>";
                                       //clases='btn-danger';

                                   }
                                 else   table += "<td class='text-center'>-</td>";

                                }


                                if (header[j] == 'ATP TX')
                                {
                                  var status = (monitor[i][header[21]]);


                                  if(status == 'APROBADO'){

                                    if (monitor[i]['ATP TX'] != '_') {
                                        var un = monitor[i]['ATP TX'];
                                        //table +=`<td class="text-center"><button type="button" id="${monitor[i]['ID']}" "  class="btn btn-success detallesAtpTx">'+ monitor[i][header[j]] + '</button></td>`;
                                        table += "<td class='text-center btn-success'>" + '<a  data-toggle="modal" href="#myModalDetalleAtpTX" id=' + monitor[i]['ID'] +  ' class="detallesAtpTx">SI</a>' + "</td>";
                                       //table += "<td class='text-center btn-success' ><a style='color:#000000;'>" + monitor[i][header[j]] + "</a></td>";

                                   }
                                 }else if(status == 'RECHAZADO'){

                                     if (monitor[i]['ATP TX'] != '_') {
                                         var un = monitor[i]['ATP TX'];
                                         table += "<td class='text-center btn-danger'>" + '<a  data-toggle="modal" href="#myModalDetalleAtpTX" id=' + monitor[i]['ID'] +  ' class="detallesAtpTx">SI</a>' + "</td>";
                                        //table += "<td class='text-center btn-danger' clases=''><a style='color:#000000;'>" + monitor[i][header[j]] + "</a></td>";

                                    }
                                  }else if(monitor[i]['ATP TX'] != '_') {
                                        var un = monitor[i]['ATP TX'];

                                       table += "<td class='text-center'>" + '<a  data-toggle="modal" href="#myModalDetalleAtpTX" id=' + monitor[i]['ID'] +  ' class="detallesAtpTx">SI</a>' + "</td>";
                                       //clases='btn-danger';

                                   }
                                 else   table += "<td class='text-center'>NO</td>";

                                }




                              if (header[j] == 'ACCIÓN'){

                                {% if is_granted('ROLE_VALIDACION_CLIENTE') %}

                                  if (monitor[i]['ACCIÓN'] != 'NO') {
                                      var un = monitor[i]['ACCIÓN'];
                                      table += `<td class="text-center">
                                                  <button type="button" id="${monitor[i][header[5]]}" data-asp="${monitor[i][header[7]]}" data-driveft="${monitor[i][header[11]]}" data-driveftx="${monitor[i][header[12]]}" class="btn btn-success revisar">
                                                  ACCIÓN
                                                  </button>
                                              </td>`;

                                          }else  table += "<td class='text-center'>_</td>";


                              {% else %}
                                  table += "<td class='text-center'>_</td>"
                              {%endif%}
                            }

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


        });
    </script>

{% endblock %}

{% block dashboard %}

   <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <h1 class="text-right text-primary"><i class="fa fa-file-text-o"></i> {{ title }}</h1>
            </div>
        </div>
        <div class="row" id="filtro">
            <div class="col-lg-2"  style="margin-top: -0.7%">
               <label>Fecha Inicio: </label>
                <input type="text" class="form-control datepicker" id="fechaIni" value="{{ fechaIni }}">
            </div>
            <div class="col-lg-2"  style="margin-top: -0.7%">
               <label>Fecha Fin: </label>
                <input type="text" class="form-control datepicker" id="fechaFin" value="{{ fechaFin }}">
            </div>

            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
               <button class="btn btn-primary " id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
               <button class="btn btn-danger" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>
            <div class="col-lg-2">
            </div>
            <div style="text-align: center" class="col-lg-4">
                {% if identity != "" %}
                    <img class="text-right" id="logo"  src="{{ asset( identity.pathLogo ) }}" width="200" height="120">
                {% endif %}
                <p class="text-center" style="font-size: 10pt;font-weight: bold;">Viva Republica Dominicana</p>

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

    <div class="container-fluid" id="inicio" style="display: none" >
        <div class="tab-content" style="margin-top: 20px;">
            <div id="_summary" class="tab-pane fade in active">
                <div class="row">
                    <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                        <a href="#"
                            onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Distribuidores',ignoreRow: [1]});">
                            <img src={{ asset("images/xls.png") }} width="24px"> XLS</a>
                    </div>
                    <div class="pager">
                        <span class="pagedisplay"></span>
                    </div>
                        <a class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                    </div>
                    <div class="row double-scroll" id="reporte1">
                    </div>
                    <div id="pager" class="pager" style="display: none;text-align: center; ">
                        <form>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/first.png') }}" class="first"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/prev.png') }}" class="prev"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
                            <span class="pagedisplay"></span>
                            <select class="pagesize" title="Select page size">
                                <option selected="selected" value="1000">1000</option>
                                <option value="500">500</option>
                                <option value="100">100</option>

                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalRevision" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <!-- Modal content-->
            <div class="modal-content">
                <form name="revSitio" action="{{ path('rdviva_notificacionImplementacion',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">
                    <input id="driveft" type="hidden" name="driveft" >
                    <input id="driveftx" type="hidden" name="driveftx" >
                    <input id="asp" type="hidden" name="asp" >
                    <input id="sitio" type="hidden" name="sitio" >
                    <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="revizarTitle"> </h2>
                    </div>
                    <div class="modal-body">
                        <div id="materialesContainer">
                            <div class="row" id="primeraFila" style="margin-top:8px">
                                <div class="col-lg-3" id='sitio'>
                                    <label>Reporte</label>
                                    <select required  id="repuesto"  name="repuesto[]">
                                        <!--<option value='Seleccione' selected>Seleccione</option>
                                        <option value'Reporte Fotografico'>Reporte Fotografico</option>
                                        <option value'Reporte Fotografico Tx'>Reporte Fotografico Tx</option>-->
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label>Acción</label>
                                    <select required id="accion" name="accion[]">
                                        <option value='Seleccione' selected>Seleccione</option>
                                        <option value='Validado'>Validar</option>
                                        <option value='Rechazado'>Rechazar</option>
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label>Comentario</label>
                                    <select id="ValidarComentario" name="ValidarComentario" style="display:none;">
                                        <option value='Seleccione' selected>Seleccione</option>
                                        <option value="Reporte Correcto">Reporte Correcto</option>
                                    </select>
                                    <select id="RechazarComentario" name="RechazarComentario" style="display:none;">
                                        <option value='Seleccione' selected>Seleccione</option>
                                        <option value="Error en Foto">Error en Foto</option>
                                    </select>
                                </div>
                                <div id="comentario" class="col-lg-3" style="display:none">
                                    <label>Detalle de Rechazo</label>
                                    <textarea id="comentarioRechazo" name="comentario[]"></textarea>
                                </div>
                            </div><!-- fila 1 -->
                        </div>
                </div>
                <div class="modal-footer">
                    <button id="btnSave" type="button" class="btn btn-default" disabled><i class="fa fa-lg fa-save text-primary"></i></button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Detalles -->
     <div class="modal fade" id="modalDetalles" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <!-- Modal content-->
            <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="detailTitle"> </h2>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped table-responsive" id="tableSitios">
                        <thead>
                            <tr class="bg-primary">
                                <th style="vertical-align:middle; width: 100px;" class="text-center">Fecha</th>
                                <th style="vertical-align:middle; width: 100px;" class="text-center">Entrada</th>
                                <th style="vertical-align:middle; width: 100px;" class="text-center">Salida</th>
                            </tr>
                        </thead>
                        <tbody id='bodyDetail'></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>

<!-- Modal entregable1 -->
<div class="modal fade" id="myModalDetalle1" 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">{{'CHECK IN' | trans}}</h2>
            </div>

            <div class="modal-body">



               </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </div>

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


<!-- Modal entregable2 -->
<div class="modal fade" id="myModalDetalle2" 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">{{'CHECK OUT' | trans}}</h2>
            </div>

            <div class="modal-body">



               </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </div>

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

<!-- Modal ACCIÓN
<div class="modal fade" id="myModalAccion" 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">{{'APROBAR/RECHAZAR REPORTES' | trans}}</h2>
            </div>

            <div class="modal-body">



               </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </div>

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

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

            <div class="modal-body">



               </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </div>

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

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

            <div class="modal-body">



               </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

            </div>

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













{% endblock %}