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

{% block styles %}
<link rel="stylesheet" href="{{ static 'global/custom.css' }}">
<style>
    .nx-carousel { position: relative; margin: 1rem 0 2rem; padding: 0; }
    .nx-carousel__viewport {
      position: relative;
      overflow: hidden;       /* ok because slides are in normal flow */
      border-radius: .75rem;
    }
    .nx-slide { display: none; padding: 0; }
    .nx-slide img {
      display: block;
      margin: 0 auto;
      max-width: 85%;         /* adjust to taste; 100% if you prefer full width */
      height: auto;
      border-radius: .5rem;   /* optional; looks nice inside rounded viewport */
    }
  .nx-slide.active { display: block; }
  .nx-caption {
      padding: .75rem 1rem;
      text-align: center;
      max-width: 600px;        /* optional: keeps text nicely contained */
      margin: 0 auto;          /* centers the caption block itself */
    }
    .nx-caption h4 {
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .nx-caption p {
      text-align: center;
      margin: 0 auto;
    }
  .nx-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:70px; height:70px;
      border:0; border-radius:999px;
      background:rgba(0,0,0,.3);
      cursor:pointer; transition:background .2s ease;
      /* hide the original arrow text so it doesn't affect layout */
      color:transparent; font-size:0; line-height:0;
    }
    .nx-btn:hover{ background:rgba(0,0,0,.5); }

    /* place the arrow you can nudge precisely */
    .nx-btn::before{
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%, -60%);
      line-height:1;
      font-size:3rem;       /* arrow size */
      color:#fff;
      content:'';             /* set per side below */
    }

    .nx-btn--next::before{ content:'›'; }
    .nx-btn--prev::before{ content:'‹'; }

    /* your horizontal positions */
    .nx-btn--prev{ left:5rem; }
    .nx-btn--next{ right:5rem; }
  .nx-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
  .nx-dots button {
    width: 20px; height: 20px; border-radius: 50%; border: 0; background: #cfd4da;
  }
  .nx-dots button[aria-selected="true"] { background: #0d6efd; }
  .nx-counter {
      position: relative;      /* remove absolute positioning */
      right: auto;
      bottom: auto;
      margin-bottom: 0.25rem;  /* small gap before dots */
      text-align: center;
      display: block;
      background: none;        /* cleaner look */
      font-weight: 600;
      font-size: 1.2rem;
      color: #333;
    }

  .otree-title { margin-top:4rem !important;
                    text-align: left !important;}

    /* make the yellow timer sit closer to content */
  .otree-timer.alert { margin-bottom: -1rem !important;
                        margin-top:2rem}

  /* remove any top margin at the start of each pane */
  .tab-content { margin-top: 0 !important; }
  .tab-pane > :first-child { margin-top: 0 !important; }

</style>
{% endblock %}

{% block scripts %}
<script src="{{ static 'global/prev_next_button.js' }}"></script>
<script src="{{ static 'global/check_answers.js' }}"></script>

<script>

(function() {
  const root = document.querySelector('.nx-carousel');
  if (!root) return;

  const slides = Array.from(root.querySelectorAll('[data-slide]'));
  const dotsWrap = root.querySelector('.nx-dots');
  const prevBtn = root.querySelector('.nx-btn--prev');
  const nextBtn = root.querySelector('.nx-btn--next');
  const curEl = root.querySelector('#nxCur');
  const totEl = root.querySelector('#nxTot');
  const exampleNextBtn = document.getElementById('example-next');
  const progressEl = document.getElementById("slide-progress");
const needEl = document.getElementById("need-to-view");
  let i = 0, n = slides.length;

  // track which slides have been seen
  const seenSlides = new Set();

  function markSlideSeen(idx) {
    seenSlides.add(idx);
    // unlock "Next" on the Example tab only when all slides seen
    if (exampleNextBtn && seenSlides.size === n) {
      exampleNextBtn.disabled = false;
    }
  }

  function updateProgress() {
        progressEl.textContent = `Slides viewed: ${seenSlides.size}/${n}`;

        if (seenSlides.size === n) {
            needEl.textContent = ""; // remove the warning
        } else {
            needEl.textContent = "Please view all 6 slides to continue.";
        }
    }

    function markSlideSeen(idx) {
        seenSlides.add(idx);
        updateProgress();

        if (exampleNextBtn && seenSlides.size === n) {
            exampleNextBtn.disabled = false;
        }
    }

  // init dots
  slides.forEach((_, idx) => {
    const b = document.createElement('button');
    b.type = 'button';
    b.setAttribute('role', 'tab');
    b.setAttribute('aria-label', 'Go to slide ' + (idx+1));
    b.addEventListener('click', () => go(idx));
    dotsWrap.appendChild(b);
  });
  totEl.textContent = n;

  function render() {
    slides.forEach((s, idx) => s.classList.toggle('active', idx === i));
    dotsWrap.querySelectorAll('button').forEach((b, idx) => {
      b.setAttribute('aria-selected', idx === i ? 'true' : 'false');
    });
    curEl.textContent = i + 1;

    // mark current slide as seen
    markSlideSeen(i);
  }

  function go(idx) { i = (idx + n) % n; render(); }
  function next() { go(i + 1); }
  function prev() { go(i - 1); }

  // controls
  nextBtn.addEventListener('click', next);
  prevBtn.addEventListener('click', prev);

  // keyboard
  root.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') next();
    if (e.key === 'ArrowLeft')  prev();
  });
  root.tabIndex = 0;

  // swipe ...
  let touchX = null;
  root.addEventListener('touchstart', (e) => { touchX = e.touches[0].clientX; }, {passive:true});
  root.addEventListener('touchend', (e) => {
    if (touchX == null) return;
    const dx = e.changedTouches[0].clientX - touchX;
    if (Math.abs(dx) > 40) { dx < 0 ? next() : prev(); }
    touchX = null;
  }, {passive:true});

  // start
  render();
})();

