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

{% block dashboard %}
<style>
         /* pager wrapper, div */
        .pager {
            padding: 5px;
        }
        /* 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;
            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;
        }

        table.tablesorter thead tr th, table.tablesorter tfoot tr th {
            background-color: #aa0001;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

        .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);}
        }
        .table-responsive {
            /*height: 400px !important;*/
            overflow: scroll;
        }
        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

        }

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

        .tabledetail {
            color: #fff;
            background-color: #00569C;
            border-color: #00569C;
        }

        tr {cursor:pointer}
        {%if idproyectos1 == 79%}
            .btn-claro {
                color: #fff;
                background-color: #025266;
                border-color: #025266;
            }
        {%endif%}


        .tablesorter-header-inner,table.tablesorter thead tr th,.tablesorter-filter {
            color: #fff;
            background-color: #aa0001;
            border-color: #aa0001;
        }
        table.tablesorter thead tr th{
            height: 40px;
        }
        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #aa0001;}
        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #aa0001;}
        .tablesorter-blue .tablesorter-filter-row td {
            background: #aa0001;border-color: #aa0001;}
        input[type="search"]{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 12px;
            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;
        }

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

};

$(function () {
    $(".export").click(function(){

        $("#formExport").submit();

        return false;

    });
    $(".exportValidados").click(function(){

        $("#formExportValidados").submit();

        return false;

    });
    var id_region_global = 0;
    $(".openModal").live('click', function () {

        var reporte_id = 0;
        var idproceso = 657;
        if ($(this).hasClass('historial')) {
            var idticket = $(this).attr('id');
            reporte_id = 48;
            $("#detalle").modal();
            $("#detalle .modal-body").empty();
            var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
            $.getJSON('{{ path('reportliberty_getDetalle') }}', data, function (data) {
                $("#detalle .modal-body").html(createTableSimple(data.monitor));
            });
        } else {
            if (idproceso=='' || $("#validado").text()==0){
                swal("Error!", "NO HAY SITIOS VALIDADOS", "error");
                return false;
            }
            reporte_id = 49;
            $("#detalle").modal();
            $("#detalle .modal-body").empty();
            var data = {'reporte_id': reporte_id, 'ticket_id': idticket,'idproceso':idproceso}
            $.getJSON('{{ path('reportliberty_getDetalle') }}', data, function (data) {
                $("#detalle .modal-body").html(createTableSimple(data.monitor));
            });
        }
    });

    $("#generar").click(function () {
        $.isLoading({
            text: "Loading"
        });
        $("#cantidad").html(0);
        reporteBateria();
    });

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

        }
    });

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

    $(".chkValAll").live('click', function (){
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = 57;
        var elem = 'input[name=chkValidar_57]';
        var checked = false;

        if($(this).is(':checked')){
            checked = true;
        }else{
            checked = false;
        }

        $(elem).each(function(){
            $(this).prop("checked", checked);
        });
    });

    $(".validar").live('click', function () {
        var idestado = $(this).attr('idestado');
        var idticket = $(this).attr('id');
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = 57;

        $("#idticket").val(idticket);
        $("#idestado").val(idestado);
        $("#idprocesoGeneral").val(idprocesos);
        $("#modalDetail").modal();
        //$("#savePlan").click();

    });

    $("#savePlan").click(function () {
        $("#formValidacion").ajaxSubmit({
            beforeSubmit: function (formData, jqForm, options) {
                $("#savePlan").attr('disabled', 'disabled');
                $.isLoading({
                    text: "Validando"
                });
            },
            error: function (error) {
                swal(error.statusText, error.error, "error");
                $("#savePlan").prop('disabled', false);
            },
            success: function (responseText, statusText, xhr, $form) {
                $.isLoading('hide');
                swal("Sitio Validado Correctamente", "You clicked the button!", "success");
                $("#modalDetail").modal('hide');
                $("#savePlan").prop('disabled', false);
                reporteBateria();
            }
        });
        return false;
    });

    $('form[name="rechazo"]').ajaxForm({
        beforeSubmit: function (formData, jqForm, options) {
            $.isLoading({
                text: "Rechazando"
            });

        },
        error: function (error) {
            $.isLoading('hide');
        },
        success: function (responseText, statusText, xhr, $form) {
            $.isLoading('hide');
            swal("El Sitio Fue Rechazado", "You clicked the button!", "success");
            $("#modalRechazo").modal('hide');
            reporteBateria();
        }
    });

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

        var idticket = $(this).attr('id');

        $("#idticketRechazo").val(idticket);
        $("#materialesContainer").children(":not(#primeraFila)").remove();
        $("#materialesContainer .quitar").remove();

        $(".descripcion_repuesto").find("option").remove();
        $(".repuesto").find("option").remove();
        $('.comentario').val("");
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = $("#proyecto").val();


        var url = '{{ path('reportliberty__getEntregableRechazoImp',{'idproyectos':idproyectos,'idproceso':'657'}) }}';

        var UrlProceso = url.replace('%7Bparametro%7D', idprocesos);

        $.ajax({
            url: UrlProceso,
            {#data: {'tipo':1,'categoria':61}#}
        }).done(function (data) {


            $('.descripcion_repuesto').append($("<option/>", {
                value: " ",
                text: " "
            }));

            $('.repuesto').append($("<option/>", {
                value: " ",
                text: " "
            }));
            for (var i = 0; i < data.length; i++) {
                $('.descripcion_repuesto').append($("<option/>", {
                    value: data[i]['descripcion'],
                    text: data[i]['id']
                }));
                $('.repuesto').append($("<option/>", {
                    value: data[i]['id'],
                    text: data[i]['descripcion']
                }));
            }

        });
        $("#modalRechazo").modal();

    });

    $(".validarMasivo").live('click', function () {
        var max_num_validation = 1000;
        var idprocesos = 657;
        var idTbody = 'tbody_' + idprocesos;
        var elem = 'input[name=chkValidar_57]';
        var n = 0;

        $(elem).each(function(){
            var checked = $(this).is(':checked');
            if (checked){
                n+=1;
            }
        });
        console.log('n',n);
        var arr = [];
        $('#txtProcesoBatch').val(idprocesos);
        if (n > 0 && n<= max_num_validation){            
            $('#txtPwdBatch').val('');
            hideControls(false);
            $('#div_batch_valid_initializing').css('display','none');
            $('#sending').css('display','none');
            lockButtons(false);
            $("#modalDetailBatch").modal('show');
        }else if (n<=0){
            alert('No ha seleccionado ítems a validar!!!');
        }else if(n>max_num_validation){
            alert('El Nro. máximo de ítems a seleccionar es ' + max_num_validation + '.');
        }
    });

    $("#saveBatchValidation").live('click', function (){
        var idprocesos = 657;
        var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
        var headerId = $("#proyecto").find('option:selected').data('headerid');
        console.log(groupQuery,headerId);
        console.log($("#proyecto").find('option:selected'));
        var tagfile = $("#proyecto").find('option:selected').data('tagfile');
        var idd = $("#proyecto").find('option:selected').data('idd');
        console.log(tagfile,idd);
        var cmbProy = $("#proyecto").select2("data");
        var nombre_proyecto = cmbProy['text'];
        var idregion = id_region_global;
        var idTbody = 'tbody_' + idprocesos;
        var elem = 'input[name=chkValidar_57]';
        var pass = $('#txtPwdBatch').val();

        var arr = [];
        
        $(elem).each(function(){            
            var checked = $(this).is(':checked');
            if (checked){
                var arrDatos = {};
                arrDatos = {
                    id_ticket: $(this).attr('idT'),
                    id_estado: $(this).attr('idestado')
                };
                arr.push(arrDatos);
            }            
        });

        if (arr.length > 0){
            $.confirm({
                icon: 'glyphicon glyphicon-question-sign',
                title: 'Validación de Sitios',
                content: arr.length + ' ítems a procesar. ¿Desea validar?',
                confirmButton: 'Si',
                cancelButton: 'No',
                confirmButtonClass: 'btn-success',
                cancelButtonClass: 'btn-default',
                confirm: function () {
                    hideControls(true);
                    $('#div_batch_valid_initializing').css('display','block');
                    showInitializing('loading','Inicializando el proceso de validación...');
                    initProgressBar({'num_registros':0, 'registros_procesados':0, 'percentage':0.00},false);
                    lockButtons(true);
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('reportliberty_saveBatchJobValidation',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
                        data: {
                            'etapa': 'initializing',
                            'arr_data': JSON.stringify(typeof(arr) === 'object' ? Object.values(arr) : arr),
                            'url': '{{ app.request.pathinfo }}',
                            'ruta': "{{ app.request.get('_route') }}",
                            'idproyectos': {{ idproyectos }},
                            'idmodule': {{ idmodule }},
                            'idprocesos' : idprocesos,
                            'idgroupquery': groupQuery,
                            'idheader': headerId,
                            'tagfile':  tagfile,
                            'idd': idd,
                            'nombreproyecto':  nombre_proyecto,
                            'idregion': idregion,
                            'pwd': pass
                        },
                        dataType: 'json',
                        success: function (response) {
                            switch (response.status){
                                case 'success':
                                    console.log(response);
                                    showInitializing('success','Inicialización de Validación completada!!!');
                                    msjInfoValidacion(response.data);
                                    initProgressBar(response.data,true);
                                    executeValidation(response.data);
                                    break;
                                case 'error':
                                    console.log(response);
                                    if (response.msj=='Password Incorrecto'){
                                        hideControls(false);
                                        $('#div_batch_valid_initializing').css('display','none');
                                        $('#sending').css('display','none');
                                        lockButtons(false);
                                        swal({title: 'Error', text: response.msj, type: "error"})
                                    }else{
                                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                                    }
                                    break;
                                case 'warning':
                                    console.log(response);
                                    var region = $("#region").find("option[value='" + response.data.id_region + "']").text();
                                    showInitializing('warning',response.msj +
                                            "Proyecto: " + response.data.nombre_proyecto + " " + region + ".");
                                    msjInfoValidacion(response.data);
                                    initProgressBar(response.data,true);
                                    executeValidation(response.data);
                                    break;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            screenMsgBox("#modalDetailBatch", "Error", "Errores al Inicializar Validación", "error");
                        }
                    });
                },
                cancel: function () {
                    $.isLoading("hide");
                    // $.alert('Cancel!');
                }
            });
        }else{
            alert('No seleccionó ítems a validar!!!');
            $("#modalDetailBatch").modal('hide');
        }
    });
    function executeValidation(datos){
        if (datos.items_procesados == 0) {
            initProgressBar(datos);
        }
        $.ajax({
            type: 'POST',
            url: "{{ path('reportliberty_saveBatchJobValidation',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
            data: {
                'etapa': 'processing',
                'id_validation': datos.id_validation,
                'registros_procesados': datos.registros_procesados,
                'num_registros': datos.num_registros,
                'offset': datos.offset
            },
            dataType: 'json',
            success: function (response) {
                switch (response.status){
                    case 'success':
                        console.log(response);
                        refreshProgressBar(response.data);
                        var d = response.data;
                        if (d.num_registros == d.registros_procesados){
                            console.log('PROCESO COMPLETADO');
                            $('#lblCurrentAction').text('Ejecutando tareas finales...');
                            endingValidation(d);
                        }else{
                            executeValidation(d);
                        }
                        break;
                    case 'error':
                        console.log(response);
                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                        break;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                screenMsgBox("#modalDetailBatch", "Error", "Error en el procesamiento de la Validación", "error");
            }
        });
    }
    function screenMsgBox(modal, title, text, icon){
        $.isLoading("hide");
        $(modal).modal('hide');
        swal(title, text, icon).then(function(){
            $.isLoading({text: "Recargando datos..." });
            reporteBateria();
        });
    }
    function showInitializing(tipo,msj){
        $('#img_initializing_success').css("display", "none");
        $('#img_initializing_error').css("display", "none");
        $('#img_initializing_warning').css("display", "none");
        $('#img_initializing_loading').css("display", "none");
        $('#img_initializing_' + tipo).css("display", "inline-block");
        $('#lbl_initialize').html(msj);
    }
    function msjInfoValidacion(data){
        var msj = $('#lbl_initialize').html();
        var region = $("#region").find("option[value='" + data.id_region + "']").text();
        msj += "<br><span>Procesando validación para:<br>" +
                "<strong>Proyecto: " + data.nombre_proyecto + " " + region + ". [" +
                data.num_registros + " Sitios]</strong></span>";
        $('#lbl_initialize').html(msj);
    }

    function initProgressBar(data, show){
        if (show){$('#sending').show();}else{$('#sending').hide();}
        $('#done').text(data.registros_procesados);
        $('#total').text(data.num_registros);
        $('#lblCurrentAction').text('Procesando...');
        //reset progress bar
        $('.progress-bar').css('width', data.percentage+'%');
        $('.progress-bar').text(data.percentage+'%');
        $('.progress-bar').attr('data-progress', data.percentage);
    }

    function refreshProgressBar(data){
        $('#lblCurrentAction').text('Procesando...');
        $('.progress-bar').css('width', data.percentage+'%');
        $('.progress-bar').text(data.percentage+'%');
        $('.progress-bar').attr('data-progress', data.percentage);

        $('#done').text(data.registros_procesados);
        $('#total').text(data.num_registros);
    }
    function hideControls(flag){
        $('#divPwd').css("display", flag ? "none" : "block");
    }
    function lockButtons(flag){
        $('#saveBatchValidation').attr('disabled', flag);
        $('#cancelBatchValidation').attr('disabled', flag);
    }
    function endingValidation(datos){
        $.ajax({
            type: 'POST',
            url: "{{ path('reportliberty_saveBatchJobValidation',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
            data: {
                'etapa': 'ending',
                'id_validation': datos.id_validation,
                'registros_procesados': datos.registros_procesados,
                'num_registros': datos.num_registros,
                'offset': datos.offset
            },
            dataType: 'json',
            success: function (response) {
                switch (response.status){
                    case 'success':
                        console.log(response);
                        //$('#end-process').css('display','block');
                        screenMsgBox("#modalDetailBatch", "Info", "Validación Masiva Completada!!!", "success");
                        lockButtons(false);
                        break;
                    case 'error':
                        console.log(response);
                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                        lockButtons(false);
                        break;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                screenMsgBox("#modalDetailBatch", "Error", "Error finalizando la Validación", "error");
                lockButtons(false);
            }
        });
    }

    $(".trash").live('click', function () {
        $(this).parent().parent().remove();
    });

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

        $("#" + $(this).attr('element')).clone().removeAttr('id').attr('class', 'row quitar').append(
                '<label>&nbsp;</label><div class="col-lg-2"><a href="#" class="btn btn-danger fa fa-trash trash"></a></div>').appendTo("#" + $(this).attr('target'));

        $(".comentario").last().val("");
        return false;
    });

    $("#clear").click(function () {
        $("#pais").val();
        $("#region").val("TODOS");
        $('#Filtros_fechaIni').val("");
        $('#Filtros_fechaFin').val("");
        $('#btu_tr').val("TODOS");
        $('#F_C').val("TODOS");
    });

    $('.repuesto').change(function () {
        var sel = $(this).val();
        $(".descripcion_repuesto option:contains(" + sel + ")").attr('selected', true);
        console.log($('.descripcion_repuesto').val());
    });
    
    $(".activar_por_validar").click(function(){
        if ($("#total_monitor_por_validar").val()>0){
            $(".pager_por_validar").show();
                    var pagerOptions2 = {
                        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(pagerOptions2);
            $(".pager").show();
        }else{
            $(".pager_por_validar").hide();
        }
    });
    $(".activar_validados").click(function(){
        if ($("#total_monitor_validados").val()>0){
            $(".pager_validados").show();
                    var pagerOptions1 = {
                        container: $(".pager"),
                        output: 'Rows : {endRow}',
                        fixedHeight: false,
                        removeRows: true,
                        cssGoto: '.gotoPage'
                    };
                    $(".table2").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(pagerOptions1);
            $(".pager").show();
        }else{
            $(".pager_validados").hide();
        }
    });

{%if idproyectos == 35 or idproyectos == 30 or idproyectos == 32 or idproyectos == 36 or idproyectos == 37 or idproyectos == 57%}
    {%if idproyectos == 35 %} {%set idpais=1%} {%set pais='Guatemala'%}{%endif%}
    {%if idproyectos == 30 %} {%set idpais=2%} {%set pais='Honduras'%}{%endif%}
    {%if idproyectos == 32 %} {%set idpais=4%} {%set pais='Nicaragua'%}{%endif%}
    {%if idproyectos == 36 %} {%set idpais=3%} {%set pais='El Salvador'%}{%endif%}
    {%if idproyectos == 37 %} {%set idpais=5%} {%set pais='Costa Rica'%}{%endif%}
    {%if idproyectos == 57 %} {%set idpais=6%} {%set pais='Panamá'%}{%endif%}

    $("#pais option").remove();
    $("#pais").append('<option value={{idpais}}>{{pais}}</option>');
    //Llenar Combos
    $.isLoading({
        text: "Loading"
    });
    llenarCombos();
{%endif%}

        $("#pais").change(function () {
            if ($("#pais").val() != "TODOS") {
                $.isLoading({
                    text: "Loading"
                });
                llenarCombos();
            } else {
                $("#region option").remove();
                $("#region").append('<option value="TODOS">REGION</option>');
            }
           // $('#generar').trigger('click');
        });

        //$('#generar').trigger('click');

    });

    function myFunction(index , idelment) {
      // Declare variables
      var input, filter, table, tr, td, i, tmpstr;

      input = document.getElementById('id'+index+'id');
     //   index =index-1;
      filter = input.value.toUpperCase();
      table = document.getElementById("tabla1");
      tr = table.getElementsByTagName("tr");

      for (i = 0; i < tr.length; i++) {

       td = tr[i].getElementsByTagName("td")[index];

        if (td) {
            tmpstr = td.innerHTML.toUpperCase();
          if (tmpstr.search(filter) > -1) {
                   tr[i].style.display = "";
          } else {
              if(i>1)
              {
                  tr[i].style.display = "none";
              }

          }
        }
      }
    }

    function createTableSimple(monitor,total,nombreColTotal){

        var header = Object.keys(monitor[0]);

        var table = '<table id="tableSitios"  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

                '<tr class="btn-info">';

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


            table += "<th class='text-center'>" + header[j] + "</th>"



        }
        table += "</tr></thead>";

        for (var i = 0; i < monitor.length; i++) {
            table += "<tr>";
            for (var j = 0; j < header.length; j++) {
                if( typeof monitor[i][header[j]] === 'object'){
                    table += "<td>" + monitor[i][header[j]].date.substring(0,19)  + "</td>";
                }else{
                    table += "<td>" + monitor[i][header[j]]  + "</td>";
                }

            }
            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;
    }
    function reporteBateria() {
        //alarmas
            var data = {};
            data['pais'] = $("#pais").val();
            //data['region'] = "TODOS";//$("#region").val();
            data['proyecto']= $("#proyecto").val();
            data['region']   = $("#region").val();
            data['fechaIni'] = $("#Filtros_fechaIni").val();
            data['fechaFin'] = $("#Filtros_fechaFin").val();
            data['idproyectos'] =  "" + {{idproyectos}};

            var e = document.getElementById("btu_tr");

            if (e.options[e.selectedIndex].value == 'btu') {
                data['btu_tr'] = 'btu';
                //   window.alert('btu esta chequeado');
            } else if (e.options[e.selectedIndex].value == 'tr') {
                data['btu_tr'] = 'tr';
                //   window.alert('tr esta chequeado');
            } else
            {
                data['btu_tr'] = 'todos';
                //  window.alert('todos esta chequeado');
            }

            var a = document.getElementById("F_C");
            if (a.options[a.selectedIndex].value == 'f') {
                data['f_c'] = 'f';
                //   window.alert('f esta chequeado');
            } else if (a.options[a.selectedIndex].value == 'c') {
                data['f_c'] = 'c';
                //   window.alert('c esta chequeado');
            } else
            {
                data['f_c'] = 'todos';
                //     window.alert('todos fyc esta chequeado');
            }

            $(".activar_por_validar").addClass('active');
            $(".activar_validados").removeClass('active');
            $.getJSON('{{path('reportliberty_reporteMA')}}', data, function (data) {

                var por_validar = data.por_validar;
                //console.log(por_validar,por_validar.length);
                var validados = data.validados;
                //console.log(validados.length,validados)
                $("#total_monitor_por_validar").val(por_validar.length);
                $("#total_monitor_validados").val(validados.length);
                
                //VALIDADOS    
                if (validados.length == 0) {
                    $("#reporte_validados").empty();
                    $("#reporte_validados").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                }else{
                    $("#reporte_validados").empty().append(createTable(validados,2));
                    $.isLoading("hide");
                    var pagerOptions1 = {
                       container: $(".pager"),
                       output: 'Rows : {endRow}',
                       fixedHeight: false,
                       removeRows: true,
                       cssGoto: '.gotoPage'
                    };
                    $(".table2").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(pagerOptions1);
                    $(".pager").show();                  
                }  
                //POR VALIDAR
                //console.log(por_validar.length);
                if (por_validar.length == 0) {
                    $("#primer_reporte").empty();
                    $("#primer_reporte").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                }else{
                    $("#primer_reporte").empty().append(createTable(por_validar,1));
                    $.isLoading("hide");
                    var pagerOptions1 = {
                       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(pagerOptions1);
                    $(".pager").show();                  
                }         
            });
        }


        function getTotal(valor, key, tipo)
        {
            var total = new Array();

            var header = Object.keys(valor[0]);


            for (var i = 0; i < valor.length; i++) {

                for (var j = 0; j < key.length; j++) {

                    if (typeof total[key[j]] === "undefined") {
                        total[key[j]] = 0;
                    }

                    if (tipo == 1) {
                        total[key[j]] += parseFloat(valor[i][header[key[j]]]);
                        if (i == (valor.length - 1))
                            total[key[j]] = parseFloat(total[key[j]]).toPrecision(3);
                        //alert(total[key[j]]);
                    } else
                        total[key[j]] += parseInt(valor[i][header[key[j]]]);

                }

            }
            return total;
        }

        function createTable(monitor, option) {
            var header = Object.keys(monitor[0]);
            var table;
            var idproyectos = {{idproyectos}};

            if (option == 1) {
                table = '<table  id="tabla1" class="table table-bordered table-hover table-striped table1" style="text-align:left">';
            }else if (option == 2){
                table = '<table  id="tabla2" class="table table-bordered table-hover table-striped table2">';
            }
            table += "<thead><tr>";

            for (var j = 0; j < header.length; j++) {
                var strHideFilter = "";
                if (header[j] == 'ENTREGABLE') {
                     strHideFilter = " sorter-false filter-false "
                }


                if (header[j] != 'CLASS' && header[j] != 'capacidad' && header[j] != 'ID' && header[j] != 'temperatura' && header[j] != 'CAPACIDAD_X' && header[j] != 'TEMPERATURA_X' ) {
                    if (option == 1) {
                        table += "<th style='vertical-align:middle; width:300px' class='text-center" + strHideFilter + "'>" + header[j] + "</th>";
                    } else{
                        table += "<th style='vertical-align:middle;' class='text-center" + strHideFilter + "'>" + header[j] + "</th>";
                    }
                }
            }
            if (option == 1) {
                table += "<th class='text-center' nowrap='nowrap'><input type='checkbox' " +
                "id='chkValAll_57' class='chkValAll'>&nbsp;" +
                "Validar<span id='countValAll_57'>" + "</span></th>";
                table += "<th class='text-center'>" + "Rechazar" + "</th>";
                table += "<th class='text-center'>" + "Historial" + "</th>";
            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                //console.log(monitor[i]['ID']);
                if (monitor[i]['ID']){
                    table += "<tr id=" + monitor[i]['ID'] + ">";
                    for (var j = 0; j < header.length; j++) {
                    var clases = ''; 
                   

                    if (header[j] != 'CLASS' && header[j] != 'capacidad' && header[j] != 'temperatura' && header[j] != 'ID' && header[j] != 'ENTREGABLE' ) {
                        if (header[j] == 'FECHA SIG. MEDICION' && monitor[i]['CLASS'] == 1) {
                            clases = 'btn-danger';
                        }
                        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(j ==header.length -1){
                        {% if is_granted('ROLE_VALIDACION_PANAMA') %}
                        if (option == 1) {
                            table += "<td class='text-center' style='vertical-align: middle' nowrap='nowrap'><input type='checkbox' name='chkValidar_57' idestado='2667' idt='" + monitor[i][header[0]] + "'>&nbsp;&nbsp;" +
                                    '<button type="button" idestado="2667" id=' + monitor[i][header[0]] +  '" class="btn btn-success btn-sm validar">Validar</button>' + "</td>";
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  '" class="btn btn-danger  btn-sm rechazar">Rechazar</button>' + "</td>";
                            {% else %}                       
                                table += "<td class='text-center' style='vertical-align: middle' nowrap='nowrap'>-</td>";
                                table += "<td class='text-center' style='vertical-align: middle'>-</td>";
                            {% endif %}
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  ' class="btn btn-default btn-sm openModal historial">Historial</button>' + "</td>";
                        }
                    }
                  }
                }
                table += "</tr>";
            

            }
            table += "</table>";

            return table;
        }



        function translate(translation, table) {

            var translationHeader = Object.keys(translation);

            for (var i = 0; i < translationHeader.length; i++) {

                table = table.replace(translationHeader[i], translation[translationHeader[i]]);


            }

            return table;
        }

        function ISO8601_week_no(dt)
        {
            var tdt = new Date(dt.valueOf());
            var dayn = (dt.getDay() + 6) % 7;
            tdt.setDate(tdt.getDate() - dayn + 3);
            var firstThursday = tdt.valueOf();
            tdt.setMonth(0, 1);
            if (tdt.getDay() !== 4)
            {
                tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - tdt) / 604800000);
        }



        function llenarCombos() {
            $("#region option").remove();
            $("#region").append('<option value="TODOS">REGION</option>');
            var data = {};
            data['pais'] = $("#pais").val();
            data['tabla'] = "appenate.mp_aire_acondicionado_template";
            //$.isLoading("hide");
            $.getJSON('{{path('reportliberty_llenarRegionMP')}}', data, function (data) {
                var regions = data.region;

                for (var i = 0; i < regions.length; i++) {
                    $("#region").append('<option value="' + regions[i]['REGION'] + '">' + regions[i]['REGION'] + '</option>');
                }

                $.isLoading("hide");

            });
        };

        function createTableDetail(monitor,opcion){
            var table;
            var idproyectos = {{idproyectos}};
            //if (opcion == 1){
            if (monitor.length >0) {
                table = '<table id="tablaDetail" class="table table-bordered table-hover table-striped table-responsive">';
                table += "<thead class='tabledetail'><tr>";
                table += "<th style='vertical-align:middle;' class='text-center'>#</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>ARCHIVO</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>FECHA</th>";
                table += "</tr></thead>";
                var strLast="";
                for (var i = 0; i < monitor.length; i++) {
                    isLast = monitor[i]['isLast'];
                    if (isLast==1) {strLast="*"}else{strLast='';}
                    table += "<tr>";
                    table += "<td class='text-center' nowrap>" + (i+1 ) + "</td>";
                    table += "<td class='text-left'><a target='_blank' href='"
                            + monitor[i]['path'] + "'>"
                            +"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>&nbsp;" +
                            monitor[i]['filename'] + strLast+ "</a></td>";
                    table += "<td class='text-center' nowrap>" + monitor[i]['fecha'] + "</td>";
                    table += "</tr>";

                }
                table += "</table>";
            }
          //}
            return table;
        }

        function reporteBateriaDetail(ticket,sitio,entregable,opcion) {
            data = {};
            data['ticket'] = ticket;
            data['sitio'] = sitio;
            data['entregable'] = entregable;
            data['opcion'] = opcion;

            $.getJSON('{{path('reportliberty__reporteMADetail')}}', data, function (data) {
                var bateria = data.bateria;
                if (bateria.length == 0) {
                    $("#reporte_detail").empty();
                    $("#reporte_detail").append('<div class="alert alert-warning" role="alert">NO SE HA ENCONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;
                }
                $('#myModalLabel').html("DETALLE " + bateria[0]['entregable']);
                $("#reporte_detail").empty().append(createTableDetail(bateria,opcion));
                $.isLoading("hide");
            })
            return true;
        }

        function _detail(ticket,site,entregable,opcion){
            $('#myModalLabel').html("");
            $("#reporte_detail").empty();
            $.isLoading({
                text:       "Loading"
            });
            reporteBateriaDetail(ticket,site,entregable,opcion);
            $('#myModalDetalle').modal('show');
        }

    </script>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                {%if idproyectos!= 57%}
                    <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >
                {%else%}
                    <img id="logo" class="pull-right" src="{{ asset('images/liberty.png') }}"  width="220" height="72" >
                {%endif%}    
             </div>
        </div>
        <div class="row">
             <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitores.pais' | trans}}: </label>
                <select class="form-control" id="pais">
                    <option value="TODOS">{{'inbox.all' | trans}}</option>
                    {%if (idproyectos!= 57)%}
                        {%for pais in paises%}
                            {%if (pais.eval_proyecto_id!= 6) %}
                                <option value="{{pais.eval_proyecto_id}}">{{pais.nombre}}</option>
                            {%endif%}
                        {%endfor%}
                    {%else%}
                        <option value="6">Panamá</option>
                    {%endif%}                        
                </select>
            </div>

            <input type="hidden" id="total_monitor_por_validar" name="total_monitor_por_validar" value="0">
            <input type="hidden" id="total_monitor_validados" name="total_monitor_validados" value="0">
            <div class="col-lg-2 top-uno">
                <label> {{'monitor.etiqueta.fechaI' | trans}}:</label> </br>
                <input class="form-control" type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2 top-uno">
                <label> {{'monitor.etiqueta.fechaF' | trans}}: </label>  </br>
                <input class="form-control" type="text" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>

            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.region' | trans}}: </label></br>
                <select class="form-control" id="region">
                    <option value="TODOS">TODOS</option>
                </select>
            </div>

            <!--<div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitores.proyecto' | trans}}: </label></br>
                <select class="form-control" id="proyecto">
                    <option value="TODOS">TODOS</option>
                    <option value="CLARO MAPLE">CLARO MAPLE</option>
                    <option value="CLARO MAYA">CLARO MAYA</option>
                </select>
            </div>-->


            <div class="col-lg-2 top-uno" style="margin-top: 3%">
                <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>

        </div>
        <div class="row">

            <div class="col-lg-2 top-uno">

                <select class="form-control" id="btu_tr" style="visibility: hidden;">
                    <option value="todos">{{"inbox.all" | trans}}</option>
                    <option value="btu">BTU</option>
                    <option value="tr">TR</option>
                </select>
            </div>
            <div class="col-lg-2 top-uno">

                <select class="form-control" id="F_C" style="visibility: hidden;">
                    <option value="todos">{{"inbox.all" | trans}}</option>
                    <option value="f">°F</option>
                    <option value="c">°C</option>
                </select>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1> Monitor de Aprobación MP</h1>
            </div>
        </div>
        <!--PESTANAS-->
                <div class="row panel_content" style="margin: 10px 0 0 10px !important;">
            <div id="panel_content" class="col-lg-12">
                <ul class="nav nav-pills nav-justified activar_Jsa">

                    <li class="active mainTab activar_por_validar click_tab">
                        <a data-toggle="tab" href="#por_validar"><strong>POR VALIDAR</strong></a>
                    </li>

                    <li class="mainTab activar_validados click_tab">
                        <a data-toggle="tab" href="#validados"><strong>VALIDADOS</strong></a>
                    </li>
                </ul>
                <div class="tab-content activar_Jsa" style="margin-top: 20px;width:100%">
                    <!-- PESTANA DE POR VALIDAR -->
                    <div id="por_validar" class="tab-pane active">
                        <div class="row pull-right">
                            <div class="col-md-8">
                                {% if is_granted('ROLE_VALIDACION_PANAMA') %}
                                <button class="btn btn-success validarMasivo" type="button" aria-label="Validar" title="Validación Masiva">
                                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                                    Validar
                                </button>
                                {% endif %}
                            </div>
                            <div class="col-md-4" style="padding: 0px 10px 0 0;">
                                <form id="formExport"  action="{{ path('exportReporte',{'idproyectos':idproyectos}) }}" method="POST">
                                    <input type="hidden" class="idReporte" name="idReporte" value="980">
                                </form>
                                <a idForm="formExport"class="export btn btn-default" href="{{ path('exportReporte',{'idproyectos':idproyectos}) }}?idReporte=980" >
                                    <img src={{ asset("images/xls.png")}} width="16px"> XLS</a>
                            </div>
                        </div>
                        <div class="row">
                        </div>
                        <div class="pager pager_por_validar" style="text-align: left">
                            <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                            <span class="pagedisplay"></span>
                        </div>
                        <div class="row" style="overflow-x: auto;">
                            <div id="primer_reporte" class="col-lg-12"></div>
                        </div>
                    </div>
                    <!-- PESTANA DE POR VALIDADOS -->

                    <div id="validados" class="tab-pane">
                        <div class="row pull-right">
                            <div class="col-md-12" style="padding: 0px 10px 0 0;">
                                <form id="formExportValidados"  action="{{ path('exportReporte',{'idproyectos':idproyectos}) }}" method="POST">
                                    <input type="hidden" class="idReporte" name="idReporte" value="981">
                                </form>
                                <a idForm="formExportValidados"class="exportValidados btn btn-default" href="{{ path('exportReporte',{'idproyectos':idproyectos}) }}?idReporte=981" >
                                    <img src={{ asset("images/xls.png")}} width="16px"> XLS</a>
                            </div>
                        </div>
                        <div class="pager pager_validados" style="text-align: left">
                            <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                            <span class="pagedisplay"></span>
                        </div>
                        <div class="row">
                            <div class="col-md-12" id="reporte_validados" style="overflow-x: auto;">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div id="pager" class="pager" style="display: none">
                        <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"/>
                            <span class="pagedisplay"></span>
                            <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                            <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                            <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>
        <!--FIN PESTANAS-->
    </div>

    <div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" 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"> Validacion de Sitio</h2>
                </div>
                <div class="modal-body">

                    <form id="formValidacion" action="{{ path('reportliberty_validateSiteNewVersion',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">

                        <div class="col-lg-8">
                            <label>Clave de acceso</label>
                            <input id="password" name="password" type="password" class="form-control"/>
                            <input id="idestado" name="idestado" type="hidden" value=""/>
                            <input id="idticket" name="idticket" type="hidden" />
                            <input id="idprocesoGeneral" name="idproceso" type="hidden" />
                        </div>


                    </form>


                </div>
                <div class="modal-footer">
                    <button id="savePlan" type="submit" class="btn btn-default"><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>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalRechazo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form name="rechazo" action="{{ path('reportliberty_rechazarSite',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">
                    <input type="hidden" name="idestado" value="50">
                    <input id="idticketRechazo" type="hidden" name="idticket" >
                    <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"> Rechazo de Sitio</h2>
                    </div>
                    <div class="modal-body">
                        <div class="pull-right">
                            <button class="btn btn-success clone" element="primeraFila" target="materialesContainer"><i class="fa fa-lg fa-plus"></i></button>
                        </div>
                        <div id="materialesContainer">
                            <div class="row" id="primeraFila" style="margin-top:8px">
                                <div class="col-lg-1" style="display: none">
                                    <label>Descripcion</label>
                                    <select  class="descripcion_repuesto form-control" name="descripcion_repuesto[]">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <label>Entregable</label>
                                    <select required  class="repuesto form-control" name="repuesto[]">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Comentario</label>
                                    <textarea required class="comentario form-control" name="comentario[]"></textarea>
                                </div>
                            </div><!-- fila 1 -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="saveRechazo" type="submit" class="btn btn-default"><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>

    <div class="modal fade" id="detalle" 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"> Validacion de Sitio</h2>
                </div>
                <div class="modal-body">

                </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>

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

                <div class="modal-body">
                    <div class="row" style="overflow-x: auto;">
                        <div id="reporte_detail" class="col-md-12"></div>
                    </div>
                </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="modalDetailBatch" tabindex="-1" role="dialog" aria-labelledby="BatchValidationModal">
        <div class="modal-dialog" 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="modalDetailBatchTitle"> Validación de Sitios</h2>
                </div>
                <div class="modal-body">
                    <div id="divPwd" class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <label>Clave de acceso</label>
                            <input id="txtPwdBatch" name="txtPwdBatch" type="password" class="form-control"/>
                            <input id="txtProcesoBatch" name="txtProcesoBatch" type="hidden" />
                        </div>
                        <div class="col-md-2"></div>
                    </div><div class="row"></div>
                    <div id="div_batch_valid_initializing" class="row">
                        <div class="col-lg-12 table-responsive">
                            <table class="table table-condensed">
                                <tr>
                                    <td style="width: 24px" class="text-center">
                                        <span id="img_initializing_loading"><img src="{{ asset('img/loading.gif' ) }}"  width="16" height="16"></span>
                                        <span id="img_initializing_success" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                        <span id="img_initializing_error" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        <span id="img_initializing_warning" class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                    </td>
                                    <td class="text-left" style="font-weight: normal">
                                        <span id="lbl_initialize">Inicializando...</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div id="sending" class="col-lg-12" style="display:none">
                            <h3 id="lblCurrentAction">Procesando...</h3>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped active"
                                     role="progressbar"
                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                     data-progress="0" style="width: 0%;">
                                    0%
                                </div>
                            </div>
                            <div class="counter-sending text-center">
                                (<span id="done">0</span> ítems procesados / <span id="total">0</span> ítems en total)
                            </div>

                            {#<div class="execute-time-content">
                                Tiempo transcurrido: <span class="execute-time">0 segundos</span>
                            </div>#}

                            <div id="end-process" class="end-process text-center" style="display:none;">
                                <div class="alert alert-success">El proceso ha sido completado.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveBatchValidation" type="button" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                    <button id="cancelBatchValidation" type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}