{{ block title }}
Interaction Allocation Task
{{ endblock }}

{{ block content }}

<p><strong>Please read the situation below carefully.</strong></p>

<p>
Imagine the following situation.
</p>

<p>
You have just arrived at an international welcome event during your first days abroad.
You do not know anyone there yet.
Students from many countries are present, and people are starting to introduce themselves and form small groups.
</p>

{% if treatment == 'control' %}
<p>
After a few minutes, you are still looking around and have not yet started a conversation with anyone.
</p>
{% else %}
<p>
After a few minutes, you start talking with another student from your own country.
</p>
{% endif %}

<hr>

<p>
You now have <strong>60 minutes</strong> remaining at the event.
Please divide these 60 minutes across the students you could choose to interact with next.
</p>

<ul>
    <li>You may divide the minutes however you like.</li>
    <li>You must allocate all 60 minutes.</li>
    <li>The total must equal exactly 60.</li>
</ul>

<div style="margin-bottom: 16px;">
    <label><strong>Student 1 — international student from {{ profiles.0 }}</strong></label>
    <input type="number" name="alloc_1" min="0" max="60" step="1" value="{{ player.alloc_1 }}" class="form-control">
</div>

<div style="margin-bottom: 16px;">
    <label><strong>Student 2 — international student from {{ profiles.1 }}</strong></label>
    <input type="number" name="alloc_2" min="0" max="60" step="1" value="{{ player.alloc_2 }}" class="form-control">
</div>

<div style="margin-bottom: 16px;">
    <label><strong>Student 3 — international student from {{ profiles.2 }}</strong></label>
    <input type="number" name="alloc_3" min="0" max="60" step="1" value="{{ player.alloc_3 }}" class="form-control"></div>

<div style="margin-bottom: 16px;">
    <label><strong>Student 4 — international student from {{ profiles.3 }}</strong></label>
    <input type="number" name="alloc_4" min="0" max="60" step="1" value="{{ player.alloc_4 }}" class="form-control">
</div>

<div style="margin-bottom: 16px;">
    <label><strong>Student 5 — international student from {{ profiles.4 }}</strong></label>
    <input type="number" name="alloc_5" min="0" max="60" step="1" value="{{ player.alloc_5 }}" class="form-control">
</div>

<div style="margin-bottom: 16px;">
    <label><strong>Student 6 — international student from {{ profiles.5 }}</strong></label>
    <input type="number" name="alloc_6" min="0" max="60" step="1" value="{{ player.alloc_6 }}" class="form-control">
</div>

<p><strong>Total allocated: <span id="running-total">0</span> / 60</strong></p>
<p id="total-message"></p>

<div style="display: flex; justify-content: space-between; margin-top: 20px;">
    <div>{{ back_button }}</div>
    <div><button id="continue-btn" class="btn btn-primary" disabled>Continue</button></div>
</div>

<script>
    function getInputValue(name) {
        const input = document.querySelector(`input[name="${name}"]`);
        if (!input) return 0;
        const value = parseInt(input.value, 10);
        return isNaN(value) ? 0 : value;
    }

    function updateTotal() {
        let total = 0;
        for (let i = 1; i <= 6; i++) {
            total += getInputValue(`alloc_${i}`);
        }

        document.getElementById('running-total').textContent = total;

        const msg = document.getElementById('total-message');
        const btn = document.getElementById('continue-btn');

        if (total === 60) {
            msg.textContent = 'Total is correct. You can continue.';
            msg.style.color = 'green';
            btn.disabled = false;
        } else if (total < 60) {
            msg.textContent = 'Please allocate all 60 minutes.';
            msg.style.color = 'red';
            btn.disabled = true;
        } else {
            msg.textContent = 'You allocated more than 60 minutes.';
            msg.style.color = 'red';
            btn.disabled = true;
        }
    }

    function delayedUpdate() {
        setTimeout(updateTotal, 0);
        setTimeout(updateTotal, 50);
        setTimeout(updateTotal, 150);
    }

    document.addEventListener('input', function(e) {
        if (e.target.name && e.target.name.startsWith('alloc_')) {
            updateTotal();
        }
    });

    document.addEventListener('DOMContentLoaded', delayedUpdate);
    window.addEventListener('pageshow', delayedUpdate);
</script>

{{ endblock }}