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

{% block content %}
<style>
    .rating-container { 
        margin: 20px 0; 
        text-align: left; 
        padding: 20px; 
        border-radius: 8px; 
        transition: background-color 0.3s;
        border-left: 5px solid transparent;
    }
    .question-label { 
        font-size: 1.1rem; 
        font-weight: 600; 
        margin-bottom: 15px; 
        display: block; 
        color: #333; 
    }
    .mbti-row { 
        display: flex; 
        align-items: center; 
        justify-content: flex-start; 
        gap: 12px; 
        margin-bottom: 20px; 
    }
    .mbti-label { font-weight: bold; font-size: 0.95rem; }
    .label-left { color: #555; margin-right: 10px; }
    .label-right { color: #555; margin-left: 10px; }

    .mbti-circle {
        border: 2px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        background: white;
        display: inline-block;
        flex-shrink: 0;
    }

    /* --- 結構 A: 7 級量表 --- */
    .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; }

    /* --- 結構 B: 5 級量表 --- */
    .sz-b-1 { width: 22px; height: 22px; }
    .sz-b-2 { width: 30px; height: 30px; }
    .sz-b-3 { width: 38px; height: 38px; }
    .sz-b-4 { width: 46px; height: 46px; }
    .sz-b-5 { width: 54px; height: 54px; }

    /* A 結構顏色 */
    .c-a-blue { border-color: #2196F3; }
    .mbti-circle.active.c-a-blue { background-color: #2196F3; }
    .c-a-grey { border-color: #9E9E9E; }
    .mbti-circle.active.c-a-grey { background-color: #9E9E9E; }
    .c-a-red { border-color: #FF5722; }
    .mbti-circle.active.c-a-red { background-color: #FF5722; }

    /* B 結構顏色 */
    .c-b-1, .c-b-2, .c-b-3, .c-b-4, .c-b-5 { border-color: #0D47A1; }
    .mbti-circle.active.c-b-1 { background-color: #BBDEFB; }
    .mbti-circle.active.c-b-2 { background-color: #90CAF9; }
    .mbti-circle.active.c-b-3 { background-color: #42A5F5; }
    .mbti-circle.active.c-b-4 { background-color: #1E88E5; }
    .mbti-circle.active.c-b-5 { background-color: #0D47A1; }

    /* 錯誤樣式 */
    .unfilled { background-color: #ffebee !important; border-left: 5px solid #f44336 !important; }
    
    .follow-up-q { 
        margin-top: 15px; 
        padding: 15px; 
        background-color: #f8f9fa; 
        border-radius: 4px;
    }
</style>

<div class="card p-4 shadow-sm">
    

    <h4 class="mb-4" style="border-left: 5px solid #333; padding-left: 15px;">Survey and Experiment Feedback</h4>

    {% for item in rating_items %}
    <div class="rating-container" id="container_{{ item.field }}">
        <label class="question-label">{{ item.label }}</label>

        <div class="mbti-row">
            {% if item.scale == 5 %}
                <span class="mbti-label label-left">No significant change</span>
                <div class="mbti-circle sz-b-1 c-b-1" data-value="1" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-b-2 c-b-2" data-value="2" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-b-3 c-b-3" data-value="3" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-b-4 c-b-4" data-value="4" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-b-5 c-b-5" data-value="5" data-target="id_{{ item.field }}"></div>
                <span class="mbti-label label-right" style="color:#0D47A1;">
                    {% if "easier" in item.label %}Became much easier{% else %}Became very difficult{% endif %}
                </span>
            {% else %}
                <span class="mbti-label label-left" style="color:#2196F3;">Extremely Easy</span>
                <div class="mbti-circle sz-a-3 c-a-blue" data-value="1" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-2 c-a-blue" data-value="2" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-1 c-a-blue" data-value="3" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-0 c-a-grey" data-value="4" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-1 c-a-red" data-value="5" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-2 c-a-red" data-value="6" data-target="id_{{ item.field }}"></div>
                <div class="mbti-circle sz-a-3 c-a-red" data-value="7" data-target="id_{{ item.field }}"></div>
                <span class="mbti-label label-right" style="color:#FF5722;">Extremely Difficult</span>
            {% endif %}
        </div>

        <input type="hidden" name="{{ item.field }}" id="id_{{ item.field }}" class="mbti-input-value">
        
        <div class="follow-up-q">
            <label class="form-label fw-bold">Why do you think so?</label>
            <textarea name="{{ item.field }}_why" id="id_{{ item.field }}_why" class="form-control req-input" rows="2" placeholder="Please briefly explain why..."></textarea>
        </div>
        <hr>
    </div>
    {% endfor %}

    <div id="container_willing_to_pay" class="rating-container">
        {% formfield player.willing_to_pay %}
    </div>
    <script>
        const wtpInput = document.getElementsByName('willing_to_pay')[0];
        if (wtpInput) {
            wtpInput.setAttribute('type', 'number');
            wtpInput.setAttribute('min', '0');
            wtpInput.setAttribute('step', 'any');
            wtpInput.setAttribute('inputmode', 'decimal');
        }
    </script>

    <div id="container_other_comments" class="rating-container">
        {% formfield player.other_comments %}
    </div>

    <div class="text-end mt-4">
        <button type="button" onclick="validateForm()" class="btn btn-primary px-5">Submit survey and check my compensation</button>
    </div>
</div>

<script>
    function saveFormData() {
        const circles = {};
        document.querySelectorAll('.mbti-input-value').forEach(input => {
            circles[input.id] = input.value;
        });

        const textareas = {};
        document.querySelectorAll('textarea').forEach(ta => {
            if (ta.name) textareas[ta.name] = ta.value;
        });

        const radios = {};
        document.querySelectorAll('input[type="radio"]:checked').forEach(r => {
            radios[r.name] = r.value;
        });

        const willingEl = document.getElementsByName('willing_to_pay')[0];

        localStorage.setItem('postTaskFormData', JSON.stringify({
            circles,
            textareas,
            radios,
            willingToPay: willingEl ? willingEl.value : ''
        }));
    }

    function restoreFormData() {
        const saved = localStorage.getItem('postTaskFormData');
        if (!saved) return;
        const data = JSON.parse(saved);

        Object.entries(data.circles || {}).forEach(([inputId, val]) => {
            const input = document.getElementById(inputId);
            if (input) {
                input.value = val;
                const circle = document.querySelector(`.mbti-circle[data-target="${inputId}"][data-value="${val}"]`);
                if (circle) circle.classList.add('active');
            }
        });

        Object.entries(data.textareas || {}).forEach(([name, val]) => {
            const el = document.getElementsByName(name)[0];
            if (el) el.value = val;
        });

        Object.entries(data.radios || {}).forEach(([name, val]) => {
            const el = document.querySelector(`input[type="radio"][name="${name}"][value="${val}"]`);
            if (el) el.checked = true;
        });

        if (data.willingToPay !== undefined) {
            const el = document.getElementsByName('willing_to_pay')[0];
            if (el) el.value = data.willingToPay;
        }
    }

    // 圓圈點擊
    document.querySelectorAll('.mbti-circle').forEach(circle => {
        circle.addEventListener('click', function() {
            const val = this.getAttribute('data-value');
            const targetId = this.getAttribute('data-target');
            document.getElementById(targetId).value = val;
            document.querySelectorAll(`.mbti-circle[data-target="${targetId}"]`).forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('container_' + targetId.replace('id_', '')).classList.remove('unfilled');
            saveFormData();
        });
    });

    // textarea 即時存檔
    document.querySelectorAll('textarea').forEach(ta => {
        ta.addEventListener('input', function() {
            saveFormData();
        });
    });

    // radio button 即時存檔
    document.querySelectorAll('input[type="radio"]').forEach(r => {
        r.addEventListener('change', function() {
            saveFormData();
        });
    });

    // willing_to_pay 即時存檔
    const _wtpEl = document.getElementsByName('willing_to_pay')[0];
    if (_wtpEl) {
        _wtpEl.addEventListener('input', function() {
            saveFormData();
        });
    }

    function validateForm() {
        let allValid = true;
        let firstErrorElement = null;

        
        

        // 檢查圓圈題與原因
        document.querySelectorAll('.mbti-input-value').forEach(input => {
            const baseId = input.id.replace('id_', '');
            const whyField = document.getElementById(input.id + '_why');
            const container = document.getElementById('container_' + baseId);
            if (!input.value || (whyField && !whyField.value.trim())) {
                allValid = false;
                if (container) container.classList.add('unfilled');
                if (!firstErrorElement) firstErrorElement = container;
            } else {
                if (container) container.classList.remove('unfilled');
            }
        });

        // 檢查 willing_to_pay
        const wtpField = document.getElementsByName('willing_to_pay')[0];
        const wtpContainer = document.getElementById('container_willing_to_pay');
        if (!wtpField || wtpField.value.trim() === '') {
            allValid = false;
            if (wtpContainer) wtpContainer.classList.add('unfilled');
            if (!firstErrorElement) firstErrorElement = wtpContainer;
        } else {
            const val = parseFloat(wtpField.value);
            if (isNaN(val) || val < 0) {
                allValid = false;
                if (wtpContainer) wtpContainer.classList.add('unfilled');
                if (!firstErrorElement) firstErrorElement = wtpContainer;
            } else {
                if (wtpContainer) wtpContainer.classList.remove('unfilled');
            }
        }

        if (allValid) {
            localStorage.removeItem('postTaskFormData');
            document.querySelector('form').submit();
        } else {
            alert("Please complete all required fields on this page.");
            if (firstErrorElement) {
                firstErrorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }
    }

    restoreFormData();
</script>
{% endblock %}