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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% 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 0 4px 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: 14px;
        font-size: 17px;
    }

    /* ── Table ── */
    .lottery-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .lottery-table th {
        background-color: var(--primary-dark);
        color: white;
        padding: 11px 12px;
        text-align: center;
        font-weight: 600;
        font-size: 13px;
    }

    .lottery-table th.col-a {
        background-color: var(--primary-medium);
    }

    .lottery-table th.col-b {
        background-color: var(--primary-lighter);
    }

    .lottery-table td {
        padding: 12px 10px;
        text-align: center;
        border-bottom: 1px solid var(--neutral-lightest);
        vertical-align: middle;
        color: var(--neutral-dark);
    }

    .lottery-table tr:last-child td {
        border-bottom: none;
    }

    .lottery-table tr:hover td {
        background-color: #f5faff;
    }

    .lottery-table tr.selected-a td.col-a-cell {
        background-color: #d4edff;
    }

    .lottery-table tr.selected-b td.col-b-cell {
        background-color: #d9ecf5;
    }

    .decision-num {
        font-weight: 700;
        color: var(--primary-dark);
        font-size: 15px;
    }

    .col-a-cell {
        background-color: #f0f8ff;
    }

    .col-b-cell {
        background-color: #f4f9fc;
    }

    .outcome-line {
        margin: 3px 0;
        line-height: 1.4;
    }

    .outcome-line strong {
        color: var(--primary-dark);
    }

    .prob-note {
        font-size: 11px;
        color: #888;
    }

    /* ── Radio buttons ── */
    .choice-cell {
        min-width: 110px;
    }

    .choice-cell label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        color: var(--primary-dark);
    }

    .choice-cell input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary-medium);
    }

    /* ── Button ── */
    .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);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    @media (max-width: 680px) {
        .lottery-table { font-size: 11px; }
        .lottery-table th, .lottery-table td { padding: 8px 6px; }
        .choice-cell label { margin: 0 4px; }
    }
</style>

<div class="header">
    <h1>
        {% if participant.language == 'en' %}Task 2{% else %}Aufgabe 2{% endif %}
    </h1>
</div>

<div class="card">
    <h2>{% if participant.language == 'en' %}Lottery Decisions{% else %}Lotterie-Entscheidungen{% endif %}</h2>
    <table class="lottery-table">
        <thead>
            <tr>
                <th style="width:8%;">
                    {% if participant.language == 'en' %}Decision{% else %}Entscheidung{% endif %}
                </th>
                <th class="col-a" style="width:33%;">
                    {% if participant.language == 'en' %}Option A (safer){% else %}Option A (sicherer){% endif %}
                </th>
                <th class="col-b" style="width:33%;">
                    {% if participant.language == 'en' %}Option B (riskier){% else %}Option B (riskanter){% endif %}
                </th>
                <th style="width:26%;">
                    {% if participant.language == 'en' %}Your choice{% else %}Ihre Wahl{% endif %}
                </th>
            </tr>
        </thead>
        <tbody>
            {% for lottery in lotteries %}
            <tr id="row-{{ lottery.decision }}">
                <td class="decision-num">{{ lottery.decision }}</td>

                <td class="col-a-cell">
                    <div class="outcome-line">
                        <strong>{{ lottery.option_a_high }} €</strong>
                        {% if participant.language == 'en' %}with{% else %}mit{% endif %}
                        {{ lottery.prob_high }}0 %
                    </div>
                    <div class="outcome-line">
                        <strong>{{ lottery.option_a_low }} €</strong>
                        {% if participant.language == 'en' %}with{% else %}mit{% endif %}
                        {{ lottery.prob_low }}0 %
                    </div>
                </td>

                <td class="col-b-cell">
                    <div class="outcome-line">
                        <strong>{{ lottery.option_b_high }} €</strong>
                        {% if participant.language == 'en' %}with{% else %}mit{% endif %}
                        {{ lottery.prob_high }}0 %
                    </div>
                    <div class="outcome-line">
                        <strong>{{ lottery.option_b_low }} €</strong>
                        {% if participant.language == 'en' %}with{% else %}mit{% endif %}
                        {{ lottery.prob_low }}0 %
                    </div>
                </td>

                <td class="choice-cell">
                    <label>
                        <input type="radio" name="{{ lottery.field_name }}" value="A" required>
                        A
                    </label>
                    <label>
                        <input type="radio" name="{{ lottery.field_name }}" value="B" required>
                        B
                    </label>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

</div>

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
            radio.addEventListener('change', function () {
                const row = this.closest('tr');
                // Reset row classes
                row.classList.remove('selected-a', 'selected-b');
                row.querySelectorAll('td').forEach(function (td) {
                    td.style.backgroundColor = '';
                });
                // Highlight chosen column
                if (this.value === 'A') {
                    row.querySelector('.col-a-cell').style.backgroundColor = '#c8e6ff';
                } else {
                    row.querySelector('.col-b-cell').style.backgroundColor = '#c5e1f5';
                }
            });
        });
    });
</script>

{% endblock %}