{{ extends 'global/Page.html' }}
{{ block title }}Practice Round{{ endblock }}

{{ block content }}

<style>
.row { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 10px; }
.column { float: left; padding: 10px; }
.column-left  { width: 60%; min-width: 400px; }
.column-right { width: 40%; min-width: 300px; display: flex; flex-direction: column; align-items: center; }

.box {
  border: 2px solid black; border-radius: 5px;
  padding: 10px; margin-bottom: 10px;
  width: 100%; box-sizing: border-box; text-align: center;
}

.rank-table { border-collapse: collapse; margin: 8px auto 0 auto; }
.rank-table th, .rank-table td { border: 1px solid #dddddd; padding: 4px 8px; text-align: center; }
.rank-table th { font-weight: bold; }

.island-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-weight: bold; font-size: 13px;
}

.info-table-container { overflow-x: auto; }
.info-table { border-collapse: collapse; margin: 0 auto; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 14px; text-align: center; }
.info-table th.row-label { text-align: left; font-weight: bold; background-color: #f5f5f5; min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }

.dnd-pool {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  min-height: 54px; padding: 6px;
  border: 2px dashed #aaa; border-radius: 8px;
  margin: 0 auto 12px auto; background: #f9f9f9; max-width: 100px;
}
.island-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 15px;
  user-select: none; margin: 3px; flex-shrink: 0;
}
.slot-drop-zone {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px dashed #bbb; margin: 0 auto; background: #f5f5f5;
}

