{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
{% endblock %}

{% block content %}
<style>
.big-options label {
    font-size:16pt !important;
}



label.otree-choice-label,
.form-check {
    display: flex;
    align-items: center;
    gap: 12px;          /* 👈 smaller gap = closer text */
    margin-bottom: 12px;
}

/* Remove default Bootstrap vertical offsets */
.form-check-input,
input[type="radio"] {
    margin-top: 0 !important;
}

/* Scale radio without shifting it */
input[type="radio"] {
    transform: scale(1.1);
    flex-shrink: 0;           /* prevents shrinking */
}

/* Text alignment */
label.otree-choice-label span,
.form-check-label {
    font-size: 24pt !important;
    line-height: 1.2;
}
</style>

<style>
    /* Global font and color settings */
    #otree-content, p, li, div, h2, h4, span, b, strong, label, select, input {
        font-size: 16pt !important;
        color: black !important;
    }

    /* Tighten all paragraph gaps */
    p {
        margin-bottom: 2px !important;
    }

    /* Title box matching your requested style */
    .custom-title-box {
        background-color: #d1e7dd;
        border: 1px solid #badbcc;
        color: #0f5132 !important;
        text-align: center;
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .custom-title-box h2 {
        font-size: 22pt !important;
        font-weight: bold;
        color: #0f5132 !important;
        margin: 0.5;
    }

    hr {
        border-top: 1px solid #ccc;
        margin: 1rem 0; /* Reduced from 2rem to make sections closer */
    }

    /* EXTREME GAP REDUCTION */
    .content-container .mb-4,
    .content-container .mb-3,
    .form-group,
    .controls {
        margin-bottom: 0rem !important;
        padding-bottom: 0rem !important;
    }

    /* Pulls the input fields/options up to the bold text */
    .controls select,
    .controls input,
    .controls .form-check {
        margin-top: 0px !important;
    }

    /* Specific fix for "If Other" section */
    .mt-2 {
        margin-top: 0px !important;
    }

    .content-container input.form-control {
        margin-top: 0px !important;
    }

    /* Hide the conditional question by default */
    #chain_number_row {
        display: none;
        margin-left: 2rem;
        border-left: 2px solid #b0b0b0;
        padding-left: 1rem;
    }

    hr {
    border: none;                     /* remove default border */
    border-top: 1px solid #808080;    /* very light gray line */
    margin: 1.5rem 0;                 /* spacing above and below */
    background-color: transparent;    /* ensures no extra color */
}
</style>



<div class="custom-title-box">
    <h2>QUESTIONS ABOUT YOUR ROLE</h2>
</div>

<div class="content-container">
    <div class="mb-4">
        <p>
            Please answer the following questions <b>about your current job</b> in the food service industry.
            If you are not currently employed in the food service industry, please provide information <b>about your last job </b>in the industry.
        </p>
    </div>

    <hr>

    <div class="question-block">
        <p><strong>What is/was your job?</strong></p>
        {{ formfield 'Title' label="" }}


            <p class="mt-3">If "Other", please specify:</p>
            {{ formfield 'Title_other' label="" }}

    </div>

    <hr>

    <div class="question-block">
        <p><strong>How many full-time and part-time months have you worked at this job?</strong></p>
        {{ formfield 'MonthsCurrent' label="" }}
    </div>

    <hr>

    <div class="question-block">
        <p><strong>On average, how many hours do/did you work at this job per week?</strong></p>
        {{ formfield 'WeeklyHours' label="" }}
    </div>

    <hr>

    <div class="question-block">
        <p><strong>Which of the below most closely describes how you are/were compensated at this job?</strong></p>
        {{ formfield 'Compensation' label="" }}
    </div>

</div>
<p style="LINE-HEIGHT:20pt"><br></p>

<p class="mt-5">Please click <strong>‘Next’</strong> to continue.</p>

<div class="text-start">
    {{ next_button }}
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const otherWrapper = document.getElementById('title_other_wrapper');

        function toggleOther() {
            let selectedValue = "";

            // Check for Radio Buttons first
            const radios = document.getElementsByName('Title');
            if (radios.length > 0) {
                for (let i = 0; i < radios.length; i++) {
                    if (radios[i].checked) {
                        selectedValue = radios[i].value;
                    }
                }
            } else {
                // Check for Dropdown Select
                const select = document.querySelector('select[name="Title"]');
                if (select) {
                    selectedValue = select.value;
                }
            }

            // Show if value is 'Other'
            if (selectedValue === 'Other') {
                otherWrapper.style.display = 'block';
            } else {
                otherWrapper.style.display = 'none';
            }
        }

        // Listen for ANY change in the form
        document.querySelector('form').addEventListener('change', toggleOther);

        // Run once on load
        toggleOther();
    });
</script>

{% endblock %}