{% extends "base.html" %}
{% load humanize %}
{% block title %}Enter Grades{% endblock %}
{% block nav_teacher_grades %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-chart-bar me-2"></i>Enter Grades</h2>
        <p class="text-muted mb-0">Select a course, term, and grade type to enter student grades</p>
    </div>
</div>

<!-- Filter form -->
<form method="get" class="portal-card mb-4">
    <div class="portal-card-body">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Course <span class="asteriskField">*</span></label>
                <select name="course" class="form-select form-select-sm" required>
                    <option value="">— Select course —</option>
                    {% for c in courses %}
                    <option value="{{ c.pk }}"
                        {% if current_course == c.pk|stringformat:"s" %}selected{% endif %}>
                        {{ c.program.name }} — Yr{{ c.year }} — {{ c.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold">Term</label>
                <select name="term" class="form-select form-select-sm">
                    <option value="">— Term —</option>
                    {% for val, label in term_choices %}
                    <option value="{{ val }}" {% if current_term == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold">
                    Academic Year
                    <i class="fa-regular fa-circle-question text-muted ms-1"
                       style="cursor:help;"
                       title="Use the format YYYY/YYYY, e.g. 2025/2026"></i>
                </label>
                <input type="text" name="academic_year" class="form-control form-control-sm"
                       list="academicYearOptions" autocomplete="off"
                       pattern="\d{4}/\d{4}" title="Use the format YYYY/YYYY, e.g. 2025/2026"
                       placeholder="e.g. 2025/2026" value="{{ current_academic_year }}">
                <datalist id="academicYearOptions">
                    {% for ay in academic_year_options %}
                    <option value="{{ ay }}"></option>
                    {% endfor %}
                </datalist>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold">Grade Type</label>
                <select name="grade_type" class="form-select form-select-sm">
                    {% for val, label in grade_type_choices %}
                    <option value="{{ val }}" {% if current_grade_type == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100">
                    <i class="fa-solid fa-magnifying-glass me-1"></i> Load Students
                </button>
            </div>
        </div>
    </div>
</form>

{% if selected_course %}
<!-- Grade entry grid -->
<form method="post">
    {% csrf_token %}
    <input type="hidden" name="course" value="{{ current_course }}">
    <input type="hidden" name="term" value="{{ current_term }}">
    <input type="hidden" name="academic_year" value="{{ current_academic_year }}">
    <input type="hidden" name="grade_type" value="{{ current_grade_type }}">

    <div class="portal-card">
        <div class="portal-card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="fa-solid fa-users me-2"></i>
                {{ selected_course.name }}
                <span class="badge bg-secondary ms-1">{{ current_term|title }}</span>
                <span class="badge bg-light text-dark border ms-1">{{ current_academic_year }}</span>
            </h6>
            <button type="submit" class="btn btn-success btn-sm">
                <i class="fa-solid fa-floppy-disk me-1"></i> Save All Grades
            </button>
        </div>
        <div class="portal-card-body p-0">
            {% if student_rows %}
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:40px;">#</th>
                            <th>Student</th>
                            <th>Student No.</th>
                            <th style="width:160px;">Grade</th>
                            <th style="width:100px;">Marks (/100)</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in student_rows %}
                        <tr>
                            <td class="text-muted small">{{ forloop.counter }}</td>
                            <td class="fw-semibold">{{ row.enrollment.student.get_full_name }}</td>
                            <td class="font-monospace small text-muted">{{ row.enrollment.student_number }}</td>
                            <td>
                                <select name="grade_{{ row.enrollment.pk }}"
                                        class="form-select form-select-sm grade-select"
                                        data-enr="{{ row.enrollment.pk }}">
                                    <option value="">— No grade —</option>
                                    {% for val, label in grade_choices %}
                                    <option value="{{ val }}"
                                        {% if row.result and row.result.grade == val %}selected{% endif %}>
                                        {{ val }} — {{ label|truncatechars:20 }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td>
                                <input type="number" name="marks_{{ row.enrollment.pk }}"
                                       class="form-control form-control-sm"
                                       min="0" max="100" placeholder="—"
                                       value="{{ row.result.marks|default_if_none:'' }}">
                            </td>
                            <td>
                                <input type="text" name="notes_{{ row.enrollment.pk }}"
                                       class="form-control form-control-sm"
                                       placeholder="Optional note"
                                       value="{{ row.result.notes|default:'' }}">
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="p-3 d-flex justify-content-end">
                <button type="submit" class="btn btn-success">
                    <i class="fa-solid fa-floppy-disk me-1"></i> Save All Grades
                </button>
            </div>
            {% else %}
            <div class="text-center py-5 text-muted">
                <i class="fa-solid fa-users fa-2x mb-3 d-block" style="opacity:0.3;"></i>
                <p class="mb-0">No active students enrolled in this program.</p>
            </div>
            {% endif %}
        </div>
    </div>
</form>
{% elif request.GET %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-triangle-exclamation fa-2x mb-3 d-block" style="opacity:0.4;"></i>
        <p class="mb-0">Please select a course, term, and academic year to load the grade entry grid.</p>
    </div>
</div>
{% else %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-chart-bar fa-2x mb-3 d-block" style="opacity:0.3;"></i>
        <p class="mb-1">Use the filters above to select a course and term.</p>
        <p class="small">Grades are saved per student, per course, per term and grade type.</p>
    </div>
</div>
{% endif %}
{% endblock %}