{{ block title }}Your Payment{{ endblock }}

{{ block content }}
<div class="exp-card">

    <h3 style="color:#1a4f5a; margin-bottom:16px;">Selected Decision</h3>

    <p style="color:#6b7280; font-size:.9rem; margin-bottom:20px;">
        Recall that Monetary Units (MU) are converted to EUR at the rate
        <strong>1 MU = €{{ mu_to_eur }}</strong>.
    </p>

    <div id="payment-content" style="line-height:1.7; color:#1e2228;">
        <!-- filled by JS -->
    </div>

</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    {{ next_button }}
</div>

<script type="application/json" id="payment-data">{{ payment_info }}</script>

<script>
const INFO    = JSON.parse(document.getElementById('payment-data').textContent);
const SHOWUP  = {{ showup_fee }};
const MU_RATE = {{ mu_to_eur }};
const el      = document.getElementById('payment-content');

function fmt(x)    { return parseFloat(x).toFixed(2); }
function fmtMU(x)  { return fmt(x) + ' MU'; }
function fmtEUR(x) { return '€' + fmt(x); }

// ── Task descriptions (what the participant did) ──────────────────────────────
const TASK_DESC = {
    pref:          'decided between options and gave your preference strength',
    threshold:     'gave your threshold for deciding between options',
    norm:          'saw the behaviour of the earlier group and decided between options',
    app:           'rated the social appropriateness of different options',
    rule_following:'allocated balls between the two urns',
};

// ── Option description helpers ────────────────────────────────────────────────
function allocationDesc(INFO) {
    const own      = INFO.own_payoff_mu ?? INFO.own_payoff;
    const transfer = INFO.transfer_mu   ?? INFO.transfer;
    const mult     = INFO.multiplier;
    const other    = INFO.other_payoff_mu ?? INFO.other_payoff;
    const totalEUR = INFO.total_eur ?? fmt(SHOWUP + own * MU_RATE);
    const bonusEUR = fmt(own * MU_RATE);

    return {
        optionDesc: `keeps <strong>${fmtMU(own)}</strong> for yourself and sends
            <strong>${fmtMU(transfer)}</strong> to the other person
            (who receives <strong>${fmtMU(other)}</strong> after multiplication by ${mult})`,
        payBox: `
            <table style="border-collapse:collapse; margin:16px 0; width:100%; max-width:400px;">
                <tr style="border-bottom:1px solid #ddd8ce;">
                    <td style="padding:8px 12px; color:#6b7280;">Your MU earnings</td>
                    <td style="padding:8px 12px; font-weight:bold; text-align:right;">${fmtMU(own)}</td>
                </tr>
                <tr style="border-bottom:1px solid #ddd8ce;">
                    <td style="padding:8px 12px; color:#6b7280;">Other person's earnings</td>
                    <td style="padding:8px 12px; font-weight:bold; text-align:right;">${fmtMU(other)}</td>
                </tr>
            </table>
            <div class="pay-box">
                <strong>Your total payment:</strong><br>
                Showup fee ${fmtEUR(SHOWUP)} + bonus ${fmtMU(own)} (= ${fmtEUR(bonusEUR)})
                = <strong>${fmtEUR(totalEUR)}</strong>
            </div>`,
    };
}

function lotteryDesc(INFO) {
    const lOut    = INFO.left_outcome    ?? INFO.chosen_left_outcome;
    const rOut    = INFO.right_outcome   ?? INFO.chosen_right_outcome;
    const pLeft   = INFO.prob_left       ?? INFO.chosen_prob_left;
    const outcome = INFO.realised_outcome;
    const totalEUR = INFO.total_eur ?? fmt(SHOWUP + outcome * MU_RATE);
    const bonusEUR = fmt(outcome * MU_RATE);
    const pLeftPct  = Math.round(pLeft * 100);
    const pRightPct = Math.round((1 - pLeft) * 100);

    let optionDesc;
    if (pLeft >= 0.999) {
        optionDesc = `pays a certain <strong>${fmtMU(lOut)}</strong>`;
    } else {
        optionDesc = `pays <strong>${fmtMU(lOut)}</strong> with ${pLeftPct}% probability
            and <strong>${fmtMU(rOut)}</strong> with ${pRightPct}% probability.
            The lottery was resolved and the outcome was <strong>${fmtMU(outcome)}</strong>`;
    }

    return {
        optionDesc,
        payBox: `
            <div class="pay-box">
                <strong>Your total payment:</strong><br>
                Showup fee ${fmtEUR(SHOWUP)} + bonus ${fmtMU(outcome)} (= ${fmtEUR(bonusEUR)})
                = <strong>${fmtEUR(totalEUR)}</strong>
            </div>`,
    };
}

