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

{% block content %}
<style>
    .unfilled { padding: 15px; border: 2px solid #f44336 !important; border-radius: 10px; background-color: #fff5f5; transition: all 0.3s ease; }
</style>

<div class="card shadow-sm p-4 mb-4">
    <div class="alert alert-info border-0 bg-light mb-4">
        <h3 class="fw-bold">The experiment has concluded. Thank you for your participation.</h3>
        <p class="text-muted">The experimental procedures have all been completed. Please assist us by filling out the final exit questionnaire. Your compensation for this experiment will be revealed after the questionnaire. 
</p>
    </div>

    <hr class="my-4">

    <div id="wrapper_ai_used" class="p-2">
        {% formfield player.ai_used %}
    </div>

    <div class="next-btn-wrap" style="text-align: center;">
    <button class="otree-next-button btn btn-primary">Next</button>
</div>
</div>

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const ai_used = document.getElementsByName('ai_used');
        const isSelected = Array.from(ai_used).some(r => r.checked);
        const wrapper = document.getElementById('wrapper_ai_used');

        if (!isSelected) {
            e.preventDefault();
            wrapper.classList.add('unfilled');
            alert("Please complete the required questions marked in red.");
        }
    });
</script>
{% endblock %}