{% extends "public_base.html" %}
{% load static humanize %}

{% block title %}Complete Your Application — Pay Fee{% endblock %}

{% block content %}
<div class="auth-wrapper" style="padding: 3rem 1rem;">
    <div class="auth-card" style="max-width: 560px;">

        <!-- Header -->
        <div class="text-center mb-4">
            <i class="fa-solid fa-file-invoice-dollar" style="font-size:2.5rem;color:var(--color-secondary);"></i>
            <h2 class="auth-title mt-2">One Last Step</h2>
            <p class="auth-subtitle">
                Your application details have been saved. Pay the non-refundable application fee
                of <strong>UGX 50,000</strong> to complete your submission.
            </p>
        </div>

        <!-- Application summary -->
        <div class="p-3 rounded border mb-4" style="background:#f8fafc;">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">Application Summary</span>
                <span class="badge bg-danger">Fee Pending</span>
            </div>
            <div class="row g-2 small">
                <div class="col-6">
                    <div class="text-muted">Name</div>
                    <div class="fw-semibold">{{ application.full_name }}</div>
                </div>
                <div class="col-6">
                    <div class="text-muted">Reference</div>
                    <div class="fw-semibold font-monospace">{{ application.reference_number }}</div>
                </div>
                <div class="col-12 mt-1">
                    <div class="text-muted">Program Applied</div>
                    <div class="fw-semibold">{{ application.program_applied }}</div>
                </div>
            </div>
        </div>

        <!-- Fee notice -->
        <div class="alert alert-warning small mb-4 d-flex gap-2">
            <i class="fa-solid fa-triangle-exclamation mt-1 flex-shrink-0"></i>
            <div>
                <strong>Non-Refundable Fee:</strong> The UGX 50,000 application processing fee is
                non-refundable regardless of the outcome of your application. It covers administrative
                and review costs.
            </div>
        </div>

        <!-- Alert for JS errors -->
        <div id="feeAlert" class="alert alert-danger d-none mb-3"></div>

        <!-- Pay button -->
        <div id="feeFormSection">
            <button type="button" class="btn btn-success w-100 btn-lg" id="payFeeBtn">
                <i class="fa-solid fa-lock me-2"></i>
                Pay UGX 50,000 — Secure Payment
            </button>
            <p class="text-center text-muted small mt-2 mb-0">
                <i class="fa-solid fa-shield-halved me-1 text-success"></i>
                Secured by Flutterwave &nbsp;·&nbsp; MTN MoMo &nbsp;·&nbsp; Airtel Money &nbsp;·&nbsp; Visa/Mastercard
            </p>
        </div>

        <!-- Progress state (shown while Flutterwave modal is open) -->
        <div id="feeProgress" style="display:none;text-align:center;padding:1.5rem 0;">
            <i class="fa-solid fa-spinner fa-spin fa-2x mb-3 text-success d-block"></i>
            <p class="fw-semibold mb-1">Payment in progress…</p>
            <p class="text-muted small mb-0">Complete the payment in the window that opened.<br>
               Do not close this page.</p>
        </div>

        <hr class="my-4">
        <p class="text-center text-muted small mb-0">
            Already paid or need help?
            <a href="{% url 'admissions:application_status' %}" class="text-decoration-none fw-semibold">Check application status</a>
            &nbsp;·&nbsp;
            <a href="mailto:info@mlsfoundationug.org" class="text-decoration-none">Contact us</a>
        </p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://checkout.flutterwave.com/v3.js"></script>
<script>
document.getElementById('payFeeBtn').addEventListener('click', function () {
    var btn = this;
    var alertEl = document.getElementById('feeAlert');
    alertEl.className = 'alert alert-danger d-none mb-3';

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

    var formData = new FormData();
    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

    fetch('{% url "admissions:application_fee_initiate" application.pk %}', {
        method: 'POST',
        body: formData,
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        if (data.error) {
            alertEl.textContent = data.error;
            alertEl.className = 'alert alert-danger mb-3';
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-lock me-2"></i> Pay UGX 50,000 — Secure Payment';
            return;
        }

        document.getElementById('feeFormSection').style.display = 'none';
        document.getElementById('feeProgress').style.display = 'block';

        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 — Application Fee',
                description: data.description,
                logo:        window.location.origin + '/static/images/mirella.png',
            },
            onclose: function () {
                document.getElementById('feeProgress').style.display = 'none';
                document.getElementById('feeFormSection').style.display = 'block';
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-lock me-2"></i> Pay UGX 50,000 — Secure Payment';
            },
        });
    })
    .catch(function () {
        alertEl.textContent = 'Network error. Please check your connection and try again.';
        alertEl.className = 'alert alert-danger mb-3';
        btn.disabled = false;
        btn.innerHTML = '<i class="fa-solid fa-lock me-2"></i> Pay UGX 50,000 — Secure Payment';
    });
});
</script>
{% endblock %}