{% extends "base.html" %}
{% load humanize %}
{% block title %}My Payments{% endblock %}
{% block nav_payments_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-money-bill-wave me-2"></i>My Payments</h2>
        <p class="text-muted mb-0">
            {% if enrollment %}{{ enrollment.program }}{% endif %}
        </p>
    </div>
    {% if enrollment and total_outstanding > 0 %}
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#payOnlineModal">
        <i class="fa-solid fa-credit-card me-1"></i> Pay Online Now
    </button>
    {% endif %}
</div>

{% if enrollment %}

<!-- Summary stats -->
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(40,167,69,0.1);color:#28a745;">
                <i class="fa-solid fa-money-bill-wave"></i>
            </div>
            <div>
                <div class="stat-value" style="font-size:1.1rem;">{{ total_paid|floatformat:0|intcomma }}</div>
                <div class="stat-label">UGX Total Paid</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(220,53,69,0.1);color:#dc3545;">
                <i class="fa-solid fa-circle-exclamation"></i>
            </div>
            <div>
                <div class="stat-value" style="font-size:1.1rem;">{{ total_outstanding|floatformat:0|intcomma }}</div>
                <div class="stat-label">UGX Outstanding</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(10,61,98,0.1);color:var(--color-primary);">
                <i class="fa-solid fa-receipt"></i>
            </div>
            <div>
                <div class="stat-value">{{ payments.count }}</div>
                <div class="stat-label">Transactions</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(244,180,0,0.15);color:var(--color-secondary);">
                <i class="fa-solid fa-chart-pie"></i>
            </div>
            <div>
                {% if total_fees > 0 %}
                <div class="stat-value" style="font-size:1.1rem;">{{ total_paid|floatformat:0|intcomma }}/{{ total_fees|floatformat:0|intcomma }}</div>
                {% else %}
                <div class="stat-value">—</div>
                {% endif %}
                <div class="stat-label">UGX Paid / Total</div>
            </div>
        </div>
    </div>
</div>

<!-- Fee breakdown + Pay Online -->
<div class="row g-4 mb-4">
    <div class="col-lg-7">
        <div class="portal-card h-100">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-list-check me-2"></i>Fee Breakdown</h6>
            </div>
            <div class="portal-card-body p-0">
                <table class="table table-hover mb-0 small">
                    <thead class="table-light">
                        <tr>
                            <th>Fee Type</th>
                            <th class="text-end">Program Fee</th>
                            <th class="text-end">Paid</th>
                            <th class="text-end">Outstanding</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in fee_breakdown %}
                        <tr>
                            <td>
                                {{ row.label }}
                                {% if row.is_exam %}
                                <i class="fa-solid fa-circle-info text-info ms-1"
                                   title="Exam fees may vary from time to time"
                                   data-bs-toggle="tooltip" data-bs-placement="right"></i>
                                {% endif %}
                            </td>
                            <td class="text-end">{{ row.total|floatformat:0|intcomma }}</td>
                            <td class="text-end text-success">{{ row.paid|floatformat:0|intcomma }}</td>
                            <td class="text-end {% if row.outstanding > 0 %}text-danger fw-semibold{% else %}text-success{% endif %}">
                                {% if row.outstanding > 0 %}
                                {{ row.outstanding|floatformat:0|intcomma }}
                                {% else %}
                                <i class="fa-solid fa-circle-check text-success"></i>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    {% if total_fees > 0 %}
                    <tfoot class="table-light fw-semibold">
                        <tr>
                            <td>Total</td>
                            <td class="text-end">{{ total_fees|floatformat:0|intcomma }}</td>
                            <td class="text-end text-success">{{ total_paid|floatformat:0|intcomma }}</td>
                            <td class="text-end {% if total_outstanding > 0 %}text-danger{% else %}text-success{% endif %}">
                                {{ total_outstanding|floatformat:0|intcomma }}
                            </td>
                        </tr>
                    </tfoot>
                    {% endif %}
                </table>
                {% if has_exam_fee %}
                <div class="px-3 pb-3">
                    <p class="text-muted small mb-0 mt-2">
                        <i class="fa-solid fa-circle-info text-info me-1"></i>
                        <strong>Note:</strong> Exam fees may vary from time to time. The amount shown is an estimate — please confirm with the administration before making your exam fee payment.
                    </p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="portal-card h-100" style="border-top:4px solid var(--color-secondary);">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-credit-card me-2"></i>Pay Fees Online</h6>
            </div>
            <div class="portal-card-body">
                {% if total_outstanding > 0 %}
                <p class="text-muted small mb-3">
                    Pay securely via Mobile Money (MTN/Airtel), Visa/Mastercard, or USSD — powered by Flutterwave.
                </p>
                <button class="btn btn-success w-100 mb-2" data-bs-toggle="modal" data-bs-target="#payOnlineModal">
                    <i class="fa-solid fa-credit-card me-2"></i>
                    Pay UGX {{ total_outstanding|floatformat:0|intcomma }} Outstanding
                </button>
                <p class="text-muted small text-center mb-0">
                    <i class="fa-solid fa-shield-halved me-1 text-success"></i>
                    Payments are verified and recorded instantly.
                </p>
                {% else %}
                <div class="text-center py-3">
                    <i class="fa-solid fa-circle-check fa-3x text-success mb-3 d-block"></i>
                    <p class="fw-semibold mb-1">All fees paid!</p>
                    <p class="text-muted small mb-0">Your account is up to date.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Transaction history -->
