{% extends 'store/layout/layout.html' %}
{% load static %}


{% block title %}Order #{{order.id}}{% endblock %}
{% block style %}{% endblock %}


{% block body %}
<div class="container text-center mb-3">
    <h5>Order Details</h5><hr>
    {% if messages %}
        <ul class="messages list-unstyled text-center">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }} text-success"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}
    <div>{% include 'store/includes/orders.html' with order=order %}</div><hr>
    <div id="order_items" class="text-start">
        {% for item in order.orderitems.all %}
        <div class="row">
            <div class="col-9 fs-5 text-start">{{item.product.product.title|lower|title}}</div>
            <div class="col-3 text-end"><span class="badge bg-dark text-white">{% if item.discount_percent %}{{item.discount_percent}}% off{% endif %}</span></div>
            <div class="col-md-5">
                {% if item.product.keyvalues.all %}
                <div class="table-responsive">
                    <table class="table table-sm table-borderless text-center align-middle m-0 p-0">
                        <tbody>
                            {% for kv in item.product.keyvalues.all %}
                            <tr>
                                <td class="p-0 m-0" style="width: 35%;">{{kv.key}}</td>
                                <td class="p-0 m-0" style="width: 65%;">{{kv.value}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
            </div>
            <div class="col-md-7">
                <div class="table-responsive">
                    <table class="table table-sm table-borderless text-center align-middle">
                        <thead>
                            <tr>
                                <th>Price ({{currency}}/{{item.product.unit}})</th>
                                <th>Qty ({{item.product.unit}})</th>
                                <th>Amt. ({{currency}})</th>
                                <th>Payable ({{currency}})</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{item.product.price}}</td>
                                <td>{{item.quantity}}</td>
                                <td>{{item.amount}}</td>
                                <td>{{item.amount_payable}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <hr>
        {% endfor %}
        {% if order.order_status == 'O' %}
            <a class="link-danger-dark text-start toDisableAnchorTag" href="" onclick="cancelOrder(event, '{{order.id}}');">
                Cancel Order
                <div class="spinner-grow spinner-grow-sm" role="status" hidden id="cancelOrderSpinner"></div>
            </a>
        {% endif %}
    </div>
</div>
{% endblock %}


{% block script %}
<script src="{% static 'store/js/orders.js' %}"></script>
{% endblock %}