{% 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>


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

<Br>
<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 uq7Value = document.querySelector('input[name="UQ7"]:checked')?.value;
        const uq8Value = document.querySelector('input[name="UQ8"]:checked')?.value;

        const isCorrect = (uq7Value === '1') &&
                         (uq8Value === '1') ;

        // Define individual correctness variables
        const uq7Correct = (uq7Value === '1');
        const uq8Correct = (uq8Value === '1');

        if (isCorrect) {
            feedbackDiv.innerHTML = '<p style="color: green; font-weight: bold; text-align: center;">Your answers are correct.<br> Please click NEXT to proceed.</p>';
            disableQuestion('UQ7', uq7Correct);
            disableQuestion('UQ8', uq8Correct);

            // 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> Please revise your answer(s) and resubmit.</p>';
            disableQuestion('UQ7', uq7Correct);
            disableQuestion('UQ8', uq8Correct);
        }
    });

    // Function to disable a question if it's correct - ADDED!
    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 %}