{% extends "base.html" %}
{% block title %}Delete Payment{% endblock %}
{% block nav_payments %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'portal:payment_list' %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> All Payments
        </a>
        <h2>Delete Payment</h2>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="portal-card">
            <div class="portal-card-body">
                <div class="alert alert-danger mb-4">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    This action cannot be undone. Are you sure?
                </div>
                <div class="info-grid mb-4">
                    <div class="info-item">
                        <span class="info-label">Student</span>
                        <span class="info-value fw-semibold">{{ payment.enrollment.student.get_full_name }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Amount</span>
                        <span class="info-value fw-bold text-success">UGX {{ payment.amount|floatformat:0 }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Type</span>
                        <span class="info-value">{{ payment.get_payment_type_display }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Term / Year</span>
                        <span class="info-value">{{ payment.get_term_display }} · {{ payment.academic_year }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Date</span>
                        <span class="info-value">{{ payment.payment_date|date:"d M Y" }}</span>
                    </div>
                    {% if payment.reference %}
                    <div class="info-item">
                        <span class="info-label">Reference</span>
                        <span class="info-value">{{ payment.reference }}</span>
                    </div>
                    {% endif %}
                </div>
                <form method="post">
                    {% csrf_token %}
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-danger">
                            <i class="fa-solid fa-trash me-1"></i> Delete
                        </button>
                        <a href="{% url 'portal:payment_list' %}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}