{% extends "base.html" %}
{% block title %}My Results{% endblock %}
{% block nav_results_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-graduation-cap me-2"></i>My Results</h2>
        {% if enrollment %}
        <p class="text-muted mb-0">{{ enrollment.program.name }} — {{ enrollment.student_number }}</p>
        {% endif %}
    </div>
    {% if enrollment and grouped_results %}
    <a href="{% url 'grades:student_transcript' %}" target="_blank" class="btn btn-outline-primary">
        <i class="fa-solid fa-print me-1"></i> Print Transcript
    </a>
    {% endif %}
</div>

{% if not enrollment %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-graduation-cap fa-2x mb-3 d-block" style="opacity:0.3;"></i>
        <p class="mb-0">You are not currently enrolled in any program.</p>
    </div>
</div>

{% elif not grouped_results %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-graduation-cap fa-2x mb-3 d-block" style="opacity:0.3;"></i>
        <p class="mb-1">No results have been recorded yet.</p>
        <p class="small">Check back after your term assessments.</p>
    </div>
</div>

{% else %}

<div class="accordion" id="resultsYearAccordion">
    {% for academic_year, terms in grouped_results.items %}
    {% with yi=forloop.counter %}
    <div class="accordion-item mb-3 border rounded overflow-hidden">
        <h2 class="accordion-header" id="resYearHead{{ yi }}">
            <button class="accordion-button fw-bold{% if not forloop.first %} collapsed{% endif %}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#resYear{{ yi }}"
                    aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                    aria-controls="resYear{{ yi }}" style="color: var(--color-primary);">
                <i class="fa-solid fa-calendar me-2"></i>Academic Year {{ academic_year }}
            </button>
        </h2>
        <div id="resYear{{ yi }}" class="accordion-collapse collapse{% if forloop.first %} show{% endif %}"
             aria-labelledby="resYearHead{{ yi }}" data-bs-parent="#resultsYearAccordion">
            <div class="accordion-body bg-light">
                <div class="accordion" id="resTermAccordion{{ yi }}">
                    {% for term_label, course_blocks in terms.items %}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="resTermHead{{ yi }}_{{ forloop.counter }}">
                            <button class="accordion-button{% if not forloop.first %} collapsed{% endif %}"
                                    type="button" data-bs-toggle="collapse"
                                    data-bs-target="#resTerm{{ yi }}_{{ forloop.counter }}"
                                    aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                                    aria-controls="resTerm{{ yi }}_{{ forloop.counter }}">
                                <span class="fw-semibold text-uppercase">{{ term_label }}</span>
                                <span class="badge bg-secondary ms-2">{{ course_blocks|length }} course{{ course_blocks|length|pluralize }}</span>
                            </button>
                        </h2>
                        <div id="resTerm{{ yi }}_{{ forloop.counter }}"
                             class="accordion-collapse collapse{% if forloop.first %} show{% endif %}"
                             data-bs-parent="#resTermAccordion{{ yi }}">
                            <div class="accordion-body">
                                {% for block in course_blocks %}
                                <div class="mb-3 pb-2 {% if not forloop.last %}border-bottom{% endif %}">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                        <span class="fw-semibold">{{ block.course.name }}</span>
                                        {% if block.final %}
                                        <span class="d-inline-flex align-items-center gap-2">
                                            <span class="text-muted small text-uppercase">Final Grade</span>
                                            <span class="badge bg-{{ block.final.color }} fs-6 px-3">{{ block.final.grade }}</span>
                                            <span class="text-muted small">{{ block.final.marks }}%</span>
                                        </span>
                                        {% endif %}
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Assessment</th>
                                                    <th class="text-center">Grade</th>
                                                    <th class="text-center">Marks</th>
                                                    <th>Notes</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for result in block.results %}
                                                <tr>
                                                    <td class="small text-muted">{{ result.get_grade_type_display }}</td>
                                                    <td class="text-center">
                                                        <span class="badge bg-{{ result.grade_color }} px-3">{{ result.grade }}</span>
                                                    </td>
                                                    <td class="text-center small">
                                                        {% if result.marks is not None %}{{ result.marks }}/100{% else %}—{% endif %}
                                                    </td>
                                                    <td class="small text-muted">{{ result.notes|default:"—" }}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endwith %}
    {% endfor %}
</div>

<div class="portal-card">
    <div class="portal-card-body py-2">
        <p class="small text-muted mb-0">
            <i class="fa-solid fa-circle-info me-1"></i>
            <strong>Grade Key:</strong>
            <span class="badge bg-success ms-1">A</span> Distinction (80–100%) &nbsp;
            <span class="badge bg-primary">B</span> Credit (65–79%) &nbsp;
            <span class="badge bg-info text-dark">C</span> Pass (50–64%) &nbsp;
            <span class="badge bg-warning text-dark">D</span> Partial Pass (40–49%) &nbsp;
            <span class="badge bg-danger">F</span> Fail (0–39%)
        </p>
        <p class="small text-muted mb-0 mt-2">
            <i class="fa-solid fa-scale-balanced me-1"></i>
            <strong>Final Grade</strong> is weighted: Theory 30% + Practical 40% + End-of-Term Exam 30%
            (re-weighted automatically when a component has not yet been recorded).
        </p>
    </div>
</div>

{% endif %}
{% endblock %}