{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'venturini_pg/mystyle.css' %}">


<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: -10px;
    margin-bottom: 25px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Calculator.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/DNA.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>


 <h2 style="color:#800000; text-align:center; font-weight:800; margin-top:5px;">
        Questionario
    </h2>

    <p style="text-align:center; margin-bottom:25px;">
       In questa parte finale dell'esperimento ti chiediamo di rispondere a un breve questionario.
    </p>

<hr style="color:#800000;">

    <div style="margin-bottom:25px;">
        <label><strong>{{ form.age.label }}</strong></label><br>
        <div style="max-width:120px;">
            {{ form.age }}
        </div>
    </div>

    <div style="margin-bottom:25px;">
        <label><strong>{{ form.gender.label }}</strong></label><br>
        {{ form.gender }}
    </div>

    <div style="margin-bottom:25px;">
        <label><strong>{{ form.school_type.label }}</strong></label><br>
        {{ form.school_type }}
    </div>

<div style="margin-bottom:25px;">
        <label><strong>{{ form.class_level.label }}</strong></label><br>
        {{ form.class_level }}
    </div>

<div style="margin-bottom:25px;">
    <label><strong>{{ form.changed_school.label }}</strong></label><br>
    {{ form.changed_school }}
</div>

<div id="prev_school_block" style="margin-bottom:25px; display:none;">
    <label><strong>{{ form.previous_school_type.label }}</strong></label><br>
    {{ form.previous_school_type }}
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const radios = document.querySelectorAll("input[name='changed_school']");
    const block = document.getElementById("prev_school_block");

    radios.forEach(r => {
        r.addEventListener("change", function() {
            if (this.value === "Yes") {
                block.style.display = "block";
            } else {
                block.style.display = "none";
            }
        });
    });
});
</script>

<div style="margin-bottom:25px;">
        <label><strong>{{ form.math_grade.label }}</strong></label><br>
        {{ form.math_grade }}
    </div>

<div style="margin-bottom:25px;">
        <label><strong>{{ form.italian_grade.label }}</strong></label><br>
        {{ form.italian_grade }}
    </div>

<div style="margin-bottom:25px;">
        <label><strong>{{ form.mother_education.label }}</strong></label><br>
        {{ form.mother_education }}
    </div>

<div style="margin-bottom:25px;">
        <label><strong>{{ form.father_education.label }}</strong></label><br>
        {{ form.father_education }}
</div>

    <div style="margin-bottom:25px;">
        <label><strong>{{ form.mother_occupation.label }}</strong></label><br>
        {{ form.mother_occupation }}
    </div>

   <div style="margin-bottom:25px;">
        <label><strong>{{ form.father_occupation.label }}</strong></label><br>
        {{ form.father_occupation }}
    </div>

    <div style="margin-bottom:25px;">
        <label><strong>{{ form.siblings.label }}</strong></label><br>
        {{ form.siblings }}
    </div>
<div style="margin-bottom:25px;">
        <label><strong>{{ form.future_education.label }}</strong></label><br>
        {{ form.future_education }}
    </div>

   <div id="field_of_study_block" style="margin-bottom:25px; display:none;">
    <label><strong>{{ form.field_future_education.label }}</strong></label><br>
    {{ form.field_future_education }}
</div>

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

    const radios = document.querySelectorAll("input[name='future_education']");
    const block = document.getElementById("field_of_study_block");

    function toggleField() {
        const selected = document.querySelector("input[name='future_education']:checked");
        if (!selected) return;

        if (selected.value === "Bachelor" || selected.value === "Master_PhD") {
            block.style.display = "block";
        } else {
            block.style.display = "none";
        }
    }

    radios.forEach(radio => {
        radio.addEventListener("change", toggleField);
    });

    // utile se la pagina ricarica con una risposta già data
    toggleField();
});
</script>

<p style="font-size:16px;">
    Di seguito trovi alcune frasi che possono più o meno descriverti.
    Indica quanto sei d’accordo che ciascuna frase ti rappresenti.
