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

{% block title %}Orders{% endblock %}
{% block style %}{% endblock %}

{% block body %}
{% localtime on %}
<div class="container mb-2">
    <h4 class="text-center pb-0 mb-0">Order ID - {{order.id}}</h4><hr class="pt-0 mt-0">
    {% include 'store/includes/orders.html' with order=order %}<hr>
    <div class="table-responsive">
        <table class="table text-center">
            <thead>
                <tr>
                    <th>Product(s)</th>
                    <th>Qty</th>
                    <th>Amount ({{currency}})</th>
                </tr>
            </thead>
            <tbody>
                {% for item in order.items %}
                <tr>
                    <td style="width: 70%">
                        <div class="text-start">
                            <a class="link-danger-dark" href="{% url 'store:variation' product_slug=item.product.product_slug variation_id=item.product.variation_id %}">
                                {{item.product.product_title}}
                            </a>
                        </div>
                        <div class="text-start">{{currency}} {{item.product.price|floatformat:2}} / {{item.product.unit}}</div>
                        {% if item.product.keyvalues %}
                        <table class="table table-sm mb-0 table-borderless text-start">
                            <tbody>
                                {% for kv in item.product.keyvalues %}
                                <tr>
                                    <td class="my-0 py-0 text-start" style="width: 40%;">{{kv.key}}</td>
                                    <td class="my-0 py-0 text-start" style="width: 60%;">{{kv.value}}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% endif %}
                    </td>
                    <td style="width: 10%">{{item.qty}}</td>
                    <td style="width: 20%">{{item.amount|floatformat:"0"}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <table class="table text-center">
            <tbody>
                <tr>
                    <td style="width: 80%">Total ({{currency}})</td>
                    <td style="width: 20%">{{order.amount|floatformat:"0"}}</td>
                </tr>
                <tr>
                    <td style="width: 80%">Discount</td>
                    <td style="width: 20%">{% if order.discount %}{{order.discount}}%{% else %}-{% endif %}</td>
                </tr>
                <tr>
                    <td style="width: 80%">Amount Payable ({{currency}})</td>
                    <td style="width: 20%">{{order.amount_payable|floatformat:"0"}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    {% if order.status == 'O' %}
    <button class="btn btn-sm btn-outline-dark" type="button" role="button" onclick="displayOrderCancellationModal('{{order.id}}');">Cancel Order</button>
    {% elif order.status == 'P' %}
    <a role="button" type="button" class="btn btn-sm btn-outline-dark" href="{% url 'store:reopenOrder' order_id=order.id %}">Reopen Order</a>
    {% endif %}
</div>
{% endlocaltime %}
{% include 'store/modals/order.html' %}
{% endblock %}

{% block script %}
<script src="{% static 'store/js/order.js' %}"></script>
{% include 'store/handlebars/order.html' %}
{% endblock %}