{% extends "core/base.html" %}
{% load currency_filters %}
{% block title %}Payment Successful — SwiftPOS{% endblock %}
{% block content %}
<div class="container-fluid py-5 text-center" style="max-width:560px;margin:0 auto;">
    <div style="font-size:4.5rem;margin-bottom:1rem;">🎉</div>
    <h2 class="fw-bold" style="font-size:1.6rem;color:#065f46;">Payment Successful!</h2>
    <p class="text-muted" style="font-size:.9rem;margin-top:.5rem;">
        Your <strong>{{ txn.plan.name }}</strong> subscription is now active.
    </p>

    <div class="mt-3 p-3" style="background:#d1fae5;border-radius:14px;text-align:left;">
        <div class="d-flex justify-content-between" style="font-size:.85rem;margin-bottom:.4rem;">
            <span class="text-muted">Plan</span><strong>{{ txn.plan.name }}</strong>
        </div>
        <div class="d-flex justify-content-between" style="font-size:.85rem;margin-bottom:.4rem;">
            <span class="text-muted">Amount Paid</span><strong>₦{% fmt_currency txn.final_amount 0 %}</strong>
        </div>
        <div class="d-flex justify-content-between" style="font-size:.85rem;margin-bottom:.4rem;">
            <span class="text-muted">Reference</span><code style="font-size:.78rem;">{{ txn.payment_reference }}</code>
        </div>
        {% if txn.subscription %}
        <div class="d-flex justify-content-between" style="font-size:.85rem;">
            <span class="text-muted">Expires</span><strong>{{ txn.subscription.expiry_date|date:"d M Y" }}</strong>
        </div>
        {% endif %}
    </div>

    <div class="mt-4 d-flex gap-2 justify-content-center flex-wrap">
        <a href="{% url 'dashboard' %}" class="btn btn-success" style="border-radius:10px;">
            <i class="fas fa-gauge me-1"></i> Go to Dashboard
        </a>
        <a href="{% url 'subscriptions:manage' %}" class="btn btn-outline-secondary" id="manage-btn" style="border-radius:10px;">
            <i class="fas fa-receipt me-1"></i> View Subscription
        </a>
    </div>
    
    <p class="text-muted mt-4" style="font-size: 0.85rem;" id="redirect-msg">
        Redirecting to your subscription details in <span id="countdown">5</span> seconds...
    </p>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let seconds = 5;
        const countdownEl = document.getElementById("countdown");
        const interval = setInterval(function() {
            seconds--;
            countdownEl.textContent = seconds;
            if (seconds <= 0) {
                clearInterval(interval);
                window.location.href = "{% url 'subscriptions:manage' %}";
            }
        }, 1000);
    });
</script>
{% endblock %}