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

{% block head_title %}Order No. {{ order.pk }} | {% endblock %}

{% block content %}
<article>
    <p>
        <a href="{% url 'dashboard:order-list' %}">&larr; Back to orders</a>
    </p>
    <header class="object-header">
        <h1><img src="{% static 'images/box.png' %}"> Order No. {{order.pk}}</h1>
        {% if perms.core.cancel_order and order.status != 'canceled' %}
        <a class="btn btn-warning" href="{% url 'dashboard:order-cancel' order.pk %}">Cancel order</a>
        {% endif %}
    </header>
    <section class="panel">
        <header class="panel-header">
            <h4>Details</h4>
        </header>
        <dl class="panel-datalist">
            <dt>Date</dt>
            <dd>{{ order.created_at }}</dd>

            <dt>Customer</dt>
            <dd>
                <a href="{% url 'dashboard:customer-detail' order.customer.pk %}">{{order.customer.get_full_name}}</a>&emsp;
                <a href="mailto:{{order.customer.email}}">{{order.customer.email}} &nearr;</a>
            </dd>

            {% if order.subscription %}
            <dt>Subscription</dt>
            <dd>
                {{ order.subscription_description }}&emsp;<a href="https://dashboard.stripe.com/subscriptions/{{ order.subscription.stripe_id }}" target="_blank">View on Stripe &nearr;</a> 
            </dd>
            {% else %}
            <dt>PayPal Transaction</dt>
            <dd>
                {{order.transaction.get_status_display}}&emsp;<a href="https://www.paypal.com/activity/payment/{{ order.transaction.paypal_id }}" target="_blank">View on PayPal &nearr;</a>
            </dd>
            {% endif %}

            <dt>Status</dt>
            <dd>
                <span class="status status-{{order.status}}">{{order.get_status_display}} ({{order.total_quantity_fulfilled}} / {{order.total_quantity_ordered}})</span>
            </dd>
        </dl>
    </section>
    <section class="panel">
        <header class="panel-header">
            <h4>Items</h4>
            <a href="{% url 'dashboard:order-fulfill' order.pk %}" class="btn">Fulfill order &rarr;</a>
        </header>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
            {% for line in order.lines.all %}
                <tr>
                {% if line.variant %}
                    {% with product=line.variant.product %}
                    <td>
                        <figure class="product-figure">
                            {% if line.variant.image %}
                            <img class="product-image" src="{{line.variant.image.image.url}}" alt="{{line.variant.image.image}}">
                            {% else %}
                            <img class="product-image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                            {% endif %}
                            <figcaption><strong>{{line.variant}}</strong><br>{{line.customer_note}}</figcaption>
                        </figure>
                    </td>
                    <td>{{product.sku}}</td>
                    <td>{{line.quantity}}</td>
                    <td>${{line.unit_price}}</td>
                    <td>${{line.get_total}}</td>
                    {% endwith %}
                {% elif line.product %}
                    {% with product=line.product %}
                    <td>
                        <figure class="product-figure">
                            {% if line.variant.image %}
                            <img class="product-image" src="{{line.variant.image.image.url}}" alt="{{line.variant.image.image}}">
                            {% else %}
                            <img class="product-image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                            {% endif %}
                            <figcaption><strong>{{line.product}}</strong><br>{{line.customer_note}}</figcaption>
                        </figure>
                    </td>
                    <td>{{product.sku}}</td>
                    <td>{{line.quantity}}</td>
                    <td>${{line.unit_price}}</td>
                    <td>${{line.get_total}}</td>
                    {% endwith %}
                {% endif %}
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="4">Subtotal:</th>
                    <td>${{order.subtotal_amount}}</td>
                </tr>
                {% if order.coupon_amount > 0 %}
                <tr>
                    <th colspan="4">Discount:</th>
                    <td>${{ order.coupon_amount }}</td>
                </tr>
                {% endif %}
                <tr>                    
                    <th colspan="4">Shipping:</th>
                    <td>${{ order.shipping_total }}</td>
                </tr>
                <tr>
                    <th colspan="4">Total:</th>
                    <td>${{ order.total_amount }}</td>
                </tr>
            </tfoot>
        </table>
    </section>

    <section class="panel">
        <header class="panel-header">
            <h4>Shipping</h4>
            <a href="{% url 'dashboard:order-ship' order.pk %}" class="btn">Add tracking</a>
        </header>
        <div class="panel-section panel-shipping">
            <div>
                <strong>Shipping address</strong>
                {% include 'dashboard/partials/_address.html' with address=order.shipping_address %}
            </div>
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Tracking Number</th>
                    </tr>
                </thead>
                <tbody>
                    {% for number in order.tracking_numbers.all %}
                        <tr>
                            <td>{{number.created_at|date:"SHORT_DATE_FORMAT" }}</td>
                            <td>
                                <a href="https://tools.usps.com/go/TrackConfirmAction?qtc_tLabels1={{ number.tracking_id }}" target="_blank">{{number.tracking_id}} &nearr;</a>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="2">No tracking information.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</article>
{% endblock content %}