{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Linguaggio e genere</p>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
{{ endblock }}

{% block content %}
{{ include C.likert_css }}

<!-- MODIFICA: stili evidenziazione mancanti + fs-5 mobile -->
<style>
    tr.row-missing td, tr.row-missing th { background-color: #fdecea !important; }
    .likert-item.card-missing {
        border: 1px solid #dc3545;
        background-color: #fdf2f2;
        border-radius: 8px;
        padding: 0.75rem;
    }
    @media (max-width: 599.98px) {
        .fs-5 { font-size: 1rem !important; }
    }
</style>

<div class="container">
    <h2>Linguaggio</h2>

    <!-- MODIFICA: alert di validazione custom -->
    <div class="alert alert-danger d-none" id="alert-missing" role="alert">
        Si prega di rispondere a tutte le domande. Quelle mancanti sono evidenziate in rosso.
    </div>

    <!-- ============ ATGIL ============ -->
    <div class="card mb-4 bg-light">
        <div class="card-body">


            <div class="likert-desktop table-responsive">
                    <p class="fs-5">
                Per favore indichi quanto è d'accordo o in disaccordo con le seguenti affermazioni: </p>
            <p class = "fs-5">
                N.B. Il linguaggio inclusivo di genere si riferisce a formulazioni che mirano a includere tutti i
                generi e a superare l'uso esclusivo della forma maschile.
            </p>
                <table class="table table-hover table-sm table-light table-fixed">
                    <thead><tr><th scope="col" class="col-5 text-start small"></th>
                        {{ for h in atgil_headers }}<th scope="col" class="text-center small">{{ h }}</th>{{ endfor }}
                    </tr></thead>
                    <tbody>
                        {{ for item in atgil_items }}{{ for field in form }}{{ if field.name == item.var_name }}
                        <!-- MODIFICA: data-row-field per la validazione -->
                        <tr data-row-field="{{ field.name }}" class="js-likert-row"><th scope="row"><span class="fw-normal">{{ item.label }}</span></th>
                            {{ for choice in field }}<td class="text-center">{{ choice }}</td>{{ endfor }}
                        </tr>
                        {{ endif }}{{ endfor }}{{ endfor }}
                    </tbody>
                </table>
            </div>

            <div class="likert-mobile likert-style-{{ likert_style }}">
                <!-- MODIFICA: rimosso il doppio punto a fine frase -->
                <p class="fs-5">
                Per favore indichi quanto è d'accordo o in disaccordo con le seguenti affermazioni su una scala da 1 ("Completamente in disaccordo") a 5 ("Completamente d'accordo"). </p>
            <p class = "fs-5">
                N.B. Il linguaggio inclusivo di genere si riferisce a formulazioni che mirano a includere tutti i
                generi e a superare l'uso esclusivo della forma maschile.
            </p> <hr>
                {{ for item in atgil_items }}{{ for field in form }}{{ if field.name == item.var_name }}
                <!-- MODIFICA: data-card-field per la validazione -->
                <div class="likert-item" data-card-field="{{ field.name }}">
                    <p class="likert-stmt">{{ item.label }}</p>
                    <div class="likert-anchors"><span>completamente <br> in disaccordo</span><span>completamente <br> d'accordo</span></div>
                    <div class="likert-opts">
                        {{ for c in atgil_choices }}
                        <div class="likert-opt">
                            <input type="radio" class="likert-input" name="{{ item.var_name }}"
                                   id="m_{{ item.var_name }}__{{ c.value }}" value="{{ c.value }}"
                                   {{ if c.value == field.data }}checked{{ endif }}>
                            <label for="m_{{ item.var_name }}__{{ c.value }}">
                                <span class="num">{{ c.num }}</span><span class="txt">{{ c.text }}</span>
                            </label>
                        </div>
                        {{ endfor }}
                    </div> <hr>
                </div>
                {{ endif }}{{ endfor }}{{ endfor }}
            </div>
        </div>
    </div>



</div>

{{ include C.next_progress }}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

<!-- MODIFICA: validazione custom (click sul pulsante Avanti, non submit) -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form');
    form.noValidate = true;
    const alertEl = document.getElementById('alert-missing');
    const submitBtn = form.querySelector('.otree-btn-next');

    const fieldNames = Array.from(
        new Set(Array.from(document.querySelectorAll('[data-row-field]'))
            .map(el => el.getAttribute('data-row-field')))
    );

    function markMissing() {
        let anyMissing = false;
        fieldNames.forEach(function (name) {
            const answered = !!document.querySelector('input[name="' + name + '"]:checked');
            document.querySelectorAll('[data-row-field="' + name + '"]')
                .forEach(el => el.classList.toggle('row-missing', !answered));
            document.querySelectorAll('[data-card-field="' + name + '"]')
                .forEach(el => el.classList.toggle('card-missing', !answered));
            if (!answered) anyMissing = true;
        });
        return anyMissing;
    }

    if (submitBtn) {
        submitBtn.addEventListener('click', function (e) {
            if (markMissing()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                alertEl.classList.remove('d-none');
                alertEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                alertEl.classList.add('d-none');
            }
        });
    }

    // MODIFICA-FIX: rispondendo, il rosso sparisce subito (delegazione a
    // livello di documento, affidabile anche sul layout mobile).
    function clearMissing(name) {
        if (!name) return;
        document.querySelectorAll('[data-row-field="' + name + '"]')
            .forEach(el => el.classList.remove('row-missing'));
        document.querySelectorAll('[data-card-field="' + name + '"]')
            .forEach(el => el.classList.remove('card-missing'));
    }
    document.addEventListener('change', function (e) {
        if (e.target && e.target.type === 'radio') clearMissing(e.target.name);
    }, true);
    document.addEventListener('click', function (e) {
        const item = e.target.closest('[data-card-field], [data-row-field]');
        if (!item) return;
        const name = item.getAttribute('data-card-field') || item.getAttribute('data-row-field');
        setTimeout(function () {
            if (document.querySelector('input[name="' + name + '"]:checked')) clearMissing(name);
        }, 0);
    }, true);
});
</script>
{% endblock %}