{% 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;
        }
        .tablesorter-blue td.ABIERTO{

            color: #A5DC86;
            font-weight: bold;
        }
        .tablesorter-blue td.CERRADO{

            color: #BC1010;
            font-weight: bold;
        }


    </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'
            };
            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                sortList: [[0, 1]],
                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);
            // initial sort set using data-sortlist attribute (see HTML below)


        });
    </script>


    <div class="container" style="width:100%">
        <div class="btn-group pull-right" role="group" aria-label="...">
            <a href="#" onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Periodos',ignoreRow: [1]});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a>
            <button type="button" class="btn btn-default reset">Borrar Filtros</button>

        </div>
        <table class="tablesorter table1" data-toggle="table" id="tableSitios"

               >
            <thead>
                <tr>

                    <th>Estado</th>
                    <th>Tipo Periodo</th>
                    <th>Periodo</th>
                    <th>Descripcion</th>
                    <th>{{'monitor.etiqueta.fechaI' | trans}}</th>
                    <th>Fecha Media</th>
                    <th>{{'monitor.etiqueta.fechaF' | trans}}</th>

                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for entity in entities %}
                    <tr>

                        <td class="{{entity.estadoperiodoId}}">{{ entity.estadoperiodoId }}</td>
                        <td>{{ entity.tipoperiodoId }}</td>
                        <td>{{ entity.codigo }}</td>
                        <td>{{ entity.descripcion }}</td>
                        <td>{% if entity.fechainicio %}{{ entity.fechainicio|date("d/m/Y")  }}{% endif %}</td>
                        <td>{% if entity.fechamedia %}{{ entity.fechafinal|date("d/m/Y")  }}{% endif %}</td>               
                        <td>{% if entity.fechafinal %}{{ entity.fechafinal|date("d/m/Y")  }}{% endif %}</td>               

                        <td>
                            <button type="button" class="btn btn-default">
                                <a title="Edit" class="glyphicon glyphicon-pencil"  href="{{path('periodo_edit',{'id': entity.id, 'idproyectos':idproyectos, 'idmodule':idmodule})}}"></a>                           
                            </button>
                            <button type="button" class="btn btn-default">
                                <a title="Edit" class="glyphicon glyphicon-refresh"  href="{{path('periodo_changeEstado',{'id': entity.id,'idproyectos':idproyectos, 'idmodule':idmodule,'estado':entity.estadoIdPeriodo in [1,3]?2:3})}}">{{entity.estadoIdPeriodo in [1,3]?'Aperturar Periodo':'Cerrar Periodo'}}</a>                           
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </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 %}