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

{%endblock %}


{% block dashboard -%}

    <style>
        #menuTop {
            margin-top: 20px;
        }
        /* 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>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <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: [],
                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)


            $("a").live('click',function(){

                var href = $(this).attr('href');

                $.ajax({
                    url : href,
                    type: 'GET'
                }).done(function(data){

                    $("#modal .modal-body").empty().append(data);
                    $(".js-example-basic-single").select2();
                    $(".numeric").numeric();
                    $("#modal").modal();
                })

                return false;

            });

            $('.ajaxForm').live('submit',function() {
                // inside event callbacks 'this' is the DOM element so we first
                // wrap it in a jQuery object and then invoke ajaxSubmit
                $(this).ajaxSubmit();

                // !!! Important !!!
                // always return false to prevent standard browser submit and page navigation
                return false;
            });
        });




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


        <table class="tablesorter table1" data-toggle="table" id="tableSitios">
            <thead>
            <tr>
                <th>ID</th>
                <th>ITEM</th>
                <th>CATEGORY</th>
                <th>COST</th>
                <th>PRICE</th>
                <th>ACTIONS</th>
            </tr>
            </thead>
            <tbody>
            {% for entity in entities %}
                <tr>
                    <td><a href="{{ path('proyectorepuesto_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
                    <td>{{ entity.ITEM }}</td>
                    <td>{{ entity.CATEGORY }}</td>
                    <td>{{ entity.costo }}</td>
                    <td>{{ entity.precio }}</td>
                    <td>
                        <ul>
                            <li>
                                <a href="{{ path('proyectorepuesto_show', { 'id': entity.id }) }}">show</a>
                            </li>
                            <li>
                                <a href="{{ path('proyectorepuesto_edit', { 'id': entity.id }) }}">edit</a>
                            </li>
                        </ul>
                    </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  value="25">25</option>
                    <option selected="selected" value="50">50</option>
                    <option value="100">100</option>
                </select>
            </form>
        </div>

    </div>



        <ul>
        <li>
            <a href="{{ path('proyectorepuesto_new',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">
                Create a new entry
            </a>
        </li>
    </ul>


    <div class="modal fade" id="modal" 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">Windows Modal</h2>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}