<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';
if (!$user || !in_array($user['role_name'], ['super_admin','event_manager','walk_leader'], true)) { header('Location: dashboard.php'); exit; }
?>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Attendance</title><link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_attendance_partial.css?v=1">
  <link rel="stylesheet" href="../assets/css/admin_attendance_recheck_guard.css?v=1"><link rel="stylesheet" href="../assets/css/admin_attendance_qr_modes_pro.css?v=1"><link rel="stylesheet" href="../assets/css/admin_attendance_bulk_pro.css?v=1"><link rel="stylesheet" href="../assets/css/admin_wide_pages.css"></head><body>
<?php pyrk_render_nav('admin'); ?>
<main class="container admin-wide-page attendance-admin-page">
  <section class="panel">
    <h1>Attendance tracing</h1>
    <div class="inline-controls"><select id="walkSelect"></select><button class="btn btn-small" onclick="loadAttendance()">Load</button></div>
    <p class="muted">Check-in validates registration and signed waiver. Finish adds full KM and loyalty points. Partial completion can use manual KM or estimate from the last scanned checkpoint.</p>
  </section>
  <section class="grid two attendance-grid">
    <div class="panel qr-hub-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">QR operation hub</p>
          <h2>Scan member QR</h2>
        </div>
        <span class="pill">Camera</span>
      </div>
      <p class="muted small">Use the same scanner for check-in, finish, or station/checkpoint progress. Scan the member QR code from their client portal.</p>

      <div class="qr-mode-grid" role="group" aria-label="QR scanner mode">
        <label class="qr-mode-card active"><input type="radio" name="qrMode" value="checkin" checked> <span>Check-in</span><small>Register arrival</small></label>
        <label class="qr-mode-card"><input type="radio" name="qrMode" value="finish"> <span>Finish walk</span><small>Complete full route</small></label>
        <label class="qr-mode-card"><input type="radio" name="qrMode" value="checkpoint"> <span>Station / checkpoint</span><small>Record station scan</small></label>
      </div>

      <div class="station-picker-panel" id="stationPickerPanel" hidden>
        <label class="field-label">Station/checkpoint to record</label>
        <select id="stationPointSelect"></select>
        <p class="muted small">This list comes from the route points defined for the selected walk.</p>
      </div>

      <div class="inline-controls qr-scanner-controls"><button class="btn btn-secondary" id="startQrBtn">Start QR scanner</button><button class="btn btn-light" id="stopQrBtn" disabled>Stop</button></div>
      <div id="qrReader" class="qr-reader"></div>
      <form id="manualQrForm" class="manual-qr-form">
        <label class="field-label">Manual QR token fallback</label>
        <div class="inline-controls"><input id="manualQrToken" placeholder="Paste member QR token"><button class="btn" id="manualQrSubmitBtn" type="submit">Scan by QR</button></div>
      </form>
      <p id="qrMsg" class="notice"></p>
    </div>
    <div class="panel attendees-panel">
      <div class="attendance-list-head">
        <div>
          <p class="eyebrow">Registered attendees</p>
          <h2>Manual attendance</h2>
        </div>
        <span class="pill">Bulk tools</span>
      </div>
      <div class="attendance-bulk-toolbar" id="attendanceBulkToolbar">
        <div class="bulk-summary">
          <strong id="bulkSelectedCount">0 selected</strong>
          <span id="bulkEligibleCount">Select attendees that need manual check-in.</span>
        </div>
        <div class="bulk-actions">
          <button class="btn btn-light btn-small" type="button" id="selectPendingBtn">Select pending check-ins</button>
          <button class="btn btn-light btn-small" type="button" id="clearSelectionBtn">Clear</button>
          <button class="btn btn-small" type="button" id="bulkCheckinBtn" disabled>Check-in selected</button>
        </div>
      </div>
      <div class="table-wrap"><table><thead><tr><th class="select-col"><input type="checkbox" id="attendanceSelectAll" aria-label="Select all pending check-ins"></th><th>Member</th><th>Emergency</th><th>Medical</th><th>Waiver</th><th>Status</th><th>Last checkpoint</th><th>Actions</th></tr></thead><tbody id="attendanceBody"></tbody></table></div>
      <p id="attendanceMsg" class="notice"></p>
    </div>
  </section>
</main>
<script>window.PYRK_API_BASE='../../api'; window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>';</script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="../assets/js/api.js"></script><script src="../assets/js/admin_attendance.js?v=20260716-open-walk-operations"></script></body></html>
