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

{% block title %}编辑学生 - {{ student.name }} - 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-edit me-2"></i>编辑学生信息
        </h1>
        <div>
            <a href="{{ url_for('admin.student_detail', student_number=student.student_number) }}"
               class="btn btn-outline-info me-2">
                <i class="fas fa-eye me-1"></i>查看详情
            </a>
            <a href="{{ url_for('admin.student_list') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>
    </div>

    <!-- 编辑学生表单 -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>学生基本信息
                    </h6>
                    <span class="badge bg-secondary">学号: {{ student.student_number }}</span>
                </div>
                <div class="card-body">
                    <form id="editStudentForm" method="POST">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学号</label>
                                    <input type="text" class="form-control" name="student_number"
                                           value="{{ student.student_number }}" readonly
                                           style="background-color: #f8f9fa;">
                                    <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
                                           value="{{ student.name }}" 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="男" {% if student.gender == '男' %}selected{% endif %}>男</option>
                                        <option value="女" {% if student.gender == '女' %}selected{% endif %}>女</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" value="{{ student.grade }}" 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}" value="{{ student.phone or '' }}" 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"
                                           value="{{ student.college or '' }}" 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"
                                           value="{{ student.major or '' }}" 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"
                                           value="{{ student.supervisor or '' }}" 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="专硕" {% if student.degree_type == '专硕' %}selected{% endif %}>专硕</option>
                                        <option value="学硕" {% if student.degree_type == '学硕' %}selected{% endif %}>学硕</option>
                                        <option value="学博" {% if student.degree_type == '学博' %}selected{% endif %}>学博</option>
                                        <option value="专博" {% if student.degree_type == '专博' %}selected{% endif %}>专博</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"
                                           value="{{ student.enrollment_date.strftime('%Y-%m-%d') if student.enrollment_date else '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">状态</label>
                                    <select class="form-select" name="status">
                                        <option value="在读" {% if student.status == '在读' %}selected{% endif %}>在读</option>
                                        <option value="毕业" {% if student.status == '毕业' %}selected{% endif %}>毕业</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="button" class="btn btn-warning" onclick="resetPassword()">
                                    <i class="fas fa-key me-1"></i>重置密码
                                </button>
                                {% if student.user %}
                                <button type="button" class="btn btn-outline-secondary ms-2" onclick="toggleAccountStatus()">
                                    {% if student.user.is_active %}
                                    <i class="fas fa-ban me-1"></i>禁用账户
                                    {% else %}
                                    <i class="fas fa-check me-1"></i>启用账户
                                    {% endif %}
                                </button>
                                {% endif %}
                            </div>
                            <div class="d-flex 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-primary">
                                    <i class="fas fa-save me-1"></i>保存修改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

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

    // 表单验证
    if (!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/{{ student.student_number }}/edit`, {
        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);

            // 滚动到顶部
            window.scrollTo(0, 0);

            // 恢复提交按钮
            setTimeout(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }, 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;
    });
});

// 重置密码
function resetPassword() {
    if (confirm('确认重置该学生的密码为默认密码(123456)吗？')) {
        fetch(`/admin/students/{{ student.student_number }}/reset_password`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                alert('密码重置成功');
            } else {
                alert(result.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}

// 切换账户状态
function toggleAccountStatus() {
    const isActive = {{ 'true' if student.user and student.user.is_active else 'false' }};
    const action = isActive ? '禁用' : '启用';

    if (confirm(`确认${action}该学生的账户吗？`)) {
        fetch(`/admin/students/{{ student.student_number }}/toggle_status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                alert(result.message);
                location.reload(); // 重新加载页面以更新按钮状态
            } else {
                alert(result.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}
</script>
{% endblock %}