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

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

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

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

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

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

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

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

<div style="margin-bottom: 20px;">
  <label for="comments">{{ Lexicon.comments_label }}</label>
<textarea name="comments" id="comments" rows="4" style="width: 100%;">{{ form.comments.data or '' }}</textarea>
  {{ formfield_errors 'comments' }}
</div>
</div>

<script>
    function validateQuestionnaireForm() {
        const lang = "{{ lang }}";
        
        // Check if all radio button groups have a selection
        const radioGroups = ['difficulty_forecast', 'difficulty_allocation', 'comfortable_allocation', 'advice_helpful', 'trust_technology', 'regret_decision', 'resist_blame'];
        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="page4-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('page4-submit-btn').click();">Suivant</button>
{% else %}
    <button class="btn btn-primary" type="button" onclick="if(validateQuestionnaireForm()) document.getElementById('page4-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}