// ── Render ────────────────────────────────────────────────────────────────────
const task     = INFO.selected_task;
const taskType = INFO.task_type;
const taskDesc = TASK_DESC[task] || task;
let html = '';

// Line 1: which task was selected
html += `<p>A decision from the task in which you <strong>${taskDesc}</strong>
    was selected as your payoff-relevant decision.</p>`;

if (task === 'pref' || task === 'norm') {
    const typeLabel = (taskType === 'dg' || taskType === 'allocation') ? 'an allocation' : 'a lottery';
    const { optionDesc, payBox } = (taskType === 'dg' || taskType === 'allocation')
        ? allocationDesc(INFO) : lotteryDesc(INFO);

    if (task === 'pref' && INFO.binary_choice === 'indifferent') {
        html += `<p>The payoff-relevant decision was about ${typeLabel} situation.
            In that situation you indicated that you were indifferent between the two options,
            therefore one of the options was selected randomly to determine your payment.
            The option that ${optionDesc} was randomly selected based on your reported indifference.</p>`;
    } else {
        html += `<p>The payoff-relevant decision was about ${typeLabel} situation.
            In that situation you decided for the option that ${optionDesc}.</p>`;
    }
    html += payBox;

} else if (task === 'threshold') {
    const typeLabel = (taskType === 'dg' || taskType === 'allocation') ? 'an allocation' : 'a lottery';
    const { optionDesc, payBox } = (taskType === 'dg' || taskType === 'allocation')
        ? allocationDesc(INFO) : lotteryDesc(INFO);

    html += `<p>The payoff-relevant decision was about ${typeLabel} situation.
        In that situation, your threshold and the behaviour of the earlier group implied
        that you decided for the option that ${optionDesc}.</p>`;
    html += payBox;

} else if (task === 'app') {
    const slot     = INFO.option_slot === 'a' ? 'Option A' : 'Option B';
    const rating   = INFO.rating;
    const mode     = INFO.mode;
    const matched  = INFO.matched_mode;
    const bonus    = INFO.bonus_mu;
    const totalEUR = INFO.total_eur ?? fmt(SHOWUP + bonus * MU_RATE);
    const bonusEUR = fmt(bonus * MU_RATE);

    const matchText = matched
        ? `your selected rating <strong>matched the mode of the earlier group</>strong>.
           Therefore you earn a bonus of <strong>${fmtMU(10)}</strong>.`
        : `your selected rating <strong>did not match the mode of the earlier group</strong>.
           Therefore you earn no bonus.`;

    html += `<p>In that situation, ${matchText}</p>`;
    html += `
        <div class="pay-box">
            <strong>Your total payment:</strong><br>
            Showup fee ${fmtEUR(SHOWUP)} + bonus ${fmtMU(bonus)} (= ${fmtEUR(bonusEUR)})
            = <strong>${fmtEUR(totalEUR)}</strong>
        </div>`;

} else if (task === 'rule_following') {
    const yellow   = INFO.yellow;
    const blue     = INFO.blue;
    const totalMU  = INFO.total_payoff_mu;
    const totalEUR = INFO.total_eur ?? fmt(SHOWUP + totalMU * MU_RATE);
    const bonusEUR = fmt(totalMU * MU_RATE);

    html += `<p>You allocated <strong>${yellow} balls to the yellow urn</strong> and
        <strong>${blue} balls to the blue urn</strong>,
        resulting in a payment of <strong>${fmtMU(totalMU)}</strong>.</p>`;
    html += `
        <div class="pay-box">
            <strong>Your total payment:</strong><br>
            Showup fee ${fmtEUR(SHOWUP)} + bonus ${fmtMU(totalMU)} (= ${fmtEUR(bonusEUR)})
            = <strong>${fmtEUR(totalEUR)}</strong>
        </div>`;

} else {
    html += `<p style="color:#c0392b;">Payment information could not be displayed.
        Please contact the experimenter.</p>`;
}

el.innerHTML = html;
</script>

<style>
.exp-card { background:#fff; border:1px solid #ddd8ce; border-radius:8px; padding:28px 32px; margin-bottom:20px; }
.exp-card h3 { font-size:1rem; font-weight:bold; margin:0 0 12px; }
.pay-box {
    background:#e8f4f7; border-left:4px solid #2a6e7c;
    padding:12px 16px; border-radius:0 6px 6px 0; margin:16px 0;
}
</style>

{{ endblock }}