{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">{{ title }}</p>
{{ endblock }}

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

<style>
    tr.row-missing td, tr.row-missing th { background-color: #fdecea !important; }
    .likert-desktop thead th { font-size: .8rem; overflow-wrap: normal; word-break: normal; }
    .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>{{ title }}</h2>

    <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>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            {{ if intro }}<p class="fs-5">{{ intro }}</p>{{ endif }}

            <div class="likert-desktop table-responsive">
                <p class="fs-5">Per favore indichi quanto è d'accordo o in disaccordo con le seguenti affermazioni:</p>
                {{ if scale == 'ctai' }}<p class="fs-5">Se non usa ancora questi strumenti, risponda pensando a come si comporterebbe.</p>{{ endif }}
                <table class="table table-hover table-sm table-light table-fixed">
                    <thead><tr><th scope="col" class="{{ if n_points == 7 }}col-3{{ else }}col-4{{ endif }} text-start small"></th>
                        {{ for h in headers }}<th scope="col" class="text-center small">{{ h }}</th>{{ endfor }}
                    </tr></thead>
                    <tbody>
                        {{ for item in items }}{{ for field in form }}{{ if field.name == item.var_name }}
                        <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 }}">
                <p class="fs-5">Per favore indichi quanto è d'accordo o in disaccordo con le seguenti affermazioni su una
                    scala da 1 ("{{ low }}") a {{ n_points }} ("{{ high }}"):</p> 
                     {{ if scale == 'ctai' }}<p class="fs-5">Se non usa ancora questi strumenti, risponda pensando a come si comporterebbe.</p>{{ endif }}
                    <hr>
                {{ for item in items }}{{ for field in form }}{{ if field.name == item.var_name }}
                <div class="likert-item" data-card-field="{{ field.name }}">
                    <p class="likert-stmt">{{ item.label }}</p>
                    <div class="likert-anchors"><span>{{ low }}</span><span>{{ high }}</span></div>
                    <div class="likert-opts">
                        {{ for c in 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>
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');
            }
        });
    }

    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.replace('__mobile', ''));
    }, 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 %}