<!-- templates/students/student_list.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Students - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
.student-card { transition: transform .2s, box-shadow .2s; }
.student-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.student-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--rb-red-dark, #7b1d1d), var(--rb-gold, #c9973a));
    color: #fff; font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-sm { width: 36px; height: 36px; font-size: .8rem; }
.stat-card { background:#fff; border-radius:10px; padding:14px 18px; box-shadow:0 2px 8px rgba(0,0,0,.07); text-align:center; }
.stat-number { font-size:1.75rem; font-weight:700; color:#22c55e; line-height:1; }
.stat-number.warn { color:#f59e0b; }
.stat-number.blue { color:#3b82f6; }
.stat-number.red  { color:#ef4444; }
.stat-label { font-size:.8rem; color:#888; margin-top:3px; }
.filter-bar { background:linear-gradient(135deg,#667eea,#764ba2); border-radius:10px; padding:16px 20px; margin-bottom:16px; }
.filter-bar label { color:#fff; font-size:.8rem; font-weight:600; margin-bottom:3px; display:block; }
.filter-bar .form-select, .filter-bar .form-control { font-size:.85rem; }
.result-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:10px; font-size:.85rem; color:#555; }
.sort-link { color:#555; text-decoration:none; white-space:nowrap; }
.sort-link:hover { color:var(--rb-red,#7b1d1d); }
.sort-link .fa-sort-up, .sort-link .fa-sort-down { color:var(--rb-red,#7b1d1d); }
.no-class-badge { background:#fef2f2; color:#dc2626; font-size:.72rem; padding:2px 7px; border-radius:99px; font-weight:600; }
.status-active   { background:#d1fae5; color:#065f46; }
.status-inactive { background:#fee2e2; color:#991b1b; }
.status-graduated{ background:#dbeafe; color:#1e40af; }
.status-transferred { background:#fef9c3; color:#92400e; }
.status-badge { padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:600; }
.pagination-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-top:16px; font-size:.85rem; }
.page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
    padding:0 10px; border-radius:6px; border:1px solid #e5e7eb; background:#fff;
    color:#555; text-decoration:none; font-size:.82rem; transition:all .15s; }
.page-btn:hover { background:#f3f4f6; color:#111; border-color:#d1d5db; }
.page-btn.active { background:var(--rb-red,#7b1d1d); color:#fff; border-color:var(--rb-red,#7b1d1d); font-weight:700; }
.page-btn.disabled { opacity:.4; pointer-events:none; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h3 mb-0">Student Management</h1>
            <p class="text-muted mb-0" style="font-size:.85rem">Manage all student records in one place</p>
        </div>
        <div class="btn-group">
            <a href="{% url 'students:student_add' %}" class="btn btn-primary btn-sm">
                <i class="fas fa-user-plus me-1"></i> Add Student
            </a>
            <a href="{% url 'students:import_students_csv' %}" class="btn btn-success btn-sm">
                <i class="fas fa-upload me-1"></i> Import
            </a>
            <a href="{% url 'students:export_students' %}" class="btn btn-info btn-sm">
                <i class="fas fa-download me-1"></i> Export
            </a>
            <button class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-ellipsis-v"></i> More
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#" onclick="window.print()"><i class="fas fa-print me-2"></i>Print List</a></li>
                <li><a class="dropdown-item" href="{% url 'students:download_student_sample' %}"><i class="fas fa-file-csv me-2"></i>Sample CSV</a></li>
            </ul>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number">{{ total_students }}</div>
                <div class="stat-label">Total Students</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number">{{ active_students }}</div>
                <div class="stat-label">Active</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number blue">{{ total_classes }}</div>
                <div class="stat-label">Classes with Students</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card">
                <div class="stat-number {% if unassigned_count %}warn{% endif %}">{{ unassigned_count }}</div>
                <div class="stat-label">
                    No Class Assigned
                    {% if unassigned_count %}
                    <a href="?class=none" class="d-block" style="color:#f59e0b;font-size:.75rem">View →</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="filter-bar">
        <form method="get" id="filterForm">
            {# Preserve sort when filter changes #}
            {% if request.GET.sort %}<input type="hidden" name="sort" value="{{ request.GET.sort }}">{% endif %}
            <div class="row g-2 align-items-end">
                <div class="col-md-3 col-sm-6">
                    <label>Search</label>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" name="q"
                               placeholder="Name, ID, address…" value="{{ request.GET.q }}">
                        <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label>Class</label>
                    <select class="form-select form-select-sm" name="class">
                        <option value="">All Classes</option>
                        <option value="none" {% if request.GET.class == 'none' %}selected{% endif %}
                                style="color:#dc2626;font-weight:600">
                            ⚠ No Class Assigned
                        </option>
                        <optgroup label="────────────">
                        {% for class in all_classes %}
                        <option value="{{ class.id }}"
                                {% if request.GET.class == class.id|stringformat:"s" %}selected{% endif %}>
                            {{ class.name }}
                        </option>
                        {% endfor %}
                        </optgroup>
                    </select>
                </div>
                <div class="col-md-2 col-sm-4">
                    <label>Gender</label>
                    <select class="form-select form-select-sm" name="gender">
                        <option value="">All</option>
                        <option value="M" {% if request.GET.gender == 'M' %}selected{% endif %}>Male</option>
                        <option value="F" {% if request.GET.gender == 'F' %}selected{% endif %}>Female</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-4">
                    <label>Status</label>
                    <select class="form-select form-select-sm" name="status">
                        <option value="">All</option>
                        <option value="active"      {% if request.GET.status == 'active' %}selected{% endif %}>Active</option>
                        <option value="inactive"    {% if request.GET.status == 'inactive' %}selected{% endif %}>Inactive</option>
                        <option value="graduated"   {% if request.GET.status == 'graduated' %}selected{% endif %}>Graduated</option>
                        <option value="transferred" {% if request.GET.status == 'transferred' %}selected{% endif %}>Transferred</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-4 d-flex gap-2">
                    <button type="submit" class="btn btn-light btn-sm flex-grow-1">
                        <i class="fas fa-filter me-1"></i> Apply
                    </button>
                    <a href="{% url 'students:student_list' %}" class="btn btn-outline-light btn-sm">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Result bar: count + sort + view toggle -->
    <div class="result-bar">
        <div>
            {% if filtered_count != total_students %}
            <strong>{{ filtered_count }}</strong> result{{ filtered_count|pluralize }} found
            <span class="text-muted">(of {{ total_students }} total)</span>
            {% if request.GET.class == 'none' %}
            <span class="no-class-badge ms-2"><i class="fas fa-exclamation-triangle me-1"></i>No class filter active</span>
            {% endif %}
            {% else %}
            <strong>{{ total_students }}</strong> student{{ total_students|pluralize }} total
            {% endif %}
            &nbsp;·&nbsp; Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            <!-- Sort -->
            <div class="d-flex align-items-center gap-1" style="font-size:.8rem">
                <span class="text-muted me-1">Sort:</span>
                {% with s=current_sort %}
                <a class="sort-link {% if s == 'name' or s == '-name' %}fw-bold{% endif %}"
                   href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if s == 'name' %}-name{% else %}name{% endif %}">
                    Name {% if s == 'name' %}<i class="fas fa-sort-up"></i>{% elif s == '-name' %}<i class="fas fa-sort-down"></i>{% else %}<i class="fas fa-sort text-muted"></i>{% endif %}
                </a>
                <a class="sort-link {% if s == 'class' or s == '-class' %}fw-bold{% endif %}"
                   href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if s == 'class' %}-class{% else %}class{% endif %}">
                    Class {% if s == 'class' %}<i class="fas fa-sort-up"></i>{% elif s == '-class' %}<i class="fas fa-sort-down"></i>{% else %}<i class="fas fa-sort text-muted"></i>{% endif %}
                </a>
                <a class="sort-link {% if s == 'admitted' or s == '-admitted' %}fw-bold{% endif %}"
                   href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if s == 'admitted' %}-admitted{% else %}admitted{% endif %}">
                    Admitted {% if s == 'admitted' %}<i class="fas fa-sort-up"></i>{% elif s == '-admitted' %}<i class="fas fa-sort-down"></i>{% else %}<i class="fas fa-sort text-muted"></i>{% endif %}
                </a>
                <a class="sort-link {% if s == 'age' or s == '-age' %}fw-bold{% endif %}"
                   href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if s == 'age' %}-age{% else %}age{% endif %}">
                    Age {% if s == 'age' %}<i class="fas fa-sort-up"></i>{% elif s == '-age' %}<i class="fas fa-sort-down"></i>{% else %}<i class="fas fa-sort text-muted"></i>{% endif %}
                </a>
                {% endwith %}
            </div>

            <!-- View Toggle -->
            <div class="btn-group btn-group-sm" role="group">
                <button type="button" class="btn btn-outline-primary active" id="gridViewBtn">
                    <i class="fas fa-th-large"></i> Grid
                </button>
                <button type="button" class="btn btn-outline-primary" id="tableViewBtn">
                    <i class="fas fa-table"></i> Table
                </button>
            </div>
        </div>
    </div>

    <!-- ── GRID VIEW ── -->
    <div id="gridView" class="row g-3">
        {% for student in students %}
        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card student-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start mb-3">
                        <div class="student-avatar me-3">
                            {{ student.first_name|first|upper }}{{ student.last_name|first|upper }}
                        </div>
                        <div class="flex-grow-1 min-w-0">
                            <div style="font-weight:700;font-size:.9rem;line-height:1.2">
                                {{ student.first_name }} {{ student.last_name }}
                            </div>
                            <div style="font-size:.75rem;color:#888">{{ student.student_id }}</div>
                            {% if student.current_class %}
                            <span class="badge bg-info" style="font-size:.7rem">{{ student.current_class.name }}</span>
                            {% else %}
                            <span class="no-class-badge"><i class="fas fa-exclamation-triangle me-1"></i>No class</span>
                            {% endif %}
                        </div>
                    </div>
                    <div style="font-size:.8rem;color:#555;line-height:1.8">
                        <div><i class="fas fa-birthday-cake text-primary me-2"></i>
                            {{ student.date_of_birth|date:"d M Y"|default:"—" }}
                            {% if student.get_age %}<span class="text-muted">({{ student.get_age }} yrs)</span>{% endif %}
                        </div>
                        <div><i class="fas fa-venus-mars text-primary me-2"></i>{{ student.get_gender_display|default:"—" }}</div>
                        <div><i class="fas fa-calendar-alt text-primary me-2"></i>{{ student.admission_date|date:"d M Y"|default:"—" }}</div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <span class="status-badge status-{{ student.status }}">{{ student.get_status_display|default:"Active" }}</span>
                        <div class="d-flex gap-1">
                            <a href="{% url 'students:student_detail' student.pk %}" class="btn btn-sm btn-outline-primary" title="View"><i class="fas fa-eye"></i></a>
                            <a href="{% url 'students:student_edit' student.pk %}" class="btn btn-sm btn-outline-warning" title="Edit"><i class="fas fa-edit"></i></a>
                            <a href="{% url 'finance:payment_add' %}?student_id={{ student.pk }}" class="btn btn-sm btn-success" title="Record Payment"><i class="fas fa-dollar-sign"></i></a>
                            <a href="{% url 'finance:invoice_list' %}?student={{ student.pk }}" class="btn btn-sm btn-outline-info" title="View Invoices"><i class="fas fa-file-invoice-dollar"></i></a>
                            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                    data-bs-target="#del{{ student.pk }}" title="Delete"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Delete Modal -->
        <div class="modal fade" id="del{{ student.pk }}" tabindex="-1">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white py-2">
                        <h6 class="modal-title mb-0">Confirm Delete</h6>
                        <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" style="font-size:.875rem">
                        Delete <strong>{{ student.first_name }} {{ student.last_name }}</strong>? This cannot be undone.
                    </div>
                    <div class="modal-footer py-2">
                        <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{% url 'students:student_delete' student.pk %}" method="post" style="display:inline">
                            {% csrf_token %}<button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="fas fa-users fa-3x text-muted mb-3 d-block"></i>
            <h5 class="text-muted">No students found</h5>
            <p class="text-muted">Try adjusting your filters</p>
            {% if request.GET.class == 'none' %}
            <p class="text-success"><i class="fas fa-check-circle me-1"></i>All students have a class assigned!</p>
            {% endif %}
            <a href="{% url 'students:student_list' %}" class="btn btn-outline-secondary btn-sm">Clear filters</a>
        </div>
        {% endfor %}
    </div>

    <!-- ── TABLE VIEW ── -->
    <div id="tableView" style="display:none">
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0" style="font-size:.85rem">
                    <thead style="background:#fafafa">
                        <tr>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">
                                <a class="sort-link" href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if current_sort == 'id' %}-id{% else %}id{% endif %}">
                                    ID {% if current_sort == 'id' %}<i class="fas fa-sort-up"></i>{% elif current_sort == '-id' %}<i class="fas fa-sort-down"></i>{% endif %}
                                </a>
                            </th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">Photo</th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">
                                <a class="sort-link" href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if current_sort == 'name' %}-name{% else %}name{% endif %}">
                                    Name {% if current_sort == 'name' %}<i class="fas fa-sort-up"></i>{% elif current_sort == '-name' %}<i class="fas fa-sort-down"></i>{% endif %}
                                </a>
                            </th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">
                                <a class="sort-link" href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if current_sort == 'class' %}-class{% else %}class{% endif %}">
                                    Class {% if current_sort == 'class' %}<i class="fas fa-sort-up"></i>{% elif current_sort == '-class' %}<i class="fas fa-sort-down"></i>{% endif %}
                                </a>
                            </th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">Gender</th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">
                                <a class="sort-link" href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if current_sort == 'age' %}-age{% else %}age{% endif %}">
                                    DOB / Age {% if current_sort == 'age' %}<i class="fas fa-sort-up"></i>{% elif current_sort == '-age' %}<i class="fas fa-sort-down"></i>{% endif %}
                                </a>
                            </th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">Phone</th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">
                                <a class="sort-link" href="?{% if query_string %}{{ query_string }}&{% endif %}sort={% if current_sort == 'admitted' %}-admitted{% else %}admitted{% endif %}">
                                    Admitted {% if current_sort == 'admitted' %}<i class="fas fa-sort-up"></i>{% elif current_sort == '-admitted' %}<i class="fas fa-sort-down"></i>{% endif %}
                                </a>
                            </th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">Status</th>
                            <th style="font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#888">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student in students %}
                        <tr {% if not student.current_class %}style="background:#fff9f9"{% endif %}>
                            <td style="font-family:monospace;font-size:.78rem;color:#888">{{ student.student_id }}</td>
                            <td>
                                <div class="student-avatar avatar-sm">
                                    {{ student.first_name|first|upper }}{{ student.last_name|first|upper }}
                                </div>
                            </td>
                            <td><strong>{{ student.first_name }} {{ student.last_name }}</strong></td>
                            <td>
                                {% if student.current_class %}
                                {{ student.current_class.name }}
                                {% else %}
                                <span class="no-class-badge"><i class="fas fa-exclamation-triangle me-1"></i>None</span>
                                {% endif %}
                            </td>
                            <td>{{ student.get_gender_display|default:"—" }}</td>
                            <td>
                                {{ student.date_of_birth|date:"d M Y"|default:"—" }}
                                {% if student.get_age %}<span class="text-muted">({{ student.get_age }})</span>{% endif %}
                            </td>
                            <td>{{ student.phone_number|default:"—" }}</td>
                            <td>{{ student.admission_date|date:"d M Y"|default:"—" }}</td>
                            <td><span class="status-badge status-{{ student.status }}">{{ student.get_status_display|default:"Active" }}</span></td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{% url 'students:student_detail' student.pk %}" class="btn btn-sm btn-outline-primary" title="View"><i class="fas fa-eye"></i></a>
                                    <a href="{% url 'students:student_edit' student.pk %}" class="btn btn-sm btn-outline-warning" title="Edit"><i class="fas fa-edit"></i></a>
                                    <a href="{% url 'finance:payment_add' %}?student_id={{ student.pk }}" class="btn btn-sm btn-success" title="Record Payment"><i class="fas fa-dollar-sign"></i></a>
                                    <a href="{% url 'finance:invoice_list' %}?student={{ student.pk }}" class="btn btn-sm btn-outline-info" title="View Invoices"><i class="fas fa-file-invoice-dollar"></i></a>
                                    <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                            data-bs-target="#del{{ student.pk }}" title="Delete"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center py-4 text-muted">No students found.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- ── PAGINATION ── -->
    {% if is_paginated %}
    <div class="pagination-bar">
        <div class="text-muted">
            Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ filtered_count }}
        </div>
        <div class="d-flex gap-1 flex-wrap">
            <!-- First & Prev -->
            {% if page_obj.has_previous %}
            <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page=1" title="First">«</a>
            <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.previous_page_number }}">‹ Prev</a>
            {% else %}
            <span class="page-btn disabled">«</span>
            <span class="page-btn disabled">‹ Prev</span>
            {% endif %}

            <!-- Page numbers — show window of 5 around current -->
            {% for num in page_obj.paginator.page_range %}
                {% if num == 1 or num == page_obj.paginator.num_pages %}
                    {% if num == page_obj.number %}
                    <span class="page-btn active">{{ num }}</span>
                    {% else %}
                    <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}">{{ num }}</a>
                    {% endif %}
                {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                    {% if num == page_obj.number %}
                    <span class="page-btn active">{{ num }}</span>
                    {% else %}
                    <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}">{{ num }}</a>
                    {% endif %}
                {% elif num == page_obj.number|add:'-3' or num == page_obj.number|add:'3' %}
                <span class="page-btn disabled" style="border:none;background:none">…</span>
                {% endif %}
            {% endfor %}

            <!-- Next & Last -->
            {% if page_obj.has_next %}
            <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.next_page_number }}">Next ›</a>
            <a class="page-btn" href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.paginator.num_pages }}" title="Last">»</a>
            {% else %}
            <span class="page-btn disabled">Next ›</span>
            <span class="page-btn disabled">»</span>
            {% endif %}
        </div>
        <div class="text-muted">
            Page {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const gridView  = document.getElementById('gridView');
    const tableView = document.getElementById('tableView');
    const gridBtn   = document.getElementById('gridViewBtn');
    const tableBtn  = document.getElementById('tableViewBtn');

    function showGrid() {
        gridView.style.display  = '';
        tableView.style.display = 'none';
        gridBtn.classList.add('active');
        tableBtn.classList.remove('active');
        localStorage.setItem('studentView', 'grid');
    }
    function showTable() {
        gridView.style.display  = 'none';
        tableView.style.display = 'block';
        tableBtn.classList.add('active');
        gridBtn.classList.remove('active');
        localStorage.setItem('studentView', 'table');
    }

    gridBtn.addEventListener('click', showGrid);
    tableBtn.addEventListener('click', showTable);

    // Restore saved preference
    if (localStorage.getItem('studentView') === 'table') showTable();

    // Auto-dismiss alerts
    setTimeout(function () {
        document.querySelectorAll('.alert').forEach(function (el) {
            el.style.transition = 'opacity 1s';
            el.style.opacity = '0';
            setTimeout(() => el.remove(), 1000);
        });
    }, 5000);
});
</script>
{% endblock %}