{{ block title }}Questionario{{ endblock }}
{{ block content }}
<style>
body {
    font-size: 18px;  /* try 16–20px depending on preference */
}
</style>
<div>
<p>
Si prega di rispondere alle seguenti domande: 
</p>
</div>
{% for field in form %}
    {% if field.name != 'kids' and field.name != 'young_kid_age' and field.name != 'old_kid_age' and field.name != 'fullscreen_popup_log' %}
    <div class="mb-3">
        {{ field.label }}    
        {{ field }}
    </div>
    {% endif %}
{% endfor %}

    <div class="mb-3">
        {{ form.kids.label }}
        {{ form.kids }}
    </div>

<div class="mb-3" id="young_kid_block">
    {{ form.young_kid_age.label }}
    {{ form.young_kid_age }}
</div>

<div class="mb-3" id="old_kid_block">
    {{ form.old_kid_age.label }}
    {{ form.old_kid_age }}
</div>

<div class="text-center">
    <button class="btn btn-primary" type="submit">Avanti</button>
</div>

    {% include "_templates/global/scripts.html" %}

    {% include "_templates/global/styles.html" %}

    <input type="hidden" name="fullscreen_popup_log" id="fullscreen_popup_log" value="{{ player.field_maybe_none('fullscreen_popup_log') }}">

<script>
    function updateVisibility() {
        let selected = document.querySelector('input[name="kids"]:checked');
        if (!selected) return;

        let value = selected.value;

        let youngBlock = document.getElementById("young_kid_block");
        let oldBlock = document.getElementById("old_kid_block");

        if (value === '0') {
            youngBlock.style.display = 'none';
            oldBlock.style.display = 'none';
        } else if (value === '1') {
            youngBlock.style.display = 'block';
            oldBlock.style.display = 'none';
        } else {
            youngBlock.style.display = 'block';
            oldBlock.style.display = 'block';
        }
    }

    document.addEventListener("DOMContentLoaded", function () {
        updateVisibility();
        let radios = document.querySelectorAll('input[name="kids"]');
        radios.forEach(radio => {
            radio.addEventListener('change', updateVisibility);
        });
    });


    document.querySelector("form").addEventListener("submit", function(e) {
    let kids = document.querySelector('input[name="kids"]:checked');
    if (!kids) return;

    let value = kids.value;

    let young = document.querySelector('[name="young_kid_age"]');
    let old = document.querySelector('[name="old_kid_age"]');

    if (value !== '0' && !young.value) {
        alert("Inserisca l'anno di nascita del suo figlio più giovane.");
        e.preventDefault();
        return;
    }

    if (value !== '0' && value !== '1' && !old.value) {
        alert("Inserisca l'anno di nascita del suo figlio più grande.");
        e.preventDefault();
        return;
    }

    if (young < old) {
        alert("L'anno di nascita del suo figlio maggiore deve precedere quello del figlio più giovane.");
        e.preventDefault();
        return;
    }
});

        document.addEventListener('DOMContentLoaded', function () {
            const isFullscreen =
                !!document.fullscreenElement ||
                (window.innerHeight >= screen.height - 5 &&
                window.innerWidth >= screen.width - 5);

                const field = document.getElementById('fullscreen_popup_log');

            // clean initial value
            if (field.value === 'None') {
                field.value = '';
            }
            if (!isFullscreen) {
                const field = document.getElementById('fullscreen_popup_log');
                const pageName = 'survey';

                if (field.value.trim() === '') {
                    field.value = pageName;
                } else if (!field.value.split(',').includes(pageName)) {
                    field.value += ',' + pageName;
                }

                alert("Per favore usa la modalità schermo intero.");
            }
        });
</script>

{{ endblock }}