<!DOCTYPE html>
<html>

<head>
    <title>Academic Course Planner</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>

    <h1>Academic Course Planner</h1>

    <a href="/schedule">View My Schedule</a>
    <br>

    <p>
        Welcome, {{ current_user.username }} |
        <a href="{{ url_for('logout') }}">Logout</a>
    </p>

    <hr>


    <h3>Your GPA: {{ gpa }}</h3>

    <h3>Degree Progress</h3>
    <p>
        Credits Completed: {{ completed_credits }} / {{ total_degree_credits }}
    </p>

    <div style="background:#ddd; width:100%; height:20px; border-radius:10px;">
        <div style="
            background:green;
            width: {{ (completed_credits / total_degree_credits) * 100 }}%;
            height:20px;
            border-radius:10px;">
        </div>
    </div>
    <hr>

    <form method="GET" action="/">
        <input type="text" name="search" placeholder="Search by course code or name">
        <button type="submit">Search</button>
    </form>


    <h3>Filter Courses</h3>

    <a href="/">All Courses</a> |
    <a href="/?category=CS">Computer Science</a> |
    <a href="/?category=Math">Math</a> |
    <a href="/?category=GEC">General Education</a>

    <hr>

    <h3>Recomended Courses</h3>


    <ul>
        {% for course in recommended_courses %}
        <li>
            <a href="#course-{{ course.code }}">
                {{ course.code }} - {{ course.name }}
            </a>
        </li>
        {% endfor %}
    </ul>

    <!-- FLASH MESSAGES -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <p style="color:blue;">
        {{ message }}
    </p>
    {% endfor %}
    {% endif %}
    {% endwith %}

    <h2>Available Courses</h2>

    {% if all_courses %}

    {% for course in all_courses %}

    <div class="course-box" id="course-{{ course.code }}">

        <strong>{{ course.code }}</strong> - {{ course.name }} <br>

        Days: {{ course.day }} <br>
        Time: {{ course.time }} <br>
        Credits: {{ course.credits }} <br>
        Semester: {{ course.semester }} <br>
        Major: {{ course.major }} <br><br>
        Prerequisite: {{ course.prerequisite if course.prerequisite else "None" }} <br>

        <form action="{{ url_for('add_course', course_id=course.id) }}" method="POST">

            <label>Select Semester:</label>

            <select name="semester">

                {% if course.semester == "Fall" %}
                <option value="Fall2026">Fall 2026</option>
                <option value="Fall2027">Fall 2027</option>
                <option value="Fall2028">Fall 2028</option>
                <option value="Fall2029">Fall 2029</option>
                {% elif course.semester == "Spring" %}
                <option value="Spring2027">Spring 2027</option>
                <option value="Spring2028">Spring 2028</option>
                <option value="Spring2029">Spring 2029</option>
                <option value="Spring2030">Spring 2030</option>
                {% endif %}

            </select>

            <br><br>

            <button type="submit">Add Course</button>

        </form>

    </div>

    <hr>

    <br>

    {% endfor %}

    {% else %}

    <p>No courses available.</p>

    {% endif %}

</body>

</html>