{% 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;
    }
    .tablesorter-header-inner{
        height: 30px;
    }

    .create{
        padding: 0;
    }
</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: [],
            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)

        $(".parent,.child").live('click',function(){

            var href = $(this).attr('href');
            var modal = $(this).hasClass('parent') ? 'parent':'child';
            console.log(modal);
            $.ajax({
                url : href,
                type: 'GET'
            }).done(function(data){


                $("#" + modal + " .modal-body").empty().append(data);

                $(".numeric").numeric();
                if(modal == 'parent') $(".js-example-basic-single").select2();
                $("#"+ modal).modal();
            });

            return false;

        });

    });
    </script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <img id="logo" src="{{ asset('images/ericsson.png')  }}"  width="1500" height="50" >

            </div>

        </div>
        <div class="col-lg-1 pull-right create">
            <a class="btn btn-default parent pull-right"title="Create New Entry" href="{{ path('proyectoasprepuesto_new',{'idproyectos':idproyectos,'idmodule': idmodule}) }}"  aria-label="Left Align">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </a>
        </div>

        <table class="tablesorter table1" data-toggle="table" id="tableSitios">
            <thead>
            <tr>
                <th>Id</th>
                <th>Asp</th>
                <th>Item</th>
                <th>{{'monitor.etiqueta.region' | trans}}</th>
                <th>Costo</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for entity in entities %}
                <tr>
                    <td><a href="{{ path('proyectoasprepuesto_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>

                    <td>{{ entity.asp }}</td>
                    <td>{{ entity.repuesto }}</td>
                    <td>{{ entity.region }}</td>
                    <td>${{ entity.costo  |number_format(2, '.', ',')}}</td>
                    <td>
                        <ul>
                            <li>
                                <a class="parent" href="{{ path('proyectoasprepuesto_edit', { 'id': entity.id,'idproyectos':idproyectos,'idmodule': idmodule }) }}">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>






    <div class="modal fade" id="parent" 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 %}