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

{{ block content }}

<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;
}


.row {
  display: flex;
  flex-wrap: nowrap; /* Prevent columns from wrapping to the next line */
  overflow-x: auto; /* Enable horizontal scrolling if necessary */
  padding: 10px; /* Set minimum padding/space between the columns */
}

/* Create two equal columns that floats next to each other */
.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;
}

/* Beliefs input table */
table.beliefs-table {
    border-collapse: collapse;
    margin: 0 auto;
    border: none;
}

table.beliefs-table th {
    padding: 6px 20px;
}

table.beliefs-table td {
    border: none;
    text-align: center;
    padding: 6px 20px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
}

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

.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;
}

</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>{{C.NUM_QUOTA}}</b> travelers. There are <b>{{C.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 <b>if you rank it first?</b></p>

      {{ formfield_errors 'beliefA' }}{{ formfield_errors 'beliefB' }}{{ formfield_errors 'beliefC' }}
      {{ formfield_errors 'beliefD' }}{{ formfield_errors 'beliefE' }}{{ formfield_errors 'beliefF' }}
      <table class="beliefs-table">
        <thead>
          <tr>
            <th>Island</th>
            <th>Probability (%)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="island-badge" data-island="A" style="background-color:rgb(21,96,130);color:white">A</span></td>
            <td>{{ form.beliefA }}</td>
          </tr>
          <tr>
            <td><span class="island-badge" data-island="B" style="background-color:rgb(233,113,50);color:white">B</span></td>
            <td>{{ form.beliefB }}</td>
          </tr>
          <tr>
            <td><span class="island-badge" data-island="C" style="background-color:rgb(25,107,36);color:white">C</span></td>
            <td>{{ form.beliefC }}</td>
          </tr>
          <tr>
            <td><span class="island-badge" data-island="D" style="background-color:rgb(15,158,213);color:white">D</span></td>
            <td>{{ form.beliefD }}</td>
          </tr>
          <tr>
            <td><span class="island-badge" data-island="E" style="background-color:rgb(160,43,147);color:white">E</span></td>
            <td>{{ form.beliefE }}</td>
          </tr>
          <tr>
            <td><span class="island-badge" data-island="F" style="background-color:rgb(209,209,209);color:#222">F</span></td>
            <td>{{ form.beliefF }}</td>
          </tr>
        </tbody>
      </table>

    </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 island.</p>
    <p>We will call your reported assignment probability at this island <b><i>p</i></b>.</p>
    <p>We will then simulate the assignment process, modifying your list so that the selected island is first. 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 beliefs 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>
    <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 beliefSubmitCountInput = document.getElementById('belief-submit-count-input');
    var beliefFields = ['beliefA', 'beliefB', 'beliefC', 'beliefD', 'beliefE', 'beliefF'];

    function allBeliefsFilled() {
        for (var i = 0; i < beliefFields.length; i++) {
            var input = document.querySelector('input[name="' + beliefFields[i] + '"]');
            if (!input || input.value === '') return false;
        }
        return true;
    }

    function checkAllBeliefsFilled() {
        if (!allBeliefsFilled()) {
            confirmState = false;
            submitBtnContainer.style.display = 'none';
            confirmContainer.style.display   = 'none';
        } else if (!confirmState) {
            submitBtnContainer.style.display = '';
        }
    }

    // Input change: reset confirm state if needed, then check completeness
    document.querySelectorAll('input[name^="belief"]').forEach(function(input) {
        input.addEventListener('input', function() {
            if (confirmState) {
                confirmState = false;
                confirmContainer.style.display = 'none';
            }
            checkAllBeliefsFilled();
        });
    });

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

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

    checkAllBeliefsFilled();

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

    // ── 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').forEach(function(dot) {
        dot.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        dot.addEventListener('mouseleave', function() { unhighlightIsland(this.dataset.island); });
    });

    document.querySelectorAll('.island-badge[data-island]').forEach(function(badge) {
        badge.addEventListener('mouseenter', function() { highlightIsland(this.dataset.island); });
        badge.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 }}