{% extends 'base.html' %}
{% block title %}课程列表 - 学生选课系统{% endblock %}
{% block content %}
<h2>课程列表</h2>
<div class="filter-bar">
    <input type="text" id="filterName" placeholder="课程名称">
    <input type="text" id="filterTeacher" placeholder="授课教师">
    <input type="number" id="filterCredits" placeholder="学分" min="0">
    <button id="btnFilter">筛选</button>
</div>
<table class="course-table">
    <thead>
        <tr>
            <th>课程代码</th>
            <th>课程名称</th>
            <th>描述</th>
            <th>学分</th>
            <th>教师</th>
            <th>容量</th>
            <th>已选人数</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="courseList">
        <!-- 动态填充 -->
    </tbody>
</table>
<script>
async function loadCourses() {
    const name = document.getElementById('filterName').value.trim();
    const teacher = document.getElementById('filterTeacher').value.trim();
    const credits = document.getElementById('filterCredits').value.trim();
    let url = '/api/courses?';
    if (name) url += `name=${encodeURIComponent(name)}&`;
    if (teacher) url += `teacher=${encodeURIComponent(teacher)}&`;
    if (credits) url += `credits=${encodeURIComponent(credits)}&`;

    try {
        const response = await axios.get(url);
        const courses = response.data;
        const tbody = document.getElementById('courseList');
        tbody.innerHTML = '';
        courses.forEach(c => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${c.course_code}</td>
                <td>${c.name}</td>
                <td>${c.description || ''}</td>
                <td>${c.credits}</td>
                <td>${c.teacher || ''}</td>
                <td>${c.capacity}</td>
                <td>${c.enrolled}</td>
                <td><button class="enroll-btn" data-id="${c.id}" ${c.enrolled >= c.capacity ? 'disabled' : ''}>选课</button></td>
            `;
            tbody.appendChild(tr);
        });

        document.querySelectorAll('.enroll-btn').forEach(btn => {
            btn.addEventListener('click', async function() {
                const courseId = this.getAttribute('data-id');
                try {
                    const res = await axios.post('/api/enrollments', { course_id: courseId });
                    alert(res.data.message);
                    if (res.data.success) {
                        loadCourses();
                    }
                } catch (e) {
                    alert('选课失败');
                }
            });
        });
    } catch (e) {
        alert('加载课程失败');
    }
}

document.getElementById('btnFilter').addEventListener('click', loadCourses);
window.addEventListener('load', loadCourses);
</script>
{% endblock %}