{% extends "base.html" %}

{% block title %}My Courses | Student Portal{% endblock %}
{% block nav_courses_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-book me-2"></i>My Courses</h2>
        <p class="text-muted mb-0">
            {% if enrollment %}
                {{ enrollment.program.name }}
                <span class="badge bg-secondary ms-1">{{ enrollment.program.get_level_display }}</span>
            {% endif %}
        </p>
    </div>
</div>

{% if content_locked %}
<div class="alert alert-warning d-flex align-items-center gap-3 mb-4" role="alert">
    <i class="fa-solid fa-lock fa-lg flex-shrink-0"></i>
    <div>
        <strong>Content is locked.</strong>
        You can see your courses below, but you cannot access materials, quizzes, or assignments
        until you pay at least <strong>{{ enrollment.program.content_access_percentage }}%</strong> of your program fees.
        <a href="{% url 'portal:student_payments' %}" class="alert-link ms-1">Pay now &rarr;</a>
    </div>
</div>
{% endif %}

<!-- Search bar -->
<form method="get" class="mb-4">
    <div class="input-group" style="max-width:380px;">
        <span class="input-group-text bg-white"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
        <input type="text" name="q" value="{{ search_query }}"
               class="form-control" placeholder="Search by name, code…"
               autocomplete="off">
        {% if search_query %}
        <a href="?" class="btn btn-outline-secondary" title="Clear search">
            <i class="fa-solid fa-xmark"></i>
        </a>
        {% else %}
        <button type="submit" class="btn btn-outline-primary">Search</button>
        {% endif %}
    </div>
</form>

{% if courses_by_year %}
<div class="accordion" id="yearsAccordion">
    {% for year, courses in courses_by_year.items %}
    <div class="accordion-item mb-3 border rounded overflow-hidden">
        <h2 class="accordion-header" id="yearHeading{{ year }}">
            <button class="accordion-button fw-bold{% if not search_query and not forloop.first %} collapsed{% endif %}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#yearCollapse{{ year }}"
                    aria-expanded="{% if search_query or forloop.first %}true{% else %}false{% endif %}"
                    aria-controls="yearCollapse{{ year }}" style="color: var(--color-primary);">
                <i class="fa-solid fa-calendar-days me-2"></i>Year {{ year }}
                <span class="text-muted fw-normal small ms-2">{{ courses|length }} subject{{ courses|length|pluralize }}</span>
            </button>
        </h2>
        <div id="yearCollapse{{ year }}"
             class="accordion-collapse collapse{% if search_query or forloop.first %} show{% endif %}"
             aria-labelledby="yearHeading{{ year }}" data-bs-parent="#yearsAccordion">
            <div class="accordion-body bg-light">
                <div class="accordion" id="yearAccordion{{ year }}">
                    {% for course in courses %}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading{{ course.pk }}">
                            <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#course{{ course.pk }}"
                                    aria-expanded="false" aria-controls="course{{ course.pk }}">
                                <span class="fw-semibold">{{ course.name }}</span>
                                {% if course.code %}
                                <span class="badge bg-light text-dark border font-monospace ms-2">{{ course.code }}</span>
                                {% endif %}
                            </button>
                        </h2>
                        <div id="course{{ course.pk }}"
                             class="accordion-collapse collapse"
                             aria-labelledby="heading{{ course.pk }}"
                             data-bs-parent="#yearAccordion{{ year }}">
                            <div class="accordion-body">
                                {% if course.description %}
                                <p class="text-muted mb-3">{{ course.description }}</p>
                                {% else %}
                                <p class="text-muted small fst-italic mb-3">No description provided for this course.</p>
                                {% endif %}
                                <a href="{% url 'content:student_course_detail' course_pk=course.pk %}"
                                   class="btn btn-sm btn-primary">
                                    <i class="fa-solid fa-play me-1"></i> Open Course
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% elif enrollment %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-book-open fa-2x mb-3 d-block"></i>
        {% if search_query %}
        <h5>No courses match <strong>"{{ search_query }}"</strong></h5>
        <a href="?" class="btn btn-sm btn-outline-secondary mt-2">
            <i class="fa-solid fa-xmark me-1"></i> Clear Search
        </a>
        {% else %}
        <h5>No courses assigned yet</h5>
        <p class="small mb-0">Your program's curriculum is being set up. Check back soon or contact the admin.</p>
        {% endif %}
    </div>
</div>

{% else %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-circle-exclamation fa-2x mb-3 d-block" style="color:var(--color-secondary);"></i>
        <h5>No active enrollment found</h5>
        <p class="small mb-0">Please contact administration if you believe this is an error.</p>
    </div>
</div>
{% endif %}

{% endblock %}