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

.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: 250px;
    flex-direction: column;
    align-items: center;
}

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

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

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

/* Slider */
.slider-wrapper {
    width: 80%;
    margin: 16px auto 8px auto;
}

.slider-track-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-track-row .slider-label {
    font-size: 15px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

.payoff-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    cursor: pointer;
}

.payoff-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.payoff-slider.activated::-webkit-slider-thumb {
    opacity: 1;
}

.payoff-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.payoff-slider.activated::-moz-range-thumb {
    opacity: 1;
}

.value-display {
    margin-top: 10px;
    font-size: 16px;
}
.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>{{ num_quota }}</b> travelers. There are <b>{{ num_players }}</b> travelers.</p>
    </div>
  </div>

  <div class="column column-right">
    <div class="box" style="text-align:center; width:100%; box-sizing:border-box;">
      <p>Your ranking:</p>
      <table class="rank-table">
        <thead><tr><th>Rank</th><th>Island</th></tr></thead>
        <tbody>
          {{ for row in ranking_rows }}
          <tr>
            <td>{{ row.rank }}{{ if row.rank == 1 }}<br><span style="font-size:11px;color:#aaa;">(Highest)</span>{{ endif }}</td>
            <td>
              {{ if row.island }}
              <span class="island-badge" style="background-color:{{ row.bg }};color:{{ row.txt }}">{{ row.island }}</span>
              {{ else }}
              <div class="slot-drop-zone"></div>
              {{ endif }}
            </td>
          </tr>
          {{ endfor }}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Slider box (full width) -->
<div id="slider-box" class="box" style="text-align:center;">
    <p>Please enter a number from <b>0 to 300</b> that best reflects what you think the last assignment task is worth:
</p>

    <div class="slider-wrapper">
        <div class="slider-track-row">
            <span class="slider-label">{{ slider_min }}</span>
            <input type="range" id="payoff-slider" class="payoff-slider"
                   min="{{ slider_min }}" max="{{ slider_max }}" step="1"
                   value="{{ slider_min }}">
            <span class="slider-label">{{ slider_max }}</span>
        </div>
        <div id="value-display" class="value-display" style="display:none;">
            Value: <b id="value-text"></b>
        </div>
    </div>

    <input type="hidden" name="expected_payoff" id="expected-payoff-input" value="">
</div>

<button type="button" class="hint-toggle-btn" id="hint-toggle-btn">Instructions Reminder</button>

<div class="hint-box" id="hint-box">
    <p>After you submit your number, the computer will draw a random number between <b>{{ slider_min }} and {{ slider_max }}</b>.</p>
    <ul>
        <li>If the random number is <b>higher</b> than the number you entered, you will be paid the <b>random number</b>.</li>
        <li>If the random number is <b>equal to or lower</b> than the number you entered, your payment will be your assignment payoff in this task as well.</li>
    </ul>
    <p>To earn the highest payoff, you should <b>enter the amount that makes the assignment payoff and a guaranteed payment seem equally attractive</b>.</p>
</div>

<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="ep_smt_ct" id="ep-submit-count-input" value="0">

<!-- Step 1: Submit button (shown once slider is activated) -->
<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 slider          = document.getElementById('payoff-slider');
    var valueDisplay    = document.getElementById('value-display');
    var valueText       = document.getElementById('value-text');
    var hiddenInput     = document.getElementById('expected-payoff-input');
    var submitBtnContainer = document.getElementById('submit-btn-container');
    var confirmContainer   = document.getElementById('confirm-container');
    var submitCountInput   = document.getElementById('ep-submit-count-input');

    var activated    = false;
    var confirmState = false;
    var submitCount  = 0;

    function updateFill() {
        var min = parseFloat(slider.min);
        var max = parseFloat(slider.max);
        var val = parseFloat(slider.value);
        var pct = activated ? (val - min) / (max - min) * 100 : 0;
        slider.style.background =
            'linear-gradient(to right, #0d6efd ' + pct + '%, #ddd ' + pct + '%)';
    }

    slider.addEventListener('pointerdown', function() {
        if (!activated) {
            activated = true;
            slider.classList.add('activated');
        }
    });

    slider.addEventListener('input', function() {
        updateFill();
        valueDisplay.style.display = '';
        valueText.textContent = slider.value;
        hiddenInput.value = slider.value;

        if (confirmState) {
            confirmState = false;
            confirmContainer.style.display = 'none';
        }
        submitBtnContainer.style.display = '';
    });

    document.getElementById('submit-btn').addEventListener('click', function() {
        submitCount++;
        submitCountInput.value = submitCount;
        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 = '';
    });

    // Block form submit unless confirmed
    var theForm = document.querySelector('form');
    if (theForm) {
        theForm.addEventListener('submit', function(e) {
            if (!confirmState) {
                e.preventDefault();
                if (hiddenInput.value !== '') {
                    submitBtnContainer.style.display = '';
                    confirmContainer.style.display = 'none';
                }
            }
        });
    }

    updateFill();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var btn    = document.getElementById('hint-toggle-btn');
    var box    = document.getElementById('hint-box');
    var isOpen = false;
    btn.addEventListener('click', function() {
        isOpen = !isOpen;
        box.style.display = isOpen ? 'block' : 'none';
    });
});
</script>

{{ endblock }}