{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Opinioni su alcune professioni</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: 900px; }
    ._formfield > label.col-form-label { font-size: 1.1rem; }
    input[type="number"].form-control { max-width: 150px; }
</style>

<div class="container">
    <h2>Percezioni su alcune professioni</h2>

    {{ for item in items }}
    <div class="card mb-3 bg-light" data-profession="{{ item.profession.title }}">
        <div class="card-body">
            <h5 class="card-title">{{ item.profession.title }}</h5>
            <div class="mb-4">{{ formfield item.field_donna }}</div>
            <div>{{ formfield item.field_titolo }}</div>
        </div>
    </div>
    {{ endfor }}

</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. Grammatical mapping rules tailored to each of your exact 4 professions
    const cardRules = {
        'ambito medico': { 
            context: 'in ambito medico', 
            noun: 'donne',
            title: 'dottoressa', 
            alternative: 'dottore' 
        },
        'avvocatura': { 
            context: "nell'ambito dell'avvocatura", 
            noun: 'donne',
            title: 'avvocata', 
            alternative: 'avvocato' 
        },
        'architettura': { 
            context: "nell'ambito dell'architettura", 
            noun: 'donne',
            title: 'architetta', 
            alternative: 'architetto' 
        },
        'ingegneria': { 
            context: "nell'ambito dell'ingegneria", 
            noun: 'donne',
            title: 'ingegnera', 
            alternative: 'ingegnere' 
        }
    };

    // 2. Locate all elements containing the dynamic profession card attribute
    const cards = document.querySelectorAll('.card[data-profession]');
    
    cards.forEach(card => {
        const professionKey = card.getAttribute('data-profession').trim().toLowerCase();
        const rule = cardRules[professionKey];
        
        if (!rule) return;

        // Locate the form field containers generated by oTree
        const formFields = card.querySelectorAll('._formfield');
        
        formFields.forEach((field, index) => {
            const input = field.querySelector('input[type="number"]');
            if (!input) return;

            // Create a structured confirmation container box (initially hidden)
            const confirmationBox = document.createElement('div');
            confirmationBox.className = ' py-1 px-2 small mt-2 d-none fw-semibold text-dark';
            confirmationBox.style.maxWidth = '800px';
            
            // Append right underneath the numeric input control container
            const controls = field.querySelector('.controls') || input.parentElement;
            controls.appendChild(confirmationBox);

            // Listen to real-time keystroke entries
            input.addEventListener('input', function() {
                const val = input.value.trim();

                // If input is empty or invalid, clear and hide the box
                if (val === '' || isNaN(val) || val < 0 || val > 100) {
                    confirmationBox.classList.add('d-none');
                    return;
                }

                // Generate the descriptive sentences based on target index (Q1 vs Q2)
                if (index === 0) {
                    // Question 1 Confirmation text
                    confirmationBox.innerHTML = `Ha risposto: <span class="fw-bold text-primary">${val}</span> su 100 persone ${rule.context} sono ${rule.noun}.`;
                } else {
                    // Question 2 Confirmation text
                    confirmationBox.innerHTML = `Ha risposto: <span class="fw-bold text-primary">${val}</span> su 100 donne in questo ambito si presentano come "${rule.title}" e <span class="fw-bold text-primary">${100 - val}</span> come "${rule.alternative}".`;
                }

                // Reveal confirmation text to user
                confirmationBox.classList.remove('d-none');
            });
        });
    });
});
</script>
{% endblock %}