{% extends 'base.html' %}
{% block title %}我的选课 - 学生选课系统{% endblock %}
{% block content %}
<h2>我的选课</h2>
<table class="course-table">
    <thead>
        <tr>
            <th>课程代码</th>
            <th>课程名称</th>
            <th>教师</th>
            <th>选课时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="myCourseList">
        <!-- 动态填充 -->
    </tbody>
</table>
<script>
async function loadMyCourses() {
    try {
        // 获取当前用户ID
        const userId = {{ current_user.id }};
        const response = await axios.get(`/api/grades/${userId}`);
        const courses = response.data;

        // 需要获取enrollment_id和选课时间，故调用后端接口获取enrollments
        const enrollmentsRes = await axios.get('/api/enrollments_list');
        const enrollments = enrollmentsRes.data;

        const tbody = document.getElementById('myCourseList');
        tbody.innerHTML = '';

        enrollments.forEach(e => {
            if (e.status === 'enrolled') {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${e.course.course_code}</td>
                    <td>${e.course.name}</td>
                    <td>${e.course.teacher || ''}</td>
                    <td>${new Date(e.enroll_date).toLocaleString()}</td>
                    <td><button class="drop-btn" data-id="${e.id}">退课</button></td>
                `;
                tbody.appendChild(tr);
            }
        });

        document.querySelectorAll('.drop-btn').forEach(btn => {
            btn.addEventListener('click', async function() {
                const enrollmentId = this.getAttribute('data-id');
                if (!confirm('确认退课？')) return;
                try {
                    const res = await axios.delete(`/api/enrollments/${enrollmentId}`);
                    alert(res.data.message);
                    if (res.data.success) {
                        loadMyCourses();
                    }
                } catch (e) {
                    alert('退课失败');
                }
            });
        });
    } catch (e) {
        alert('加载我的选课失败');
    }
}

window.addEventListener('load', loadMyCourses);
</script>
{% endblock %}