{{define "admin_events_checkin"}}
  <link rel="stylesheet" href="/static/css/events.css?v={{assetVer}}">
<div class="thm-events">
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
    <div>
      <h2 style="margin:0 0 4px;">现场核验</h2>
      <div class="shelf-note">让报名人出示报名凭证二维码，扫码或手工输入报名码即可完成签到。核验可重复，不会重复计数。</div>
    </div>
    <div style="display:flex;align-items:center;gap:10px;">
      <a href="/admin/events" class="btn btn-ghost btn-sm">返回活动列表</a>
    </div>
  </div>

  {{if .Data.Events}}
  <div class="event-tokens">
    {{range .Data.Events}}
    <span class="event-token">{{ico "pin"}} {{truncate .Title 18}}{{if .CheckinToken}} · 口令 <b>{{.CheckinToken}}</b>{{end}}</span>
    {{end}}
  </div>
  {{end}}

  <div class="event-checkin">
    <!-- 左：摄像头扫码（浏览器支持 BarcodeDetector 时可用） -->
    <section class="event-scan">
      <video id="ev-scan-video" class="event-scan-video" playsinline muted hidden></video>
      <div class="event-scan-actions">
        <button id="ev-scan-start" class="btn btn-primary btn-sm" type="button">{{ico "camera"}} 开启摄像头扫码</button>
        <button id="ev-scan-stop" class="btn btn-ghost btn-sm" type="button" hidden>停止</button>
      </div>
      <div id="ev-scan-hint" class="event-scan-hint">
        把报名凭证上的二维码对准摄像头即可自动识别；若浏览器不支持摄像头扫码，请在右侧手工输入报名码。
      </div>
    </section>

    <!-- 右：手工输入 + 核验结果 -->
    <section class="event-manual">
      <h3 class="event-manual-title">{{ico "qr"}} 输入报名码</h3>
      <form id="ev-verify-form" method="post" action="/admin/events/checkin/verify">
        <input type="hidden" name="csrf" value="{{.CSRF}}">
        <div class="event-manual-row">
          <label>所属活动</label>
          <select class="event-field" name="event_id" id="ev-event-id">
            <option value="0" {{if eq .Data.EventID 0}}selected{{end}}>自动匹配（全部活动）</option>
            {{range .Data.Events}}
            <option value="{{.ID}}" {{if eq $.Data.EventID .ID}}selected{{end}}>{{.Title}}</option>
            {{end}}
          </select>
        </div>
        <div class="event-manual-row">
          <label>报名码</label>
          <input id="ev-code" class="event-code-input" type="text" name="code" maxlength="16"
                 value="{{.Data.Code}}" placeholder="如 K7M2QX9P" autocomplete="off" autocapitalize="characters" required>
        </div>
        <button class="btn btn-primary" type="submit" style="width:100%;">核验签到</button>
      </form>

      {{if and (eq .Data.Ok "1") .Data.Result}}
        {{if .Data.Again}}
        <div class="event-result event-result-dup">
          <div class="event-result-head">{{ico "clock"}} 早已核验过 · {{.Data.Result.Name}}</div>
          <div class="event-result-sub">
            报名码 {{.Data.Result.Code}} 已于 {{dateTime .Data.Result.CheckedAt}} 完成签到，无需重复核验。
            {{if .Data.ResultEvent}}活动：{{.Data.ResultEvent.Title}}{{end}}
          </div>
        </div>
        {{else}}
        <div class="event-result event-result-ok">
          <div class="event-result-head">{{ico "check"}} 核验成功 · {{.Data.Result.Name}}</div>
          <div class="event-result-sub">
            报名码 {{.Data.Result.Code}} 已签到，时间 {{dateTime .Data.Result.CheckedAt}}。
            {{if .Data.ResultEvent}}活动：{{.Data.ResultEvent.Title}}{{end}}
          </div>
        </div>
        {{end}}
      {{else if .Data.Err}}
        <div class="event-result event-result-miss">
          <div class="event-result-head">{{ico "close"}} 没有核验通过</div>
          <div class="event-result-sub">{{.Data.Err}}</div>
        </div>
      {{end}}
    </section>
  </div>
</div>

{{/* 摄像头扫码：能识别二维码就自动填码并提交；不支持则安静地退回手工输入 */}}
<script>
(function () {
  var video = document.getElementById('ev-scan-video');
  var startBtn = document.getElementById('ev-scan-start');
  var stopBtn = document.getElementById('ev-scan-stop');
  var hint = document.getElementById('ev-scan-hint');
  var codeInput = document.getElementById('ev-code');
  var form = document.getElementById('ev-verify-form');
  if (!video || !startBtn || !form) { return; }

  var stream = null;
  var timer = null;
  var detector = null;

  if (!('BarcodeDetector' in window)) {
    startBtn.disabled = true;
    hint.textContent = '当前浏览器不支持摄像头扫码（BarcodeDetector 不可用），请直接在右侧输入报名码。';
    return;
  }

  function stopScan() {
    if (timer) { clearInterval(timer); timer = null; }
    if (stream) {
      stream.getTracks().forEach(function (t) { t.stop(); });
      stream = null;
    }
    video.hidden = true;
    video.srcObject = null;
    stopBtn.hidden = true;
    startBtn.hidden = false;
  }

  startBtn.addEventListener('click', function () {
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(function (s) {
      stream = s;
      video.srcObject = s;
      video.hidden = false;
      startBtn.hidden = true;
      stopBtn.hidden = false;
      hint.textContent = '正在识别二维码，把凭证对准镜头即可……';
      return video.play();
    }).then(function () {
      try {
        detector = new BarcodeDetector({ formats: ['qr_code'] });
      } catch (e) {
        detector = new BarcodeDetector();
      }
      timer = setInterval(function () {
        detector.detect(video).then(function (codes) {
          if (!codes || !codes.length) { return; }
          var raw = (codes[0].rawValue || '').trim().toUpperCase();
          if (!raw) { return; }
          codeInput.value = raw;
          stopScan();
          form.submit();
        }).catch(function () {});
      }, 700);
    }).catch(function (e) {
      stopScan();
      hint.textContent = '无法打开摄像头（' + (e && e.message ? e.message : '未知原因') + '），请直接在右侧输入报名码。';
    });
  });

  stopBtn.addEventListener('click', stopScan);
})();
</script>
{{end}}