</script>
{% endblock %}

{% block title %}
Instructions
{% endblock %}

{% block content %}
<!-- NAV TABS -->
<ul class="nav nav-tabs sticky-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="intro-tab" data-bs-toggle="tab" href="#intro" role="tab" onclick="topFunction()">Introduction</a>
  </li>
  <li class="nav-item">
  <a class="nav-link" id="ai-tab" data-bs-toggle="tab" href="#ai" role="tab" onclick="topFunction()">{% if is_ai_agent %}AI Agent{% else %}AI Delegation{% endif %}</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="example-tab" data-bs-toggle="tab" href="#example" role="tab" onclick="topFunction()">Example</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="payment-tab" data-bs-toggle="tab" href="#payment" role="tab" onclick="topFunction()">Payment</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="check-tab" data-bs-toggle="tab" href="#check" role="tab" onclick="topFunction()">Check</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">

  <!-- 1. Introduction -->
  <div class="tab-pane fade show active" id="intro" role="tabpanel" aria-labelledby="intro-tab">

    <h3>Overview</h3>
    <p>
      You will take part in a strategic game played on a triangular board with <strong>two other players</strong>.
      In each round, all players negotiate to select a cell and form an agreement that determines how the total reward is split.
    </p>
    <p>
      Your <strong>goal</strong> is to earn as many points as possible by selecting cells that give you a higher share.
      To gain a larger share, try to agree on a cell closer to your own position.
      <strong>To earn points, form an agreement with at least one other player (same cell) and hold it for 10 seconds.</strong>
    </p>
    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>
