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

{% block body %}

    <!-- Modal -->
    <div class="modal fade" id="orderCancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sur to cancel this order?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary  modal-valid">Yes, Cancel order</button>
                </div>
            </div>
        </div>
    </div>


  <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>Customer order detail : TIO{{ order.id }}</h1>
      </header>

        <section class="order-actions">
            <a target="_blank" href="{{ path('OrderCancel', {idOrder: order.id}) }}" class="btn btn-primary cancelOrder" data-toggle="modal" data-target="#orderCancelModal">Cancel</a>
            <a target="_blank" href="{{ path('OrderPrint', {idOrder: order.id}) }}" class="btn btn-primary printOrder" >Print</a>
        </section>

        <section class="contact-detail">
            <h2>Contact</h2>
            <div class="row">
                <label class="col-sm-3">Name</label>
                <div class="col-sm-9">{{ order.customer.firstname }} {{ order.customer.lastname }}</div>
            </div>
            <div class="row">
                <label class="col-sm-3">Email</label>
                <div class="col-sm-9"><a href="mailto:{{ order.customer.email }}">{{ order.customer.email }}</a></div>
            </div>
            <div class="row">
                <label class="col-sm-3">Phone</label>
                <div class="col-sm-9"><a href="tel:{{ order.customer.phone }}">{{ order.customer.phone }}</a></div>
            </div>
            <div class="row">
                <label class="col-sm-3">State Support</label>
                <div class="col-sm-9">{% if order.customer.stateSupport == true %} YES {% else %} NO {% endif %}</div>
            </div>
            <div class="row">
                <label class="col-sm-3">Creation Date</label>
                <div class="col-sm-9">{{ order.customer.creationDate|date('d/m/Y H:i:s') }}</div>
            </div>
            <div class="row">
                <label class="col-sm-3">Comment</label>
                <div class="col-sm-9">{{ order.customer.comment }} {{ order.customer.comment }}</div>
            </div>
            <div class="row">
                <label class="col-sm-3"></label>
                <div class="col-sm-9"><a class="btn btn-primary" href="{{ path('CustomerDetail', {cust: order.customer.id}) }}" target="_blank">EDIT contact</a></div>
            </div>
        </section>

        <section class="contact-detail">
            <h2>Order Detail</h2>
            <div class="row">
                <label class="col-sm-3">Identitier</label>
                <div class="col-sm-9">{{ order.id }} </div>
            </div>
            <div class="row">
                <label class="col-sm-3">Status</label>
                <div class="col-sm-9">
                    {{ order.status }}
                    {% if order.status == 'Contacted' %}
                        <a href="#" data-orderid="{{ order.id }}" class="btn btn-primary orderBackCreated">Back to Created</a>
                        <div class="updateStatusResult"></div>
                    {% endif %}
                </div>
            </div>
            <div class="row">
                <label class="col-sm-3">Course Name</label>
                <div class="col-sm-9">{{ order.courseName }} </div>
            </div>
            <div class="row">
                <label class="col-sm-3">Total order</label>
                <div class="col-sm-9">{{ order.total }} </div>
            </div>
            <div class="row">
                <label class="col-sm-3">Contacted Date</label>
                <div class="col-sm-9">{% if order.contactedDate %}{{ order.contactedDate|date('d/m/Y H:i:s') }} {% else %} - {% endif %}</div>
            </div>
            <div class="row">
                <label class="col-sm-3">Creation Date</label>
                <div class="col-sm-9">{{ order.creationDate|date('d/m/Y H:i:s') }} </div>
            </div>

            <div class="row">
                <label class="col-sm-3">Comment</label>
                <div class="col-sm-9">
                    <textarea class="custOrderComment">{{ order.comment }}</textarea>
                </div>
            </div>
            <div class="row">
                <label class="col-sm-3"></label>
                <div class="col-sm-9">
                    <div class="updateResult"></div>
                    <a class="btn btn-primary custOrderUpdate" data-orderid="{{ order.id }}" href="#" >Save comment</a>
                </div>
            </div>
        </section>

        <section class="books-detail">
            <h2>Order books</h2>
            <table id="books-table" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Subject</th>
                    <th>Title</th>
                    <th>Editor</th>
                    <th>Price</th>
                    <th>Availability(reserved)</th>
                    <th>Action</th>
                    <th>Voucher</th>
                    <th>Sell<input type="checkbox" class="allOrderBooks" name="sell"></th>
                </tr>
                </thead>
                <tbody>
                {% if orderBooks and orderBooks|length > 0 %}
                    {% for orderBook in orderBooks %}
                        <tr id="book-{{ orderBook.book.id }}" data-orderbookid="{{ orderBook.id }}" class="{% if orderBook.state == constant('App\\Entity\\CustomerOrderBooks::STATE_DISABLED') %} disabledLine {% endif %} {% if orderBook.state == constant('App\\Entity\\CustomerOrderBooks::STATE_SOLD') %} soldLine {% endif %}" >
                            <td>{{ orderBook.book.subject }}</td>
                            <td>{{ orderBook.book.title }}</td>
                            <td>{{ orderBook.book.editor.name }}</td>
                            <td>{{ orderBook.book.price }} €</td>
                            <td>
                                {{ quantity[orderBook.id] }}({{ reservedQuantity[orderBook.id] }})<br>
                                {{ otherStoresName[orderBook.id].other_name_1 }}: {{ otherStoresQuantity[orderBook.id].other_quantity_1 }}<br>
                                {{ otherStoresName[orderBook.id].other_name_2 }}: {{ otherStoresQuantity[orderBook.id].other_quantity_2 }}
                            </td>
                            <td>{% if orderBook.state != constant('App\\Entity\\CustomerOrderBooks::STATE_SOLD') %}
                                    <a href="#" class="deleteLine" id="lineid-{{ orderBook.book.id }}"><i class="fa {% if orderBook.state == constant('App\\Entity\\CustomerOrderBooks::STATE_DISABLED') %}fa-cart-plus{% else %}fa-trash{% endif %}"></i></a>
                                {% endif %}
                            </td>
                            <td>
                                <input type="checkbox" {% if orderBook.voucher  %} checked {% endif %} name="voucher">
                            </td>
                            <td>
                                <input type="checkbox" {% if orderBook.state == constant('App\\Entity\\CustomerOrderBooks::STATE_SOLD') %} checked disabled {% endif %} {% if quantity[orderBook.id] < 1 %} disabled {% endif %} name="sell">
                            </td>
                        </tr>
                    {% endfor %}
                {% endif %}
                </tbody>
            </table>
            <div class="updateResult-wrapper">
                <div class="updateResultBooks"></div>
                <a class="btn btn-primary custOrderBooksUpdate" data-orderid="{{ order.id }}" href="#" >Save books</a>
                <div class="clear"></div>
            </div>
        </section>


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

{% block javascripts %}
  <script>
    var TWIG_ORDER = {};
    TWIG_ORDER.pathAjaxupdateCustOrderComment = "{{ path('AjaxupdateCustOrderComment') }}";
    TWIG_ORDER.pathAjaxOrderBooksUpdate = "{{ path('AjaxCustOrderBooksUpdate') }}";
    TWIG_ORDER.pathAjaxOrderCancel = "{{ path('OrderCancel', {idOrder: order.id}) }}";
    TWIG_ORDER.pathAjaxOrderStatusUpdate = "{{ path('OrderStatusUpdate', {idOrder: order.id}) }}";
  </script>
    <script src="{{ asset('js/orderDetail.js') }}"></script>
  {{ parent() }}
{% endblock %}

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