{% extends "base.html.j2" %}

{% block content %}
    <div class="statistics">
        {% if data['statistics']['correct'] %}
            <p class="correct">✔ Correct: {{data['statistics']['correct']}}</p>
        {% endif %}
        {% if data['statistics']['incorrect'] %}
            <p class="incorrect">✖ Incorrect: {{data['statistics']['incorrect']}}</p>
        {% endif %}
    </div>
    {% for q_index in range(data['original_data']['size']) %}
        <div class="question-block">
            <p><strong>{{ data['original_data']["questions"][q_index]['question'] }}</strong></p>
            
            {% if data['is_answer_correct'][q_index] %}
                <p class="correct-answer">✔ Correct!</p>
                <p class="user-choice">You chose: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['option'] }}</p>
                <p class="explanation">Why it is correct: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['explanation'] }}</p>
            {% else %}
                <p class="incorrect-answer">✖ Incorrect!</p>
                <p class="user-choice">You chose: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['option'] }}</p>
                <p class="explanation">Why incorrect: {{ data['original_data']["questions"][q_index]['choices'][data['user_answers'][q_index]]['explanation'] }}</p>
                {% for choice in data['original_data']["questions"][q_index]['choices'] %}
                    {% if choice['is_correct'] %}
                        <p class="correct-answer">✔ Correct answer: {{ choice['option'] }}</p>
                        <p class="explanation">Why it is correct: {{ choice['explanation'] }}</p>
                    {% endif %}
                {% endfor %}
                <p class="study-recommendation">💡 Study Recommendation: </p>
                <p class="explanation">{{ data['original_data']["questions"][q_index]['study_recommendation'] }}</p>
            {% endif %}
                <form>
                    <input type="hidden" name="q_index" value="{{ q_index }}">
                    <button type="button"
                            class="subtle-blue-btn"
                            style="margin-top: 10px;"
                            onclick="saveQuestion(this)">
                        Save question
                    </button>
                </form>
        </div>
    {% endfor %}
<script>
function saveQuestion(buttonElement) {
    const form = buttonElement.closest('form');
    const formData = new FormData(form);

    fetch("{{ url_for('save_question') }}", {
        method: "POST",
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log("Saved:", data.message);
        buttonElement.disabled = true;
        buttonElement.textContent = "Saved";
    })
    .catch(error => {
        console.error("Error saving question:", error);
    });
}
</script>
{% endblock content %}