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

{% block title %}
    {% if participant.language == 'en' %}FUNI - Part 2{% else %}FUNI - 2. Teil{% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268; --primary-medium: #005f9b;
        --primary-light: #0091c8; --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a; --neutral-lightest: #ececed;
    }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--neutral-lightest); color: var(--neutral-dark); line-height: 1.6; }
    .header { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
              color: white; padding: 20px 25px; border-radius: 8px;
              margin-bottom: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .header h1 { margin: 0; font-size: 22px; font-weight: 600; }
    .card { background: white; border-radius: 8px; padding: 30px; margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--primary-light); }
    h2 { color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
         padding-bottom: 8px; margin-top: 0; margin-bottom: 16px; font-size: 17px; }
    .info-box { background-color: var(--neutral-lightest); border-left: 4px solid var(--primary-lighter);
                padding: 13px 16px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
    .bonus-box { background-color: #e8f4eb; border-left: 4px solid #2e7d40;
                 padding: 13px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; }
    .bonus-box strong { color: #2e7d40; }

    /* Token counter */
    .token-counter {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--primary-dark); color: white;
        border-radius: 6px; padding: 12px 20px; margin-bottom: 20px;
    }
    .token-counter-label { font-size: 14px; opacity: 0.85; }
    .token-counter-value { font-size: 24px; font-weight: 700; }
    .token-counter-value.over { color: #ff6b6b; }
    .token-counter-value.exact { color: #69db7c; }

    /* Allocation table */
    .allocation-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    .allocation-table th {
        background: var(--primary-dark); color: white;
        padding: 10px 8px; text-align: center; font-size: 13px; font-weight: 600;
        border: 1px solid var(--primary-medium);
    }
    .allocation-table td {
        padding: 12px 8px; text-align: center;
        border: 1px solid #dee2e6; background: white;
    }
    .allocation-table tr:hover td { background: #f5f9fc; }
    .effect-cell { font-size: 11px; color: #888; }

    .token-input {
        width: 70px; height: 40px; text-align: center;
        font-size: 16px; font-weight: 700; color: var(--primary-dark);
        border: 2px solid #dee2e6; border-radius: 6px;
        transition: border-color 0.2s ease;
    }
    .token-input:focus { outline: none; border-color: var(--primary-medium); }
    .token-input.over { border-color: #c0392b; background: #fdecea; }

    /* Hidden oTree fields */
    .hidden-field { display: none; }

    .validation-msg { color: #c0392b; font-size: 13px; font-weight: 600;
                      text-align: center; margin-top: 12px; display: none; }
    .button-section { text-align: center; margin-top: 28px; }
    .otree-btn-next { background-color: var(--primary-medium) !important; border: none !important;
                      color: white !important; padding: 12px 30px !important; border-radius: 6px !important;
                      font-size: 16px !important; font-weight: 500 !important; cursor: pointer !important;
                      transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</style>

<div class="header">
    <h1>Phase 3</h1>
</div>

<div class="card">
    <h2>{% if participant.language == 'en' %}Assessment: How Much Help Did You Receive?{% else %}Einschätzung: Wie viel Hilfe haben Sie erhalten?{% endif %}</h2>

    <div class="info-box">
        {% if participant.language == 'en' %}
            Before the result is revealed, we’d like to know your prediction regarding your
            teammate’s transfer. To do so, distribute <strong>100 tokens</strong> among the seven
            possible transfer amounts—the more tokens you place on an amount, the higher you estimate
            its probability. For example, if you are certain that your
            teammate transferred 45 points to you, place all 100 tokens in that column.
            All 100 tokens must be fully distributed.
        {% else %}
            Bevor das Ergebnis enthüllt wird, möchten wir Ihre Einschätzung zum Transfer Ihres*Ihrer
            Mitspielers*in wissen. Verteilen Sie dafür <strong>100 Token</strong> auf die sieben
            möglichen Transferbeträge – je mehr Token Sie auf einen Betrag setzen, desto höher schätzen
            Sie dessen Wahrscheinlichkeit ein. Wenn Sie beispielsweise sicher sind, dass Ihr*e
            Mitspieler*in Ihnen 45 Punkte transferiert hat, setzen Sie alle 100 Token auf diese Spalte.
            Alle 100 Token müssen vollständig verteilt werden.
        {% endif %}
    </div>

    <div class="bonus-box">
        {% if participant.language == 'en' %}
            <strong>💡 Bonus:</strong> After the actual transfer is revealed, you earn a bonus equal
            to the share of tokens you placed on the correct column, multiplied by 20 points.<br>
            <em>Bonus = (tokens on correct column ÷ 100) × 20 points.</em>
        {% else %}
            <strong>💡 Bonus:</strong> Nachdem der tatsächliche Transfer enthüllt wurde, erhalten Sie
            einen Bonus entsprechend dem Anteil der Token, die Sie auf die richtige Spalte gesetzt haben,
            multipliziert mit 20 Punkten.<br>
            <em>Bonus = (Token auf richtiger Spalte ÷ 100) × 20 Punkte.</em>
        {% endif %}
    </div>

    <!-- Live token counter -->
    <div class="token-counter">
        <span class="token-counter-label">
            {% if participant.language == 'en' %}Tokens remaining:{% else %}Verbleibende Token:{% endif %}
        </span>
        <span class="token-counter-value" id="tokensRemaining">100</span>
    </div>

    <div style="position: absolute; opacity: 0; pointer-events: none; height: 0; overflow: hidden;">
        {% formfields %}
    </div>
    <!-- Allocation table -->
    <table class="allocation-table">
        <thead>
            <tr>
                {% for opt in help_options %}
                <th>{{ opt }}<br>{% if participant.language == 'en' %}pts{% else %}Pkt.{% endif %}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            <tr>
                {% for opt in help_options %}
                <td>
                    <input type="number" class="token-input"
                           id="vis_tokens_{{ opt }}"
                           min="0" max="100"
                           placeholder="0"
                           oninput="updateTokens({{ opt }}, this.value)">
                </td>
                {% endfor %}
            </tr>
            <tr>
                {% for opt in help_options %}
                <td class="effect-cell">
                    {% if opt == 0 %}
                        {% if participant.language == 'en' %}no help{% else %}keine Hilfe{% endif %}
                    {% else %}
                        → {{ opt }} ÷ 15 × 30s
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
        </tbody>
    </table>

    <div class="validation-msg" id="val-msg">
        {% if participant.language == 'en' %}
            Please distribute exactly 100 tokens before continuing.
        {% else %}
            Bitte verteilen Sie genau 100 Token, bevor Sie fortfahren.
        {% endif %}
    </div>
</div>

<div class="button-section" id="buttonSection">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>

<script>
    const fieldMap = {
        0:  'belief_tokens_0',
        15: 'belief_tokens_15',
        30: 'belief_tokens_30',
        45: 'belief_tokens_45',
        60: 'belief_tokens_60',
        75: 'belief_tokens_75',
        90: 'belief_tokens_90',
    };

    const options = [0, 15, 30, 45, 60, 75, 90];

    function getTotal() {
        return options.reduce(function(sum, opt) {
            const val = parseInt(document.getElementById('vis_tokens_' + opt).value) || 0;
            return sum + val;
        }, 0);
    }

    function updateTokens(opt, rawValue) {
        const value = Math.max(0, parseInt(rawValue) || 0);

        // Sync to hidden oTree field by name
        const field = document.querySelector('input[name="' + fieldMap[opt] + '"]');
        if (field) field.value = value;

        document.getElementById('vis_tokens_' + opt).value = value;

        const total     = getTotal();
        const remaining = 100 - total;
        const counter   = document.getElementById('tokensRemaining');
        counter.textContent = remaining;
        counter.className   = 'token-counter-value' +
            (remaining < 0 ? ' over' : (remaining === 0 ? ' exact' : ''));

        const btnCounter = document.getElementById('tokensRemainingBtn');
        if (btnCounter) btnCounter.textContent = remaining;

        options.forEach(function(o) {
            document.getElementById('vis_tokens_' + o).classList.toggle('over', total > 100);
        });

        document.getElementById('val-msg').style.display = 'none';
        const msgBtn = document.getElementById('val-msg-btn');
        if (msgBtn) msgBtn.style.display = 'none';
    }

    // Validate on submit
    document.querySelector('form').addEventListener('submit', function(e) {
        if (getTotal() !== 100) {
            e.preventDefault();
            const msg = document.getElementById('val-msg');
            const msgBtn = document.getElementById('val-msg-btn');
            msg.style.display = 'block';
            if (msgBtn) msgBtn.style.display = 'block';
            msg.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });
</script>
{% endblock %}