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

{% block title %}
Choice Round {{ current_round }}
{% endblock %}

{% block content %}

<style>
    .page-wrap {
        max-width: 1100px;
        margin: 0 auto;
    }

    .decision-card,
    .reflection-card {
        background: #ffffff;
        border: 1px solid #dbe5ef;
        border-radius: 18px;
        padding: 1.35rem 1.35rem 1.2rem;
        box-shadow: 0 8px 24px rgba(15, 41, 77, 0.08);
    }

    .decision-card {
        margin-bottom: 1.4rem;
    }

    .reflection-card {
        display: none;
        margin-bottom: 1.4rem;
    }

    .section-title {
        font-weight: 700;
        font-size: 1.08rem;
        margin-bottom: 0.9rem;
    }

    .top-instruction {
        margin-bottom: 1.2rem;
        line-height: 1.5;
        font-size: 1rem;
    }

    .light-label {
        color: #67b7e1;
        font-weight: 700;
    }

    .dark-label {
        color: #1f4f9b;
        font-weight: 700;
    }

    .decision-visual-title {
        text-align: center;
        font-size: 0.95rem;
        line-height: 1.35;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.85rem;
    }

    .visual-wrap {
        width: 860px;
        margin: 0 auto 1.2rem auto;
    }

    .rule-panel {
        position: relative;
        width: 860px;
        height: 150px;
        margin: 0 auto;
        background: transparent;
        border: none;
    }

    .rule-label {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        text-align: center;
        font-weight: 700;
        font-size: 1rem;
        pointer-events: none;
        white-space: nowrap;
    }

    .rule-label-left {
        left: 25%;
        color: #1f4f9b;
    }

    .rule-label-right {
        left: 75%;
        color: #67b7e1;
    }

    .threshold-line {
        position: absolute;
        top: -12px;
        bottom: -12px;
        width: 4px;
        background: #e03131;
        pointer-events: none;
        display: none;
    }

    .axis-shell {
        position: relative;
        width: 860px;
        height: 90px;
        margin: 0 auto;
    }

    .axis-line {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        height: 3px;
        background: #b8c2cc;
        border-radius: 999px;
    }

    .axis-tick {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-size: 0.82rem;
        color: #475569;
        text-align: center;
        white-space: nowrap;
    }

    .axis-tick::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 28px;
        width: 2px;
        height: 10px;
        background: #94a3b8;
        transform: translateX(-50%);
    }

    .threshold-badge {
        position: absolute;
        top: 56px;
        transform: translateX(-50%);
        background: #ffffff;
        color: #d72c32;
        border: 1px solid #f0b0b4;
        border-radius: 999px;
        padding: 0.16rem 0.45rem;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
        display: none;
    }

    .slider-shell {
        position: relative;
        width: 860px;
        height: 70px;
        margin: 0.15rem auto 0 auto;
    }

    .slider-caption {
        text-align: center;
        font-size: 0.82rem;
        color: #475569;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }

    .horizontal-range {
        width: 100%;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }

    .horizontal-range:focus {
        outline: none;
    }

    .horizontal-range::-webkit-slider-runnable-track {
        height: 7px;
        background: #d7dde4;
        border-radius: 999px;
    }

    .horizontal-range::-webkit-slider-thumb {
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        box-shadow: none;
        margin-top: -8px;
    }

    .horizontal-range.is-active::-webkit-slider-thumb {
        background: #e03131;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .horizontal-range::-moz-range-track {
        height: 7px;
        background: #d7dde4;
        border-radius: 999px;
    }

    .horizontal-range::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .horizontal-range.is-active::-moz-range-thumb {
        background: #e03131;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .horizontal-range.is-locked {
        pointer-events: none;
        opacity: 0.75;
        cursor: not-allowed;
    }

    .rule-text-block {
        max-width: 950px;
        margin: 0.3rem auto 0 auto;
        line-height: 1.55;
        font-size: 1rem;
        display: none;
    }

    .rule-line {
        margin-top: 0.55rem;
    }

    .note-line {
        margin-top: 0.65rem;
        font-size: 0.92rem;
        line-height: 1.5;
        color: #5d6b79;
    }

    .math-block {
        max-width: 950px;
        margin: 1rem auto 0 auto;
        padding-top: 0.9rem;
        border-top: 1px solid #e2e8f0;
        font-size: 0.98rem;
        line-height: 1.55;
        display: none;
    }

    .math-title {
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .math-line {
        margin-top: 0.25rem;
    }

    .inline-actions {
        width: 860px;
        margin: 1.15rem auto 0 auto;
        display: flex;
        justify-content: center;
    }

    .confirm-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .locked-banner {
        display: none;
        max-width: 950px;
        margin: 0.95rem auto 0 auto;
        padding: 0.8rem 1rem;
        border-radius: 12px;
        background: #eef6ff;
        border: 1px solid #c8dcf5;
        color: #1c4d7d;
        font-weight: 600;
        text-align: center;
    }

    .confirm-warning {
        display: none;
        margin-top: 0.85rem;
        color: #b42318;
        font-weight: 600;
        text-align: center;
    }

    .reflection-label {
        display: block;
        font-weight: 700;
        margin-bottom: 0.6rem;
        line-height: 1.45;
    }

    .reflection-textarea {
        width: 100%;
        min-height: 140px;
        border: 1px solid #bbc9d8;
        border-radius: 10px;
        padding: 0.75rem 0.85rem;
        font-size: 1rem;
        box-sizing: border-box;
        resize: vertical;
    }

    .small-note {
        margin-top: 0.5rem;
        color: #5d6b79;
        font-size: 0.92rem;
    }

    .submit-row {
        text-align: right;
        display: none;
    }

    @media (max-width: 900px) {
        .visual-wrap,
        .axis-shell,
        .slider-shell,
        .rule-panel,
        .inline-actions {
            width: 100%;
        }
    }
</style>

<div class="page-wrap">
    {{ formfield_errors 'Decision_Principal' }}
    {{ formfield_errors 'Decision_Principal_Explanation' }}

    <input type="hidden" name="Decision_Principal" id="Decision_Principal_hidden" value="">

    <div class="decision-card">
        <div class="section-title">Your decision</div>

        <div class="top-instruction">
            You are the <span style="color: mediumseagreen; font-weight:700;">GREEN</span> player.
            Click on the slider to choose the threshold, then click <b>Confirm threshold</b>.
        </div>

        <div class="decision-visual-title">
            Difference in output:
            <span class="light-label">Light Blue</span> −
            <span class="dark-label">Dark Blue</span>
        </div>

        <div class="visual-wrap">
            <div class="rule-panel">
                <div class="rule-label rule-label-left" id="dark_wins_label">DARK BLUE wins</div>
                <div class="threshold-line" id="Decision_Principal_line"></div>
                <div class="rule-label rule-label-right" id="light_wins_label">LIGHT BLUE wins</div>
            </div>

            <div class="axis-shell">
                <div class="axis-line"></div>

                <div class="axis-tick" style="left:0%;">-120</div>
                <div class="axis-tick" style="left:8.333%;">-100</div>
                <div class="axis-tick" style="left:16.667%;">-80</div>
                <div class="axis-tick" style="left:25%;">-60</div>
                <div class="axis-tick" style="left:33.333%;">-40</div>
                <div class="axis-tick" style="left:41.667%;">-20</div>
                <div class="axis-tick" style="left:50%;">0</div>
                <div class="axis-tick" style="left:58.333%;">20</div>
                <div class="axis-tick" style="left:66.667%;">40</div>
                <div class="axis-tick" style="left:75%;">60</div>
                <div class="axis-tick" style="left:83.333%;">80</div>
                <div class="axis-tick" style="left:91.667%;">100</div>
                <div class="axis-tick" style="left:100%;">120</div>

                <div class="threshold-badge" id="Decision_Principal_badge">0</div>
            </div>

            <div class="slider-shell">
                <div class="slider-caption">Move left/right</div>
                <input
                    type="range"
                    id="Decision_Principal_slider"
                    value="0"
                    step="1"
                    min="-120"
                    max="120"
                    class="horizontal-range"
                >
            </div>
        </div>

        <div class="rule-text-block" id="rule_text_block">
            <div class="rule-line" id="light_rule_text"></div>
            <div class="note-line" id="tie_rule_text"></div>
        </div>

        <div class="math-block" id="math_block">
            <div class="math-title">Mathematical expression:</div>
            <div class="math-line" id="light_math_text"></div>
            <div class="math-line" id="dark_math_text"></div>
            <div class="math-line" id="tie_math_text"></div>
        </div>

        <div class="inline-actions">
            <button type="button" id="confirm-threshold-btn" class="btn btn-primary confirm-btn" disabled>Confirm threshold</button>
        </div>

        <div id="locked-banner-principal" class="locked-banner">
            Threshold locked on this page: <span id="locked-threshold-value"></span>
        </div>

        <div id="confirm-warning-principal" class="confirm-warning">
            Please click on the slider and then click “Confirm threshold”.
        </div>
    </div>

    <div id="reflection-card-principal" class="reflection-card">
        <div class="section-title">Short explanation</div>

        <label class="reflection-label" for="Decision_Principal_Explanation">
            {% if current_round == 2 %}
                Please briefly explain what you considered when choosing the threshold in this round.
            {% else %}
                If you adjusted your threshold relative to previous rounds, please briefly explain what, if anything, led you to do so.
            {% endif %}
        </label>

        <textarea
            id="Decision_Principal_Explanation"
            name="Decision_Principal_Explanation"
            rows="5"
            class="reflection-textarea"
            {% if current_round == 2 %}required{% endif %}
        ></textarea>

        {% if current_round > 2 %}
            <div class="small-note">You may leave this field empty if nothing changed.</div>
        {% endif %}
    </div>

    <div id="submit-row-principal" class="submit-row">
        <input type="submit" class="btn btn-primary btn-large" value="Submit" style="height:50px;width:200px">
    </div>
</div>

<script>
    function signedNumber(n) {
        return n > 0 ? `+${n}` : `${n}`;
    }

    function updateThresholdVisual(value) {
        const slider = document.getElementById('Decision_Principal_slider');
        const line = document.getElementById('Decision_Principal_line');
        const badge = document.getElementById('Decision_Principal_badge');
        const lightWinsLabel = document.getElementById('light_wins_label');
        const darkWinsLabel = document.getElementById('dark_wins_label');

        const min = parseInt(slider.min, 10);
        const max = parseInt(slider.max, 10);
        const pct = ((value - min) / (max - min)) * 100;

        line.style.left = `calc(${pct}% - 2px)`;
        badge.style.left = `${pct}%`;
        badge.textContent = signedNumber(value);

        darkWinsLabel.style.left = `${pct / 2}%`;
        lightWinsLabel.style.left = `${(pct + 100) / 2}%`;
    }

    function updateThresholdText(value) {
        const lightRule = document.getElementById('light_rule_text');
        const tieRule = document.getElementById('tie_rule_text');

        const lightMath = document.getElementById('light_math_text');
        const darkMath = document.getElementById('dark_math_text');
        const tieMath = document.getElementById('tie_math_text');

        const lightColor = '<span class="light-label">LIGHT BLUE</span>';
        const darkColor = '<span class="dark-label">DARK BLUE</span>';
        const lightMinusDark = `${lightColor} − ${darkColor}`;

        if (value > 0) {
            lightRule.innerHTML =
                `If ${lightColor}’s work output is higher than ${darkColor}’s work output by <b>more than ${value}</b> points, ${lightColor} receives the high payment.`;

            tieRule.innerHTML =
                `<b>Note:</b> If ${lightColor}’s work output is <b>exactly ${value}</b> points higher than ${darkColor}’s work output, the high payment is randomly allocated between the two BLUE players.`;
        } else if (value < 0) {
            const absValue = Math.abs(value);

            lightRule.innerHTML =
                `If ${darkColor}’s work output is higher than ${lightColor}’s work output by <b>more than ${absValue}</b> points, ${darkColor} receives the high payment.`;

            tieRule.innerHTML =
                `<b>Note:</b> If ${darkColor}’s work output is <b>exactly ${absValue}</b> points higher than ${lightColor}’s work output, the high payment is randomly allocated between the two BLUE players.`;
        } else {
            lightRule.innerHTML =
                `If ${lightColor}’s work output is <b>higher</b> than ${darkColor}’s work output, ${lightColor} receives the high payment.`;

            tieRule.innerHTML =
                `<b>Note:</b> If both BLUE players have <b>exactly the same</b> work output, the high payment is randomly allocated between the two BLUE players.`;
        }

        lightMath.innerHTML =
            `${lightColor} wins: ${lightMinusDark} <b>&gt; ${value}</b>`;

        darkMath.innerHTML =
            `${darkColor} wins: ${lightMinusDark} <b>&lt; ${value}</b>`;

        tieMath.innerHTML =
            `Random allocation: ${lightMinusDark} <b>= ${value}</b>`;
    }

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('form');
        const slider = document.getElementById('Decision_Principal_slider');
        const hidden = document.getElementById('Decision_Principal_hidden');
        const confirmButton = document.getElementById('confirm-threshold-btn');
        const reflectionCard = document.getElementById('reflection-card-principal');
        const submitRow = document.getElementById('submit-row-principal');
        const warningBox = document.getElementById('confirm-warning-principal');
        const lockedBanner = document.getElementById('locked-banner-principal');
        const lockedValue = document.getElementById('locked-threshold-value');
        const badge = document.getElementById('Decision_Principal_badge');
        const line = document.getElementById('Decision_Principal_line');
        const ruleTextBlock = document.getElementById('rule_text_block');
        const mathBlock = document.getElementById('math_block');

        let thresholdConfirmed = false;
        let sliderActivated = false;

        function activateSliderIfNeeded() {
            if (!sliderActivated) {
                sliderActivated = true;
                slider.classList.add('is-active');
                badge.style.display = 'block';
                line.style.display = 'block';
                ruleTextBlock.style.display = 'block';
                mathBlock.style.display = 'block';
                confirmButton.disabled = false;
            }
        }

        function refreshAll() {
            const value = parseInt(slider.value, 10);
            updateThresholdVisual(value);
            updateThresholdText(value);
        }

        function handleFirstInteraction() {
            activateSliderIfNeeded();
            refreshAll();
        }

        function confirmThreshold() {
            if (!sliderActivated) {
                return;
            }

            const displayedValue = parseInt(slider.value, 10);

            hidden.value = displayedValue;
            thresholdConfirmed = true;

            slider.disabled = true;
            slider.classList.add('is-locked');
            confirmButton.style.display = 'none';
            warningBox.style.display = 'none';

            lockedValue.textContent = signedNumber(displayedValue);
            lockedBanner.style.display = 'block';
            reflectionCard.style.display = 'block';
            submitRow.style.display = 'block';
        }

        slider.addEventListener('mousedown', handleFirstInteraction);
        slider.addEventListener('touchstart', handleFirstInteraction, { passive: true });
        slider.addEventListener('keydown', handleFirstInteraction);
        slider.addEventListener('input', function () {
            activateSliderIfNeeded();
            refreshAll();
        });
        slider.addEventListener('change', function () {
            activateSliderIfNeeded();
            refreshAll();
        });

        confirmButton.addEventListener('click', confirmThreshold);

        form.addEventListener('submit', function (event) {
            if (!thresholdConfirmed || hidden.value === '') {
                event.preventDefault();
                warningBox.style.display = 'block';
            }
        });
    });
</script>

{% endblock %}