{% extends "base.html" %}

{% block title %}考试详情 - FlashExam{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('student.dashboard') }}">主页</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('student.results') }}">我的成绩</a></li>
                <li class="breadcrumb-item active" aria-current="page">考试详情</li>
            </ol>
        </nav>
        
        <h1 class="h3 mb-0">
            <i class="bi bi-clipboard-data"></i>
            考试详情
        </h1>
        <p class="text-muted">查看具体题目答题情况和得分详情</p>
    </div>
</div>

<!-- 考试基本信息 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle"></i>
                    考试信息
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><strong>考试名称：</strong>{{ exam.title if exam else '未知考试' }}</h6>
                        <p><strong>考试描述：</strong>{{ exam.description if exam and exam.description else '无描述' }}</p>
                        <p><strong>考试时长：</strong>{{ exam.duration_minutes if exam else '未知' }} 分钟</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>开始时间：</strong>{{ exam_result.get('start_time', '未知')[:19] if exam_result.get('start_time') else '未知' }}</p>
                        <p><strong>完成时间：</strong>{{ exam_result.get('end_time', '未知')[:19] if exam_result.get('end_time') else '未知' }}</p>
                        <p><strong>总分：</strong>
                            {% if exam_result.get('score', 0) > 0 %}
                                {% set score = exam_result.get('score', 0) %}
                                {% set total_score = exam_result.get('total_score', 100) %}
                                {% set percentage = (score/total_score*100) if total_score > 0 else 0 %}
                                <span class="badge bg-{{ 'success' if percentage >= 90 else 'primary' if percentage >= 80 else 'info' if percentage >= 70 else 'warning' if percentage >= 60 else 'danger' }} fs-6">
                                    {{ "%.1f"|format(score) }}/{{ "%.1f"|format(total_score) }} ({{ "%.1f"|format(percentage) }}%)
                                </span>
                                <!-- 等级显示 -->
                                {% if percentage >= 90 %}
                                    <span class="badge bg-success ms-2">优秀</span>
                                {% elif percentage >= 80 %}
                                    <span class="badge bg-primary ms-2">良好</span>
                                {% elif percentage >= 70 %}
                                    <span class="badge bg-info ms-2">中等</span>
                                {% elif percentage >= 60 %}
                                    <span class="badge bg-warning ms-2">及格</span>
                                {% else %}
                                    <span class="badge bg-danger ms-2">不及格</span>
                                {% endif %}
                            {% else %}
                                <span class="badge bg-secondary">等待评分</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 题目详情 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="bi bi-list-ol"></i>
                    答题详情
                </h5>
            </div>
            <div class="card-body">
                {% if question_details %}
                    {% for detail in question_details %}
                    <div class="card mb-3 border-{{ 'success' if detail.get('is_correct') else 'warning' if detail.get('score', 0) > 0 else 'secondary' }}">
                        <div class="card-header bg-{{ 'success' if detail.get('is_correct') else 'warning' if detail.get('score', 0) > 0 else 'secondary' }} text-white">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    <i class="bi bi-question-circle"></i>
                                    第{{ detail.get('question_order', loop.index) }}题
                                    <small>({{ detail.get('question_type', '未知类型') }})</small>
                                </h6>
                                <div>
                                    {% if detail.get('score', 0) > 0 or detail.get('is_correct', False) %}
                                        <span class="badge bg-light text-dark">
                                            {{ "%.1f"|format(detail.get('score', 0)) }}/{{ "%.1f"|format(detail.get('max_score', 1)) }}分
                                        </span>
                                    {% else %}
                                        <span class="badge bg-light text-dark">等待评分</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- 题目内容 -->
                            <div class="mb-3">
                                <h6 class="text-primary">题目：</h6>
                                <div class="border-start border-primary border-4 ps-3">
                                    {{ detail.get('question_text', '题目内容缺失') }}
                                </div>
                            </div>
                            
                            <!-- 学生答案 -->
                            <div class="mb-3">
                                <h6 class="text-info">我的答案：</h6>
                                <div class="border-start border-info border-4 ps-3 bg-light p-2 rounded">
                                    {% if detail.get('student_answer') %}
                                        {% if detail.get('question_type') == 'choice' %}
                                            选项 {{ detail.get('student_answer') }}
                                        {% else %}
                                            {{ detail.get('student_answer') }}
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">未作答</span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <!-- 正确答案 -->
                            <div class="mb-3">
                                <h6 class="text-success">参考答案：</h6>
                                <div class="border-start border-success border-4 ps-3 bg-light p-2 rounded">
                                    {% if detail.get('correct_answer') %}
                                        {% if detail.get('question_type') == 'choice' %}
                                            选项 {{ detail.get('correct_answer') }}
                                        {% else %}
                                            {{ detail.get('correct_answer') }}
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">无参考答案</span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <!-- 评分状态 -->
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    {% set is_objective = detail.get('question_type') in ['choice', 'judge'] %}
                                    {% if detail.get('is_correct', False) %}
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle"></i> 答案正确
                                        </span>
                                    {% elif detail.get('score', 0) > 0 %}
                                        <span class="badge bg-warning">
                                            <i class="bi bi-dash-circle"></i> 部分得分
                                        </span>
                                    {% elif is_objective %}
                                        <!-- 客观题：已评分但答案错误 -->
                                        <span class="badge bg-danger">
                                            <i class="bi bi-x-circle"></i> 答案错误
                                        </span>
                                    {% else %}
                                        <!-- 主观题：等待评分 -->
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-clock"></i> 等待评分
                                        </span>
                                    {% endif %}
                                </div>
                                
                                <!-- 题目类型标识 -->
                                <div>
                                    {% set type_names = {
                                        'choice': '选择题',
                                        'judge': '判断题', 
                                        'essay': '论述题',
                                        'short_answer': '简答题',
                                        'fill_blank': '填空题',
                                        'code_reading': '代码阅读题',
                                        'code_practice': '编程题',
                                        'programming': '编程题'
                                    } %}
                                    <small class="text-muted">
                                        {{ type_names.get(detail.get('question_type', ''), detail.get('question_type', '未知类型')) }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-exclamation-triangle display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">无答题详情</h4>
                        <p class="text-muted">暂时无法获取此考试的详细答题情况</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 操作按钮 -->
<div class="row mt-4">
    <div class="col-12 text-center">
        <a href="{{ url_for('student.results') }}" class="btn btn-outline-primary me-2">
            <i class="bi bi-arrow-left"></i> 返回成绩列表
        </a>
        {% if exam_result.get('score', 0) > 0 %}
            <button class="btn btn-outline-success" onclick="window.print()">
                <i class="bi bi-printer"></i> 打印成绩单
            </button>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 卡片悬停效果
    $('.card').hover(
        function() {
            $(this).addClass('shadow-sm');
        },
        function() {
            $(this).removeClass('shadow-sm');
        }
    );
    
    // 平滑滚动到题目
    $('a[href^="#question"]').click(function() {
        var target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 100
            }, 500);
        }
    });
});
</script>
{% endblock %}