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

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

{% block content %}

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

    .intro-card, .decision-card, .reflection-card {
        background: #ffffff;
        border: 1px solid #dbe5ef;
        border-radius: 20px;
        padding: 1.4rem 1.4rem 1.25rem;
        box-shadow: 0 10px 28px rgba(15, 41, 77, 0.08);
    }

    .intro-card {
        margin-bottom: 1.6rem;
    }

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

    .reflection-card {
        margin-top: 0;
        margin-bottom: 1.6rem;
        display: none;
    }

    .intro-text {
        font-size: 1.04rem;
        line-height: 1.65;
    }

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

    .field-block {
        margin-top: 0.9rem;
    }

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

    .effort-input {
        width: 100%;
        max-width: 220px;
        border: 1px solid #bbc9d8;
        border-radius: 10px;
        padding: 0.7rem 0.8rem;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .effort-input[readonly] {
        background: #f4f7fb;
        color: #516171;
        cursor: not-allowed;
    }

    .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;
    }

    .inline-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        align-items: center;
        margin-top: 1.1rem;
    }

    .locked-banner {
        display: none;
        margin-top: 1rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background: #eef6ff;
        border: 1px solid #c8dcf5;
        color: #1c4d7d;
        font-weight: 600;
    }

    .confirm-warning {
        display: none;
        margin-top: 0.9rem;
        color: #b42318;
        font-weight: 600;
    }

    .submit-row {
        text-align: right;
        margin-top: 1.3rem;
        display: none;
    }
</style>

<div class="page-wrap">
    <div class="intro-card">
        <div class="intro-text">
            <b>You are a <span style="color: darkblue;">DARK BLUE</span> player.</b><br><br>
            <b>Your specific project number is {{ Constants.Specific_Project_Dark }}.</b><br><br>
            First choose your <b>effort</b> in this round and click <b>Confirm effort</b>.
        </div>
    </div>

    {{ formfield_errors 'Effort_Dark' }}
    {{ formfield_errors 'Effort_Dark_Explanation' }}

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

        <div class="field-block">
            <label for="Effort_Dark">Effort choice (between 0 and 100)</label>
            <input
                type="number"
                id="Effort_Dark"
                name="Effort_Dark"
                min="0"
                max="100"
                step="1"
                class="effort-input"
                required
            >
        </div>

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

        <div id="locked-banner-dark" class="locked-banner">
            Effort locked on this page: <span id="locked-effort-value-dark"></span>
        </div>

        <div id="confirm-warning-dark" class="confirm-warning">
            Please choose an effort and click “Confirm effort” before submitting the page.
        </div>
    </div>

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

        <div class="field-block">
            <label for="Effort_Dark_Explanation">
                {% if current_round == 1 %}
                    Please briefly explain what you considered when choosing your effort in this round.
                {% else %}
                    If you adjusted your effort relative to previous rounds, please briefly explain what, if anything, led you to do so.
                {% endif %}
            </label>

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

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

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

<script>
    (function () {
        const effortInput = document.getElementById('Effort_Dark');
        const confirmButton = document.getElementById('confirm-effort-dark');
        const reflectionCard = document.getElementById('reflection-card-dark');
        const submitRow = document.getElementById('submit-row-dark');
        const warningBox = document.getElementById('confirm-warning-dark');
        const lockedBanner = document.getElementById('locked-banner-dark');
        const lockedValue = document.getElementById('locked-effort-value-dark');
        const form = effortInput.closest('form');

        let effortConfirmed = false;

        function confirmEffort() {
            const value = effortInput.value;
            if (value === '' || Number(value) < 0 || Number(value) > 100) {
                effortInput.reportValidity();
                return;
            }

            effortConfirmed = true;
            effortInput.readOnly = true;
            confirmButton.style.display = 'none';
            warningBox.style.display = 'none';
            lockedValue.textContent = value;
            lockedBanner.style.display = 'block';
            reflectionCard.style.display = 'block';
            submitRow.style.display = 'block';
        }

        confirmButton.addEventListener('click', confirmEffort);

        form.addEventListener('submit', function (event) {
            if (!effortConfirmed) {
                event.preventDefault();
                warningBox.style.display = 'block';
                effortInput.focus();
            }
        });
    })();
</script>

{% endblock %}