{% extends "base.html" %}

{% block title %}Courses | Admin Portal{% endblock %}
{% block nav_courses %}active{% endblock %}

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

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Courses</h1>
            <p class="text-muted mb-0">Manage subjects and units for each program.</p>
        </div>
        <a href="{% url 'portal:course_add' %}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Add Course
        </a>
    </div>

    <!-- Filter bar: search + program -->
    <form method="get" class="mb-4 d-flex gap-2 align-items-center flex-wrap">
        <div class="input-group" style="max-width:280px;">
            <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="?{% if current_program %}program={{ current_program }}{% endif %}"
               class="btn btn-outline-secondary" title="Clear search">
                <i class="fa-solid fa-xmark"></i>
            </a>
            {% endif %}
        </div>
        <select name="program" class="form-select" style="max-width:260px;" onchange="this.form.submit()">
            <option value="">All Programs</option>
            {% for prog in programs %}
            <option value="{{ prog.pk }}" {% if current_program == prog.pk|stringformat:"s" %}selected{% endif %}>
                {{ prog.name }} ({{ prog.get_level_display }})
            </option>
            {% endfor %}
        </select>
        {% if current_program or search_query %}
        <a href="{% url 'portal:course_list' %}" class="btn btn-outline-secondary btn-sm">Clear all</a>
        {% endif %}
        <a href="{% url 'portal:course_add' %}{% if current_program %}?program={{ current_program }}{% endif %}"
           class="btn btn-outline-primary btn-sm ms-auto">
            <i class="fa-solid fa-plus me-1"></i> Add for this program
        </a>
    </form>

    {% if courses %}
    {% regroup courses by program as by_program %}
    <div class="accordion" id="programsAccordion">
        {% for group in by_program %}
        <div class="accordion-item mb-3 border rounded overflow-hidden">
            <h2 class="accordion-header" id="progHeading{{ group.grouper.pk }}">
                <button class="accordion-button fw-bold{% if not search_query and not current_program and not forloop.first %} collapsed{% endif %}"
                        type="button" data-bs-toggle="collapse" data-bs-target="#progCollapse{{ group.grouper.pk }}"
                        aria-expanded="{% if search_query or current_program or forloop.first %}true{% else %}false{% endif %}"
                        aria-controls="progCollapse{{ group.grouper.pk }}" style="color: var(--color-primary);">
                    <i class="fa-solid fa-book-open me-2"></i>{{ group.grouper.name }}
                    <span class="badge bg-secondary ms-2 fw-normal">{{ group.grouper.get_level_display }}</span>
                    <span class="text-muted fw-normal small ms-2">{{ group.list|length }} course{{ group.list|length|pluralize }}</span>
                </button>
            </h2>
            <div id="progCollapse{{ group.grouper.pk }}"
                 class="accordion-collapse collapse{% if search_query or current_program or forloop.first %} show{% endif %}"
                 aria-labelledby="progHeading{{ group.grouper.pk }}" data-bs-parent="#programsAccordion">
                <div class="accordion-body bg-light">
                    <div class="accordion" id="courseAccordion{{ group.grouper.pk }}">
                        {% for course in group.list %}
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="courseHeading{{ 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 %}
                                    <span class="badge bg-light text-dark border ms-2">{{ course.get_year_display }}</span>
                                    {% if course.is_active %}
                                    <span class="badge bg-success ms-2">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary ms-2">Inactive</span>
                                    {% endif %}
                                </button>
                            </h2>
                            <div id="course{{ course.pk }}"
                                 class="accordion-collapse collapse"
                                 aria-labelledby="courseHeading{{ course.pk }}"
                                 data-bs-parent="#courseAccordion{{ group.grouper.pk }}">
                                <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 %}
                                    <div class="d-flex gap-2 flex-wrap">
                                        <a href="{% url 'content:course_content' course_pk=course.pk %}" class="btn btn-sm btn-outline-success">
                                            <i class="fa-solid fa-photo-film me-1"></i> Manage Content
                                        </a>
                                        <a href="{% url 'portal:course_edit' course.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="fa-solid fa-pen me-1"></i> Edit
                                        </a>
                                        <a href="{% url 'portal:course_delete' course.pk %}" class="btn btn-sm btn-outline-danger">
                                            <i class="fa-solid fa-trash me-1"></i> Delete
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if is_paginated %}
    <nav class="mt-3">
        <ul class="pagination justify-content-center mb-0">
            {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if current_program %}&program={{ current_program }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Previous</a></li>
            {% endif %}
            <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ 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 }}{% if current_program %}&program={{ current_program }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    {% else %}
    <div class="card shadow-sm">
        <div class="card-body text-center py-5">
            <i class="fa-solid fa-book-open fa-3x text-muted mb-3"></i>
            {% if search_query or current_program %}
            <h5 class="text-muted">No courses match your search</h5>
            <p class="text-muted">Try different keywords or clear the filters.</p>
            <a href="{% url 'portal:course_list' %}" class="btn btn-outline-secondary mt-2">
                <i class="fa-solid fa-xmark me-1"></i> Clear Filters
            </a>
            {% else %}
            <h5 class="text-muted">No courses yet</h5>
            <p class="text-muted">Add subjects and units for each program so students can see their curriculum.</p>
            <a href="{% url 'portal:course_add' %}" class="btn btn-primary mt-2">
                <i class="fa-solid fa-plus me-1"></i> Add First Course
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div class="mt-3">
        <a href="{% url 'portal:admin_dashboard' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> Back to Dashboard
        </a>
    </div>
</div>
{% endblock %}