{% extends "superadmin/base.html" %}
{% load humanize %}

{% block superadmin_content %}
<div class="flex justify-between items-center mb-6" style="flex-wrap:wrap;gap:16px;">
    <div>
        <h2 style="font-size: var(--font-size-xl); font-weight: 700;">Customer Orders Management</h2>
        <p class="text-sm text-secondary">Monitor, search, and support buyer transactions across all sellers</p>
    </div>

    <!-- Search Form -->
    <form method="get" class="flex gap-2" style="max-width:400px;width:100%;">
        <input type="text" name="q" class="form-input mb-0" placeholder="Search order #, buyer name, phone..." value="{{ search_query }}">
        <button type="submit" class="btn btn--primary btn--sm">Search</button>
        {% if search_query %}
        <a href="{% url 'superadmin:orders' %}" class="btn btn--ghost btn--sm">Clear</a>
        {% endif %}
    </form>
</div>

<!-- Status Filters -->
<div class="flex gap-2 mb-6">
    <a href="?status=all{% if search_query %}&q={{ search_query }}{% endif %}" class="btn btn--sm {% if status_filter == 'all' %}btn--primary{% else %}btn--secondary{% endif %}">All Orders</a>
    <a href="?status=paid{% if search_query %}&q={{ search_query }}{% endif %}" class="btn btn--sm {% if status_filter == 'paid' %}btn--primary{% else %}btn--secondary{% endif %}">Paid</a>
    <a href="?status=pending{% if search_query %}&q={{ search_query }}{% endif %}" class="btn btn--sm {% if status_filter == 'pending' %}btn--primary{% else %}btn--secondary{% endif %}">Pending</a>
    <a href="?status=failed{% if search_query %}&q={{ search_query }}{% endif %}" class="btn btn--sm {% if status_filter == 'failed' %}btn--primary{% else %}btn--secondary{% endif %}">Failed</a>
</div>

{% if orders %}
<div class="grid grid--2 gap-6">
    {% for order in orders %}
    <div class="card card--flat">
        <div class="flex justify-between items-start mb-3">
            <div>
                <a href="{% url 'superadmin:business_detail' order.sale.business.id %}" class="text-xs font-semibold uppercase tracking-wider block mb-1" style="color:var(--color-primary);">
                    {{ order.sale.business.name }}
                </a>
                <h3 class="font-bold text-base" style="color:var(--color-text);">Order #{{ order.order_number }}</h3>
            </div>
            <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
        </div>

        <div class="text-xs text-secondary mb-3 p-3" style="background:var(--color-bg-card);border-radius:var(--radius-sm);border:1px solid var(--color-border-light);">
            <p class="font-semibold text-sm mb-1" style="color:var(--color-text);">Buyer: {{ order.buyer_name }}</p>
            <p class="text-xs text-muted mb-1">Phone: {{ order.buyer_phone }} &bull; Email: {{ order.buyer_email }}</p>
            {% if order.delivery_option %}
            <p class="text-xs text-muted mb-1">Delivery: <strong>{{ order.delivery_option.name }} (+GHS {{ order.delivery_fee|floatformat:2 }})</strong></p>
            {% endif %}
            {% if order.delivery_address %}
            <p class="text-xs text-muted mt-1 pt-1" style="border-top:1px dashed var(--color-border-light);">Address: {{ order.delivery_address }}</p>
            {% endif %}
        </div>

        <!-- Items Summary -->
        <div class="mb-3">
            <span class="text-xs text-muted block uppercase tracking-wider font-semibold mb-1">Purchased Items</span>
            <div class="flex flex-col gap-1">
                {% for item in order.items.all %}
                <div class="flex justify-between text-xs text-secondary">
                    <span>{{ item.sale_item.product.name }} (x{{ item.quantity }})</span>
                    <span>GHS {{ item.line_total|floatformat:2 }}</span>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="flex justify-between items-center text-xs text-muted pt-3" style="border-top:1px solid var(--color-border-light);">
            <span>Placed {{ order.created_at|date:"M d, Y H:i" }}</span>
            <strong style="font-size:var(--font-size-base);color:var(--color-primary);">Grand Total: GHS {{ order.total_amount|floatformat:2 }}</strong>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No orders found</h3>
</div>
{% endif %}
{% endblock %}
