{% extends 'base.html.twig' %}

{% block body %}


    <div class="container ">
        <div class="main-container">
            {# user notice #}
            {% set flashbagValidMessage = app.session.flashbag.get('user-notice') %}
            {% if flashbagValidMessage is not empty %}
                <div class="errorContainer">
                    {% for flashMessage in flashbagValidMessage %}
                        <div class="user-message user-notice">{{ flashMessage }}</div>
                    {% endfor %}
                </div>
            {% endif %}

            {# warning #}
            {% for flashMessage in app.session.flashbag.get('warning') %}
                <div class="user-message user-warning">{{ flashMessage }}</div>
            {% endfor %}

            {# error #}
            {% set flashbagError = app.session.flashbag.get('error') %}
            {% if flashbagError is not empty %}
                <div class="errorContainer">
                    <h3 class="title-error">{% trans %}The following errors have been found:{% endtrans %}</h3>
                    {% for flashMessage in flashbagError %}
                        <div class="user-message user-error">{{ flashMessage }}</div>
                    {% endfor %}
                </div>
            {% endif %}

            <header>
                <h1>Books</h1>
                <h2>Total books in stock: {{ nbTotalInStock }}<br>
                Total € in stock: {{ totalPriceInStock }}</h2>
            </header>

            <section class="editorGroupOrder">
                <h2>Create group order</h2>
                <table id="editorGroupOrderTable" class="table table-bordered linoTable table-striped">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Ref</th>
                        <th>year</th>
                        <th>Subject</th>
                        <th>Title</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>editor</th>
                        <th>editorGroup</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="formcontact-error"></div>
                <a href="#" class="btn btn-primary createGroupOrder">Create Order</a>
                <div class="clear"></div>
            </section>

            <section class="booklist">
                <h2>Books list</h2>
                <table id="booksTable"
                       class="linoTable table-striped"
                       data-toggle="table"
                       data-url="{{ path('AjaxBooks') }}"
                       data-pagination="true"
                       data-show-refresh="true"
                       data-query-params="bookQueryParams"
{#                       data-show-export="true"#}
                       data-show-pagination-switch="true"
                       data-side-pagination="server"
                       data-page-list="[20, 50, 100, 200]"
                       data-sort-name="customerOrders"
                       data-sort-order="desc"
                       data-search="true"
                       data-show-columns="true">
                    <thead>
                    <tr>
                        <th data-field="id" data-sortable="true">Id</th>
                        <th data-field="reference" data-visible="false" data-align="left" >Ref</th>
                        <th data-field="year" data-align="left" data-sortable="true" >year</th>
                        <th data-field="subject" data-align="left" data-sortable="true">Subject</th>
                        <th data-field="title" data-sortable="true">Title</th>
                        <th data-field="quantity" data-formatter="quantityFormatter" >Quantity</th>
{#                        <th data-field="reservedQuantity" data-sortable="false">reserved</th>#}
                        <th data-field="price" data-sortable="true">Price</th>
                        <th data-field="customerOrders" data-sortable="true">Orders</th>
                        <th data-field="editorGroupOrders" data-sortable="true">Books <br>awaiting</th>
                        <th data-field="editor" data-sortable="true">Editor</th>
                        <th data-field="editorGroup" data-sortable="false">Group</th>
                        <th data-field="" data-formatter="orderFormatter">Order</th>
                    </tr>
                    </thead>
                </table>
            </section>

            <section class="groupOrderBooks">

            </section>

        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" media="all" href="{{ asset('bootstraptable/bootstrap-table.min.css') }}" />
    {#<link rel="stylesheet" type="text/css" media="all" href="{{ asset('bootstrap3-editable/css/bootstrap-editable.css') }}" />#}
{% endblock %}

{% block javascripts %}
    <script>

    </script>

    <script>
      var TWIG_BOOK = {};
      TWIG_BOOK.pathAjaxupdateBook = "{{ path('AjaxUpdateBook') }}";
      TWIG_BOOK.pathAjaxGroupOrderCreate = "{{ path('AjaxEditorGroupOrderCreate') }}";
    </script>
    {{ parent() }}
    <script src="{{ asset('bootstraptable/bootstrap-table.min.js') }}"></script>
    <script src="{{ asset('js/books.js') }}"></script>
{#    <script src="{{ asset('bootstraptable/extensions/editable/bootstrap-table-editable.min.js') }}"></script>#}
{#    <script src="{{ asset('bootstrap3-editable/js/x-editable-bs4.js') }}"></script>#}
    {#<script src="{{ asset('bootstrap3-editable/js/bootstrap-editable.js') }}"></script>#}

{% endblock %}

{% block title %}{% trans %}TioApp order detail{% endtrans %}{% endblock %}