40045-vm/myproject/tempelates/order/my_orders.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>
        <p class="page-eyebrow">Order center</p>
        <h1>My Orders</h1>
        <p>Track purchases, filter by status, and jump directly into payment or delivery details.</p>
    </div>
    <div class="page-header-actions">
        <a href="{% url 'product_list' %}" class="btn btn-secondary">Shop More</a>
    </div>
</section>

<section class="orders-summary-grid reveal">
    <article class="orders-summary-card reveal">
        <span class="shop-stat-label">Total orders</span>
        <strong class="shop-stat-value">{{ order_summary.total }}</strong>
        <small class="shop-stat-note">Everything placed from your account.</small>
    </article>
    <article class="orders-summary-card reveal">
        <span class="shop-stat-label">Paid</span>
        <strong class="shop-stat-value">{{ order_summary.paid }}</strong>
        <small class="shop-stat-note">Orders with verified payment.</small>
    </article>
    <article class="orders-summary-card reveal">
        <span class="shop-stat-label">Pending payment</span>
        <strong class="shop-stat-value">{{ order_summary.pending_payment }}</strong>
        <small class="shop-stat-note">Retry or change payment when needed.</small>
    </article>
    <article class="orders-summary-card reveal">
        <span class="shop-stat-label">Delivered</span>
        <strong class="shop-stat-value">{{ order_summary.delivered }}</strong>
        <small class="shop-stat-note">Completed orders in your history.</small>
    </article>
</section>

<form method="get" class="orders-filter-bar reveal">
    <div class="field-stack">
        <label for="status">Order status</label>
        <select id="status" name="status" class="field-input">
            <option value="">All statuses</option>
            {% for status in status_filters %}
            <option value="{{ status }}" {% if selected_status == status %}selected{% endif %}>{{ status }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="field-stack">
        <label for="payment">Payment status</label>
        <select id="payment" name="payment" class="field-input">
            <option value="">All payment states</option>
            {% for payment in payment_filters %}
            <option value="{{ payment }}" {% if selected_payment_status == payment %}selected{% endif %}>{{ payment }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="orders-filter-actions">
        <button type="submit" class="btn btn-primary">Apply Filters</button>
        {% if has_order_filters %}
        <a href="{% url 'my_orders' %}" class="btn btn-secondary">Reset</a>
        {% endif %}
    </div>
</form>

<div class="orders-list">
    {% if orders %}
        {% for order in orders %}
            <article class="order-card reveal">
                <div class="order-card-header">
                    <div>
                        <h2>Order #{{ order.id }}</h2>
                        <p>{{ order.created_at|date:"M 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="order-actions">
                        {% 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 %}Pay Now{% endif %}</a>
                        {% endif %}
                        <a href="{% url 'order_detail' order.id %}" class="btn btn-secondary">View Details</a>
                    </div>
                </div>

                <div class="order-card-items">
                    {% for item in order.items.all|slice:":3" %}
                    <div class="order-thumb">
                        {% if item.product.image %}
                        <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
                        {% else %}
                        <span class="thumb-placeholder">{{ item.product.name|slice:":1"|upper }}</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% if order.items.count > 3 %}
                    <div class="order-thumb more">+{{ order.items.count|add:'-3' }}</div>
                    {% endif %}
                </div>

                <div class="order-meta">
                    <span>Total: Rs. {{ order.total_price|floatformat:2 }}</span>
                    <span>{{ order.items.count }} item{{ order.items.count|pluralize }}</span>
                    <span>Method: {{ order.payment_method }}</span>
                    <span>Provider: {{ order.payment_provider_label }}</span>
                </div>
            </article>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            {% if has_order_filters %}
            <h2>No orders match the current filters.</h2>
            <p>Try resetting the order or payment status filters to see the full list again.</p>
            <a href="{% url 'my_orders' %}" class="btn btn-primary">Reset Filters</a>
            {% else %}
            <h2>No orders yet.</h2>
            <p>Start shopping and your orders will appear here.</p>
            <a href="{% url 'product_list' %}" class="btn btn-primary">Browse Products</a>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}