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

{% endblock %}

{% block dashboard %}
    <style>

        .panel-green {
            border-color: #5cb85c;
        }

        .panel-green .panel-heading {
            border-color: #5cb85c;
            color: #fff;
            background-color: #5cb85c;
        }

        .panel-green a {
            color: #5cb85c;
        }

        .panel-green a:hover {
            color: #3d8b3d;
        }

        .panel-red {
            border-color: #d9534f;
        }

        .panel-red .panel-heading {
            border-color: #d9534f;
            color: #fff;
            background-color: #d9534f;
        }

        .panel-red a {
            color: #d9534f;
        }

        .panel-red a:hover {
            color: #b52b27;
        }

        .panel-yellow {
            border-color: #f0ad4e;
        }

        .panel-yellow .panel-heading {
            border-color: #f0ad4e;
            color: #fff;
            background-color: #f0ad4e;
        }

        .panel-yellow a {
            color: #f0ad4e;
        }

        .panel-yellow a:hover {
            color: #df8a13;
        }

        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

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

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

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

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

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

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

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

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

        .wrapper {
            padding-bottom: 50px;
        }

        .header {
            background: #000000;
        }

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

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

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

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

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

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

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

        pre, .well {
            background: #FFFFFF;
        }

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

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

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

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

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

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

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

        #menuTop {
            margin-top: 30px;
        }

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

        h1 {
            font-size: 36px;
        }

        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #aa0001;
            border-color: #2643a5;

        }

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

        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

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

        input[type="search"] {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
    </style>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script>

        $(function() {

            var intervalTime = null;
            $('#autoload').click(function() {

                var time = parseInt($('#time').val());
                if ($(this).prop('checked')) {
                    intervalTime = window.setInterval(getReporte, time);
                }
                else {
                    clearInterval(intervalTime);
                }
            });

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

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

                    }
            });

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

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

            $("#clear").click(function(){
                $("#pais").val();
                $("#region").val("TODOS");
                $("#evento").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='Panama'%}{%endif%}

                   $("#pais option").remove();
                   $("#pais").append('<option value={{pais}}>{{pais}}</option>');

                   $.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">TODOS</option>');
                           $("#asp option").remove(); $("#asp").append('<option value="TODOS">TODOS</option>');
                           $("#tecnico option").remove(); $("#tecnico").append('<option value="TODOS">TODOS</option>');*/
                      }
                    });

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

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



        function getReporte() {
            var data = {};

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

            if($("#pais").val() != "TODOS")
                data['pais'] = "'"+$("#pais").val()+"'";
            else {
                data['pais'] = 'i.pais';
            }

            /*if($("#region").val() != "TODOS")
                data['region'] = "'"+$("#region").val()+"'";
            else {
                data['region'] = 'i.Region';
            }

            if($("#asp").val() != "TODOS")
                data['asp'] = "'"+$("#asp").val()+"'";
            else {
                data['asp'] = 'i.ASP';
            }

            if($("#tecnico").val() != "TODOS")
                data['tecnico'] = "'"+$("#tecnico").val()+"'";
            else {
                data['tecnico'] = 'i.Tecnico';
            }*/

            $.getJSON('{{ path('iosite_getReporte') }}', data, function(data) {
                var monitor = data.monitor;
                var flag = true;

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

                var objectType = {'8': 1, '9': 2};
                $('#reporte1').empty().append(
                    createTable(monitor, undefined, undefined, objectType, undefined));
                $('.double-scroll').doubleScroll();
                var pagerOptions = {
                    // 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: 'Rows : {endRow}',
                    // 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);
                $('.pager').show();
                $('#inicio').show();
                $('#autoload').attr('disabled', false);
                $.isLoading('hide');
            }).fail(function() {
                $.isLoading('hide');
            });
        }

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

            var header = Object.keys(monitor[0]);
            var headerType = Object.keys(type);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1" id="tableSitios"> <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 class=\'text-center\' id=\'' + monitor[i][header[0]] + '\'>';

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


                        if(header[j] == 'JSA'){
                            if(monitor[i]['JSA'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP ACCESO'){
                            if(monitor[i]['MP ACCESO'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP AA'){
                            if(monitor[i]['MP AA'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP MG'){
                            if(monitor[i]['MP MG'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP TIERRA'){
                            if(monitor[i]['MP TIERRA'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP RECT'){
                            if(monitor[i]['MP RECT'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP ENERGIA'){
                            if(monitor[i]['MP ENERGIA'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

                        if(header[j] == 'MP INFRA'){
                            if(monitor[i]['MP INFRA'] == 'NO'){
                                clases = "class='btn-danger'";
                            }
                        }

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


                    /*if (j != "NO") {
                        if(header[j] == 'MP ACCSESO'){
                            if(monitor[i]['MP ACCSESO'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP AA'){
                            if(monitor[i]['MP AA'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP MG'){
                            if(monitor[i]['MP MG'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP TIERRA'){
                            if(monitor[i]['MP TIERRA'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP RECT'){
                            if(monitor[i]['MP RECT'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP ENERGIA'){
                            if(monitor[i]['MP ENERGIA'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

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

                    if (j != "NO") {
                        if(header[j] == 'MP INFRA'){
                            if(monitor[i]['MP INFRA'] == '<span style="color:#2643a5;margin-left:05%">X</span>'){
                                clases = "class='btn-danger'";
                            }
                        }

                        table += "<td "+clases+">" + 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 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 llenarCombos(){
               /*$("#region option").remove();
               $("#asp option").remove();
               $("#tecnico option").remove();
               $("#region").append('<option value="TODOS">REGION</option>');
               $("#asp").append('<option value="TODOS">ASP</option>');
               $("#tecnico").append('<option value="TODOS">TECNICO</option>');*/
               var data = {};
               data['pais']=$("#pais").val();
               data['fechaIni']=$("#Filtros_fechaIni").val();
               data['fechaFin']=$("#Filtros_fechaFin").val();
               $.getJSON('{{path('iosite_monitor_llenarMonitor')}}',data, function (data) {
                       /*var regions  = data.region;
                       var asp = data.asp;
                       var tecnico = data.tecnico;

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

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

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

                       $.isLoading("hide");

                   });
           };


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

    </script>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <h1 class="text-right text-primary"><i class="fa fa-file-text-o"></i> {{ title }}</h1>
            </div>
            {% if identity is not empty %}
            <div style="text-align: center" class="col-lg-4">
                <img class="text-right" id="logo"  src="{{ asset( identity.pathLogo ) }}" width="200" height="120">
            </div>
            {% endif %}
        </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>
                 {%for pais in paises%}
                     <option value="{{pais.pais}}">{{pais.pais}}</option>
                 {%endfor%}
             </select>
         </div>
            <!-- <div class="col-lg-2"  style="margin-top: 1%">
                <label>{#'monitor.etiqueta.fechaI' | trans#}: </label>
                <input type="text" class="form-control datepicker" id="fecha" value="{#fecha#}">
            </div>-->
            <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>
            <div class="row">
              <div class="col-lg-2"  style="margin-top: 1%">
                  <label>Region: </label>
                  <select class="form-control" id="region">
                      <option value="TODOS">{{'inbox.all' | trans}}</option>
                  </select>
              </div>
              <div class="col-lg-2"  style="margin-top: 1%">
                  <label>{{'Asp' | trans}}: </label>
                  <select class="form-control" id="asp">
                      <option value="TODOS">{{'inbox.all' | trans}}</option>
                  </select>
              </div>
              <div class="col-lg-2"  style="margin-top: 1%">
                  <label>{{'Técnico' | trans}}: </label>
                  <select class="form-control" id="tecnico">
                      <option value="TODOS">{{'inbox.all' | 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>
        <div class="container-fluid" id="inicio" style="display: none" >

            <div class="tab-content" style="margin-top: 20px;">
                <div id="_summary" class="tab-pane fade in active">

                    <div class="row">
                        <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                            <a href="#"
                               onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Distribuidores',ignoreRow: [1]});">
                                <img src={{ asset("images/xls.png") }} width="24px"> XLS</a>
                        </div>
                        <div class="pager">
                            <span class="pagedisplay"></span>
                        </div>

                        <a class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>

                    </div>
                    <div class="row double-scroll" id="reporte1">
                    </div>
                    <div id="pager" class="pager" style="display: none;text-align: center; ">
                        <form>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/first.png') }}" class="first"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/prev.png') }}" class="prev"/>

                            <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
                            <span class="pagedisplay"></span>
                            <select class="pagesize" title="Select page size">
                                <option selected="selected" value="1000">1000</option>
                                <option value="500">500</option>
                                <option value="100">100</option>

                            </select>
                        </form>
                    </div>
                </div>
                <div id="_detail" class="tab-pane fade in">

                    <div class="col-lg-6" id="chart3">

                    </div>
                    <div class="col-lg-6" id="chart4">

                    </div>

                </div> <!-- end detail -->
            </div>
        </div>
    </div>

{% endblock %}