{% extends "base.html.twig"%}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}
{% block titulo %} - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-12 col-xs-12" >
        {% if (idproyectos< 1000) %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
            </div>
        {% else %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModuleMx",{'idproyectos':idproyectosp,'idmodule':idmodule, 'idproyecto':idproyectos})) }}
            </div>
        {% endif %}
    </div>
{%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 idproyectos == 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;
}

</style>
<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.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;
    $(document).ready(function() {
          if ( ! $.fn.DataTable.isDataTable( '#example' ) ) {
              createTableDt();
              buildDatatable();
          }else{
              table.ajax.reload();
          }
          $('#modalCurrencyConverter').modal('show');
        //$('.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',
        });

        $('#txtFechaIni').datepicker({
            dateFormat: 'yy-mm-dd',
            container: '#modalEditCurrencyConverter',
            onClose: function( selectedDate ) {
                $( "#txtFechaFin" ).datepicker( "option", "minDate", selectedDate );
            }
        });

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

        $('#txtFechaIni').on('focus', function(){
            $("#ui-datepicker-div").css("z-index", "1600");
        });
        $('#txtFechaFin').on('focus', function(){
            $("#ui-datepicker-div").css("z-index", "1600");
        });
        $('#txtFechaFin').on('click', function(){
            $("#ui-datepicker-div").css("z-index", "1600");
        });

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

        /*$("#btnCurrencyConverter").click(function(){
            if ( ! $.fn.DataTable.isDataTable( '#example' ) ) {
                createTableDt();
                buildDatatable();
            }else{
                table.ajax.reload();
            }
            $('#modalCurrencyConverter').modal('show');
        });*/

        $("#btnSaveContinue").click(function(){
            saveDataConversion('SAVECONTINUE');
        });
        $("#btnSaveExit").click(function(){
            saveDataConversion('SAVEEXIT');
        });


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

        $('#tbody tr .edit').live('click',function(){
            var id = $(this).data('id');
            var pais = $(this).data('pais');
            var moneda_local = $(this).data('moneda_local');
            var tasa = $(this).data('tasa_usd');
            var fechaIni  = $(this).data('fecha_inicio');
            var fechaFin  = $(this).data('fecha_fin');

            resetConversionForm('edit');
            $('#titleModalEditCurrency').html('{{'Edit' | trans}}');
            $('#cmbPais').prop("disabled", true);
            $('#txtMonedaLocal').prop("disabled", true);
            $('#txtId').val(id);
            $('#cmbPais').val(pais);
            $('#txtMonedaLocal').val(moneda_local);
            $('#txtTasa').val(tasa);
            $('#txtFechaIni').val(fechaIni);
            $('#txtFechaFin').val(fechaFin);
            $('#modalEditCurrencyConverter').modal('show');
        });

        $('#tbody tr .delete').live('click',function(){
            var idConversion = $(this).data('id');
            if (confirm("¿Desea eliminar el registro?")){
                var postUrl = '{{path('reportemshonduras_saveDataConversion2')}}';
                var postData = {
                    op: 'delete',
                    id: idConversion
                };
                $.ajax({
                    type: 'POST',
                    url: postUrl,
                    data: postData,
                    dataType: 'json',
                    global: false,
                    success: function (response) {
                        switch (response.estatus){
                            case 'Ok':
                                    alert('Registro Eliminado!');
                                break;
                            case 'Error':
                                alert(response.mensaje);
                                break;
                        }
                        table.ajax.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {

                    }
                });
            }
        });

        {%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 resetConversionForm(op){
        var $dialog = $('#modalEditCurrencyConverter');
        $dialog.find('.has-error').removeClass('has-error');
        $dialog.find('.modal-message').addClass('hidden');
        $('#txtMonedaLocal').val('');
        $('#txtTasa').val('');
        //$('#txtFechaIni').val('');
        $('#txtFechaFin').val('');
        $('#cmbPais').prop("disabled", false);
        $('#txtMonedaLocal').prop("disabled", false);
        $('#cmbPais').change();
        if (op=='new'){
            $('#btnSaveExit').show();
            $('#btnSaveExit').prop("value", "Grabar");
            $('#btnSaveContinue').show();
        }else{
            $('#btnSaveExit').prop("value", "Grabar y Salir");
            $('#btnSaveExit').show();
            $('#btnSaveContinue').hide();
        }
    }

    function _validateConversionForm() {
        var $dialog = $('#modalEditCurrencyConverter');
        // Reset previous validation css formatting.
        $dialog.find('.has-error').removeClass('has-error');
        $dialog.find('.modal-message').addClass('hidden');

        try {
            // Check required fields.
            var missingRequiredField = false;

            $dialog.find('.required').each(function () {
                if ($(this).val() == '' || $(this).val() == null) {
                    $(this).closest('.form-group').addClass('has-error');
                    missingRequiredField = true;
                }
            });

            if (missingRequiredField) {
                throw 'Complete los campos requeridos.';
            }

            return true;
        } catch (exc) {
            $dialog.find('.modal-message').addClass('alert-danger').text(exc).removeClass('hidden');
            return false;
        }
    }

    function saveDataConversion(origen){
        var $dialog = $('#modalEditCurrencyConverter');
        var id = parseInt($('#txtId').val());
        var pais = $('#cmbPais').val();
        var moneda = $('#txtMonedaLocal').val();
        var tasa = $('#txtTasa').val();
        var fechaIni = $('#txtFechaIni').val();
        var fechaFin = $('#txtFechaFin').val();
        var op = (id>0) ? 'edit' : 'new';
        var postUrl = '{{path('reportemshonduras_saveDataConversion2')}}';
        var postData = {
            op: op, id: id, pais: pais, moneda: moneda, tasa: tasa, fechaIni: fechaIni, fechaFin: fechaFin
        };
        if (_validateConversionForm()){
            $.ajax({
                type: 'POST',
                url: postUrl,
                data: postData,
                dataType: 'json',
                global: false,
                success: function (response) {
                    switch (response.estatus){
                        case 'Ok':
                            resetConversionForm(op);
                            $dialog.find('.modal-message').
                                    addClass('alert-success').
                                    text('Registro guardado.').removeClass('hidden');
                            table.ajax.reload();
                            if (origen =='SAVEEXIT'){
                                $dialog.modal('hide');
                            }
                            break;
                        case 'Error':
                            $dialog.find('.modal-message').
                                    addClass('alert-danger').
                                    text(response.mensaje).removeClass('hidden');
                            break;
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $dialog.find('.modal-message').
                            addClass('alert-danger').
                            text(textStatus).removeClass('hidden');
                }
            });
        }

    }


    function clickNewConversion(){
        resetConversionForm('new');
        $('#txtId').val(0);
        $('#txtMonedaLocal').val('');
        $('#txtTasa').val('');
        //$('#txtFechaIni').val('');
        $('#txtFechaFin').val('');
        $('#cmbPais').prop("disabled", false);
        $('#txtMonedaLocal').prop("disabled", false);
        $('#cmbPais').change();
        $('#titleModalEditCurrency').html('{{'Add Currency Conversion' | trans}}');
        $('#modalEditCurrencyConverter').modal('show');
    }

    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_reporteAbastecimiento')}}',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'>";
        for (var i = 0; i < monitor.length; i++) {
            //console.log('FILA ' + i);
            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'
                )
                    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>";
                    }
                }
            }
            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");

            });
    };

    function createTableDt(){
        var strHeader = '';
        var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
        strHeader = '<th>Id</th><th>País</th><th>Moneda Local</th><th>Dolar</th><th>Fecha Inicio</th>' +
                '<th>Fecha Final</th><th>Id User</th><th>Usuario</th><th>Acciones</th>';
        strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody></table>';
        $('#datatable').empty();
        $('#datatable').html(strTable);
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                            .column(i)
                            .search( this.value )
                            .draw();
                }
            } );
        } );
    }

    function buildDatatable(){
        var idproyecto =  ""+{{idproyectos}};
        var columnas = [ { "data": "id", visible:false },
            { "data": "pais" }, { "data": "moneda_local" }, { "data": "tasa_usd" }, { "data": "fecha_inicio" },
            { "data": "fecha_fin" }, { "data": "iduser", visible:false }, { "data": "username" },
            { "data": null}
        ];
        table = $('#example').DataTable( {
            dom: '<"row" <"col-sm-12 text-right"B>> <"row" <"col-sm-6 "l> <"col-sm-6"f>>rtip',
            scrollY: '42vh',
            scrollX: true,
            scrollCollapse: false,
            scroller: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('reportemshonduras_getDataCurrencyConversion2')}}",
                "type": "POST",
                data:  function( d ) {
                    d.tipoReporte= $("#tipoReporte").val(),
                    d.proyecto   = $("#cmbProyecto").val(),
                    d.idproyecto = idproyecto
                }
            },
            columns: columnas,
            columnDefs: [ {
                "targets": -1,
                "data": null,
                "searchable": false,
                "orderable": false,
                "className": 'dt-body-center',
                "render": function ( data, type, row ) {
                    //return htmlSql;
                    return '<div class="btn-group btn-group-sm"> ' +
                        '<a data-id="' + row['id'] + '" ' +
                        'data-pais="' + row['pais'] +  '" ' +
                        'data-moneda_local="' + row['moneda_local'] +  '" ' +
                        'data-tasa_usd="' + row['tasa_usd'] +  '" ' +
                        'data-fecha_inicio="' + row['fecha_inicio'] +  '" ' +
                        'data-fecha_fin="' + row['fecha_fin'] +  '" ' +
                        ' href="javascript:void(0);" class="btn btn-info edit" data-toggle="tooltip" ' +
                        'data-title="Editar" title="Editar" data-container="body">'+
                        '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +

                        '<a data-id="' + row['id'] + '" data-pais="' + row['pais'] +  '" ' +
                        'data-moneda_local="' + row['moneda_local'] + '" href="javascript:void(0);" class="btn btn-danger delete" data-toggle="tooltip" ' +
                        'data-title="Eliminar" title="Eliminar" data-container="body">'+
                        '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>' +

                    '</div>';
                }
            } ],
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
                {
                    text: '<strong><span class="glyphicon glyphicon-plus"></span> Agregar Conversión</strong>',
                    action: function ( e, dt, node, config ) {
                        clickNewConversion();
                    },
                    className: 'bg-claro'
                },
                {
                    extend:'excel',
                    text: '<strong> Excel</strong>',
                    title: '{{"Conversor de Divisas" | trans}}',
                    className: 'bg-claro'
                },
            ]
        } );
    }

