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

{% block title %}Select Treatment{% endblock %}
{% block content %}

<style>
    .treatment-btn {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 10px auto;
        padding: 20px 30px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border: 2px solid #ccc;
        border-radius: 8px;
        cursor: pointer;
        background-color: #f8f9fa;
    }
    .treatment-btn:hover {
        background-color: #e2e6ea;
    }
    .treatment-btn.selected {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    #next-btn {
        display: none;
        margin-top: 20px;
    }
</style>

<p>Select the treatment condition for this session:</p><br>

<input type="hidden" name="treatment" id="treatment-input" value="">

<button type="button" class="treatment-btn" onclick="selectTreatment('ypym', this)">
    ypym &mdash; Promotion w/ Marketability
</button>
<button type="button" class="treatment-btn" onclick="selectTreatment('ypnm', this)">
    ypnm &mdash; Promotion w/o Marketability
</button>
<button type="button" class="treatment-btn" onclick="selectTreatment('npym', this)">
    npym &mdash; No Promotion w/ Marketability
</button>
<button type="button" class="treatment-btn" onclick="selectTreatment('npnm', this)">
    npnm &mdash; No Promotion w/o Marketability
</button>

<br>
<button id="next-btn" type="submit" class="btn btn-primary btn-lg">Next</button>

<script>
function selectTreatment(value, btn) {
    document.getElementById('treatment-input').value = value;
    document.querySelectorAll('.treatment-btn').forEach(function(b) {
        b.classList.remove('selected');
    });
    btn.classList.add('selected');
    document.getElementById('next-btn').style.display = 'inline-block';
}
</script>

{% endblock %}