{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Professioni e sport</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 %}

<style>
    .otree-body { max-width: 1000px; }
    .table-fixed { table-layout: fixed; }
    ._formfield > label.col-form-label { font-size: 1.25rem; }

    /* --- STILI DESKTOP --- */
    tr.row-selected td, 
    tr.row-selected th { 
        background-color: #eaf1ff !important; 
    }

    /* MODIFICA: evidenziazione campi mancanti - FUORI dalla media query,
       vale sia per la tabella desktop sia per le card mobile */
    .js-desktop-row.row-missing th,
    .js-desktop-row.row-missing td { background-color: #fdecea !important; }
    .mobile-question-card.card-missing {
        border-color: #dc3545 !important;
        background-color: #fdf2f2 !important;
    }

    /* MODIFICA: fs-5 ridotto sui telefoni */
    @media (max-width: 599.98px) {
        .fs-5 { font-size: 1rem !important; }
    }

    input[type="radio"].form-check-input {
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        margin-right: 0.5em;
        border: 2px solid #2563eb;
    }
    input[type="radio"].form-check-input:checked {
        background-color: #2563eb;
        border-color: #2563eb;
    }
    .form-check { margin-bottom: 0.75rem; }
    .form-check-input:checked + label,
    .form-check-input:checked ~ label { font-weight: 500; }

    /* --- LOGICA DI VISUALIZZAZIONE DINAMICA ORIENTAMENTO --- */
    .mobile-vignettes { display: none; }
    .desktop-table-container { display: block; }

    @media (max-width: 767.98px) and (orientation: portrait) {
        .desktop-table-container { display: none !important; }
        .mobile-vignettes { display: block !important; }
        .mobile-rotation-alert { display: flex !important; }
        
        .mobile-question-card {
            border: 1px solid #dee2e6;
            border-radius: 12px;
            background-color: #ffffff;
            margin-bottom: 1.25rem;
            padding: 1.25rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
        }
        .mobile-question-card.card-selected {
            border-color: #2563eb !important;
            background-color: #f8faff !important;
        }
        .mobile-radio-group .mobile-btn-container {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            text-align: left !important;
            width: 100% !important;
            padding: 12px 14px !important;
            margin-bottom: 8px !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            background-color: #f8fafc !important;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .mobile-radio-group .mobile-btn-container:has(input[type="radio"]:checked) {
            background-color: #eff6ff !important;
            border-color: #3b82f6 !important;
        }
        .mobile-radio-group .mobile-btn-container input[type="radio"] {
            flex-shrink: 0 !important;
            margin-top: 0 !important;
            margin-right: 12px !important;
            float: none !important;
            width: 1.5em;
            height: 1.5em;
        }
        .mobile-custom-label {
            display: inline-block !important;
            cursor: pointer !important;
            font-weight: normal !important;
            font-size: 0.95rem !important;
            color: #334155 !important;
            flex-grow: 1 !important;
            user-select: none;
        }
    }
</style>

<div class="container">
    <h2>Professioni e sport</h2>

    <div class="alert alert-info align-items-center mobile-rotation-alert d-none mb-4" role="alert">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-circle-fill me-3 flex-shrink-0" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
        </svg>
        <div>
            Per una compilazione più veloce, si consiglia di ruotare lo schermo del dispositivo in orizzontale.
        </div>
    </div>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5">
                Per ciascuno dei seguenti ambiti professionali e sport, indichi se, a Suo avviso, <strong>si addice maggiormente </strong> ad un uomo, ad una donna o ad entrambi:
            </p>

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

            <div class="table-responsive desktop-table-container">
                <table class="table table-hover table-sm table-light table-fixed">
                    <thead>
                        <tr>
                            <th scope="col" class="col-5 text-center small"></th>
                                {{ for h in column_headers }}
                                <th scope="col" class="col-2 text-center small js-desktop-header">{{ h }}</th>
                                {{ endfor }}
                        </tr>
                    </thead>
                    <tbody>
                        {{ for item in items }}
                        {{ if forloop.counter == 7 or forloop.counter == 14 or  forloop.counter == 21 }}
                        <tr>
                            <th scope="col" class="col-5 text-center small"></th>
                                {{ for h in column_headers }}
                                <th scope="col" class="col-2 text-center small">{{ h }}</th>
                                {{ endfor }}
                        </tr>
                        {{ endif }}
                        
                        {{ for field in form }}
                        {{ if field.name == item.var_name }}
                        <tr data-row-field="{{ field.name }}" class="js-desktop-row">
                            <th scope="row"><span class="fw-normal">{{ item.display_label }}</span></th>
                            {{ for choice in field }}
                            <td class="text-center">{{ choice }}</td>
                            {{ endfor }}
                        </tr>
                        {{ endif }}
                        {{ endfor }}
                        {{ endfor }}
                    </tbody>
                </table>
            </div>

            <div class="mobile-vignettes">
                {{ for item in items }}
                {{ for field in form }}
                {{ if field.name == item.var_name }}
                <div class="mobile-question-card" data-card-field="{{ field.name }}">
                    <div class="fw-semibold mb-3 text-dark" style="font-size: 1.15rem;">
                        {{ item.display_label }}
                    </div>
                    
                    <div class="mobile-radio-group">
                        <div class="mobile-btn-container" data-val="1">
                            <input type="radio" class="form-check-input" name="mob_{{ field.name }}" value="1">
                            <span class="mobile-custom-label js-mobile-label" data-idx="0"></span>
                        </div>
                        <div class="mobile-btn-container" data-val="2">
                            <input type="radio" class="form-check-input" name="mob_{{ field.name }}" value="2">
                            <span class="mobile-custom-label js-mobile-label" data-idx="1"></span>
                        </div>
                        <div class="mobile-btn-container" data-val="3">
                            <input type="radio" class="form-check-input" name="mob_{{ field.name }}" value="3">
                            <span class="mobile-custom-label js-mobile-label" data-idx="2"></span>
                        </div>
                    </div>
                </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>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // --- 1. ALLINEA VALORI E TESTI DELLE CARD MOBILE ALL'ORDINE REALE DELLE COLONNE ---
    const dynamicHeaders = Array.from(document.querySelectorAll('.js-desktop-header')).map(el => el.textContent.trim());
    const firstRow = document.querySelector('.js-desktop-row');
    const colValues = firstRow
        ? Array.from(firstRow.querySelectorAll('input[type="radio"]')).map(r => r.value)
        : ['1', '2', '3'];  // fallback di sicurezza

    document.querySelectorAll('.mobile-question-card').forEach(function (card) {
        const boxes = card.querySelectorAll('.mobile-btn-container');
        boxes.forEach(function (box, idx) {
            const radio = box.querySelector('input[type="radio"]');
            if (radio && colValues[idx] !== undefined) {
                radio.value = colValues[idx];
                box.setAttribute('data-val', colValues[idx]);
            }
            const labelSpan = box.querySelector('.js-mobile-label');
            if (labelSpan && dynamicHeaders[idx]) {
                labelSpan.textContent = dynamicHeaders[idx];
            }
        });
    });

    // --- 2. LOGICA FUNZIONALE REALE E ALLINEAMENTO GRAFICO ---
    function syncUIForField(fieldName) {
        const desktopRow = document.querySelector(`tr[data-row-field="${fieldName}"]`);
        const mobileCard = document.querySelector(`div[data-card-field="${fieldName}"]`);

        if (!desktopRow) return;

        const checkedRadio = desktopRow.querySelector('input[type="radio"]:checked');

        if (checkedRadio) {
            const currentVal = checkedRadio.value;

            // MODIFICA: rispondendo si toglie anche l'eventuale rosso "mancante"
            desktopRow.classList.add('row-selected');
            desktopRow.classList.remove('row-missing');

            if (mobileCard) {
                mobileCard.classList.add('card-selected');
                mobileCard.classList.remove('card-missing');
                const matchingMobileRadio = mobileCard.querySelector(`input[type="radio"][value="${currentVal}"]`);
                if (matchingMobileRadio) matchingMobileRadio.checked = true;
            }
        } else {
            desktopRow.classList.remove('row-selected');
            if (mobileCard) mobileCard.classList.remove('card-selected');
        }
    }

    // A. Intercetta i click nativi sulla Tabella PC / Tablet
    document.querySelectorAll('.js-desktop-row input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', function () {
            syncUIForField(this.name);
        });
    });

    // B. Intercetta i click sui pulsanti custom delle Card Mobile
    document.querySelectorAll('.mobile-btn-container').forEach(box => {
        box.addEventListener('click', function (e) {
            const mobileRadio = this.querySelector('input[type="radio"]');
            if (!mobileRadio) return;

            mobileRadio.checked = true;

            const realFieldName = mobileRadio.name.replace('mob_', '');
            const selectedVal = mobileRadio.value;

            const realOtreeRadio = document.querySelector(`tr[data-row-field="${realFieldName}"] input[type="radio"][value="${selectedVal}"]`);
            if (realOtreeRadio) {
                realOtreeRadio.checked = true;
                syncUIForField(realFieldName);
            }
        });
    });

    // C. Controllo iniziale al caricamento (ripristina stati precedenti).
    const allFieldNames = Array.from(document.querySelectorAll('.js-desktop-row')).map(tr => tr.getAttribute('data-row-field'));
    allFieldNames.forEach(name => {
        syncUIForField(name);
    });

    // --- 3. MODIFICA: VALIDAZIONE CUSTOM ---------------------------------
    // Intercettiamo il CLICK sul pulsante Avanti (non l'evento submit):
    // se mancano risposte il submit non parte mai, quindi oTree non
    // disabilita/blocca il pulsante. Evidenziamo in rosso TUTTE le righe /
    // card mancanti e scrolliamo sempre al messaggio di alert (piu'
    // affidabile dello scroll a una riga di tabella).
    const form = document.querySelector('form');
    form.noValidate = true;
    const alertEl = document.getElementById('alert-missing');
    const submitBtn = form.querySelector('.otree-btn-next');

    if (submitBtn) {
        submitBtn.addEventListener('click', function (e) {
            let anyMissing = false;
            document.querySelectorAll('.js-desktop-row').forEach(function (row) {
                const name = row.getAttribute('data-row-field');
                const answered = !!row.querySelector('input[type="radio"]:checked');
                row.classList.toggle('row-missing', !answered);
                const card = document.querySelector('div[data-card-field="' + name + '"]');
                if (card) card.classList.toggle('card-missing', !answered);
                if (!answered) anyMissing = true;
            });
            if (anyMissing) {
                e.preventDefault();
                e.stopImmediatePropagation();
                alertEl.classList.remove('d-none');
                alertEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                alertEl.classList.add('d-none');
            }
        });
    }
});
</script>

{% endblock %}