</script>

<div class="container-fluid">
    {%if idproyectos!=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-6 top-uno">
            <div class="col-lg-12  pull-center">
                {% if (is_granted('ROLE_ADMIN_CLIENTE') ) %}
                <button id="btnCurrencyConverter" class="btn btn-danger btn-sm"><i class="fa fa-upload"></i> {{'Conversor de Divisas' | trans}}</button>
                {% endif %}
                 <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>

<div id="modalCurrencyConverter" class="modal fade modal-currency-converter" tabindex="-1" role="dialog" aria-labelledby="uploadConversionDataLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-claro">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="uploadConversionDataLabel"><b><i class="fa fa-upload"></i> {{'Conversor de Divisas' | trans}}</b></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div id="datatable" class="col-sm-12" style="overflow-x: scroll">
                        <table id="example" class="display nowrap" width="100%">
                            <thead>
                            <tr>
                                <th>País</th>
                                <th>Moneda Local</th>
                                <th>Tasa USD</th>
                                <th>Vigencia Desde</th>
                                <th>Vigencia Hasta</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="modalEditCurrencyConverter" class="modal fade modal-edit-currency-converter" tabindex="-1" role="dialog" aria-labelledby="editConversionDataLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-claro">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editConversionDataLabel">
                    <b><i class="fa fa-upload"></i>&nbsp;&nbsp;<span id="titleModalEditCurrency">{{'Edit' | trans}}</span></b>
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="modal-message alert hidden"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <input id="txtId" type="hidden">
                            <label for="cmbPais" class="control-label">País *</label>
                            <select id="cmbPais" class="required form-control">
                              {% if (idproyectos == 37) %}
                                <option data-moneda="CRC - Colón" value="Costa Rica">Costa Rica</option>
                              {% elseif  idproyectos == 36 %}
                                <option data-moneda="USD - Dólar Estadounidense" value="El Salvador">El Salvador</option>
                              {% elseif  idproyectos == 35 %}
                                <option data-moneda="GTQ - Quetzal" value="Guatemala">Guatemala</option>
                              {% elseif  idproyectos == 30 %}
                                <option data-moneda="HNL - Lempira" value="Honduras">Honduras</option>
                              {% elseif  idproyectos == 32 %}
                                <option data-moneda="NIO - Córdoba" value="Nicaragua">Nicaragua</option>
                              {% elseif  idproyectos == 37 %}
                                <option data-moneda="PAB - Balboa" value="Panamá">Panamá</option>
                              {% endif %}
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label for="txtMonedaLocal" class="control-label">Moneda Local *</label>
                            <input type="text" id="txtMonedaLocal" class="required form-control" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="form-group">
                            <label for="txtTasa" class="control-label">Dolar *</label>
                            <div class="input-group">
                                <span class="input-group-addon">USD</span>
                                <input type="number" id="txtTasa" class="required form-control" maxlength="10">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Fecha Inicial *</label>
                            <input type="text" id="txtFechaIni" maxlength="10" class="form-control required" value="{{ dateStart }}">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Fecha Final</label>
                            <input type="text" id="txtFechaFin" maxlength="10" autocomplete="off"
                                   class="form-control" value="{{ dateEnd }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btnSaveContinue" type="button" class="btn btn-default">Guardar y Continuar</button>
                <button id="btnSaveExit" type="button" class="btn btn-primary">Guardar y Salir</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% 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 %}