{% extends "base.html" %}

{% block title %}个人信息 - FlashExam{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-person-circle"></i>
            个人信息
        </h1>
        <p class="text-muted">查看和编辑个人资料</p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- 基本信息卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-person-fill"></i>
                    基本信息
                </h5>
            </div>
            <div class="card-body">
                <form id="profileForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="studentId" class="form-label">学号</label>
                            <input type="text" class="form-control" id="studentId" 
                                   value="{{ current_user.username }}" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentName" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="studentName" 
                                   value="{{ student_info.get('name', '') }}" readonly>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="college" class="form-label">学院</label>
                            <input type="text" class="form-control" id="college" 
                                   value="{{ student_info.get('college', '未设置') }}" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="major" class="form-label">专业</label>
                            <input type="text" class="form-control" id="major" 
                                   value="{{ student_info.get('major', '未设置') }}" readonly>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="className" class="form-label">班级</label>
                            <input type="text" class="form-control" id="className" 
                                   value="{{ student_info.get('class_name', '未设置') }}" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="gender" class="form-label">性别</label>
                            <input type="text" class="form-control" id="gender" 
                                   value="{{ student_info.get('gender', '未设置') }}" readonly>
                        </div>
                    </div>
                    
                    {% if student_info.get('notes') %}
                    <div class="mb-3">
                        <label for="notes" class="form-label">备注</label>
                        <textarea class="form-control" id="notes" rows="3" readonly>{{ student_info.get('notes', '') }}</textarea>
                    </div>
                    {% endif %}
                </form>
                
                <div class="text-muted small mt-3">
                    <i class="bi bi-info-circle"></i>
                    如需修改个人信息，请联系系统管理员
                </div>
            </div>
        </div>
        
        <!-- 密码修改卡片 -->
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="bi bi-key-fill"></i>
                    修改密码
                </h5>
            </div>
            <div class="card-body">
                <form id="passwordForm">
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label">当前密码</label>
                        <input type="password" class="form-control" id="currentPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required>
                        <div class="form-text">密码长度至少6位</div>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" required>
                    </div>
                    <button type="submit" class="btn btn-warning">
                        <i class="bi bi-check-circle"></i> 修改密码
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- 头像卡片 -->
        <div class="card mb-4">
            <div class="card-body text-center">
                <div class="mb-3">
                    {% if student_info.get('gender') == '女' %}
                        <i class="bi bi-person-circle text-danger" style="font-size: 5rem;"></i>
                    {% elif student_info.get('gender') == '男' %}
                        <i class="bi bi-person-circle text-primary" style="font-size: 5rem;"></i>
                    {% else %}
                        <i class="bi bi-person-circle text-muted" style="font-size: 5rem;"></i>
                    {% endif %}
                </div>
                <h5>{{ student_info.get('name', '学生') }}</h5>
                <p class="text-muted">{{ current_user.username }}</p>
                <button class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-camera"></i> 上传头像
                </button>
            </div>
        </div>
        
        <!-- 学习统计卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="bi bi-graph-up"></i>
                    学习统计
                </h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 mb-3">
                        <div class="h4 text-primary">0</div>
                        <small class="text-muted">参加考试</small>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="h4 text-success">0.0</div>
                        <small class="text-muted">平均分</small>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-6">
                        <div class="h4 text-warning">0</div>
                        <small class="text-muted">及格次数</small>
                    </div>
                    <div class="col-6">
                        <div class="h4 text-info">0</div>
                        <small class="text-muted">最高分</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快速操作卡片 -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning-fill"></i>
                    快速操作
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('student.exams') }}" class="btn btn-primary">
                        <i class="bi bi-pencil-square"></i> 参加考试
                    </a>
                    <a href="{{ url_for('student.results') }}" class="btn btn-outline-success">
                        <i class="bi bi-clipboard-data"></i> 查看成绩
                    </a>
                    <a href="{{ url_for('student.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-house"></i> 回到主页
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 密码修改表单提交
    $('#passwordForm').submit(function(e) {
        e.preventDefault();
        
        const currentPassword = $('#currentPassword').val();
        const newPassword = $('#newPassword').val();
        const confirmPassword = $('#confirmPassword').val();
        
        // 验证密码
        if (newPassword.length < 6) {
            alert('新密码长度至少6位');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            alert('两次输入的新密码不一致');
            return;
        }
        
        // TODO: 提交到后端
        alert('密码修改功能开发中...');
    });
    
    // 头像上传（预留功能）
    $('.btn-outline-primary').click(function() {
        alert('头像上传功能开发中...');
    });
});
</script>
{% endblock %}