{% 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(180px, 1fr)); gap:16px; margin-bottom:24px;">
        <div class="card" style="text-align:center;">
            <div style="font-size:28px; color:#4a90d9; font-weight:bold;">{{ stats.total_records }}</div>
            <div style="color:#666; font-size:14px;">考试记录总数</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:28px; color:#5cb85c; font-weight:bold;">{{ stats.total_users }}</div>
            <div style="color:#666; font-size:14px;">考生人数</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:28px; color:#f0ad4e; font-weight:bold;">{{ stats.total_exams }}</div>
            <div style="color:#666; font-size:14px;">考试总数</div>
        </div>
        <div class="card" style="text-align:center;">
            <div style="font-size:28px; color:#d9534f; font-weight:bold;">{{ stats.pass_count }}</div>
            <div style="color:#666; font-size:14px;">及格人次</div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="card" style="margin-bottom:16px;">
        <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <button onclick="selectAll()" class="btn" style="background:#e3f2fd; color:#1976d2;">全选</button>
            <button onclick="deselectAll()" class="btn" style="background:#f5f5f5; color:#666;">取消全选</button>
            <button onclick="exportSelectedPDF()" class="btn btn-primary">📄 导出选中PDF</button>
            <button onclick="exportSelectedCSV()" class="btn" style="background:#e8f5e9; color:#2e7d32;">📊 导出选中CSV</button>
            <a href="/dashboard/" class="btn" style="background:#f0f0f0; color:#666;">← 返回仪表盘</a>
            <a href="/admin-logout/" class="btn" style="background:#ffebee; color:#c62828;">退出登录</a>
        </div>
    </div>

    <!-- 考试记录列表 -->
    <div class="card">
        <div class="card-title">📋 考试记录列表</div>

        {% if records %}
        <div style="overflow-x:auto;">
        <table style="width:100%; border-collapse:collapse; font-size:13px;">
            <tr style="background:#f5f5f5;">
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:40px;">
                    <input type="checkbox" id="selectAllCheckbox" onchange="toggleAll(this)">
                </th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">序号</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:left;">考生姓名</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:left;">手机号</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:left;">考试名称</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">得分</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">满分</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">及格</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">次数</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">考试时间</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center;">操作</th>
            </tr>
            {% for record in records %}
            <tr>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">
                    <input type="checkbox" class="record-checkbox" value="{{ record.id }}">
                </td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ forloop.counter }}</td>
                <td style="padding:8px; border:1px solid #ddd;">{{ record.user_name }}</td>
                <td style="padding:8px; border:1px solid #ddd;">{{ record.user_phone }}</td>
                <td style="padding:8px; border:1px solid #ddd;">{{ record.exam.title }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center; font-weight:bold;">{{ record.score }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ record.exam.total_score }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">
                    {% if record.is_pass %}
                        <span style="color:#5cb85c;">✓</span>
                    {% else %}
                        <span style="color:#d9534f;">✗</span>
                    {% endif %}
                </td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">第{{ record.attempt_number }}次</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ record.created_at|date:"Y-m-d H:i" }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">
                    <a href="/dashboard/record/{{ record.id }}/" class="btn" style="background:#4a90d9; color:#fff; font-size:11px; padding:3px 6px;">详情</a>
                    <a href="/pdf/{{ record.id }}/" class="btn" style="background:#f0ad4e; color:#fff; font-size:11px; padding:3px 6px; margin-left:2px;">PDF</a>
                </td>
            </tr>
            {% endfor %}
        </table>
        </div>
        {% else %}
        <p style="color:#999; text-align:center; padding:20px;">暂无考试记录</p>
        {% endif %}
    </div>
</div>

<script>
function toggleAll(master) {
    document.querySelectorAll('.record-checkbox').forEach(function(cb) {
        cb.checked = master.checked;
    });
}

function selectAll() {
    document.getElementById('selectAllCheckbox').checked = true;
    toggleAll(document.getElementById('selectAllCheckbox'));
}

function deselectAll() {
    document.getElementById('selectAllCheckbox').checked = false;
    toggleAll(document.getElementById('selectAllCheckbox'));
}

function getSelectedIds() {
    var ids = [];
    document.querySelectorAll('.record-checkbox:checked').forEach(function(cb) {
        ids.push(parseInt(cb.value));
    });
    return ids;
}

function exportSelectedPDF() {
    var ids = getSelectedIds();
    if (ids.length === 0) {
        alert('请先选择要导出的记录');
        return;
    }

    if (!confirm('确定要导出 ' + ids.length + ' 条记录的 PDF 吗？')) return;

    fetch('/dashboard/export-all-pdf/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({record_ids: ids})
    })
    .then(function(r) {
        if (r.ok) return r.blob();
        throw new Error('导出失败');
    })
    .then(function(blob) {
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = '考试记录_' + new Date().toISOString().slice(0,10) + '.pdf';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
    })
    .catch(function(err) {
        alert('导出失败: ' + err.message);
    });
}

function exportSelectedCSV() {
    var ids = getSelectedIds();
    if (ids.length === 0) {
        alert('请先选择要导出的记录');
        return;
    }
    alert('CSV导出功能开发中，请使用PDF导出');
}
</script>
{% endblock %}