{% extends "exam/base.html" %}
{% block title %}{{ exam.title }}{% endblock %}
{% block content %}
<div class="header">
    <h1>{{ exam.title }}</h1>
    <div class="sub">共 {{ exam.question_count }} 题，满分 {{ exam.total_score }} 分，限时 {{ exam.time_limit }} 分钟</div>
</div>
<div class="container">
    <div class="card">
        <div id="timer" style="text-align:center; font-size:18px; color:#d9534f; font-weight:bold; margin-bottom:16px;">
            剩余时间: <span id="time">{{ time_limit }}:00</span>
        </div>

        <form id="examForm">
            <input type="hidden" id="record_id" value="{{ record_id }}">

            {% for q in questions %}
            <div class="question-card" data-qid="{{ q.id }}">
                <div class="question-title">
                    <span class="question-number">{{ forloop.counter }}</span>
                    <span class="question-type">{{ q.get_q_type_display }}</span>
                    <span class="question-score">({{ q.score }}分)</span>
                </div>
                <div class="question-content">{{ q.content }}</div>

                <div class="options">
                    {% if q.options %}
                        {% if q.q_type == 'single' %}
                            {% for k, v in q.options.items %}
                            <label class="option-label">
                                <input type="radio" name="q_{{ q.id }}" value="{{ k }}" class="option-input">
                                <span class="option-text">{{ k }}. {{ v }}</span>
                            </label>
                            {% endfor %}

                        {% elif q.q_type == 'multi' %}
                            {% for k, v in q.options.items %}
                            <label class="option-label">
                                <input type="checkbox" name="q_{{ q.id }}" value="{{ k }}" class="option-input">
                                <span class="option-text">{{ k }}. {{ v }}</span>
                            </label>
                            {% endfor %}

                        {% elif q.q_type == 'judge' %}
                            {% for k, v in q.options.items %}
                            <label class="option-label">
                                <input type="radio" name="q_{{ q.id }}" value="{{ k }}" class="option-input">
                                <span class="option-text">{{ v }}</span>
                            </label>
                            {% endfor %}

                        {% else %}
                            <input type="text" name="q_{{ q.id }}" class="form-control" placeholder="请输入答案">
                        {% endif %}
                    {% else %}
                        <div style="color:#d9534f; font-size:14px; padding:8px; background:#ffebee; border-radius:4px;">
                            ⚠️ 此题目选项未设置，请联系管理员检查题库导入。
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}

            <div style="margin-top:20px; text-align:center;">
                <canvas id="signatureCanvas" width="400" height="150" style="border:2px solid #ddd; border-radius:8px; background:#fff; cursor:crosshair;"></canvas>
                <div style="margin-top:8px;">
                    <button type="button" class="btn" onclick="clearSignature()" style="background:#f0f0f0; color:#666;">清除签名</button>
                    <span style="color:#999; font-size:12px; margin-left:8px;">请在上方框内手写签名</span>
                </div>
            </div>

            <div style="margin-top:24px; text-align:center;">
                <button type="submit" class="btn btn-primary btn-block" id="submitBtn" style="font-size:16px; padding:14px;">提交答卷</button>
            </div>
        </form>
    </div>
</div>

<script>
var timeLimit = {{ time_limit }};
var timeRemaining = timeLimit * 60;
var timerInterval;

function updateTimer() {
    var minutes = Math.floor(timeRemaining / 60);
    var seconds = timeRemaining % 60;
    document.getElementById('time').textContent = 
        minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    if (timeRemaining <= 0) {
        clearInterval(timerInterval);
        alert('考试时间已到，系统将自动提交！');
        submitExam();
    }
    timeRemaining--;
}

timerInterval = setInterval(updateTimer, 1000);

// 签名功能
var canvas = document.getElementById('signatureCanvas');
var ctx = canvas.getContext('2d');
var drawing = false;

function getPos(e) {
    var rect = canvas.getBoundingClientRect();
    var clientX = e.touches ? e.touches[0].clientX : e.clientX;
    var clientY = e.touches ? e.touches[0].clientY : e.clientY;
    return {
        x: clientX - rect.left,
        y: clientY - rect.top
    };
}

canvas.addEventListener('mousedown', function(e) { drawing = true; var p = getPos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); });
canvas.addEventListener('mousemove', function(e) { if (!drawing) return; var p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); });
canvas.addEventListener('mouseup', function() { drawing = false; });
canvas.addEventListener('mouseout', function() { drawing = false; });

canvas.addEventListener('touchstart', function(e) { e.preventDefault(); drawing = true; var p = getPos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); });
canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if (!drawing) return; var p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); });
canvas.addEventListener('touchend', function() { drawing = false; });

ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000';

function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function submitExam() {
    var answers = {};
    document.querySelectorAll('.question-card').forEach(function(card) {
        var qid = card.getAttribute('data-qid');
        var inputs = card.querySelectorAll('input[name="q_' + qid + '"]:checked');
        if (inputs.length > 0) {
            var vals = [];
            inputs.forEach(function(inp) { vals.push(inp.value); });
            answers[qid] = vals.length === 1 ? vals[0] : vals;
        }
    });

    var signatureData = canvas.toDataURL('image/png');

    fetch('/api/submit/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            record_id: document.getElementById('record_id').value,
            answers: answers,
            signature: signatureData
        })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            window.location.href = '/result/' + data.record_id + '/';
        } else {
            alert(data.msg);
        }
    })
    .catch(function(err) {
        alert('提交失败，请重试');
        console.error(err);
    });
}

document.getElementById('examForm').addEventListener('submit', function(e) {
    e.preventDefault();
    clearInterval(timerInterval);
    submitExam();
});
</script>
{% endblock %}