{{define "seats_event"}}
  <link rel="stylesheet" href="/static/css/events.css?v={{assetVer}}">
<style>
.seat-wrap{max-width:920px;margin:0 auto;padding:18px 16px 40px}
.seat-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:12px 16px;margin-bottom:14px}
.seat-head b{font-size:16.5px}
.seat-pill{background:#f1f5fb;border:1px solid #dbe3f2;border-radius:20px;padding:3px 12px;font-size:12.5px;color:#3a4560}
.seat-pill i{font-style:normal;color:#1e50c0;font-weight:700}
.seat-screen{margin:4px auto 20px;width:min(560px,94%);text-align:center}
.seat-screen .bar{height:30px;border-radius:0 0 100% 100%/0 0 30px 30px;background:linear-gradient(180deg,#1e50c0,#2f6fed);box-shadow:0 6px 30px rgba(47,111,237,.35)}
.seat-screen .txt{font-size:12px;letter-spacing:9px;color:#2f6fed;margin-top:5px}
.seat-canvas{overflow:auto;background:#f7f9fd;border:1px solid #e4e9f2;border-radius:14px;padding:16px 12px;text-align:center}
.seat-row{display:flex;gap:5px;justify-content:center;align-items:center;margin-bottom:5px}
.seat-rl{flex:0 0 44px;font-size:11px;color:#8a94a8;text-align:right;padding-right:8px}
.seat{width:30px;height:30px;border-radius:8px 8px 5px 5px;border:1.5px solid #c9d2e3;background:#fff;cursor:pointer;transition:.12s;font-size:10px;color:transparent;padding:0}
.seat:hover{transform:scale(1.12);border-color:#2f6fed}
.seat.mine{background:#f5a524;border-color:#d97706;box-shadow:0 0 10px rgba(245,165,36,.55);color:#422006;font-weight:700}
.seat.taken{background:#e8ecf4;border-color:#d5dbe8;cursor:not-allowed}
.seat.off{background:repeating-linear-gradient(45deg,#eceff5,#eceff5 4px,#e2e6ef 4px,#e2e6ef 8px);border-color:#d5dbe8;cursor:not-allowed}
.seat-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#64748b;margin:12px 2}
.seat-legend i{width:15px;height:15px;border-radius:5px;display:inline-block;vertical-align:-3px;border:1.5px solid #c9d2e3}
.seat-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:14px 16px;margin-top:14px}
.seat-bar .picked{font-size:14.5px}
.seat-bar .picked b{color:#d97706}
.seat-timer{font-family:Consolas,monospace;font-size:18px;font-weight:700;color:#1e50c0}
.seat-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:14px 16px;margin-top:12px}
.seat-form label{font-size:12.5px;color:#64748b;display:block;margin-bottom:4px}
.seat-form input{border:1px solid #d5dbe8;border-radius:9px;padding:8px 11px;font-size:14px;min-width:170px}
.seat-msg{min-height:24px;font-size:14px;margin-top:10px}
.seat-msg.ok{color:#15803d}.seat-msg.err{color:#dc2626}.seat-msg.info{color:#2563eb}
.seat-acts{display:flex;gap:8px;flex-wrap:wrap}
.seat-hint{font-size:12.5px;color:#8a94a8;margin-top:8px}
</style>

<div class="seat-wrap">
  <div class="seat-head">
    <b>{{.Data.Event.Title}}</b>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <span class="seat-pill">锁座倒计时 <span class="seat-timer" id="seatTimer">15:00</span></span>
      <span class="seat-pill">已选 <i id="seatN">0</i> 座</span>
      <span class="seat-pill">上座率 <i id="seatRate">0%</i></span>
    </div>
  </div>

  <div class="seat-screen"><div class="bar"></div><div class="txt">银幕 SCREEN</div></div>

  <div class="seat-canvas" id="seatCanvas"></div>

  <div class="seat-legend">
    <span><i style="background:#fff"></i>可选</span>
    <span><i style="background:#f5a524;border-color:#d97706"></i>我锁定的</span>
    <span><i style="background:#e8ecf4;border-color:#d5dbe8"></i>已被锁定 / 已售</span>
    <span><i style="background:repeating-linear-gradient(45deg,#eceff5,#eceff5 4px,#e2e6ef 4px,#e2e6ef 8px)"></i>停售</span>
  </div>

  <div class="seat-bar">
    <div class="picked">已选：<b id="seatPicked">无</b> · 最多 6 座</div>
    <div class="seat-acts">
      <button class="btn btn-ghost btn-sm" id="seatRelease" type="button">松手释放</button>
      <button class="btn btn-primary btn-sm" id="seatTake" type="button">确认出票 →</button>
    </div>
  </div>

  <div class="seat-form">
    <div><label>购票称呼 <span style="color:#dc2626">*</span></label><input id="seatName" maxlength="20" placeholder="出票要对人"></div>
    <div><label>联系方式（选填）</label><input id="seatContact" maxlength="30" placeholder="便于找回这张票"></div>
    <div class="seat-hint" style="flex:1;min-width:200px;">点座即锁，<b>15 分钟内</b>完成出票；超时未付自动放回。出票后座位号写进报名凭证，到场扫码连号对座。</div>
  </div>

  <div class="seat-msg info" id="seatMsg">点座位开始选；同场别人与你同抢一座，只有一个人能锁住。</div>
</div>

<textarea id="seatLayout" hidden>{{.Data.LayoutJSON}}</textarea>
<textarea id="seatSold" hidden>{{.Data.SoldJSON}}</textarea>
<textarea id="seatTok" hidden>{{.Data.Token}}</textarea>

<script>
(function () {
  var EVENT_ID = {{.Data.EventID}};
  var COLOR = { normal: '#3b82f6', vip: '#f5a524', couple: '#ec4899', accessible: '#22c55e', closed: '#3a4356' };
  var LAYOUT, SOLD = [], TOK, mine = {}, picked = {}, timerId = null, deadline = 0;

  function val(id) { return document.getElementById(id).value.trim(); }
  try { LAYOUT = JSON.parse(val('seatLayout')); } catch (e) { LAYOUT = { rows: [] }; }
  try { SOLD = JSON.parse(val('seatSold')) || []; } catch (e) { SOLD = []; }
  TOK = val('seatTok');

  var state = {}; // seat -> '' 可选 | 'taken' | 'mine'
  function rebuild() {
    state = {};
    SOLD.forEach(function (v) { state[v.seat] = v.mine ? 'mine' : 'taken'; });
    Object.keys(mine).forEach(function (s) { state[s] = 'mine'; });
  }

  function paint() {
    rebuild();
    var box = document.getElementById('seatCanvas');
    box.innerHTML = '';
    var total = 0, takenN = 0;
    (LAYOUT.rows || []).forEach(function (r, ri) {
      var g = document.createElement('div');
      g.className = 'seat-row';
      var lb = document.createElement('span');
      lb.className = 'seat-rl';
      lb.textContent = r.label || ((ri + 1) + '排');
      g.appendChild(lb);
      (r.seats || []).forEach(function (s) {
        total++;
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'seat';
        b.textContent = s.id.replace(/^R\d+C/, '');
        var st = state[s.id] || '';
        if (s.type === 'closed') {
          b.className += ' off';
          b.title = '停售';
          total--; takenN++;
        } else if (st === 'mine') {
          b.className += ' mine';
          b.title = '我锁定的 · ' + s.id;
          b.onclick = function () { drop(s.id); };
        } else if (st === 'taken') {
          b.className += ' taken';
          b.title = '已被锁定或已售';
          takenN++;
        } else {
          b.title = '可选 · ' + s.id;
          b.onclick = function () { add(s.id); };
        }
        g.appendChild(b);
      });
      box.appendChild(g);
    });
    document.getElementById('seatRate').textContent = total ? Math.round(takenN / total * 100) + '%' : '0%';
    var keys = Object.keys(picked);
    document.getElementById('seatN').textContent = keys.length;
    document.getElementById('seatPicked').textContent = keys.length ? keys.map(cn).join('、') : '无';
  }

  function cn(id) {
    var m = /^R(\d+)C(\d+)$/.exec(id);
    return m ? (m[1] + '排' + m[2] + '座') : id;
  }
  function msg(cls, t) { var el = document.getElementById('seatMsg'); el.className = 'seat-msg ' + cls; el.textContent = t; }

  function add(id) {
    if (Object.keys(picked).length >= 6) { msg('err', '一次最多选 6 座。'); return; }
    picked[id] = 1;
    paint();
    lock([id]);
  }
  function drop(id) {
    delete picked[id];
    paint();
    release([id]);
  }

  function post(path, data) {
    var body = new URLSearchParams();
    Object.keys(data).forEach(function (k) { body.append(k, data[k]); });
    return fetch(path, { method: 'POST', body: body }).then(function (r) { return r.json(); });
  }

  function lock(seats) {
    post('/seats/event/' + EVENT_ID + '/lock', { seats: seats.join(','), token: TOK }).then(function (d) {
      if (!d.ok) {
        (d.taken || []).forEach(function (s) { delete picked[s]; });
        paint();
        msg('err', d.msg || '锁座失败');
        return;
      }
      seats.forEach(function (s) { mine[s] = 1; });
      if (d.expire) startTimer(Date.parse(d.expire));
      paint();
      msg('ok', '锁上 ' + seats.map(cn).join('、') + ' —— 15 分钟内出票即归你，超时自动放回。');
    }).catch(function () { msg('err', '网络异常，请重试'); });
  }

  function release(seats) {
    post('/seats/event/' + EVENT_ID + '/release', { seats: seats.join(','), token: TOK }).then(function () {
      seats.forEach(function (s) { delete mine[s]; });
      if (!Object.keys(mine).length) stopTimer();
      paint();
      msg('info', '已释放 ' + seats.map(cn).join('、') + '，座位回到可选池。');
    }).catch(function () { msg('err', '网络异常，请重试'); });
  }

  function startTimer(expire) {
    deadline = expire;
    if (timerId) return;
    timerId = setInterval(function () {
      var s = Math.max(0, Math.round((deadline - Date.now()) / 1000));
      document.getElementById('seatTimer').textContent =
        String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
      if (s === 0) {
        stopTimer();
        mine = {}; picked = {};
        paint();
        msg('err', '锁座超时，座位已全部放回。重新选吧。');
      }
    }, 500);
  }
  function stopTimer() {
    if (timerId) { clearInterval(timerId); timerId = null; }
    deadline = 0;
    document.getElementById('seatTimer').textContent = '15:00';
  }

  document.getElementById('seatRelease').onclick = function () {
    var keys = Object.keys(picked).concat(Object.keys(mine).filter(function (s) { return !picked[s]; }));
    keys = keys.filter(function (v, i, a) { return a.indexOf(v) === i; });
    if (!keys.length) { msg('info', '手里没有锁定的座位。'); return; }
    picked = {};
    release(keys);
  };

  document.getElementById('seatTake').onclick = function () {
    var keys = Object.keys(picked);
    if (!keys.length) { msg('err', '还没选座位。'); return; }
    var name = document.getElementById('seatName').value.trim();
    if (!name) { msg('err', '请留下购票称呼——出票要对人。'); document.getElementById('seatName').focus(); return; }
    post('/seats/event/' + EVENT_ID + '/take', {
      seats: keys.join(','), token: TOK, name: name,
      contact: document.getElementById('seatContact').value.trim()
    }).then(function (d) {
      if (!d.ok) { msg('err', d.msg || '出票失败'); return; }
      msg('ok', '出票成功！座位号已写进报名凭证，正在打开凭证页……');
      window.top.location.href = d.url;
    }).catch(function () { msg('err', '网络异常，请重试'); });
  };

  paint();
})();
</script>
{{end}}