{% 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;
            }
            tr {cursor:pointer}
        tbody{
            text-align: left;
        }
        {%if idproyectos1 == 79%}
            .btn-claro {
                color: #fff;
                background-color: #025266;
                border-color: #025266;

            }
        table.tablesorter thead tr th, table.tablesorter tfoot tr th {
            background-color: #025266;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }
        {%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 src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>#}
    <script>
        var translation = {

        };

        $(function () {

             $("#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',
            });

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

            {%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 alarmasDetalle(e) {
            var input = e.id;
            var datos = input.split(",");

            var alarmas = [
                " ",
                'Hay bancos adicionales',
                'La cantidad de bancos de baterias es diferente a 0',
                'El consumo/carga actual del REC es Mayor a la capacidad total',
                'No esta monitoreada  remotamente la estacion',
                'El display no se encuentra en buen estado ',
                'No esta funcionando correctamente el extractor de aire',
                'El estado del display no es bueno',
                'Si existen alarmas activas',
                'Si esta operando en MODO BATERIA',
                'Si esta operando en MODO BYPASS',
                'El Aterrizaje a tierra del banco es mayor a 5',
                'El estado físico de las baterías NO es el adecuado',
                '¿El estado físico de los puentes de las baterías NO es el adecuado',
                'El Voltaje Entrada es igual a 0',
                'El Voltaje Salida es igual a 0',
                'La carga Total DC es igual a 0'

            ];

           if (e.id ==null ){
           }else{
               document.getElementById("palarmtext").innerHTML = '';
               datos.forEach(function(entry) {
                   if (alarmas[entry] !=null){
                    document.getElementById("palarmtext").innerHTML += '-'+  alarmas[entry] + '<br>';
                }
                });


           }
        }

        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 reporteBateria(){

                var data = {};
                data['pais'] = $("#pais").val();
                data['region'] = $("#region").val();
                data['proyecto']= $("#proyecto").val();
                data['fechaIni'] = $("#Filtros_fechaIni").val();
                data['fechaFin'] = $("#Filtros_fechaFin").val();
                data['idproyectos'] =  "" + {{idproyectos}};

            $.getJSON('{{path('reportemshonduras_reporteRecBatUpsPanel')}}',data, function (data) {


                    var bateria  = data.bateria;

                            if(bateria.length == 0){

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

                            }
                    $("#cantidad").html(bateria.length);
                    $("#primer_reporte").empty().append(createTable(bateria));
                     $.isLoading("hide");
                     var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{filteredRows}',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                    // initial sort set using sortList option
                    $("#tabla1").tablesorter({
                        theme: 'blue',
                        // sort on the first column and second column in ascending order
                        widgets: ["zebra", "filter"],
                        widgetOptions: {
                            // extra css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter: '',
                            // If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows: false,
                            // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                            // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                            filter_hideFilters: false,
                            // Set this option to false to make the searches case sensitive
                            filter_ignoreCase: true,
                            // jQuery selector string of an element used to reset the filters
                            filter_reset: '.reset',
                            // Use the $.tablesorter.storage utility to save the most recent filters
                            filter_saveFilters: true
                        }
                    }).tablesorterPager(pagerOptions);

                    $.isLoading("hide");
                });
       }

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

         var id = $(this).attr("id");
         var idsitio = $(this).attr('idsitio');
         var numBat = $(this).attr("numBat");

         $("#myModalDetalle .modal-body").empty();
         $("#myModalDetalle").modal();
         var data = {'id':id,
                    'idsitio':idsitio,
                    'numBat': numBat}
         $.getJSON('{{ path('reportemshonduras_DetalleRecBat') }}',data,function(data){
           $("#myModalDetalle .modal-body").html(createTable(data.monitor));
           $("#myModalDetalle").modal();
          });

       });

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

         var idsitio = $(this).attr('idsitio');
         var split = $(this).attr("id").split("|");
         var id = split[0];
         var ba = split[1];
         //console.log(id);
         //console.log(ba);
         if ( ba =='R1'  ) {

           $('#myModalDetalle .modal-body').empty();
           $('#myModalDetalle').modal();
           $('#myModalDetalle .modal-body').isLoading({
               text:       "Loading",
               position:   "inside"
           });

           $.ajax({
               url : "{{ path('reportemshonduras_reporteDetalleRecBatUpsPanel') }}",
               data : {'sitio': id,
                       'idsitio': idsitio}
           }).done(function(data){
               $('#myModalDetalle .modal-body').empty();
               var tierra = ''
               tierra += '<div class="table-responsive">'
               tierra += createTable(data.bateria);
               tierra += '</div>'
               $('#myModalDetalle .modal-body').append(tierra);
               $.isLoading("hide");
           });

         }

       });

        /*$("tbody tr").live("click",function(e){
           //  var id = $(this).attr("id");

            var split = $(this).attr("id").split("|");
            var id = split[0];
            var ba = split[1];
            //console.log(id);
            //console.log(ba);

            if(e.target.tagName != 'TD'){ return 0;}
            if ( ba =='R1'  ) {
            //if(id!= null){
                $('#myModalDetalle .modal-body').empty();
                $('#myModalDetalle').modal();
                $('#myModalDetalle .modal-body').isLoading({
                    text:       "Loading",
                    position:   "inside"
                });

                $.ajax({
                    url : "{{ path('reportemshonduras_reporteDetalleRecBatUpsPanel') }}",
                    data : {'sitio': id}
                }).done(function(data){



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

                // alert($(this).attr("id"));
            }});*/


        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,total,nombreColTotal,option){
            var header = Object.keys(monitor[0]);
            var table = '<table id="tabla1" class="table table-bordered table-hover table-striped table-responsive table1">';

            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] !== 'ALARMAS' && header[j] !== 'ID' && header[j] !== 'BA' && header[j] !== 'cerrado2'){
                    //table += "<th style='vertical-align:middle; width: 300px;' class='text-center'>" + header[j] + "</th>"
                    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>";
                    }
                 }
            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                //table += "<tr id="+monitor[i]['ID']+">";
                table += "<tr id="+monitor[i]['ID']+"|"+monitor[i]['BA']+">";

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

                    if(header[j] != 'CLASS' && header[j] != 'ENTREGABLE' && header[j] !== 'ALARMAS' && header[j] !== 'ID' && header[j] !== 'BA' && header[j] != 'CANTIDAD DE RECTIFICADORES DAÑADOS' && header[j] != 'CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA' && header[j] != 'cerrado2' && header[j] != 'CANTIDAD DE RECTIFICADORES'){
                         table += "<td class="+clases+"'   style='vertical-align:middle;'>"+ monitor[i][header[j]]  + "</td>";
                    }

                    if(header[j] == 'CANTIDAD DE RECTIFICADORES DAÑADOS'){

                        var num = (monitor[i][['CANTIDAD DE RECTIFICADORES DAÑADOS']]);
                        //alert(porcentaje);
                        if(num != 0){
                          clases = 'btn-danger';

                      }
                          table += "<td   class=" + clases + ">" + monitor[i][header[j]] + "</td>";
                    }


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

                               table += "<td ><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 ><img border=0; src='{{ asset('images/gray_sync.png') }}'; width='20' height='20'></img></a></td>";
                            }
                        }

                    if (header[j] == 'CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA'){
                      if (monitor[i]['cerrado2'] == 'SI'){
                        var cant = monitor[i]['CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA'];
                        table += "<td class='text-center'>" + '<button type="button" id=' + monitor[i]['ID'] + ' idsitio=' + monitor[i]['ID SITIO'] + ' numBat=' + monitor[i]['CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA'] + ' class="btn btn-default openModalDetailB">'+cant+'</button>' + "</td>";
                      }else{
                        table += "<td class='text-center'>" + monitor[i][header[j]] + "</td>";
                      }
                    }

                    if (header[j] == 'CANTIDAD DE RECTIFICADORES'){
                      var cantR = monitor[i]['CANTIDAD DE RECTIFICADORES'];
                      var id = monitor[i]['ID']+"|"+monitor[i]['BA'];
                      table += "<td class='text-center'>" + '<button type="button" id='+id+' idsitio=' + monitor[i]['ID SITIO'] + ' class="btn btn-default openModalDetailR">'+cantR+'</button>' + "</td>";
                      /*if (monitor[i]['cerrado2'] == 'SI'){
                        var cant = monitor[i]['CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA'];
                        table += "<td class='text-center'>" + '<button type="button" id=' + monitor[i]['ID'] + ' idsitio=' + monitor[i]['ID SITIO'] + ' numBat=' + monitor[i]['CANTIDAD DE BANCOS POR ESTACÍON RECTIFICADORA'] + ' class="btn btn-default openModalDetailB">'+cant+'</button>' + "</td>";
                      }else{
                        table += "<td class='text-center'>" + 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 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_restificadores_template";
            //$.isLoading("hide");
            $.getJSON('{{path('reportemshonduras_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");

                });
     }

    </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>
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                 <label>Región: </label>
                <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"  style="margin-top: 1%">

                <select class="form-control" id="alarmas" style="visibility: hidden;">
                         <option value="todos">{{'inbox.all' | trans}}</option>
                         <option value="1">{{'Chapeo de Maleza' | trans}}</option></option>
                         <option value="2">{{'Cucarachicida' | trans}} </option>
                         <option value="3">{{'Rodenticida' | trans}}</option>
                         <option value="4">{{'Buen estado de los muros o mallas' | trans}}</option>
                         <option value="5">{{'Hundimientos' | trans}}</option>
                         <option value="6">{{'Objeto, material o equipo sin uso' | trans}}</option>
                         <option value="8">{{'Buenas condiciones de la torre' | trans}}</option>
                         <option value="9">{{'Estado de la -Línea de vida- en Torre' | trans}}</option>
                         <option value="10">{{'Supresor de Balizas' | trans}}</option>
                         <option value="11">{{'Tierra del Pararrayos' | trans}}</option>
                     </select>
            </div>
            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
               <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
               <button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>
        </div>
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>{{'MP RECTIFICADORES' | trans}}</h1>
                 </div>

        </div>
         <div class="row">
            <div class="col-lg-3 pager" style="text-align: left;">
                {{'Cantidad' | trans}}: <span id="cantidad" class="pagedisplay"></span>
            </div>
             <div class="col-lg-offset-9">
                 <div class="btn-group pull-right">
                     <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" onclick="$('#primer_reporte').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                        </ul>
                 </div>
            </div>
        </div>
        <div class="row" style="overflow-x: scroll;">
            <div id="primer_reporte" class="col-lg-12"></div>
        </div>
        <div class="row">
            <div id="pager" class="pager col-lg-12" 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="5000">5000</option>
                        <option  value="3000">3000</option>
                        <option  value="1000">1000</option>
                        <option  value="500">500</option>
                        <option  value="100">100</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>
        <!-- Esto es para el detalle de las alarmas de los monitores..  -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
       <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{'Detalle de las alarmas' | trans}}</h4>
        </div>
        <div class="modal-body">
          <p id="palarmtext"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
        </div>
      </div>
    </div>
</div>
<!-- fin detalle alarma  -->




    <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 VISITAS' | 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 %}