<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>学生评教系统</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            background-color: #f0f2f5; /* 设置背景颜色 */
            margin: 0; /* 移除默认外边距 */
            padding: 20px; /* 设置内边距 */
        }
        h1 {
            text-align: center; /* 标题居中 */
            color: #2c3e50; /* 标题颜色 */
        }
        .container {
            max-width: 800px; /* 设置容器最大宽度 */
            margin: 0 auto; /* 居中对齐 */
            background: white; /* 背景颜色 */
            padding: 20px; /* 内边距 */
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
            text-align: center; /* 文本居中对齐 */
        }vv
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px; /* 表单组之间的间距 */
            text-align: center; /* 表单组内容居中对齐 */
        }
        form {
            display: flex; /* 使用弹性布局 */
            flex-direction: column; /* 垂直排列 */
            gap: 15px; /* 表单元素间距 */
            align-items: center; /* 垂直居中对齐 */
        }
        label {
            font-weight: bold; /* 加粗标签文本 */
            color: #34495e; /* 标签颜色 */
            margin-bottom: 5px; /* 标签与下拉框之间的间距 */
        }
        select {
            padding: 8px; /* 内边距 */
            border: 1px solid #bdc3c7; /* 边框样式 */
            border-radius: 4px; /* 圆角 */
            outline: none; /* 取消默认焦点样式 */
            appearance: none; /* 取消默认箭头样式 */
            background-color: white; /* 背景颜色 */
            background-image: url('<url id="cum5gspic4u9hucljb80" type="url" status="failed" title="" wc="0">https://cdn.jsdelivr.net/gh/a854451261/cdn/icon/select-arrow.svg</url> '); /* 自定义箭头样式 */
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-position: right 8px center; /* 背景图片位置 */
            background-size: 12px 8px; /* 背景图片大小 */
            text-align: center; /* 文本居中对齐 */
            cursor: pointer; /* 鼠标悬停时显示手指图标 */
            width: calc(100% - 16px); /* 宽度自适应 */
        }
        button {
            background: linear-gradient(#3498db, #2980b9); /* 按钮渐变背景 */
            color: white; /* 文本颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 移除边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停时显示手指图标 */
            transition: background 0.3s; /* 背景过渡效果 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
        }
        button:hover {
            background: linear-gradient(#2980b9, #3498db); /* 鼠标悬停时的渐变背景 */
        }
        /* 提示语 */
        .hint {
            color: #7f8c8d; /* 提示文本颜色 */
            font-size: 0.9em; /* 字体大小 */
            margin-top: 10px; /* 提示与表单之间的间距 */
        }
    </style>
    <script>
        // 动态加载老师和课程
        function loadTeachers(college) {
            const teachersSelect = document.getElementById("teacher"); // 获取老师下拉框
            const courseSelect = document.getElementById("course"); // 获取课程下拉框

            if (college) {
                fetch(`loadTeachers.jsp?college=${college}`) // 请求加载老师数据
                    .then(response => response.json()) // 解析JSON数据
                    .then(data => {
                        populateSelect(teachersSelect, data, "--请选择老师--"); // 填充老师数据
                    })
                    .catch(error => {
                        console.error("加载老师失败：", error); // 捕获错误
                    });
            } else {
                teachersSelect.innerHTML = "<option value=''>--请选择老师--</option>"; // 清空老师下拉框
                courseSelect.innerHTML = "<option value=''>--请选择课程--</option>"; // 清空课程下拉框
            }
        }

        function loadCourses(teacher) {
            const courseSelect = document.getElementById("course"); // 获取课程下拉框

            if (teacher) {
                fetch(`loadCourses.jsp?teacher=${teacher}`) // 请求加载课程数据
                    .then(response => response.json()) // 解析JSON数据
                    .then(data => {
                        populateSelect(courseSelect, data, "--请选择课程--"); // 填充课程数据
                    })
                    .catch(error => {
                        console.error("加载课程失败：", error); // 捕获错误
                    });
            } else {
                courseSelect.innerHTML = "<option value=''>--请选择课程--</option>"; // 清空课程下拉框
            }
        }
        function loadC(teacher) {
            const courseSelect = document.getElementById("course"); // 获取课程下拉框

            if (teacher) {
                fetch(`loadCourses.jsp?teacher=${teacher}`) // 请求加载课程数据
                    .then(response => response.json()) // 解析JSON数据
                    .then(data => {
                        populateSelect(courseSelect, data, "--请选择课程--"); // 填充课程数据
                    })
                    .catch(error => {
                        console.error("加载课程失败：", error); // 捕获错误
                    });
            } else {
                courseSelect.innerHTML = "<option value=''>--请选择课程--</option>"; // 清空课程下拉框
            }
        }

        function populateSelect(selectElement, data, placeholder) {
            selectElement.innerHTML = ""; // 清空下拉框
            const defaultOption = document.createElement("option"); // 创建默认选项
            defaultOption.value = ""; // 默认选项值
            defaultOption.text = placeholder; // 默认选项文本
            selectElement.appendChild(defaultOption); // 添加默认选项

            data.forEach(item => { // 遍历并填充数据
                const option = document.createElement("option");
                option.value = item.value || item.course_id; // 设置选项值
                option.text = item.text || item.course_name; // 设置选项文本
                selectElement.appendChild(option); // 添加选项
            });
        }
    </script>
</head>
<body>
<div class="container">
    <h1>学生评教系统</h1>
    <form id="evaluationForm" action="evaluationPage.jsp" method="get">
        <div class="form-group">
            <label for="college">选择学院:</label> <!-- 学院标签 -->
            <select id="college" name="college" onchange="loadTeachers(this.value)"> <!-- 学院下拉框 -->
                <option value="">--请选择学院--</option> <!-- 默认选项 -->
                <option value="信息工程学院">信息工程学院</option> <!-- 学院选项 -->
                <option value="智能工学院">智能工学院</option> <!-- 学院选项 -->
                <option value="物理学院">物理学院</option> <!-- 学院选项 -->
            </select>
        </div>
        <div class="form-group">
            <label for="teacher">选择老师:</label> <!-- 老师标签 -->
            <select id="teacher" name="teacher" onchange="loadCourses(this.value)"> <!-- 老师下拉框 -->
                <option value="">--请选择老师--</option> <!-- 默认选项 -->
            </select>
        </div>
        <div class="form-group">
            <label for="course">选择课程:</label> <!-- 课程标签 -->
            <select id="course" name="course"> <!-- 课程下拉框 -->
                <option value="">--请选择课程--</option> <!-- 默认选项 -->
            </select>
        </div>
        <button type="submit">进入评教页面</button> <!-- 提交按钮 -->
    </form>
    <div class="hint">请选择学院、老师以及课程，然后进入评教页面。</div> <!-- 提示语 -->
</div>
</body>
</html>