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

</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() {
            $('.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_saveDataConversion')}}';
                    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_saveDataConversion')}}';
            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_reporteAbastecimientoASP')}}',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>Tasa USD</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 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_getDataCurrencyConversion')}}",
                    "type": "POST",
                    data:  function( d ) {
                        d.tipoReporte= $("#tipoReporte").val(),
                        d.proyecto   = $("#cmbProyecto").val()
                    }
                },
                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 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">
                    {% if (is_granted('ROLE_ADMIN_CLIENTE') ) %}
                    <button id="btnCurrencyConverter" class="btn btn-default 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">
                                    <option data-moneda="CRC - Colón" value="Costa Rica">Costa Rica</option>
                                    <option data-moneda="USD - Dólar Estadounidense" value="El Salvador">El Salvador</option>
                                    <option data-moneda="GTQ - Quetzal" value="Guatemala">Guatemala</option>
                                    <option data-moneda="HNL - Lempira" value="Honduras">Honduras</option>
                                    <option data-moneda="NIO - Córdoba" value="Nicaragua">Nicaragua</option>
                                    <option data-moneda="PAB - Balboa" value="Panamá">Panamá</option>
                                </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">Tasa USD *</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 %}