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

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

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

          <div style="margin-bottom: 20px;">
    <label>{{ Lexicon.finlit3_label }}</label>
    <div>
      {% for value, label in finlit3_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="finlit3" value="{{ value }}"
            {% if form.finlit3.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 = ['finlit1', 'finlit2', 'finlit3'];
        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;
            }
        }
        
        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="page2-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('page2-submit-btn').click();">Suivant</button>
{% else %}
    <button class="btn btn-primary" type="button" onclick="if(validateQuestionnaireForm()) document.getElementById('page2-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}