{% extends "alumni/base.html" %}

{% block title %}Donation Status | AMS{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-sm border-0">
            {% if donation.status == "SUCCESS" %}
            <div class="card-header bg-success text-white">
                <h4 class="mb-0"><i class="bi bi-check-circle-fill"></i> Donation Successful!</h4>
            </div>
            <div class="card-body">
                <p>Thank you, <strong>{{ donation.user.get_full_name }}</strong>, for your generous donation.</p>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><strong>Reference:</strong> {{ donation.reference }}</li>
                    <li class="list-group-item"><strong>Amount:</strong> GHS {{ donation.amount }}</li>
                    <li class="list-group-item"><strong>Transaction ID:</strong> {{ donation.transaction_id }}</li>
                    <li class="list-group-item"><strong>Payment Channel:</strong> {{ donation.payment_channel }}</li>
                    <li class="list-group-item"><strong>Date:</strong> {{ donation.created_at|date:"F j, Y, g:i A" }}</li>
                </ul>
                <a href="{% url 'alumni:dashboard' %}" class="btn btn-brand mt-3">
                    <i class="bi bi-house-door-fill"></i> Back to Dashboard
                </a>
            </div>
            {% elif donation.status == "FAILED" %}
            <div class="card-header bg-danger text-white">
                <h4 class="mb-0"><i class="bi bi-x-circle-fill"></i> Donation Failed</h4>
            </div>
            <div class="card-body">
                <p>Unfortunately, your donation could not be processed. Please try again.</p>
                <a href="{% url 'alumni:donate' %}" class="btn btn-danger mt-3">
                    <i class="bi bi-arrow-repeat"></i> Retry Donation
                </a>
            </div>
            {% else %}
            <div class="card-header bg-warning text-dark">
                <h4 class="mb-0"><i class="bi bi-hourglass-split"></i> Pending Payment</h4>
            </div>
            <div class="card-body">
                <p>Your donation is pending. Please complete the payment.</p>
                <a href="{% url 'alumni:donate' %}" class="btn btn-warning mt-3">
                    <i class="bi bi-arrow-right-circle"></i> Complete Donation
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}