{{define "admin_seats_form"}}
<div class="thm-events">
  <div class="mod-back"><a href="/admin/seats">← 返回厅图列表</a></div>

  <div class="panel">
    <h2>{{if eq .Data.Mode "create"}}画一张厅图{{else}}编辑厅图「{{.Data.Layout.Name}}」{{end}}</h2>
    {{if .Data.Error}}<div class="alert">{{.Data.Error}}</div>{{end}}
    <p class="shelf-note" style="margin-bottom:14px;">点格子循环换类型：<b>空 → 普通 → VIP → 情侣 → 无障碍 → 停售 → 空</b>（空格就是过道）。排号列号自动生成，座位号形如 R3C5（3排5座）——它跨场次固定，是被抢的资源。</p>

    <form method="post" action="{{if eq .Data.Mode "create"}}/admin/seats/create{{else}}/admin/seats/{{.Data.Layout.ID}}/update{{end}}">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <div class="form-row">
        <label>厅图名称</label>
        <input type="text" name="name" required value="{{.Data.Layout.Name}}" placeholder="如：3号厅 · IMAX 厅">
      </div>

      <div class="form-row">
        <label>画布（点格换类型）</label>
        <div class="form-inline" style="margin-bottom:10px;gap:8px;">
          <span class="shelf-note">行</span>
          <input type="number" id="seatRows" min="1" max="30" value="10" style="width:74px;">
          <span class="shelf-note">列</span>
          <input type="number" id="seatCols" min="1" max="30" value="16" style="width:74px;">
          <button type="button" class="btn btn-ghost btn-sm" id="seatReset">按行列重画</button>
          <button type="button" class="btn btn-ghost btn-sm" onclick="seatPreset('std')">标准厅</button>
          <button type="button" class="btn btn-ghost btn-sm" onclick="seatPreset('odd')">不规则厅</button>
          <button type="button" class="btn btn-ghost btn-sm" onclick="seatPreset('clear')">清空</button>
        </div>
        <div id="seatCanvas" style="overflow:auto;background:#0e131c;border:1px solid var(--line,#ddd);border-radius:12px;padding:16px 12px;"></div>
        <div style="display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px;">
          <span>🟦 普通</span><span>🟧 VIP</span><span>🟪 情侣</span><span>🟩 无障碍</span><span>⬜ 停售</span><span>▫ 空（过道）</span>
        </div>
        <p class="forms-edit-hint" id="seatStat">已画 0 座</p>
      </div>

      <textarea name="rows_json" id="seatJSON" hidden>{{.Data.Layout.RowsJSON}}</textarea>

      <div style="display:flex;gap:10px;align-items:center;">
        <button class="btn btn-primary" type="submit">{{if eq .Data.Mode "create"}}保存厅图{{else}}保存修改{{end}}</button>
        <a class="btn btn-ghost" href="/admin/seats">返回列表</a>
      </div>
    </form>
  </div>
</div>

<script>
(function () {
  var TYPES = ['', 'normal', 'vip', 'couple', 'accessible', 'closed'];
  var COLOR = { normal: '#3b82f6', vip: '#f5a524', couple: '#ec4899', accessible: '#22c55e', closed: '#3a4356' };
  var R = 10, C = 16, M = [];

  function blank(r, c) { M = []; for (var i = 0; i < r; i++) { var row = []; for (var j = 0; j < c; j++) row.push(''); M.push(row); } R = r; C = c; }

  function fromJSON() {
    var raw = document.getElementById('seatJSON').value.trim();
    var rows = []; var maxC = 0;
    try { rows = JSON.parse(raw).rows || []; } catch (e) { rows = []; }
    if (!rows.length) { blank(10, 16); return; }
    var maxR = 0;
    rows.forEach(function (r) {
      var n = 0;
      (r.seats || []).forEach(function (s) {
        var m = /^R(\d+)C(\d+)$/.exec(s.id || '');
        if (m) { if (+m[1] > maxR) maxR = +m[1]; if (+m[2] > maxC) maxC = +m[2]; }
        n++;
      });
    });
    if (!maxR || !maxC) { blank(10, 16); return; }
    blank(maxR, maxC);
    rows.forEach(function (r, ri) {
      (r.seats || []).forEach(function (s) {
        var m = /^R(\d+)C(\d+)$/.exec(s.id || '');
        if (m && M[+m[1] - 1]) M[+m[1] - 1][+m[2] - 1] = s.type || 'normal';
      });
    });
  }

  function toJSON() {
    var out = { rows: [] };
    var n = 0;
    for (var i = 0; i < R; i++) {
      var seats = [];
      for (var j = 0; j < C; j++) {
        if (M[i][j]) { seats.push({ id: 'R' + (i + 1) + 'C' + (j + 1), type: M[i][j] }); n++; }
      }
      if (seats.length) out.rows.push({ label: (i + 1) + '排', seats: seats });
    }
    document.getElementById('seatJSON').value = JSON.stringify(out);
    document.getElementById('seatStat').textContent = '已画 ' + n + ' 座 · 共 ' + out.rows.length + ' 排';
    return out;
  }

  function paint() {
    var box = document.getElementById('seatCanvas');
    box.innerHTML = '';
    for (var i = 0; i < R; i++) {
      var g = document.createElement('div');
      g.style.cssText = 'display:flex;gap:5px;margin-bottom:5px;align-items:center;';
      var lb = document.createElement('span');
      lb.style.cssText = 'flex:0 0 42px;font-size:11px;color:#8a94a8;text-align:right;padding-right:8px;';
      lb.textContent = (i + 1) + '排';
      g.appendChild(lb);
      for (var j = 0; j < C; j++) {
        (function (i, j) {
          var d = document.createElement('div');
          var t = M[i][j];
          d.style.cssText = 'width:26px;height:26px;border-radius:7px;cursor:pointer;border:1.5px ' + (t ? 'solid rgba(255,255,255,.45)' : 'dashed #c9d2e3') + ';background:' + (t ? COLOR[t] : 'transparent') + (t === 'closed' ? ';opacity:.5' : '') + ';';
          d.title = (i + 1) + '排' + (j + 1) + '座';
          d.onclick = function () {
            var cur = TYPES.indexOf(M[i][j]);
            M[i][j] = TYPES[(cur + 1) % TYPES.length];
            paint(); toJSON();
          };
          g.appendChild(d);
        })(i, j);
      }
      box.appendChild(g);
    }
    toJSON();
  }

  window.seatPreset = function (kind) {
    if (kind === 'clear') { blank(R, C); }
    if (kind === 'std') { for (var i = 0; i < R; i++) for (var j = 0; j < C; j++) M[i][j] = i < 2 ? 'vip' : 'normal'; }
    if (kind === 'odd') {
      for (var i = 0; i < R; i++) for (var j = 0; j < C; j++) {
        var v = 'normal';
        if (i < 2) v = 'vip';
        if (i === 0 && j >= 5 && j <= 10) v = 'accessible';
        if (i === R - 1 && (j < 3 || j > C - 4)) v = 'couple';
        if (i === R - 1 && j === Math.floor(C / 2)) v = 'closed';
        if (j === 4 || j === C - 5) v = '';
        M[i][j] = v;
      }
    }
    paint();
  };

  document.getElementById('seatReset').onclick = function () {
    var r = Math.max(1, Math.min(30, +document.getElementById('seatRows').value || 10));
    var c = Math.max(1, Math.min(30, +document.getElementById('seatCols').value || 16));
    blank(r, c); paint();
  };

  fromJSON();
  document.getElementById('seatRows').value = R;
  document.getElementById('seatCols').value = C;
  paint();
})();
</script>
{{end}}