{% 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 EMPLOYER</h2>
</div>

<div class="content-container">
    <div class="mb-4">
        <p>If you are currently employed as a server, bartender, or other customer-facing employee in the food service industry,
        please answer the following questions about the company where you currently work.</p>
                            <p style="LINE-HEIGHT:20pt"><br></p>

        <p>If you are not currently employed as a server, bartender, or other customer-facing employee in the food service industry,
        please provide information about the last company you worked for in the food service industry.</p>


    </div>

    <hr>

    <div class="mb-4">
        <p><strong>What is the type of establishment?</strong></p>
        {{ formfield 'EstablishmentType' label="" }}
        <p class="mt-2">If "Other", please specify:</p>
        {{ formfield 'EstablishmentType_other' label="" }}
    </div>

    <hr>

    <div class="mb-4">
        <p><strong>How many employees work at the establishment location?</strong></p>
        {{ formfield 'NumberEmployees' label="" }}
    </div>

    <hr>

    <div class="mb-4">
        <p><strong>Please answer “True” to this question.</strong></p>
        {{ formfield 'AttnCheck2' label="" }}
    </div>

    <hr>

    <div class="mb-4">
        <p><strong>Where is the establishment located?</strong></p>
        {{ formfield 'Location' label="" }}
    </div>

    <hr>

    <div class="mb-4">
        <p><strong>Is the establishment where you work part of a chain of locations?</strong></p>
        {{ formfield 'Chain' label="" }}
    </div>

    <div id="chain_number_row" class="mb-4">
        <p><strong>How many establishment chain locations are there?</strong></p>
        {{ formfield 'ChainNumber' 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>
    let chainField = document.querySelector('[name="Chain"]');
    let chainRow = document.getElementById('chain_number_row');

    function checkChain() {
        let val = "";
        let radios = document.getElementsByName('Chain');
        if (radios.length > 0) {
            for (let r of radios) {
                if (r.checked) val = r.value;
            }
        } else {
            val = chainField.value;
        }

        if (val === 'True' || val === '1' || val === 'Yes') {
            chainRow.style.display = 'block';
        } else {
            chainRow.style.display = 'none';
        }
    }

    document.querySelector('form').addEventListener('change', checkChain);
    window.onload = checkChain;
</script>

{% endblock %}