{% extends "base.html" %}

{% block title %}学生答卷详情 - {{ student.name }}{% endblock %}

{% block head %}
{{ super() }}
    <script src="/static/js/libs/sweetalert2/sweetalert2.min.js"></script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">学生答卷详情</h4>
            <a href="{{ url_for('teacher.results') }}" class="btn btn-light btn-sm">
                <i class="fas fa-arrow-left"></i> 返回成绩列表
            </a>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h5><strong>考试信息</strong></h5>
                    <p><strong>考试名称:</strong> {{ exam.title }}</p>
                    <p><strong>总分:</strong> <span id="total-score" class="badge bg-success">{{ result.score }}</span> / {{ exam.total_score }}</p>
                </div>
                <div class="col-md-6">
                    <h5><strong>学生信息</strong></h5>
                    <p><strong>姓名:</strong> {{ student.name }}</p>
                    <p><strong>学号:</strong> {{ student.student_id }}</p>
                </div>
            </div>
            <hr>
            <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                <h5 class="mb-0"><strong>答题详情</strong></h5>
                <div>
                    <button class="btn btn-sm btn-outline-primary" onclick="toggleAllAccordions(true)"><i class="bi bi-arrows-expand"></i> 全部展开</button>
                    <button class="btn btn-sm btn-outline-secondary" onclick="toggleAllAccordions(false)"><i class="bi bi-arrows-collapse"></i> 全部折叠</button>
                </div>
            </div>
            <div class="accordion" id="questions-accordion">
                {% for question in questions %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading-{{ question.id }}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ question.id }}">
                            <strong>题目 {{ loop.index }}:</strong> ({{ question.question_type }}) - {{ question.question_text | safe_markdown | striptags | truncate(80) }}
                            <span class="ms-auto me-3">得分: <span class="badge bg-info" id="score-badge-{{ question.id }}">{{ question.score }}</span> / {{ question.max_score }}</span>
                        </button>
                    </h2>
                    <div id="collapse-{{ question.id }}" class="accordion-collapse collapse" data-bs-parent="#questions-accordion">
                        <div class="accordion-body">
                            <p><strong>题干:</strong></p>
                            <div>{{ question.question_text | safe_markdown }}</div>
                            
                            {% if question.question_type == 'choice' and question.options and question.options is mapping %}
                            <p><strong>选项:</strong></p>
                            <ul>
                                {% for key, value in question.options.items() %}
                                <li><strong>{{ key }}:</strong> {{ value }}</li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                            
                            <p><strong>正确答案:</strong> <span class="text-success">
                                {% if question.question_type == 'judge' %}
                                    {% if question.correct_answer|lower in ['true', 't', '1'] %}对{% elif question.correct_answer|lower in ['false', 'f', '0'] %}错{% else %}{{ question.correct_answer }}{% endif %}
                                {% else %}
                                    {{ question.correct_answer }}
                                {% endif %}
                            </span></p>
                            
                            <div class="mb-3">
                                <label for="answer-{{ question.id }}" class="form-label"><strong>学生答案:</strong>
                                    {% if question.student_answer and question.question_type == 'judge' %}
                                        <small class="text-muted">(原始答案: {{ question.student_answer }})</small>
                                    {% endif %}
                                </label>
                                {% if question.question_type == 'choice' and question.options and question.options is mapping %}
                                <select class="form-control" id="answer-{{ question.id }}" style="width: 200px;">
                                    <option value="">未作答</option>
                                    {% for key in ['A', 'B', 'C', 'D'] %}
                                        {% if key in question.options %}
                                        <option value="{{ key }}" {% if question.student_answer == key %}selected{% endif %}>{{ key }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                {% elif question.question_type == 'choice' %}
                                <input type="text" class="form-control" id="answer-{{ question.id }}" value="{{ question.student_answer or '' }}" style="width: 100%;" readonly>
                                {% elif question.question_type == 'judge' %}
                                <select class="form-control" id="answer-{{ question.id }}" style="width: 200px;">
                                    <option value="">未作答</option>
                                    <option value="对" {% if question.student_answer|lower in ['true', '对', 't', '1'] %}selected{% endif %}>对</option>
                                    <option value="错" {% if question.student_answer|lower in ['false', '错', 'f', '0'] %}selected{% endif %}>错</option>
                                </select>
                                {% else %}
                                <textarea class="form-control" id="answer-{{ question.id }}" rows="3" style="width: 100%;">{{ question.student_answer or '' }}</textarea>
                                {% endif %}
                            </div>
                            
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group d-flex align-items-center">
                                        <label for="score-{{ question.id }}" class="form-label me-2"><strong>修改分数:</strong></label>
                                        <input type="number" class="form-control" id="score-{{ question.id }}" value="{{ question.score }}" style="width: 100px;" step="{% if question.score_type == 'integer' %}1{% else %}0.1{% endif %}" min="0" max="{{ question.max_score }}">
                                        <span class="ms-2">/ {{ question.max_score }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6 text-end">
                                    <button class="btn btn-primary btn-sm" onclick="updateAnswerAndScore('{{ question.id }}', '{{ result.id }}', '{{ question.max_score }}')">
                                        <i class="fas fa-save"></i> 保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
// 一键展开/折叠所有题目
function toggleAllAccordions(expand) {
    document.querySelectorAll('#questions-accordion .accordion-collapse').forEach(el => {
        const bsCollapse = bootstrap.Collapse.getInstance(el) || new bootstrap.Collapse(el, { toggle: false });
        expand ? bsCollapse.show() : bsCollapse.hide();
    });
}

// 添加调试信息
console.log('页面加载完成，updateAnswerAndScore函数已定义');

// 检查依赖
if (typeof Swal === 'undefined') {
    console.error('SweetAlert2未加载！');
    // 定义一个简单的替代
    window.Swal = {
        fire: function(options) {
            if (typeof options === 'string') {
                alert(options);
            } else {
                alert(options.title + ': ' + (options.text || ''));
            }
        },
        showLoading: function() {}
    };
}

function updateAnswerAndScore(questionScoreId, examResultId, maxScore) {
    console.log('=== updateAnswerAndScore被调用 ===');
    console.log('参数:', {questionScoreId, examResultId, maxScore});
    const scoreInput = document.getElementById('score-' + questionScoreId);
    const answerInput = document.getElementById('answer-' + questionScoreId);
    const newScore = scoreInput.value;
    let newAnswer = '';
    
    // 根据输入类型获取答案
    if (answerInput.tagName === 'SELECT') {
        newAnswer = answerInput.value;
    } else if (answerInput.tagName === 'TEXTAREA') {
        newAnswer = answerInput.value;
    } else {
        newAnswer = answerInput.value;
    }
    
    console.log('更新数据:', {
        questionScoreId: questionScoreId,
        newScore: newScore,
        newAnswer: newAnswer,
        maxScore: maxScore
    });
    
    // 客户端验证
    if (parseFloat(newScore) > parseFloat(maxScore)) {
        Swal.fire({
            icon: 'warning',
            title: '分数无效',
            text: `分数不能超过该题的满分 (${maxScore})`
        });
        scoreInput.focus();
        return;
    }
    
    if (parseFloat(newScore) < 0) {
        Swal.fire({
            icon: 'warning',
            title: '分数无效',
            text: '分数不能为负数'
        });
        scoreInput.focus();
        return;
    }

    // 显示加载状态
    Swal.fire({
        title: '保存中...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // 构建请求数据
    const formData = new URLSearchParams({
        'question_score_id': questionScoreId,
        'new_score': newScore,
        'new_answer': newAnswer
    });
    
    console.log('发送请求到:', '/teacher/grading/update-answer-and-score');
    console.log('请求数据:', formData.toString());
    
    fetch('/teacher/grading/update-answer-and-score', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formData
    })
    .then(response => {
        console.log('响应状态:', response.status);
        console.log('响应头:', response.headers);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();  // 先获取文本
    })
    .then(text => {
        console.log('响应文本:', text);
        try {
            const data = JSON.parse(text);  // 手动解析JSON
            console.log('解析后的数据:', data);
            
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: '更新成功',
                    text: '答案和分数已更新',
                    showConfirmButton: false,
                    timer: 1500
                });
                
                // 更新页面上的分数显示
                document.getElementById('score-badge-' + questionScoreId).innerText = newScore;
                
                // 更新总分
                if (data.new_total_score !== undefined) {
                    document.getElementById('total-score').innerText = data.new_total_score.toFixed(1);
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '更新失败',
                    text: data.message || '未知错误'
                });
            }
        } catch (e) {
            console.error('JSON解析错误:', e);
            console.error('原始响应:', text);
            Swal.fire({
                icon: 'error',
                title: 'JSON解析错误',
                text: '服务器响应格式错误'
            });
        }
    })
    .catch(error => {
        console.error('请求错误:', error);
        Swal.fire({
            icon: 'error',
            title: '请求失败',
            text: error.message || '无法连接到服务器'
        });
    });
}

// 添加一个简单的测试函数
function testUpdate() {
    console.log('测试按钮被点击');
    alert('测试按钮工作正常！');
    
    // 测试API调用
    fetch('/teacher/test-api')
        .then(response => response.json())
        .then(data => {
            console.log('API测试结果:', data);
            alert('API连接正常: ' + JSON.stringify(data));
        })
        .catch(error => {
            console.error('API测试失败:', error);
            alert('API连接失败: ' + error);
        });
}

// 页面加载完成后的检查
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM加载完成');
    console.log('updateAnswerAndScore函数存在:', typeof updateAnswerAndScore);
    console.log('Swal对象存在:', typeof Swal);
    
    // 添加测试按钮
    const testBtn = document.createElement('button');
    testBtn.textContent = '测试JavaScript';
    testBtn.className = 'btn btn-warning btn-sm position-fixed bottom-0 end-0 m-3';
    testBtn.onclick = testUpdate;
    document.body.appendChild(testBtn);
});
</script>
{% endblock %}