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

{% endblock %}

{% block dashboard %}
    <style>
        /* 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;
            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;
        }


        /*Fin*/
        #bateriatab_filter { float: right; }

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

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

        }

        .bg-claro {
            color: #fff !important;
            background-color: #aa0001 !important;
            background: #aa0001 !important;
        }

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

        }

        .table th{
            font-size: 7pt;
        }
        .table td{
            font-size: 7pt;
        }

        .btn-yellow {
            background-color: #ffff0c;
            color: #000000;
            background-image: -moz-linear-gradient(top, #ecea19, #ecea19);
            background-image: -ms-linear-gradient(top, #ecea19, #ecea19);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ecea19), to(#ecea19));
            background-image: -webkit-linear-gradient(top, #ecea19, #ecea19);
            background-image: -o-linear-gradient(top, #ecea19, #ecea19);
            background-image: linear-gradient(top, #ecea19, #ecea19);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'78cd51, endColorstr='#'5AAD34, GradientType=0);
            border-color: #ecea19 #ffff0c #ecea19;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }
        .btn-yellow {
            color: #fff;
            background-color: #FFFF00;
            border-color: #ecea19;


        }

        .col-lg-12{

            padding-left: 5px;
        }
        tr {cursor:pointer}

        .double-scroll {
            width: 100%;
        }
        /*.td-si-accerreo, .td-combus-submin
        {
            text-decoration: underline;
        } */
        .btn-yellow {
            color: #fff;
            background-color: #000000;
            border-color: #ecea19;
        }
        .btn-orange {
            color: #fff;
            background-color: rgb(255, 165, 0) !important;
            border-color: #ecea19;
        }

        .pagination
        {
            width: 100%;
        }
        {%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;}
        input[type="search"]{
            display: block;
            width: 100%;
            height: 28px;
            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;
        }

        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 0px;
            border-width: 1px;
            border-style: solid;
            border-color: black !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .datepicker {
            z-index: 1600 !important; /* has to be larger than 1050 */
        }
        .bs-datepicker-container { z-index: 3000; }

        .imageCell {
            height: 100px;
            min-width: 100px;
            background-position: center!important;
            background-repeat: no-repeat!important;
            background-size: cover!important;
        }

        .popover{
            max-width: 400px !important;
        }
        /*.popover-image {
            width: 400px;
            height: 400px;
        }*/
        /*.popover-content{
            max-width: 800px !important;
            width: 420px !important;
            height: 400px !important;
        }*/

    </style>
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <script src="{{ asset('popper/popper.min.js') }}"></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('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></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 src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}"></script>
    <script>
        var table;
        function crearPopover(){
            $('body').popover({
                selector: '.has-popover',
                html: true,
                trigger: 'click',
                placement: 'left',
                content: function () { return '<img src="' + $(this).data('img') + '" width="350px" height="350px"/>'; }
            });
        }

        $(document).ready(function() {
            $('.double-scroll').doubleScroll();
            $('#primer_reporte').doubleScroll({resetOnWindowResize: true});
        });

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


            $('#cmbPais').change(function(){
                var selected = $(this).find('option:selected');
                var extra = selected.data('moneda');
                $('#txtMonedaLocal').val(extra);
            });


            {%if idproyectos == 79 or 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%}

            {%if idproyectos == 79 %} {%set idpais=1%} {%set pais='Guatemala'%}{%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');
        });


        /*
         $("td.td-si-accerreo, td.td-combus-submin").live("click",function(e){
         if(e.target.tagName != 'IMG'){
         var id = $(this).parent().attr('id');//usamos parent porque TR tiene el valor
         var tt = $(this).parent().attr('tt');
        {%if idproyectos != 36 and idproyectos != 37 %}
         return window.open('{{ path('reportemshonduras_imagenAbastecimiento')}}'+ '?' + 'tt=' + tt  +'& id=' + id , 'prueba', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+100%+', height='+100%+', top='+50+', left='+400);
        {%endif%}
         }
         });

         */

        /*$("#tabledatos tr").live("click", function (){
            var rowid = $(this).attr("tt");
            $('#myModalDetalle .modal-body').empty();
            $('#myModalDetalle').modal();
            $.isLoading("show");
            data = {};
            data['rowid'] = rowid;

            $.getJSON('{{ path('reportemshonduras_DetalleAbastecimiento') }}', data, function (data) {
                var bateria = data.bateria;
                $.isLoading("hide");
                $('#myModalDetalle .modal-body').append(createTable(bateria));
            })
        });*/

        function reporteBateria(){

            var data = {};

            data['tipo'] = $("#tipoTanque").val();
            data['horas'] =  $("#horas_trabajadas").val() == ""?0:$("#horas_trabajadas").val();
            data['region'] = $("#region").val();
            data['pais'] = $("#pais").val();
            data['fechaIni'] = $("#Filtros_fechaIni").val();
            data['fechaFin'] = $("#Filtros_fechaFin").val();
            data['idproyectos'] =  ""+{{idproyectos}};
            $.getJSON('{{path('reportemshonduras_reporteAbastecimientoImg')}}',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);
                crearPopover();
                $("#primer_reporte").empty().append(createTable(bateria));
                $("#bateriatab").dataTable({
                            bSort: false,
                            pageLength: 100,
                            lengthMenu: [ [ 20, 50, 100, 250, 500, -1 ],
                                [ 20, 50, 100, 250, 500, 'Todos' ] ],
                            responsive: true,
                            buttons: [{
                                extend: 'excel',
                                text: 'Excel',
                                filename: 'abastecimiento_reporte',
                            }, 'colvis'] }
                );


                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})',
                    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
                $("#bateriatab").tablesorter({
                    theme: 'red',
                    // 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);

                $(".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();

                $.isLoading("hide");

            });
        }


        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  class="table table-bordered table-hover table-striped table-responsive table1" id="tabla1"> <thead>' + '<tr class="btn-claro">';

            /*var table = '<table id="bateriatab" class="table table-bordered table-hover table-striped table-responsive tablesorter tablesorter-blue hasFilters"> <thead>' +
             //var table = '<table id="bateriatab" class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters">';

             '<tr class="btn-claro">';*/
            /*var table;
             if (option == 1) {
             table = '<table  id="tabla1" class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters" style="text-align:left"> <thead>' + '<tr class="btn-claro">';
             } else
             {
             table = '<table  id="tabla1" class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters"> <thead>' + '<tr class="btn-claro">';
             }*/

            for (var j = 0; j < header.length; j++) {
                var strCol = header[j];
                if (header[j] == 'URL') {
                    header[j] = 'ENTREGABLE';
                };
                if(header[j] != 'CLASS'){
                    if(header[j] != 'TT_No' && header[j] != 'ID' && strCol.indexOf('_')!=0){
                        if (option == 1) {
                            table += "<th style='vertical-align:middle; width:300px' class='text-center'>" + header[j] + "</th>";
                        } else{
                            table += "<th style='vertical-align:middle; width: 50px;' class='text-center'>" + header[j] + "</th>"
                        }
                    }
                }
            }
            table += "</tr>";
            table += '<tr>';

            //EVITA CAMPOS DE BUSQUEDA SI ES UN DETALLE EN EL MONITOR, 17 ES EL NUMERO DE CAMPOS DEL QUERY PRINCIPAL DEL MONITOR
            //if(header.length > 5) {
            /*var flagnumber = 0;
             for (var j = 0; j < header.length; j++) {
             if(header[j] != 'TT_No' && header[j] != 'ID' && header[j]!="ENTREGABLE"){
             //    if(header[j] != 'ID') {
             var tmpid = 'id' + flagnumber + 'id';
             table += "<td style='vertical-align:middle; height: 52px;' class='text-center'>\n\
             <input  class='form-control' style=font-size:9px type=input id=" + tmpid + " onkeyup=myFunction(" + flagnumber + "," + "id" + flagnumber + "id" + ")></td>";
             flagnumber += 1;
             }
             }*/
            //  }
            table += "</tr></thead>";


            /*table += '<tr >';
             var flagnumber =0;
             for (var j = 0; j < header.length; j++) {




             if(header[j] != 'CLASS' && header[j] != 'ALARMAS'   && header[j] !== 'ID' && header[j] != 'ENTREGABLES'
             ){

             var tmpid = 'id'+flagnumber+'id';
             table += "<td style='vertical-align:middle;' class='text-center'>\n\
             <input  class='form-control' style=font-size:9px type=input id="+tmpid+" onkeyup=myFunction("+flagnumber+","+"id"+flagnumber+"id"+")></td>"
             flagnumber +=1;
             }
             }

             table += "</tr>";*/

            table += "<tbody id='tabledatos'>";
            var ImgNivelCombustibleInicial = "-";
            var ImgNivelCombustibleFinal = "-";
            for (var i = 0; i < monitor.length; i++) {
                //console.log('FILA ' + i);
                ImgNivelCombustibleInicial = "-";
                ImgNivelCombustibleFinal = "-";
                table += "<tr tt='"+monitor[i]['TT_No']+"' id='"+monitor[i]['ID']+"'>";
                for (var j = 0; j < header.length; j++) {
                    var clases   = '';
                    var strColumn = header[j];

                    if(!monitor[i][header[j]]){
                        monitor[i][header[j]] = '-';
                    }

                    if(header[j] == '% TANQUE'){
                        var porcentaje = parseFloat(monitor[i][['% TANQUE']]);

                        if (monitor[i][['% TANQUE']]=='_') clases   = 'style="background-color: gray; color:#ffffff;"';

                        if(porcentaje < 30){
                            clases = 'btn-danger';
                        }else if(porcentaje > 60){

                            clases = 'btn-success';
                        }else if(porcentaje > 30 && porcentaje >= 60){

                            clases = 'btn-yellow';
                        }else{
                            clases = 'btn-warning';
                        }
                    }
                    /*if (j == 13 || j == 16)//13 y 16 son Combustible Administrado y Acarreo respectivamente
                    {
                        if (monitor[i][header[j]] == 'SI' && j == 16) { clases += ' td-si-accerreo'; }
                        else if (j == 13) clases += ' td-combus-submin';
                    }*/
                    //td-si-accerreo <---> td-combus-submin
                    if(header[j] != 'TT_No' && header[j] != 'ID'
                            && header[j] != 'ENTREGABLE'
                            && header[j] != 'FOTO TANQUE' && strColumn.indexOf('_')!=0
                            && header[j] != 'NIVEL DE COMBUSTIBLE INICIAL (PULGADAS)'
                            && header[j] != 'NIVEL DE COMBUSTIBLE FINAL (PULGADAS)'
                            && header[j] != 'FACTURA ACARREO'
                            && header[j] != 'FACTURA COMBUSTIBLE'
                    )
                        table += "<td class='"+clases+"'>" +  monitor[i][header[j]]  + "</td>";


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

                            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></td>";
                        }
                    }
                    if (header[j]== 'FOTO TANQUE' || header[j]== 'FACTURA ACARREO' || header[j]== 'FACTURA COMBUSTIBLE'){
                        if (monitor[i][header[j]]!='-'){
                            table +="<td data-toggle='popover-hover' " +
                                    " data-img='" + monitor[i][header[j]] + "' "    +
                                    "class='imageCell has-popover' style='background: url(\"" + monitor[i][header[j]] + "\")'>";
                            table +="&nbsp;</td>";
                        }else{
                            table +="<td class='text-center'>" + monitor[i][header[j]] + "</td>";
                        }
                    }
                    if (header[j]== '_picImgNivelCombustibleInicial'){
                        ImgNivelCombustibleInicial = monitor[i][header[j]];
                    }
                    if (header[j]== 'NIVEL DE COMBUSTIBLE INICIAL (PULGADAS)'){
                        if (ImgNivelCombustibleInicial != '-'){
                            table +="<td valign='middle' class='imageCell text-center has-popover' " +
                                    "data-toggle='popover-hover' " +
                                    " data-img='" + ImgNivelCombustibleInicial + "' "    +
                                    "style='vertical-align: middle !important; background: url(\"" + ImgNivelCombustibleInicial + "\")'>";
                            table += "<h4><span class='label label-primary'>" + monitor[i][header[j]] + "</span></h4></td>";
                        }else{
                            table +="<td class='text-center'>" + monitor[i][header[j]] + "</td>";
                        }
                    }

                    if (header[j]== '_picImgNivelCombustibleFinal'){
                        ImgNivelCombustibleFinal = monitor[i][header[j]];
                    }
                    if (header[j]== 'NIVEL DE COMBUSTIBLE FINAL (PULGADAS)'){
                        if (ImgNivelCombustibleFinal != '-'){
                            table +="<td valign='middle' class='imageCell text-center has-popover' " +
                                    "data-toggle='popover-hover' " +
                                    " data-img='" + ImgNivelCombustibleFinal + "' "    +
                                    "style='vertical-align: middle !important; background: url(\"" + ImgNivelCombustibleFinal + "\")'>";
                            table += "<h4><span class='label label-primary'>" + monitor[i][header[j]] + "</span></h4></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 += "</tbody></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_abastecimiento_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">
        {%if idproyectos1!=79%}
            <div class="row">
                <div class="col-lg-12">
                    <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >

                </div>
            </div>
        {%endif%}
        <div class="row">
            <div class="col-lg-2 top-uno">
                <label>{{"monitores.pais" | trans}}</label>
                <select id="pais" class="form-control">
                    <option value="TODOS">{{"inbox.all" | trans}}</option>
                    {%for pais in paises%}
                        <option value="{{pais.eval_proyecto_id}}">{{pais.nombre}}</option>
                    {%endfor%}
                </select>
            </div>
            <div class="col-lg-2 top-uno">
                <label>{{"monitor.etiqueta.fechaI" | trans}}</label>
                <input type="text" class="form-control" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2 top-uno">
                <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>{{'monitor.etiqueta.region'| trans}}: </label>
                <select class="form-control" id="region">
                    <option value="TODOS">TODOS</option>
                </select>
            </div>
            <!--<div class="col-lg-2 top-uno">
                 <label>Región: </label>
                <select class="form-control" id="region">
                    <option value="TODOS">TODOS</option>
                </select>
            </div>
             <div class="col-lg-2 top-uno">
                <label>Tipo de Tanque: </label>
                <select id="tipoTanque" class="form-control">
                    <option value="TODOS">TODOS</option>
                    <option value="Rectangular">RECTANGULAR</option>
                    <option value="Cil_ndrico_Vertical">CILINDRICO VERTICAL</option>
                    <option value="Cil_ndrico_Horizontal">CILINDRICO HORIZONTAL</option>

                </select>
            </div>-->
            <!-- <div class="col-lg-2"  style="margin-top: 1%">
                <label>Unidad de Medida: </label>
                <select  id="tipoTanque">
                    <option value="TODOS">TODOS</option>
                    <option value="Litros">LITROS</option>
                    <option value="Galones">GALONES</option>
                </select>
            </div>
             <div class="col-lg-1 top-uno" id="parametros">
              <input class="form-control" type="text" placeholder="HORAS" id="horas_trabajadas">
            </div>-->
            <div class="col-lg-2 top-uno" id="parametros">
                <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 top-uno">
                <h1>{{"ABAST. COMBUSTIBLE" | trans}}</h1>
            </div>
        </div>
        <div class="row">
            <!--<div class="col-lg-3 top-uno">
                {#{"Cantidad" | trans}#}: <span id="cantidad" class="bold"></span>
            </div>-->
            <div class="col-lg-offset-9 top-uno">
                <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' | 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 class="pager">
                <span class="pagedisplay"></span>
            </div>
        </div>
        </br>

        <div class="row" style="overflow-x: scroll; transform: rotateX(180deg);">
            <div class="double-scroll top-uno" id="primer_reporte" style="transform: rotateX(180deg);"></div>

        </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"/>
                <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">{{'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 %}
{% block javascripts %}

    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}