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

{% block title %}Apply for Admission{% endblock %}

{% block content %}
<div class="apply-wrapper">
    <div class="apply-header">
        <div class="container">
            <h1><i class="fa-solid fa-graduation-cap me-2"></i>Online Admission Application</h1>
            <p>Mirella & Lino Saputo Foundation LTD — UVTAB-Aligned Vocational Training</p>
        </div>
    </div>

    <div class="container py-5">
        <!-- Info banner -->
        <div class="alert alert-info d-flex gap-3 mb-4">
            <i class="fa-solid fa-circle-info fa-lg mt-1 flex-shrink-0"></i>
            <div>
                <strong>Before you begin:</strong> Have your academic documents ready to upload (O-Level results, A-Level if applicable, etc.).
                After submitting, you will receive a <strong>reference number</strong> to track your application.
                Admission fee of <strong>UGX 50,000</strong> is payable upon approval.
            </div>
        </div>

        <div class="apply-card">
            <p class="text-muted small mb-3">
                <span class="asteriskField">*</span> Fields marked with an asterisk are required.
            </p>
            <form method="post" enctype="multipart/form-data" novalidate>
                {% csrf_token %}
                {% crispy form %}

                <!-- Declaration -->
                <div class="mt-4 p-3 bg-light rounded border">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="declaration" required>
                        <label class="form-check-label" for="declaration">
                            I declare that all information provided is true and correct to the best of my knowledge.
                            I understand that false information may lead to cancellation of my admission.
                        </label>
                    </div>
                </div>

                <div class="d-flex gap-3 mt-4">
                    <button type="submit" class="btn btn-primary btn-lg px-5">
                        <i class="fa-solid fa-paper-plane me-2"></i>Submit Application
                    </button>
                    <a href="{% url 'admissions:application_status' %}" class="btn btn-outline-secondary btn-lg">
                        Check Existing Application
                    </a>
                </div>
            </form>
            <script>
            (function () {
                var form = document.querySelector('.apply-card form');
                if (!form) return;
                var decl = document.getElementById('declaration');

                function syncDeclaration() {
                    if (decl) decl.setCustomValidity(decl.checked ? '' : 'Please confirm the declaration before submitting.');
                }
                if (decl) { decl.addEventListener('change', syncDeclaration); syncDeclaration(); }

                function anchorFor(ctrl) {
                    return ctrl.closest('.form-check') || ctrl;
                }
                function clearError(ctrl) {
                    ctrl.classList.remove('is-invalid');
                    var a = anchorFor(ctrl);
                    var note = a.parentNode && a.parentNode.querySelector('.js-required-error[data-for="' + (ctrl.name || ctrl.id) + '"]');
                    if (note) note.remove();
                }
                function showError(ctrl) {
                    ctrl.classList.add('is-invalid');
                    var a = anchorFor(ctrl);
                    if (a.parentNode && a.parentNode.querySelector('.js-required-error[data-for="' + (ctrl.name || ctrl.id) + '"]')) return;
                    var note = document.createElement('div');
                    note.className = 'js-required-error text-danger small mt-1';
                    note.setAttribute('data-for', ctrl.name || ctrl.id);
                    note.innerHTML = '<i class="fa-solid fa-circle-exclamation me-1"></i>' +
                        (ctrl.validationMessage || 'This field is required.');
                    a.insertAdjacentElement('afterend', note);
                }

                // Clear a field's error as soon as it becomes valid.
                function maybeClear(e) {
                    var t = e.target;
                    if (t && typeof t.checkValidity === 'function' && t.willValidate && t.checkValidity()) clearError(t);
                }
                form.addEventListener('input', maybeClear, true);
                form.addEventListener('change', maybeClear, true);

                form.addEventListener('submit', function (e) {
                    syncDeclaration();
                    if (!form.checkValidity()) {
                        e.preventDefault();
                        e.stopPropagation();
                        var invalid = form.querySelectorAll(':invalid');
                        invalid.forEach(showError);
                        if (invalid.length) {
                            invalid[0].scrollIntoView({ block: 'center' });
                            try { invalid[0].focus({ preventScroll: true }); } catch (x) {}
                        }
                    }
                });
            })();
            </script>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .section-heading {
        color: var(--color-primary);
        border-bottom: 2px solid var(--color-secondary);
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
    }
</style>
{% endblock %}