{% block title %}
Scenario {{ player.round_number }}: Comprehension questions
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<div class="col-md-12 text-center">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#reviewModal">
        Review Instructions
    </button>
</div>
<br>

<div class="container">
    <p>You must answer all questions correctly before you can proceed.</p>

    {% for cq in cq_list %}
    <div class="card mb-3">
        <div class="card-body">
            <p class="fw-bold">{{ forloop.counter }}. {{ cq.label }}</p>
            {% for choice in cq.choices %}
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="{{ cq.field_name }}" id="{{ cq.field_name }}_{{ choice.0 }}"
                       value="{{ choice.0 }}">
                <label class="form-check-label" for="{{ cq.field_name }}_{{ choice.0 }}">
                    {{ choice.1 }}
                </label>
            </div>
            {% endfor %}

            {% if cq.field_name == "cq1" %}
                {{ formfield_errors 'cq1' }}
            {% elif cq.field_name == "cq2" %}
                {{ formfield_errors 'cq2' }}
            {% elif cq.field_name == "cq3" %}
                {{ formfield_errors 'cq3' }}
            {% elif cq.field_name == "cq4" %}
                {{ formfield_errors 'cq4' }}
            {% elif cq.field_name == "cq5" %}
                {{ formfield_errors 'cq5' }}
            {% elif cq.field_name == "cq6_ambiguous" %}
                {{ formfield_errors 'cq6_ambiguous' }}
            {% elif cq.field_name == "cq6_treatments" %}
                {{ formfield_errors 'cq6_treatments' }}
            {% endif %}
        </div>
    </div>
    {% endfor %}

    <div class="text-end"><button type="submit" class="btn btn-primary btn-large">Next</button></div>
</div>

<input type="hidden" name="review_clicks_CQs" id="review_clicks_CQs" value="0" />

<!-- Review Instructions Modal -->
<div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reviewModalLabel">Review Instructions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body review-modal-body">
                {{ include app_include }}
                <hr>
                <h5>Your Task</h5>
                {{ include C.TASK_OVERVIEW }}
                {{ include C.TASK_DETAIL }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block styles %}
<style>
    /* Hide Next buttons and interactive elements inside Review Instructions modal */
    .review-modal-body .btn-large,
    .review-modal-body .btn-primary:not([data-bs-dismiss]),
    .review-modal-body [data-bs-toggle="collapse"],
    .review-modal-body .otree-btn-next {
        display: none !important;
    }
    /* Show collapsed content expanded inside modal */
    .review-modal-body .collapse {
        display: block !important;
    }
    /* Hide all media (images, videos) inside Review Instructions modal */
    .review-modal-body .book-container,
    .review-modal-body .image-container,
    .review-modal-body .video-container {
        display: none !important;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Track Review Instructions button clicks
    var reviewBtn = document.querySelector('[data-bs-target="#reviewModal"]');
    if (reviewBtn) {
        reviewBtn.addEventListener('click', function() {
            var el = document.getElementById('review_clicks_CQs');
            el.value = parseInt(el.value) + 1;
        });
    }

    // Restore previously selected radio values after a failed validation
    var savedValues = {{ saved_values_json }};
    for (var fieldName in savedValues) {
        var val = savedValues[fieldName];
        if (val !== null && val !== '') {
            var radio = document.querySelector('input[name="' + fieldName + '"][value="' + val + '"]');
            if (radio) radio.checked = true;
        }
    }
});
</script>
{% endblock %}