40045-vm/myproject/tempelates/order/order_detail.html

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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="page-header page-header--split reveal">
    <div>
        <h1>Order #{{ order.id }}</h1>
        <p>Placed on {{ order.created_at|date:"F d, Y" }} | <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span></p>
        <div class="inline-status-row inline-status-row--spaced">
            <span>Payment</span>
            <span class="status-tag status-payment-{{ order.payment_status|lower }}">{{ order.payment_status }}</span>
            <span>{{ order.payment_method }}</span>
        </div>
    </div>
    <div class="page-header-actions">
        <a href="{% url 'my_orders' %}" class="btn btn-secondary">Back to Orders</a>
        {% if order.payment_status != 'Paid' %}
        <a href="{% url 'payment' order.id %}" class="btn btn-primary">{% if order.payment_method == 'Cash on Delivery' %}Change Payment{% else %}Complete Payment{% endif %}</a>
        {% endif %}
    </div>
</section>

<div class="order-detail-page">
    <div class="order-detail-box reveal">
        {% if order.payment_status != 'Paid' and order.payment_method != 'Cash on Delivery' %}
        <div class="alert-card warning">
            <div>
                <strong>Payment still required</strong>
                <p>This order has been created but has not been marked as paid yet.</p>
            </div>
            <a href="{% url 'payment' order.id %}" class="btn btn-primary">Complete Payment</a>
        </div>
        {% elif order.payment_method == 'Cash on Delivery' and order.payment_status != 'Paid' %}
        <div class="alert-card neutral">
            <div>
                <strong>Cash on delivery selected</strong>
                <p>Payment will be collected when the order is delivered, or you can switch to eSewa / Khalti now.</p>
            </div>
            <a href="{% url 'payment' order.id %}" class="btn btn-primary">Change Payment</a>
        </div>
        {% endif %}

        <h2>Tracking Timeline</h2>
        <div class="timeline">
            {% for step in timeline %}
            <div class="timeline-step {{ step.state }} reveal">
                <div class="timeline-dot"></div>
                <div class="timeline-label">{{ step.label }}</div>
            </div>
            {% endfor %}
        </div>

        <h2>Order Summary</h2>
        <div class="summary-row">
            <span>Payment method</span>
            <strong>{{ order.payment_method }}</strong>
        </div>
        <div class="summary-row">
            <span>Payment provider</span>
            <strong>{{ order.payment_provider_label }}</strong>
        </div>
        <div class="summary-row">
            <span>Payment status</span>
            <strong><span class="status-tag status-payment-{{ order.payment_status|lower }}">{{ order.payment_status }}</span></strong>
        </div>
        <div class="summary-row">
            <span>Total amount</span>
            <strong>Rs. {{ order.total_price|floatformat:2 }}</strong>
        </div>
        <div class="summary-row">
            <span>Currency</span>
            <strong>{{ order.payment_currency|default:'NPR' }}</strong>
        </div>
        <div class="summary-row">
            <span>Payment reference</span>
            <strong>{{ order.payment_reference|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>Paid at</span>
            <strong>{% if order.paid_at %}{{ order.paid_at|date:'M d, Y H:i' }}{% else %}-{% endif %}</strong>
        </div>
        <div class="summary-row">
            <span>Customer</span>
            <strong>{{ order.full_name|default:order.user.username }}</strong>
        </div>
        <div class="summary-row">
            <span>Phone</span>
            <strong>{{ order.phone|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>Address</span>
            <strong>{{ order.address|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>Location label</span>
            <strong>{{ order.location_label|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>Delivery notes</span>
            <strong>{{ order.delivery_notes|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>GPS</span>
            <strong>{% if order.has_precise_location %}{{ order.latitude }}, {{ order.longitude }}{% else %}-{% endif %}</strong>
        </div>

        <h3>Items</h3>
        <div class="order-items">
            {% for item in order.items.all %}
                <div class="order-item-row reveal">
                    <div class="order-item-left">
                        <div class="order-item-avatar">
                            {% if item.product.image %}
                            <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
                            {% else %}
                            <span class="avatar-placeholder">{{ item.product.name|slice:":1"|upper }}</span>
                            {% endif %}
                        </div>
                        <div>
                            <h4>{{ item.product.name }}</h4>
                            <p>Quantity: {{ item.quantity }}</p>
                        </div>
                    </div>
                    <strong>Rs. {{ item.price|floatformat:2 }}</strong>
                </div>
            {% endfor %}
        </div>
    </div>

    <aside class="summary-box order-side-panel reveal">
        <div class="payment-summary-header">
            <div>
                <h3>Next best action</h3>
                <p class="payment-caption">This side panel keeps key decisions in view.</p>
            </div>
            <span class="payment-badge">Overview</span>
        </div>

        {% if order.payment_status != 'Paid' and order.payment_method != 'Cash on Delivery' %}
        <div class="cart-summary-note">
            <strong>Finish payment</strong>
            <p>Use the payment page to complete verification and move this order into confirmed status.</p>
        </div>
        {% elif order.payment_method == 'Cash on Delivery' and order.payment_status != 'Paid' %}
        <div class="cart-summary-note">
            <strong>COD is active</strong>
            <p>You can keep COD, or switch to eSewa / Khalti before shipping if you prefer online payment.</p>
        </div>
        {% elif order.status == 'Paid' %}
        <div class="cart-summary-note cart-summary-note--success">
            <strong>Waiting for fulfillment</strong>
            <p>Your payment is confirmed. The next visible step will be shipping updates.</p>
        </div>
        {% elif order.status == 'Shipped' %}
        <div class="cart-summary-note cart-summary-note--success">
            <strong>On the way</strong>
            <p>The order has left fulfillment and is progressing toward delivery.</p>
        </div>
        {% else %}
        <div class="cart-summary-note cart-summary-note--success">
            <strong>Order delivered</strong>
            <p>This order has completed the full shopping journey.</p>
        </div>
        {% endif %}

        <div class="summary-row"><span>Items</span><strong>{{ order.items.count }}</strong></div>
        <div class="summary-row"><span>Placed</span><strong>{{ order.created_at|date:'M d, Y' }}</strong></div>
        <div class="summary-row"><span>Status</span><strong>{{ order.status }}</strong></div>
        <div class="summary-row"><span>Provider</span><strong>{{ order.payment_provider_label }}</strong></div>

        <div class="order-support-card">
            <h4>Need help?</h4>
            <p>Use the support section for customer care, or revisit the payment page if this order still needs attention.</p>
            <div class="checkout-form-actions">
                <a href="{% url 'support' %}" class="btn btn-secondary">Open Support</a>
                <a href="{% url 'home' %}" class="btn btn-secondary">Go Home</a>
            </div>
        </div>
    </aside>
</div>
{% endblock %}