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

{% block title %}{% endblock %}

{% block content %}
<h4 style="margin-top: 0;">Personne B</h4>
<style>
  .prob-table th, .prob-table td { vertical-align: middle; }
  .prob-table th { white-space: nowrap; }
  .prob-input { width: 64px; text-align: center; padding-left: 6px; padding-right: 6px; }
  .remain-badge { display: inline-block; min-width: 120px; padding: 4px 10px; border-radius: 999px; }
  .remain-ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
  .remain-bad { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
  .remain-warn { background: #fff8e1; color: #6d4c41; border: 1px solid #ffe0b2; }
  .subtle { color: #999; }
  .sticky-first { position: sticky; left: 0; background: #fff; z-index: 1; }
  .row-shade { background: #fafafa; }
</style>

<p class="subtle">
<strong>Rappel:</strong> Dans ce monde simulé, 100 personnes ont chacune un niveau de productivité différent,
compris entre 1 et 100.
</p>
<ul class="subtle"><li><strong>Productivité = nombre d’exercices résolus par minute</strong></li>
<li><strong>Performance (nombre total d’exercices résolus) = Productivité x Temps</strong></li>
  </ul>
<p class="subtle">
Les personnes A et B sont comparées à 9 autres personnes tirées au hasard dans ce
monde simulé. Ces 9 autres personnes ont passé 10 minutes à résoudre des
exercices.
</p>


<p>
  La personne B a une <strong>productivité de {{ prod_B }}</strong>.
</p>

<p>
  Vous allez maintenant voir trois situations dans lesquelles cette même personne
consacre 5, 10 ou 15 minutes à la tâche.
</p>

<p>
Dans chaque situation, la personne B occupe la <strong>même position dans le classement de
  performance :
{{ b_perf_rank }}</strong>.
</p>
<p>
  Cela signifie donc que {{b_above}}
 des 9 autres personnes ont obtenu une performance plus élevée que la personne B.
</p>

<p>
  Cela signifie que la personne B est comparée à un groupe différent de personnes dans chaque
situation. Ainsi, même si sa position reste la même dans le classement de performance,
  sa place dans le classement de productivité peut varier selon la situation.
</p>

<p>
Pour chaque situation, votre tâche consiste donc à <strong>prédire la position de la personne B
  dans le classement de productivité</strong>. Indiquez la probabilité que la personne B occupe
chacun des rangs possibles dans ce classement (de 1 = meilleur rang à 10 = pire rang).
</p>

<p>
  Les probabilités indiquées sur chaque ligne doivent totaliser 100 %.
</p>
<table class="table table-bordered text-center align-middle prob-table">
  <thead>
    <tr>
      <th class="sticky-first">Position dans le <br> classement de <br> productivité </br></th>
      <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
      <th>6</th><th>7</th><th>8</th><th>9</th><th>10</th>
      <th>À allouer</th>
    </tr>
  </thead>

  <tbody>
    <tr class="row-shade" data-row="B_short">
      <th class="sticky-first">{{ t_short }} min</th>
      <td>{% formfield player.B_short_p1 label="" %}</td>
      <td>{% formfield player.B_short_p2 label="" %}</td>
      <td>{% formfield player.B_short_p3 label="" %}</td>
      <td>{% formfield player.B_short_p4 label="" %}</td>
      <td>{% formfield player.B_short_p5 label="" %}</td>
      <td>{% formfield player.B_short_p6 label="" %}</td>
      <td>{% formfield player.B_short_p7 label="" %}</td>
      <td>{% formfield player.B_short_p8 label="" %}</td>
      <td>{% formfield player.B_short_p9 label="" %}</td>
      <td>{% formfield player.B_short_p10 label="" %}</td>
      <td><span class="remain-badge remain-warn" data-remain>Initialisation…</span></td>
    </tr>

    <tr data-row="B_med">
      <th class="sticky-first">{{ t_med }} min</th>
      <td>{% formfield player.B_med_p1 label="" %}</td>
      <td>{% formfield player.B_med_p2 label="" %}</td>
      <td>{% formfield player.B_med_p3 label="" %}</td>
      <td>{% formfield player.B_med_p4 label="" %}</td>
      <td>{% formfield player.B_med_p5 label="" %}</td>
      <td>{% formfield player.B_med_p6 label="" %}</td>
      <td>{% formfield player.B_med_p7 label="" %}</td>
      <td>{% formfield player.B_med_p8 label="" %}</td>
      <td>{% formfield player.B_med_p9 label="" %}</td>
      <td>{% formfield player.B_med_p10 label="" %}</td>
      <td><span class="remain-badge remain-warn" data-remain>Initialisation…</span></td>
    </tr>

    <tr class="row-shade" data-row="B_long">
      <th class="sticky-first">{{ t_long }} min</th>
      <td>{% formfield player.B_long_p1 label="" %}</td>
      <td>{% formfield player.B_long_p2 label="" %}</td>
      <td>{% formfield player.B_long_p3 label="" %}</td>
      <td>{% formfield player.B_long_p4 label="" %}</td>
      <td>{% formfield player.B_long_p5 label="" %}</td>
      <td>{% formfield player.B_long_p6 label="" %}</td>
      <td>{% formfield player.B_long_p7 label="" %}</td>
      <td>{% formfield player.B_long_p8 label="" %}</td>
      <td>{% formfield player.B_long_p9 label="" %}</td>
      <td>{% formfield player.B_long_p10 label="" %}</td>
      <td><span class="remain-badge remain-warn" data-remain>Initialisation…</span></td>
    </tr>
  </tbody>
</table>

<p class="subtle" id="globalStatus">Toutes les lignes doivent avoir “À allouer: 0” pour continuer.</p>

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

<script>
(function () {
  function clampInt(v) {
    if (v === '' || v === null || v === undefined) return 0;
    var n = parseInt(v, 10);
    if (isNaN(n)) return 0;
    if (n < 0) return 0;
    if (n > 100) return 100;
    return n;
  }

  function isProbInput(inp) {
    return inp && inp.name && inp.name.indexOf('_p') !== -1;
  }

  function getInputsForRow(rowEl) {
    return Array.from(rowEl.querySelectorAll('input[type="number"], input[type="text"]'))
      .filter(isProbInput);
  }

  function setCompactInputStyles() {
    document.querySelectorAll('input[type="number"], input[type="text"]').forEach(function(inp) {
      if (isProbInput(inp)) {
        inp.classList.add('prob-input');
        inp.setAttribute('inputmode', 'numeric');
        inp.setAttribute('autocomplete', 'off');
      }
    });
  }

  function rowSum(rowEl) {
    var inputs = getInputsForRow(rowEl);
    return inputs.reduce((acc, inp) => acc + clampInt(inp.value), 0);
  }

  function initializeRowToEqualIfAllZero(rowEl) {
    var inputs = getInputsForRow(rowEl);
    var sum = inputs.reduce((acc, inp) => acc + clampInt(inp.value), 0);
    if (sum === 0) {
      inputs.forEach(function(inp) { inp.value = 10; });
    }
  }

  function updateRowRemain(rowEl) {
    var sum = rowSum(rowEl);
    var badge = rowEl.querySelector('[data-remain]');
    if (!badge) return { ok: false, sum: sum };

    var remain = 100 - sum;

    badge.classList.remove('remain-ok', 'remain-bad', 'remain-warn');

    if (remain === 0) {
      badge.textContent = 'À allouer: 0';
      badge.classList.add('remain-ok');
      return { ok: true, sum: sum };
    }

    if (remain > 0) {
      badge.textContent = 'À allouer: ' + remain;
      badge.classList.add('remain-warn');
      return { ok: false, sum: sum };
    }

    badge.textContent = 'Trop: ' + Math.abs(remain);
    badge.classList.add('remain-bad');
    return { ok: false, sum: sum };
  }

  function updateAll() {
    var allRows = Array.from(document.querySelectorAll('tr[data-row]'));
    var ok = true;

    allRows.forEach(function(rowEl) {
      var res = updateRowRemain(rowEl);
      if (!res.ok) ok = false;
    });

    var nextBtn = document.querySelector('button.otree-btn-next, button[type="submit"]');
    if (nextBtn) nextBtn.disabled = !ok;

    var status = document.getElementById('globalStatus');
    if (status) {
      status.textContent = ok
        ? 'Vous pouvez continuer.'
        : 'Toutes les lignes doivent avoir “À allouer: 0” pour continuer.';
    }
  }

  function attachHandlers() {
    Array.from(document.querySelectorAll('tr[data-row]')).forEach(function(rowEl) {
      getInputsForRow(rowEl).forEach(function(inp) {
        inp.addEventListener('input', function() {
          inp.value = clampInt(inp.value);
          updateAll();
        });
        inp.addEventListener('blur', function() {
          inp.value = clampInt(inp.value);
          updateAll();
        });
      });
    });
  }

  setCompactInputStyles();

  Array.from(document.querySelectorAll('tr[data-row]')).forEach(function(rowEl) {
    initializeRowToEqualIfAllZero(rowEl);
  });

  attachHandlers();
  updateAll();
})();
</script>

{% endblock %}