{% extends "base.html" %}

{% block title %}{{ quiz.title }} | Quiz{% endblock %}
{% block nav_courses_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'content:student_course_detail' course_pk=course.pk %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> {{ course.name }}
        </a>
        <h2><i class="fa-solid fa-circle-question me-2"></i>{{ quiz.title }}</h2>
        <p class="text-muted mb-0">
            {{ quiz.question_count }} question{{ quiz.question_count|pluralize }}
            &nbsp;·&nbsp; Pass score: {{ quiz.pass_score }}%
            &nbsp;·&nbsp; Attempt {{ attempts_taken|add:1 }}{% if quiz.max_attempts > 0 %} of {{ quiz.max_attempts }}{% endif %}
        </p>
    </div>
</div>

{% if quiz.description %}
<div class="alert alert-info mb-4">
    <i class="fa-solid fa-circle-info me-2"></i>{{ quiz.description }}
</div>
{% endif %}

<form method="post" id="quizForm">
    {% csrf_token %}
    {% for question in questions %}
    <div class="portal-card mb-3" id="q{{ forloop.counter }}">
        <div class="portal-card-body">
            <p class="fw-semibold mb-3">
                <span class="badge bg-primary me-2">{{ forloop.counter }}</span>
                {{ question.question_text }}
            </p>
            <div class="d-flex flex-column gap-2">
                {% for choice in question.choices.all %}
                <label class="d-flex align-items-center gap-3 p-3 rounded border choice-label"
                       style="cursor:pointer;" for="q{{ question.pk }}_c{{ choice.pk }}">
                    <input type="radio"
                           name="q_{{ question.pk }}"
                           id="q{{ question.pk }}_c{{ choice.pk }}"
                           value="{{ choice.pk }}"
                           class="form-check-input flex-shrink-0 mt-0"
                           style="width:1.2em;height:1.2em;"
                           required>
                    <span>{{ choice.choice_text }}</span>
                </label>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="d-flex justify-content-between align-items-center mt-4">
        <a href="{% url 'content:student_course_detail' course_pk=course.pk %}" class="btn btn-outline-secondary">
            <i class="fa-solid fa-arrow-left me-1"></i> Back
        </a>
        <button type="submit" class="btn btn-primary px-4" id="submitBtn">
            <i class="fa-solid fa-paper-plane me-1"></i> Submit Quiz
        </button>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Highlight selected choice
    document.querySelectorAll('.choice-label input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', () => {
            const name = radio.name;
            document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
                r.closest('.choice-label').classList.remove('border-primary', 'bg-primary-subtle');
            });
            radio.closest('.choice-label').classList.add('border-primary', 'bg-primary-subtle');
        });
    });

    // Confirm before submit
    document.getElementById('quizForm').addEventListener('submit', e => {
        const total = {{ quiz.question_count }};
        const answered = document.querySelectorAll('input[type="radio"]:checked').length;
        if (answered < total) {
            if (!confirm(`You have answered ${answered} of ${total} questions. Submit anyway?`)) {
                e.preventDefault();
            }
        }
    });
});
</script>
{% endblock %}