{% block title %}
Splitting $10
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right; position: relative; z-index: 10;">Skip</button>
{{ endif }}

<div class="container">
    <div class="alert alert-secondary">
        <h5 class="alert-heading">Remember scenario {{ dg_round }}: {{ dg_config.page_title }}</h5>

        <p class="text-muted small">
            {{ dg_config.description }}
            <button class="btn btn-outline-secondary btn-sm py-0 px-1 ms-1" type="button"
                    data-bs-toggle="modal" data-bs-target="#detailsModal" style="font-size: 0.8rem;">
                Click here for the details
            </button>
        </p>

        <p>Based on your answers in this scenario, <strong>if John WILL NOT learn</strong> {{ dg_config.learns_question }}, we think that you are (close to) indifferent between the following two options:</p>

        <div class="card mb-2">
            <div class="card-body">
                <strong>Option A:</strong> {{ option_a_text }}
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body">
                <strong>Option B:</strong> {{ option_b_text }}
            </div>
        </div>

        <div class="mb-0">
            {{ formfield_errors 'dg_indifferent' }}
            <strong>Are you (close to) indifferent between Options A and B?</strong>
            <div class="form-check form-check-inline ms-2">
                <input class="form-check-input" type="radio" name="dg_indifferent" id="dg_indifferent_yes" value="True">
                <label class="form-check-label" for="dg_indifferent_yes">Yes</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="dg_indifferent" id="dg_indifferent_no" value="False">
                <label class="form-check-label" for="dg_indifferent_no">No</label>
            </div>
        </div>
        <p class="text-muted small mb-0" id="hintIndifferent">The question below will become enabled once you answer the question above.</p>
    </div>

    {% if incentivized %}
    <div class="alert alert-warning">
        <strong>Remember:</strong> Your choices are real and may be actually implemented. Please answer carefully.
    </div>
    {% endif %}

    <div class="card mb-3 disabled-section" id="comparisonCard">
        <div class="card-body">
            <p class="fw-bold">Compare Option A and Option B. Is John better off receiving Option A, receiving Option B, or is it the same?</p>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="dg_comparison" value="same" disabled>
                <label class="form-check-label">It is the same, both options are roughly equally good for John</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="dg_comparison" value="a_better" disabled>
                <label class="form-check-label">John is better off with Option A</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="dg_comparison" value="b_better" disabled>
                <label class="form-check-label">John is better off with Option B</label>
            </div>
        </div>
        <p class="text-muted small mb-0" id="hintComparison">The button below will become enabled once you answer the question above.</p>
    </div>

    <div class="text-center mb-3" id="revealBtnContainer">
        <button type="button" class="btn btn-outline-primary" id="revealSplitBtn" disabled>
            Click here to continue
        </button>
    </div>

    <div id="splitSection" style="display: none;">
        <p><strong>You will decide how to split $10 between yourself and John under Option A and under Option B.
        One option will be randomly selected and implemented, and your decision for that option will determine the final payment.</strong></p>

        <div class="card mb-3">
            <div class="card-body">
                <h6>If Option A is implemented</h6>
                <div class="row align-items-center mt-2">
                    <div class="col-auto">
                        <label class="form-label fw-bold">You receive: $</label>
                    </div>
                    <div class="col-2">
                        <input type="number" name="dg_split_a" id="id_dg_split_a" class="form-control"
                               min="0" max="10" value="" oninput="updateDG('a')">
                    </div>
                    <div class="col-auto">
                        <label class="form-label fw-bold">John receives: $<span id="dg_john_a">&mdash;</span></label>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h6>If Option B is implemented</h6>
                <div class="row align-items-center mt-2">
                    <div class="col-auto">
                        <label class="form-label fw-bold">You receive: $</label>
                    </div>
                    <div class="col-2">
                        <input type="number" name="dg_split_b" id="id_dg_split_b" class="form-control"
                               min="0" max="10" value="" oninput="updateDG('b')">
                    </div>
                    <div class="col-auto">
                        <label class="form-label fw-bold">John receives: $<span id="dg_john_b">&mdash;</span></label>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-end"><button class="btn btn-primary btn-large">Next</button></div>
    </div>
</div>

<!-- ===== Details Modal ===== -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Scenario {{ dg_round }}: {{ dg_config.page_title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modalBodyDG">
                <h6>Scenario Description</h6>
                {% if dg_app_name == "books" %}
                    {% include "welfare_study/includes/app_books.html" %}
                {% elif dg_app_name == "misuse" %}
                    {% include "welfare_study/includes/app_misuse.html" %}
                {% elif dg_app_name == "surveillance" %}
                    {% include "welfare_study/includes/app_surveillance.html" %}
                {% elif dg_app_name == "eggs" %}
                    {% include "welfare_study/includes/app_eggs.html" %}
                {% elif dg_app_name == "song" %}
                    {% include "welfare_study/includes/app_song.html" %}
                {% elif dg_app_name == "catfishing" %}
                    {% include "welfare_study/includes/app_catfishing.html" %}
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    .disabled-section {
        opacity: 0.35;
        pointer-events: none;
    }
</style>

<script>
function updateDG(caseType) {
    const input = document.getElementById('id_dg_split_' + caseType);
    const johnSpan = document.getElementById('dg_john_' + caseType);
    const val = parseInt(input.value);
    if (!isNaN(val) && val >= 0 && val <= 10) {
        johnSpan.textContent = 10 - val;
    } else {
        johnSpan.textContent = '\u2014';
    }
}

document.getElementById('revealSplitBtn').addEventListener('click', function() {
    document.getElementById('splitSection').style.display = '';
    document.getElementById('revealBtnContainer').style.display = 'none';
});

document.addEventListener('DOMContentLoaded', function() {
    updateDG('a');
    updateDG('b');

    // Enable comparison card when indifference question is answered
    document.querySelectorAll('input[name="dg_indifferent"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var card = document.getElementById('comparisonCard');
            card.classList.remove('disabled-section');
            card.querySelectorAll('input').forEach(function(inp) { inp.disabled = false; });
            document.getElementById('hintIndifferent').style.display = 'none';
        });
    });

    // Enable collapsible button when comparison question is answered
    document.querySelectorAll('input[name="dg_comparison"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.getElementById('revealSplitBtn').disabled = false;
            document.getElementById('hintComparison').style.display = 'none';
        });
    });

    // Modal: expand collapses and hide inner navigation buttons
    var container = document.getElementById('modalBodyDG');
    if (container) {
        container.querySelectorAll('.collapse').forEach(function(el) {
            el.classList.add('show');
        });
        container.querySelectorAll('#AdditionalInstructions').forEach(function(el) {
            el.style.display = 'none';
        });
        container.querySelectorAll('button').forEach(function(el) {
            var text = el.textContent.trim();
            if (text === 'Next' || text === 'Read more') {
                el.style.display = 'none';
            }
        });
        container.querySelectorAll('p').forEach(function(el) {
            if (el.textContent.indexOf('When you are ready') !== -1) {
                el.style.display = 'none';
            }
        });
    }
});
</script>

{% endblock %}