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

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

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


<!-- Follow-up question for options 1 and 3 -->
<div id="followup_1_3" style="display: none; margin-bottom: 20px;">
    <label>{{ Lexicon.robo_curious_label }}</label>
    {{ formfield_errors 'robo_curious' }}
      {% for value, label in robo_curious_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="robo_curious" value="{{ value }}"
            {% if form.robo_curious.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>

<!-- Follow-up question for option 2 -->
<div id="followup_2" style="display: none; margin-bottom: 20px;">
    <label>{{ Lexicon.robo_satisfied_label }}</label>
    {{ formfield_errors 'robo_satisfied' }}
      {% for value, label in robo_satisfied_choices %}
        <label style="display: block; margin-right: 15px;">
          <input type="radio" name="robo_satisfied" value="{{ value }}"
            {% if form.robo_satisfied.data == value %}checked{% endif %}>
          {{ label }}
        </label>
      {% endfor %}
    </div>


<div style="margin-bottom: 20px;">
  <label>{{ trust_question }}</label>
 <table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      {% for label in likert_labels %}
        <th style="text-align: center;">{{ label }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
      <tr>
        <td>{{ row.label }}</td>
        {% for i in range(1, 6) %}
          <td style="text-align: center;">
            <input type="radio" name="{{ row.field_name }}" value="{{ i }}"
              {% if row.value == i %}checked{% endif %}>
          </td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>
</div>


<script>
  function updateFollowupVisibility() {
    const selected = document.querySelector('input[name="received_advice"]:checked');
    if (!selected) return;

    const value = selected.value;
    document.getElementById('followup_1_3').style.display = (value === '1' || value === '3') ? 'block' : 'none';
    document.getElementById('followup_2').style.display = (value === '2') ? 'block' : 'none';
  }

  // Initial check on page load
  updateFollowupVisibility();

  // Add event listeners
  document.querySelectorAll('input[name="received_advice"]').forEach((input) => {
    input.addEventListener('change', updateFollowupVisibility);
  });

  // Validation function
  function validateQuestionnaireForm() {
    // Hide any existing errors
    const existingError = document.querySelector('.alert-danger');
    if (existingError) {
      existingError.remove();
    }

    // Check experience (first question)
    if (!document.querySelector('input[name="experience"]:checked')) {
      showValidationError('Please answer all questions.');
      return false;
    }

    // Check received_advice
    const receivedAdviceChecked = document.querySelector('input[name="received_advice"]:checked');
    if (!receivedAdviceChecked) {
      showValidationError('Please answer all questions.');
      return false;
    }

    const receivedAdviceValue = receivedAdviceChecked.value;

    // Check conditional questions based on received_advice
    if (receivedAdviceValue === '1' || receivedAdviceValue === '3') {
      if (!document.querySelector('input[name="robo_curious"]:checked')) {
        showValidationError('Please answer all questions.');
        return false;
      }
    }

    if (receivedAdviceValue === '2') {
      if (!document.querySelector('input[name="robo_satisfied"]:checked')) {
        showValidationError('Please answer all questions.');
        return false;
      }
    }

    // Check trust questions (always required)
    const trustGroups = ['trust_friends', 'trust_influencers', 'trust_advisors', 'trust_robos'];
    for (const group of trustGroups) {
      if (!document.querySelector(`input[name="${group}"]:checked`)) {
        showValidationError('Please answer all questions.');
        return false;
      }
    }

    return true;
  }

  function showValidationError(message) {
    const form = document.querySelector('form');
    const errorDiv = document.createElement('div');
    errorDiv.className = 'alert alert-danger';
    errorDiv.role = 'alert';
    errorDiv.textContent = message;
    form.insertBefore(errorDiv, form.firstChild);
    
    // Scroll to the top of the form
    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    
    // Fallback for browsers that don't support scrollIntoView well
    setTimeout(() => {
      const cardBody = document.querySelector('.card-body');
      if (cardBody) {
        cardBody.scrollTop = 0;
      }
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }, 100);
  }
</script>
</div>

{# Hidden submit button to allow form submission from footer #}
<button id="page3-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('page3-submit-btn').click();">Suivant</button>
{% else %}
    <button class="btn btn-primary" type="button" onclick="if(validateQuestionnaireForm()) document.getElementById('page3-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}