{% extends "base.html" %}
{% block title %}Thiết bị RFID — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Thiết bị RFID{% endblock %}

{% block extra_style %}
.tb-card { border:2px solid #e5e7eb; border-radius:18px; background:#fff; padding:14px; cursor:pointer; transition:all .15s; }
.tb-card:hover { border-color:#c4b5fd; }
.tb-card.chon { border-color:#7c3aed; box-shadow:0 0 0 3px #ede9fe; }
.tb-card.tat { opacity:.55; }
.tb-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.tb-sw { position:relative; width:46px; height:26px; flex-shrink:0; }
.tb-sw input { opacity:0; width:0; height:0; }
.tb-sw span { position:absolute; inset:0; background:#d1d5db; border-radius:26px; transition:.2s; }
.tb-sw span:before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.tb-sw input:checked + span { background:#7c3aed; }
.tb-sw input:checked + span:before { transform:translateX(20px); }
.tb-buoc { counter-increment:b; position:relative; padding-left:34px; margin-bottom:10px; }
.tb-buoc:before { content:counter(b); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:#7c3aed; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.tb-ss th, .tb-ss td { border-bottom:1px solid #f1f5f9; padding:7px 8px; text-align:left; vertical-align:top; font-size:13px; }
.tb-ss th { background:#faf5ff; color:#5b21b6; font-weight:800; white-space:nowrap; }
{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto space-y-4">

  <div class="ios-card p-4" style="background:linear-gradient(135deg,#faf5ff,#fff7ed);border:1px solid #ddd6fe">
    <div class="font-extrabold text-gray-800 text-lg">📡 Máy đọc RFID của cửa hàng</div>
    <div class="text-sm text-gray-600 mt-1">
      Chọn loại máy để xem trạng thái, hướng dẫn cài và cấu hình. Có thể dùng <b>cùng lúc nhiều máy</b>:
      khay ở quầy để bán hàng, máy cầm tay đi kiểm kho. Gạt công tắc để <b>bật / tắt</b> từng loại.
    </div>
    <div id="tb-tong" class="text-sm font-semibold mt-2 text-violet-800"></div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3" id="tb-the">
    <div class="tb-card" data-may="khay" onclick="tbChon('khay')">
      <div class="flex items-start justify-between gap-2">
        <div class="text-3xl">🗳️</div>
        <label class="tb-sw" onclick="event.stopPropagation()"><input type="checkbox" id="sw-khay" onchange="tbGat('khay', this)"><span></span></label>
      </div>
      <div class="font-extrabold text-gray-800 mt-1">Khay để bàn NRN</div>
      <div class="text-xs text-gray-500">Cắm USB vào máy quầy · đặt món lên khay là lên giỏ</div>
      <div id="tt-khay" class="text-xs font-semibold mt-2"></div>
    </div>
    <div class="tb-card" data-may="cam_tay" onclick="tbChon('cam_tay')">
      <div class="flex items-start justify-between gap-2">
        <div class="text-3xl">🔫</div>
        <label class="tb-sw" onclick="event.stopPropagation()"><input type="checkbox" id="sw-cam_tay" onchange="tbGat('cam_tay', this)"><span></span></label>
      </div>
      <div class="font-extrabold text-gray-800 mt-1">Máy cầm tay NHR-10</div>
      <div class="text-xs text-gray-500">Nối Bluetooth với máy quầy · đi kiểm kho, dò tìm</div>
      <div id="tt-cam_tay" class="text-xs font-semibold mt-2"></div>
    </div>
    <div class="tb-card" data-may="c5" onclick="tbChon('c5')">
      <div class="flex items-start justify-between gap-2">
        <div class="text-3xl">📱</div>
        <label class="tb-sw" onclick="event.stopPropagation()"><input type="checkbox" id="sw-c5" onchange="tbGat('c5', this)"><span></span></label>
      </div>
      <div class="font-extrabold text-gray-800 mt-1">Máy Chainway C5</div>
      <div class="text-xs text-gray-500">Máy Android có màn hình · mở VangPOS ngay trên máy</div>
      <div id="tt-c5" class="text-xs font-semibold mt-2"></div>
    </div>
  </div>

  <!-- ── CHI TIẾT: KHAY ── -->
  <div id="ct-khay" class="ios-card p-4 hidden space-y-3">
    <div class="font-extrabold text-gray-800">🗳️ Khay để bàn NRN</div>
    <div id="ct-khay-tt" class="text-sm"></div>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
      <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Số lần đọc tối thiểu</label>
        <input id="k-min-reads" type="number" min="1" max="10" class="input-ios w-full text-sm" oninput="_kDirty=true"></div>
      <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Ngưỡng sóng (dBm)</label>
        <input id="k-rssi-min" type="number" min="-90" max="-20" class="input-ios w-full text-sm" oninput="_kDirty=true"></div>
      <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Rời khay sau (giây)</label>
        <input id="k-ttl" type="number" min="1" max="30" step="0.5" class="input-ios w-full text-sm" oninput="_kDirty=true"></div>
      <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Công suất (dBm)</label>
        <input id="k-power" type="number" min="0" max="33" class="input-ios w-full text-sm" oninput="_kDirty=true"></div>
    </div>
    <label class="flex items-center gap-2 text-sm cursor-pointer">
      <input id="k-dense" type="checkbox" class="w-4 h-4 accent-violet-600" onchange="_kDirty=true">
      <span class="font-semibold text-gray-700">Dense tag profile — đọc NHIỀU tem cùng lúc</span>
    </label>
    <div class="flex items-center gap-3 flex-wrap">
      <button onclick="tbLuuKhay()" class="btn-ios btn-ios-gold px-4 py-2 font-bold text-sm">💾 Lưu cấu hình khay</button>
      <a href="/tai-ve" class="tkt-act tkt-blue">📥 Tải phần mềm khay (Tải về)</a>
      <span id="k-msg" class="text-sm"></span>
    </div>
    <ol class="text-sm text-gray-700 pt-2" style="counter-reset:b;list-style:none;padding-left:0">
      <li class="tb-buoc">Vào <b>Thêm → Tải về</b> → "📡 Khay đọc RFID — bản cài sẵn", chép sang máy cắm khay.</li>
      <li class="tb-buoc">Bấm đúp <b>KHOI DONG KHAY RFID.bat</b>, dán <b>Mã kết nối</b> (nút bên dưới).</li>
      <li class="tb-buoc">Bấm đúp <b>CAI CHAY CUNG WINDOWS.bat</b> để tự chạy mỗi khi bật máy.</li>
    </ol>
  </div>

  <!-- ── CHI TIẾT: NHR-10 ── -->
  <div id="ct-cam_tay" class="ios-card p-4 hidden space-y-3">
    <div class="font-extrabold text-gray-800">🔫 Máy cầm tay NHR-10 (Bluetooth)</div>
    <div id="ct-cam_tay-tt" class="text-sm"></div>
    <div class="text-sm text-gray-600">Máy cầm tay đi CHUNG với phần mềm khay ở máy quầy (cùng 1 chương trình) —
      không có cấu hình riêng ở đây. Tắt công tắc trên thẻ thì tem máy cầm tay đọc được sẽ bị bỏ qua
      (cần phần mềm khay bản 5.24 trở lên).</div>
    <ol class="text-sm text-gray-700" style="counter-reset:b;list-style:none;padding-left:0">
      <li class="tb-buoc">Cắm đầu USB Bluetooth vào <b>máy quầy</b> (máy chạy phần mềm khay).</li>
      <li class="tb-buoc">Bật máy NHR-10, để gần máy quầy (dưới 10 m).</li>
      <li class="tb-buoc">Phần mềm khay tự tìm và kết nối; chưa thấy thì chạy <b>Cong cu ky thuat → TIM MAY KIEM KHO CAM TAY.bat</b>.</li>
    </ol>
  </div>

  <!-- ── CHI TIẾT: C5 ── -->
  <div id="ct-c5" class="ios-card p-4 hidden space-y-3">
    <div class="font-extrabold text-gray-800">📱 Máy Chainway C5</div>
    <div id="c5-trong-app" class="hidden rounded-xl p-3 text-sm" style="background:#ecfdf5;border:1px solid #6ee7b7">
      <div class="font-bold text-emerald-800">Anh/chị đang mở trang này NGAY TRÊN máy C5.</div>
      <button onclick="tbKetNoiC5()" class="btn-ios btn-ios-gold px-4 py-2.5 font-bold text-sm mt-2">🔗 Kết nối máy C5 này</button>
      <div id="c5-kn-msg" class="text-sm mt-1"></div>
    </div>
    <div class="rounded-xl p-3 text-center space-y-2" style="background:#fffbeb;border:1px solid #fcd34d">
      <div class="font-extrabold text-amber-900 text-left">📷 Mã QR cài máy C5 — quét 1 lần là dùng được</div>
      <div class="text-xs text-gray-600 text-left">Trên máy C5: mở app VangPOS C5 → bấm nút vàng to
        <b>"QUÉT MÃ QR ĐỂ CÀI ĐẶT"</b> (hoặc bóp cò) → hướng đầu máy vào mã này. App tự nhập địa chỉ máy chủ,
        mã kết nối và gắn đúng cửa hàng, rồi mở trang đăng nhập. Mã này chứa mã kết nối máy đọc — đừng chụp gửi ra ngoài.</div>
      <div class="flex gap-2 flex-wrap items-center text-left">
        <label class="text-xs font-bold text-gray-500">Địa chỉ máy C5 dùng để vào VangPOS:</label>
        <input id="c5-qr-dc" class="input-ios-sm flex-1" style="min-width:220px" placeholder="http://192.168.1.x:5001 hoặc https://….ts.net"
               oninput="tbVeQrC5()">
      </div>
      <div id="c5-qr" class="inline-block p-2 bg-white"></div>
      <div id="c5-qr-msg" class="text-xs text-gray-500"></div>
    </div>
    <div id="c5-ds" class="space-y-2"></div>

    <div class="border-t pt-3">
      <div class="text-xs font-bold text-violet-700 uppercase mb-1">⚙️ Cấu hình máy C5 (áp cho mọi máy C5, tự áp sau ~1 giây)</div>
      <div class="text-xs text-gray-600 mb-2">Công suất <b>tự đổi theo việc đang làm</b> — vào trang nào, mở việc nào là máy tự chuyển, không phải chỉnh tay.</div>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div><label class="block text-[11px] font-bold text-gray-500 mb-1">📋 KIỂM KHO: <span id="v-power_kiem_kho"></span> dBm</label>
          <input id="c-power_kiem_kho" type="range" min="5" max="30" class="w-full accent-violet-600" oninput="_cDirty=true;tbVeSo()"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 mb-1">🔍 TÌM SẢN PHẨM: <span id="v-power_tim"></span> dBm</label>
          <input id="c-power_tim" type="range" min="5" max="30" class="w-full accent-violet-600" oninput="_cDirty=true;tbVeSo()"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 mb-1">🏷️ GÁN TEM: <span id="v-power_gan_tem"></span> dBm</label>
          <input id="c-power_gan_tem" type="range" min="5" max="30" class="w-full accent-violet-600" oninput="_cDirty=true;tbVeSo()"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 mb-1">🛒 BÁN HÀNG: <span id="v-power_ban"></span> dBm</label>
          <input id="c-power_ban" type="range" min="5" max="30" class="w-full accent-violet-600" oninput="_cDirty=true;tbVeSo()"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 mb-1">📄 CÁC TRANG KHÁC: <span id="v-power"></span> dBm</label>
          <input id="c-power" type="range" min="5" max="30" class="w-full accent-violet-600" oninput="_cDirty=true;tbVeSo()"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Nhận tem mạnh hơn (kiểm kho)</label>
          <input id="c-rssi_min" type="number" min="-100" max="-20" class="input-ios w-full text-sm" oninput="_cDirty=true"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Nhận tem mạnh hơn (Bán / Gán tem)</label>
          <input id="c-rssi_ban" type="number" min="-100" max="-20" class="input-ios w-full text-sm" oninput="_cDirty=true"></div>
        <div><label class="block text-[11px] font-bold text-gray-500 uppercase mb-1">Cách bóp cò</label>
          <select id="c-che_do" class="input-ios w-full text-sm" onchange="_cDirty=true">
            <option value="giu_co">Bóp GIỮ cò mới đọc (nhả là dừng)</option>
            <option value="lien_tuc">Bóp 1 lần: bật đọc · bóp lần nữa: tắt</option>
          </select></div>
      </div>
      <label class="flex items-center gap-2 text-sm cursor-pointer pt-2">
        <input id="c-beep" type="checkbox" class="w-4 h-4 accent-violet-600" onchange="_cDirty=true">
        <span class="font-semibold text-gray-700">Kêu bíp khi gặp tem mới</span>
      </label>
      <label class="flex items-start gap-2 text-sm cursor-pointer pt-2">
        <input id="c-kk_nhieu_tem" type="checkbox" class="w-4 h-4 mt-0.5 accent-violet-600" onchange="_cDirty=true">
        <span><span class="font-semibold text-gray-700">Kiểm kho: chế độ nhiều tem (Session 1)</span>
          <span class="block text-xs text-gray-500">Tem đã đọc tạm im để nhường tem chưa đọc — đỡ sót món khi cả trăm tem cùng chỗ.
          Chỉ áp ở trang Kiểm kho. Thấy đọc kém hơn thì bỏ tick rồi Lưu.</span></span>
      </label>
      <div class="flex items-center gap-3 flex-wrap pt-2">
        <button onclick="tbLuuC5()" class="btn-ios btn-ios-gold px-4 py-2 font-bold text-sm">💾 Lưu cấu hình C5</button>
        <button onclick="tbMacDinhC5()" class="btn-ios btn-ios-secondary text-xs font-bold px-3 py-2">↺ Về mặc định</button>
        <span id="c-msg" class="text-sm"></span>
      </div>
      <div class="text-[11px] text-gray-500 mt-1">Gán tem / Bán hàng dùng công suất THẤP để chỉ đọc món đưa sát máy — không gán nhầm tem, không đổ cả tủ vào giỏ.
        Kiểm kho / Tìm sản phẩm dùng công suất CAO để đọc được hàng ở xa, không sót món.</div>
    </div>

    <div class="border-t pt-3">
      <div class="text-xs font-bold text-violet-700 uppercase mb-2">🧭 Cài máy C5 mới (làm 1 lần, ~3 phút)</div>
      <ol class="text-sm text-gray-700" style="counter-reset:b;list-style:none;padding-left:0">
        <li class="tb-buoc">Nếu máy C5 không cùng mạng nội bộ với máy chủ: cài app <b>Tailscale</b> trên C5 và đăng nhập đúng tài khoản Tailscale của cửa hàng
          (KHÔNG dùng <span class="font-mono">localhost</span> — đó là chính máy C5).
          <div id="c5-diachi-canh-bao" class="hidden mt-1 text-xs font-semibold text-red-600"></div></li>
        <li class="tb-buoc">Trên máy C5 mở Chrome, vào địa chỉ VangPOS này (<span class="font-mono text-violet-700" id="c5-diachi"></span>), đăng nhập,
          vào trang này, bấm <b>📥 Tải app cho máy C5</b> → mở tệp vừa tải → <b>Cài đặt</b>
          (Android hỏi "cho phép cài ứng dụng" → Cho phép).
          <div class="mt-1"><a id="c5-tai" href="/api/rfid/c5-apk" class="tkt-act tkt-emerald">📥 Tải app cho máy C5 (.apk)</a>
          <span id="c5-tai-tt" class="text-xs text-gray-500"></span></div></li>
        <li class="tb-buoc">Mở app <b>VangPOS C5</b> → nhập địa chỉ VangPOS → <b>Lưu và mở</b>.</li>
        <li class="tb-buoc">Trong app, đăng nhập tài khoản <b>Giám đốc</b> → Thêm → 📡 Thiết bị RFID → thẻ Máy Chainway C5 →
          <b>🔗 Kết nối máy C5 này</b>. Xong — thẻ C5 ở trên chuyển 🟢.</li>
        <li class="tb-buoc">Dùng: <b>Kiểm kho</b> → bật Điểm danh RFID → bóp giữ cò đi quanh tủ. <b>Dò tìm món</b>: bấm 🔍 ở Tồn kho, máy tự đọc liên tục, bóp cò 3 lần để dừng.
          <b>Bán hàng</b> trên C5: đưa món sát đầu máy, bóp cò → món vào giỏ của chính máy C5.</li>
      </ol>
    </div>
  </div>

  <!-- ── MÃ KẾT NỐI ── -->
  <div class="ios-card p-4">
    <div class="flex items-center gap-3 flex-wrap">
      <button onclick="tbXemMa()" class="btn-ios btn-ios-secondary text-xs font-bold px-3 py-2">🔑 Xem mã kết nối</button>
      <span class="text-[11px] text-gray-500">Mã dùng chung cho khay, máy cầm tay và C5. Giữ bí mật như mật khẩu.</span>
    </div>
    <pre id="tb-ma" class="hidden mt-2 font-mono text-[12px] whitespace-pre-wrap break-all bg-violet-50 rounded-lg p-2 border border-violet-200"></pre>
  </div>

  <!-- ── SO SÁNH ── -->
  <div class="ios-card p-4">
    <div class="font-extrabold text-gray-800 mb-2">📊 So sánh 3 loại máy</div>
    <div class="overflow-x-auto">
      <table class="tb-ss w-full">
        <thead><tr><th></th><th>🗳️ Khay NRN</th><th>🔫 NHR-10</th><th>📱 Chainway C5</th></tr></thead>
        <tbody>
          <tr><th>Kiểu máy</th><td>Khay để bàn, cắm USB</td><td>Cầm tay, Bluetooth</td><td>Máy Android cầm tay, có màn hình 5–6"</td></tr>
          <tr><th>Nối với VangPOS</th><td>Qua máy quầy (KhayRFID.exe)</td><td>Qua máy quầy (cùng KhayRFID.exe)</td><td>Thẳng qua Wi-Fi/4G (app VangPOS C5) — không cần máy quầy</td></tr>
          <tr><th>Chip UHF</th><td>Nation NRN</td><td>NHR-10</td><td>Impinj E710 (Gen2X)</td></tr>
          <tr><th>Công suất</th><td>0–33 dBm (đang 12)</td><td>0–30 dBm</td><td>5–30 dBm (tự đổi theo trang)</td></tr>
          <tr><th>Tầm đọc</th><td>Chỉ mặt khay (~vài cm ở 12 dBm)</td><td>Vài mét</td><td>Tới ~30 m (tem chuẩn)</td></tr>
          <tr><th>Tốc độ</th><td>Vài chục tem/giây</td><td>~100 tem/giây</td><td>&gt;1300 tem/giây</td></tr>
          <tr><th>Pin</th><td>Không (cắm điện)</td><td>Pin trong máy</td><td>7.000 / 13.400 mAh, thay nóng</td></tr>
          <tr><th>Bán hàng</th><td>✅ Chính</td><td>Có (vào giỏ máy quầy)</td><td>✅ Bán ngay trên C5 (giỏ của C5)</td></tr>
          <tr><th>Gán tem</th><td>✅</td><td>✅</td><td>✅ ngay trên C5</td></tr>
          <tr><th>Kiểm kho</th><td>Đặt từng khay hàng</td><td>✅ Đi quanh tủ</td><td>✅ Đi quanh tủ, xem kết quả ngay trên máy</td></tr>
          <tr><th>Dò tìm món</th><td>—</td><td>✅ (bóp cò 3 lần dừng)</td><td>✅ (bóp cò 3 lần dừng, tự công suất tối đa)</td></tr>
          <tr><th>Quét mã vạch / QR</th><td>—</td><td>—</td><td>✅ (camera / đầu quét 2D)</td></tr>
          <tr><th>Cập nhật phần mềm</th><td>Tự cập nhật</td><td>Tự cập nhật (cùng khay)</td><td>Bấm "⬆ Bản mới" trên app</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/vendor/qrcode-1.0.0.min.js"></script>
<script>
(function(){
  const TEN = {khay: 'Khay quầy', cam_tay: 'Máy cầm tay NHR-10', c5: 'Máy Chainway C5'};
  const C5MD = {power: 26, power_kiem_kho: 30, power_tim: 30, power_gan_tem: 10, power_ban: 10,
                che_do: 'giu_co', beep: 1, rssi_min: -85, rssi_ban: -55, kk_nhieu_tem: 1};
  const C5_O = ['power', 'power_kiem_kho', 'power_tim', 'power_gan_tem', 'power_ban', 'rssi_min', 'rssi_ban'];
  let _d = null, _chon = localStorage.getItem('tb_rfid_chon') || 'c5';
  window._kDirty = false; window._cDirty = false;
  const $ = id => document.getElementById(id);
  const _e = s => String(s == null ? '' : s).replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[ch]));
  const laC5 = !!(window.VangPOSC5 && window.VangPOSC5.laC5 && window.VangPOSC5.laC5());
  if (laC5) { $('c5-trong-app').classList.remove('hidden'); _chon = 'c5'; }
  // Địa chỉ cho máy KHÁC (C5): trang đang mở trên chính máy chủ (localhost) thì máy C5 không vào được —
  // dùng địa chỉ điện thoại đã khai ở "Kết nối điện thoại" (thường là https://<máy>.ts.net).
  const _laNoiBo = /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(:|$)/.test(location.origin);
  let _dcMayKhac = _laNoiBo ? '' : location.origin;
  function _veDcMayKhac() {
    $('c5-diachi').textContent = _dcMayKhac || '(chưa có — xem dòng đỏ ở bước 1)';
    const cb = $('c5-diachi-canh-bao');
    cb.textContent = _dcMayKhac ? '' : '⚠️ Bạn đang mở trang này trên chính máy chủ (localhost). Khai "Địa chỉ cho điện thoại" ở trang Kết nối điện thoại '
      + '(dạng https://….ts.net) rồi tải lại trang — máy C5 phải dùng địa chỉ đó.';
    cb.classList.toggle('hidden', !!_dcMayKhac);
  }
  _veDcMayKhac();

  window.tbChon = function(m) {
    _chon = m; try { localStorage.setItem('tb_rfid_chon', m); } catch (e) {}
    document.querySelectorAll('.tb-card').forEach(c => c.classList.toggle('chon', c.dataset.may === m));
    ['khay', 'cam_tay', 'c5'].forEach(k => $('ct-' + k).classList.toggle('hidden', k !== m));
  };

  function dot(mau) { return '<span class="tb-dot" style="background:' + mau + '"></span>'; }

  async function nap() {
    let d;
    try { d = await (await fetch('/api/rfid/thiet-bi', {cache: 'no-store'})).json(); } catch (e) { return; }
    if (d.error) { $('tb-tong').textContent = '❌ ' + (d.error === 'forbidden_role' ? 'Chỉ Giám đốc / Phó GĐ' : d.error); return; }
    _d = d;
    const tb = d.thiet_bi || {};
    ['khay', 'cam_tay', 'c5'].forEach(k => {
      $('sw-' + k).checked = !!tb[k];
      document.querySelector('.tb-card[data-may="' + k + '"]').classList.toggle('tat', !tb[k]);
    });
    // Khay
    const k = d.khay || {}, r = k.reader || {};
    let ttK;
    if (!tb.khay) ttK = dot('#9ca3af') + 'Đang TẮT';
    else if (k.online && !r.loi) ttK = dot('#10b981') + 'Đang kết nối' + (r.agent_ver ? ' · phần mềm ' + _e(r.agent_ver) : '');
    else if (k.online) ttK = dot('#f59e0b') + 'Phần mềm chạy nhưng chưa thấy khay';
    else ttK = dot('#ef4444') + 'Chưa kết nối';
    $('tt-khay').innerHTML = ttK;
    $('ct-khay-tt').innerHTML = ttK + (r.serial_number ? ' · máy ' + _e(r.serial_number) : '')
      + (k.agent_ver_moi_nhat && r.agent_ver && k.agent_ver_moi_nhat !== r.agent_ver
          ? ' · <span class="text-amber-700">có bản mới ' + _e(k.agent_ver_moi_nhat) + ' (máy quầy tự cập nhật)</span>' : '');
    if (!_kDirty) {
      const c = k.cau_hinh || {};
      $('k-min-reads').value = c.min_reads ?? 2; $('k-rssi-min').value = c.rssi_min ?? -65;
      $('k-ttl').value = c.ttl_giay ?? 1.5; $('k-power').value = c.antenna_power ?? 12;
      $('k-dense').checked = !!(c.dense_profile ?? 1);
    }
    // NHR-10
    const ct = d.cam_tay || {};
    const NHAN = {da_ket_noi: 'Đang kết nối', dang_tim: 'Đang tìm máy...', mat_ket_noi: 'Mất kết nối'};
    let ttC;
    if (!tb.cam_tay) ttC = dot('#9ca3af') + 'Đang TẮT';
    else if (ct.online) ttC = dot('#10b981') + 'Đang kết nối';
    else if (!ct.agent_online) ttC = dot('#ef4444') + 'Phần mềm máy quầy chưa chạy';
    else if (ct.trang_thai) ttC = dot('#f59e0b') + _e(NHAN[ct.trang_thai] || String(ct.trang_thai).replace('chua_ket_noi:', 'Chưa kết nối:'));
    else ttC = dot('#9ca3af') + 'Chưa dùng';
    $('tt-cam_tay').innerHTML = ttC; $('ct-cam_tay-tt').innerHTML = ttC;
    // C5
    const c5 = d.c5 || {}, ds = c5.may || [];
    const on = ds.filter(m => m.online);
    let ttC5;
    if (!tb.c5) ttC5 = dot('#9ca3af') + 'Đang TẮT';
    else if (on.length) ttC5 = dot('#10b981') + on.length + ' máy đang kết nối';
    else if (ds.length) ttC5 = dot('#f59e0b') + 'Máy C5 ngừng gửi ' + ds[0].giay_truoc + ' giây trước';
    else ttC5 = dot('#ef4444') + 'Chưa có máy C5 nào kết nối';
    $('tt-c5').innerHTML = ttC5;
    $('c5-ds').innerHTML = ds.length ? ds.map(m => {
      const x = m.reader || {};
      const cu = c5.app_ver_moi_nhat && x.app_ver && c5.app_ver_moi_nhat !== x.app_ver;
      return '<div class="rounded-xl border p-3 text-sm ' + (m.online ? 'border-emerald-300 bg-emerald-50' : 'border-slate-200') + '">'
        + '<div class="font-bold">' + (m.online ? dot('#10b981') : dot('#9ca3af')) + _e(x.model || 'Chainway C5')
        + ' <span class="font-mono text-xs text-gray-500">#' + _e(String(x.may_id || '').slice(-6)) + '</span></div>'
        + '<div class="text-xs text-gray-600 mt-1">'
        + (m.online ? (x.dang_doc ? '● Đang đọc' : '○ Chờ bóp cò') + ' · ' + m.so_tem + ' tem' : 'Ngừng gửi ' + m.giay_truoc + ' giây trước')
        + ' · ' + _e(x.cong_suat) + ' dBm · pin ' + _e(x.pin) + '%'
        + ' · app ' + _e(x.app_ver) + (cu ? ' <span class="text-amber-700 font-bold">(có bản ' + _e(c5.app_ver_moi_nhat) + ' — bấm ⬆ Bản mới trên máy)</span>' : '')
        + (x.loi ? '<br><span class="text-red-600">⚠️ ' + _e(x.loi) + '</span>' : '')
        + (x.trang ? '<br>Đang mở: ' + _e(x.trang) : '') + '</div></div>';
    }).join('') : '<div class="text-sm text-gray-500">Chưa có máy C5 nào gửi tem lên. Làm theo các bước cài bên dưới.</div>';
    $('c5-tai-tt').textContent = c5.co_apk ? ('bản ' + (c5.app_ver_moi_nhat || '?')) : '⚠️ máy chủ chưa có tệp app';
    if (!_cDirty) {
      const c = Object.assign({}, C5MD, c5.cau_hinh || {});
      C5_O.concat(['che_do']).forEach(f => $('c-' + f).value = c[f]);
      $('c-beep').checked = !!c.beep;
      $('c-kk_nhieu_tem').checked = !!c.kk_nhieu_tem;
      tbVeSo();
    }
    const tong = [];
    if (tb.khay && k.online) tong.push('khay quầy');
    if (tb.cam_tay && ct.online) tong.push('máy cầm tay');
    if (tb.c5 && on.length) tong.push(on.length + ' máy C5');
    $('tb-tong').textContent = tong.length ? '🟢 Đang dùng: ' + tong.join(' + ') + ' · ' + (d.so_tem_gop || 0) + ' tem đang đọc được'
                                           : '⚪ Chưa có máy RFID nào đang kết nối';
  }

  window.tbVeSo = function() { C5_O.filter(f => f.startsWith('power')).forEach(f => $('v-' + f).textContent = $('c-' + f).value); };

  window.tbGat = function(may, el) {
    const muon = el.checked;
    askPin('Nhập PIN để ' + (muon ? 'BẬT ' : 'TẮT ') + TEN[may], async (pin) => {
      if (pin === null) { el.checked = !muon; return; }
      const tb = {}; tb[may] = muon ? 1 : 0;
      let d;
      try { d = await (await fetch('/api/rfid/thiet-bi', {method: 'POST', headers: {'Content-Type': 'application/json'},
                                   body: JSON.stringify({pin, thiet_bi: tb})})).json(); }
      catch (e) { el.checked = !muon; alert('Mất kết nối'); return; }
      if (!d.success) { el.checked = !muon; alert(d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : d.error); return; }
      nap();
    });
  };

  window.tbLuuKhay = function() {
    askPin('Nhập PIN để lưu cấu hình khay', async (pin) => {
      if (pin === null) return;
      const body = {pin, min_reads: +$('k-min-reads').value || 2, rssi_min: +$('k-rssi-min').value || -65,
                    ttl_giay: +$('k-ttl').value || 1.5, antenna_power: +$('k-power').value || 12,
                    dense_profile: $('k-dense').checked ? 1 : 0};
      const m = $('k-msg');
      let d;
      try { d = await (await fetch('/api/rfid/cau-hinh', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)})).json(); }
      catch (e) { m.textContent = '❌ Mất kết nối'; return; }
      m.textContent = d.success ? '✅ Đã lưu — khay tự áp sau vài giây' : '❌ Sai PIN hoặc không đủ quyền';
      m.className = 'text-sm font-semibold ' + (d.success ? 'text-green-600' : 'text-red-600');
      if (d.success) { _kDirty = false; nap(); }
    });
  };

  window.tbLuuC5 = function() {
    askPin('Nhập PIN để lưu cấu hình máy C5', async (pin) => {
      if (pin === null) return;
      const body = {pin, beep: $('c-beep').checked ? 1 : 0, kk_nhieu_tem: $('c-kk_nhieu_tem').checked ? 1 : 0, che_do: $('c-che_do').value};
      C5_O.forEach(f => body[f] = parseInt($('c-' + f).value));
      const m = $('c-msg');
      let d;
      try { d = await (await fetch('/api/rfid/cau-hinh-c5', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)})).json(); }
      catch (e) { m.textContent = '❌ Mất kết nối'; return; }
      m.textContent = d.success ? '✅ Đã lưu — máy C5 tự áp sau ~1 giây' : '❌ Sai PIN hoặc không đủ quyền';
      m.className = 'text-sm font-semibold ' + (d.success ? 'text-green-600' : 'text-red-600');
      if (d.success) { _cDirty = false; nap(); }
    });
  };

  window.tbMacDinhC5 = function() {
    C5_O.concat(['che_do']).forEach(f => $('c-' + f).value = C5MD[f]);
    $('c-beep').checked = true; $('c-kk_nhieu_tem').checked = true; _cDirty = true; tbVeSo();
    $('c-msg').textContent = 'Đã đưa về mặc định — bấm "Lưu cấu hình C5" để áp.'; $('c-msg').className = 'text-sm text-amber-600';
  };

  window.tbXemMa = function() {
    if (!_d || !_d.token) return;
    $('tb-ma').classList.remove('hidden');
    $('tb-ma').textContent = 'Địa chỉ máy chủ: ' + (_dcMayKhac || location.origin) + '\nMã kết nối:    ' + _d.token;
  };

  window.tbKetNoiC5 = function() {
    const m = $('c5-kn-msg');
    if (!_d || !_d.token) { m.textContent = '❌ Chưa tải được mã kết nối'; return; }
    let ok = false;
    try { ok = window.VangPOSC5.ketNoi(_d.token); } catch (e) {}
    m.textContent = ok ? '✅ Đã kết nối! Vài giây nữa thẻ "Máy Chainway C5" sẽ chuyển 🟢.' : '❌ App không nhận — mở VangPOS bằng đúng địa chỉ đã nhập trong app.';
    m.className = 'text-sm mt-1 font-semibold ' + (ok ? 'text-emerald-700' : 'text-red-600');
    setTimeout(nap, 2500);
  };

  // Mã QR cài máy C5 = đường dẫn gắn cửa hàng (giống "Kết nối điện thoại") + mã kết nối máy đọc (?c5t=).
  // App C5 tách c5t ra lưu riêng, KHÔNG gửi lên máy chủ qua đường dẫn.
  let _dtC5 = null;
  window.tbVeQrC5 = function() {
    const box = $('c5-qr'), msg = $('c5-qr-msg');
    box.innerHTML = '';
    const dc = ($('c5-qr-dc').value || '').trim().replace(/\/+$/, '');
    if (!_dtC5 || !_d || !_d.token) { msg.textContent = 'Đang tải…'; return; }
    if (!/^https?:\/\/[^\s/]+$/.test(dc)) { msg.textContent = 'Nhập địa chỉ dạng http://192.168.1.x:5001 hoặc https://….ts.net'; return; }
    const url = dc + '/gan-cua-hang?c5t=' + encodeURIComponent(_d.token) + '#d='
      + VPGhim.maHoaThamSo(Object.assign({}, _dtC5, { dia_chi: dc }));
    new QRCode(box, { text: url, width: 240, height: 240, correctLevel: QRCode.CorrectLevel.M });
    msg.textContent = 'Cửa hàng ' + (_dtC5.ten || '') + ' · mã ' + _dtC5.ma_tiem;
  };
  async function napQrC5() {
    try { _dtC5 = await VPGhim.danhTinh(); } catch (e) { $('c5-qr-msg').textContent = '⚠️ Không đọc được danh tính cửa hàng'; return; }
    if (_dtC5.dia_chi) { _dcMayKhac = String(_dtC5.dia_chi).replace(/\/+$/, ''); _veDcMayKhac(); }
    const o = $('c5-qr-dc');
    if (!o.value) {
      const laNoiBo = /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(:|$)/.test(location.origin);
      o.value = _dtC5.dia_chi || (laNoiBo ? '' : location.origin);
    }
    tbVeQrC5();
  }

  tbChon(_chon);
  nap();
  (function choToken() { if (_d && _d.token) napQrC5(); else setTimeout(choToken, 400); })();
  setInterval(nap, 3000);
})();
</script>
{% endblock %}