{% extends 'layout/base.html' %}

{% block title %}添加学生 - CHM考勤管理系统{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="fas fa-user-plus me-2"></i>添加学生
        </h1>
        <a href="{{ url_for('admin.student_list') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>返回学生列表
        </a>
    </div>

    <!-- 添加学生表单 -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>学生基本信息
                    </h6>
                </div>
                <div class="card-body">
                    <form id="addStudentForm" method="POST">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学号 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="student_number" required
                                           placeholder="请输入学号">
                                    <div class="form-text">学号将作为登录账号使用</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">姓名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" required
                                           placeholder="请输入姓名">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">性别 <span class="text-danger">*</span></label>
                                    <select class="form-select" name="gender" required>
                                        <option value="">请选择性别</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">年级 <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="grade" required
                                           min="2020" max="2030" placeholder="如：2023">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">手机号</label>
                                    <input type="tel" class="form-control" name="phone" maxlength="11"
                                           pattern="1[3-9]\d{9}" placeholder="请输入11位手机号">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学院</label>
                                    <input type="text" class="form-control" name="college"
                                           placeholder="请输入学院名称">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">专业</label>
                                    <input type="text" class="form-control" name="major"
                                           placeholder="请输入专业名称">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">导师</label>
                                    <input type="text" class="form-control" name="supervisor"
                                           placeholder="请输入导师姓名">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学位类型</label>
                                    <select class="form-select" name="degree_type">
                                        <option value="">请选择学位类型</option>
                                        <option value="专硕">专硕</option>
                                        <option value="学硕">学硕</option>
                                        <option value="学博">学博</option>
                                        <option value="专博">专博</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">入学日期</label>
                                    <input type="date" class="form-control" name="enrollment_date">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">状态</label>
                                    <select class="form-select" name="status">
                                        <option value="在读" selected>在读</option>
                                        <option value="毕业">毕业</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">初始密码</label>
                                    <input type="password" class="form-control" name="password"
                                           placeholder="默认为123456" value="123456">
                                    <div class="form-text">学生可在登录后自行修改密码</div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ url_for('admin.student_list') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>取消
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save me-1"></i>保存学生信息
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('addStudentForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData);

    // 表单验证
    if (!data.student_number || !data.name || !data.gender || !data.grade) {
        alert('请填写所有必填项');
        return;
    }

    // 验证手机号格式
    if (data.phone && !/^1[3-9]\d{9}$/.test(data.phone)) {
        alert('手机号格式不正确');
        return;
    }

    // 禁用提交按钮
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>保存中...';

    fetch('/admin/students/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // 显示成功消息
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show';
            alertDiv.innerHTML = `
                <i class="fas fa-check-circle me-2"></i>${result.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            // 插入到表单前面
            const card = document.querySelector('.card-body');
            card.insertBefore(alertDiv, card.firstChild);

            // 3秒后跳转到学生列表
            setTimeout(() => {
                window.location.href = '/admin/students';
            }, 2000);
        } else {
            // 显示错误消息
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>${result.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            const card = document.querySelector('.card-body');
            card.insertBefore(alertDiv, card.firstChild);

            // 恢复提交按钮
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('网络错误，请稍后重试');

        // 恢复提交按钮
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    });
});

// 学号输入框失焦时检查是否已存在
document.querySelector('input[name="student_number"]').addEventListener('blur', function() {
    const studentNumber = this.value.trim();
    if (studentNumber) {
        // 这里可以添加AJAX检查学号是否已存在的逻辑
        // 为了简化，暂时不实现
    }
});
</script>
{% endblock %}