/* Highlight: ranking table Island column */
.island-col-hl { background-color: #dff0ff; }

/* Highlight: info table Priority Score and % Lower Priority rows */
.priority-row-hl td, .priority-row-hl th { background-color: #dff0ff; }
</style>

<div class="row">

  <!-- Left column: instructions, buttons, result display -->
  <div class="column column-left">
    <p>You can click the buttons below to learn how different island rankings and different priorities affect which island you're sent to.</p>
    <p>The other traveler ranked Island <b>{{ other_rank1 }}</b> first and Island <b>{{ other_rank2 }}</b> second.</p>
    <p>You must adjust the island rankings and priorities at least once to proceed.</p>

    <p style="text-align:center; margin-top:16px;">
      <button type="button" class="btn btn-secondary" id="btn-change-ranking">Change Ranking</button>
      &nbsp;
      <button type="button" class="btn btn-secondary" id="btn-change-priority">Change Priorities</button>
    </p>

    <p style="text-align:center; margin-top:12px;"><b>Your island</b>: <span id="prac23-island"></span></p>
    <p style="text-align:center;"><b>Your payoff</b>: <span id="prac23-payoff"></span></p>
  </div>

  <!-- Right column: ranking box + info table -->
  <div class="column column-right">

    <!-- Box 1: ranking (pool + 2-row table; updates on Change Ranking) -->
    <div class="box">
      <p>Your ranking:</p>
      <div id="prac23-pool" class="dnd-pool"></div>
      <table class="rank-table">
        <thead>
          <tr><th>Rank</th><th class="island-col-hl">Island</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>1<br><span style="font-size:11px;color:#aaa;">(Highest)</span></td>
            <td class="island-col-hl" id="prac23-slot1"></td>
          </tr>
          <tr>
            <td>2</td>
            <td class="island-col-hl" id="prac23-slot2"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Box 2: info table (priority rows update on Change Priorities) -->
    <div class="box">
      <div class="info-table-container">
        <table class="info-table">
          <thead>
            <tr>
              <th class="row-label">Island</th>
              <th data-island="A"><span class="island-badge" style="background-color:rgb(21,96,130);color:white">A</span></th>
              <th data-island="B"><span class="island-badge" style="background-color:rgb(233,113,50);color:white">B</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="row-label">Points</th>
              <td data-island="A">140</td>
              <td data-island="B">200</td>
            </tr>
            <tr class="priority-row-hl">
              <th class="row-label">Priority Score</th>
              <td data-island="A" id="prac23-priority-a"></td>
              <td data-island="B" id="prac23-priority-b"></td>
            </tr>
            <tr class="priority-row-hl">
              <th class="row-label">% Lower Priority</th>
              <td data-island="A" id="prac23-pct-a"></td>
              <td data-island="B" id="prac23-pct-b"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>

<!-- Hidden fields: track whether each button was clicked at least once -->
<input type="hidden" name="prac23_changed_ranking"  id="prac23-cr-input" value="0">
<input type="hidden" name="prac23_changed_priority" id="prac23-cp-input" value="0">

<!-- Next button: revealed only after both buttons have been clicked at least once -->
<div id="next-btn-container" style="display:none; text-align:center;">
  <p></p>
  {{ next_button }}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {

    var ISLAND_COLORS = {
        'A': { bg: 'rgb(21,96,130)',  txt: 'white' },
        'B': { bg: 'rgb(233,113,50)', txt: 'white' }
    };
    var PAYOFFS  = { 'A': 140, 'B': 200 };
    var RANKINGS = ['A', 'AB', 'B', 'BA'];

    // Initialise ranking index from subject's Intro21 submission
    var initRanking = "{{ init_ranking }}";
    var rankIdx = RANKINGS.indexOf(initRanking);
    if (rankIdx === -1) rankIdx = 0;

    var prioIdx = 0;  // 0 = priority score 1 (loses tie), 1 = priority score 2 (wins tie)

    var crCount = 0;  // times Change Ranking was clicked
    var cpCount = 0;  // times Change Priorities was clicked

    // ── DOM helpers ──────────────────────────────────────────────────────────
    function makeIslandBadge(island) {
        var span = document.createElement('span');
        span.className = 'island-badge';
        span.style.backgroundColor = ISLAND_COLORS[island].bg;
        span.style.color = ISLAND_COLORS[island].txt;
        span.textContent = island;
        return span;
    }

    function makeEmptySlot() {
        var div = document.createElement('div');
        div.className = 'slot-drop-zone';
        return div;
    }

    function makePoolIcon(island) {
        var div = document.createElement('div');
        div.className = 'island-icon';
        div.style.backgroundColor = ISLAND_COLORS[island].bg;
        div.style.color = ISLAND_COLORS[island].txt;
        div.textContent = island;
        return div;
    }

    // ── Main display update ──────────────────────────────────────────────────
    function updateDisplay() {
        var ranking  = RANKINGS[rankIdx];
        var priority = prioIdx === 0 ? 1 : 2;
        var r1 = ranking.charAt(0);
        var r2 = ranking.length > 1 ? ranking.charAt(1) : '';

        // Assignment logic
        var assigned, payoff;
        if (priority === 2) {
            // Wins tie → gets first choice
            assigned = r1;
            payoff   = PAYOFFS[r1];
        } else {
            // Loses tie → gets second choice (or nothing if only 1 ranked)
            if (r2) {
                assigned = r2;
                payoff   = PAYOFFS[r2];
            } else {
                assigned = null;
                payoff   = 0;
            }
        }

        // Update assignment text in left column
        document.getElementById('prac23-island').textContent =
            assigned ? 'Island ' + assigned : 'none';
        document.getElementById('prac23-payoff').textContent = payoff + ' points';

        // Update pool: show unranked islands
        var pool = document.getElementById('prac23-pool');
        pool.innerHTML = '';
        ['A', 'B'].forEach(function(island) {
            if (ranking.indexOf(island) === -1) {
                pool.appendChild(makePoolIcon(island));
            }
        });

        // Update rank slots
        var slot1 = document.getElementById('prac23-slot1');
        slot1.innerHTML = '';
        slot1.appendChild(makeIslandBadge(r1));

        var slot2 = document.getElementById('prac23-slot2');
        slot2.innerHTML = '';
        slot2.appendChild(r2 ? makeIslandBadge(r2) : makeEmptySlot());

        // Update priority cells
        var score = priority;
        var pct   = priority === 1 ? '0.0%' : '100%';
        document.getElementById('prac23-priority-a').textContent = score;
        document.getElementById('prac23-priority-b').textContent = score;
        document.getElementById('prac23-pct-a').textContent = pct;
        document.getElementById('prac23-pct-b').textContent = pct;

        // Reveal next button once both buttons have been clicked at least once
        if (crCount > 0 && cpCount > 0) {
            document.getElementById('next-btn-container').style.display = '';
        }
    }

    // ── Button handlers ──────────────────────────────────────────────────────
    document.getElementById('btn-change-ranking').addEventListener('click', function() {
        rankIdx = (rankIdx + 1) % RANKINGS.length;
        crCount++;
        document.getElementById('prac23-cr-input').value = crCount;
        updateDisplay();
    });

    document.getElementById('btn-change-priority').addEventListener('click', function() {
        prioIdx = 1 - prioIdx;
        cpCount++;
        document.getElementById('prac23-cp-input').value = cpCount;
        updateDisplay();
    });

    // Initial render
    updateDisplay();
});
</script>

{{ endblock }}