<div class="portal-card">
    <div class="portal-card-header">
        <h6 class="mb-0"><i class="fa-solid fa-clock-rotate-left me-2"></i>Payment History</h6>
    </div>
    <div class="portal-card-body p-0">
        {% if payments %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Term</th>
                        <th>Year</th>
                        <th>Method</th>
                        <th>Reference</th>
                        <th class="text-end">Amount (UGX)</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in payments %}
                    <tr>
                        <td class="text-nowrap">{{ payment.payment_date|date:"d M Y" }}</td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary-emphasis">
                                {{ payment.get_payment_type_display }}
                            </span>
                        </td>
                        <td>{{ payment.get_term_display }}</td>
                        <td>{{ payment.academic_year }}</td>
                        <td class="small">
                            {{ payment.get_payment_method_display }}
                            {% if payment.payment_method == 'online' %}
                            <span class="badge bg-success-subtle text-success-emphasis ms-1">Online</span>
                            {% endif %}
                        </td>
                        <td class="small text-muted">{{ payment.reference|default:"—" }}</td>
                        <td class="text-end fw-semibold">{{ payment.amount|floatformat:0|intcomma }}</td>
                        <td>
                            <a href="{% url 'portal:payment_receipt' payment.pk %}"
                               class="btn btn-xs btn-outline-secondary" title="Print Receipt" target="_blank">
                                <i class="fa-solid fa-print"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <td colspan="7" class="fw-bold text-end">Total Paid</td>
                        <td class="text-end fw-bold text-success">{{ total_paid|floatformat:0|intcomma }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fa-solid fa-money-bill-wave fa-2x mb-3 d-block"></i>
            <p class="mb-1">No payment records yet.</p>
            <p class="small">Use the <strong>Pay Online Now</strong> button above to make your first payment.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Pay Online Modal -->
<div class="modal fade" id="payOnlineModal" tabindex="-1" aria-labelledby="payOnlineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="payOnlineModalLabel">
                    <i class="fa-solid fa-credit-card me-2 text-success"></i> Pay Fees Online
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="payFormAlert" class="alert d-none mb-3"></div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Fee Type</label>
                    <select class="form-select" id="payType">
                        {% for key, label in payment_type_choices %}
                        <option value="{{ key }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Term</label>
                        <select class="form-select" id="payTerm">
                            {% for key, label in term_choices %}
                            <option value="{{ key }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Academic Year</label>
                        <input type="text" class="form-control" id="payAcademicYear"
                               value="{{ default_academic_year }}" placeholder="e.g. 2025/2026">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Amount (UGX)</label>
                    <input type="number" class="form-control form-control-lg" id="payAmount"
                           value="{{ total_outstanding|floatformat:0 }}" min="1000" step="1000"
                           placeholder="Enter amount in UGX">
                    <div class="d-flex gap-2 mt-2 flex-wrap">
                        <button type="button" class="btn btn-sm btn-outline-secondary quick-amt" data-amount="50000">50,000</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary quick-amt" data-amount="100000">100,000</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary quick-amt" data-amount="200000">200,000</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary quick-amt" data-amount="500000">500,000</button>
                    </div>
                </div>

                <div class="p-3 bg-light rounded border-start border-success border-3 mb-2 small">
                    <i class="fa-solid fa-shield-halved me-1 text-success"></i>
                    <strong>Secure payment</strong> via Flutterwave — supports MTN Mobile Money, Airtel Money,
                    Visa/Mastercard, and USSD. You will be redirected back here after payment.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="proceedPayBtn">
                    <i class="fa-solid fa-lock me-1"></i> Proceed to Payment
                </button>
            </div>
        </div>
    </div>
</div>

{% else %}
<div class="alert alert-info">
    <i class="fa-solid fa-circle-info me-2"></i>
    No enrollment found. Payment records will appear here once you are enrolled.
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if enrollment %}
<script src="https://checkout.flutterwave.com/v3.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Bootstrap tooltips (used for exam fee info icon)
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
        new bootstrap.Tooltip(el);
    });

    // Quick amount buttons
    document.querySelectorAll('.quick-amt').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.getElementById('payAmount').value = this.dataset.amount;
        });
    });

    document.getElementById('proceedPayBtn').addEventListener('click', function () {
        var btn = this;
        var alertEl = document.getElementById('payFormAlert');
        alertEl.className = 'alert d-none mb-3';

        var amount = document.getElementById('payAmount').value.trim();
        var payType = document.getElementById('payType').value;
        var term = document.getElementById('payTerm').value;
        var academicYear = document.getElementById('payAcademicYear').value.trim();

        if (!amount || parseFloat(amount) < 1000) {
            alertEl.className = 'alert alert-danger mb-3';
            alertEl.textContent = 'Please enter a valid amount (minimum UGX 1,000).';
            return;
        }
        if (!academicYear) {
            alertEl.className = 'alert alert-danger mb-3';
            alertEl.textContent = 'Please enter the academic year.';
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Connecting...';

        var formData = new FormData();
        formData.append('amount', amount);
        formData.append('payment_type', payType);
        formData.append('term', term);
        formData.append('academic_year', academicYear);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        fetch('{% url "portal:payment_initiate" %}', {
            method: 'POST',
            body: formData,
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.error) {
                alertEl.className = 'alert alert-danger mb-3';
                alertEl.textContent = data.error;
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-lock me-1"></i> Proceed to Payment';
                return;
            }
            FlutterwaveCheckout({
                public_key:      data.public_key,
                tx_ref:          data.tx_ref,
                amount:          data.amount,
                currency:        'UGX',
                payment_options: 'mobilemoneyganda,card,ussd',
                redirect_url:    data.callback_url,
                customer:        data.customer,
                customizations: {
                    title:       'MLS Foundation — Fee Payment',
                    description: data.description,
                    logo:        window.location.origin + '/static/images/mirella.png',
                },
            });
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-lock me-1"></i> Proceed to Payment';
        })
        .catch(function () {
            alertEl.className = 'alert alert-danger mb-3';
            alertEl.textContent = 'Network error. Please try again.';
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-lock me-1"></i> Proceed to Payment';
        });
    });
});
</script>
{% endif %}
{% endblock %}