{% extends '::base.html.twig' %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">
            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
        </div>
    </div>

     <div class="col-lg-12 col-xs-12" >


    </div>

{%endblock %}             

{% block dashboard %}
    <style>
        /* pager wrapper, div */ 
        .pager { 
            padding: 5px; 
        } 
        /* 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: 11px; 
            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;
        }
    </style>

    <script>

        $(function () {
            var pagerOptions = {
                // target the pager markup - see the HTML block below
                container: $(".pager"),
                // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                // table row set to a height to compensate; default is false
                fixedHeight: false,
                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: true,
                // go to page selector - select dropdown that sets the current page
                cssGoto: '.gotoPage',
                ajaxUrl : "{{ path('recibopago_getdata') }}" + "?page={page}&size={size}&{sortList:col}&{filterList:filter}",
                ajaxProcessing: function(data){

                    // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object

                    $("#cargar").hide();
                    return [ data.total_rows, data.rows, data.headers ];

                },
                // Set this option to false if your table data is preloaded into the table, but you are still using ajax
                processAjaxOnInit: true
            };
            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                headers: {  },
                sortList: [[0, 1]],
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    filter_selectSource: {
                        2: [ '1|BT2','2|BT3','3|MT3','4|BT4','5|BT5B','6|BT6','7|MT2','8|MT4','9|BT5A','10|RESIDENCIAL','11|COMERCIAL' ],

                        8: ["1|LIM",
                            "13|ICA",
                            "20|HCY",
                            "61|ARE",
                            "62|TAC",
                            "81|CHI",
                            "82|CHY",
                            "83|CUS",
                            "84|IQUI",
                            "85|PIU",
                            "86|TRU"]
                    },
                    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 : false,

                    // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
                    // every character while typing and should make searching large tables faster.
                    filter_searchDelay : 600,

                    // Set this option to true to use the filter to find text from the start of the column
                    // So typing in "a" will find "albert" but not "frank", both have a's; default is false
                    filter_startsWith  : false,

                    // if false, 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,
                    filter_functions : {

                        // Add select menu to this column
                        // set the column value to true, and/or add "filter-select" class name to header

                        2 :true,

                        8:true


                    }

                }
            }).tablesorterPager(pagerOptions);
            // initial sort set using data-sortlist attribute (see HTML below)

            $(".table1").bind('filterStart sortStart pageMoved', function() {
                $("#cargar").show();
            })

        });



    </script>
    <div class="container" id="tableSitios" style="width: 100%">

        <table class="tablesorter table1" data-toggle="table" id="tableSitios"
               data-export-types="['excel']"
               data-show-export="true"
               style="width:100%">
            <thead>
                <tr>
                    <th>Suministro</th>
                    <th>Nombre Local</th>
                    <th>Tarifa</th>
                    <th>Periodo Consumo</th>
                    <th>Periodo Reporte</th>
                    <th>Numero ERC-SAP</th>
                    <th>Número Documento</th>
                    <th>Número Recibo</th>
                    <th>Zonal</th>
                    <th>Cliente</th>
                    <th>Base Imponible</th>
                    <th>Igv</th>
                    <th>Total Pagado</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <div id="pager" class="pager"> 
            <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="25">25</option> 
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </form>
        </div>


    </div>
{% endblock %}