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

{{ block content }}
<script>window.__pageTimeoutSeconds = {{ C.TIMEOUT_SECONDS }};</script>

<style>
.otree-timer { display: none; }
.rank-table {
    border-collapse: collapse;
    margin: 10px auto;
}

.rank-table th,
.rank-table td {
    border: 1px solid #dddddd;
    padding: 4px 8px;
    text-align: center;
}

.rank-table th {
    font-weight: bold;
}

.rank-table input[type="number"] {
    width: 70px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px;
}

.column {
  float: left;
  padding: 10px;
}

.column-left {
  width: 70%;
  min-width: 500px;
  align-items: center;
}

.column-right {
  width: 30%;
  display: flex;
  min-width: 280px;
  flex-direction: column;
  align-items: center;
}

.info-table-container { overflow-x: auto; margin-bottom: 16px; }
.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; }

.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.number-line-section { margin: 6px auto; text-align: center; }
.number-line-section:last-child { margin-bottom: 0; }
.number-line-label { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.number-line-svg { display: block; margin: 0 auto; max-width: 100%; }

.box {
  border: 2px solid #aaa;
  border-radius: 5px;
  padding: 10px 10px;
  margin-bottom: 10px;
}

.pf-graph-container {
    margin-top: 4px;
    padding-top: 0;
}

#pfs-box > p {
    margin: 4px 0;
}

.info-col-highlight {
    background-color: #dff0ff;
}

.indented { margin-left: 2.5em; }

.hint-toggle-btn {
    display: block;
    margin: 24px auto 0 auto;
    padding: 10px 24px;
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}
.hint-toggle-btn:hover {
    background-color: #d0d0d0;
}
.hint-box {
    display: none;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 16px 24px;
    margin: 16px auto;
    max-width: 760px;
}

.slot-drop-zone {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px dashed #bbb;
    margin: 0 auto; background: #f5f5f5;
}

.belief-sum-error {
    color: #c00;
    font-size: 14px;
    margin-top: 8px;
    display: none;
}

</style>

<div class = "row">
  <div class = "column column-left">
    <div id = "pfs-box" class = "box" style = "text-align: center;">
      <p>Your points and priorities for this round are:</p>
      <div class="pf-graph-container">
        {{ pf_graph }}
      </div>
      <p>Each island has room for <b>{{num_quota}}</b> travelers. There are <b>{{num_players}}</b> travelers.</p>
    </div>
  </div>

  <div class = "column column-right">
    <div id = "beliefs-box" class = "box" style = "text-align: center;">
      <p>What do you think is your probability of being sent to each island?</p>

      <table class="rank-table">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Island</th>
            <th>Probability (%)</th>
          </tr>
        </thead>
        <tbody>
          {{ for row in belief_rows }}
          <tr>
            <td>{{ row.rank }}</td>
            <td>
              {{ if row.filled }}
              <span class="island-badge island-dot" data-island="{{ row.island }}"
                    style="background-color:{{ row.bg }};color:{{ row.txt }}">{{ row.island }}</span>
              {{ else }}
              <div class="slot-drop-zone"></div>
              {{ endif }}
            </td>
            <td>
              {{ if row.filled }}
              <input type="number" name="{{ row.field_name }}" min="0" max="100"
                     value="{{ row.value }}"
                     style="width:70px;text-align:center;display:block;margin:0 auto;">
              {{ endif }}
            </td>
          </tr>
          {{ endfor }}
          <tr>
            <td colspan="2" style="text-align:center;">
              <span style="display:block;">Not sent to</span>
              <span style="display:block;">any island</span>
            </td>
            <td>
              <input type="number" name="belief0" min="0" max="100"
                     value="{{ belief0_value }}"
                     style="width:70px;text-align:center;display:block;margin:0 auto;">
            </td>
          </tr>
        </tbody>
      </table>

      <div style="margin-top: 8px; font-size: 14px;">
        Total: <span id="belief-total-display" style="font-weight:bold; color: red;">0</span>%
      </div>

      <div class="belief-sum-error" id="belief-sum-error">
        Probabilities must sum to exactly 100%. Current total: <span id="belief-sum-display">0</span>%.
      </div>

    </div>
  </div>
</div>

<button type="button" class="hint-toggle-btn" id="hint-toggle-btn">Technical Details about Assignment Probability Payoffs</button>

