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

{% block superadmin_content %}
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 style="font-size: var(--font-size-xl); font-weight: 700;">All Platform Sales</h2>
        <p class="text-sm text-secondary">Monitor live, upcoming, and past sales across all businesses with override controls</p>
    </div>
</div>

<!-- Status Filters -->
<div class="flex gap-2 mb-6">
    <a href="?status=all" class="btn btn--sm {% if status_filter == 'all' %}btn--primary{% else %}btn--secondary{% endif %}">All Sales</a>
    <a href="?status=live" class="btn btn--sm {% if status_filter == 'live' %}btn--primary{% else %}btn--secondary{% endif %}">Live Sales</a>
    <a href="?status=upcoming" class="btn btn--sm {% if status_filter == 'upcoming' %}btn--primary{% else %}btn--secondary{% endif %}">Upcoming Sales</a>
    <a href="?status=ended" class="btn btn--sm {% if status_filter == 'ended' %}btn--primary{% else %}btn--secondary{% endif %}">Ended Sales</a>
</div>

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

        <p class="text-xs text-muted mb-3">{{ sale.start_at|date:"M d, Y H:i" }} &rarr; {{ sale.end_at|date:"M d, Y H:i" }}</p>

        <div class="grid grid--3 gap-2 py-2 px-3 my-2" style="background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border-light);">
            <div>
                <span class="text-xs text-muted block">Views</span>
                <strong class="text-sm">{{ sale.view_count }}</strong>
            </div>
            <div>
                <span class="text-xs text-muted block">Paid Orders</span>
                <strong class="text-sm">{{ sale.order_count }}</strong>
            </div>
            <div>
                <span class="text-xs text-muted block">Revenue</span>
                <strong class="text-sm" style="color:var(--color-primary);">GHS {{ sale.revenue|default:0|floatformat:2|intcomma }}</strong>
            </div>
        </div>

        <!-- Super Admin Action Controls -->
        <div class="flex justify-between items-center text-xs text-muted pt-3 mt-2" style="border-top:1px solid var(--color-border-light);">
            <div class="flex gap-2">
                <form method="post" action="{% url 'superadmin:sale_action' sale.id %}" onsubmit="return confirm('Extend sale duration by +24 hours?');">
                    {% csrf_token %}
                    <input type="hidden" name="action_type" value="extend">
                    <button type="submit" class="btn btn--secondary btn--sm" style="font-size:11px;padding:4px 8px;min-height:30px;">+24h Extend</button>
                </form>
                {% if sale.status != 'ended' %}
                <form method="post" action="{% url 'superadmin:sale_action' sale.id %}" onsubmit="return confirm('Force end this sale now?');">
                    {% csrf_token %}
                    <input type="hidden" name="action_type" value="end">
                    <button type="submit" class="btn btn--ghost btn--sm" style="color:var(--color-error);font-size:11px;padding:4px 8px;min-height:30px;">Force End</button>
                </form>
                {% endif %}
            </div>
            <a href="{% url 'sales:detail' sale.slug %}" target="_blank" class="btn btn--ghost btn--sm">View Public Page &rarr;</a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No sales found</h3>
</div>
{% endif %}
{% endblock %}