{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Questionnaire de fin d’expérience{% endblock %}

{% block content %}

<style>
  .p1-wrap{
    max-width: 980px;
    margin: 0 auto;
  }

  .p1-wrap p{
    margin-bottom: 14px;
  }

  .p1-wrap hr{
    margin: 18px 0;
  }

  .p1-wrap h5{
    margin: 0 0 12px 0;
  }
  .p1-section{
    margin-top: 24px;
    margin-bottom: 24px;
  }
  #current_other_wrap,
  #field_other_wrap{
    margin-top: 8px;
  }

  /* consistent right-aligned next button */
  .next-btn-wrap{
    text-align: right;
    margin-top: 24px;
  }

  /* Standard activity boxes */
   .activity-title-box {
       display: inline-block;
       border: 1px solid #e6e6e6;
       border-radius: 10px;
       padding: 8px 16px;
       background: #fafafa;
       font-weight: 600;
       margin: 18px 0 10px 0;
   }
</style>

<div class="p1-wrap">
  <div class="p1-section">
  <p>
    Avant de finir l'expérience, voici quelques questions visant à mieux vous connaître et mieux comprendre vos choix et ressenti durant cette expérience.
    Nous vous invitons à y répondre de façon très spontanée.
  </p>

  <hr>

  <div class="activity-title-box">
      Informations générales
  </div>

  {% formfield player.gender %}
  {% formfield player.age %}
  {% formfield player.current_status %}

  <div id="current_other_wrap">
      {% formfield player.current_other %}
  </div>

  {% formfield player.field_of_study_or_work %}

  <div id="field_other_wrap">
      {% formfield player.field_of_study_or_work_other %}
  </div>

  {% formfield player.baccalaureat_grade %}

  <div class="next-btn-wrap">
      {% next_button %}
  </div>
  </div>
</div>

<script>
(function () {
    function toggleCurrentOther() {
        const wrap = document.getElementById('current_other_wrap');
        if (!wrap) return;

        const selected = document.querySelector('input[name="current_status"]:checked');
        const show = selected && selected.value === 'Autre';
        wrap.style.display = show ? 'block' : 'none';
    }

    function toggleFieldOther() {
        const wrap = document.getElementById('field_other_wrap');
        if (!wrap) return;

        const select = document.querySelector('select[name="field_of_study_or_work"]');
        const show = select && select.value === 'Autre (précisez)';
        wrap.style.display = show ? 'block' : 'none';

        if (!show) {
            const otherInput = document.querySelector('[name="field_of_study_or_work_other"]');
            if (otherInput) otherInput.value = '';
        }
    }

    document.addEventListener('change', function (e) {
        if (e.target && e.target.name === 'current_status') toggleCurrentOther();
        if (e.target && e.target.name === 'field_of_study_or_work') toggleFieldOther();
    });

    toggleCurrentOther();
    toggleFieldOther();
})();
</script>

{% endblock %}