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

{% block content %}
<style>
    .unfilled { padding: 15px; border: 2px solid #f44336 !important; border-radius: 10px; background-color: #fff5f5; margin-bottom: 10px; }
    
    /* 複製 Ratings 頁面的樣式 */
    .rating-container { margin: 20px 0; padding: 15px; border-radius: 8px; }
    .mbti-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 15px 0; }
    .mbti-circle { border: 2px solid #ccc; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; background: white; }
    .sz-a-3 { width: 45px; height: 45px; }
    .sz-a-2 { width: 35px; height: 35px; }
    .sz-a-1 { width: 28px; height: 28px; }
    .sz-a-0 { width: 22px; height: 22px; }
    .c-a-blue { border-color: #2196F3; }
    .c-a-grey { border-color: #9E9E9E; }
    .c-a-red { border-color: #FF5722; }
    .mbti-circle.active.c-a-blue { background-color: #2196F3; }
    .mbti-circle.active.c-a-grey { background-color: #9E9E9E; }
    .mbti-circle.active.c-a-red { background-color: #FF5722; }
    .mbti-label { font-weight: bold; font-size: 0.95rem; }
</style>

<div class="card shadow-sm p-4 mb-4">
    <h4 class="mb-4" style="border-left: 5px solid #333; padding-left: 15px;">Survey and Experiment Feedback</h4>
    <div id="wrapper_stats_edu" class="p-2">
    {% formfield player.stats_edu %}
</div>
<hr>
    <div id="wrapper_inst_clarity" class="rating-container">
        <label class="fw-bold">Were the instructions in the study clear?</label>
        <div class="mbti-row">
            <span class="mbti-label" style="color:#2196F3;">Not clear at all</span>
            <div class="mbti-circle sz-a-3 c-a-blue" data-value="1"></div>
            <div class="mbti-circle sz-a-2 c-a-blue" data-value="2"></div>
            <div class="mbti-circle sz-a-1 c-a-blue" data-value="3"></div>
            <div class="mbti-circle sz-a-0 c-a-grey" data-value="4"></div>
            <div class="mbti-circle sz-a-1 c-a-red" data-value="5"></div>
            <div class="mbti-circle sz-a-2 c-a-red" data-value="6"></div>
            <div class="mbti-circle sz-a-3 c-a-red" data-value="7"></div>
            <span class="mbti-label" style="color:#FF5722;">Extremely clear</span>
        </div>
        <input type="hidden" name="inst_clarity" id="id_inst_clarity">
    </div>

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

    <hr>

    <div id="wrapper_purpose" class="p-2">
        {% formfield player.study_purpose_guess %}
    </div>
    <div id="wrapper_strategy" class="p-2">
        {% formfield player.strategy_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.querySelectorAll('.mbti-circle').forEach(circle => {
        circle.addEventListener('click', function() {
            const val = this.getAttribute('data-value');
            document.getElementById('id_inst_clarity').value = val;
            document.querySelectorAll('.mbti-circle').forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('wrapper_inst_clarity').classList.remove('unfilled');
        });
    });

    // 表單驗證
    document.querySelector('form').addEventListener('submit', function(e) {
        let allValid = true;
        let firstError = null;

        const fields = [
            { name: 'stats_edu', id: 'wrapper_stats_edu', isRadio: true },
            { name: 'inst_clarity', id: 'wrapper_inst_clarity', isRating: true },
            { name: 'study_purpose_guess', id: 'wrapper_purpose' },
            { name: 'strategy_used', id: 'wrapper_strategy' }
        ];

        fields.forEach(f => {
            const wrapper = document.getElementById(f.id);
            let isEmpty = false;

            if (f.isRating) {
                const input = document.getElementById(f.id.replace('wrapper_', 'id_'));
                isEmpty = !input || !input.value.trim();
            } else if (f.isRadio) {
                const checked = document.querySelector(`input[name="${f.name}"]:checked`);
                isEmpty = !checked;
            } else {
                const input = document.getElementsByName(f.name)[0];
                isEmpty = !input || !input.value.trim();
            }

            if (isEmpty) {
                allValid = false;
                wrapper.classList.add('unfilled');
                if (!firstError) firstError = wrapper;
            } else {
                wrapper.classList.remove('unfilled');
            }
        });

        if (!allValid) {
            e.preventDefault();
            alert("Please complete the required questions marked in red.");
            if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });
</script>
{% endblock %}