{% extends 'base.html' %}
{% block title %}课程管理 - 学生选课系统{% endblock %}
{% block content %}
<h2>课程管理</h2>
<div class="add-course">
    <h3>新增课程</h3>
    <form id="addCourseForm">
        <label for="course_code">课程代码:</label>
        <input type="text" id="course_code" name="course_code" required maxlength="20">

        <label for="name">课程名称:</label>
        <input type="text" id="name" name="name" required maxlength="100">

        <label for="description">课程描述:</label>
        <textarea id="description" name="description"></textarea>

        <label for="credits">学分:</label>
        <input type="number" id="credits" name="credits" required min="0">

        <label for="teacher">授课教师:</label>
        <input type="text" id="teacher" name="teacher" maxlength="100">

        <label for="capacity">容量:</label>
        <input type="number" id="capacity" name="capacity" required min="1">

        <button type="submit">新增课程</button>
    </form>
</div>

<h3>课程列表</h3>
<table class="course-table">
    <thead>
        <tr>
            <th>课程代码</th>
            <th>课程名称</th>
            <th>描述</th>
            <th>学分</th>
            <th>教师</th>
            <th>容量</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="adminCourseList">
        <!-- 动态填充 -->
    </tbody>
</table>

<!-- 编辑弹窗 -->
<div id="editModal" class="modal" style="display:none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>编辑课程</h3>
        <form id="editCourseForm">
            <input type="hidden" id="edit_course_id">
            <label for="edit_name">课程名称:</label>
            <input type="text" id="edit_name" name="name" required maxlength="100">

            <label for="edit_description">课程描述:</label>
            <textarea id="edit_description" name="description"></textarea>

            <label for="edit_credits">学分:</label>
            <input type="number" id="edit_credits" name="credits" required min="0">

            <label for="edit_teacher">授课教师:</label>
            <input type="text" id="edit_teacher" name="teacher" maxlength="100">

            <label for="edit_capacity">容量:</label>
            <input type="number" id="edit_capacity" name="capacity" required min="1">

            <button type="submit">保存修改</button>
        </form>
    </div>
</div>

<script>
async function loadAdminCourses() {
    try {
        const response = await axios.get('/api/courses');
        const courses = response.data;
        const tbody = document.getElementById('adminCourseList');
        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>
                    <button class="edit-btn" data-id="${c.id}">编辑</button>
                    <button class="delete-btn" data-id="${c.id}">删除</button>
                </td>
            `;
            tbody.appendChild(tr);
        });

        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', openEditModal);
        });

        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', async function() {
                const courseId = this.getAttribute('data-id');
                if (!confirm('确认删除该课程？')) return;
                try {
                    const res = await axios.delete(`/api/courses/${courseId}`);
                    alert(res.data.message);
                    if (res.data.success) {
                        loadAdminCourses();
                    }
                } catch (e) {
                    alert('删除失败');
                }
            });
        });
    } catch (e) {
        alert('加载课程失败');
    }
}

// 新增课程
document.getElementById('addCourseForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const course_code = e.target.course_code.value.trim();
    const name = e.target.name.value.trim();
    const description = e.target.description.value.trim();
    const credits = parseInt(e.target.credits.value);
    const teacher = e.target.teacher.value.trim();
    const capacity = parseInt(e.target.capacity.value);

    if (!course_code || !name || isNaN(credits) || isNaN(capacity)) {
        alert('请填写完整且正确的课程信息');
        return;
    }

    try {
        const res = await axios.post('/api/courses', { course_code, name, description, credits, teacher, capacity });
        alert(res.data.message);
        if (res.data.success) {
            e.target.reset();
            loadAdminCourses();
        }
    } catch (e) {
        alert('新增课程失败');
    }
});

// 编辑弹窗逻辑
const modal = document.getElementById('editModal');
const spanClose = modal.querySelector('.close');
spanClose.onclick = () => { modal.style.display = 'none'; };
window.onclick = (event) => { if (event.target == modal) modal.style.display = 'none'; };

async function openEditModal(e) {
    const courseId = e.target.getAttribute('data-id');
    try {
        const res = await axios.get('/api/courses');
        const course = res.data.find(c => c.id == courseId);
        if (!course) {
            alert('课程不存在');
            return;
        }
        document.getElementById('edit_course_id').value = course.id;
        document.getElementById('edit_name').value = course.name;
        document.getElementById('edit_description').value = course.description || '';
        document.getElementById('edit_credits').value = course.credits;
        document.getElementById('edit_teacher').value = course.teacher || '';
        document.getElementById('edit_capacity').value = course.capacity;
        modal.style.display = 'block';
    } catch (e) {
        alert('加载课程信息失败');
    }
}

// 保存编辑
document.getElementById('editCourseForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const courseId = document.getElementById('edit_course_id').value;
    const name = document.getElementById('edit_name').value.trim();
    const description = document.getElementById('edit_description').value.trim();
    const credits = parseInt(document.getElementById('edit_credits').value);
    const teacher = document.getElementById('edit_teacher').value.trim();
    const capacity = parseInt(document.getElementById('edit_capacity').value);

    if (!name || isNaN(credits) || isNaN(capacity)) {
        alert('请填写完整且正确的课程信息');
        return;
    }

    try {
        const res = await axios.put(`/api/courses/${courseId}`, { name, description, credits, teacher, capacity });
        alert(res.data.message);
        if (res.data.success) {
            modal.style.display = 'none';
            loadAdminCourses();
        }
    } catch (e) {
        alert('更新课程失败');
    }
});

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