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

{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
   <style>
   
       .btn-claro {
           color: #fff;
           background-color: #00569C;
           border-color: #3D59CA;
       }
       .double-scroll {
            width: 100%;
            margin-bottom: 20px;
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        table.tablesorter thead tr th {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        .th2
        {
            background-color:#00569C;
              border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
 .std {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: right;
            color: white;
            font-weight: bold;
        }
     .stdLeft {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: left;
            color: white;
            font-weight: bold;
        }
        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

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

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

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        #menuTop {
            margin-top: 30px;
        }
       /* .table{
            font-size: 12px;
            width: 3000px;
        }
*/
        .estilod{
            background-color: green;

        }

        .estilof{
            background-color: red;

        }
        espacio{
            padding-top: 20px;
        }

    .reconocer
        {
            background:#00569C;
            color:#ffffff;
           border-radius: 300px 300px 300px 300px;
            -moz-border-radius: 300px 300px 300px 300px;
            -webkit-border-radius: 300px 300px 300px 300px;
            border: 1px solid #000000;
            height: 38px;
            width: 80px;
            font: oblique bold 120% ;
        }
        .modal-header{
            background:#00569C;
            font:oblique bold;
           text-transform: uppercase;
        }


.btn-orange {
    color: #fff;
    background-color: #00569C;
    border-color: #ecea19;
}
</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>

  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";
          }

      }
    }
  }
}

        var translation = {



        };

        $(function () {


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

           $('#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(){
                $("#region").val("TODOS");
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
            });




              $("#save").click(function(){
                           id=$("#vg").text();
                           id= id.split("@");

                           alert($("#comment").val());
                           alert(id[0]);
                           alert(id[1]);

                           var comment=$("#comment").val();

                           idproyectos={{idproyectos}};
                           idticket=id[1];

                switch (id[0])
                {
                    case "Aprobar":
                         idEstado=2551;
                    break;
                     case "Rechazar":
                         idEstado=2552;
                    break;

                }



                     var url2="{{path('actualizarEstadoCliente',{'idproyectos':idproyectos,'idticket':'idticketn','idEstado':'idEstadon'})}}"+"?comentario="+comment+"";

                         url2=url2.replace("idticketn",idticket);
                         url2=url2.replace("idEstadon",idEstado);

                         console.log(url2);


                           $.ajax({
                            type: "GET",
                            async: true,
                            url: url2,
                            //data: {infMas: infoMasiva}
                        }).success(function (msj) {
                            $("#myModal2").modal();
                            $("#cantidad").html(0);
                 reporte();
                            //alert(msj);
                            //$("#datosPersonales").text('');
                            //$("#datosPersonales").load("{{path('addDptoCargo',{'idproyectos':idproyectos })}}", {$iduser: msj});
                           // $('#cargar').css('display', 'none');
                            //location.reload(true);
                        }).error(function (msj) {
                            //$("#myModal2").modal();
                            alert("Falla en aplicacion ");

                        });



                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                 $("#cancel").click(function(){


                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                $("#close").click(function(){


                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                    $('#comment').keypress(function() {



                    $('#save').attr('disabled', false);

                 });




           $("td").live("click",function(e){
               $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');
               var i=0;
                  var id = $(this).attr("id");
                   id2= id.split("@");



                                            //   $("#myModal2").modal();


                 // @Route("/actualizarEstadoCliente/{idproyectos}/{idticket}/{idEstado}", name="actualizarEstadoCliente")

                  if(id2[0]=='Aprobar'|| id2[0]=='Aprobar2'|| id2[0]=='Rechazar'){

                      if(id2[0]=='Aprobar'|| id2[0]=='Rechazar'){


                        $("#comment").empty();
                        $("#myModal").modal();
                        $('#save').attr('disabled', true);
                        $("#msj").append( "<h4 style='color: white;' >"+id2[0]+"</h4>" );
                        $("#v").append( "<p id='vg' value="+id+">"+id+"</p>" );

                      }
                      else{
                          console.log("----------");
                      }

                  }
                  else{

           if($(this).attr("class")!=0)
           {
               //alert($(this).attr("class"));

            var data = {};
                var id = $(this).attr("id");
                var forma="";
                 if (id)
            {
                id= id.split("@");
                data['inicio'] = $("#Filtros_fechaIni").val();
                data['fin'] = $("#Filtros_fechaFin").val();
                data['idproyectos']={{idproyectos}};
                console.log(id);
                data['sitio']=id[1];
                switch (id[0])
                {
                    case "AA":
                        forma="appenate.Maya_MP_AA";
                    break;
                     case "TO":
                        forma="appenate.Maya_MP_Torre";
                    break;
                     case "MA":
                        forma="appenate.Maya_Mantto_Autonomo_template";
                    break;
                     case "MC":
                        forma="appenate.Maya_mc_hallazgos_vandalismos";
                    break;
                     case "MG":
                        forma="appenate.maya_ni_motogenerador";
                    break;
                     case "RB":
                        forma="appenate.Maya_MP_RadioBase";
                    break;
                     case "REC":
                        forma="appenate.Maya_NI_Rectificadores";
                    break;
                     case "ST":
                        forma="appenate.Maya_MP_Fuerza";
                    break;
                    case "TX":
                        forma="appenate.Maya_MP_Supervision_Electronica_template";
                    break;
                }

               data['forma']=forma;


                $.isLoading({
                    text:       "Loading"
                });


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

                       var datos  = data.datos;
                       var con = data.con;
                       console.log(datos[0]['ID SITIO']);
                       var pais="Nicaragua";

                       //console.log(con);
                        document.getElementById('myModalLabel').innerHTML='DETALLES DE REPORTES '+pais+' ID SITIO'+datos[0]['ID SITIO']+' EN LA FORMA \''+id+'\'<br>CANTIDAD DE REGISTROS: '+datos.length;
                        $("#detalleT").empty().append(createDetalle(datos));
                        $('#myModalDetalle .modal-body').empty();
                        $('#myModalDetalle').modal();
                      data.forma;

            }).done(function(datos){



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

           }
           else{
               //alert("------------");
           }
           }
          }

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

        });

        function reporte(){

           var data = {};



                data['inicio'] = $("#Filtros_fechaIni").val();
                data['fin'] = $("#Filtros_fechaFin").val();
                data['idproyectos']={{idproyectos}};


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

                    var datos  = data.datos;




                     getTorta(data.torta);
                            if(datos.length == 0){

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

                    $.isLoading("hide");


                            }
                            else
                            {
                    $("#cantidad").html(datos.length);
                    $("#primer_reporte").empty().append(createTable(datos));
                    //$("#primer_reporte" ).slider();
                    $.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: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                    // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                    // table row set to a height to compensate; default is false
                    fixedHeight: false,
                    // remove rows from the table to speed up the sort of large tables.
                    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                    removeRows: true,
                    // go to page selector - select dropdown that sets the current page
                    cssGoto: '.gotoPage'
                };
                // initial sort set using sortList option
                $(".table1").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);
                }
    });
       }


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

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

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

                 if(header[j] != 'idTicket' && header[j] !='idS'){
                table += "<th style='vertical-align:middle;' class='text-center'>" + header[j] + "</th>"
                }


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

            for (var i = 0; i < monitor.length; i++) {
                 var ticket=monitor[i]["idTicket"];

              var url = "{{path('ticketDetalleCliente',{'idproyectos':idproyectos,'idticket':'nuevo'})}}"+"?idinforme=0&accion=Aprobacion";
               url=url.replace("nuevo",ticket);
               var ini=$("#Filtros_fechaIni").val();
                var fin= $("#Filtros_fechaFin").val();
               var url2 = "{{path('MonitorTEM_GetReporte',{'idproyectos':idproyectos,'idticket':'nuevo'})}}"+"&idsitio="+monitor[i]['idS']+""+"&inicio="+ini+""+"&fin="+fin+""+"&ticket="+monitor[i]['ticket'];
               url2=url2.replace("nuevo",ticket);

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

                  if(header[j] != 'idTicket' && header[j] !='idS')
                  {
                   // table += "<td style='vertical-align:middle; text_align:' class='text-center'>" + monitor[i][header[j]]  + "</td>";

                      if(header[j]=="Aprobar"||header[j]=="Aprobar2"||header[j]=="Rechazar")
                      {
                          table += "<td id='"+header[j]+"@"+monitor[i]["idTicket"]+"' width='10%' style='vertical-align:middle; text-align:center'class='"+ monitor[i][header[j]]  +"" + monitor[i][header[j]]  + "</td>";
                        //  table += "<td width='10%' style='vertical-align:middle; text-align:center'><a href="+url+">" + monitor[i][header[j]]  + "</a></td>";

                      }
                      else
                      {
                          if(header[j]=="AA"||header[j]=="TO"||header[j]=="MA"||
                             header[j]=="MC"||header[j]=="MG"||header[j]=="RB"||
                             header[j]=="REC"||header[j]=="ST"||header[j]=="TX"||header[j]=="Verificar")
                          {
                              if(header[j]=="Verificar"){
                                 if(monitor[i]["AA"]==0 && monitor[i]["TO"]==0 && monitor[i]["MA"]==0 && monitor[i]["MC"]==0 &&
                                    monitor[i]["MG"]==0 && monitor[i]["RB"]==0 && monitor[i]["REC"]==0 && monitor[i]["ST"]==0 &&
                                   monitor[i]["TX"]==0
                                ){
                            table += "<td width='10%' style='vertical-align:middle; text-align:center'>-</td>";


                                 }
                                 else{

  table += "<td width='10%' style='vertical-align:middle; text-align:center'><a href="+url2+">" + monitor[i][header[j]]  + "</a></td>";
                                 }
                                //table += "<td width='10%' style='vertical-align:middle; text-align:center'><a href="+url2+">" + monitor[i][header[j]]  + "</a></td>";
                              }
                              else{
                              table += "<td id='"+header[j]+"@"+monitor[i]["idS"]+"' width='10%' style='vertical-align:middle; text-align:center'class='"+ monitor[i][header[j]]  +"'>" + monitor[i][header[j]]  + "</td>";
                              }
                          }
                          else
                          {
                        table += "<td width='10%' style='vertical-align:middle; text-align:center'>" + monitor[i][header[j]]  + "</td>";
                        }
                     }
        }
                }
                table += "</tr>";

                if(typeof total !== "undefined") {



                        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 getTorta(data){

        var colores = ['blue','#E5FB24','green','#62FF00','#a1c517','#0B12E2','#8A0868','#009045','#FF9500','#04FFFC','#7EB7FC','#CE9BA9','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'];
        var valorY=[];
        var categoria=[];
        var series=[];



                        $.isLoading("hide");

                        for (var i =0; i < data.length; i++)
                        {
                         var vValor=parseInt(data[i]['cantidad']);
                            categoria.push(data[i]['Región']);
                            valorY.push(vValor);

                            series[i] ={ name:data[i]['Región'], y: parseInt(data[i]['cantidad']) };
                        }

            var options = {
                chart: {
                    renderTo: 'torta',
                    type: 'pie',
                    height: 400,
                    width: 650,
                    options3d: {
                        enabled:true,
                        alpha: 45,
                        beta:0
                    }
                },
                title: {
                    text: 'REPORTES POR REGIÓN'
                }, //no toquen 4
                //
                colors: colores,
                tooltip: {
                    pointFormat: 'Porcentaje de Reportes: <b>{point.percentage:.1f}%</b>'
                },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 50,
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        },
                 series: [{
                       data:series
    }]
           };
            var chart7 = new Highcharts.Chart(options);
        }


/////////////////////////////////////////////////////////////////////////////////////////////////

             function createDetalle(datos){

                 var header = Object.keys(datos[0]);
                var table = '<table class="table table-striped table-bordered table-hover responsive table-condensed nowrap" id="table"><thead>';

              table+="</thead><tr>";
        for(i=0;i<header.length;i++)
        {
            table += "<th style='vertical-align:middle;' class='text-center'>" + header[i] + "</th>"
        }
         for(i=0;i<datos.length;i++)
         {
              table +="<tr>";
             for(j=0;j<header.length;j++)
             {
                 table += "<td style='vertical-align:middle;' class='text-center'>" +datos[i][header[j]] + "</td>"
             }
              table +="</tr>";
         }


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

    }



    </script>

    <!-- <div class="page-header text-center text-muted">
    <h1 class="eri-font"></h1>
    </div> -->

    <div class="container">
        <div class="row">
            <div class="col-lg-2 eri-font"  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 eri-font"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
             <br>

            <div class="col-lg-3" 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>

               <img id="logo" class="pull-right" src="{{ asset('images/LogoTIGO.png') }}"  width="100" height="62" >

            </div>

         <div class="row">
                <div class="col-lg-12 text-center eri-font"  style="margin-top: 1%">
                    <h1>{{'REPORTES PENDIENTES POR REVISIÓN' | trans | upper}}</h1>
                 </div>

        </div>
              <div class="col-md-12"  style="margin-top: 1%">
                        <div class="btn-group pull-right">
                            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                            <ul class="dropdown-menu" role="menu">
                                 <li><a href="#" onclick="$('#table').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                            </ul>
                        </div>
                </div>




        </div>

        <div class="row">
             <div class="col-lg-12" id="torta" style="margin-top: 1%">


             </div>
            <div class="col-lg-12 top-uno" id="primer_reporte">

            </div>
            <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 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"></h2>
                </div>
                <div class="col-md-12">
                    <div class="col-md-12"  style="margin-top: 1%">
                            <div class="btn-group pull-right">
                                <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button><br>
                                <ul class="dropdown-menu" role="menu">
                                     <li><a href="#" onclick="$('#myModalDetalle').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                                </ul>
                                <br><br>
                            </div>
                    </div>

                    <div class="col-md-12" id='detalleT'  style='height:315px; overflow: scroll;'></div>
                </div>
                <div class="modal-footer">

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

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

    </div>


    <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
          <div id="msj">
          </div>

        </div>

          <div id="formulario" >
        <div class="modal-body">


          <div id="v"></div>
          <div>
          <div class="form-group">
          <label for="comment">Comment:</label>
          <textarea class="form-control required" rows="5" id="comment"></textarea>
          </div>



        </div>
        <div class="modal-footer">
          <button type="button" id="save" class="btn btn-primary" data-dismiss="modal">Save</button>
          <button type="button" id="cancel" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>
          </div>
    </div>
  </div>

      </div>






     <!-- Modal -->
  <div class="modal fade" id="myModal2" role="dialog" >
        <div class="modal-dialog  modal-sm">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title" style="color: white;">Alerta</h4>
            </div>

               <div class="modal-body">
                   <p>Ticket Modificado</p>
               </div>
          </div>
        </div>
   </div>
{% endblock %}