{{ block title }}4/5{{ endblock }}
{{ block content }}
<p>Please answer the questions below:</p>

{{ formfield 'atractionsex' }}

{{ formfield 'Trans_opinion' }}

{{ formfield 'perceived_trans_social_privilege' }}

{{ formfield 'perceived_trans_econ_status' }}


{{ formfield 'knows_lgbt' }}

<div id="lgbt_details" style="display:none; margin-top:15px;">
    {{ formfield 'lgbt_connection' }}

    <label><strong>Which group(s) do they belong to? (Select all that apply)</strong></label><br>
    <input type="checkbox" class="lgbt_subgroup_cb" value="Lesbian" id="lgbt_lesbian"> <label for="lgbt_lesbian">Lesbian</label><br>
    <input type="checkbox" class="lgbt_subgroup_cb" value="Gay" id="lgbt_gay"> <label for="lgbt_gay">Gay</label><br>
    <input type="checkbox" class="lgbt_subgroup_cb" value="Bisexual" id="lgbt_bisexual"> <label for="lgbt_bisexual">Bisexual</label><br>
    <input type="checkbox" class="lgbt_subgroup_cb" value="Transgender" id="lgbt_transgender"> <label for="lgbt_transgender">Transgender</label><br>
    <input type="checkbox" class="lgbt_subgroup_cb" value="Queer" id="lgbt_queer"> <label for="lgbt_queer">Queer</label><br>

    <!-- Hidden input that will hold the joined checkbox values for the separate oTree field 'lgbt_subgroups' -->
    <!-- Ensure your oTree models.py defines lgbt_subgroups (e.g., models.StringField or models.LongStringField) -->
    <input type="hidden" name="lgbt_subgroups" id="id_lgbt_subgroups" value="">
</div>
{{ formfield_errors 'lgbt_subgroups' }}
<script>
document.querySelectorAll('input[name="knows_lgbt"]').forEach(el => {
    el.addEventListener('change', function() {
        document.getElementById('lgbt_details').style.display = this.value == "1" ? "block" : "none";
        if (this.value != "1") {
            // clear checkboxes and hidden field for subgroups when details hidden
            document.querySelectorAll('.lgbt_subgroup_cb').forEach(cb => cb.checked = false);
            document.getElementById('id_lgbt_subgroups').value = "";
        }
    });
});

// Collect checked subgroup values into hidden input named "lgbt_subgroups"
function updateSubgroupsHidden() {
    const checked = Array.from(document.querySelectorAll('.lgbt_subgroup_cb:checked'))
        .map(cb => cb.value);
    // Use comma-separated string. If you prefer JSON, change this to JSON.stringify(checked)
    document.getElementById('id_lgbt_subgroups').value = checked.join(', ');
}

// Update hidden whenever a checkbox changes
document.querySelectorAll('.lgbt_subgroup_cb').forEach(cb => {
    cb.addEventListener('change', updateSubgroupsHidden);
});

// Ensure hidden updated on submit (in case)
const form = document.querySelector('form');
if (form) {
    form.addEventListener('submit', function() {
        updateSubgroupsHidden();
    });
}

// Restore checkboxes from hidden value if page is re-rendered (validation error / revisit)
function populateSubgroupsFromHidden() {
    const hiddenVal = document.getElementById('id_lgbt_subgroups').value;
    if (!hiddenVal) return;
    const parts = hiddenVal.split(',').map(s => s.trim()).filter(Boolean);
    document.querySelectorAll('.lgbt_subgroup_cb').forEach(cb => {
        cb.checked = parts.includes(cb.value);
    });
}

// On page load, restore state and show/hide details appropriately
window.addEventListener('load', function() {
    populateSubgroupsFromHidden();
    const selected = document.querySelector('input[name="knows_lgbt"]:checked');
    if (selected && selected.value == "1") {
        document.getElementById('lgbt_details').style.display = "block";
    }
});
</script>

{{ next_button }}

{{ endblock }}