{% 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;">Platform Payments Log</h2>
        <p class="text-sm text-secondary">Paystack payment transactions for sale window bookings and guest order checkouts</p>
    </div>
</div>

{% if payments %}
<div class="grid grid--2 gap-4">
    {% for pay in payments %}
    <div class="card card--flat">
        <div class="flex justify-between items-start mb-2">
            <div>
                <span class="badge badge--{% if pay.status == 'verified' or pay.status == 'paid' %}live{% elif pay.status == 'initiated' %}upcoming{% else %}ended{% endif %} mb-1">
                    {{ pay.get_type_display }}
                </span>
                <p class="text-xs text-muted font-mono" style="font-family:monospace;">Ref: {{ pay.paystack_reference }}</p>
            </div>
            <strong style="font-size:var(--font-size-lg);color:var(--color-primary);">GHS {{ pay.amount|floatformat:2|intcomma }}</strong>
        </div>

        <div class="text-xs text-secondary my-2 py-2 px-3" style="background:var(--color-bg-card);border-radius:var(--radius-sm);border:1px solid var(--color-border-light);">
            Status: <strong>{{ pay.status|upper }}</strong>
            {% if pay.metadata %}
            <br>Metadata: <span class="font-mono text-muted">{{ pay.metadata }}</span>
            {% endif %}
        </div>

        <div class="text-xs text-muted pt-2 flex justify-between" style="border-top:1px solid var(--color-border-light);">
            <span>Timestamp: {{ pay.created_at|date:"M d, Y H:i:s" }}</span>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No payment records found</h3>
</div>
{% endif %}
{% endblock %}