<!-- AI Agents -->
<div class="tab-pane fade" id="ai" role="tabpanel" aria-labelledby="ai-tab">
  {% if is_ai_agent %}
  <h3>AI Agent</h3>
  <p>
    Your group may include a different combination of human and AI agents.
  </p>
  <p>
    The AI agents have been trained on human gameplay.
  </p>
  {% else %}
  <h3>AI Delegation</h3>
  <p>
    Your group may include players who have chosen to delegate their decisions to an AI agent and are labeled as "AI" in the game.
  </p>
  <p>
    The AI agent makes decisions on behalf of the human player and is trained on human gameplay data.
  </p>
  {% endif %}

  <p><strong>The two types of players are designated as the following.</strong></p>
  <div class="d-flex justify-content-center gap-5 mt-4 text-center">

  <div>
    <div style="font-weight:600; margin-bottom:8px;">
      Human
    </div>
    <img src="{% static 'images/human_silhouette.svg' %}"
         alt="Human"
         style="height:140px; width:auto; display:block; margin:0 auto;">
  </div>

  <div>
    <div style="font-weight:600; margin-bottom:8px;">
      AI
    </div>
    <img src="{% static 'images/ai_silhouette.svg' %}"
         alt="AI player"
         style="height:140px; width:auto; display:block; margin:0 auto;">
  </div>

