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

{% block content %}
<article>
    <header class="object__header">
        <h1><img src="{% static 'images/box.png' %}" alt=""> Order #{{order.pk}}</h1>
        <div class="object__menu">
            <div class="dropdown">
                <span class="dropdown__menu">Options &darr;</span>
                <div class="dropdown__child">
                    <a href="{% url 'dashboard:order-cancel' order.pk %}">Cancel order</a>
                    <a href="">Return order</a>
                </div>
            </div>
            <span class="order__status order__status--{{order.status}}">{{order.get_status_display}} ({{order.total_quantity_fulfilled}} / {{order.total_quantity_ordered}})</span>
        </div>
    </header>
    <section class="object__list">
        <div class="object__item panel__header object__item--col5">
            <span>Product</span>
            <span>SKU</span>
            <span>Quantity</span>
            <span>Price</span>
            <span>Total</span>
        </div>
        {% for item in order.lines.all %}
            <div class="object__item object__item--col5">
            {% with product=item.product %}
                <figure class="item__figure">
                    <img class="product__image product__image--small" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                    <figcaption><strong>{{product.name}}</strong><br>Grind: {{item.customer_note}}</figcaption>
                </figure>
                <span>{{product.sku}}</span>
                <span>{{item.quantity}}</span>
                <span>${{product.price}}</span>
                <span>${{item.get_total}}</span>
            {% endwith %}
            </div>
        {% empty %}
            <p>No items in order yet.</p>
        {% endfor %}
        <div class="object__item object__item--col5">
            <a href="{% url 'dashboard:order-fulfill' order.pk %}" class="action-button order__fulfill">Fulfill &rarr;</a>
        </div>
    </section>

    <section class="object__panel">
        <div class="object__item panel__header object__item--col5">
            <h4>Shipping</h4>
            <a href="{% url 'dashboard:order-ship' order.pk %}" class="action-button order__fulfill">Ship order &rarr;</a>
        </div>
        {% for number in order.tracking_numbers.all %}
            <div class="panel__item">
                <p>
                    <strong>Shipment</strong><br>
                    Date: {{number.created_at|date:"SHORT_DATE_FORMAT" }}<br>
                    Tracking number: {{number.tracking_id}}
                </p>
            </div>
        {% empty %}
            <div class="panel__item">
                <p>No tracking information.</p>
            </div>
        {% endfor %}
    </section>

    <section class="object__panel">
        <div class="object__item panel__header">
            <h4>Customer</h4>
        </div>
        {% with customer=order.customer %}
            <div class="panel__item">
                <p>
                    <strong>{{customer.get_full_name}}</strong><br>
                    <a href="{% url 'dashboard:customer-detail' customer.pk %}">View Profile</a>
                </p>
            </div>
            <div class="panel__item">
                <strong>Email address</strong><br>
                {{customer.email}}
            </div>
            <div class="panel__item">
                <strong>Shipping address</strong><br>
                {% with shipping_address=order.shipping_address  %}
                    <address>
                        {{shipping_address.first_name}}
                        {{shipping_address.last_name}}<br>
                        {{shipping_address.street_address_1}}<br>
                        {% if shipping_address.street_address_2 %}
                            {{shipping_address.street_address_2}}<br>
                        {% endif %}
                        {{shipping_address.city}}, {{shipping_address.state}}, {{shipping_address.postal_code}}
                    </address>
                {% endwith %}
            </div>
        {% endwith %}
    </section>

    <section class="object__panel">
        <div class="object__item panel__header">
            <h4>Payment</h4>
        </div>
        <div class="panel__item">
            <p>
                <span>Subtotal: ${{order.total_net_amount}}</span><br>
                {% if order.coupon %}
                <span>Discount: {{order.coupon.discount_value}} {{order.coupon.get_discount_value_type_display}}</span><br>
                {% endif %}
                <span>Shipping: ${{order.shipping_total}}</span><br>
                <span>Total: ${{order.get_total_price_after_discount}}</span>
            </p>
        </div>
    </section>

    <section class="object__panel">
        <div class="object__item panel__header">
            <h4>Transaction</h4>
        </div>
        <div class="panel__item">
            <p>PayPal transaction ID: <strong>{{order.transaction.paypal_id}}</strong><br>
                Status: <strong>{{order.transaction.get_status_display}}</strong>
            </p>
        </div>
    </section>
</article>
{% endblock content %}
