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

{% block title %}WAIT...{% endblock %}

{% block content %}
<p>Please wait until you are told which of the following to select. </p>
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
  }
  .panel { padding: 16px 20px; }
  .panel h3 { margin: 0 0 12px 0; font-weight: 600; }
  .btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

  .pill {
    appearance: none; border: 0; padding: 12px 18px; border-radius: 14px;
    background: linear-gradient(#f7fbff, #e6eef7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.08);
    font-size: 16px; cursor: pointer; transition: transform .02s ease-in, box-shadow .15s ease;
    user-select: none;
  }
  .pill:active { transform: translateY(1px); }
  .pill.active {
    background: linear-gradient(#eaf5ff, #d5e9ff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 2px #b7d8ff, 0 2px 6px rgba(0,0,0,.1);
    font-weight: 600;
  }

  .wide { min-width: 200px; text-align: center; }
  .medium { min-width: 150px; text-align: center; }
  .center { text-align: center; }

  .next-wrap { text-align: center; margin-top: 24px; }
  .otree-btn-next {
    padding: 10px 18px; border: 0; border-radius: 10px;
    background: #2563eb; color: #fff; font-size: 16px; cursor: pointer;
  }

  .err { margin-top: 6px; color: #b91c1c; font-size: 14px; }
</style>

<!-- Hidden fields that your Player model expects -->
<input type="hidden" name="condition_choice" id="condition_choice">
<input type="hidden" name="manual_group" id="manual_group">

<div style="max-width: 900px; margin: 10px auto 0;">
  <h3>Letter:</h3>
  <div class="btn-group" id="condition-group" role="group" aria-label="Condition">
    <button type="button" class="pill medium" data-value="absolute_nonlevel">A</button>
    <button type="button" class="pill medium" data-value="target_nonlevel">B</button>
    <button type="button" class="pill medium" data-value="absolute_level">C</button>
    <button type="button" class="pill medium" data-value="target_level">D</button>
  </div>
  <div class="err">{% formfield_errors 'condition_choice' %}</div>
</div>
<br><hr><br>

<div style="max-width: 900px; margin: 10px auto 0;">
  <h3>Breakout Room:</h3>
  <div class="btn-group center" id="group-group" role="group" aria-label="Group">
    <button type="button" class="pill medium" data-value="1">1</button>
    <button type="button" class="pill medium" data-value="2">2</button>
    <button type="button" class="pill medium" data-value="3">3</button>
    <button type="button" class="pill medium" data-value="4">4</button>
  </div>
  <!-- show validation message for manual_group -->
  <div class="err">{% formfield_errors 'manual_group' %}</div>
</div>

<div class="next-wrap">
  <!-- standard oTree submit -->
  <button class="otree-btn-next" type="submit">Next</button>
</div>

<script>
  const conditionGroup = document.getElementById('condition-group');
  const groupGroup = document.getElementById('group-group');

  const conditionChoice = document.getElementById('condition_choice');
  const manualGroup = document.getElementById('manual_group');

  function handleSelect(container, button) {
    container.querySelectorAll('.pill').forEach(b => b.classList.remove('active'));
    button.classList.add('active');
  }

  function current(container) {
    const a = container.querySelector('.pill.active');
    return a ? a.dataset.value : null;
  }

  function updateHidden() {
    const cond = current(conditionGroup);
    const grp = current(groupGroup);
    conditionChoice.value = cond || '';
    manualGroup.value = grp || '';
  }

  [conditionGroup, groupGroup].forEach(container => {
    container.addEventListener('click', e => {
      if (e.target.matches('.pill')) {
        handleSelect(container, e.target);
        updateHidden();
      }
    });
  });
</script>

{% endblock %}