{% extends "global/Page.html" %}
{% block title %}Questionnaire{% endblock %}

{% block content %}
<div class="scrollable-content">
<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.gender_label }}</label>
    <div>
      {% for value, label in gender_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="gender" value="{{ value }}"
            {% if form.gender.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.sex_at_birth_label }}</label>
    <div>
      {% for value, label in sex_at_birth_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="sex_at_birth" value="{{ value }}"
            {% if form.sex_at_birth.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.eye_color_label }}</label>
    <div>
      {% for value, label in eye_color_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="eye_color" value="{{ value }}"
            {% if form.eye_color.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.wear_glasses_or_contacts_label }}</label>
    <div>
      {% for value, label in wear_glasses_or_contacts_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="wear_glasses_or_contacts" value="{{ value }}"
            {% if form.wear_glasses_or_contacts.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.vision_problems_label }}</label>
    <div>
      {% for value, label in vision_problems_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="checkbox" name="vision_problems_checkbox" value="{{ value }}"
            {% if value in selected_vision_problems %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
      <input type="hidden" name="vision_problems" id="vision_problems_hidden" value="{{ vision_problems_serialized }}">
      {{ formfield_errors 'vision_problems' }}
    </div>
  </div>

  <div style="margin-bottom: 20px;">
    <label for="age_input">{{ Lexicon.age_label }}</label>
    <input type="number" name="age" id="age_input" value="{{ form.age.data }}" style="width: 50px;">
        {{ formfield_errors 'age' }}
</div>

<div style="margin-bottom: 20px;">
    <label>{{ Lexicon.education_label }}</label>
    <div>
      {% for value, label in education_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="education" value="{{ value }}"
            {% if form.education.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

  <div style="margin-bottom: 20px;">
    <label>{{ Lexicon.work_label }}</label>
    <div>
      {% for value, label in work_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="work" value="{{ value }}"
            {% if form.work.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>

    <div style="margin-bottom: 20px;">
    <label>{{ Lexicon.income_label }}</label>
    <div>
      {% for value, label in income_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="income" value="{{ value }}"
            {% if form.income.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>
  </div>
</div>

<script>
    function validateQuestionnaireForm() {
        const lang = "{{ lang }}";
        
        // Check if all radio button groups have a selection
        const radioGroups = ['gender', 'sex_at_birth', 'eye_color', 'wear_glasses_or_contacts', 'education', 'work', 'income'];
        for (let group of radioGroups) {
            const selected = document.querySelector(`input[name="${group}"]:checked`);
            if (!selected) {
                showValidationError(
                    lang === 'fr' ? 
                    'Veuillez répondre à toutes les questions' : 
                    'Please answer all questions',
                    lang
                );
                return false;
            }
        }

            const selectedVisionProblems = Array.from(
              document.querySelectorAll('input[name="vision_problems_checkbox"]:checked')
            ).map(el => el.value);

            if (selectedVisionProblems.length === 0) {
              showValidationError(
                lang === 'fr' ? 
                'Veuillez répondre à toutes les questions' : 
                'Please answer all questions',
                lang
              );
              return false;
            }

            const hiddenVisionProblems = document.getElementById('vision_problems_hidden');
            if (hiddenVisionProblems) {
              hiddenVisionProblems.value = selectedVisionProblems.join(',');
            }
        
        // Check age field
        const age = document.getElementById('age_input');
        if (!age || !age.value || age.value.trim() === '') {
            showValidationError(
                lang === 'fr' ? 
                'Veuillez répondre à toutes les questions' : 
                'Please answer all questions',
                lang
            );
            return false;
        }
        
        clearValidationError();
        return true;
    }
    
    function showValidationError(message, lang) {
        clearValidationError();
        
        const errorDiv = document.createElement('div');
        errorDiv.id = 'client-validation-error';
        errorDiv.className = 'alert alert-danger';
        errorDiv.style.marginBottom = '20px';
        errorDiv.innerHTML = '<strong>' + message + '</strong>';
        
        const content = document.querySelector('.scrollable-content') || document.querySelector('.card-body') || document.body;
        content.insertBefore(errorDiv, content.firstChild);
        
        errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    function clearValidationError() {
        const existingError = document.getElementById('client-validation-error');
        if (existingError) {
            existingError.remove();
        }
    }
</script>

{# Hidden submit button to allow form submission from footer #}
<button id="page1-submit-btn" type="submit" style="display:none;"></button>
{% endblock %}

{% block footer_buttons %}
{% if lang == 'fr' %}
    <button class="btn btn-primary" type="button" onclick="if(validateQuestionnaireForm()) document.getElementById('page1-submit-btn').click();">Suivant</button>
{% else %}
    <button class="btn btn-primary" type="button" onclick="if(validateQuestionnaireForm()) document.getElementById('page1-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}