{% block title %}
    Energiesicherheit
{% endblock %}

{% block content %}
<p>{{ form.why_not.label }}</p>
<div style="color: red;">
        {{ formfield_errors 'why_not' }}
    </div>

    <label><input type="checkbox" class="why-not-check" value="fehlendes_geld"> Ich habe nicht genug Geld.</label><br>
    <label><input type="checkbox" class="why-not-check" value="zahle_genug"> Ich zahle bereits genug Geld an den Staat.</label><br>
    <label><input type="checkbox" class="why-not-check" value="keine_kompetenz"> Ich traue der Regierung nicht die notwendige Kompetenz zur Umsetzung zu.</label><br>
    <label><input type="checkbox" class="why-not-check" value="kein_risiko"> Ich betrachte fehlende Resilienz nicht als Risiko.</label><br>
    <label><input type="checkbox" class="why-not-check" value="kein_mehrwert"> Ich sehe keinen Mehrwert in einem resilienteren Energiesystem.</label><br>
    <label>
        <input type="checkbox" class="why-not-check" value="anderes" id="check_anderes"> Sonstiges:
        <input type="text" name="why_not_other" id="why_not_other_input" style="display:none; margin-left: 10px;">
    </label><br>
    <label><input type="checkbox" class="why-not-check" value="keine_angabe"> Keine Angabe</label><br>

    <input type="hidden" name="why_not" id="id_why_not_hidden">

    <script>
        const checkboxes = document.querySelectorAll('.why-not-check');
        const hiddenInput = document.getElementById('id_why_not_hidden');
        const otherInput = document.getElementById('why_not_other_input');
        const checkAnderes = document.getElementById('check_anderes');

        function updateHiddenField() {
            let selected = [];
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    selected.push(cb.value);
                }
            });
            hiddenInput.value = selected.join('--');

            // Toggle "Other" input
            if (checkAnderes.checked) {
                otherInput.style.display = 'inline';
            } else {
                otherInput.style.display = 'none';
                otherInput.value = '';
            }
        }

        // Handle "Keine Angabe" mutual exclusivity
        checkboxes.forEach(cb => {
            cb.addEventListener('change', (e) => {
                if (e.target.value === 'keine_angabe' && e.target.checked) {
                    checkboxes.forEach(other => { if (other !== e.target) other.checked = false; });
                } else if (e.target.checked) {
                    const noneOption = Array.from(checkboxes).find(c => c.value === 'keine_angabe');
                    if (noneOption) noneOption.checked = false;
                }
                updateHiddenField();
            });
        });

        // Sync hidden input for the "Other" text field typing
        otherInput.addEventListener('input', updateHiddenField);

    </script>
    <br>
    <button class="otree-btn-next btn btn-primary">Weiter</button>
{% endblock %}