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

{% block title %}Check Application Status{% endblock %}

{% block content %}
<div class="auth-wrapper" style="padding: 3rem 1rem;">
    <div class="auth-card" style="max-width: 550px;">
        <div class="text-center mb-4">
            <i class="fa-solid fa-magnifying-glass" style="font-size: 2.5rem; color: var(--color-primary);"></i>
            <h2 class="auth-title mt-2">Check Application Status</h2>
            <p class="auth-subtitle">Enter your reference number and email to check your application status.</p>
        </div>

        <form method="post">
            {% csrf_token %}
            {% crispy form %}
        </form>

        {% if error %}
            <div class="alert alert-danger mt-3">
                <i class="fa-solid fa-circle-exclamation me-2"></i>{{ error }}
            </div>
        {% endif %}

        {% if application %}
        <hr class="my-4">
        <div class="status-result">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <h5 class="mb-1">{{ application.full_name }}</h5>
                    <p class="text-muted mb-0 small">{{ application.reference_number }}</p>
                </div>
                <span class="badge fs-6 {{ application.get_status_badge_class }}">
                    {{ application.get_status_display }}
                </span>
            </div>

            <div class="row g-2 text-sm">
                <div class="col-6">
                    <small class="text-muted">Program</small>
                    <div class="fw-semibold small">{{ application.program_applied }}</div>
                </div>
                <div class="col-6">
                    <small class="text-muted">Submitted</small>
                    <div class="fw-semibold small">{{ application.submitted_at|date:"d M Y" }}</div>
                </div>
            </div>

            {% if application.status == 'awaiting_payment' %}
            <div class="alert alert-danger mt-3 small">
                <i class="fa-solid fa-circle-exclamation me-2"></i>
                <strong>Application Fee Required.</strong>
                Your application details have been saved but the UGX 50,000 non-refundable
                application fee has not been paid yet. Your application will not be reviewed
                until payment is complete.
            </div>
            <a href="{% url 'admissions:application_fee' application.pk %}"
               class="btn btn-danger w-100 mt-2">
                <i class="fa-solid fa-credit-card me-2"></i>Pay UGX 50,000 Application Fee Now
            </a>
            {% elif application.status == 'approved' %}
            <div class="alert alert-success mt-3 small">
                <i class="fa-solid fa-circle-check me-2"></i>
                <strong>Congratulations!</strong> Your application was approved.
                Check your email for your login credentials to access the student portal.
            </div>
            {% elif application.status == 'rejected' %}
            <div class="alert alert-danger mt-3 small">
                <i class="fa-solid fa-circle-xmark me-2"></i>
                <strong>Application Not Approved.</strong>
                {% if application.rejection_reason %}
                    Reason: {{ application.rejection_reason }}
                {% endif %}
                Contact us at <a href="mailto:info@mlsfoundationug.org">info@mlsfoundationug.org</a> for more information.
            </div>
            {% elif application.status == 'pending' or application.status == 'under_review' %}
            <div class="alert alert-info mt-3 small">
                <i class="fa-solid fa-clock me-2"></i>
                Your application is being reviewed. We will notify you by email once a decision is made.
            </div>
            {% endif %}

            {% if documents %}
            <hr class="my-4">
            <h6 class="mb-1"><i class="fa-solid fa-paperclip me-2"></i>Supporting Documents</h6>
            {% if uploads_allowed %}
            <p class="text-muted small mb-3">Upload any missing documents or replace one before your application is decided. PDF, JPG or PNG — max 5 MB.</p>
            {% else %}
            <p class="text-muted small mb-3">Documents can no longer be changed for this application.</p>
            {% endif %}

            <div class="d-flex flex-column gap-2">
                {% for d in documents %}
                <div class="border rounded p-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="small">
                            <div class="fw-semibold">{{ d.label }}</div>
                            {% if d.doc %}
                            <a href="{{ d.doc.file.url }}" target="_blank" class="text-success text-decoration-none">
                                <i class="fa-solid fa-circle-check me-1"></i>{{ d.doc.filename }}
                            </a>
                            {% else %}
                            <span class="text-muted"><i class="fa-regular fa-circle me-1"></i>Not uploaded</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if uploads_allowed %}
                    <form method="post" action="{% url 'admissions:application_document_upload' %}"
                          enctype="multipart/form-data" class="d-flex gap-2 mt-2">
                        {% csrf_token %}
                        <input type="hidden" name="document_type" value="{{ d.type }}">
                        <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png" required
                               class="form-control form-control-sm">
                        <button type="submit" class="btn btn-sm btn-outline-primary text-nowrap">
                            <i class="fa-solid fa-upload me-1"></i>{% if d.doc %}Replace{% else %}Upload{% endif %}
                        </button>
                    </form>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}

        <div class="text-center mt-4">
            <a href="{% url 'admissions:apply' %}" class="text-decoration-none small">
                Submit a new application
            </a>
            &nbsp;·&nbsp;
            <a href="{% url 'accounts:login' %}" class="text-decoration-none small">
                Student Login
            </a>
        </div>
    </div>
</div>
{% endblock %}