<div class="hint-box" id="hint-box">
    <p>After your submission, we will randomly select one rank position from your submitted list.</p>
    <p>We will call your reported assignment probability at this position <b><i>p</i></b>.</p>
    <p>We will then simulate the assignment process. All other travelers' lists and priority scores will remain unchanged.</p>
    <p>After the simulation, we will compute your score, which we will call <b><i>S</i></b>:</p>
    <p class="indented">If you were sent to the selected island, your score will be <b><i>S = (1 &#x2013; p)&#xB2;</i></b>.</p>
    <p class="indented">If you were not sent to the selected island, your score will be <b><i>S = (p)&#xB2;</i></b>.</p>
    <p>Finally, we will draw a random number <b><i>R</i></b> between 0 and 1.</p>
    <p class="indented"><b>{{ C.BDM_PAY }} points</b> will be added to your payoff if your score is less than this number, <b><i>S &lt; R</i></b>.</p>
</div>

<input type="hidden" name="saw_ap_hint" id="saw-ap-hint-input" value="False">

<p></p>
<!-- Hidden oTree next button — triggered by Confirm -->
<div style="display:none;" id="next-button">{{ next_button }}</div>

<!-- Hidden field: records how many times Submit was clicked -->
<input type="hidden" name="belief_smt_ct" id="belief-submit-count-input" value="0">

<!-- Step 1: Submit button (shown once all belief inputs are filled) -->
<div style="text-align:center; display:none;" id="submit-btn-container">
    <button type="button" class="btn btn-primary" id="submit-btn">Submit</button>
</div>

<!-- Step 2: Confirmation UI -->
<div style="text-align:center; display:none;" id="confirm-container">
    <p>Does your submission look good to you?</p>
    <p id="confirm-sum-warning" style="color:#c00; display:none;">Remember, your reported probabilities must sum to exactly 100%.</p>
    <button type="button" class="btn btn-secondary" id="make-changes-btn">Make Changes</button>
    &nbsp;
    <button type="submit" class="btn btn-success" id="confirm-btn">Confirm</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var confirmState = false;
    var beliefSubmitCount = 0;
    var submitBtnContainer    = document.getElementById('submit-btn-container');
    var confirmContainer      = document.getElementById('confirm-container');
    var confirmSumWarning     = document.getElementById('confirm-sum-warning');
    var beliefSubmitCountInput = document.getElementById('belief-submit-count-input');
    var sumError        = document.getElementById('belief-sum-error');
    var sumDisplay      = document.getElementById('belief-sum-display');
    var totalDisplay    = document.getElementById('belief-total-display');

    function getBeliefInputs() {
        return Array.from(document.querySelectorAll('input[type="number"][name^="belief"]'));
    }

    function beliefSum() {
        return getBeliefInputs().reduce(function(s, inp) {
            var v = parseFloat(inp.value);
            return s + (isNaN(v) ? 0 : v);
        }, 0);
    }

    function allFilled() {
        return getBeliefInputs().every(function(inp) { return inp.value.trim() !== ''; });
    }

    function updateSubmitVisibility() {
        submitBtnContainer.style.display = allFilled() ? '' : 'none';
    }

    function updateTotalDisplay() {
        var total = beliefSum();
        sumDisplay.textContent = total;
        totalDisplay.textContent = total;
        totalDisplay.style.color = (total === 100) ? 'black' : 'red';
        sumError.style.display = (total !== 100) ? '' : 'none';
    }

    // Update live sum tracker and error on any belief input change
    document.getElementById('beliefs-box').addEventListener('input', function(e) {
        if (e.target.type !== 'number') return;
        if (confirmState) {
            confirmState = false;
            confirmContainer.style.display = 'none';
        }
        updateTotalDisplay();
        updateSubmitVisibility();
    });

    document.getElementById('submit-btn').addEventListener('click', function() {
        beliefSubmitCount++;
        beliefSubmitCountInput.value = beliefSubmitCount;
        submitBtnContainer.style.display = 'none';
        confirmState = true;
        confirmSumWarning.style.display = (beliefSum() !== 100) ? '' : 'none';
        confirmContainer.style.display = '';
    });

    document.getElementById('make-changes-btn').addEventListener('click', function() {
        confirmState = false;
        confirmContainer.style.display = 'none';
        updateSubmitVisibility();
    });

    // Block Enter-key / any form submit unless confirmed
    var theForm = document.querySelector('form');
    if (theForm) {
        theForm.addEventListener('submit', function(e) {
            if (!confirmState) {
                e.preventDefault();
                confirmContainer.style.display = 'none';
                updateSubmitVisibility();
            }
        });
    }

    updateSubmitVisibility();

    // Island highlight
    function highlightIsland(island) {
        document.querySelectorAll('.info-table [data-island="' + island + '"]').forEach(function(cell) {
            cell.classList.add('info-col-highlight');
        });
    }
    function unhighlightIsland(island) {
        document.querySelectorAll('.info-table [data-island="' + island + '"]').forEach(function(cell) {
            cell.classList.remove('info-col-highlight');
        });
    }
    document.querySelectorAll('.island-dot, .island-badge[data-island]').forEach(function(el) {
        el.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        el.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var btn       = document.getElementById('hint-toggle-btn');
    var box       = document.getElementById('hint-box');
    var hintInput = document.getElementById('saw-ap-hint-input');
    var isOpen    = false;

    btn.addEventListener('click', function() {
        isOpen = !isOpen;
        box.style.display = isOpen ? 'block' : 'none';
        hintInput.value = 'True';
    });
});
</script>

{{ endblock }}