{% extends "dashboard/base.html" %}
{% load humanize %}
{% block page_title %}Order #{{ order.order_number }}{% endblock %}

{% block dashboard_content %}
<div class="grid grid--2 mb-6">
    <div class="card">
        <h3 class="card__title mb-4">Buyer & Delivery Details</h3>
        <p style="font-weight:700;font-size:var(--font-size-base);">{{ order.buyer_name }}</p>
        <p class="text-sm text-secondary mt-1">{{ order.buyer_phone }}</p>
        <p class="text-sm text-secondary">{{ order.buyer_email }}</p>

        <hr style="border:none;border-top:1px solid var(--color-border-light);margin:var(--space-4) 0;">

        {% if order.delivery_option %}
        <div class="mb-3">
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold mb-1">Delivery Option</span>
            <p class="text-sm font-semibold">{{ order.delivery_option.name }} (GHS {{ order.delivery_fee|floatformat:2 }})</p>
            {% if order.delivery_option.description %}<p class="text-xs text-muted mt-1">{{ order.delivery_option.description }}</p>{% endif %}
        </div>
        {% endif %}

        {% if order.delivery_address %}
        <div>
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold mb-1">Delivery Address / Landmark</span>
            <p class="text-sm text-secondary" style="white-space:pre-line;">{{ order.delivery_address }}</p>
        </div>
        {% endif %}
    </div>

    <div class="card">
        <h3 class="card__title mb-4">Order Summary</h3>
        <div class="flex justify-between mb-2"><span class="text-sm text-secondary">Status</span><span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span></div>
        <div class="flex justify-between mb-2"><span class="text-sm text-secondary">Sale</span><span class="text-sm" style="font-weight:600;">{{ order.sale.title }}</span></div>
        <div class="flex justify-between mb-2"><span class="text-sm text-secondary">Date</span><span class="text-sm">{{ order.created_at|date:"M d, Y H:i" }}</span></div>
        <div class="flex justify-between mb-2"><span class="text-sm text-secondary">Items Subtotal</span><span class="text-sm">GHS {{ order.items_subtotal|floatformat:2 }}</span></div>
        <div class="flex justify-between mb-2"><span class="text-sm text-secondary">Delivery Fee</span><span class="text-sm">GHS {{ order.delivery_fee|floatformat:2 }}</span></div>

        <div class="flex justify-between mt-3 pt-2" style="border-top:1px solid var(--color-border-light);">
            <span class="text-sm text-secondary font-semibold">Grand Total</span>
            <span style="font-size:var(--font-size-xl);font-weight:800;color:var(--color-primary);">GHS {{ order.total_amount|floatformat:2 }}</span>
        </div>
    </div>
</div>

<div class="dash-card">
    <div class="dash-card__header"><h3 class="dash-card__title">Purchased Items</h3></div>
    <div class="dash-card__body">
        <div class="grid grid--2">
            {% for item in items %}
            <div class="card card--flat">
                <h4 style="font-weight:700;font-size:var(--font-size-base);margin-bottom:var(--space-2);">{{ item.sale_item.product.name }}</h4>
                <div class="flex justify-between text-sm mb-1"><span class="text-secondary">Unit Price</span><span>GHS {{ item.unit_price|floatformat:2 }}</span></div>
                <div class="flex justify-between text-sm mb-2"><span class="text-secondary">Quantity</span><span>x{{ item.quantity }}</span></div>
                <div class="flex justify-between text-sm pt-2" style="border-top:1px solid var(--color-border-light);"><span class="text-secondary">Subtotal</span><strong style="color:var(--color-primary);">GHS {{ item.line_total|floatformat:2 }}</strong></div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
