{% extends "exam/base.html" %}
{% block title %}管理后台 - 安全培训考试{% endblock %}
{% block content %}
<div class="header">
    <h1>⚙️ 管理后台</h1>
    <div class="sub">考试管理、成绩统计、数据导出</div>
</div>
<div class="container">
    <!-- 统计卡片 -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px;">
        <div class="card" style="text-align:center;">
            <div style="font-size:32px; color:#4a90d9; font-weight:bold;">{{ stats.exam_count }}</div>
            <div style="color:#666; font-size:14px;">考试总数</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:32px; color:#5cb85c; font-weight:bold;">{{ stats.question_count }}</div>
            <div style="color:#666; font-size:14px;">题目总数</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:32px; color:#f0ad4e; font-weight:bold;">{{ stats.bank_count }}</div>
            <div style="color:#666; font-size:14px;">题库题目</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:32px; color:#d9534f; font-weight:bold;">{{ stats.record_count }}</div>
            <div style="color:#666; font-size:14px;">考试记录</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:32px; color:#6c757d; font-weight:bold;">{{ stats.user_count }}</div>
            <div style="color:#666; font-size:14px;">考生人数</div>
        </div>
    </div>

    <!-- 考试管理 -->
    <div class="card">
        <div class="card-title">📋 考试管理</div>
        <div style="margin-bottom:16px;">
            <a href="/import-exam/" class="btn btn-primary" style="margin-right:8px;">📚 导入题库</a>
            <a href="/generate-exam/" class="btn btn-primary" style="margin-right:8px;">🎲 随机组卷</a>
            <a href="/dashboard/all-records/" class="btn btn-primary" style="margin-right:8px;">👥 考试人员管理</a>
            <a href="/admin-logout/" class="btn" style="background:#ffebee; color:#c62828;">退出登录</a>
        </div>

        <div class="card" style="margin-bottom:16px; background:#f0f7ff;">
            <div style="font-size:14px; color:#333; line-height:1.8;">
                <strong>📋 管理员操作指南：</strong><br>
                1. <strong>导入题库</strong>：上传Excel试题模板，建立题库<br>
                2. <strong>随机组卷</strong>：从题库选题，自动生成满分100分考试<br>
                3. <strong>考试人员管理</strong>：查看所有考生成绩，批量导出PDF试卷<br>
                4. 考生登录后只能在「选择考试」页面答题，无法管理题库
            </div>
        </div>

        {% if exams %}
        <table style="width:100%; border-collapse:collapse; font-size:14px;">
            <tr style="background:#f5f5f5;">
                <th style="padding:10px; border:1px solid #ddd; text-align:left;">考试名称</th>
                <th style="padding:10px; border:1px solid #ddd; text-align:center;">题目数</th>
                <th style="padding:10px; border:1px solid #ddd; text-align:center;">满分</th>
                <th style="padding:10px; border:1px solid #ddd; text-align:center;">及格线</th>
                <th style="padding:10px; border:1px solid #ddd; text-align:center;">考试次数</th>
                <th style="padding:10px; border:1px solid #ddd; text-align:center;">操作</th>
            </tr>
            {% for exam in exams %}
            <tr>
                <td style="padding:10px; border:1px solid #ddd;">
                    <strong>{{ exam.title }}</strong><br>
                    <small style="color:#999;">{{ exam.description }}</small>
                </td>
                <td style="padding:10px; border:1px solid #ddd; text-align:center;">{{ exam.question_count }}</td>
                <td style="padding:10px; border:1px solid #ddd; text-align:center;">{{ exam.total_score }}</td>
                <td style="padding:10px; border:1px solid #ddd; text-align:center;">{{ exam.pass_score }}</td>
                <td style="padding:10px; border:1px solid #ddd; text-align:center;">{{ exam.record_count }}</td>
                <td style="padding:10px; border:1px solid #ddd; text-align:center;">
                    <a href="/dashboard/exam/{{ exam.id }}/records/" class="btn" style="background:#5cb85c; color:#fff; font-size:12px; padding:4px 8px;">查看成绩</a>
                    <a href="/dashboard/exam/{{ exam.id }}/export/" class="btn" style="background:#f0ad4e; color:#fff; font-size:12px; padding:4px 8px; margin-left:4px;">导出CSV</a>
                    <button onclick="deleteExam({{ exam.id }})" class="btn" style="background:#d9534f; color:#fff; font-size:12px; padding:4px 8px; margin-left:4px;">删除</button>
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color:#999; text-align:center; padding:20px;">暂无考试，请先导入题库或组卷</p>
        {% endif %}
    </div>

    <div style="margin-top:16px; text-align:center;">
        <a href="/" class="btn" style="background:#f0f0f0; color:#666;">← 返回考试列表</a>
    </div>
</div>

<script>
function deleteExam(examId) {
    if (!confirm('确定要删除这个考试吗？所有相关记录也将被删除！')) return;
    fetch('/dashboard/exam/' + examId + '/delete/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            alert('删除成功');
            window.location.reload();
        } else {
            alert(data.msg);
        }
    })
    .catch(function(err) {
        alert('删除失败');
    });
}
</script>
{% endblock %}