{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Lo scenario di Anna</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 UNIFORMATI PC (Uguali a Professioni e Sport) --- */
    tr.row-selected td, 
    tr.row-selected th { 
        background-color: #eaf1ff !important; 
    }

    /* MODIFICA: evidenziazione campi mancanti (fuori dalla media query) */
    .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>Consigli professionali</h2>

<div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5 mb-3">Immagini il seguente scenario:</p>
            
            <div class="border-start border-info border-3 ps-3 py-2 mb-4 bg-white rounded-end shadow-sm">
                <p class="mb-2 fs-6">
                    <strong>Anna</strong> ha appena terminato gli studi e ha iniziato a svolgere una professione in cui il 
                    <strong>{{ treatment_pct }}%</strong> delle persone che la esercitano sono <strong>donne</strong>.
                </p>
                <p class="mb-0 fs-6">
                    In questa professione, <strong>il titolo</strong> esiste sia al <strong>maschile</strong> sia al 
                    <strong>femminile</strong> (per esempio: avvocato / avvocata, ingegnere / ingegnera).
                </p>
            </div>
            
            <p class="mb-0 fs-5">
                Per ciascuna delle seguenti situazioni, quale <strong>forma</strong> (maschile o femminile) <strong>consiglierebbe</strong> ad Anna di usare per <strong>presentarsi?</strong>
            </p>
        </div>
    </div>

    <!-- Alert informativo: compare solo su mobile portrait -->
    <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>

    <!-- 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="card mb-4 bg-light">
        <div class="card-body">

            <!-- ========================================== -->
            <!-- VISUALIZZAZIONE TABELLARE (PC / NATIVA)    -->
            <!-- ========================================== -->
            <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 row in rows %}
                        {% for field in form %}
                        {% if field.name == row.field_name %}
                        <tr data-row-field="{{ field.name }}" class="js-desktop-row">
                            <th scope="row"><span class="fw-normal">{{ row.label }}</span></th>
                            
                            {% for index in column_order %}
                            <td class="text-center">
                                {% if index == 1 %}{{ field.0 }}
                                {% elif index == 2 %}{{ field.1 }}
                               
                                {% endif %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% endif %}
                        {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- ========================================== -->
            <!-- VISUALIZZAZIONE CARD MOBILE ALLEGGERITA     -->
            <!-- ========================================== -->
            <div class="mobile-vignettes">
                {% for row in rows %}
                {% for field in form %}
                {% if field.name == row.field_name %}
                <div class="mobile-question-card" data-card-field="{{ field.name }}">
                    <div class="fw-semibold mb-3 text-dark" style="font-size: 1.15rem;">
                        {{ row.label }}
                    </div>
                    
                    <div class="mobile-radio-group">
                        <!-- Manteniamo la corrispondenza esatta con gli indici del backend (index == 1, 2, 3) -->
                        <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>
                </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 (click sul pulsante, non submit) ---
    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 %}