{% extends "base.html" %}
{% load static %}

{% block content %}
<article>
    <p><a href="{% url 'storefront:customer-detail' customer.pk %}">&larr; Back</a></p>
    <header>
        <h1>Order No. {{order.pk}}</h1>
        <h3>Placed on {{order.created_at|date:"M j, Y"}}</h3>
    </header>
    {% if order.subscription %}
    <section>
        <h3>Subscription: {{ order.subscription_description }}</h3><br>
    </section>
    {% endif %}
    <section>
        <table>
            <thead>
                <tr>
                    <th colspan="2">Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
            {% for item in order.lines.all %}
                <tr>
                {% if item.variant %}
                    {% with product=item.variant.product %}
                        <td>
                            {% if item.variant.image %}
                            <img class="line__image" src="{{item.variant.image.image.url}}" alt="{{item.variant.image.image}}">
                            {% else %}
                            <img class="line__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                            {% endif %}
                        </td>
                        <td>
                            <strong>{{ item.variant }}</strong><br>
                            {{item.customer_note}}
                        </td>
                        <td>{{item.quantity}}</td>
                        <td>${{item.unit_price}}</td>
                        <td>${{item.get_total}}</td>
                    {% endwith %}
                {% elif item.product %}
                    {% with product=item.product %}
                        <td>
                            {% if item.variant.image %}
                            <img class="line__image" src="{{item.variant.image.image.url}}" alt="{{item.variant.image.image}}">
                            {% else %}
                            <img class="line__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                            {% endif %}
                        </td>
                        <td>
                            <strong>{{ item.product }}</strong><br>
                            {{item.customer_note}}
                        </td>
                        <td>{{item.quantity}}</td>
                        <td>${{item.unit_price}}</td>
                        <td>${{item.get_total}}</td>
                    {% endwith %}
                {% endif %}
                </tr>
            {% empty %}
                <tr>
                    <td colspan="5">No items in order</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>

    <section>
        <h4>Payment</h4>
        <table>
            <tr>
                <td>Subtotal</td>
                <td>${{order.subtotal_amount}}</td>
            </tr>
            {% if order.coupon %}
            <tr>
                <td>Discount</td>
                <td>{{order.coupon.discount_value}} {{order.coupon.get_discount_value_type_display}}</td>
            </tr>
            {% endif %}
            <tr>
                <td>Shipping</td>
                <td>${{order.shipping_total}}</td>
            </tr>
            <tr>
                <th>Total</th>
                <td><strong>${{order.total_amount}}</strong></td>
            </tr>
        </table>
    </section>
</article>
{% endblock content %}
