{% extends "global/Page.html" %}

{% block title %}
<div style="display: flex; justify-content: center; align-items: center;">
Understanding Questions
</div>
{% endblock %}

{% block content %}
<style>
    /* Style for disabled radio buttons and their labels */
    input[type="radio"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    input[type="radio"]:disabled + label,
    .disabled-question {
        opacity: 0.5;
        color: #888;
        cursor: not-allowed;
    }
</style>


<div style="display: flex; flex-direction: column; gap: 1.5em;">
    {{ formfields }}
</div>


<Br>
<div id="feedback-message"></div>

<br>
<br>

<div style="display: flex; justify-content: right; align-items: right;">
    <button id="submit-btn" class="btn btn-danger">Submit</button>
    <button id="next-btn" class="btn btn-success" style="display: none;">Next</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const feedbackDiv = document.getElementById('feedback-message');
    const submitBtn = document.getElementById('submit-btn');
    const nextBtn = document.getElementById('next-btn');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        const uq1Value = document.querySelector('input[name="UQ1"]:checked')?.value;
        const uq2Value = document.querySelector('input[name="UQ2"]:checked')?.value;
        const uq3Value = document.querySelector('input[name="UQ3"]:checked')?.value;
        const uq4Value = document.querySelector('input[name="UQ4"]:checked')?.value;

        const isCorrect = (uq1Value === '1') &&
                         (uq2Value === '1') &&
                         (uq3Value === '2') &&
                         (uq4Value === '3');

        // Define individual correctness variables
        const uq1Correct = (uq1Value === '1');
        const uq2Correct = (uq2Value === '1');
        const uq3Correct = (uq3Value === '2');
        const uq4Correct = (uq4Value === '3');

        if (isCorrect) {
            feedbackDiv.innerHTML = '<p style="color: green; font-weight: bold; text-align: center;">Your answers are correct.<br> A high endowment member starts each round with <i>30 ECUs</i><br> while a low endowment member starts each round with <i>15 ECUs</i>.<br> Total earnings in a round = <i>(Endowment - Contribution) + (Total Contribution × 1.5)/3</i>.<br> Please click NEXT to proceed.</p>';
            disableQuestion('UQ1', uq1Correct);
            disableQuestion('UQ2', uq2Correct);
            disableQuestion('UQ3', uq3Correct);
            disableQuestion('UQ4', uq4Correct);

            // Hide submit button, show next button
            submitBtn.style.display = 'none';
            nextBtn.style.display = 'block';

        } else {
            feedbackDiv.innerHTML = '<p style="color: red; font-weight: bold; text-align: center;">One or more of your answers is incorrect.<br> Remember that a high endowment member starts each round with <i>30 ECUs</i><br> while a low endowment member starts each round with <i>15 ECUs</i>.<br> Total earnings in a round = <i>(Endowment - Contribution) + (Total Contribution × 1.5)/3</i>.<br> Please revise your answer(s) and resubmit.</p>';

            disableQuestion('UQ1', uq1Correct);
            disableQuestion('UQ2', uq2Correct);
            disableQuestion('UQ3', uq3Correct);
            disableQuestion('UQ4', uq4Correct);
        }
    });


        // Function to disable a question if it's correct
    function disableQuestion(questionName, isCorrect) {
        if (isCorrect) {
            const radios = document.querySelectorAll(`input[name="${questionName}"]`);
            radios.forEach(radio => {
                radio.disabled = true;
                // Add disabled class to parent elements for styling
                if (radio.parentElement) {
                    radio.parentElement.classList.add('disabled-question');
                }
            });
        }
    }

    // Add click handler for the Next button
    nextBtn.addEventListener('click', function() {
        form.submit();
    });
});
</script>

{% endblock %}