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

{% block title %}{% endblock %}

{% block content %}
<h4 style="margin-top: 0;">Personne A</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 A a une <strong>productivité de {{ prod_A }}</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>
Pour chaque situation, la personne A est classée selon sa performance.
Indiquez la probabilité que la personne A 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> performance </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="A_short">
      <th class="sticky-first">{{ t_short }} min</th>
      <td>{% formfield player.A_short_p1 label="" %}</td>
      <td>{% formfield player.A_short_p2 label="" %}</td>
      <td>{% formfield player.A_short_p3 label="" %}</td>
      <td>{% formfield player.A_short_p4 label="" %}</td>
      <td>{% formfield player.A_short_p5 label="" %}</td>
      <td>{% formfield player.A_short_p6 label="" %}</td>
      <td>{% formfield player.A_short_p7 label="" %}</td>
      <td>{% formfield player.A_short_p8 label="" %}</td>
      <td>{% formfield player.A_short_p9 label="" %}</td>
      <td>{% formfield player.A_short_p10 label="" %}</td>
      <td><span class="remain-badge remain-warn" data-remain>Initialisation…</span></td>
    </tr>

    <tr data-row="A_med">
      <th class="sticky-first">{{ t_med }} min</th>
      <td>{% formfield player.A_med_p1 label="" %}</td>
      <td>{% formfield player.A_med_p2 label="" %}</td>
      <td>{% formfield player.A_med_p3 label="" %}</td>
      <td>{% formfield player.A_med_p4 label="" %}</td>
      <td>{% formfield player.A_med_p5 label="" %}</td>
      <td>{% formfield player.A_med_p6 label="" %}</td>
      <td>{% formfield player.A_med_p7 label="" %}</td>
      <td>{% formfield player.A_med_p8 label="" %}</td>
      <td>{% formfield player.A_med_p9 label="" %}</td>
      <td>{% formfield player.A_med_p10 label="" %}</td>
      <td><span class="remain-badge remain-warn" data-remain>Initialisation…</span></td>
    </tr>

    <tr class="row-shade" data-row="A_long">
      <th class="sticky-first">{{ t_long }} min</th>
      <td>{% formfield player.A_long_p1 label="" %}</td>
      <td>{% formfield player.A_long_p2 label="" %}</td>
      <td>{% formfield player.A_long_p3 label="" %}</td>
      <td>{% formfield player.A_long_p4 label="" %}</td>
      <td>{% formfield player.A_long_p5 label="" %}</td>
      <td>{% formfield player.A_long_p6 label="" %}</td>
      <td>{% formfield player.A_long_p7 label="" %}</td>
      <td>{% formfield player.A_long_p8 label="" %}</td>
      <td>{% formfield player.A_long_p9 label="" %}</td>
      <td>{% formfield player.A_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 };
    }

    // remain < 0 => over-allocated
    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();
        });
      });
    });
  }

  // init
  setCompactInputStyles();

  // initialize to 10% each row if still all zeros
  Array.from(document.querySelectorAll('tr[data-row]')).forEach(function(rowEl) {
    initializeRowToEqualIfAllZero(rowEl);
  });

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

{% endblock %}