{% extends "base.html" %}

{% block title %}考试选择 - FlashExam{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-warning text-white">
                    <h4 class="mb-0">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        发现未完成的考试
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5><i class="bi bi-info-circle"></i> 考试信息</h5>
                        <ul class="mb-0">
                            <li><strong>考试名称：</strong>{{ incomplete_info.exam_title }}</li>
                            <li><strong>开始时间：</strong>{{ incomplete_info.start_time[:19].replace('T', ' ') }}</li>
                            <li><strong>已用时间：</strong>{{ "%.1f"|format(incomplete_info.elapsed_minutes) }} 分钟</li>
                            <li><strong>剩余时间：</strong>{{ "%.1f"|format(incomplete_info.remaining_minutes) }} 分钟</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <h5 class="mb-4">您希望如何处理这场考试？</h5>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="card border-success">
                                    <div class="card-body text-center">
                                        <i class="bi bi-play-circle display-1 text-success mb-3"></i>
                                        <h5>继续考试</h5>
                                        <p class="text-muted">从上次保存的地方继续答题</p>
                                        <a href="{{ url_for('student.continue_exam', exam_id=exam.id) }}" 
                                           class="btn btn-success btn-lg">
                                            <i class="bi bi-play-fill"></i> 继续考试
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="card border-danger">
                                    <div class="card-body text-center">
                                        <i class="bi bi-arrow-clockwise display-1 text-danger mb-3"></i>
                                        <h5>重新开始</h5>
                                        <p class="text-muted">清除之前的答案，重新开始考试</p>
                                        <button type="button" class="btn btn-danger btn-lg" 
                                                onclick="confirmRestart()">
                                            <i class="bi bi-arrow-clockwise"></i> 重新开始
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <a href="{{ url_for('student.exams') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left"></i> 返回考试列表
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认重新开始模态框 -->
<div class="modal fade" id="confirmRestartModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    确认重新开始
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <strong>⚠️ 重要提醒：</strong>
                </div>
                <p>重新开始考试将会：</p>
                <ul>
                    <li><strong>清除所有已保存的答案</strong></li>
                    <li><strong>重新计算考试时间</strong></li>
                    <li><strong>无法恢复之前的答题进度</strong></li>
                </ul>
                <p class="text-danger"><strong>此操作不可逆转！</strong></p>
                <p>您确定要重新开始这场考试吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x"></i> 取消
                </button>
                <a href="{{ url_for('student.take_exam', exam_id=exam.id, restart='true') }}" 
                   class="btn btn-danger">
                    <i class="bi bi-arrow-clockwise"></i> 确认重新开始
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function confirmRestart() {
    $('#confirmRestartModal').modal('show');
}

// 页面加载时显示剩余时间倒计时
$(document).ready(function() {
    var remainingMinutes = {{ incomplete_info.remaining_minutes }};
    var remainingElement = $('.remaining-time');
    
    if (remainingMinutes <= 0) {
        $('.alert-info').removeClass('alert-info').addClass('alert-danger');
        $('.card-header').removeClass('bg-warning').addClass('bg-danger');
        $('h4').html('<i class="bi bi-clock-history"></i> 考试已超时');
        $('.btn-success').addClass('disabled').text('考试已超时');
    } else if (remainingMinutes <= 5) {
        $('.alert-info').removeClass('alert-info').addClass('alert-warning');
    }
});
</script>
{% endblock %}