</p>
<ul style="list-style-type: disc; padding-left: 25px;">
    <li style="margin-bottom:10px;">
        <label><strong>{{ form.q_recommend.label }}</strong></label><br>
        {{ form.q_recommend }}
     </li>
    <li style="margin-bottom:10px;">
        <label><strong>{{ form.q_encourage.label }}</strong></label><br>
        {{ form.q_encourage }}
    </li>

    <li style="margin-bottom:10px;">
        <label><strong>{{ form.q_free_choice.label }}</strong></label><br>
        {{ form.q_free_choice }}
    </li>

</ul>


<p style="font-size:16px;">
    Di seguito trovi alcune frasi che possono più o meno descriverti.
    Indica quanto sei d’accordo che ciascuna frase ti rappresenti.
    Pensa alla frase come completamento di: <em>“Sono una persona che…”</em><br>
</p>

<!-- ================== COMPASSION ================== -->
<ul style="list-style-type: disc; padding-left: 25px;">
    <li style="margin-bottom:10px;">
        <strong>{{ form.comp_soft_heart.label }}</strong><br>
        {{ form.comp_soft_heart }}
    </li>
    <li style="margin-bottom:10px;">
       <strong>{{ form.comp_helpful.label }}</strong><br>
        {{ form.comp_helpful }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.comp_little_sympathy.label }}</strong><br>
        {{ form.comp_little_sympathy }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.comp_cold_uncaring.label }}</strong><br>
        {{ form.comp_cold_uncaring }}
    </li>
</ul>

<!-- ================== RESPECTFULNESS ================== -->
<ul style="list-style-type: disc; padding-left: 25px;">
    <li style="margin-bottom:10px;">
        <strong>{{ form.resp_respectful.label }}</strong><br>
        {{ form.resp_respectful }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.resp_polite.label }}</strong><br>
        {{ form.resp_polite }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.resp_starts_arguments.label }}</strong><br>
        {{ form.resp_starts_arguments }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.resp_rude.label }}</strong><br>
        {{ form.resp_rude }}
    </li>
</ul>

<!-- ================== TRUST ================== -->
<ul style="list-style-type: disc; padding-left: 25px;">
    <li style="margin-bottom:10px;">
        <strong>{{ form.trust_forgiving.label }}</strong><br>
        {{ form.trust_forgiving }}
    </li>
    <li style="margin-bottom:10px;">
        <strong>{{ form.trust_assumes_best.label }}</strong><br>
        {{ form.trust_assumes_best }}
    </li>

    <li style="margin-bottom:10px;">
        <strong>{{ form.trust_finds_fault.label }}</strong><br>
        {{ form.trust_finds_fault }}
    </li>

    <li style="margin-bottom:10px;">
        <strong>{{ form.trust_suspicious.label }}</strong><br>
        {{ form.trust_suspicious }}
    </li>
</ul>

 <div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai completato l'attività, clicca su Continua.
        </p>
        <button class="otree-btn-next btn btn-bordeaux">Continua</button>
    </div>

<div style="
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 25px 20px;
    margin-top: 25px;
    margin-bottom: 30px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Blackboard.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Lab.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Emc.png' %}" style="height: 70px;">
        <img src="{% static 'venturini_pg/sencos.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" style="height: 90px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>

<style>
/* ===== RADIO BUTTONS (oTree + Bootstrap) ===== */
.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid #800000 !important;
    background-color: white !important;
}

/* radio selezionato */
.form-check-input:checked {
    background-color: #800000 !important;
    border-color: #800000 !important;
}

/* rimuove il blu bootstrap */
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(128,0,0,0.3) !important;
}

/* ===== INPUT NUMERICI (età ecc.) ===== */
input[type="number"],
input[type="text"] {
    border: 2px solid #800000 !important;
    border-radius: 6px;
}

/* focus input */
input[type="number"]:focus,
input[type="text"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(128,0,0,0.3) !important;
}
</style>

{% endblock %}