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

{% block styles %}
<style>
  /* 1. 分頁標籤樣式 */
  .round-tabs { margin-top: 15px; border-bottom: 2px solid #c5c5c5; }
  .round-tabs .nav-link { 
    cursor: pointer; border: 2px solid transparent; border-radius: 12px 12px 0 0; 
    padding: 8px 22px; color: #555; background: #f2f2f2; font-weight: 500; 
    transition: 0.15s ease all;
  }
  .round-tabs .nav-link:hover { background: #e5e5e5; }
  .round-tabs .nav-link.active { 
    border-color: #6c63ff #6c63ff #ffffff; background: #ffffff; color: #1a1a1a; font-weight: 700; 
    box-shadow: 0 -1px 4px rgba(0,0,0,0.08);
  }

  /* 2. 彩券卡片與按鈕隱藏邏輯 */
  .ticket-grid { display: block; width: 100%; margin-top: 12px; }
  .ticket-grid > div { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); width: 100%; }

  .ticket-grid input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
  }

  .ticket-grid label { 
    display: block; cursor: pointer; border: 2px solid #d6d6d6; border-radius: 10px; 
    padding: 15px; background: #fff; min-height: 140px; display: flex; 
    flex-direction: column; transition: all 0.2s ease;
    font-size: 0 !important; color: transparent !important; 
  }

  .ticket-grid label:hover {
    border-color: #b0adff; background-color: #f9f9ff; transform: translateY(-2px);
  }

  .ticket-grid input[type="radio"]:checked + label { 
    border-color: #6c63ff; background: #f3f2ff; box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
  }

  /* 3. 摺疊說明樣式 */
  .hint-container { margin-top: 10px; margin-bottom: 25px; border: 2px solid #6c63ff; border-radius: 10px; overflow: hidden; }
  .hint-header { background: #6c63ff; color: white; padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
  .hint-body { padding: 15px; background: white; display: none; }
  .game-type-box { background-color: #f8f9fa; border-left: 4px solid #6c63ff; padding: 12px; margin-bottom: 10px; }
  .game-type-header { font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
  .sub-point { font-size: 0.9rem; color: #555; margin-left: 10px; }

  /* 4. 警示訊息樣式 (同步自 SingleBlock2) */
  .block-alert { display: none; margin-bottom: 15px; font-weight: 600; }
  .round-alert { display: none; margin-bottom: 8px; padding: 6px 10px; font-size: 13px; }
  .choice-question { font-weight: 700; margin: 4px 0 10px; }
</style>
{% endblock %}

{% block title %}{% endblock %}

{% block content %}
<div class="container">
  <h3>Stage 1</h3>

  <div class="hint-container">
    <div class="hint-header" onclick="toggleHint()">
      <span>Click here to review the gameplay instructions for this page </span>
      <span id="hint-icon">▼</span>
    </div>
    <div class="hint-body" id="hintBody">
      {% if block_types_str %}
      {% if "拉霸" in block_types_str %}
      <div class="game-type-box">
        <div class="game-type-header">Slot Machine</div>
        <div class="sub-point">● Observe the height of the colored blocks and the probability labels below. A taller block represents a higher winning probability.</div>
        <div class="sub-point">● The amount on the colored block that ultimately stops in the center of the window will be your reward.</div>
      </div>
      {% endif %}

      {% if "數字" in block_types_str %}
      <div class="game-type-box">
        <div class="game-type-header">Drawing a Number</div>
        <div class="sub-point">● Observe the number of grids occupied by each color and the probability labels below. More grids represent a higher winning probability.</div>
        <div class="sub-point">● If the drawn number falls within the number range indicated on the right, you will receive that prize.</div>
      </div>
      {% endif %}

      {% if "轉盤" in block_types_str %}
      <div class="game-type-box">
        <div class="game-type-header">Spinner</div>
        <div class="sub-point">● Observe the area size of each sector and the probability labels below. A larger area represents a higher probability.</div>
        <div class="sub-point">● The area pointed to by the arrow (▼) at the top indicates your reward.</div>
      </div>
      {% endif %}
      {% endif %}
    </div>
  </div>

  <div id="blockAlert" class="alert alert-warning block-alert">
    You have not finished all questions. Please complete all three choices.
  </div>

  <hr>

  <ul class="nav nav-tabs round-tabs" id="roundTabs" role="tablist">
    <li class="nav-item"><button type="button" class="nav-link active" data-target="#round-1-pane">Choice 1</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-target="#round-2-pane">Choice 2</button></li>
    <li class="nav-item"><button type="button" class="nav-link" data-target="#round-3-pane">Choice 3</button></li>
  </ul>

  <div class="tab-content border border-top-0 p-4 bg-white shadow-sm" style="border-radius: 0 0 12px 12px;">
    <div class="tab-pane active show" id="round-1-pane">
      <div id="alert-s1" class="alert alert-danger round-alert">Please choose one lottery ticket.</div>
      <div class="choice-question">Please choose one lottery ticket.
</div>
      <div class="ticket-grid" data-play-type="{{ block_types.0 }}">{{ form.s1 }}</div>
    </div>
    <div class="tab-pane" id="round-2-pane">
      <div id="alert-s2" class="alert alert-danger round-alert">Please choose one lottery ticket.</div>
      <div class="choice-question">Please choose one lottery ticket.</div>
      <div class="ticket-grid" data-play-type="{{ block_types.1 }}">{{ form.s2 }}</div>
    </div>
    <div class="tab-pane" id="round-3-pane">
      <div id="alert-s3" class="alert alert-danger round-alert">Please choose one lottery ticket.</div>
      <div class="choice-question">Please choose one lottery ticket.</div>
      <div class="ticket-grid" data-play-type="{{ block_types.2 }}">{{ form.s3 }}</div>
    </div>
  </div>
<input type="hidden" name="click_timestamps1_json" id="click_timestamps" value="{{ player.click_timestamps1_json }}">
  <div class="next-btn-wrap" style="text-align: center; margin-top: 30px;">
    <button class="otree-next-button btn btn-primary" id="submitBtn" type="button">Next</button>
</div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'lottery_app/game_vis.js' %}?v=20260314_v2"></script>
<script>
// 當整個網頁的 HTML 元素都載入完成後才執行裡面的程式
document.addEventListener("DOMContentLoaded", function () {

  // ✅ 每頁唯一 key，避免跟其他頁混在一起
  const STORAGE_KEY = "click_timestamps_single_1to3";

  // 取得我們剛剛在 HTML 裡面放的隱藏輸入框 (ID 為 click_timestamps)
  const timestampInput = document.getElementById("click_timestamps");

  // 建立一個紀錄點擊紀錄的清單 (Array)
  let clickHistory = [];

  // ✅ 1) 優先從 localStorage 還原（可抗 F5 / 重新整理）
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      clickHistory = JSON.parse(saved);
    } else {
      // ✅ 2) 沒有 localStorage 才從 server hidden value 還原（可接續上一頁正常提交後的紀錄）
      clickHistory = JSON.parse(timestampInput.value || "[]");
    }
  } catch (e) {
    clickHistory = [];
  }

  // ✅ 3) 把還原後內容塞回 hidden input，確保 submit 時帶回去
  timestampInput.value = JSON.stringify(clickHistory);

  // 找到頁面上所有彩券的選項 (找到 class 為 ticket-grid 裡面的 radio 按鈕)
  const allRadios = document.querySelectorAll('.ticket-grid input[type="radio"]');

  // 針對每一個找到的按鈕，設定一個「監聽器」
  allRadios.forEach(radio => {
    // 當受試者「切換」選項時，就會觸發下面的動作
    radio.addEventListener("change", function() {

      // 只有在該選項被「選中」時才進行紀錄
      if (this.checked) {
        const now = new Date(); // 抓取當下的電腦時間

        // 建立這一筆點擊的詳細資料紀錄
        const clickEntry = {
          field: this.name,        // 紀錄是哪一個回合 (例如：s1 / s2 / s3)
          ticket_id: this.value,   // 紀錄受試者點了哪一張彩券的 ID
          timestamp: now.getTime(),// 紀錄毫秒級時間戳
          time_str: now.toLocaleTimeString() // 人類可讀時間
        };

        // 將這一筆新的紀錄推入清單中
        clickHistory.push(clickEntry);

        // ✅ 同步回 hidden input + localStorage（抗刷新）
        const payload = JSON.stringify(clickHistory);
        timestampInput.value = payload;
        localStorage.setItem(STORAGE_KEY, payload);

        console.log("追蹤點擊紀錄:", clickEntry);
      }
    });
  });

  // ✅ 真正送出表單時清掉 localStorage，避免回到本頁又撈到舊資料
  const form = document.querySelector("form");
  if (form) {
    form.addEventListener("submit", function () {
      localStorage.removeItem(STORAGE_KEY);
    });
  }
});

function toggleHint() {
  const body = document.getElementById('hintBody'), icon = document.getElementById('hint-icon');
  const isHidden = (body.style.display === 'none' || body.style.display === '');
  body.style.display = isHidden ? 'block' : 'none';
  icon.textContent = isHidden ? '▲' : '▼';
}

document.addEventListener("DOMContentLoaded", function () {
  // 檢查特定回合是否已作答
  function isAnswered(name) {
    return !!document.querySelector('input[name="' + name + '"]:checked');
  }

  // 分頁切換功能
  function activateTab(targetSelector) {
    document.querySelectorAll(".nav-link").forEach(t => t.classList.remove("active"));
    document.querySelectorAll(".tab-pane").forEach(p => p.classList.remove("active", "show"));
    const targetTab = document.querySelector(`button[data-target="${targetSelector}"]`);
    if (targetTab) targetTab.classList.add("active");
    const targetPane = document.querySelector(targetSelector);
    if (targetPane) targetPane.classList.add("active", "show");
  }

  document.querySelectorAll(".nav-link").forEach(tab => {
    tab.onclick = () => activateTab(tab.getAttribute("data-target"));
  });

  // 提交邏輯 (同步自 SingleBlock2)
  const submitBtn = document.getElementById("submitBtn");
  const names = ["s1", "s2", "s3"];

  submitBtn.addEventListener("click", function () {
    let firstUnanswered = null;

    names.forEach(name => {
      const answered = isAnswered(name);
      document.getElementById("alert-" + name).style.display = answered ? "none" : "block";
      if (!answered && !firstUnanswered) firstUnanswered = name;
    });

    if (firstUnanswered) {
      document.getElementById("blockAlert").style.display = "block";
      activateTab("#round-" + firstUnanswered.substring(1) + "-pane");
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      document.querySelector("form").submit();
    }
  });

  // 隱藏各分頁的個別警示 (當使用者選取時)
  names.forEach(name => {
    document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
      r.addEventListener("change", () => {
        document.getElementById("alert-" + name).style.display = "none";
      });
    });
  });
});
</script>
{% endblock %}