{% extends "core/base.html" %}
{% load currency_filters %}
{% block title %}Billing History — SwiftPOS{% endblock %}
{% block topbar_title %}Billing History{% endblock %}

{% block content %}
<div class="container-fluid py-3">
<div class="d-flex align-items-center justify-content-between mb-3">
    <h1 class="fw-bold fs-5 mb-0">Billing History</h1>
    <a href="{% url 'subscriptions:manage' %}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;">
        <i class="fas fa-arrow-left me-1"></i> Back to Subscription
    </a>
</div>

<div class="card" style="border-radius:16px;border:1px solid #e2e8f0;">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table mb-0">
    <thead style="background:#f8fafc;">
    <tr>
        <th class="px-4 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;letter-spacing:.05em;">Reference</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Plan</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Cycle</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Amount</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Discount</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Status</th>
        <th class="px-3 py-3" style="font-size:.72rem;text-transform:uppercase;color:#94a3b8;font-weight:700;">Date</th>
    </tr>
    </thead>
    <tbody>
    {% for txn in page_obj %}
    <tr style="border-top:1px solid #f1f5f9;">
        <td class="px-4 py-3">
            <code style="font-size:.75rem;color:#6366f1;">{{ txn.payment_reference }}</code>
            {% if txn.promo_code_used %}
            <br><small style="color:#10b981;font-size:.7rem;"><i class="fas fa-tag me-1"></i>Promo: {{ txn.promo_code_used }}</small>
            {% endif %}
        </td>
        <td class="px-3 py-3" style="font-size:.83rem;font-weight:600;">{{ txn.plan.name }}</td>
        <td class="px-3 py-3" style="font-size:.83rem;">{{ txn.get_billing_cycle_display }}</td>
        <td class="px-3 py-3" style="font-size:.85rem;font-weight:700;">₦{% fmt_currency txn.final_amount 0 %}</td>
        <td class="px-3 py-3" style="font-size:.83rem;color:#10b981;">
            {% if txn.discount_amount %}₦{% fmt_currency txn.discount_amount 0 %}{% else %}—{% endif %}
        </td>
        <td class="px-3 py-3">
            {% if txn.status == 'paid' %}
            <span class="badge" style="background:#d1fae5;color:#065f46;border-radius:20px;font-size:.72rem;">✓ Paid</span>
            {% elif txn.status == 'pending' %}
            <span class="badge" style="background:#fef3c7;color:#92400e;border-radius:20px;font-size:.72rem;">⏳ Pending</span>
            {% elif txn.status == 'failed' %}
            <span class="badge" style="background:#fee2e2;color:#991b1b;border-radius:20px;font-size:.72rem;">✗ Failed</span>
            {% else %}
            <span class="badge bg-secondary" style="border-radius:20px;font-size:.72rem;">{{ txn.get_status_display }}</span>
            {% endif %}
        </td>
        <td class="px-3 py-3" style="font-size:.8rem;color:#64748b;">
            {{ txn.created_at|date:"d M Y" }}<br>
            <small>{{ txn.created_at|date:"H:i" }}</small>
        </td>
    </tr>
    {% empty %}
    <tr>
        <td colspan="7" class="text-center py-5 text-muted">
            <i class="fas fa-receipt" style="font-size:2rem;opacity:.3;"></i>
            <p class="mt-2">No transactions yet.</p>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
</div>
</div>
</div>

{% if page_obj.has_other_pages %}
<div class="d-flex justify-content-center mt-3 gap-2">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;">← Prev</a>
    {% endif %}
    <span class="btn btn-sm disabled" style="border-radius:8px;">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px;">Next →</a>
    {% endif %}
</div>
{% endif %}
</div>
{% endblock %}
