{% extends "base.html" %}
{% load portal_extras %}
{% block title %}Applications{% endblock %}
{% block nav_applications %}active{% endblock %}

{% block content %}
<div class="page-header">
    <h2><i class="fa-solid fa-file-lines me-2"></i>Applications</h2>
    <a href="{% export_url %}" class="btn btn-success">
        <i class="fa-solid fa-file-excel me-1"></i> Export Excel
    </a>
</div>

<!-- Filters -->
<div class="portal-card mb-4">
    <div class="portal-card-body">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-5">
                <label class="form-label small fw-semibold">Search</label>
                <input type="text" name="q" value="{{ search_query }}" class="form-control"
                       placeholder="Name, email, or phone...">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Status</label>
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    {% for value, label in status_choices %}
                        <option value="{{ value }}" {% if current_status == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fa-solid fa-filter me-1"></i> Filter
                </button>
            </div>
            <div class="col-md-2">
                <a href="{% url 'portal:applications_list' %}" class="btn btn-outline-secondary w-100">Clear</a>
            </div>
        </form>
    </div>
</div>

<!-- Table -->
<div class="portal-card">
    <div class="portal-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Ref No.</th>
                        <th>Applicant</th>
                        <th>Phone</th>
                        <th>Program</th>
                        <th>Status</th>
                        <th>Submitted</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for app in applications %}
                    <tr>
                        <td><code class="small">{{ app.reference_number }}</code></td>
                        <td>
                            <div class="fw-semibold">{{ app.full_name }}</div>
                            <small class="text-muted">{{ app.email }}</small>
                        </td>
                        <td class="small">{{ app.phone_number }}</td>
                        <td class="small">{{ app.program_applied.name }}</td>
                        <td>
                            <span class="badge {{ app.get_status_badge_class }}">
                                {{ app.get_status_display }}
                            </span>
                            {% if not app.application_fee_paid %}
                            <span class="badge bg-danger ms-1" title="Application fee not yet paid">
                                <i class="fa-solid fa-circle-dollar-to-slot me-1"></i>Fee Pending
                            </span>
                            {% endif %}
                        </td>
                        <td class="small text-muted">{{ app.submitted_at|date:"d M Y" }}</td>
                        <td>
                            <a href="{% url 'portal:application_review' app.pk %}"
                               class="btn btn-sm btn-primary">
                                Review
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">
                            <i class="fa-solid fa-inbox fa-2x mb-2 d-block"></i>
                            No applications found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <div class="d-flex justify-content-center py-3">
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}&status={{ current_status }}&q={{ search_query }}">Previous</a>
                        </li>
                    {% endif %}
                    <li class="page-item active">
                        <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                    </li>
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}&status={{ current_status }}&q={{ search_query }}">Next</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}