</div>

  <div class="d-flex gap-2 mt-3">
    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>
  </div>

  <!-- 2. Example -->
  <div class="tab-pane fade" id="example" role="tabpanel" aria-labelledby="example-tab">
    <h3>Game Example</h3>

    <p>
      Please Use the slides below to explore how the game works and see examples of the main actions and mechanics.<br>
      <br>
    </p>

    <!-- Carousel -->
    <div class="nx-carousel" aria-roledescription="carousel">
      <div class="nx-carousel__viewport" aria-live="polite">

        <!-- Slide 1 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/1_Position.png' %}" alt="Player Position" class="img-fluid">
          <div class="nx-caption">
            <h4>1. Player Positions</h4>
            <p>On the board, <strong>you</strong> are positioned at the <strong>bottom corner</strong>; the other players are at the top-left and top-right.<br></p>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/2_Hover.png' %}" alt="Hover to view payoffs" class="img-fluid">
          <div class="nx-caption">
            <h4>2. Hover to View Payoffs</h4>
            <p>Hover any cell to see each player’s points. Closer to your corner = more points for you.</p>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/3_Proposal.png' %}" alt="Making a proposal" class="img-fluid">
          <div class="nx-caption">
            <h4>3. Making and Changing Proposals</h4>
            <p><strong>Making a Proposal:</strong> Click a cell (your ring appears).<br></p>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/4_Retract.png' %}" alt="Retracting a proposal" class="img-fluid">
          <div class="nx-caption">
            <h4>4. Retracting a Proposal</h4>
            <p>Click <strong>outside</strong> the board to clear your current proposal.</p>
          </div>
        </div>

        <!-- Slide 5 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/5_Agreement.png' %}" alt="Forming an agreement" class="img-fluid">
          <div class="nx-caption">
            <h4>5. Forming an Agreement</h4>
            <p>When ≥2 players choose the same cell, a red dot appears and a <strong>10s timer</strong> starts.
               If anyone leaves, the timer resets and the agreement breaks.</p>
          </div>
        </div>

        <!-- Slide 6 -->
        <div class="nx-slide" data-slide>
          <img src="{% static 'images/6_Shrinking.png' %}" alt="Shrinking reward over time" class="img-fluid">
          <div class="nx-caption">
            <h4>6. Shrinking Reward</h4>
            <p>The monetary value per point drops until <strong>120s</strong>. Agree faster to earn more.</p>
          </div>
        </div>
      </div> <!-- /viewport -->

      <!-- Controls -->
      <button class="nx-btn nx-btn--prev" type="button" aria-label="Previous slide">‹</button>
      <button class="nx-btn nx-btn--next" type="button" aria-label="Next slide">›</button>

      <!-- Pagination / position -->
      <div class="nx-dots" role="tablist" aria-label="Slide dots"></div>
      <div class="nx-counter"><span id="nxCur">1</span>/<span id="nxTot"></span></div>
    </div>

      <hr>

      <div id="slide-progress" style="text-align:center; font-weight:600; font-size:1.1rem; margin-top:0.5rem;">
          Slides viewed: 1/6
      </div>

      <div id="need-to-view" style="text-align:center; color:#b30000; font-size:1.1rem; margin-top:0.25rem;">
          Please view all 6 slides to continue.
      </div>

    <hr>


    <div class="d-flex gap-2 mt-4">
      <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <!-- disabled initially; JS will unlock after all 6 Carousel slides are seen -->
      <button id="example-next"
              onclick="topFunction()"
              type="button"
              class="nexttab btn-primary btn next"
              disabled>
        Next
      </button>
    </div>
  </div>

  <!-- 3. Payment -->
  <div class="tab-pane fade" id="payment" role="tabpanel" aria-labelledby="payment-tab">

  <!-- 1. Round payoffs (points) -->
  <h3>How your earnings are calculated</h3>

      <ol>
        <li>
          <strong>Points inside a round</strong><br>
          In each round you earn pointsif you form a lasting agreement with at least one other player.
          <ul>
            <li><strong>Agreement reached:</strong> If an agreement holds for 10 seconds,
                the round ends immediately. Each player in that agreement earns
                <em>(cell point value) × (current value per point)</em>.</li>
            <li><strong>No agreement:</strong> If no coalition forms within 120 seconds,
                the round ends and no one earns any points.</li>
          </ul>
        </li>

        <li>
          <strong>Which round counts for payment</strong><br>
          At the end of the study, one round is randomly selected from the 10 rounds you played.
        </li>

        <li>
          <strong>From points to money</strong><br>
          You will receive a fixed participation fee of £6 per hour plus a performance-based bonus.
          Your bonus for the study equals the points you earned in the selected round multiplied by the value of each point at the moment the agreement was finalized.
          <br>
          <em>Example:</em> If you earn 10 points in the selected round and each point is worth £0.20, your bonus is £2.00.
        </li>
      </ol>

      <hr>
      <h4>Early exit</h4>
      <p>
        If you choose to leave the game before it ends, you will not receive any payment.
        Because the game requires all group members to participate, an early departure also ends
        the session for the other players. If your session ends because another player leaves,
        you still receive the fixed participation fee but no performance bonus.
      </p>

      <h4>Payment exclusion</h4>
      <p>
        Your submission can be <strong>rejected</strong> and you will not receive payment if:
      </p>
      <ul>
        <li>You fail the instructions quiz.</li>
        <li>You quit or are removed before finishing the 10 rounds and final survey questions.</li>
        <li>Our server detects that you already completed this study or a closely related pilot.</li>
        <li>You take longer than 45 minutes to complete the study.</li>
      </ul>
      <p>
        If you answer the manipulation check incorrectly at the end of the experiment, you receive only
        the base hourly payment and no bonus.
      </p>

    <div class="d-flex gap-2 mt-3">
      <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
  </div>

  <!-- 4. Check / Quiz -->
  <div class="tab-pane fade" id="check" role="tabpanel" aria-labelledby="check-tab">
    <h3>Quiz</h3>
    <p>
      Before you can proceed to the game, you must answer the following questions.
      You will have <strong>2 attempts</strong> in total. If necessary, go back to review the instructions.
    </p>

    <div class="mb-3">{{ formfield player.q1 }}</div>
    <div class="mb-3">{{ formfield player.q2 }}</div>

    <input type="hidden" id="fail_count" name="fail_count" value="{{ player.fail_count }}">

    <button type="button" class="btn btn-success" onclick="checkAnswers()">Check Answers</button>
    <p id="feedback" class="mt-2"></p>

    <div class="d-flex gap-2 mt-3">
      <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
      <button type="submit" class="nexttab btn-primary btn next" id="next" disabled>Next</button>
    </div>
  </div>

</div> <!-- /tab-content -->

{% endblock %}