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

{% block content %}

<style>
  .p1-wrap{
    max-width: 980px;
    margin: 0 auto;
  }
  .p1-wrap p{
    margin-bottom: 14px;
    line-height: 1.35;
  }
  .p1-section{
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .p1-wrap ol,
  .p1-wrap ul{
    margin-top: 0;
    margin-bottom: 14px;
  }
  .p1-wrap li{
    margin-bottom: 8px;
    line-height: 1.35;
  }
  .p1-subtitle-card{
    display: inline-block;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 10px 18px;
    margin: 10px 0 14px 0;
  }
  .p1-subtitle-card h5{
    margin: 0;
  }
  .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;
  }
  .score-table{
    margin: 0 auto;
  }
  table.table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 14px;
  }
  table.table th,
  table.table td{
    border: 1px solid #e6e6e6;
    padding: 10px;
    vertical-align: top;
  }
  table.table thead th{
    background: #fafafa;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
  }
  table.table tbody td{
    text-align: center;
    vertical-align: middle;
  }
  .p1-table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
    margin-bottom: 14px;
  }
  .p1-table th,
  .p1-table td{
    border: 1px solid #e6e6e6;
    padding: 10px;
    vertical-align: top;
    text-align: center;
  }
  .p1-table thead th{
    background: #fafafa;
    font-weight: 600;
  }
  .p1-table th:first-child{
    width: 34%;
    text-align: center;
  }
  .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);
  }
  .info-btn[disabled] {
    cursor: default;
    opacity: 1;
    margin-left: 0;
  }
  .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;
  }

  /* Bigger Rappels modal title */
  #rappelsModal .modal-title {
    font-size: 1.25em;
    font-weight: 500;
  }
  #rules_modal_title {
    font-size: 1.25em;
    font-weight: 500;
  }
</style>

<div class="p1-wrap">

  <div class="p1-section">

    <p>
      Vos réponses sont maintenant enregistrées et ne peuvent plus être modifiées.
    </p>

    <p>
      Avant de continuer, merci de bien vouloir formuler vos meilleures estimations concernant votre performance
      dans chacun des scénarios. Ces prévisions n'affecteront pas le reste de l'expérience.
    </p>

    {% if is_pilot %}
    <p>
      Elles concernent la situation dans laquelle le paiement par minute pour l'activité des curseurs est égal à 0.35€.
    </p>
    {% endif %}

    <div class="p1-subtitle-card">
      <h5>Prévisions</h5>
    </div>

    <p>
      En fonction du temps que vous avez décidé de consacrer aux exercices de logique <strong>dans chaque scénario, combien d'exercices pensez-vous résoudre correctement ?</strong>
      <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" data-bs-toggle="modal" data-bs-target="#rappelsModal">
        Revoir vos scores de la Partie 1
      </button>
    </p>

    <!-- Rappels Modal -->
    <div class="modal fade" id="rappelsModal" tabindex="-1" aria-labelledby="rappelsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rappelsModalLabel">Rappels</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>
                            Lors de la Partie 1, vous avez obtenu les scores suivants :
                        </li>
                    </ul>
                    <table class="table score-table">
                        <thead>
                            <tr>
                                <th>Participant</th>
                                <th>Temps passé</th>
                                <th>Performance</th>
                                <th>Productivité</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="font-weight: 600;">Vous</td>
                                <td style="font-weight: 600;">5 minutes</td>
                                <td style="font-weight: 600;">{{ num_correct }}</td>
                                <td style="font-weight: 600;">{{ correct_per_min }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <table class="p1-table">
      <thead>
        <tr>
          <th>Scénarios</th>
          <th>
            <span>{{ label1 }}</span>
            <button type="button" class="info-btn"
                    data-modal-title="Scénario : {{ label1|escape }}"
                    data-modal-body="{{ rappels1_html|escape }}">+</button>
          </th>
          <th>
            <span>{{ label2 }}</span>
            <button type="button" class="info-btn"
                    data-modal-title="Scénario : {{ label2|escape }}"
                    data-modal-body="{{ rappels2_html|escape }}">+</button>
          </th>
          <th>
            <span>{{ label3 }}</span>
            <button type="button" class="info-btn"
                    data-modal-title="Scénario : {{ label3|escape }}"
                    data-modal-body="{{ rappels3_html|escape }}">+</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>Temps</strong> que vous passerez sur les exercices de logique</td>
          <td><strong>{{ puzzle_minutes_1 }} minutes</strong></td>
          <td><strong>{{ puzzle_minutes_2 }} minutes</strong></td>
          <td><strong>{{ puzzle_minutes_3 }} minutes</strong></td>
        </tr>
        <tr>
          <td><strong>Performance</strong> - nombre total d'exercices que vous pensez résoudre correctement</td>
          <td>{% formfield player.belief_puzz1 label="" %}</td>
          <td>{% formfield player.belief_puzz2 label="" %}</td>
          <td>{% formfield player.belief_puzz3 label="" %}</td>
        </tr>
      </tbody>
    </table>

    <p>
      Vous pouvez cliquer sur le bouton
      <button type="button" class="info-btn" disabled>+</button>
      à côté de chaque scénario pour revoir les règles de ce scénario.
    </p>

    <div style="text-align:right;">
      {{ next_button }}
    </div>
  </div>

</div>

<!-- Shared rules modal -->
<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');
  const closeBtn = document.getElementById('rules_modal_close');

  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 && !btn.disabled) {
      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 %}