{% 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;
  }

  .next-btn-wrap{
    text-align: right;
    margin-top: 24px;
  }

  .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;
  }

  .info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border: 1px solid #000;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
  }

  .info-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }

  .modal-backdrop.open {
    display: flex;
  }

  .modal-box {
    width: min(720px, 95vw);
    max-height: 85vh;
    overflow: auto;
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  }

  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .modal-title {
    font-size: 16px;
    margin: 0;
  }

  .modal-close {
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
  }

  #rules_modal_title {
    font-size: 1.25em;
    font-weight: 500;
  }
</style>

<div class="p1-wrap">
  <div class="p1-section">

    <div class="activity-title-box">
      Choix et ressenti durant l’expérience
    </div>

    {% formfield player.satisfaction_performance %}
    {% formfield player.perceived_difficulty %}
    {% formfield player.stress_level %}
    {% formfield player.ppm_reflects_ability %}
    {% formfield player.ppm_depends_on_duration %}


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

  </div>
</div>

<div id="rules_modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="modal-box">
    <div class="modal-header">
      <h5 id="rules_modal_title" class="modal-title"></h5>
      <button type="button" class="btn-close" id="rules_modal_close" aria-label="Close"></button>
    </div>
    <div id="rules_modal_body"></div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" id="rules_modal_close_footer">Fermer</button>
    </div>
  </div>
</div>

<script>
(function () {
  const modal = document.getElementById('rules_modal');
  const titleEl = document.getElementById('rules_modal_title');
  const bodyEl = document.getElementById('rules_modal_body');

  function openModal(title, html) {
    titleEl.textContent = title || '';
    bodyEl.innerHTML = html || '';
    modal.classList.add('open');
    modal.setAttribute('aria-hidden', 'false');
  }

  function closeModal() {
    modal.classList.remove('open');
    modal.setAttribute('aria-hidden', 'true');
    titleEl.textContent = '';
    bodyEl.innerHTML = '';
  }

  document.addEventListener('click', function (e) {
    const btn = e.target.closest('.info-btn');
    if (btn) {
      const t = btn.getAttribute('data-modal-title') || '';
      const b = btn.getAttribute('data-modal-body') || '';
      openModal(t, b);
      return;
    }
    if (e.target === modal) {
      closeModal();
    }
  });

  document.getElementById('rules_modal_close').addEventListener('click', closeModal);
  document.getElementById('rules_modal_close_footer').addEventListener('click', closeModal);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && modal.classList.contains('open')) {
      closeModal();
    }
  });
})();
</script>

{% endblock %}