{% extends "base.html" %}
{% block title %}Bán hàng — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Bán hàng{% endblock %}

{% block extra_style %}
<style>
  .section-card { border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; }
  .section-head {
    padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .02em;
  }
  .ios-group {
    background: #fff;
    border-radius: 12px;
    overflow: visible;
  }
  .ios-field-row {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 10px 16px;
    border-bottom: 1px solid #f2f2f7;
    position: relative;
    overflow: visible;
    gap: 10px;
  }
  .ios-field-row:last-child { border-bottom: none; }
  .ios-field-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1c1c1e;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 130px;
  }
  .ios-field-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;   /* ≥16px — dưới 16px iOS tự zoom khi chạm ô nhập */
    color: #3a3a3c;
    text-align: right;
    min-width: 0;
    padding: 0;
    font-family: inherit;
  }
  .ios-field-input::placeholder { color: #c7c7cc; }
  .ios-field-input:focus { color: #1c1c1e; }
  /* Thẻ hàng bán — mỗi món 1 thẻ: dải tiêu đề (STT + tên) / thân gom nhóm / chân hiện Thành tiền */
  .item-row {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .item-head {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: linear-gradient(90deg, #f0fdf4, #ecfdf5);
    border-bottom: 1px solid #d1fae5;
  }
  .item-body { padding: 6px 10px; }
  .item-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 14px;
    background: #fffbeb;
    border-top: 1px dashed #fde68a;
  }
  .item-group { border-radius: 10px; padding: 5px 8px; }
  .item-group-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 3px; }
  .item-row input.input-ios-sm,
  .item-row select.input-ios-sm {
    border-color: #d1d5db;
    background: #fff;
  }
  .item-row input.input-ios-sm:focus,
  .item-row select.input-ios-sm:focus {
    border-color: #8b0000;
    background: #fff;
  }
  .item-mini-label { font-size: 11px; color: #8a8a8e; text-transform: uppercase; letter-spacing: .02em; display: block; margin-bottom: 1px; }
  /* Nhãn nằm ngang cùng dòng với ô nhập — gọn hơn nhãn nằm phía trên */
  .mini-field { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .mini-field .item-mini-label { margin-bottom: 0; flex-shrink: 0; white-space: nowrap; }
  /* MOBILE: nhãn nằm TRÊN ô nhập để ô nhập tiền rộng bằng cả hàng, gõ/đọc số
     tiền lớn dễ (trước đây nhãn inline bóp ô nhập chỉ còn ~30px). */
  @media (max-width: 640px) {
    .mini-field { flex-direction: column; align-items: stretch; gap: 1px; }
    .mini-field .item-mini-label { white-space: normal; margin-bottom: 1px; }
    .item-mini-label { font-size: 11px; }
  }
  /* Gợi ý đối chiếu giá (dg-hint): cho chiếm cả chiều rộng, không bị cắt */
  .dg-hint { display: block; width: 100%; white-space: normal; }
  /* ── Hóa đơn gần đây (23/10/2026): ô tìm to rõ + chọn 100/Tất cả + gom theo NGÀY ── */
  .hd-tim-hang { display: flex; gap: 8px; align-items: center; padding: 12px 16px 4px; }
  .hd-tim-o { position: relative; flex: 1 1 auto; min-width: 0; }
  .hd-tim-o input { width: 100%; height: 50px; font-size: 17px; font-weight: 600; color: #1f2937;
    padding: 0 44px 0 46px; border: 2px solid #f59e0b; border-radius: 16px; background: #fff; outline: none; }
  .hd-tim-o input:focus { border-color: #b45309; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
  .hd-tim-o input::placeholder { color: #9ca3af; font-weight: 500; }
  .hd-tim-o .hd-tim-kinh { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; pointer-events: none; }
  .hd-tim-o .hd-tim-xoa { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
    border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 20px; line-height: 1; }
  .hd-tim-quet { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 16px; font-size: 22px;
    background: linear-gradient(135deg,#fef3c7,#fde68a); border: 2px solid #f59e0b; }
  .hd-seg { display: inline-flex; background: #fff; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 3px; gap: 2px; }
  .hd-seg button { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 800; color: #92400e; white-space: nowrap; }
  .hd-seg button.on { background: linear-gradient(135deg,#4a0000,#8b0000); color: #fff; }
  .hd-pham-vi { padding: 2px 18px 0; font-size: 13px; color: #6b7280; }
  .hd-pham-vi b { color: #92400e; }
  .hd-pham-vi .hd-lk { color: #b45309; font-weight: 800; text-decoration: underline; }
  .hd-ngay { border: 1px solid #fde68a; border-radius: 18px; overflow: hidden; background: #fff; }
  .hd-ngay-dau { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: linear-gradient(135deg,#fff7ed,#fffbeb); flex-wrap: wrap; }
  .hd-ngay-so { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; color: #fff; text-align: center;
    background: linear-gradient(135deg,#4a0000,#8b0000); display: flex; flex-direction: column; justify-content: center; line-height: 1; }
  .hd-ngay-so b { font-size: 18px; font-weight: 900; }
  .hd-ngay-so span { font-size: 10px; opacity: .85; margin-top: 2px; }
  .hd-ngay-ten { flex: 1 1 140px; min-width: 0; }
  .hd-ngay-ten .t1 { font-weight: 800; color: #1f2937; font-size: 15px; }
  .hd-ngay-ten .t2 { font-size: 12.5px; color: #6b7280; margin-top: 2px; }
  .hd-ngay-ten .t2 b { color: #374151; }
  .hd-ngay-tien { margin-left: auto; text-align: right; flex: 0 0 auto; }
  .hd-ngay-tien .v { font-weight: 900; color: #15803d; font-size: 16px; font-variant-numeric: tabular-nums; }
  .hd-ngay-tien .l { font-size: 11px; color: #9ca3af; font-weight: 700; }
  .hd-ngay-chev { color: #9ca3af; flex: 0 0 auto; }
  .hd-ngay-than { padding: 12px; display: flex; flex-direction: column; gap: 14px; background: #faf7f2; border-top: 1px solid #fde68a; }
  /* Mỗi giao dịch = 1 thẻ riêng: viền rõ + dải màu trái + đầu thẻ tô màu theo KHÁCH (khách khác → màu khác) */
  .hd-gd { background: #fff; border: 1.5px solid var(--hd-v); border-left: 6px solid var(--hd-c); border-radius: 16px;
           box-shadow: 0 2px 6px rgba(0,0,0,.06); overflow: hidden; }
  .hd-gd-dau { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--hd-t);
               border-bottom: 1.5px solid var(--hd-v); }
  .hd-gd-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; background: var(--hd-c); color: #fff;
              display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; }
  .hd-gd-ten { flex: 1 1 140px; min-width: 0; }
  .hd-gd-ten .k { font-weight: 900; font-size: 15.5px; color: #111827; word-break: break-word; }
  .hd-gd-ten .p { font-size: 12.5px; color: #4b5563; margin-top: 1px; }
  .hd-gd-tien { margin-left: auto; text-align: right; flex: 0 0 auto; }
  .hd-gd-tien .v { font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
  .hd-gd-tien .g { font-size: 12.5px; font-weight: 800; color: #374151; font-variant-numeric: tabular-nums; }
  .hd-gd-than { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
  .hd-gd-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: #374151; }
  .hd-gd-nhan .c { padding: 2px 9px; border-radius: 999px; background: #f3f4f6; border: 1px solid #e5e7eb; font-weight: 700; white-space: nowrap; }
  .hd-gd-mon { border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
  .hd-gd-mon > div + div { border-top: 1px solid #eef0f3; }
  @media (max-width: 640px) {
    .hd-tim-hang { padding: 10px 12px 2px; }
    .hd-pham-vi { padding: 2px 14px 0; }
    .hd-ngay-dau { gap: 10px; padding: 11px 12px; }
  }
</style>
{% endblock %}

{% block content %}

  <div id="pin-card" class="ios-card p-4" style="border:1.5px solid #fde68a">
    <div class="flex items-center gap-3 flex-wrap">
      <span class="text-sm text-gray-500">🔑 Nhập mã PIN để tạo hóa đơn:</span>
      <input id="pin-input" type="password" inputmode="numeric" maxlength="10" placeholder="PIN..."
        class="input-ios text-lg font-bold text-center tracking-widest w-32">
      <span id="pin-status" class="text-sm font-semibold"></span>
    </div>
  </div>

  <div class="ios-card p-5 space-y-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <!-- ① Thông tin khách hàng -->
      <div class="section-card">
        <div class="section-head text-purple-900" style="background:linear-gradient(90deg,#f9f5ff,#fdf4ff)">
          <span>👤 Thông tin khách hàng</span>
          <button type="button" class="scan-btn !normal-case !text-[11px] !font-semibold"
            onclick="openScanner('cccd', {ten:'inp-khach', cccd:'inp-khach-cccd', diachi:'inp-khach-diachi'})">📷 Quét QR CCCD</button>
        </div>
        <div class="ios-group" style="border-radius:0">
          <div class="ios-field-row relative">
            <span class="ios-field-label">Họ tên</span>
            <input id="inp-khach" type="text" placeholder="Tên khách (tùy chọn)" data-huong-dan="ban-khach"
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'ho_ten')" onblur="_crmBlur()">
          </div>
          <div class="ios-field-row relative">
            <span class="ios-field-label">Số CCCD</span>
            <input id="inp-khach-cccd" type="text" placeholder="Gõ hoặc quét QR (tùy chọn)"
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'cccd')" onblur="_crmBlur()">
          </div>
          <div class="ios-field-row">
            <span class="ios-field-label">Địa chỉ</span>
            <input id="inp-khach-diachi" type="text" placeholder="Địa chỉ (tùy chọn)"
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'dia_chi')" onblur="_crmBlur()">
          </div>
          <div class="ios-field-row relative">
            <span class="ios-field-label">Điện thoại</span>
            <input id="inp-khach-dt" type="text" placeholder="Số ĐT (tùy chọn)"
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'dien_thoai')" onblur="_crmBlur()">
          </div>
        </div>
        <p class="text-[11px] text-gray-400 px-4 pb-3">💡 Có máy quét mã vạch/QR rời (USB/Bluetooth)? Bấm vào ô <strong>"Số CCCD"</strong> rồi quét mặt sau CCCD — hệ thống tự điền tên, số CCCD, địa chỉ khách.</p>
      </div>

      <!-- ② Hình thức thanh toán -->
      <div class="section-card">
        <div class="section-head text-amber-900" style="background:linear-gradient(90deg,#fffbeb,#fef3c7)">
          <span>💳 Hình thức thanh toán</span>
        </div>
        <div class="p-4 space-y-3">
          <select id="sel-hinhthuc" class="input-ios w-full cursor-pointer" onchange="onHtChange()" data-huong-dan="ban-thanh-toan">
            <option value="tien_mat">💵 Tiền mặt</option>
            <option value="chuyen_khoan">🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 TM/CK</option>
          </select>
          <div class="grid grid-cols-2 gap-2">
            <input id="qr-noi-dung" class="input-ios text-sm" value="Thanh toán tiền hàng" maxlength="25" aria-label="Nội dung chuyển khoản trên QR" title="Tối đa 25 ký tự theo giới hạn nội dung VietQR">
            <label class="flex items-center gap-2 text-xs text-gray-600"><input id="qr-hien-ma" type="checkbox" checked> Hiện mã hóa đơn</label>
          </div>
          <div id="split-ht-row" class="flex gap-2" style="display:none">
            <div class="flex-1">
              <label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label>
              <input id="split-tm" type="text" inputmode="numeric" placeholder="0"
                class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
            </div>
            <div class="flex-1">
              <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
              <input id="split-ck" type="text" inputmode="numeric" placeholder="0"
                class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
            </div>
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Nhân viên bán hàng</label>
            <select id="sel-nhanvien" class="input-ios w-full cursor-pointer">
              <option value="">— Chưa chọn —</option>
            </select>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1 mt-3">Khách đến từ đâu</label>
            <select id="sel-nguonkhach" class="input-ios w-full cursor-pointer">
              <option value="tu_den">🚶 Khách tự đến</option>
              <option value="minh_moi">📞 Mình gọi/nhắn mời</option>
              <option value="gioi_thieu">🤝 Khách cũ giới thiệu</option>
              <option value="quay_lai_tim">💚 Quay lại tìm đúng mình</option>
              <option value="quang_cao">📣 Thấy quảng cáo / Zalo</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Hàng bán — dạng thẻ, không cần kéo ngang -->
    <div class="section-card">
      <div class="section-head text-green-900" style="background:linear-gradient(90deg,#f0fdf4,#dcfce7)">
        <span>💎 Hàng bán (<span id="lbl-so-mon">0</span> món)</span>
        <button type="button" onclick="addRow()"
          class="flex items-center gap-1 text-xs font-bold text-white px-3 py-1 rounded-lg transition"
          style="background:#16a34a">＋ Thêm hàng</button>
      </div>
      <!-- Ô quét DUY NHẤT, nằm trên cùng, con trỏ luôn chờ sẵn: quét → món tự thêm
           vào dưới → ô tự xóa → quét tiếp (chuẩn phần mềm bán hàng dùng máy quét) -->
      <div class="px-3 pt-3">
        <div class="flex items-center gap-2">
          <input id="inp-scan-barcode" type="text" autocomplete="off"
            placeholder="🔫 Quét hoặc gõ mã hàng rồi Enter — mỗi lần 1 món, ô tự xóa để quét tiếp..."
            class="input-ios flex-1 text-base font-semibold"
            style="border:2px solid #16a34a;background:#f0fdf4">
          <button type="button" class="scan-btn flex-shrink-0" onclick="openScanner('product', scanProductIntoRow)">📷 Camera</button>
        </div>
        <div id="scan-feedback" class="text-xs font-bold mt-1 h-4"></div>
        <!-- RFID:KHAY-CHU — ai đang dùng khay (mặc định máy quầy giữ) -->
        <div id="rf-chu-khay" class="text-xs mt-1.5 flex items-center gap-2 flex-wrap"></div>
        <!-- RFID:C5-GHEP (1.9.2) — dùng máy C5 làm đầu đọc bán hàng cho máy này -->
        <div id="rf-c5-ghep" class="text-xs mt-1.5 flex items-center gap-2 flex-wrap"></div>
        <!-- RFID:KHAY-BAN — viên trạng thái khay, mặc định THU GỌN (spec 2026-07-28-rfid) -->
        <div id="rf-khay-row" class="hidden mt-1.5 flex items-center gap-1.5">
          <div id="rf-khay-pill" class="flex-1 min-w-0 text-xs rounded-xl border cursor-pointer select-none px-2.5 py-1.5"
               onclick="rfKhayToggle()" style="background:#faf5ff;border-color:#ddd6fe"></div>
          <!-- Bật/tắt tiếng bíp khi khay nhận món — MẶC ĐỊNH TẮT, nhớ theo máy -->
          <button type="button" id="rf-bip-btn"
                  title="Chọn tiếng kêu khi khay nhận được món (hoặc tắt)"
                  class="text-xs font-bold rounded-xl border px-2.5 py-1.5 whitespace-nowrap flex-shrink-0"
                  style="background:#f1f5f9;color:#64748b;border-color:#cbd5e1">🔕 Tiếng: tắt</button>
        </div>
        <div id="rf-khay-body" class="hidden mt-1 text-xs rounded-xl border border-violet-200 bg-violet-50 px-2.5 py-1.5"></div>
      </div>
      <div id="item-list" class="p-3 space-y-2.5" data-huong-dan="ban-hang"></div>
      <datalist id="dl-products"></datalist>
    </div>

    <div id="edit-banner" class="hidden ios-card p-3 text-sm flex items-center justify-between gap-2 flex-wrap" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
      <div class="font-semibold text-blue-700">
        <span id="edit-banner-text"></span>
      </div>
      <button type="button" onclick="cancelEdit()" class="btn-ios btn-ios-secondary text-gray-600 text-xs px-3 py-1.5">✖ Hủy sửa</button>
    </div>

    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Ghi chú</label>
      <input id="inp-ghichu" type="text" placeholder="Ghi chú thêm cho hóa đơn (tùy chọn)" class="input-ios w-full">
    </div>

    <div class="flex flex-wrap justify-between items-end gap-3 pt-3 border-t border-gray-100">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Giảm giá (đ)</label>
        <input id="inp-giamgia" type="number" min="0" placeholder="0" oninput="recalcTotal()"
          class="input-ios w-32 text-right">
      </div>
      <div class="text-lg font-bold text-gray-700 ml-auto bg-amber-50 rounded-2xl px-4 py-2">
        Tổng cộng: <span id="lbl-tong" class="text-amber-700">0</span> đ
      </div>
      <button onclick="submitSale(true)" id="btn-draft"
        class="btn-ios btn-ios-secondary text-amber-700 font-semibold px-5 py-2.5">
        💾 Lưu nháp
      </button>
      <button onclick="submitSale(false)" id="btn-submit" data-huong-dan="ban-tao-hoa-don"
        class="btn-ios btn-ios-gold px-6 py-2.5">
        ✅ Tạo hóa đơn
      </button>
    </div>
    <p id="sale-msg" class="text-sm"></p>
    <div id="print-link" class="hidden"></div>
  </div>

  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-bold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">📝 Hóa đơn nháp</div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm data-card-table">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-4 py-2">Thời gian lưu</th>
            <th class="text-left px-4 py-2">Loại</th>
            <th class="text-left px-4 py-2">Khách hàng</th>
            <th class="text-right px-4 py-2">Tổng tiền tạm tính (đ)</th>
            <th class="px-4 py-2 text-center">Thao tác</th>
          </tr>
        </thead>
        <tbody id="drafts-tbody"></tbody>
      </table>
    </div>
  </div>

  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-bold text-gray-800 flex items-center justify-between flex-wrap gap-2" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span data-huong-dan="pos-hoa-don-gan-day">🧾 Hóa đơn bán gần đây</span>
      <div class="hd-seg" role="group" aria-label="Số hóa đơn hiện">
        <button type="button" id="hd-gh-100" class="on" onclick="hdChonGioiHan('100')">100 gần nhất</button>
        <button type="button" id="hd-gh-tat_ca" onclick="hdChonGioiHan('tat_ca')">Tất cả</button>
      </div>
    </div>
    <div class="hd-tim-hang">
      <div class="hd-tim-o">
        <span class="hd-tim-kinh">🔍</span>
        <input id="inp-search-sales" type="text" inputmode="search" enterkeyhint="search" placeholder="Tìm mã HĐ, tên khách, SĐT, mã hàng..." autocomplete="off"
          readonly onfocus="this.removeAttribute('readonly')"
          oninput="_debounceSales()"
          onkeydown="if(event.key==='Enter'){event.preventDefault();clearTimeout(_salesSearchTimer);hdVeDanhSach();}">
        <button type="button" class="hd-tim-xoa" onclick="document.getElementById('inp-search-sales').value='';hdVeDanhSach();" title="Xóa tìm kiếm">×</button>
      </div>
      <button type="button" class="hd-tim-quet" onclick="openScanner('product', function(code){document.getElementById('inp-search-sales').value=code;hdVeDanhSach();})"
        title="Quét mã vạch hóa đơn / sản phẩm">📷</button>
    </div>
    <div id="sales-pham-vi" class="hd-pham-vi"></div>
    <div id="sales-summary" class="so-tong px-4 pt-3 grid grid-cols-2 sm:grid-cols-3 gap-2.5"></div>
    <div id="sales-grid" class="p-3 sm:p-4 space-y-3"></div>
  </div>

  <div id="reverted-section" class="ios-card overflow-hidden hidden">
    <div class="px-5 py-3.5 font-bold text-gray-800 flex items-center justify-between flex-wrap gap-2" style="background:linear-gradient(135deg,#fef2f2,#fff7ed)">
      <span>↩️ Hóa đơn đã hoàn lại</span>
      <div class="flex items-center gap-1.5">
        <input id="inp-search-reverted" type="text" placeholder="Tìm mã HĐ, khách, SĐT..." autocomplete="off"
          readonly onfocus="this.removeAttribute('readonly')"
          class="input-ios-sm w-52 font-normal"
          oninput="_debounceReverted()"
          onkeydown="if(event.key==='Enter'){event.preventDefault();clearTimeout(_revertedSearchTimer);loadReverted();}">
        <button onclick="openScanner('product', function(code){document.getElementById('inp-search-reverted').value=code;loadReverted();})"
          class="scan-btn !px-2 !py-1.5 !text-xs" title="Quét mã vạch hóa đơn">📷</button>
        <button onclick="document.getElementById('inp-search-reverted').value='';loadReverted();"
          class="text-gray-400 hover:text-gray-600 text-xl leading-none font-normal" title="Xóa tìm kiếm">×</button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm data-card-table">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-4 py-2">Mã HĐ</th>
            <th class="text-left px-4 py-2">Ngày tạo</th>
            <th class="text-left px-4 py-2">Loại</th>
            <th class="text-left px-4 py-2">Khách hàng</th>
            <th class="text-right px-4 py-2">Tổng tiền (đ)</th>
            <th class="text-left px-4 py-2">Hoàn lại lúc</th>
            <th class="text-left px-4 py-2">Người hoàn lại</th>
            <th class="px-4 py-2 text-center">Thao tác</th>
          </tr>
        </thead>
        <tbody id="reverted-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- Modal kiểm tra / xem lại hóa đơn -->
  <div id="view-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-2xl max-w-3xl w-full max-h-[88vh] overflow-y-auto p-5">
      <div class="flex justify-between items-center mb-3 pb-2 border-b">
        <div class="font-bold text-gray-700 text-lg">📄 Chi tiết hóa đơn <span id="vm-mahd" class="text-amber-700"></span></div>
        <button onclick="closeViewModal()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">✕</button>
      </div>
      <div id="vm-body" class="space-y-3 text-sm"></div>
      <div class="flex justify-end gap-2 mt-4 pt-3 border-t flex-wrap">
        <button id="vm-exchange-btn" onclick=""
          class="hidden btn-ios btn-ios-secondary text-indigo-700 px-4 py-2 text-sm">
          🔄 Đổi hàng
        </button>
        <button id="vm-revert-btn" onclick="" data-huong-dan="pos-hoan-lai"
          class="hidden btn-ios btn-ios-secondary text-red-600 px-4 py-2 text-sm">
          ↩️ Hoàn lại hóa đơn
        </button>
        <button id="vm-delete-btn" onclick=""
          class="hidden btn-ios btn-ios-secondary text-red-700 px-4 py-2 text-sm">
          🗑️ Xóa hóa đơn
        </button>
        <a id="vm-export-excel-link" href="#"
          class="hidden btn-ios btn-ios-secondary text-green-700 inline-block px-4 py-2 text-sm">
          📥 Xuất Excel nhập kho
        </a>
        <button onclick="closeViewModal()" class="btn-ios btn-ios-secondary text-gray-600 px-4 py-2 text-sm">Đóng</button>
        <a id="vm-print-link" href="#" target="_blank"
          class="btn-ios btn-ios-gold inline-block px-4 py-2 text-sm">
          🖨️ Mở giấy đảm bảo vàng
        </a>
        <button id="vm-print-remote-btn"
          class="hidden btn-ios btn-ios-secondary text-amber-700 px-4 py-2 text-sm"
          title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">
          📠 In tại quầy
        </button>
        <a id="vm-receipt-link" href="#" target="_blank"
          class="hidden btn-ios btn-ios-secondary text-emerald-700 inline-block px-4 py-2 text-sm">
          🖨️ In phiếu thu
        </a>
        <button id="vm-receipt-remote-btn"
          class="hidden btn-ios btn-ios-secondary text-emerald-700 px-4 py-2 text-sm"
          title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">
          📠 In PT tại quầy
        </button>
        <a id="vm-invoice-link" href="#" target="_blank"
          class="hidden btn-ios btn-ios-secondary text-red-800 inline-block px-4 py-2 text-sm"
          title="In ra máy in của CHÍNH máy này (hộp thoại in của trình duyệt)">
          🧾 In hóa đơn
        </a>
        <button id="vm-invoice-remote-btn"
          class="hidden btn-ios btn-ios-secondary text-red-800 px-4 py-2 text-sm"
          title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">
          📠 In HĐ tại quầy
        </button>
      </div>
    </div>
  </div>

  <!-- Modal Đổi hàng -->
  <div id="exchange-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-[70] flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-2xl max-w-lg w-full max-h-[88vh] overflow-y-auto p-5">
      <div class="flex justify-between items-center mb-3 pb-2 border-b">
        <div class="font-bold text-gray-700 text-lg">🔄 Đổi hàng <span id="ex-mahd" class="text-amber-700"></span></div>
        <button onclick="closeExchangeModal()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">✕</button>
      </div>
      <div class="space-y-3 text-sm">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Món hàng cần đổi</label>
          <select id="ex-old-item" class="input-ios w-full" onchange="onExOldItemChange()"></select>
        </div>
        <div class="ios-card p-3 text-sm" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fde68a">
          <div class="flex justify-between"><span>Giá món cũ:</span><strong id="ex-old-gia">0 đ</strong></div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Sản phẩm mới (chọn từ tồn kho hoặc nhập tay)</label>
          <div id="ex-item-container"></div>
        </div>
        <div class="ios-card p-3 text-sm space-y-1" style="background:#eef2ff;border:1.5px solid #c7d2fe">
          <div class="flex justify-between"><span>Chênh lệch:</span><strong id="ex-chenh-lech">0 đ</strong></div>
          <div class="text-xs text-gray-500" id="ex-chenh-lech-label"></div>
        </div>
        <div id="ex-httt-wrap">
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Thanh toán chênh lệch bằng</label>
          <select id="ex-hinhthuc" class="input-ios cursor-pointer" onchange="onExHtttChange()">
            <option value="tien_mat" selected>💵 Tiền mặt</option>
            <option value="chuyen_khoan">🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 TM/CK</option>
          </select>
          <div id="ex-split-row" class="flex gap-2 mt-2" style="display:none">
            <div class="flex-1"><label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label><input id="ex-split-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
            <div class="flex-1"><label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label><input id="ex-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
          </div>
        </div>
        <input id="ex-ghichu" type="text" placeholder="Ghi chú thêm (tùy chọn)" class="w-full input-ios text-sm">
        <p id="exchange-msg" class="text-sm"></p>
      </div>
      <div class="flex gap-3 mt-4 pt-3 border-t">
        <button onclick="closeExchangeModal()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button onclick="confirmExchange()" class="btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#4338ca,#6366f1);border-radius:14px">Xác nhận đổi hàng</button>
      </div>
    </div>
  </div>

  <!-- Modal PIN dùng CHUNG toàn app (base.html → _pin_modal.html).
       Trước đây trang này có modal RIÊNG trùng id "pin-confirm-modal" với base
       → askPin() mở nhầm modal, ô nhập không nối được với hàm gọi. -->

  <!-- Modal xuất hóa đơn điện tử -->
  <div id="einvoice-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-5">
      <div class="flex justify-between items-center mb-3 pb-2 border-b">
        <div class="font-bold text-gray-700 text-lg">🧾 Xuất hóa đơn điện tử <span id="ei-modal-mahd" class="text-amber-700"></span></div>
        <button onclick="closeEinvoiceModal()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">✕</button>
      </div>
      <div id="ei-modal-body" class="space-y-3 text-sm"></div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt = n => Number(n||0).toLocaleString('vi-VN');
let products = [];

function onHtChange() {
  const v = document.getElementById('sel-hinhthuc').value;
  document.getElementById('split-ht-row').style.display = v === 'ca_hai' ? 'flex' : 'none';
}
let editingSaleId = null;
let editingTrangThai = null;
let _posApprovalMode = false;
let _posApprovalOriginal = null;
let _viewedSale = null;

// ── Đối chiếu đơn giá bán theo bảng giá mới nhất (theo loại vàng) ───────
let _priceMap = {}; // { "9999": gia_ban (nghìn đồng/chỉ), ... }

async function fetchPrices() {
  try {
    const r = await fetch('/api/prices');
    const d = await r.json();
    _priceMap = {};
    (d.prices || []).forEach(p => { _priceMap[p.loai] = p.ban; });
    document.querySelectorAll('#item-list .item-row').forEach(updateDgHint);
  } catch (e) {}
}

// Tìm giá bán mới nhất (nghìn đồng/chỉ) ứng với loại vàng của sản phẩm,
// VD: loai_vang="Vàng 9999" → khớp với mục "9999" trong bảng giá.
function findGiaVang(loaiVang) {
  if (!loaiVang) return 0;
  const lo = loaiVang.replace(/^Vàng\s+/i, '').trim();
  if (_priceMap[lo] !== undefined) return _priceMap[lo];
  for (const [k, v] of Object.entries(_priceMap)) {
    if (lo === k || lo.includes(k) || k.includes(lo)) return v;
  }
  return 0;
}

// Hiển thị đối chiếu đơn giá đang nhập với giá bán mới nhất trong bảng giá
// (theo đúng loại vàng của sản phẩm). Bấm vào gợi ý để áp giá mới nhất.
function updateDgHint(tr) {
  const hint = tr.querySelector('.dg-hint');
  if (!hint) return;
  // Hàng GIÁ CỐ ĐỊNH: không so với bảng giá vàng (bấm áp giá mới sẽ phá giá cố định)
  if (tr.dataset.giaCoDinh) {
    hint.innerHTML = `<span class="text-sky-700">🔒 Giá cố định: ${fmt(Number(tr.dataset.giaCoDinh))} đ</span>`;
    return;
  }
  const loaiVang = tr.dataset.loaiVang || '';
  const gv = findGiaVang(loaiVang);
  // ⚠️ CHỐT CHẶN: có KL vàng nhưng KHÔNG có đơn giá (tra không ra giá vàng + giá bán = 0)
  // → nếu để lọt, hóa đơn chỉ tính công + đá = bán hụt gần trọn giá vàng.
  const _klv = parseFloat(tr.querySelector('.inp-klvang').value) || 0;
  const _dg  = parseFloat(tr.querySelector('.inp-dg').value) || 0;
  const _dgEl = tr.querySelector('.inp-dg');
  if (_klv > 0 && _dg <= 0) {
    hint.innerHTML = `<span class="text-red-600 font-bold">⚠️ Chưa có giá — kiểm tra loại vàng`
                   + `${loaiVang ? ' "' + loaiVang + '"' : ''}</span>`;
    if (_dgEl) _dgEl.style.cssText = 'border:2px solid #dc2626;background:#fef2f2';
    return;
  }
  if (_dgEl) _dgEl.style.cssText = '';
  if (!loaiVang || !gv) { hint.innerHTML = ''; return; }
  const latest = gv * 1000;
  const current = parseFloat(tr.querySelector('.inp-dg').value) || 0;
  if (Math.abs(current - latest) < 1) {
    hint.innerHTML = `<span class="text-emerald-600">✓ Khớp giá ${loaiVang}</span>`;
  } else {
    hint.innerHTML = `<span class="text-amber-600 cursor-pointer hover:underline" ` +
      `onclick="applyLatestPrice(this)" title="Bấm để áp giá bán mới nhất">` +
      `⚠️ Giá BG ${loaiVang}: ${fmt(latest)}</span>`;
  }
}

function applyLatestPrice(el) {
  const tr = el.closest('.item-row');
  const gv = findGiaVang(tr.dataset.loaiVang || '');
  if (!gv) return;
  const inp = tr.querySelector('.inp-dg');
  inp.value = gv * 1000;
  recalcRow(inp);
}

function getPin() { return document.getElementById('pin-input').value.trim() || localStorage.getItem(PIN_KEY) || ''; }

document.getElementById('pin-input').value = localStorage.getItem(PIN_KEY) || '';
document.getElementById('pin-input').addEventListener('input', e => {
  localStorage.setItem(PIN_KEY, e.target.value.trim());
});

// Nhãn hiển thị/tìm kiếm cho 1 sản phẩm tồn kho (dùng cho ô gõ-để-tìm + datalist)
function productLabel(p) {
  return `${p.ma_hang || ''} ${p.ten || ''} (${p.trong_luong} chỉ)`.trim().replace(/\s+/g, ' ');
}

// Cập nhật danh sách gợi ý (datalist) dùng chung cho tất cả các dòng hàng
function refreshProductDatalist() {
  const dl = document.getElementById('dl-products');
  if (!dl) return;
  dl.innerHTML = products.map(p => `<option value="${productLabel(p).replace(/"/g, '&quot;')}">`).join('');
}

function rowTemplate() {
  return `<div class="item-row">
    <div class="item-head">
      <span class="stt-cell w-6 h-6 rounded-full text-white text-xs font-bold flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#16a34a,#15803d)"></span>
      <input class="sel-product input-ios-sm flex-1 font-semibold" list="dl-products"
             placeholder="🔍 Tìm sản phẩm tồn kho... (để trống = nhập tay)" autocomplete="off"
             oninput="onProductInput(this)" onkeydown="onProductKeydown(event, this)">
      <button onclick="this.closest('.item-row').remove();renumberRows();recalcTotal()" title="Xóa dòng" class="w-7 h-7 rounded-full bg-red-50 hover:bg-red-100 text-red-500 flex items-center justify-center flex-shrink-0 transition active:scale-90">✕</button>
    </div>
    <div class="item-body space-y-1.5">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
        <div>
          <span class="item-mini-label">Mã SP</span>
          <input class="inp-mahang input-ios-sm w-full font-mono text-xs" placeholder="Mã SP">
        </div>
        <div class="sm:col-span-2">
          <span class="item-mini-label">Tên SP / Mô tả</span>
          <input class="inp-mota input-ios-sm w-full" placeholder="Tên sản phẩm">
        </div>
        <div>
          <span class="item-mini-label">HLV</span>
          <input class="inp-tuoi input-ios-sm w-full text-center" placeholder="VD: 9999 / Bạc">
        </div>
      </div>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-1.5">
        <div class="item-group" style="background:#f8fafc;border:1px solid #e2e8f0">
          <span class="item-group-label">⚖️ Trọng lượng (chỉ)</span>
          <div class="grid grid-cols-3 gap-2">
            <div class="mini-field">
              <span class="item-mini-label">Tổng</span>
              <input type="number" step="0.001" class="inp-tl input-ios-sm w-full text-right" oninput="recalcRow(this)" placeholder="0">
            </div>
            <div class="mini-field">
              <span class="item-mini-label">Đá</span>
              <input type="number" step="0.001" class="inp-klda input-ios-sm w-full text-right" oninput="recalcRow(this)" placeholder="0">
            </div>
            <div class="mini-field">
              <span class="item-mini-label">Vàng</span>
              <input type="number" step="0.001" class="inp-klvang input-ios-sm w-full text-right font-bold" style="color:#92400e" oninput="recalcRow(this)" placeholder="0">
            </div>
          </div>
        </div>
        <div class="item-group" style="background:#fffdf5;border:1px solid #fef3c7">
          <span class="item-group-label" style="color:#b45309">💰 Tiền (đ)</span>
          <div class="grid grid-cols-3 gap-2">
            <div>
              <div class="mini-field">
                <span class="item-mini-label">Đơn giá/chỉ</span>
                <input type="number" class="inp-dg input-ios-sm w-full text-right font-semibold" oninput="recalcRow(this)" placeholder="0">
              </div>
              <div class="dg-hint text-[10px] mt-0.5 text-right whitespace-nowrap"></div>
            </div>
            <div class="mini-field">
              <span class="item-mini-label">Tiền công</span>
              <input type="number" class="inp-tiencong input-ios-sm w-full text-right" oninput="recalcRow(this)" placeholder="0">
            </div>
            <div class="mini-field">
              <span class="item-mini-label">Tiền đá</span>
              <input type="number" class="inp-tienda input-ios-sm w-full text-right" oninput="recalcRow(this)" placeholder="0">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-foot">
      <span class="item-group-label" style="color:#92400e;margin-bottom:0">Thành tiền</span>
      <div class="inp-tt text-lg font-black" style="color:#b45309">0 đ</div>
    </div>
  </div>`;
}

function addRow() {
  document.getElementById('item-list').insertAdjacentHTML('beforeend', rowTemplate());
  renumberRows();
}

function renumberRows() {
  const rows = document.querySelectorAll('#item-list .item-row');
  rows.forEach((row, i) => { row.querySelector('.stt-cell').textContent = i + 1; });
  document.getElementById('lbl-so-mon').textContent = rows.length;
}

// Quét mã vạch/QR sản phẩm → tìm theo Mã hàng (SKU) trong tồn kho và tự thêm vào hóa đơn.
// Quét liên tục nhiều món chỉ trong 1 ô: mỗi lần quét xong ô tự xóa (bindBarcodeScanInput),
// dòng trống sẵn có được TÁI DÙNG (không để lại dòng rỗng đầu hóa đơn), quét trùng mã báo ngay.
function _scanFeedback(msg, mau) {
  const fb = document.getElementById('scan-feedback');
  if (!fb) return;
  fb.textContent = msg;
  fb.style.color = mau;
  clearTimeout(fb._t);
  fb._t = setTimeout(() => { fb.textContent = ''; }, 3000);
}

function scanProductIntoRow(code) {
  const key = (code || '').trim().toLowerCase();
  let p = key ? products.find(x => (x.ma_hang || '').trim().toLowerCase() === key) : null;
  // RFID: máy quét cầm tay ở chế độ gõ phím gửi MÃ TEM (EPC) chứ không phải mã hàng.
  // BẮT BUỘC chặn key rỗng: món chưa gán tem có rfid_uid = null → '' sẽ khớp nhầm.
  if (!p && key) p = products.find(x => (x.rfid_uid || '').trim().toLowerCase() === key);
  if (!p) {
    _scanFeedback(`✕ Không tìm thấy mã "${code}" trong tồn kho (hàng còn) — kiểm tra lại mã hoặc nhập tay.`, '#dc2626');
    return;
  }
  // Chặn quét 2 lần cùng 1 món (mỗi sản phẩm tồn kho là duy nhất)
  const dup = [...document.querySelectorAll('#item-list .item-row')]
    .find(r => r.dataset.productId == p.id);
  if (dup) {
    dup.classList.add('shake'); setTimeout(() => dup.classList.remove('shake'), 400);
    _scanFeedback(`⚠ "${p.ten || p.ma_hang}" đã có trong hóa đơn rồi (quét trùng).`, '#d97706');
    return;
  }
  // Tái dùng dòng cuối nếu đang trống hoàn toàn, không thì thêm dòng mới
  let tr = document.querySelector('#item-list .item-row:last-child');
  const trTrong = tr && !tr.dataset.productId
    && !tr.querySelector('.inp-mota').value.trim()
    && !tr.querySelector('.inp-mahang').value.trim()
    && !(parseFloat(tr.querySelector('.inp-tl').value) > 0);
  if (!trTrong) {
    addRow();
    tr = document.querySelector('#item-list .item-row:last-child');
  }
  tr.querySelector('.sel-product').value = productLabel(p);
  fillFromProduct(p, tr);
  const soMon = document.querySelectorAll('#item-list .item-row').length;
  _scanFeedback(`✓ Đã thêm món ${soMon}: ${p.ten || p.ma_hang}`, '#16a34a');
}

// Gõ/chọn trong ô "Sản phẩm tồn kho": nếu nội dung khớp đúng 1 sản phẩm trong
// tồn kho (chọn từ gợi ý hoặc gõ đúng) → tự điền các thông tin của sản phẩm đó.
// Để trống hoặc gõ không khớp → coi như dòng "Nhập tay".
function onProductInput(input) {
  const tr = input.closest('.item-row');
  const val = input.value.trim();
  if (!val) {
    clearProductFields(tr);
    return;
  }
  const p = products.find(x => productLabel(x) === val);
  if (p) {
    fillFromProduct(p, tr);
  } else {
    // Đang gõ tìm kiếm / không khớp sản phẩm nào → để người dùng tự nhập tay,
    // không xóa các trường đã nhập.
    delete tr.dataset.productId;
  }
}

// Ô "Sản phẩm tồn kho" chỉ dùng để GÕ TÌM/chọn theo gợi ý (datalist) — quét mã vạch
// luôn thực hiện ở DUY NHẤT 1 ô "🔫 Quét mã vạch sản phẩm" phía dưới (bindBarcodeScanInput),
// tránh 2 chỗ cùng nhận quét gây nhầm lẫn. Enter ở đây chỉ chặn submit, không tự dò theo mã hàng.
function onProductKeydown(e, input) {
  if (e.key !== 'Enter') return;
  e.preventDefault();
}

// Xóa thông tin sản phẩm tồn kho đã gán cho dòng (chuyển về "Nhập tay")
function clearProductFields(tr) {
  tr.querySelector('.inp-mahang').value = '';
  tr.querySelector('.inp-klda').value = '';
  tr.querySelector('.inp-klvang').value = '';
  tr.querySelector('.inp-tienda').value = '';
  tr.querySelector('.inp-tiencong').value = '';
  tr.querySelector('.inp-tuoi').value = '';
  delete tr.dataset.productId;
  delete tr.dataset.loaiVang;
  delete tr.dataset.donVi;
  updateDgHint(tr);
}

function fillFromProduct(p, tr) {
  tr.dataset.productId = p.id;
  tr.dataset.loaiVang = p.loai_vang || '';
  tr.dataset.donVi = p.don_vi || '';
  tr.querySelector('.inp-mahang').value = p.ma_hang || '';
  tr.querySelector('.inp-mota').value = p.ten || '';
  // HLV (Hàm Lượng Vàng) = LOẠI VÀNG (9999, 750, Bạc...) — KHÁC "tuổi". Ưu tiên
  // loại vàng của sản phẩm; chỉ khi trống mới lấy tạm tuổi. (Ô nội bộ vẫn tên inp-tuoi.)
  tr.querySelector('.inp-tuoi').value = p.loai_vang || p.tuoi || '';
  tr.querySelector('.inp-tl').value = p.trong_luong || 0;
  tr.querySelector('.inp-klda').value = p.kl_da || 0;
  tr.querySelector('.inp-klvang').value = p.kl_vang || 0;
  // Đơn giá lấy trực tiếp từ bảng giá vàng hiện tại theo loại vàng của sản phẩm
  // (không cần bấm xác nhận lại); nếu loại vàng chưa có trong bảng giá thì
  // dùng tạm giá bán đã lưu trong tồn kho. Giá trong CSDL lưu theo "nghìn đồng"
  // — quy đổi sang "đồng" để hiển thị/nhập trên màn hình.
  // GIÁ CỐ ĐỊNH (gia_ban_co_dinh=1): bán ĐÚNG giá đã khai, KHÔNG chạy theo bảng giá vàng.
  if (p.gia_ban_co_dinh && (p.gia_ban || 0) > 0) {
    const r = giaCoDinhToRow((p.gia_ban || 0) * 1000, p.kl_vang || 0,
                             (p.tien_cong || 0) * 1000, (p.tien_da || 0) * 1000);
    tr.dataset.giaCoDinh = (p.gia_ban || 0) * 1000;
    tr.querySelector('.inp-dg').value = r.donGia;
    tr.querySelector('.inp-tiencong').value = r.tienCong;
    tr.querySelector('.inp-tienda').value = r.tienDa;
  } else {
    delete tr.dataset.giaCoDinh;
    const gv = findGiaVang(p.loai_vang || '');
    tr.querySelector('.inp-dg').value = gv ? gv * 1000 : 0;   // tra khong ra gia vang → de 0 cho chot chan bao do
    tr.querySelector('.inp-tienda').value = (p.tien_da || 0) * 1000;
    tr.querySelector('.inp-tiencong').value = (p.tien_cong || 0) * 1000;
  }
  recalcRow(tr.querySelector('.inp-tl'));
}

function recalcRow(el) {
  const tr = el.closest('.item-row');
  // GIÁ CỐ ĐỊNH: THÀNH TIỀN luôn = giá đã khai, dù NV sửa trọng lượng/công/đá.
  // Tính lại ĐƠN GIÁ theo KLV hiện tại để công thức (KLV × ĐG + công + đá) ra đúng giá đó.
  if (tr.dataset.giaCoDinh) {
    const _r = giaCoDinhToRow(Number(tr.dataset.giaCoDinh) || 0,
                              parseFloat(tr.querySelector('.inp-klvang').value) || 0,
                              parseFloat(tr.querySelector('.inp-tiencong').value) || 0,
                              parseFloat(tr.querySelector('.inp-tienda').value) || 0);
    tr.querySelector('.inp-dg').value      = _r.donGia;
    tr.querySelector('.inp-tiencong').value = _r.tienCong;
    tr.querySelector('.inp-tienda').value   = _r.tienDa;
  }
  const klVang   = parseFloat(tr.querySelector('.inp-klvang').value) || 0;
  const dg       = parseFloat(tr.querySelector('.inp-dg').value) || 0;
  const tienDa   = parseFloat(tr.querySelector('.inp-tienda').value) || 0;
  const tienCong = parseFloat(tr.querySelector('.inp-tiencong').value) || 0;
  tr.querySelector('.inp-tt').textContent = fmt(klVang * dg + tienDa + tienCong) + ' đ';
  updateDgHint(tr);
  recalcTotal();
}

function recalcTotal() {
  let total = 0;
  document.querySelectorAll('#item-list .item-row').forEach(tr => {
    const klVang   = parseFloat(tr.querySelector('.inp-klvang').value) || 0;
    const dg       = parseFloat(tr.querySelector('.inp-dg').value) || 0;
    const tienDa   = parseFloat(tr.querySelector('.inp-tienda').value) || 0;
    const tienCong = parseFloat(tr.querySelector('.inp-tiencong').value) || 0;
    total += klVang * dg + tienDa + tienCong;
  });
  const giamGia = parseFloat(document.getElementById('inp-giamgia').value) || 0;
  document.getElementById('lbl-tong').textContent = fmt(Math.max(0, total - giamGia));
  // Đẩy ngay giỏ hàng mới lên Màn hình khách (mọi thay đổi giỏ đều qua đây)
  if (window.mhkPushNow) setTimeout(window.mhkPushNow, 100);
}

// Đưa form về trạng thái hóa đơn mới (sau khi lưu xong / hủy sửa)
function resetCart() {
  window._MHK_FINAL = null;
  document.getElementById('item-list').innerHTML = '';
  addRow();
  document.getElementById('inp-khach').value = '';
  document.getElementById('inp-khach-cccd').value = '';
  document.getElementById('inp-khach-diachi').value = '';
  document.getElementById('inp-khach-dt').value = '';
  document.getElementById('inp-giamgia').value = '';
  document.getElementById('inp-ghichu').value = '';
  document.getElementById('sel-hinhthuc').value = 'tien_mat';
  _mhkPush('', '');  // xóa tên khách khỏi Màn hình khách khi xong hóa đơn
  document.getElementById('split-tm').value = '';
  document.getElementById('split-ck').value = '';
  document.getElementById('split-ht-row').style.display = 'none';
  // GIỮ nhân viên đang đăng nhập cho hóa đơn kế tiếp (reset về trống thì lần sau lại quên chọn)
  document.getElementById('sel-nhanvien').value = window._nvMacDinh || '';
  document.getElementById('sel-nguonkhach').value = 'tu_den';   // mặc định an toàn nhất
  recalcTotal();
  editingSaleId = null;
  editingTrangThai = null;
  _posApprovalMode = false;
  _posApprovalOriginal = null;
  document.getElementById('edit-banner').classList.add('hidden');
  document.getElementById('btn-draft').classList.remove('hidden');
  document.getElementById('btn-draft').textContent = '💾 Lưu nháp';
  document.getElementById('btn-submit').textContent = '✅ Tạo hóa đơn';
}

// Quy định nghiệp vụ (Thiết lập → Quy định): 'chan' = chặn ngay ở trình duyệt; 'canh_bao' =
// để máy chủ hỏi xác nhận (409). Không tải được cấu hình → coi mọi mã là 'chan' cho an toàn.
window._QD = null;
fetch('/api/quy-dinh', {cache: 'no-store'}).then(r => r.json())
  .then(d => { window._QD = (d && d.success && d.cau_hinh) ? d.cau_hinh : null; })
  .catch(() => { window._QD = null; });
function _qdChan(ma) { return !window._QD || window._QD[ma] !== 'canh_bao'; }

async function submitSale(asDraft) {
  const pin = getPin();
  const msg = document.getElementById('sale-msg');
  // ⚠️ CHẶN LƯU HÓA ĐƠN khi còn dòng CHƯA CÓ GIÁ (có KL vàng mà đơn giá = 0) — tránh
  // bán hụt gần trọn giá vàng do loại vàng ghi sai/lạ nên tra không ra bảng giá.
  // Vẫn cho LƯU NHÁP để nhân viên giữ giỏ hàng rồi sửa lại loại vàng/giá.
  if (!asDraft) {
    const _loi = [];
    document.querySelectorAll('#item-list .item-row').forEach(tr => {
      const klv = parseFloat(tr.querySelector('.inp-klvang').value) || 0;
      const dg  = parseFloat(tr.querySelector('.inp-dg').value) || 0;
      if (klv > 0 && dg <= 0) {
        const ma  = tr.querySelector('.inp-mahang').value.trim();
        const ten = tr.querySelector('.inp-mota').value.trim();
        const lv  = tr.dataset.loaiVang || '';
        _loi.push(`• ${ma || ten || '(dòng chưa có tên)'}${lv ? ` — loại vàng "${lv}"` : ''}`);
      }
    });
    // Quy định 'ban_don_gia_0' ở chế độ CẢNH BÁO → không chặn ở đây (gợi ý đỏ trên ô đơn giá
    // vẫn hiện); máy chủ sẽ hỏi xác nhận (409) trước khi lưu.
    if (_loi.length && _qdChan('ban_don_gia_0')) {
      alert('⚠️ CHƯA THỂ TẠO HÓA ĐƠN — có ' + _loi.length + ' dòng chưa có giá:\n\n'
            + _loi.join('\n')
            + '\n\nNguyên nhân thường gặp: loại vàng ghi sai/chưa có trong bảng giá, '
            + 'và sản phẩm cũng chưa khai giá bán.\n'
            + '→ Sửa lại loại vàng cho đúng, hoặc điền Đơn giá cho dòng đó rồi tạo lại.');
      return;
    }
  }
  const printLink = document.getElementById('print-link');
  printLink.classList.add('hidden');
  const items = [];
  document.querySelectorAll('#item-list .item-row').forEach(tr => {
    const tl = parseFloat(tr.querySelector('.inp-tl').value) || 0;
    const dg = parseFloat(tr.querySelector('.inp-dg').value) || 0;
    const mota   = tr.querySelector('.inp-mota').value.trim();
    const maHang = tr.querySelector('.inp-mahang').value.trim();
    const tuoi   = tr.querySelector('.inp-tuoi').value.trim();
    const klDa   = parseFloat(tr.querySelector('.inp-klda').value) || 0;
    const klVang = parseFloat(tr.querySelector('.inp-klvang').value) || 0;
    const tienDa   = parseFloat(tr.querySelector('.inp-tienda').value) || 0;
    const tienCong = parseFloat(tr.querySelector('.inp-tiencong').value) || 0;
    if (tl <= 0 && dg <= 0 && !mota && !maHang) return;
    // Màn hình nhập theo "đồng" — quy đổi về "nghìn đồng" trước khi lưu CSDL (đồng bộ với sổ quỹ/báo cáo)
    items.push({
      product_id: tr.dataset.productId ? parseInt(tr.dataset.productId) : null,
      mo_ta: mota,
      trong_luong: tl,
      don_gia: dg / 1000,
      thanh_tien: (klVang * dg + tienDa + tienCong) / 1000,
      ma_hang:   maHang,
      ten:       mota,
      tuoi:      tuoi,
      tien_da:   tienDa / 1000,
      tien_cong: tienCong / 1000,
      kl_da:     klDa,
      kl_vang:   klVang,
      don_vi:    tr.dataset.donVi || '',
    });
  });
  if (!items.length) { msg.textContent = '⚠️ Vui lòng thêm ít nhất 1 dòng hàng.'; msg.className='text-sm text-amber-600'; return; }

  const trang_thai = asDraft ? 'nhap' : 'hoan_thanh';
  const payload = {
    pin, loai: 'ban',
    khach_hang: document.getElementById('inp-khach').value.trim(),
    dia_chi_khach: document.getElementById('inp-khach-diachi').value.trim(),
    dien_thoai_khach: document.getElementById('inp-khach-dt').value.trim(),
    cccd_khach: document.getElementById('inp-khach-cccd').value.trim(),
    giam_gia: (parseFloat(document.getElementById('inp-giamgia').value) || 0) / 1000,
    ghi_chu: document.getElementById('inp-ghichu').value.trim(),
    hinh_thuc: document.getElementById('sel-hinhthuc').value,
    so_tien_tien_mat: document.getElementById('split-tm').value,
    so_tien_chuyen_khoan: document.getElementById('split-ck').value,
    nhan_vien_id: document.getElementById('sel-nhanvien').value || null,
    nguon_khach: document.getElementById('sel-nguonkhach').value || 'tu_den',
    trang_thai,
    items,
  };

  const wasEditing = !!editingSaleId;
  const wasDraft = editingTrangThai === 'nhap';

  // Nhân viên thường sửa HĐ đã hoàn tất → gửi duyệt thay vì lưu trực tiếp
  if (_posApprovalMode && editingSaleId) {
    const approvalPayload = Object.assign({}, payload);
    delete approvalPayload.pin;
    const r = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify((() => {
          const o = _posApprovalOriginal || {};
          const _money = n => Number(n||0).toLocaleString('vi-VN') + 'đ';
          const changes = [];
          const _cmp = (label, ov, nv) => { if (String(ov??'') !== String(nv??'')) changes.push({label, old: ov||'—', new: nv||'—'}); };
          _cmp('Khách hàng', o.khach_hang, payload.khach_hang);
          _cmp('Điện thoại', o.dien_thoai_khach, payload.dien_thoai_khach);
          _cmp('Địa chỉ', o.dia_chi_khach, payload.dia_chi_khach);
          if ((o.giam_gia||0) !== (payload.giam_gia||0)) changes.push({label:'Giảm giá', old:_money((o.giam_gia||0)*1000), new:_money((payload.giam_gia||0)*1000)});
          _cmp('Ghi chú', o.ghi_chu, payload.ghi_chu);
          if ((o.items||[]).length !== (payload.items||[]).length) changes.push({label:'Số mặt hàng', old:(o.items||[]).length+' món', new:(payload.items||[]).length+' món'});
          if (changes.length) { approvalPayload._delta = changes.map(c=>`${c.label}: ${c.old} → ${c.new}`); approvalPayload._changes = changes; }
          return { loai: 'ban_hang', phieu_id: editingSaleId, payload: approvalPayload,
            mo_ta: `Hóa đơn #${o.ma_hd||editingSaleId} — ${changes.length ? changes.map(c=>c.label).join(', ') : 'Cập nhật thông tin'}` };
        })())
    });
    const rd = await r.json();
    if (rd.success) {
      clearCart();
      msg.textContent = '✅ Đã gửi yêu cầu duyệt. Vui lòng chờ GĐ/PGĐ xem xét.';
      msg.className = 'text-sm text-blue-600 font-semibold';
    } else {
      msg.textContent = '❌ ' + (rd.message || rd.error || 'Gửi thất bại');
      msg.className = 'text-sm text-red-600';
    }
    return;
  }

  const res = editingSaleId
    ? await fetch(`/api/pos/sales/${editingSaleId}/full`, {
        method: 'PUT', headers: {'Content-Type':'application/json'},
        body: JSON.stringify(payload)
      })
    : await fetch('/api/pos/sales', {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify(payload)
      });
  const data = await res.json();

  if (data.success) {
    const id = wasEditing ? editingSaleId : data.id;
    const maHd = wasEditing ? data.sale.ma_hd : data.ma_hd;
    const finalTrangThai = wasEditing ? data.sale.trang_thai : data.trang_thai;

    if (finalTrangThai === 'nhap') {
      msg.textContent = `💾 Đã lưu nháp hóa đơn (${maHd})`;
      msg.className = 'text-sm text-amber-600 font-semibold';
    } else {
      if (wasDraft) {
        msg.textContent = `✅ Đã hoàn tất hóa đơn ${maHd}`;
      } else if (wasEditing) {
        msg.textContent = `✅ Đã cập nhật hóa đơn ${maHd}`;
      } else {
        msg.textContent = `✅ Đã tạo hóa đơn ${maHd}`;
      }
      msg.className = 'text-sm text-green-600 font-semibold';
      printLink.innerHTML = `
        <div class="flex flex-wrap items-center gap-2">
          <a href="/pos/sales/${id}/print" target="_blank" class="btn-ios btn-ios-gold inline-block px-4 py-2 text-sm">🖨️ In giấy đảm bảo vàng</a>
          <button onclick="printRemote('/pos/sales/${id}/print', this)" class="btn-ios btn-ios-secondary text-amber-700 px-4 py-2 text-sm" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>
          <a href="/pos/sales/${id}/receipt" target="_blank" class="btn-ios btn-ios-secondary text-emerald-700 px-4 py-2 text-sm">🖨️ In phiếu thu</a>
          <button onclick="printRemote('/pos/sales/${id}/receipt', this)" class="btn-ios btn-ios-secondary text-emerald-700 px-4 py-2 text-sm" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In PT tại quầy</button>
          <a href="/pos/sales/${id}/hoa-don" target="_blank" class="btn-ios btn-ios-secondary text-red-800 px-4 py-2 text-sm" title="In ra máy in của CHÍNH máy này (hộp thoại in của trình duyệt)">🧾 In hóa đơn</a>
          <button onclick="printRemote('/pos/sales/${id}/hoa-don', this)" class="btn-ios btn-ios-secondary text-red-800 px-4 py-2 text-sm" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In HĐ tại quầy</button>
        </div>`;
      printLink.classList.remove('hidden');
    }
    const hinhThucThanhToan = payload.hinh_thuc;
    const tienCk = hinhThucThanhToan === 'chuyen_khoan'
      ? Math.round((parseFloat(document.getElementById('lbl-tong').textContent.replace(/[^\d]/g, '')) || 0))
      : hinhThucThanhToan === 'ca_hai' ? Math.round(parseSplitAmt('split-ck')) : 0;
    const mhkFinal = window._MHK_COLLECT();
    if (finalTrangThai === 'hoan_thanh' && tienCk > 0 && mhkFinal.giao_dich) {
      mhkFinal.giao_dich.thanh_toan = {so_tien: tienCk, ma_hd: maHd,
        noi_dung: _qrNoiDung.value.trim() || 'Thanh toán tiền hàng', hien_ma_hd: _qrHienMa.checked};
    }
    resetCart();
    window._MHK_FINAL = finalTrangThai === 'hoan_thanh' ? mhkFinal : null;
    _mhkPush();
    loadProducts(); loadSales(); loadDrafts();
  } else {
    if (data.error === 'wrong_pin') msg.textContent = '❌ Sai mã PIN';
    else if (data.error === 'forbidden_role') msg.textContent = '❌ Hóa đơn đã hoàn tất chỉ Giám đốc / Phó Giám đốc mới được sửa lại.';
    else if ((data.error === 'vi_pham_quy_dinh' || data.error === 'can_xac_nhan') && data.message) msg.textContent = '❌ ' + data.message;
    else msg.textContent = `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function loadProducts() {
  const res = await fetch('/api/pos/products?status=con_hang&gon=1');
  const data = await res.json();
  products = data.products;
  refreshProductDatalist();
}

// ── Vai trò người dùng (ẩn/hiện nút "Hoàn lại hóa đơn" — chỉ GĐ/PGĐ) ────
let _myRole = window._NV_ROLE || null;
const _roleReady = (async () => {
  try {
    const r = await fetch('/api/my-perms');
    const d = await r.json();
    _myRole = d.role || null;
    if (_myRole === 'giam_doc' || _myRole === 'pho_giam_doc') {
      document.getElementById('reverted-section').classList.remove('hidden');
      loadReverted();
    }
  } catch(e) {}
})();

// Cảnh báo khi xóa hóa đơn được tạo TRƯỚC lần kiểm tiền đầu ca gần nhất: tiền của nó
// đã nằm trong số đếm mốc — xóa rồi tạo lại phiếu mới sẽ làm quỹ dự kiến tính trùng
// (bug thật 04/07/2026, lệch 2.319.000đ). Trả về chuỗi cảnh báo hoặc '' nếu an toàn.
function _parseDmyHms(s) {
  const m = (s || '').match(/^(\d{2})\/(\d{2})\/(\d{4})[ T]?(\d{2}):(\d{2}):?(\d{2})?/);
  return m ? new Date(+m[3], +m[2]-1, +m[1], +m[4], +m[5], +(m[6]||0)) : null;
}
async function _canhBaoXoaQuaMoc(saleId) {
  try {
    const [saleRes, expRes] = await Promise.all([
      fetch(`/api/pos/sales/${saleId}`),
      fetch('/api/pos/cash-counts/expected?loai=dau_ca'),
    ]);
    const sale = (await saleRes.json()).sale;
    const exp  = await expRes.json();
    if (!sale || sale.trang_thai !== 'hoan_thanh' || !exp.moc_ngay) return '';
    const dSale = _parseDmyHms(sale.ngay), dMoc = _parseDmyHms(exp.moc_ngay);
    if (dSale && dMoc && dSale < dMoc) {
      return '🚨 HÓA ĐƠN NÀY ĐÃ NẰM TRONG SỐ KIỂM QUỸ ĐẦU CA — xóa rồi tạo lại phiếu mới sẽ làm LỆCH QUỸ DỰ KIẾN (tiền bị tính 2 lần). Khách đổi hàng → dùng nút 🔄 Đổi hàng; nhập sai → dùng ✏️ Sửa. Chỉ xóa nếu chắc chắn không tạo lại phiếu thay thế.\n\n';
    }
  } catch (e) {}
  return '';
}

async function deleteSale(id, maHd) {
  const canhBao = await _canhBaoXoaQuaMoc(id);
  if (!confirm(`${canhBao}⚠️ Xóa hóa đơn ${maHd}?\n\nHóa đơn đã hoàn tất: sản phẩm sẽ được nhập lại kho.\nThao tác không thể hoàn tác.`)) return;
  showPinConfirm(
    `🗑️ Xóa hóa đơn ${maHd}`,
    canhBao + 'Sản phẩm sẽ được nhập lại kho, bút toán sổ quỹ liên quan bị xóa. Không thể hoàn tác.',
    '🗑️ Xóa hóa đơn',
    async (pin) => {
      const res = await fetch(`/api/pos/sales/${id}`, {
        method: 'DELETE', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ pin })
      });
      const d = await res.json();
      if (!d.success) {
        document.getElementById('pcm-err').textContent =
          d.error === 'wrong_pin' ? '❌ Sai mã PIN'
          : d.error === 'forbidden_role' ? '❌ Không đủ quyền (cần GĐ/PGĐ + PIN)'
          : `❌ Lỗi: ${d.error}`;
        return;
      }
      closePinConfirm();
      loadSales(); loadReverted(); loadProducts();
    }
  );
}

// Dữ liệu hóa đơn (tên khách, món, địa chỉ, ghi chú, mã...) do NGƯỜI DÙNG nhập → luôn là CHỮ: thoát ký tự
// trước khi ghép vào HTML (P0 14/10/2026: tên khách chứa <img onerror> chạy mã trong phiên Giám đốc).
const _hx = v => String(v == null ? '' : v).replace(/&/g, '&amp;').replace(/</g, '&lt;')
  .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
// Đối số CHUỖI trong onclick="...": JSON (an toàn trong JS) rồi thoát HTML (an toàn trong thuộc tính)
const _hja = v => _hx(JSON.stringify(String(v == null ? '' : v)));
// Khóa nhóm khách trong id/onclick: mã hóa cả ' ( ) ! * để không thoát được khỏi chuỗi JS
const _hk = k => encodeURIComponent(k).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());

async function loadReverted() {
  const q = (document.getElementById('inp-search-reverted')?.value || '').trim();
  const res = await fetch('/api/pos/sales?trang_thai=hoan_lai' + (q ? '&q=' + encodeURIComponent(q) : ''));
  const data = await res.json();
  document.getElementById('reverted-tbody').innerHTML = (data.sales || []).map(s => `
    <tr class="border-b border-gray-50 hover:bg-red-50">
      <td class="px-4 py-2 font-mono dct-title">${_hx(s.ma_hd)}</td>
      <td class="px-4 py-2" data-label="Ngày tạo">${_hx(s.ngay)}</td>
      <td class="px-4 py-2" data-label="Loại">${s.loai === 'ban' ? '🟢 Bán' : '🔴 Mua'}</td>
      <td class="px-4 py-2" data-label="Khách hàng">${_hx(s.khach_hang || '—')}<div class="text-xs text-gray-400">${_hx(s.dien_thoai_khach||'')}</div></td>
      <td class="px-4 py-2 text-right font-semibold" data-label="Tổng tiền">${fmt((s.tong_tien||0) * 1000)}</td>
      <td class="px-4 py-2" data-label="Hoàn lại lúc">${_hx(s.hoan_lai_luc || '—')}</td>
      <td class="px-4 py-2" data-label="Người hoàn lại">${_hx(s.hoan_lai_boi || '—')}</td>
      <td class="px-4 py-2 text-center whitespace-nowrap dct-act">
        <button onclick="viewSale(${+s.id})" class="text-blue-600 hover:underline" title="Xem lại hóa đơn">👁️ Xem</button>
        <button onclick="deleteSale(${+s.id}, ${_hja(s.ma_hd)})" class="text-red-600 hover:underline ml-2" title="Xóa hóa đơn">🗑️</button>
      </td>
    </tr>`).join('') || '<tr><td colspan="8" class="text-center text-gray-300 py-8">Chưa có hóa đơn nào bị hoàn lại</td></tr>';
}

function _htttLabel(h) {
  return h === 'chuyen_khoan' ? '🏦 CK' : h === 'ca_hai' ? '🔀 TM/CK' : '💵 TM';
}
// ── HÓA ĐƠN BÁN GẦN ĐÂY (23/10/2026, chủ tiệm chốt) ─────────────────────────────
// • Chỉ hóa đơn BÁN đã hoàn tất (trang Bán hàng — mua vào xem ở trang Mua hàng).
// • Mặc định 100 hóa đơn mới nhất; chọn "Tất cả" thì máy chủ trả ĐỦ (không cắt ngầm).
//   Lựa chọn KHÔNG lưu — tải lại trang luôn về 100.
// • Ô tìm lọc NGAY trên tập đang hiện; các số tổng luôn tính từ đúng tập đang hiện.
// • Gom theo NGÀY THẬT (không so chuỗi dd/mm/yyyy), ngày mới nhất trên cùng; bấm 1 ngày mở
//   mọi giao dịch trong ngày, xếp theo thời gian TRƯỚC → SAU.
let _hdGioiHan = '100';
let _hdGhDaTai = '100';      // phạm vi của dữ liệu ĐÃ tải xong (nhãn/tổng luôn theo dữ liệu thật đang có)
let _hdDsGoc = [];
let _hdTongSo = 0;
let _hdLuot = 0;
let _hdNgayMo = {};
let _hdNgayMap = {};

function hdChonGioiHan(v) {
  _hdGioiHan = v === 'tat_ca' ? 'tat_ca' : '100';
  ['100', 'tat_ca'].forEach(k => document.getElementById('hd-gh-' + k)?.classList.toggle('on', k === _hdGioiHan));
  loadSales();
}

async function loadSales() {
  const luot = ++_hdLuot;
  const grid = document.getElementById('sales-grid');
  if (!_hdDsGoc.length && grid) grid.innerHTML = '<div class="text-center text-gray-300 py-10">Đang tải…</div>';
  const pv0 = document.getElementById('sales-pham-vi');
  if (pv0 && _hdGioiHan !== _hdGhDaTai) pv0.innerHTML = '⏳ Đang tải ' + (_hdGioiHan === 'tat_ca' ? 'TẤT CẢ hóa đơn bán…' : '100 hóa đơn mới nhất…');
  let data;
  try {
    const res = await fetch('/api/pos/sales?trang_thai=hoan_thanh&loai=ban&gon=1&gioi_han=' + (_hdGioiHan === 'tat_ca' ? 'tat_ca' : '100'));
    data = await res.json();
  } catch (e) {
    if (luot === _hdLuot && grid) grid.innerHTML = '<div class="text-center text-red-400 py-10">Không tải được hóa đơn — kiểm tra mạng rồi thử lại.</div>';
    return;
  }
  if (luot !== _hdLuot) return;          // đã có lần tải mới hơn (bấm đổi lựa chọn nhanh)
  _hdDsGoc = (data.sales || []).filter(s => s.loai === 'ban' && s.trang_thai === 'hoan_thanh');
  _hdTongSo = data.tong_so || _hdDsGoc.length;
  _hdGhDaTai = data.gioi_han === 'tat_ca' ? 'tat_ca' : '100';
  hdVeDanhSach();
}

function _hdBoDau(s) {
  return String(s == null ? '' : s).normalize('NFD').replace(/[\u0300-\u036f]/g, '')
    .replace(/đ/g, 'd').replace(/Đ/g, 'D').toLowerCase();
}
function _hdKhop(s, qn) {
  // chuỗi tìm dựng 1 lần cho mỗi hóa đơn (gõ tìm trên hàng nghìn hóa đơn vẫn mượt)
  if (s._hay === undefined) s._hay = [s.ma_hd, s.khach_hang, s.cccd_khach, s.dien_thoai_khach, s.ngay, s.dia_chi_khach]
    .concat((s.items || []).flatMap(it => [it.ma_hang, it.ten, it.mo_ta])).map(_hdBoDau).join(' | ');
  return s._hay.includes(qn);
}

// 'dd/mm/yyyy HH:MM:SS' → 'yyyy-mm-dd' (so chuỗi ISO = đúng thứ tự thời gian)
function _hdNgayKey(ngay) {
  const p = String(ngay || '').split(' ')[0].split('/');
  return p.length === 3 ? `${p[2]}-${p[1].padStart(2, '0')}-${p[0].padStart(2, '0')}` : '';
}
function _hdTsKey(ngay) {
  const d = _hdNgayKey(ngay);
  return d ? d + ' ' + (String(ngay).split(' ')[1] || '00:00:00') : '';
}

// HÀM TÍNH DUY NHẤT cho mọi con số tổng (dùng cả cho thẻ tổng lẫn từng ngày) — có test riêng.
// Tiền theo NGHÌN đồng (như CSDL); số sản phẩm = số dòng hàng đã bán.
function hdTongHop(list) {
  const byDay = new Map();
  let doanhThu = 0, soSp = 0;
  (list || []).forEach(s => {
    const tt = Number(s.tong_tien || 0);
    const sp = (s.items || []).length;
    doanhThu += tt; soSp += sp;
    const k = _hdNgayKey(s.ngay) || '0000-00-00';
    if (!byDay.has(k)) byDay.set(k, { key: k, nhan: String(s.ngay || '').split(' ')[0] || '(không rõ ngày)',
                                      soHd: 0, doanhThu: 0, soSp: 0, sales: [] });
    const g = byDay.get(k);
    g.soHd += 1; g.doanhThu += tt; g.soSp += sp; g.sales.push(s);
  });
  const ngay = [...byDay.values()].sort((a, b) => b.key.localeCompare(a.key));
  // Ngày mới nhất trên cùng; trong ngày hóa đơn MỚI NHẤT trên cùng (theo giờ thật, cùng giây thì id lớn trước)
  ngay.forEach(g => g.sales.sort((x, y) => _hdTsKey(y.ngay).localeCompare(_hdTsKey(x.ngay)) || (y.id || 0) - (x.id || 0)));
  return { soHd: (list || []).length, doanhThu, soSp, ngay };
}

function hdVeDanhSach() {
  const q = (document.getElementById('inp-search-sales')?.value || '').trim();
  const qn = _hdBoDau(q);
  const list = qn ? _hdDsGoc.filter(s => _hdKhop(s, qn)) : _hdDsGoc;
  const th = hdTongHop(list);
  const tatCa = _hdGhDaTai === 'tat_ca';

  // Phạm vi đang hiện — nói rõ, không cắt ngầm
  const pv = document.getElementById('sales-pham-vi');
  if (pv) {
    let t = tatCa || _hdTongSo <= _hdDsGoc.length
      ? `Đang hiện <b>tất cả ${fmt(_hdDsGoc.length)}</b> hóa đơn bán`
      : `Đang hiện <b>${fmt(_hdDsGoc.length)} hóa đơn mới nhất</b> / tổng ${fmt(_hdTongSo)} — <a href="javascript:void(0)" class="hd-lk" onclick="hdChonGioiHan('tat_ca')">hiện tất cả</a>`;
    if (qn) t += ` · khớp tìm: <b>${fmt(list.length)}</b>`
      + (!tatCa && _hdTongSo > _hdDsGoc.length ? ' (chỉ tìm trong các hóa đơn đang hiện)' : '');
    pv.innerHTML = t;
  }

  const sCard = (val, label, color) => `
    <div class="rounded-2xl p-3 text-center" style="background:${color}1f;border:1px solid ${color}44">
      <div class="text-xl font-black leading-tight tabular-nums break-words" style="color:${color}">${val}</div>
      <div class="text-xs font-bold text-gray-600 mt-1">${label}</div>
    </div>`;
  document.getElementById('sales-summary').innerHTML =
    sCard(fmt(th.soHd), qn ? 'Hóa đơn khớp tìm' : 'Hóa đơn bán', '#b45309') +
    sCard(fmt(Math.round(th.doanhThu * 1000)) + 'đ', 'Doanh thu bán ra', '#16a34a') +
    sCard(fmt(th.soSp), 'Sản phẩm đã bán', '#2563eb');

  _hdNgayMap = {};
  th.ngay.forEach(g => { _hdNgayMap[g.key] = g; });
  const grid = document.getElementById('sales-grid');
  grid.innerHTML = th.ngay.map(_hdNgayCard).join('')
    || `<div class="text-center text-gray-400 py-10">${qn ? 'Không tìm thấy hóa đơn phù hợp'
          + (!tatCa && _hdTongSo > _hdDsGoc.length ? ' trong ' + fmt(_hdDsGoc.length) + ' hóa đơn đang hiện — <a href="javascript:void(0)" class="hd-lk" style="color:#b45309;font-weight:800;text-decoration:underline" onclick="hdChonGioiHan(\'tat_ca\')">tìm trong tất cả</a>' : '')
          : 'Chưa có hóa đơn bán'}</div>`;
  // Đang tìm → mở các ngày khớp; không tìm → mở sẵn ngày mới nhất (lần đầu)
  if (qn) th.ngay.forEach(g => _hdMoNgay(g.key, true));
  else {
    if (th.ngay.length && _hdNgayMo[th.ngay[0].key] === undefined) _hdNgayMo[th.ngay[0].key] = true;
    th.ngay.forEach(g => { if (_hdNgayMo[g.key]) _hdMoNgay(g.key, true); });
  }
}

const _HD_THU = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
function _hdNgayCard(g) {
  const ek = _hk(g.key);
  const p = g.key.split('-');
  const thu = p.length === 3 ? _HD_THU[new Date(+p[0], +p[1] - 1, +p[2]).getDay()] : '';
  return `<div class="hd-ngay">
    <div class="hd-ngay-dau" onclick="hdBamNgay('${ek}')">
      <div class="hd-ngay-so"><b>${_hx(p[2] || '•')}</b><span>${_hx(thu)}</span></div>
      <div class="hd-ngay-ten">
        <div class="t1">${thu ? (thu === 'CN' ? 'Chủ nhật' : 'Thứ ' + thu.slice(1)) + ', ' : ''}${_hx(g.nhan)}</div>
        <div class="t2"><b>${fmt(g.soHd)}</b> hóa đơn · <b>${fmt(g.soSp)}</b> sản phẩm đã bán</div>
      </div>
      <div class="hd-ngay-tien so-tong"><div class="v">${fmt(Math.round(g.doanhThu * 1000))}đ</div><div class="l">DOANH THU NGÀY</div></div>
      <span id="hd-chev-${ek}" class="hd-ngay-chev">▾</span>
    </div>
    <div id="hd-than-${ek}" class="hd-ngay-than hidden"></div>
  </div>`;
}

// Nội dung từng ngày chỉ dựng khi MỞ (chọn "Tất cả" hàng nghìn hóa đơn vẫn nhẹ)
function _hdMoNgay(key, mo) {
  const ek = _hk(key);
  const than = document.getElementById('hd-than-' + ek);
  const ch = document.getElementById('hd-chev-' + ek);
  _hdNgayMo[key] = mo;
  if (!than) return;
  if (mo && !than.dataset.daVe) {
    const g = _hdNgayMap[key];
    const mauNgay = _hdMauTrongNgay(g ? g.sales : []);
    than.innerHTML = g ? g.sales.map(s => _saleTicketRow(s, mauNgay)).join('') : '';
    than.dataset.daVe = '1';
  }
  than.classList.toggle('hidden', !mo);
  if (ch) ch.textContent = mo ? '▴' : '▾';
}
function hdBamNgay(ek) {
  const key = decodeURIComponent(ek);
  _hdMoNgay(key, !_hdNgayMo[key]);
}

// 1 dòng hóa đơn bên trong khách (giống dòng phiếu cầm)
// Màu thẻ theo KHÁCH trong từng ngày: khách đầu tiên màu 1, khách KHÁC tiếp theo màu 2... (2 khách kề nhau luôn khác màu);
// cùng 1 khách (cùng SĐT, không có thì cùng tên) giữ đúng 1 màu trong ngày; khách lẻ không tên = xám.
const _HD_MAU = [
  {c: '#2563eb', t: '#eff6ff', v: '#bfdbfe'}, {c: '#ea580c', t: '#fff7ed', v: '#fed7aa'},
  {c: '#16a34a', t: '#f0fdf4', v: '#bbf7d0'}, {c: '#9333ea', t: '#faf5ff', v: '#e9d5ff'},
  {c: '#0891b2', t: '#ecfeff', v: '#a5f3fc'}, {c: '#db2777', t: '#fdf2f8', v: '#fbcfe8'},
  {c: '#ca8a04', t: '#fefce8', v: '#fde68a'}, {c: '#4f46e5', t: '#eef2ff', v: '#c7d2fe'},
];
const _HD_MAU_LE = {c: '#6b7280', t: '#f3f4f6', v: '#d1d5db'};
function _hdKhoaKhach(s) {
  return String(s.dien_thoai_khach || '').replace(/\D/g, '') || _hdBoDau(s.khach_hang || '').trim();
}
function _hdMauTrongNgay(sales) {
  const m = new Map();
  sales.forEach(s => {
    const k = _hdKhoaKhach(s);
    if (k && !m.has(k)) m.set(k, _HD_MAU[m.size % _HD_MAU.length]);
  });
  return m;
}

function _saleTicketRow(s, mauNgay) {
  const canDel = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  const isBan = s.loai === 'ban';
  const soMon = (s.items || []).length;
  const gio = String(s.ngay || '').split(' ')[1] || '';
  // Món hàng + mã SP hiện NGAY trên hóa đơn (kiểu Bảng theo dõi hàng cầm) — 👁️ Xem vẫn có để xem chi tiết
  const itemsHtml = (s.items || []).map(it => {
    const kl = Number(it.kl_vang || it.trong_luong || 0);
    return `<div class="flex justify-between gap-2 min-w-0 px-2 py-1 text-xs">
      <span class="truncate">${it.ma_hang ? '<span class="font-mono text-gray-400">' + _hx(it.ma_hang) + '</span> · ' : ''}${_hx(it.ten || it.mo_ta || '—')}${it.tuoi ? ' <span class="text-gray-400">(' + _hx(it.tuoi) + ')</span>' : ''}</span>
      <span class="text-gray-400 whitespace-nowrap">${kl ? kl.toLocaleString('vi-VN', {maximumFractionDigits: 3}) + ' chỉ · ' : ''}${fmt((it.thanh_tien || 0) * 1000)}đ</span>
    </div>`;
  }).join('');
  const mau = (mauNgay && mauNgay.get(_hdKhoaKhach(s))) || _HD_MAU_LE;
  const ten = s.khach_hang || 'Khách lẻ';
  return `<div class="hd-gd" style="--hd-c:${mau.c};--hd-t:${mau.t};--hd-v:${mau.v}">
    <div class="hd-gd-dau">
      <div class="hd-gd-av">${_hx(s.khach_hang ? vnInitial(s.khach_hang) : '?')}</div>
      <div class="hd-gd-ten">
        <div class="k">${_hx(ten)}</div>
        <div class="p">${s.dien_thoai_khach ? '📞 ' + _hx(s.dien_thoai_khach) + ' · ' : ''}<span class="font-mono">${_hx(s.ma_hd)}</span></div>
      </div>
      <div class="hd-gd-tien">
        <div class="v ${isBan?'text-green-700':'text-red-600'}">${fmt((s.tong_tien||0)*1000)}đ</div>
        <div class="g" title="${_hx(s.ngay)}">🕒 ${_hx(gio.slice(0, 5))}</div>
      </div>
    </div>
    <div class="hd-gd-than">
    <div class="hd-gd-nhan">
      <span class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap" style="${isBan?'background:#16a34a;color:#fff':'background:#dc2626;color:#fff'}">${isBan?'Bán':'Mua'}</span>
      <span class="c">${_htttLabel(s.hinh_thuc)}</span>${soMon?`<span class="c">${soMon} món</span>`:''}
    </div>
    ${itemsHtml ? `<div class="hd-gd-mon">${itemsHtml}</div>` : ''}
    <div class="flex items-center gap-2 flex-wrap">
      <button onclick="viewSale(${s.id})" class="tkt-act tkt-blue">👁️ Xem</button>
      <button onclick="editSale(${s.id})" class="tkt-act tkt-indigo">✏️ Sửa</button>
      ${isBan ? `<a href="/pos/sales/${s.id}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In</a>
      <button onclick="printRemote('/pos/sales/${s.id}/print', this)" class="tkt-act tkt-amber" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>
      <a href="/pos/sales/${s.id}/receipt" target="_blank" class="tkt-act tkt-emerald">🖨️ In phiếu thu</a>
      <button onclick="printRemote('/pos/sales/${s.id}/receipt', this)" class="tkt-act tkt-emerald" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In PT tại quầy</button>
      <a href="/pos/sales/${s.id}/hoa-don" target="_blank" class="tkt-act tkt-amber" title="In ra máy in của CHÍNH máy này (hộp thoại in của trình duyệt)">🧾 In hóa đơn</a>
      <button onclick="printRemote('/pos/sales/${s.id}/hoa-don', this)" class="tkt-act tkt-amber" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In HĐ tại quầy</button>` : ''}
      <button onclick="xuatHoaDonDienTu(${_hja(s.loai)}, ${+s.id})" class="tkt-act tkt-amber">📤 HĐĐT</button>
      ${canDel ? `<button onclick="deleteSale(${+s.id}, ${_hja(s.ma_hd)})" class="tkt-act tkt-red">🗑️ Xóa</button>` : `<button onclick="xinXoaPhieu('ban_hang', ${+s.id}, ${_hja(s.ma_hd)}, ${_hja('KH: ' + (s.khach_hang || ''))})" class="tkt-act tkt-orange" title="NV không tự xóa — gửi GĐ/PGĐ duyệt">📤 Xin xóa</button>`}
    </div>
    </div>
  </div>`;
}

// ── Hóa đơn nháp ──────────────────────────────────────────
async function loadDrafts() {
  const res = await fetch('/api/pos/sales?trang_thai=nhap');
  const data = await res.json();
  document.getElementById('drafts-tbody').innerHTML = data.sales.map(s => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-4 py-2 dct-title">${_hx(s.ngay)}</td>
      <td class="px-4 py-2" data-label="Loại">${s.loai === 'ban' ? '🟢 Bán' : '🔴 Mua'}</td>
      <td class="px-4 py-2" data-label="Khách hàng">${_hx(s.khach_hang || '—')}<div class="text-xs text-gray-400">${_hx(s.dien_thoai_khach||'')}</div></td>
      <td class="px-4 py-2 text-right font-semibold" data-label="Tổng tiền tạm tính">${fmt((s.tong_tien||0) * 1000)}</td>
      <td class="px-4 py-2 text-center whitespace-nowrap dct-act">
        <button onclick="editSale(${+s.id})" class="text-indigo-600 hover:underline" title="Tiếp tục / hoàn tất hóa đơn nháp">✏️ Tiếp tục</button>
        ${(_myRole==='giam_doc'||_myRole==='pho_giam_doc'||_myRole==='pin_admin') ? `<button onclick="deleteDraft(${+s.id}, ${_hja(s.ma_hd)})" class="text-red-600 hover:underline ml-2" title="Xóa hóa đơn nháp">🗑️</button>` : ''}
      </td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-8">Chưa có hóa đơn nháp</td></tr>';
}

function deleteDraft(id, maHd) {
  if (!confirm(`⚠️ Xóa hóa đơn nháp ${maHd || ''}?\nThao tác không thể hoàn tác.`)) return;
  showPinConfirm(
    `🗑️ Xóa hóa đơn nháp ${maHd || ''}`,
    'Hóa đơn nháp sẽ bị xóa vĩnh viễn. Thao tác không thể hoàn tác.',
    '🗑️ Xóa',
    async (pin) => {
      const res = await fetch(`/api/pos/sales/${id}`, {
        method: 'DELETE', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ pin })
      });
      const d = await res.json();
      if (!d.success) {
        document.getElementById('pcm-err').textContent =
          d.error === 'wrong_pin' ? '❌ Sai mã PIN'
          : d.error === 'forbidden_role' ? '❌ Không đủ quyền (cần GĐ/PGĐ + PIN)'
          : `❌ Lỗi: ${d.error}`;
        return;
      }
      closePinConfirm();
      loadDrafts();
    }
  );
}

// Mở hóa đơn (nháp hoặc đã hoàn tất) lên giỏ hàng để sửa / hoàn tất
async function editSale(id) {
  const res = await fetch(`/api/pos/sales/${id}`);
  const data = await res.json();
  if (!data.success) { alert('Không tìm thấy hóa đơn.'); return; }
  const sale = data.sale;

  const isCompleted = (sale.trang_thai || 'hoan_thanh') === 'hoan_thanh';
  const isDirector  = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';

  if (isCompleted && isDirector) {
    showPinConfirm(
      `✏️ Sửa hóa đơn #${sale.ma_hd}`,
      `Nhập mã PIN để xác nhận quyền sửa hóa đơn đã hoàn tất.`,
      '✏️ Xác nhận sửa',
      async (pin) => {
        const chk = await fetch('/api/check-pin', {
          method: 'POST', headers: {'Content-Type':'application/json'},
          body: JSON.stringify({ pin })
        });
        const chkData = await chk.json();
        if (!chkData.ok) {
          document.getElementById('pcm-err').textContent = '❌ Sai mã PIN.';
          return;
        }
        document.getElementById('pin-input').value = pin;
        localStorage.setItem(PIN_KEY, pin);
        closePinConfirm();
        _posApprovalMode = false;
        loadSaleIntoCart(sale);
      }
    );
  } else if (isCompleted) {
    if (!confirm(`Hóa đơn #${sale.ma_hd} đã hoàn tất.\nBạn muốn tạo yêu cầu sửa để GĐ/PGĐ duyệt không?`)) return;
    _posApprovalMode = true;
    _posApprovalOriginal = sale;
    loadSaleIntoCart(sale);
  } else {
    _posApprovalMode = false;
    loadSaleIntoCart(sale);
  }
}

function loadSaleIntoCart(sale) {
  document.getElementById('inp-khach').value = sale.khach_hang || '';
  document.getElementById('inp-khach-cccd').value = sale.cccd_khach || '';
  document.getElementById('inp-khach-diachi').value = sale.dia_chi_khach || '';
  document.getElementById('inp-khach-dt').value = sale.dien_thoai_khach || '';
  document.getElementById('sel-hinhthuc').value = sale.hinh_thuc || 'tien_mat';
  document.getElementById('split-tm').value = formatSplitAmt(sale.so_tien_tien_mat||0);
  document.getElementById('split-ck').value = formatSplitAmt(sale.so_tien_chuyen_khoan||0);
  document.getElementById('split-ht-row').style.display = sale.hinh_thuc === 'ca_hai' ? 'flex' : 'none';
  document.getElementById('inp-giamgia').value = (sale.giam_gia || 0) * 1000 || '';
  document.getElementById('inp-ghichu').value = sale.ghi_chu || '';

  const tbody = document.getElementById('item-list');
  tbody.innerHTML = '';
  (sale.items || []).forEach(it => {
    addRow();
    const tr = tbody.querySelector('.item-row:last-child');
    if (it.product_id) tr.dataset.productId = it.product_id;
    if (it.don_vi) tr.dataset.donVi = it.don_vi;
    tr.querySelector('.sel-product').value = `${it.ma_hang || ''} ${it.ten || it.mo_ta || ''} (${it.trong_luong || 0} chỉ)`.trim().replace(/\s+/g, ' ');
    tr.querySelector('.inp-mahang').value = it.ma_hang || '';
    tr.querySelector('.inp-mota').value = it.ten || it.mo_ta || '';
    tr.querySelector('.inp-tuoi').value = it.loai_vang || it.tuoi || '';
    tr.querySelector('.inp-tl').value = it.trong_luong || 0;
    tr.querySelector('.inp-klda').value = it.kl_da || 0;
    tr.querySelector('.inp-klvang').value = it.kl_vang || 0;
    tr.querySelector('.inp-dg').value = (it.don_gia || 0) * 1000;
    tr.querySelector('.inp-tienda').value = (it.tien_da || 0) * 1000;
    tr.querySelector('.inp-tiencong').value = (it.tien_cong || 0) * 1000;
    recalcRow(tr.querySelector('.inp-tl'));
  });
  if (!(sale.items || []).length) addRow();
  recalcTotal();

  editingSaleId = sale.id;
  editingTrangThai = sale.trang_thai || 'hoan_thanh';

  const banner = document.getElementById('edit-banner');
  const btnDraft = document.getElementById('btn-draft');
  const btnSubmit = document.getElementById('btn-submit');
  if (editingTrangThai === 'nhap') {
    document.getElementById('edit-banner-text').textContent = `✏️ Đang sửa hóa đơn nháp #${sale.ma_hd}`;
    btnDraft.classList.remove('hidden');
    btnDraft.textContent = '💾 Cập nhật nháp';
    btnSubmit.textContent = '✅ Hoàn tất hóa đơn';
  } else {
    document.getElementById('edit-banner-text').textContent = `✏️ Đang sửa hóa đơn #${sale.ma_hd}`;
    btnDraft.classList.add('hidden');
    btnSubmit.textContent = _posApprovalMode ? '📤 Gửi Duyệt' : '💾 Cập nhật hóa đơn';
    btnSubmit.style.background = _posApprovalMode ? 'linear-gradient(135deg,#1d4ed8,#2563eb)' : '';
  }
  banner.classList.remove('hidden');
  document.getElementById('sale-msg').textContent = '';
  document.getElementById('print-link').classList.add('hidden');
  banner.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function cancelEdit() {
  resetCart();
  document.getElementById('sale-msg').textContent = '';
  document.getElementById('print-link').classList.add('hidden');
}

// ── Xuất hóa đơn điện tử ──────────────────────────────────
let _eiSaleId = null;
let _eiCachedDraft = null;
let _eiCachedPaymentOpts = [];
let _eiCachedLookupErr = '';
let _eiPendingPayload = null;
let _eiCachedCertSerial = '';
let _eiCachedNextInvoiceNo = '';
const _eiTaxOptions = ['KCT', '0', '5', '8', '10', 'KKKNT', 'KHAC'];

let _EI_BANKS = [];  // danh sách NH đồng bộ từ MB Bank (mảng chuỗi tên đầy đủ MB)
fetch('/api/mb-banks').then(r => r.json()).then(d => { _EI_BANKS = d.banks || []; }).catch(() => {});
window.addEventListener('mb_banks_ready', e => { _EI_BANKS = e.detail || []; });

function _eiFilterBanks() {
  const inp = document.getElementById('ei-f-bankName');
  const box = document.getElementById('ei-bank-suggest');
  if (!inp || !box) return;
  const _bdNH = s => (s||'').normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/đ/g,'d').replace(/Đ/g,'D').toLowerCase();
  const q = _bdNH(inp.value.trim());
  if (!q) { box.classList.add('hidden'); box.innerHTML = ''; return; }
  if (_EI_BANKS.length === 0) {
    box.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400 leading-relaxed">Chưa có danh sách NH từ MB Bank.<br>Hãy bấm <b>"📋 Đồng bộ NH"</b> trên trang MB Bank một lần.</div>';
    box.classList.remove('hidden');
    return;
  }
  const hits = _EI_BANKS.filter(name => _bdNH(name).includes(q)).slice(0, 12);
  if (!hits.length) { box.classList.add('hidden'); box.innerHTML = ''; return; }
  const options = hits.map((name, i) => {
    const option = document.createElement('div');
    option.className = 'px-3 py-2 cursor-pointer hover:bg-blue-50 text-sm border-b border-gray-100 last:border-0 ei-bank-opt';
    option.dataset.bi = String(i);
    const label = document.createElement('span');
    label.className = 'font-semibold text-gray-800';
    label.textContent = name;
    option.appendChild(label);
    return option;
  });
  box._hits = hits;
  box.replaceChildren(...options);
  box.classList.remove('hidden');
}

document.addEventListener('click', function(e) {
  const box = document.getElementById('ei-bank-suggest');
  if (!box) return;
  const opt = e.target.closest('.ei-bank-opt');
  if (opt) {
    const b = box._hits && box._hits[+opt.dataset.bi];
    if (b) { const inp = document.getElementById('ei-f-bankName'); if (inp) inp.value = b; }
    box.classList.add('hidden'); box.innerHTML = '';
    return;
  }
  if (!e.target.closest('#ei-bank-suggest') && !e.target.closest('#ei-f-bankName')) {
    box.classList.add('hidden');
  }
});

function _eiEsc(s) {
  return String(s == null ? '' : s)
    .replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function _eiTaxLabel(t) {
  return t === 'KCT' ? 'KCT (không chịu thuế)'
       : t === 'KKKNT' ? 'KKKNT (không kê khai)'
       : t === 'KHAC' ? 'Khác' : `${t}%`;
}

function closeEinvoiceModal() {
  document.getElementById('einvoice-modal').classList.add('hidden');
}

async function xuatHoaDonDienTu(loai_phieu, id) {
  if (loai_phieu !== 'ban') {
    alert('Chức năng xuất hóa đơn điện tử hiện áp dụng cho phiếu bán hàng.');
    return;
  }
  _eiSaleId = id;
  try {
    const res = await fetch(`/api/einvoice/sales/${id}?pin=${encodeURIComponent(getPin())}`);
    const data = await res.json();
    if (!data.success) { alert('❌ ' + (data.error || 'Lỗi tải dữ liệu')); return; }
    if (!data.configured) { alert('⚠️ Chưa cấu hình HĐDT. Vào trang Công thức để cấu hình.'); return; }
    const payload = data.draft || {};
    let encoded = '';
    try {
      encoded = btoa(unescape(encodeURIComponent(JSON.stringify(Object.assign({}, payload, { saleId: id })))))
        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
    } catch(_) {}
    window.open('https://hoadon.msinvoice.vn/customer/invoice/hdbh-pos/create' + (encoded ? '#msidata-' + encoded : ''), '_blank');
  } catch (e) {
    alert('❌ Lỗi kết nối: ' + (e.message || e));
  }
}

function _eiRenderIssued(rec) {
  const body = document.getElementById('ei-modal-body');
  const pl = rec.payload || {};
  const resp = rec.response || {};
  const items = pl.productItems || [];
  const rid = rec.id || '';
  let itemRows = '';
  let total = 0;
  items.forEach((it, i) => {
    const amt = parseFloat(it.amountTotal || 0);
    total += amt;
    itemRows += `<tr>
      <td class="text-center px-2 py-1 text-xs border border-gray-200">${i+1}</td>
      <td class="px-2 py-1 text-xs border border-gray-200">${_eiEsc(it.itemName || it.description || '—')}</td>
      <td class="text-center px-2 py-1 text-xs border border-gray-200">${_eiEsc(it.quantityUomDesc || '')}</td>
      <td class="text-center px-2 py-1 text-xs border border-gray-200">${it.quantity || 1}</td>
      <td class="text-right px-2 py-1 text-xs border border-gray-200 font-semibold">${_fmtMoney(amt)}</td>
    </tr>`;
  });
  const discount = parseFloat(pl.discountAmount || 0);
  const grandTotal = total - discount;
  const invNo = resp.invoiceNo || resp.invoiceNumber || rec.invoice_id || '—';
  const maCQT = resp.taxAuthCode || resp.maCQT || '';
  const maTraCuu = resp.lookupCode || resp.maTraCuu || '';
  const dropId = 'eid-' + rid;
  const dropItems = rid ? `
    <button onclick="_eiDropAction('pdf',${rid})" class="ei-di">📄 Tải hóa đơn PDF</button>
    <button onclick="_eiDropAction('paper',${rid})" class="ei-di">📋 Chuyển thành HĐ giấy</button>
    <div class="ei-ds"></div>
    <button onclick="_eiDropAction('replace',${rid})" class="ei-di">🔄 Thay thế hóa đơn</button>
    <button onclick="_eiDropAction('adj_full',${rid})" class="ei-di">✏ Điều chỉnh hóa đơn</button>
    <button onclick="_eiDropAction('adj_keep',${rid})" class="ei-di">✏ Điều chỉnh giữ nguyên hàng hóa</button>
    <button onclick="_eiDropAction('adj_dec',${rid})" class="ei-di">📉 Điều chỉnh giảm toàn bộ</button>
    <div class="ei-ds"></div>
    <button onclick="_eiDropAction('paid',${rid})" class="ei-di">✅ Đánh dấu đã thanh toán</button>
    <div class="ei-ds"></div>
    <button onclick="_eiDropAction('journal',${rid})" class="ei-di">📋 Xem nhật kí hóa đơn</button>
    <button onclick="_eiDropAction('duplicate',${rid})" class="ei-di">📑 Nhân bản hóa đơn</button>
    <div class="ei-ds"></div>
    <button onclick="_eiDropAction('cancel',${rid})" class="ei-di" style="color:#dc2626">🗑 Hủy hóa đơn</button>
    <div class="ei-ds"></div>
    <button onclick="_eiDropAction('delete_local',${rid})" class="ei-di" style="color:#9ca3af">🔁 Xóa bản ghi & xuất mới</button>
  ` : '';
  body.innerHTML = `
    <style>
      .ei-di{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:sans-serif}
      .ei-di:hover{background:#f3f4f6}
      .ei-ds{height:1px;background:#e5e7eb;margin:2px 0}
      .ei-drop{display:none;position:absolute;right:0;top:calc(100% + 4px);background:white;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);min-width:240px;z-index:200;overflow:hidden}
      .ei-drop.open{display:block}
    </style>
    <div class="space-y-3">
      <div class="flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2">
        <span class="text-lg">🔐</span>
        <div>
          <div class="text-xs font-bold text-emerald-800">Đã ký bằng chữ ký số điện tử</div>
          <div class="text-[10px] text-emerald-600">Theo Nghị định 123/2020/NĐ-CP</div>
        </div>
        <span class="ml-auto text-[10px] font-mono text-emerald-700">${_eiEsc(invNo)}</span>
      </div>
      <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs bg-gray-50 rounded-lg px-3 py-2">
        <div><span class="font-semibold text-gray-500">Mẫu/Ký hiệu:</span> ${_eiEsc(rec.invoice_form||'—')}/${_eiEsc(rec.invoice_serial||'—')}</div>
        <div><span class="font-semibold text-gray-500">Thời gian xuất:</span> ${_eiEsc(rec.created_at||'—')}</div>
        <div><span class="font-semibold text-gray-500">Người mua:</span> ${_eiEsc(pl.toName||pl.toPartyName||'—')}</div>
        ${maCQT ? `<div><span class="font-semibold text-gray-500">Mã CQT:</span> <span class="font-mono">${_eiEsc(maCQT)}</span></div>` : '<div></div>'}
        ${maTraCuu ? `<div class="col-span-2"><span class="font-semibold text-gray-500">Mã tra cứu:</span> <span class="font-mono">${_eiEsc(maTraCuu)}</span></div>` : ''}
      </div>
      ${items.length ? `<table class="w-full border-collapse text-xs">
        <thead><tr class="bg-gray-100">
          <th class="px-2 py-1 border border-gray-200 text-center w-8">STT</th>
          <th class="px-2 py-1 border border-gray-200 text-left">Tên hàng</th>
          <th class="px-2 py-1 border border-gray-200 text-center">ĐVT</th>
          <th class="px-2 py-1 border border-gray-200 text-center">SL</th>
          <th class="px-2 py-1 border border-gray-200 text-right">Thành tiền</th>
        </tr></thead>
        <tbody>${itemRows}</tbody>
        <tfoot>
          ${discount > 0 ? `<tr><td colspan="4" class="text-right px-2 py-1 text-xs border border-gray-200 font-semibold">Giảm giá:</td><td class="text-right px-2 py-1 text-xs border border-gray-200 text-red-600">− ${_fmtMoney(discount)}</td></tr>` : ''}
          <tr class="bg-amber-50"><td colspan="4" class="text-right px-2 py-1 text-xs font-bold border border-gray-200">Tổng cộng:</td><td class="text-right px-2 py-1 text-xs font-black border border-gray-200 text-amber-700">${_fmtMoney(grandTotal)}</td></tr>
        </tfoot>
      </table>` : ''}
      <div class="flex flex-wrap gap-2 pt-2 border-t justify-between items-center">
        <div class="flex gap-2 flex-wrap items-center">
          ${rid ? `<a href="/pos/einvoice/${rid}" target="_blank" class="inline-flex items-center text-xs px-3 py-2 bg-blue-600 text-white rounded-lg font-semibold">🔍 Xem đầy đủ</a>` : ''}
          ${rid ? `<a href="/api/einvoice/records/${rid}/download-xml" class="inline-flex items-center text-xs px-3 py-2 bg-green-50 border border-green-200 text-green-700 rounded-lg font-semibold">⬇ XML</a>` : ''}
          <button onclick="_eiOpenMsiFromIssued()" class="inline-flex items-center text-xs px-3 py-2 bg-indigo-50 border border-indigo-200 text-indigo-700 rounded-lg font-semibold">🌐 Mở msinvoice</button>
          ${rid ? `<button onclick="_eiSendEmail(${rid})" class="text-xs px-3 py-2 bg-white border border-blue-200 text-blue-700 rounded-lg font-semibold">📧 Gửi mail</button>` : ''}
          ${rid ? `<div style="position:relative;display:inline-block"><button onclick="event.stopPropagation();document.getElementById('${dropId}').classList.toggle('open')" class="text-xs px-3 py-2 bg-gray-100 text-gray-700 rounded-lg font-semibold">··· ▾</button><div id="${dropId}" class="ei-drop">${dropItems}</div></div>` : ''}
        </div>
        <button onclick="closeEinvoiceModal()" class="btn-ios btn-ios-secondary text-gray-600 px-4 py-2 text-sm">Đóng</button>
      </div>
    </div>
  `;
  document.addEventListener('click', function _hd() {
    const m = document.getElementById(dropId);
    if (m) m.classList.remove('open');
    document.removeEventListener('click', _hd);
  });
}

async function _eiDropAction(action, rid) {
  const pin = getPin() || await hoiPin('Xác nhận thao tác hóa đơn điện tử');
  if (!pin) return;
  const post = async (url, extra) => {
    const r = await fetch(url, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({pin,...(extra||{})})});
    return r.json();
  };
  if (action === 'pdf') { location.href = `/api/einvoice/records/${rid}/download-pdf`; return; }
  if (action === 'paper') {
    if (!confirm('Chuyển thành hóa đơn giấy?')) return;
    const d = await post(`/api/einvoice/records/${rid}/convert-to-paper`);
    alert(d.success ? '✅ Đã chuyển.' : '❌ ' + (d.error||d.message||'Thất bại'));
  } else if (action === 'replace') {
    const reason = prompt('Lý do thay thế:'); if (!reason) return;
    const d = await post(`/api/einvoice/records/${rid}/replace`, {reason});
    if (d.success) { alert('✅ Đã tạo hóa đơn thay thế.'); if (d.new_record_id) window.open(`/pos/einvoice/${d.new_record_id}`,'_blank'); }
    else alert('❌ ' + (d.error||d.message||'Thất bại'));
  } else if (action === 'adj_full' || action === 'adj_keep' || action === 'adj_dec') {
    const typeMap = {adj_full:'full', adj_keep:'keep_goods', adj_dec:'decrease_all'};
    const reason = prompt('Lý do điều chỉnh:'); if (!reason) return;
    const d = await post(`/api/einvoice/records/${rid}/adjust`, {reason, adjust_type: typeMap[action]});
    if (d.success) { alert('✅ Đã tạo hóa đơn điều chỉnh.'); if (d.new_record_id) window.open(`/pos/einvoice/${d.new_record_id}`,'_blank'); }
    else alert('❌ ' + (d.error||d.message||'Thất bại'));
  } else if (action === 'paid') {
    const d = await post(`/api/einvoice/records/${rid}/payment-status`, {is_paid: true});
    alert(d.success ? '✅ Đã đánh dấu thanh toán.' : '❌ ' + (d.error||'Thất bại'));
  } else if (action === 'journal') {
    try {
      const r = await fetch(`/api/einvoice/records/${rid}/journal`);
      const d = await r.json();
      const txt = (d.entries||[]).map(e=>`• ${e.action||e.type||'—'} — ${e.time||e.createdAt||''}`).join('\n') || 'Không có lịch sử.';
      alert('Nhật kí hóa đơn:\n' + txt);
    } catch { alert('Không tải được nhật kí.'); }
  } else if (action === 'duplicate') {
    if (!confirm('Nhân bản hóa đơn này?')) return;
    const d = await post(`/api/einvoice/records/${rid}/duplicate`);
    if (d.success && d.new_record_id) { alert('✅ Đã nhân bản.'); window.open(`/pos/einvoice/${d.new_record_id}`,'_blank'); }
    else alert(d.success ? '✅ Thành công.' : '❌ ' + (d.error||'Thất bại'));
  } else if (action === 'cancel') {
    if (!confirm('Xác nhận HỦY hóa đơn?\nKhông thể hoàn tác.')) return;
    const reason = prompt('Lý do hủy:', 'Hủy theo yêu cầu'); if (reason === null) return;
    const d = await post(`/api/einvoice/records/${rid}/cancel`, {reason: reason||'Hủy theo yêu cầu'});
    if (d.success) { alert(d.warning ? `Đã hủy. Lưu ý: ${d.warning}` : '✅ Đã hủy.'); closeEinvoiceModal(); }
    else alert('❌ ' + (d.error||d.message||'Thất bại'));
  } else if (action === 'delete_local') {
    if (!confirm('Xóa bản ghi HĐDT này khỏi hệ thống cục bộ?\n\nLưu ý: chỉ xóa dữ liệu trên máy, không hủy trên hệ thống thuế. Sau khi xóa có thể xuất hóa đơn mới.')) return;
    const r = await fetch(`/api/einvoice/records/${rid}`, {
      method: 'DELETE', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({pin})
    });
    const d = await r.json();
    if (d.success) {
      xuatHoaDonDienTu(_eiSaleId);
    } else {
      alert('❌ ' + (d.error||'Xóa thất bại'));
    }
  }
}

function _fmtMoney(n) {
  return Number(n).toLocaleString('vi-VN') + ' đ';
}

async function _eiCancelInvoice(recordId) {
  if (!confirm('Xác nhận HỦY hóa đơn điện tử này?\nHành động này không thể hoàn tác.')) return;
  const reason = prompt('Lý do hủy:', 'Hủy theo yêu cầu khách hàng');
  if (reason === null) return;
  const pin = getPin() || await hoiPin('Xác nhận thao tác hóa đơn điện tử');
  if (!pin) return;
  const res = await fetch(`/api/einvoice/records/${recordId}/cancel`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({pin, reason: reason || 'Hủy theo yêu cầu'})
  });
  const data = await res.json();
  if (data.success) {
    alert(data.warning ? `Đã hủy (lưu ý: ${data.warning})` : 'Đã hủy hóa đơn thành công.');
  } else {
    alert('❌ ' + (data.message || data.error || 'Hủy thất bại'));
  }
}

async function _eiSendEmail(recordId) {
  const email = prompt('Nhập email để gửi hóa đơn điện tử:', '');
  if (!email || !email.includes('@')) return;
  const pin = getPin() || await hoiPin('Xác nhận thao tác hóa đơn điện tử');
  if (!pin) return;
  const res = await fetch(`/api/einvoice/records/${recordId}/send-email`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({pin, email})
  });
  const data = await res.json();
  if (data.success) alert('✅ Đã gửi HĐĐT qua email: ' + email);
  else alert('❌ ' + (data.message || data.error || 'Gửi thất bại'));
}

const _LBL = 'block text-xs font-semibold text-gray-500 uppercase mb-1';

function _eiRenderForm(draft, paymentOptions, lookupError) {
  if (!paymentOptions || !paymentOptions.length) {
    paymentOptions = [
      { value: 'PiCash', label: 'Tiền mặt' },
      { value: 'PiWireTransfer', label: 'Chuyển khoản' },
      { value: 'PiCashOrWireTransfer', label: 'Tiền mặt / Chuyển khoản' },
      { value: 'PmtClearingDebt', label: 'Đối trừ công nợ' },
    ];
  }
  const body = document.getElementById('ei-modal-body');
  // "YYYY-MM-DD HH:MM:SS" -> "YYYY-MM-DDTHH:MM" (cho input datetime-local)
  const dt = (draft.invoiceDate || '').replace(' ', 'T').slice(0, 16);

  body.innerHTML = `
    ${lookupError ? `<div class="text-xs text-amber-600 bg-amber-50 rounded-xl px-3 py-2">⚠️ Không tải được danh mục từ nhà cung cấp (${_eiEsc(lookupError)}) — dùng danh mục mặc định, vẫn có thể xuất hóa đơn.</div>` : ''}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div><label class="${_LBL}">Mẫu số</label><input id="ei-f-invoiceForm" class="input-ios-sm w-full" value="${_eiEsc(draft.invoiceForm)}"></div>
      <div><label class="${_LBL}">Ký hiệu</label><input id="ei-f-invoiceSerial" class="input-ios-sm w-full" value="${_eiEsc(draft.invoiceSerial)}"></div>
      <div><label class="${_LBL}">Ngày hóa đơn</label><input id="ei-f-invoiceDate" type="datetime-local" class="input-ios-sm w-full" value="${dt}"></div>
      <div>
        <label class="${_LBL}">Số hóa đơn</label>
        <input id="ei-f-invoiceNo" class="input-ios-sm w-full font-mono" placeholder="VD: 00001154 (để trống = IAM tự cấp)"
          value="${_eiEsc(_eiCachedNextInvoiceNo || draft.invoiceNo || '')}">
        <div class="text-xs text-gray-400 mt-0.5">${_eiCachedNextInvoiceNo ? '🔢 Số tiếp theo (có thể sửa)' : 'Chưa có dữ liệu — IAM sẽ tự cấp số'}</div>
      </div>
      <div><label class="${_LBL}">Số tham chiếu (mã HĐ nội bộ)</label><input id="ei-f-thirdPartyCode" class="input-ios-sm w-full" value="${_eiEsc(draft.thirdPartyCode)}"></div>
      <div><label class="${_LBL}">Họ tên người mua</label><input id="ei-f-toName" class="input-ios-sm w-full" value="${_eiEsc(draft.toName)}"></div>
      <div>
        <label class="${_LBL}">Số CCCD / CMND</label>
        <input id="ei-f-buyerIdCard" class="input-ios-sm w-full font-mono" placeholder="Số CCCD người mua"
          value="${_eiEsc(draft.buyerIdCard)}"
          oninput="var m=document.getElementById('ei-f-toPartyTaxId');if(!m._edited)m.value=this.value;">
        <div class="text-xs text-gray-400 mt-0.5">Tự điền từ số CCCD đã nhập khi tạo hóa đơn</div>
      </div>
      <div>
        <label class="${_LBL}">MST người mua</label>
        <input id="ei-f-toPartyTaxId" class="input-ios-sm w-full font-mono" placeholder="Để trống nếu là doanh nghiệp (điền sau)"
          value="${_eiEsc(draft.toPartyTaxId)}"
          oninput="this._edited=true;">
        <div class="text-xs text-gray-400 mt-0.5">Cá nhân: tự điền = CCCD (có thể sửa) · Doanh nghiệp: để trống</div>
      </div>
      <div><label class="${_LBL}">Tên đơn vị (nếu xuất cho công ty)</label><input id="ei-f-toPartyName" class="input-ios-sm w-full" value="${_eiEsc(draft.toPartyName)}"></div>
      <div><label class="${_LBL}">Số hộ chiếu (người nước ngoài)</label><input id="ei-f-buyerPassport" class="input-ios-sm w-full font-mono" placeholder="Để trống nếu là người Việt Nam" value="${_eiEsc(draft.buyerPassport || '')}"></div>
      <div><label class="${_LBL}">Điện thoại</label><input id="ei-f-toTelecomNumber" class="input-ios-sm w-full" value="${_eiEsc(draft.toTelecomNumber)}"></div>
      <div><label class="${_LBL}">Email nhận hóa đơn</label><input id="ei-f-toEmailAddress" type="email" class="input-ios-sm w-full" value="${_eiEsc(draft.toEmailAddress)}"></div>
      <div><label class="${_LBL}">Địa chỉ</label><input id="ei-f-toAddress" class="input-ios-sm w-full" value="${_eiEsc(draft.toAddress)}"></div>
      <div><label class="${_LBL}">Hình thức thanh toán</label>
        <select id="ei-f-paymentInstrumentEnumId" class="input-ios-sm w-full">
          ${paymentOptions.map(o => `<option value="${_eiEsc(o.value)}" ${o.value === draft.paymentInstrumentEnumId ? 'selected' : ''}>${_eiEsc(o.label)}</option>`).join('')}
        </select>
      </div>
      <div><label class="${_LBL}">Số tài khoản NH</label><input id="ei-f-accountNumber" class="input-ios-sm w-full" value="${_eiEsc(draft.accountNumber)}"></div>
      <div><label class="${_LBL}">Ngân hàng</label><div class="relative"><input id="ei-f-bankName" class="input-ios-sm w-full" placeholder="Gõ tên ngân hàng..." autocomplete="off" value="${_eiEsc(draft.bankName)}" oninput="_eiFilterBanks()" onfocus="_eiFilterBanks()"><div id="ei-bank-suggest" class="hidden absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-48 overflow-y-auto"></div></div></div>
      <div class="sm:col-span-2"><label class="${_LBL}">Ghi chú</label><input id="ei-f-note" class="input-ios-sm w-full" placeholder="Ghi chú trên hóa đơn (nếu có)" value="${_eiEsc(draft.note)}"></div>
      <div><label class="${_LBL}">Giảm giá toàn hóa đơn (đ)</label>
        <input id="ei-f-discountAmount" type="number" step="any" class="input-ios-sm w-full" value="${draft.discountAmount || 0}">
      </div>
    </div>

    <div class="rounded-2xl border border-gray-100 overflow-x-auto mt-2">
      <table class="w-full text-xs">
        <thead class="bg-gray-50 text-gray-400 uppercase">
          <tr>
            <th class="text-left px-2 py-1.5">Mã HHDV</th>
            <th class="text-left px-2 py-1.5">Tên hàng hóa / dịch vụ</th>
            <th class="px-2 py-1.5">ĐVT</th>
            <th class="px-2 py-1.5">Loại SP</th>
            <th class="px-2 py-1.5">SL</th>
            <th class="px-2 py-1.5">Đơn giá</th>
            <th class="px-2 py-1.5">Thuế suất</th>
            <th class="px-2 py-1.5">Thành tiền</th>
            <th class="px-2 py-1.5">Tiền thuế</th>
            <th class="px-2 py-1.5"></th>
          </tr>
        </thead>
        <tbody id="ei-items-tbody"></tbody>
      </table>
    </div>
    <button type="button" onclick="_eiAddItemRow(); _eiRecalcFooter();" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5">+ Thêm dòng</button>

    <div class="flex flex-col items-end gap-1 text-sm pt-1">
      <div>Tổng tiền hàng (trước thuế): <span id="ei-sum-total" class="font-semibold">0</span> đ</div>
      <div>Tổng tiền thuế: <span id="ei-sum-tax" class="font-semibold">0</span> đ</div>
      <div class="text-lg font-bold text-amber-700">Tổng cộng: <span id="ei-sum-grand">0</span> đ</div>
    </div>

    <div id="ei-form-msg" class="text-sm"></div>
    <div class="flex items-center justify-between gap-2 pt-2 border-t flex-wrap">
      <button onclick="_eiOpenMsinvoice()" class="btn-ios text-xs px-3 py-2" style="background:#1d4ed8;color:#fff;border-radius:8px;font-weight:600">🌐 Mở msinvoice.vn</button>
      <div class="flex gap-2">
        <button onclick="closeEinvoiceModal()" class="btn-ios btn-ios-secondary text-gray-600 px-4 py-2 text-sm">Hủy</button>
        <button onclick="_eiSubmit()" class="btn-ios btn-ios-gold px-5 py-2 text-sm">👁 Xem trước hóa đơn</button>
      </div>
    </div>
  `;

  (draft.productItems || []).forEach(it => _eiAddItemRow(it));
  if (!(draft.productItems || []).length) _eiAddItemRow();
  document.getElementById('ei-f-discountAmount').addEventListener('input', _eiRecalcFooter);
  _eiRecalcFooter();
}

function _eiAddItemRow(item) {
  item = item || {
    description: '', itemName: '', quantityUomDesc: 'sản phẩm', quantity: 1,
    amount: 0, amountTotal: 0, taxRate: 'KCT', taxAmount: 0,
  };
  const tbody = document.getElementById('ei-items-tbody');
  const tr = document.createElement('tr');
  tr.className = 'border-b border-gray-50';
  tr.innerHTML = `
    <td class="px-1 py-1"><input class="ei-it-code input-ios-sm w-24 font-mono" placeholder="Mã SP" value="${_eiEsc(item.itemCode || '')}"></td>
    <td class="px-1 py-1"><input class="ei-it-name input-ios-sm w-full" value="${_eiEsc(item.itemName || item.description || '')}"></td>
    <td class="px-1 py-1"><input class="ei-it-uom input-ios-sm w-16" value="${_eiEsc(item.quantityUomDesc || 'sản phẩm')}"></td>
    <td class="px-1 py-1"><input class="ei-it-loai input-ios-sm w-20" placeholder="VD: 9999" value="${_eiEsc(item.loaiSP || '')}"></td>
    <td class="px-1 py-1"><input type="number" step="any" class="ei-it-qty input-ios-sm w-16 text-right" value="${item.quantity ?? 1}"></td>
    <td class="px-1 py-1"><input type="number" step="any" class="ei-it-amount input-ios-sm w-28 text-right" value="${item.amount ?? 0}"></td>
    <td class="px-1 py-1">
      <select class="ei-it-tax input-ios-sm w-24">
        ${_eiTaxOptions.map(t => `<option value="${t}" ${t === (item.taxRate || 'KCT') ? 'selected' : ''}>${_eiTaxLabel(t)}</option>`).join('')}
      </select>
    </td>
    <td class="px-1 py-1"><input type="number" step="any" class="ei-it-total input-ios-sm w-28 text-right" value="${item.amountTotal ?? 0}"></td>
    <td class="px-1 py-1"><input type="number" step="any" class="ei-it-taxamt input-ios-sm w-24 text-right" value="${item.taxAmount ?? 0}"></td>
    <td class="px-1 py-1 text-center"><button type="button" class="text-red-500" title="Xóa dòng">🗑️</button></td>
  `;
  tbody.appendChild(tr);
  tr.querySelector('.ei-it-qty').addEventListener('input', () => _eiRecalcRow(tr, false));
  tr.querySelector('.ei-it-amount').addEventListener('input', () => _eiRecalcRow(tr, false));
  tr.querySelector('.ei-it-total').addEventListener('input', () => _eiRecalcRow(tr, true));
  tr.querySelector('.ei-it-tax').addEventListener('change', () => _eiRecalcRow(tr, false));
  tr.querySelector('td:last-child button').addEventListener('click', () => { tr.remove(); _eiRecalcFooter(); });
}

function _eiRecalcRow(tr, fromTotal) {
  const qty = parseFloat(tr.querySelector('.ei-it-qty').value) || 0;
  let amount = parseFloat(tr.querySelector('.ei-it-amount').value) || 0;
  let total = parseFloat(tr.querySelector('.ei-it-total').value) || 0;
  if (fromTotal) {
    amount = qty ? Math.round((total / qty) * 100) / 100 : total;
    tr.querySelector('.ei-it-amount').value = amount;
  } else {
    total = Math.round(amount * qty * 100) / 100;
    tr.querySelector('.ei-it-total').value = total;
  }
  const rate = parseFloat(tr.querySelector('.ei-it-tax').value);
  const taxAmt = isNaN(rate) ? 0 : Math.round(total * rate) / 100;
  tr.querySelector('.ei-it-taxamt').value = taxAmt;
  _eiRecalcFooter();
}

function _eiRecalcFooter() {
  let sumTotal = 0, sumTax = 0;
  document.querySelectorAll('#ei-items-tbody tr').forEach(tr => {
    sumTotal += parseFloat(tr.querySelector('.ei-it-total').value) || 0;
    sumTax += parseFloat(tr.querySelector('.ei-it-taxamt').value) || 0;
  });
  const discount = parseFloat(document.getElementById('ei-f-discountAmount')?.value) || 0;
  document.getElementById('ei-sum-total').textContent = fmt(sumTotal);
  document.getElementById('ei-sum-tax').textContent = fmt(sumTax);
  document.getElementById('ei-sum-grand').textContent = fmt(sumTotal - discount + sumTax);
}

function _eiCollectPayload() {
  const items = [...document.querySelectorAll('#ei-items-tbody tr')].map(tr => {
    const name = tr.querySelector('.ei-it-name').value.trim();
    return {
      description: name,
      itemName: name,
      itemCode: tr.querySelector('.ei-it-code').value.trim(),
      quantityUomDesc: tr.querySelector('.ei-it-uom').value.trim() || 'sản phẩm',
      loaiSP: tr.querySelector('.ei-it-loai').value.trim(),
      quantity: parseFloat(tr.querySelector('.ei-it-qty').value) || 0,
      amount: parseFloat(tr.querySelector('.ei-it-amount').value) || 0,
      amountTotal: parseFloat(tr.querySelector('.ei-it-total').value) || 0,
      taxRate: tr.querySelector('.ei-it-tax').value,
      taxAmount: parseFloat(tr.querySelector('.ei-it-taxamt').value) || 0,
      discountPercent: 0,
      discountAmount: 0,
      isPromotion: 'N',
      itemClassTypeEnumId: 'IiclsProduct',
    };
  });

  const taxGroups = {};
  items.forEach(it => {
    const g = taxGroups[it.taxRate] || { taxRate: it.taxRate, taxAmount: 0, amountExcludeTax: 0, amountTotal: 0 };
    g.taxAmount += it.taxAmount;
    g.amountExcludeTax += it.amountTotal;
    g.amountTotal += it.amountTotal + it.taxAmount;
    taxGroups[it.taxRate] = g;
  });

  const discountAmount = parseFloat(document.getElementById('ei-f-discountAmount').value) || 0;
  const dt = document.getElementById('ei-f-invoiceDate').value;
  const invoiceDate = dt ? dt.replace('T', ' ') + ':00' : '';

  return {
    invoiceForm: document.getElementById('ei-f-invoiceForm').value.trim(),
    invoiceSerial: document.getElementById('ei-f-invoiceSerial').value.trim(),
    invoiceNo: (document.getElementById('ei-f-invoiceNo') || {}).value?.trim() || '',
    invoiceDate,
    toPartyName: document.getElementById('ei-f-toPartyName').value.trim(),
    toName: document.getElementById('ei-f-toName').value.trim(),
    buyerIdCard: document.getElementById('ei-f-buyerIdCard').value.trim(),
    buyerPassport: document.getElementById('ei-f-buyerPassport').value.trim(),
    toPartyTaxId: document.getElementById('ei-f-toPartyTaxId').value.trim()
               || document.getElementById('ei-f-buyerIdCard').value.trim(),
    toAddress: document.getElementById('ei-f-toAddress').value.trim(),
    toEmailAddress: document.getElementById('ei-f-toEmailAddress').value.trim(),
    toTelecomNumber: document.getElementById('ei-f-toTelecomNumber').value.trim(),
    accountNumber: document.getElementById('ei-f-accountNumber').value.trim(),
    bankName: document.getElementById('ei-f-bankName').value.trim(),
    paymentInstrumentEnumId: document.getElementById('ei-f-paymentInstrumentEnumId').value,
    note: document.getElementById('ei-f-note').value.trim(),
    discountTypeEnumId: discountAmount > 0 ? 'InvDiscByTotal' : 'InvDiscNotApplicable',
    discountAmount,
    discountPercent: 0,
    currencyUomId: 'VND',
    exchangeRate: 1,
    applyVatTaxExempt: 'N',
    saleTaxExemptEnumId: '',
    thirdPartyCode: document.getElementById('ei-f-thirdPartyCode').value.trim(),
    productItems: items,
    taxTotalPayments: Object.values(taxGroups).map(g => ({
      taxRate: g.taxRate, taxAmount: Math.round(g.taxAmount * 100) / 100,
      amountExcludeTax: Math.round(g.amountExcludeTax * 100) / 100,
      amountTotal: Math.round(g.amountTotal * 100) / 100,
    })),
  };
}

async function _eiSubmit() {
  const msg = document.getElementById('ei-form-msg');
  if (!document.querySelectorAll('#ei-items-tbody tr').length) {
    msg.textContent = '⚠️ Cần ít nhất 1 dòng hàng hóa.';
    msg.className = 'text-sm text-amber-600 font-semibold';
    return;
  }
  const payload = _eiCollectPayload();
  if (!payload.invoiceSerial) {
    msg.textContent = '⚠️ Vui lòng nhập Ký hiệu hóa đơn (có thể cấu hình sẵn ở trang Công thức).';
    msg.className = 'text-sm text-amber-600 font-semibold';
    return;
  }
  _eiPendingPayload = payload;
  _eiShowPreview(payload);
}

function _eiInvoiceTitle(payload) {
  const s = (payload.invoiceSerial || '').trim();
  const f = (payload.invoiceForm || '').trim();
  if (s.startsWith('2') || f === '2' || f.includes('GTTT') || f.includes('02')) return 'HÓA ĐƠN BÁN HÀNG';
  if (s.startsWith('1') || f === '1' || f.includes('GTKT') || f.includes('01')) return 'HÓA ĐƠN GIÁ TRỊ GIA TĂNG';
  return 'HÓA ĐƠN BÁN HÀNG';
}

async function _eiShowPreview(payload) {
  const body = document.getElementById('ei-modal-body');
  body.innerHTML = '<div class="text-center text-gray-400 py-10" style="font-family:sans-serif">⏳ Đang tạo bản xem trước hóa đơn...</div>';
  try {
    const res = await fetch('/api/einvoice/preview-html', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ payload })
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const html = await res.text();
    const blob = new Blob([html], { type: 'text/html; charset=utf-8' });
    const blobUrl = URL.createObjectURL(blob);
    body.innerHTML = `
      <div style="display:flex;flex-direction:column;gap:10px;padding:12px 16px 8px;font-family:sans-serif">
        <!-- Bản in hóa đơn -->
        <iframe src="${blobUrl}" style="width:100%;height:500px;border:1px solid #e5e7eb;border-radius:8px;background:#fff"
          onload="try{URL.revokeObjectURL('${blobUrl}')}catch(e){}"></iframe>
        <!-- Form xác thực chữ ký số -->
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 14px;font-size:13px;color:#166534">
          <div style="font-weight:700;margin-bottom:8px">🔐 Xác thực chữ ký số điện tử</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
            <div>
              <label style="font-size:11.5px;font-weight:600;color:#374151;display:block;margin-bottom:3px">Chứng thư số</label>
              <input id="ei-cert-serial-input" type="text" value="${_eiEsc(_eiCachedCertSerial)}"
                placeholder="Số serial chứng thư số"
                style="width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;font-family:monospace;color:#1f2937;box-sizing:border-box">
              <div style="font-size:10.5px;color:#166534;font-weight:600;margin-top:3px">{{ brand.ten_phap_nhan_ngan }}</div>
              <div style="font-size:10px;color:#6b7280">{% if brand.mst %}MST: {{ brand.mst }} · {% endif %}ONE-CA SHA-256</div>
            </div>
            <div>
              <label style="font-size:11.5px;font-weight:600;color:#374151;display:block;margin-bottom:3px">Mật khẩu chứng thư số <span style="color:#dc2626">*</span></label>
              <input id="ei-cert-password-input" type="password"
                placeholder="Nhập mật khẩu / PIN token"
                autocomplete="off"
                style="width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#1f2937;box-sizing:border-box">
              <div style="font-size:10.5px;color:#6b7280;margin-top:2px">Bắt buộc — không được lưu lại</div>
            </div>
          </div>
        </div>
        <!-- Nút hành động -->
        <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
          <button onclick="_eiGoBack()" class="btn-ios px-4 py-2 text-sm" style="background:#6b7280;color:#fff;border-radius:8px">← Sửa lại</button>
          <button onclick="_eiOpenMsinvoice()" class="btn-ios px-4 py-2 text-sm" style="background:#1d4ed8;color:#fff;border-radius:8px;font-weight:600">🌐 Mở msinvoice</button>
          <button onclick="_eiDoIssue()" class="btn-ios btn-ios-gold px-5 py-2 text-sm">🔐 Xác nhận & Ký điện tử</button>
        </div>
        <div id="ei-form-msg" class="text-sm text-gray-400 text-center"></div>
      </div>`;
  } catch (e) {
    body.innerHTML = `
      <div style="text-align:center;padding:30px;font-family:sans-serif">
        <div style="color:#dc2626;margin-bottom:14px">❌ Không tạo được bản xem trước: ${_eiEsc(e.message)}</div>
        <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
          <button onclick="_eiGoBack()" class="btn-ios px-4 py-2 text-sm" style="background:#6b7280;color:#fff;border-radius:8px">← Sửa lại</button>
          <button onclick="_eiOpenMsinvoice()" class="btn-ios px-4 py-2 text-sm" style="background:#1d4ed8;color:#fff;border-radius:8px;font-weight:600">🌐 Mở msinvoice</button>
          <button onclick="_eiDoIssue()" class="btn-ios btn-ios-gold px-5 py-2 text-sm">🔐 Ký điện tử (bỏ qua xem trước)</button>
        </div>
        <div id="ei-form-msg" class="text-sm text-gray-400 text-center mt-2"></div>
      </div>`;
  }
}

function _eiGoBack() {
  _eiRenderForm(_eiCachedDraft, _eiCachedPaymentOpts, _eiCachedLookupErr);
}

function _eiOpenMsiFromIssued() {
  const payload = _eiCachedDraft || {};
  _eiOpenMsiWithCallback(payload, _eiSaleId, false);
}

async function _eiOpenMsinvoice() {
  let payload;
  if (_eiPendingPayload) {
    payload = _eiPendingPayload;
  } else {
    try { payload = _eiCollectPayload(); } catch(e) { payload = _eiCachedDraft || {}; }
  }

  const encoded = await _eiOpenMsiWithCallback(payload, _eiSaleId, true);
  if (!encoded) return;
  _eiShowMsinvoicePanel(payload, encoded);
}

async function _eiOpenMsiWithCallback(payload, saleId, showPanel) {
  const popup = window.open('about:blank', '_blank');
  if (!popup) {
    if (showPanel) _eiShowMsinvoicePanel(payload, '');
    return '';
  }
  let callbackToken = '';
  if (saleId) {
    try {
      const r = await fetch('/api/einvoice/ext-callback-token/' + encodeURIComponent(saleId), {method: 'POST'});
      const d = await r.json();
      if (!r.ok || !d.token) throw new Error(d.error || 'Không cấp được mã xác thực');
      callbackToken = d.token;
    } catch (_) {
      popup.close();
      if (showPanel) _eiShowMsinvoicePanel(payload, '');
      return '';
    }
  }
  let encoded = '';
  try {
    const urlPayload = Object.assign({}, payload, { saleId: saleId, callbackToken: callbackToken });
    encoded = btoa(unescape(encodeURIComponent(JSON.stringify(urlPayload))))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
  } catch(_) {}
  if (!encoded) {
    popup.close();
    return '';
  }
  popup.location.href = 'https://hoadon.msinvoice.vn/customer/invoice/hdbh-pos/create#msidata-' + encoded;
  return encoded;
}

function _eiShowMsinvoicePanel(payload, encoded) {
  const body = document.getElementById('ei-modal-body');
  const items = payload.productItems || [];
  const totalGoods = items.reduce((s, it) => s + (parseFloat(it.amountTotal)||0), 0);
  const discount = parseFloat(payload.discountAmount)||0;
  const grand = totalGoods - discount;

  // Bookmarklet: toàn bộ logic inline, đọc dữ liệu từ URL hash — không fetch localhost
  const bkHref = "javascript:(async function(){var h=location.hash,m=h.match(/msidata-([A-Za-z0-9_-]+)/);if(!m){alert('Khong co du lieu.\\nMo lai tu POS: HDDT > Mo msinvoice');return;}var b=m[1].replace(/-/g,'+').replace(/_/g,'/');while(b.length%4)b+='=';var p;try{p=JSON.parse(decodeURIComponent(escape(atob(b))));}catch(e){alert('Loi giai ma: '+e.message);return;}await new Promise(r=>setTimeout(r,800));function sv(el,v){if(!el||(!v&&v!==0))return false;var pr=el.tagName==='TEXTAREA'?HTMLTextAreaElement.prototype:HTMLInputElement.prototype,d=Object.getOwnPropertyDescriptor(pr,'value');d&&d.set?d.set.call(el,v):el.value=v;['input','change'].forEach(t=>el.dispatchEvent(new Event(t,{bubbles:true})));return true;}function q(){for(var i=0;i<arguments.length;i++){try{var e=document.querySelector(arguments[i]);if(e)return e;}catch(x){}}return null;}var ok=[],no=[];function fill(lbl,val){if(!val&&val!==0)return;var ss=Array.prototype.slice.call(arguments,2);if(sv(q.apply(null,ss),val))ok.push(lbl);else no.push(lbl);}fill('Ho ten',p.toName,'[formcontrolname=\"buyerName\"]','[formcontrolname=\"toName\"]','[formcontrolname=\"nameBuyer\"]','[formcontrolname=\"buyerNameText\"]','input[placeholder*=\"nguoi mua\"]','input[placeholder*=\"ho ten\"]');fill('CCCD',p.buyerIdCard,'[formcontrolname=\"buyerIdCard\"]','[formcontrolname=\"idCard\"]','[formcontrolname=\"cccd\"]','input[placeholder*=\"CCCD\"]','input[placeholder*=\"CMND\"]');fill('Dia chi',p.toAddress,'[formcontrolname=\"buyerAddress\"]','[formcontrolname=\"toAddress\"]','[formcontrolname=\"address\"]','input[placeholder*=\"dia chi\"]');fill('SDT',p.toTelecomNumber,'[formcontrolname=\"buyerPhone\"]','[formcontrolname=\"phone\"]','[formcontrolname=\"toTelecomNumber\"]','input[type=\"tel\"]','input[placeholder*=\"dien thoai\"]');fill('Email',p.toEmailAddress,'[formcontrolname=\"buyerEmail\"]','[formcontrolname=\"email\"]','input[type=\"email\"]');fill('Ghi chu',p.note,'[formcontrolname=\"note\"]','[formcontrolname=\"description\"]','textarea');var allF=[].slice.call(document.querySelectorAll('[formcontrolname]')).map(function(e){return e.getAttribute('formcontrolname');}).filter(function(v,i,a){return a.indexOf(v)===i;}).join(', ');var msg=ok.length?'Da dien: '+ok.join(', '):'Khong tim thay truong nao de dien.';if(no.length)msg+='\\nCan dien tay: '+no.join(', ');msg+='\\n\\n[Fields tim thay: '+(allF||'(khong co)')+']';alert(msg);})();";

  const infoFields = [
    { label: 'Họ tên người mua', v: payload.toName||'' },
    { label: 'Số CCCD / CMND', v: payload.buyerIdCard||'' },
    { label: 'Địa chỉ', v: payload.toAddress||'' },
    { label: 'Điện thoại', v: payload.toTelecomNumber||'' },
    { label: 'Email', v: payload.toEmailAddress||'' },
    { label: 'Ghi chú', v: payload.note||'' },
    { label: 'Mã HĐ nội bộ', v: payload.thirdPartyCode||'' },
  ].filter(f => f.v);

  body.innerHTML = `
    <div class="space-y-3">

      <!-- Banner: đã mở msinvoice -->
      <div class="flex items-center gap-2 px-3 py-2 bg-blue-50 border border-blue-200 rounded-xl">
        <span class="text-xl">🌐</span>
        <div class="min-w-0">
          <div class="font-bold text-blue-800 text-sm">Đã mở msinvoice.vn — Hóa đơn từ MTT</div>
          <div class="text-xs text-blue-600 truncate">Vào <b>Tạo mới</b> rồi bấm bookmark bên dưới để tự điền</div>
        </div>
        <a href="https://hoadon.msinvoice.vn/customer/invoice/hdbh-pos/create${encoded ? '#msidata-' + encoded : ''}" target="_blank"
          class="ml-auto shrink-0 text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-semibold">Mở lại ↗</a>
      </div>

      <!-- Chrome Extension: phương án chính -->
      <div class="bg-blue-50 border border-blue-200 rounded-xl px-3 py-2.5">
        <div class="text-xs font-bold text-blue-800 mb-1.5">🔌 Tự điền &amp; nhận số HĐ về POS — Cài Extension 1 lần</div>
        <div class="text-xs text-blue-700 mb-2">
          Extension chạy ngầm trên msinvoice.vn: <b>tự điền form</b> khi trang mở, và <b>tự gửi số HĐ về POS</b> sau khi ký xong.<br>
          Chỉ cài 1 lần duy nhất.
        </div>
        <div class="text-xs text-blue-800 space-y-0.5 mb-2">
          <div>① Mở Chrome → <code class="bg-blue-100 px-1 rounded">chrome://extensions</code></div>
          <div>② Bật <b>Developer mode</b> (góc trên phải)</div>
          <div>③ Bấm <b>Load unpacked</b> → chọn thư mục:</div>
          <div class="font-mono text-[10px] bg-blue-100 rounded px-2 py-1 mt-0.5 select-all break-all" id="_msi-ext-path">…/app/static/chrome-extension</div>
        </div>
        <button id="_msi-copy-path" class="text-xs px-3 py-1 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700">📋 Copy đường dẫn</button>
      </div>

      <!-- Bookmarklet: dự phòng nếu chưa cài extension -->
      <details class="bg-gray-50 border border-gray-200 rounded-xl px-3 py-2">
        <summary class="text-xs font-semibold text-gray-500 cursor-pointer select-none">⚙️ Chưa cài Extension? Dùng bookmark tạm (bấm để mở)</summary>
        <div class="mt-2 text-xs text-gray-600 mb-2">Kéo nút xanh lên <b>Bookmarks Bar</b> (1 lần). Sau đó: bấm <b>Mở lại ↗</b> → đợi form tải → click bookmark.</div>
        <div class="flex items-center gap-2 flex-wrap">
          <span id="_msi-bk-link" class="inline-block px-3 py-1.5 bg-emerald-600 text-white text-xs font-bold rounded-lg cursor-grab select-none border-2 border-dashed border-emerald-400">📌 Điền HĐDT</span>
          <span class="text-xs text-gray-400">← Kéo lên Bookmarks Bar</span>
        </div>
        ${encoded ? `<div class="text-[10px] text-emerald-600 mt-1.5">✅ Dữ liệu mã hóa sẵn trong URL</div>` : `<div class="text-[10px] text-amber-600 mt-1.5">⚠️ Không mã hóa được — đóng và mở lại</div>`}
      </details>

      <!-- Dữ liệu thủ công: copy từng trường -->
      ${infoFields.length ? `
      <div class="bg-gray-50 rounded-xl px-3 py-2">
        <div class="text-[10px] font-bold text-gray-400 uppercase mb-2">Dự phòng: Bấm 📋 để sao chép từng trường</div>
        <div id="_msi-fields"></div>
      </div>` : ''}

      ${items.length ? `
      <div>
        <div class="text-[10px] font-bold text-gray-400 uppercase mb-1.5">Hàng hóa / Dịch vụ</div>
        <div class="rounded-xl border border-gray-100 overflow-x-auto">
          <table class="w-full text-xs">
            <thead class="bg-gray-50 text-gray-400 uppercase"><tr>
              <th class="px-2 py-1.5">TT</th>
              <th class="px-2 py-1.5 text-left">Tên hàng</th>
              <th class="px-2 py-1.5">ĐVT</th>
              <th class="px-2 py-1.5">SL</th>
              <th class="px-2 py-1.5 text-right">Đơn giá (đ)</th>
              <th class="px-2 py-1.5 text-right">Thành tiền (đ)</th>
              <th class="px-2 py-1.5">Thuế</th>
              <th class="px-2 py-1.5"></th>
            </tr></thead>
            <tbody id="_msi-items"></tbody>
          </table>
        </div>
      </div>` : ''}

      <div class="bg-amber-50 border border-amber-100 rounded-xl px-3 py-2 flex items-center justify-between gap-2">
        <div>
          <div class="text-xs text-gray-500">Tổng cộng (sau giảm giá)</div>
          <div class="text-xl font-black text-amber-700">${fmt(grand)} đ</div>
          ${discount > 0 ? `<div class="text-xs text-gray-400">Đã trừ giảm giá: ${fmt(discount)} đ</div>` : ''}
        </div>
        <button id="_msi-btn-total" class="shrink-0 text-xs px-3 py-2 bg-amber-600 text-white rounded-lg font-semibold hover:bg-amber-700">📋 Copy số tiền</button>
      </div>

      <div class="flex justify-between pt-1 border-t">
        <button onclick="_eiGoBack()" class="text-xs px-3 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 font-medium">← Quay lại</button>
        <button onclick="closeEinvoiceModal()" class="text-xs px-3 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 font-medium">Đóng</button>
      </div>
    </div>`;

  // Gắn href bookmarklet qua JS (tránh phải HTML-encode javascript: URL)
  const bkEl = document.getElementById('_msi-bk-link');
  if (bkEl) {
    const a = document.createElement('a');
    a.href = bkHref;
    a.className = bkEl.className;
    a.textContent = bkEl.textContent;
    a.title = 'Kéo vào thanh Bookmarks Bar để cài (1 lần)';
    bkEl.replaceWith(a);
  }

  // Lấy đường dẫn extension từ server và hiển thị
  fetch('/api/einvoice/ext-path').then(r => r.json()).then(d => {
    const pathEl = document.getElementById('_msi-ext-path');
    if (pathEl && d.path) pathEl.textContent = d.path;
  }).catch(() => {});

  // Copy đường dẫn extension
  const copyPathBtn = document.getElementById('_msi-copy-path');
  if (copyPathBtn) {
    copyPathBtn.addEventListener('click', function() {
      const path = document.getElementById('_msi-ext-path')?.textContent || '';
      if (!path) return;
      navigator.clipboard.writeText(path).then(() => {
        copyPathBtn.textContent = '✓ Đã copy';
        setTimeout(() => { copyPathBtn.textContent = '📋 Copy đường dẫn'; }, 1800);
      });
    });
  }

  // Populate info fields with copy buttons (safe DOM — no inline onclick with user data)
  const fieldsDiv = document.getElementById('_msi-fields');
  if (fieldsDiv) {
    infoFields.forEach(f => {
      const row = document.createElement('div');
      row.className = 'flex items-center justify-between gap-2 py-1.5 border-b border-gray-100 last:border-0';
      const left = document.createElement('div');
      const lbl = document.createElement('div');
      lbl.className = 'text-[10px] text-gray-400 font-semibold uppercase';
      lbl.textContent = f.label;
      const val = document.createElement('div');
      val.className = 'text-gray-800 font-medium';
      val.textContent = f.v;
      left.appendChild(lbl); left.appendChild(val);
      const btn = document.createElement('button');
      btn.className = 'shrink-0 text-xs px-2.5 py-1 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 font-medium';
      btn.textContent = '📋 Copy';
      btn.addEventListener('click', function() {
        navigator.clipboard.writeText(f.v).then(() => {
          btn.textContent = '✓ Đã copy';
          btn.className = btn.className.replace('blue-50 border border-blue-200 text-blue-700','green-50 border border-green-200 text-green-700');
          setTimeout(() => {
            btn.textContent = '📋 Copy';
            btn.className = btn.className.replace('green-50 border border-green-200 text-green-700','blue-50 border border-blue-200 text-blue-700');
          }, 1500);
        });
      });
      row.appendChild(left); row.appendChild(btn);
      fieldsDiv.appendChild(row);
    });
  }

  // Populate items table
  const tbody = document.getElementById('_msi-items');
  if (tbody) {
    items.forEach((it, i) => {
      const tr = document.createElement('tr');
      tr.className = 'border-b border-gray-100';
      const name = it.itemName || it.description || '';
      tr.innerHTML = `
        <td class="py-1 px-2 text-gray-500 text-center">${i+1}</td>
        <td class="py-1 px-2">${_eiEsc(name)}</td>
        <td class="py-1 px-2 text-center">${_eiEsc(it.quantityUomDesc||'')}</td>
        <td class="py-1 px-2 text-center">${it.quantity||1}</td>
        <td class="py-1 px-2 text-right font-mono">${fmt(it.amount||0)}</td>
        <td class="py-1 px-2 text-right font-mono font-semibold">${fmt(it.amountTotal||0)}</td>
        <td class="py-1 px-2 text-center">${_eiEsc(it.taxRate||'KCT')}</td>
        <td class="py-1 px-2"><button class="text-xs px-1.5 bg-blue-50 border border-blue-200 text-blue-700 rounded">📋 tên</button></td>`;
      tbody.appendChild(tr);
      tr.querySelector('button').addEventListener('click', function() {
        navigator.clipboard.writeText(name).then(() => {
          this.textContent = '✓'; setTimeout(() => { this.textContent = '📋 tên'; }, 1200);
        });
      });
    });
  }

  // Total copy button
  const btnTotal = document.getElementById('_msi-btn-total');
  if (btnTotal) {
    btnTotal.addEventListener('click', function() {
      navigator.clipboard.writeText(String(Math.round(grand))).then(() => {
        this.textContent = '✓ Đã copy';
        setTimeout(() => { this.textContent = '📋 Copy số tiền'; }, 1500);
      });
    });
  }
}

async function _eiDoIssue() {
  const msg = document.getElementById('ei-form-msg');
  const payload = _eiPendingPayload;
  if (!payload) return;

  const certSerial   = (document.getElementById('ei-cert-serial-input')?.value || '').trim();
  const certPassword = (document.getElementById('ei-cert-password-input')?.value || '').trim();
  if (!certPassword) {
    msg.textContent = '⚠️ Vui lòng nhập mật khẩu chứng thư số trước khi ký.';
    msg.className = 'text-sm text-amber-600 font-semibold';
    document.getElementById('ei-cert-password-input')?.focus();
    return;
  }

  msg.textContent = '🔐 Đang xác thực chứng thư số & phát hành hóa đơn điện tử...';
  msg.className = 'text-sm text-gray-400';
  let rawText = '';
  try {
    const res = await fetch(`/api/einvoice/sales/${_eiSaleId}/issue`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin: getPin(), payload, cert_serial: certSerial, cert_password: certPassword })
    });
    rawText = await res.text();
    let data;
    try { data = JSON.parse(rawText); }
    catch (_) {
      msg.innerHTML = `❌ Server trả về HTTP ${res.status} (không phải JSON).<br>`
        + `<span style="font-size:11px;color:#888">Khởi động lại server rồi thử lại. Nội dung: ${_eiEsc(rawText.slice(0,200))}</span>`;
      msg.className = 'text-sm text-red-600 font-semibold';
      return;
    }
    if (data.success) {
      _eiRenderIssued({
        id: data.record_id, invoice_id: data.invoiceId, invoice_form: payload.invoiceForm,
        invoice_serial: payload.invoiceSerial, created_at: new Date().toLocaleString('vi-VN'),
        response: data.response, payload: payload,
      });
    } else if (data.queued) {
      msg.textContent = '⏳ ' + (data.message || 'Đã xếp vào hàng đợi gửi lại khi có kết nối.');
      msg.className = 'text-sm text-amber-600 font-semibold';
    } else if (data.error === 'wrong_pin') {
      msg.textContent = '❌ Sai mã PIN (nhập PIN ở góc trên).';
      msg.className = 'text-sm text-red-600 font-semibold';
    } else {
      const _errMsg = data.message || data.error || 'Xuất hóa đơn thất bại.';
      msg.innerHTML = `❌ ${_eiEsc(_errMsg)}`;
      if (_errMsg.includes('mẫu hóa đơn') || _errMsg.includes('hdbh-pos') || _errMsg.includes('MTT')) {
        msg.innerHTML += `<br><button onclick="_eiOpenMsinvoice()" style="margin-top:8px;display:inline-block;background:#1d4ed8;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;cursor:pointer;font-weight:600">🌐 Mở msinvoice.vn để tạo thủ công</button>`;
      }
      msg.className = 'text-sm text-red-600 font-semibold';
    }
  } catch (e) {
    msg.textContent = '❌ Lỗi mạng: ' + (e.message || e);
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── Modal kiểm tra / xem lại hóa đơn ─────────────────────
async function viewSale(id) {
  const res = await fetch(`/api/pos/sales/${id}`);
  const data = await res.json();
  if (!data.success) { alert('Không tìm thấy hóa đơn.'); return; }
  const s = data.sale;
  document.getElementById('vm-mahd').textContent = s.ma_hd;

  const itemsHtml = (s.items || []).map((it, idx) => `
    <tr class="border-b border-gray-50">
      <td class="px-2 py-1.5 text-center">${idx + 1}</td>
      <td class="px-2 py-1.5">${_hx(it.ma_hang || '—')}</td>
      <td class="px-2 py-1.5">${_hx(it.ten || it.mo_ta || '—')}</td>
      <td class="px-2 py-1.5 text-center">${_hx(it.tuoi || '—')}</td>
      <td class="px-2 py-1.5 text-right">${fmt(it.trong_luong)}</td>
      <td class="px-2 py-1.5 text-right">${fmt(it.kl_da)}</td>
      <td class="px-2 py-1.5 text-right">${fmt(it.kl_vang)}</td>
      <td class="px-2 py-1.5 text-right">${fmt((it.don_gia||0) * 1000)}</td>
      <td class="px-2 py-1.5 text-right">${fmt((it.tien_cong||0) * 1000)}</td>
      <td class="px-2 py-1.5 text-right">${fmt((it.tien_da||0) * 1000)}</td>
      <td class="px-2 py-1.5 text-right font-semibold">${fmt((it.thanh_tien||0) * 1000)}</td>
    </tr>`).join('') || '<tr><td colspan="11" class="text-center text-gray-300 py-4">Không có dòng hàng</td></tr>';

  const tongSauGiam = (s.tong_tien || 0) * 1000;
  const giamGia = (s.giam_gia || 0) * 1000;
  const tongTruocGiam = tongSauGiam + giamGia;
  const hinhThucLabel = s.hinh_thuc === 'chuyen_khoan' ? '🏦 Chuyển khoản'
    : s.hinh_thuc === 'ca_hai'
      ? `🔀 TM/CK (💵 ${fmt(s.so_tien_tien_mat||0)} + 🏦 ${fmt(s.so_tien_chuyen_khoan||0)})`
      : '💵 Tiền mặt';

  document.getElementById('vm-body').innerHTML = `
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 bg-amber-50 rounded-2xl p-3.5">
      <div><span class="font-semibold text-gray-500">Loại giao dịch:</span> ${s.loai === 'ban' ? '🟢 Bán hàng' : '🔴 Mua hàng'}</div>
      <div><span class="font-semibold text-gray-500">Thời gian:</span> ${_hx(s.ngay || '—')}</div>
      <div><span class="font-semibold text-gray-500">Khách hàng:</span> ${_hx(s.khach_hang || '—')}</div>
      <div><span class="font-semibold text-gray-500">Số CCCD:</span> ${_hx(s.cccd_khach || '—')}</div>
      <div><span class="font-semibold text-gray-500">Địa chỉ:</span> ${_hx(s.dia_chi_khach || '—')}</div>
      <div><span class="font-semibold text-gray-500">Điện thoại:</span> ${_hx(s.dien_thoai_khach || '—')}</div>
      <div><span class="font-semibold text-gray-500">Hình thức TT:</span> ${hinhThucLabel}</div>
      <div><span class="font-semibold text-gray-500">Ghi chú:</span> ${_hx(s.ghi_chu || '—')}</div>
    </div>
    <div class="rounded-2xl border border-gray-100 overflow-x-auto">
      <table class="w-full text-xs">
        <thead class="bg-gray-50 text-gray-400 uppercase">
          <tr>
            <th class="px-2 py-1.5">#</th>
            <th class="text-left px-2 py-1.5">Mã SP</th>
            <th class="text-left px-2 py-1.5">Tên sản phẩm</th>
            <th class="px-2 py-1.5">HLV%</th>
            <th class="text-right px-2 py-1.5">T.Lượng</th>
            <th class="text-right px-2 py-1.5">T.L đá</th>
            <th class="text-right px-2 py-1.5">T.L vàng</th>
            <th class="text-right px-2 py-1.5">Đơn giá</th>
            <th class="text-right px-2 py-1.5">Tiền công</th>
            <th class="text-right px-2 py-1.5">Tiền đá</th>
            <th class="text-right px-2 py-1.5">Thành tiền</th>
          </tr>
        </thead>
        <tbody>${itemsHtml}</tbody>
      </table>
    </div>
    <div class="flex flex-col items-end gap-1 text-sm pt-1">
      <div>Tổng tiền hàng: <span class="font-semibold">${fmt(tongTruocGiam)} đ</span></div>
      <div>Giảm giá: <span class="font-semibold">${fmt(giamGia)} đ</span></div>
      <div class="text-lg font-bold text-amber-700">Tổng thanh toán: ${fmt(tongSauGiam)} đ</div>
    </div>
  `;

  const printLink = document.getElementById('vm-print-link');
  const printRemoteBtn = document.getElementById('vm-print-remote-btn');
  const receiptLink = document.getElementById('vm-receipt-link');
  const receiptRemoteBtn = document.getElementById('vm-receipt-remote-btn');
  const invoiceLink = document.getElementById('vm-invoice-link');
  const invoiceRemoteBtn = document.getElementById('vm-invoice-remote-btn');
  if (s.loai === 'ban') {
    invoiceLink.href = `/pos/sales/${s.id}/hoa-don`;
    invoiceLink.classList.remove('hidden');
    invoiceRemoteBtn.onclick = () => printRemote(`/pos/sales/${s.id}/hoa-don`, invoiceRemoteBtn);
    invoiceRemoteBtn.classList.remove('hidden');
    printLink.href = `/pos/sales/${s.id}/print`;
    printLink.classList.remove('hidden');
    printRemoteBtn.onclick = () => printRemote(`/pos/sales/${s.id}/print`, printRemoteBtn);
    printRemoteBtn.classList.remove('hidden');
    receiptLink.href = `/pos/sales/${s.id}/receipt`;
    receiptLink.classList.remove('hidden');
    receiptRemoteBtn.onclick = () => printRemote(`/pos/sales/${s.id}/receipt`, receiptRemoteBtn);
    receiptRemoteBtn.classList.remove('hidden');
  } else {
    printLink.classList.add('hidden');
    printRemoteBtn.classList.add('hidden');
    receiptLink.classList.add('hidden');
    receiptRemoteBtn.classList.add('hidden');
    invoiceLink.classList.add('hidden');
    invoiceRemoteBtn.classList.add('hidden');
  }

  const exportExcelLink = document.getElementById('vm-export-excel-link');
  if (s.loai === 'ban') {
    exportExcelLink.href = `/api/pos/products/export-from-sale/${s.id}`;
    exportExcelLink.classList.remove('hidden');
  } else {
    exportExcelLink.classList.add('hidden');
  }

  const revertBtn = document.getElementById('vm-revert-btn');
  const canRevert = s.trang_thai === 'hoan_thanh' && (_myRole === 'giam_doc' || _myRole === 'pho_giam_doc');
  if (canRevert) {
    revertBtn.classList.remove('hidden');
    revertBtn.onclick = () => revertSale(s.id, s.ma_hd);
  } else {
    revertBtn.classList.add('hidden');
    revertBtn.onclick = null;
  }

  const deleteBtn = document.getElementById('vm-delete-btn');
  const canDelete = s.trang_thai === 'hoan_thanh' && (_myRole === null || _myRole === 'giam_doc' || _myRole === 'pho_giam_doc');
  if (canDelete) {
    deleteBtn.classList.remove('hidden');
    deleteBtn.onclick = () => deleteCompletedSale(s.id, s.ma_hd);
  } else {
    deleteBtn.classList.add('hidden');
    deleteBtn.onclick = null;
  }

  _viewedSale = s;
  const exchangeBtn = document.getElementById('vm-exchange-btn');
  const canExchange = s.loai === 'ban' && s.trang_thai === 'hoan_thanh' &&
                      (_myRole === null || _myRole === 'giam_doc' || _myRole === 'pho_giam_doc') &&
                      (s.items || []).length > 0;
  if (canExchange) {
    exchangeBtn.classList.remove('hidden');
    exchangeBtn.onclick = () => openExchangeModal(s);
  } else {
    exchangeBtn.classList.add('hidden');
    exchangeBtn.onclick = null;
  }

  document.getElementById('view-modal').classList.remove('hidden');
}

function closeViewModal() {
  document.getElementById('view-modal').classList.add('hidden');
}

// ── Modal Đổi hàng ────────────────────────────────────────
let _exSale = null;
let _exOldItem = null;

function openExchangeModal(s) {
  _exSale = s;
  _exOldItem = null;
  document.getElementById('ex-mahd').textContent = s.ma_hd;
  const sel = document.getElementById('ex-old-item');
  sel.innerHTML = (s.items || []).map((it, idx) =>
    `<option value="${idx}">${_hx(it.ten || it.mo_ta || 'SP #' + (idx + 1))} — ${fmt((it.thanh_tien || 0) * 1000)}đ</option>`
  ).join('');

  // Mượn nguyên mẫu dòng hàng "Tìm sản phẩm tồn kho" của giỏ hàng chính (rowTemplate())
  // để tận dụng đúng logic tính giá theo trọng lượng/tuổi vàng đã có sẵn — không viết
  // lại công thức tính tiền lần thứ 2 (tránh sai lệch giữa 2 nơi tính cùng 1 việc).
  document.getElementById('ex-item-container').innerHTML = rowTemplate();
  const row = document.querySelector('#ex-item-container .item-row');
  row.querySelector('.stt-cell').textContent = '🆕';
  row.querySelector('.item-head button').style.display = 'none'; // không cho xóa dòng duy nhất này
  row.querySelectorAll('.inp-tl,.inp-klda,.inp-klvang,.inp-dg,.inp-tiencong,.inp-tienda')
    .forEach(el => el.addEventListener('input', updateExchangeDiff));
  row.querySelector('.sel-product').addEventListener('input', updateExchangeDiff);

  document.getElementById('ex-hinhthuc').value = 'tien_mat';
  document.getElementById('ex-split-tm').value = '';
  document.getElementById('ex-split-ck').value = '';
  onExHtttChange();
  document.getElementById('ex-ghichu').value = '';
  document.getElementById('exchange-msg').textContent = '';

  onExOldItemChange();
  document.getElementById('view-modal').classList.add('hidden');
  document.getElementById('exchange-modal').classList.remove('hidden');
}

function closeExchangeModal() {
  document.getElementById('exchange-modal').classList.add('hidden');
  document.getElementById('view-modal').classList.remove('hidden');
}

function onExOldItemChange() {
  const idx = parseInt(document.getElementById('ex-old-item').value);
  _exOldItem = (_exSale.items || [])[idx] || null;
  document.getElementById('ex-old-gia').textContent = fmt((_exOldItem?.thanh_tien || 0) * 1000) + ' đ';
  updateExchangeDiff();
}

function onExHtttChange() {
  document.getElementById('ex-split-row').style.display = document.getElementById('ex-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}

function updateExchangeDiff() {
  const row = document.querySelector('#ex-item-container .item-row');
  const box = document.getElementById('ex-chenh-lech');
  const label = document.getElementById('ex-chenh-lech-label');
  if (!row || !_exOldItem) { box.textContent = '0 đ'; label.textContent = ''; return; }
  const klVang   = parseFloat(row.querySelector('.inp-klvang').value) || 0;
  const dg       = parseFloat(row.querySelector('.inp-dg').value) || 0;
  const tienDa   = parseFloat(row.querySelector('.inp-tienda').value) || 0;
  const tienCong = parseFloat(row.querySelector('.inp-tiencong').value) || 0;
  const newThanhTienDong = klVang * dg + tienDa + tienCong;
  const oldThanhTienDong = (_exOldItem.thanh_tien || 0) * 1000;
  const chenh = newThanhTienDong - oldThanhTienDong;
  box.textContent = (chenh >= 0 ? '+' : '') + fmt(chenh) + ' đ';
  label.textContent = chenh > 0 ? 'Khách cần trả thêm phần chênh lệch'
    : chenh < 0 ? 'Cần hoàn lại phần chênh lệch cho khách' : 'Không phát sinh chênh lệch';
  document.getElementById('ex-httt-wrap').style.display = Math.abs(chenh) > 0.5 ? 'block' : 'none';
}

async function confirmExchange() {
  const msg = document.getElementById('exchange-msg');
  if (!_exOldItem) { msg.textContent = '⚠️ Vui lòng chọn món hàng cần đổi.'; msg.className = 'text-sm text-amber-600'; return; }
  const row = document.querySelector('#ex-item-container .item-row');
  const tl = parseFloat(row.querySelector('.inp-tl').value) || 0;
  const dg = parseFloat(row.querySelector('.inp-dg').value) || 0;
  const mota   = row.querySelector('.inp-mota').value.trim();
  const maHang = row.querySelector('.inp-mahang').value.trim();
  const tuoi   = row.querySelector('.inp-tuoi').value.trim();
  const klDa   = parseFloat(row.querySelector('.inp-klda').value) || 0;
  const klVang = parseFloat(row.querySelector('.inp-klvang').value) || 0;
  const tienDa   = parseFloat(row.querySelector('.inp-tienda').value) || 0;
  const tienCong = parseFloat(row.querySelector('.inp-tiencong').value) || 0;
  if (tl <= 0 && dg <= 0 && !mota && !maHang) {
    msg.textContent = '⚠️ Vui lòng chọn/nhập sản phẩm mới.'; msg.className = 'text-sm text-amber-600'; return;
  }
  const new_item = {
    product_id: row.dataset.productId ? parseInt(row.dataset.productId) : null,
    mo_ta: mota, trong_luong: tl, don_gia: dg / 1000,
    thanh_tien: (klVang * dg + tienDa + tienCong) / 1000,
    ma_hang: maHang, ten: mota, tuoi: tuoi,
    tien_da: tienDa / 1000, tien_cong: tienCong / 1000,
    kl_da: klDa, kl_vang: klVang, don_vi: row.dataset.donVi || '',
  };
  const httt = document.getElementById('ex-hinhthuc').value;
  showPinConfirm(
    `🔄 Xác nhận đổi hàng — HĐ #${_exSale.ma_hd}`,
    `Sản phẩm cũ sẽ được nhập lại kho, sản phẩm mới bị đánh dấu đã bán, và chênh lệch giá sẽ được ghi vào sổ quỹ. Thao tác này không thể hoàn tác.`,
    '🔄 Xác nhận',
    async (pin) => {
      const res = await fetch(`/api/pos/sales/${_exSale.id}/exchange`, {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
          pin,
          old_item_id: _exOldItem.id,
          new_item,
          hinh_thuc_tt: httt,
          so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('ex-split-tm') : 0,
          so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('ex-split-ck') : 0,
          ghi_chu: document.getElementById('ex-ghichu').value.trim(),
        })
      });
      const d = await res.json();
      if (!d.success) {
        document.getElementById('pcm-err').textContent =
          d.error === 'wrong_pin' ? '❌ Sai mã PIN'
          : d.error === 'forbidden_role' ? '❌ Không đủ quyền (cần GĐ/PGĐ + PIN)'
          : d.error === 'san_pham_moi_khong_con_hang' ? '❌ Sản phẩm mới không còn trong tồn kho'
          : `❌ Lỗi: ${d.error}`;
        return;
      }
      closePinConfirm();
      document.getElementById('exchange-modal').classList.add('hidden');
      document.getElementById('view-modal').classList.add('hidden');
      loadSales(); loadProducts();
      alert(`✅ Đổi hàng thành công. Chênh lệch: ${fmt((d.chenh_lech || 0) * 1000)}đ`);
    }
  );
}

// ── PIN: dùng bàn phím số CHUNG của app (_pin_modal.html).
//    showPinConfirm(tiêu đề, mô tả, nhãn nút, hàm xử lý) vẫn gọi y như cũ —
//    bản dùng chung đã có sẵn hàm này (kể cả cách báo lỗi qua #pcm-err).

// ── Hoàn lại hóa đơn (chỉ Giám đốc / Phó Giám đốc) ────────
function revertSale(id, maHd) {
  showPinConfirm(
    `↩️ Hoàn lại hóa đơn #${maHd}`,
    `Sản phẩm sẽ được nhập lại kho và bút toán sổ quỹ sẽ được đảo ngược. Thao tác này không thể hoàn tác.`,
    '↩️ Xác nhận hoàn lại',
    async (pin) => {
      const res = await fetch(`/api/pos/sales/${id}/hoan-lai`, {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ pin })
      });
      const data = await res.json();
      if (data.success) {
        closePinConfirm();
        closeViewModal();
        alert(`✅ Đã hoàn lại hóa đơn #${maHd}. Sản phẩm đã được nhập lại kho.`);
        loadProducts(); loadSales(); loadDrafts(); loadReverted();
      } else if (data.error === 'wrong_pin') {
        document.getElementById('pcm-err').textContent = '❌ Sai mã PIN.';
      } else if (data.error === 'forbidden') {
        document.getElementById('pcm-err').textContent = '❌ Chỉ Giám đốc / Phó Giám đốc mới có quyền hoàn lại hóa đơn.';
      } else if (data.error === 'not_completed') {
        document.getElementById('pcm-err').textContent = '❌ Hóa đơn không ở trạng thái hoàn tất.';
      } else {
        document.getElementById('pcm-err').textContent = `❌ Lỗi: ${data.error}`;
      }
    }
  );
}

// ── Xóa hẳn hóa đơn đã hoàn tất (chỉ Giám đốc / Phó Giám đốc) ─────────
async function deleteCompletedSale(id, maHd) {
  const canhBao = await _canhBaoXoaQuaMoc(id);
  showPinConfirm(
    `🗑️ Xóa hóa đơn #${maHd}`,
    canhBao + `Sản phẩm sẽ được nhập lại kho, bút toán sổ quỹ liên quan sẽ bị xóa và nội dung hóa đơn sẽ lưu vào Lịch sử. Thao tác này KHÔNG THỂ hoàn tác.`,
    '🗑️ Xác nhận xóa',
    async (pin) => {
      const res = await fetch(`/api/pos/sales/${id}`, {
        method: 'DELETE', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ pin })
      });
      const data = await res.json();
      if (data.success) {
        closePinConfirm();
        closeViewModal();
        alert(`✅ Đã xóa hóa đơn #${maHd}. ${data.so_sp ? data.so_sp + ' sản phẩm đã được nhập lại kho.' : ''}`);
        loadProducts(); loadSales(); loadDrafts();
      } else if (data.error === 'wrong_pin') {
        document.getElementById('pcm-err').textContent = '❌ Sai mã PIN.';
      } else if (data.error === 'forbidden_role') {
        document.getElementById('pcm-err').textContent = '❌ Chỉ Giám đốc / Phó Giám đốc mới có quyền xóa hóa đơn đã hoàn tất.';
      } else {
        document.getElementById('pcm-err').textContent = `❌ Lỗi: ${data.error}`;
      }
    }
  );
}

addRow();
loadProducts();
loadSales();
_roleReady.then(() => loadDrafts());
fetchPrices();
// Nhân viên bán hàng: đổ danh sách + TỰ CHỌN người ĐANG ĐĂNG NHẬP.
// (Trước 31/07/2026 ô này mặc định trống và lọc bỏ thử việc → 0/129 hóa đơn tháng 7 có
//  tên người bán, không tính được KPI cá nhân. Nay giữ đủ NV đang làm — kể cả thử việc,
//  vì chính sách KPI 1.1 ĐO thử việc nhưng chưa trả hoa hồng.)
window._nvMacDinh = '';   // id nhân viên khớp tài khoản đăng nhập — dùng lại khi reset form
(async () => {
  const sel = document.getElementById('sel-nhanvien');
  try {
    const [re, rp] = await Promise.all([
      fetch('/api/hr/employees?trang_thai=dang_lam'),
      fetch('/api/my-perms', {cache: 'no-store'}),
    ]);
    const d = await re.json();
    const me = await rp.json().catch(() => ({}));
    (d.employees || []).forEach(e => {
      const opt = document.createElement('option');
      opt.value = e.id;
      opt.textContent = e.ho_ten + (e.chuc_vu ? ` — ${e.chuc_vu}` : '');
      sel.appendChild(opt);
      if (me.user_id && e.nv_user_id && String(e.nv_user_id) === String(me.user_id)) {
        window._nvMacDinh = String(e.id);
      }
    });
    if (window._nvMacDinh) sel.value = window._nvMacDinh;
  } catch (err) { /* mất mạng → giữ ô trống, không chặn bán hàng */ }
})();

// Hỗ trợ máy quét QR CCCD dạng USB (gõ trực tiếp vào ô Số CCCD): tự tách
// và điền Tên khách / Số CCCD / Địa chỉ khi nhận diện đúng định dạng QR CCCD.
bindCccdScanInput('inp-khach-cccd', {ten: 'inp-khach', cccd: 'inp-khach-cccd', diachi: 'inp-khach-diachi'});

// Hỗ trợ máy quét mã vạch sản phẩm dạng USB/Bluetooth (gõ vào ô riêng rồi
// Enter): tìm sản phẩm theo Mã hàng (SKU) và tự thêm dòng hàng vào hóa đơn.
bindBarcodeScanInput('inp-scan-barcode', code => scanProductIntoRow(code));

// ── Màn hình khách: gom tên khách + giỏ hàng đang lập để hiện cho khách xem ──
// (base.html tự poll 2.5s qua window._MHK_COLLECT; server che 4 số cuối SĐT)
window._MHK_FINAL = null;
window._MHK_COLLECT = function() {
  if (window._MHK_FINAL) return window._MHK_FINAL;
  const items = [...document.querySelectorAll('#item-list .item-row')].map(tr => {
    const tuoi   = tr.querySelector('.inp-tuoi')?.value.trim() || '';
    const klVang = parseFloat(tr.querySelector('.inp-klvang')?.value) || 0;
    const dg     = parseFloat(tr.querySelector('.inp-dg')?.value) || 0;
    const cong   = parseFloat(tr.querySelector('.inp-tiencong')?.value) || 0;
    const da     = parseFloat(tr.querySelector('.inp-tienda')?.value) || 0;
    let sub = [];
    if (tuoi) sub.push('Tuổi ' + tuoi);
    if (klVang > 0) sub.push(klVang + ' chỉ' + (dg > 0 ? ' × ' + fmt(dg) + ' đ' : ''));
    if (cong > 0) sub.push('công ' + fmt(cong) + ' đ');
    if (da > 0) sub.push('đá ' + fmt(da) + ' đ');
    return {
      ten: tr.querySelector('.inp-mota').value.trim(),
      sub: sub.join(' · '),
      tt:  tr.querySelector('.inp-tt').textContent.trim(),
    };
  }).filter(i => i.ten);
  const giamGia = parseFloat(document.getElementById('inp-giamgia').value) || 0;
  const phu = [{label: 'Số món', val: String(items.length)}];
  if (giamGia > 0) phu.push({label: 'Giảm giá', val: '− ' + fmt(giamGia) + ' đ'});
  return {
    ten: document.getElementById('inp-khach').value.trim(),
    sdt: document.getElementById('inp-khach-dt').value.trim(),
    giao_dich: items.length ? {
      loai: '🛍️ Hóa đơn bán hàng', items, phu,
      tong: document.getElementById('lbl-tong').textContent + ' đ',
      tong_label: 'Tổng thanh toán',
    } : null,
  };
};
const _qrNoiDung = document.getElementById('qr-noi-dung');
const _qrHienMa = document.getElementById('qr-hien-ma');
try {
  _qrNoiDung.value = localStorage.getItem('pos_qr_noi_dung') || 'Thanh toán tiền hàng';
  _qrHienMa.checked = localStorage.getItem('pos_qr_hien_ma') !== '0';
} catch(e) {}
_qrNoiDung.addEventListener('change', () => { try { localStorage.setItem('pos_qr_noi_dung', _qrNoiDung.value.trim() || 'Thanh toán tiền hàng'); } catch(e) {} });
_qrHienMa.addEventListener('change', () => { try { localStorage.setItem('pos_qr_hien_ma', _qrHienMa.checked ? '1' : '0'); } catch(e) {} });
// Giữ tên hàm cũ cho các chỗ đang gọi (resetCart, chọn khách từ gợi ý CRM)
function _mhkPush() { if (window.mhkPushNow) setTimeout(window.mhkPushNow, 50); }
['input', 'change'].forEach(ev => {
  document.getElementById('inp-khach').addEventListener(ev, () => _mhkPush());
  document.getElementById('inp-khach-dt').addEventListener(ev, () => _mhkPush());
});
// Trên máy tính: con trỏ chờ sẵn trong ô quét ngay khi mở trang — cầm máy quét
// là bắn được luôn, không phải bấm chuột. Điện thoại thì không (tránh bật bàn phím).
if (window.matchMedia('(min-width: 768px)').matches) {
  setTimeout(() => document.getElementById('inp-scan-barcode')?.focus(), 200);
}

// ── Tìm kiếm hóa đơn ─────────────────────────────────────────────────────
var _salesSearchTimer = null, _revertedSearchTimer = null;
function _debounceSales()   { clearTimeout(_salesSearchTimer);    _salesSearchTimer    = setTimeout(hdVeDanhSach, 250); }
function _debounceReverted(){ clearTimeout(_revertedSearchTimer); _revertedSearchTimer = setTimeout(loadReverted, 350); }

// ── Autocomplete khách hàng từ CRM ────────────────────────────────────────
(function() {
  let _crmTimer = null;
  let _crmDropEl = null;   // div dropdown hiện tại
  let _crmAnchor = null;   // input đang gợi ý

  function _dropPos(inputEl) {
    const r = inputEl.getBoundingClientRect();
    return { top: r.bottom + 4, left: r.left, width: Math.max(r.width, 280) };
  }

  function _removeDrop() {
    if (_crmDropEl) { _crmDropEl.remove(); _crmDropEl = null; }
    _crmAnchor = null;
  }

  function _getOrCreateDrop(inputEl) {
    if (!_crmDropEl) {
      const d = document.createElement('div');
      d.id = '__crm-drop__';
      d.style.cssText =
        'position:fixed;z-index:99999;background:#fff;' +
        'border:1px solid #e2e8f0;border-radius:12px;' +
        'box-shadow:0 8px 28px rgba(0,0,0,.15);' +
        'max-width:440px;max-height:240px;overflow-y:auto;';
      document.body.appendChild(d);
      _crmDropEl = d;
    }
    const p = _dropPos(inputEl);
    _crmDropEl.style.top   = p.top  + 'px';
    _crmDropEl.style.left  = p.left + 'px';
    _crmDropEl.style.width = p.width + 'px';
    return _crmDropEl;
  }

  function _fillCustomer(c) {
    document.getElementById('inp-khach').value        = c.ho_ten     || '';
    document.getElementById('inp-khach-cccd').value   = c.cccd       || '';
    document.getElementById('inp-khach-diachi').value = c.dia_chi    || '';
    document.getElementById('inp-khach-dt').value     = c.dien_thoai || '';
    _removeDrop();
    if (typeof _mhkPush === 'function') _mhkPush();  // cập nhật tên đầy đủ lên Màn hình khách
  }

  function _renderDrop(customers, inputEl) {
    if (!customers.length) { _removeDrop(); return; }
    const d = _getOrCreateDrop(inputEl);
    d.innerHTML = '';
    customers.forEach(c => {
      const row = document.createElement('div');
      row.style.cssText =
        'padding:10px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;font-size:13px;line-height:1.5;';
      row.innerHTML =
        `<div style="font-weight:600;color:#1e293b">${_hx(c.ho_ten || '')}</div>` +
        `<div style="color:#94a3b8;font-size:11px">${_hx([c.dien_thoai, c.cccd, c.dia_chi].filter(Boolean).join(' · '))}</div>`;
      row.addEventListener('mousedown', e => { e.preventDefault(); _fillCustomer(c); });
      row.addEventListener('mouseover', () => row.style.background = '#fffbeb');
      row.addEventListener('mouseout',  () => row.style.background = '');
      d.appendChild(row);
    });
    window.vpPlaceDrop(d, inputEl, 280);   // định vị an toàn cho ĐT (không đè ô đang gõ)
  }

  window._crmSuggest = function(inputEl, field) {
    const q = inputEl.value.trim();
    _crmAnchor = inputEl;
    clearTimeout(_crmTimer);
    if (q.length < 1) { _removeDrop(); return; }
    _crmTimer = setTimeout(async () => {
      try {
        const res = await fetch('/api/crm/search-lite?q=' + encodeURIComponent(q));
        if (!res.ok) return;
        const data = await res.json();
        if (_crmAnchor === inputEl) _renderDrop(data.customers || [], inputEl);
      } catch(e) { console.warn('[CRM autocomplete]', e); }
    }, 180);
  };

  // KHÔNG auto-lưu khách khi mới GÕ tên (blur). Trước đây việc này tạo ra bản ghi
  // rác "chỉ có tên" (VD "nguyễn t", "nguyễn thị ánh") rồi hiện lại trong gợi ý.
  // Khách THẬT vẫn được lưu vào CRM khi HOÀN TẤT giao dịch (pos_routes: create/update
  // sale → crm_db.save_from_sale). Chỉ hiện gợi ý từ khách đã có, không tự đẻ khách mới.
  window._crmBlur = function() {
    // Delay nhỏ để mousedown trên dropdown kịp kích hoạt trước khi blur ẩn dropdown
    setTimeout(_removeDrop, 200);
  };

  // Đóng dropdown khi click ra ngoài
  document.addEventListener('click', e => {
    if (_crmDropEl && !_crmDropEl.contains(e.target)) _removeDrop();
  });
})();

// ═══ RFID:KHAY-BAN — đặt món vào khay là lên giỏ (spec 2026-07-28-rfid-design.md) ═══
// Nguyên tắc AN TOÀN TIỀN: khay chỉ THÊM món (qua đúng scanProductIntoRow — hưởng mọi
// chốt chặn giá/trùng sẵn có), KHÔNG BAO GIỜ tự xóa dòng giỏ khi tem rời khay.
(function(){
  let mo = false;                 // viên đang bung hay thu gọn
  let daThem = new Set();         // EPC đã xử lý — XÓA khi tem rời khay (xem tick())
  let daCanhBao = new Set();      // EPC đã báo (đã bán / tem lạ) — khỏi lặp toast
  let offline = 0;                // đếm lần poll thấy agent offline liên tiếp
  let coAgent = false;            // đã từng thấy agent → mới hiện cảnh báo mất kết nối

  // ── Tiếng bíp khi khay nhận được món (chủ tiệm yêu cầu 03/08/2026) ──────────
  // MẶC ĐỊNH TẮT — nhớ theo máy, bật/tắt bằng nút trong viên khay.
  // 1.9.0: bấm nút mở BỘ CHỌN CHUÔNG chung (xem + nghe thử mọi chuông, chọn Tắt, âm lượng).
  // Máy từng bật bíp ở bản cũ (rf_bip_khay='1') → mặc định "Bíp cao" như cũ; còn lại mặc định TẮT.
  const KEY_BIP = 'rf_bip_khay';
  const CHUONG_KHAY = 'rf_khay_ban';
  const _macDinhKhay = () => (localStorage.getItem(KEY_BIP) === '1' ? 'bip:cao' : 'tat');
  function bip(){ if (window.VPChuong) VPChuong.phat(CHUONG_KHAY, _macDinhKhay()); }
  function veNutBip(){
    const el = document.getElementById('rf-bip-btn');
    if (!el || !window.VPChuong) return;
    if (!el._vpch) el._vpch = VPChuong.nutChon(el, {
      khoa: CHUONG_KHAY, macDinh: _macDinhKhay(), nhan: 'Tiếng',
      tieuDe: 'Tiếng khi khay RFID nhận món', moTa: 'Kêu mỗi lần khay thêm 1 món vào giỏ. Chọn "Tắt tiếng" nếu không muốn kêu. Lưu theo máy này.',
      khiDoi: id => {
        const bat = id !== 'tat';
        el.style.background = bat ? '#dcfce7' : '#f1f5f9';
        el.style.color = bat ? '#15803d' : '#64748b';
        el.style.borderColor = bat ? '#86efac' : '#cbd5e1';
      },
    });
  }

  veNutBip();   // gắn bộ chọn ngay khi tải (nút chỉ HIỆN khi tiệm có khay)

  window.rfKhayToggle = function(){
    mo = !mo;
    document.getElementById('rf-khay-body').classList.toggle('hidden', !mo);
    veNutBip();
  };

  function pill(html, mau){
    const el = document.getElementById('rf-khay-pill');
    // Hàng chứa viên + nút tiếng: chỉ hiện khi tiệm THẬT SỰ có khay
    document.getElementById('rf-khay-row').classList.remove('hidden');
    el.style.background = mau === 'do' ? '#fef2f2' : '#faf5ff';
    el.style.borderColor = mau === 'do' ? '#fecaca' : '#ddd6fe';
    el.innerHTML = html;
    veNutBip();
  }

  let _chuKhay = null;

  // Băng trạng thái "ai đang dùng khay" + các nút Mượn / Trả / Lấy về.
  function veKhayChu(){
    const el = document.getElementById('rf-chu-khay');
    if (!el) return;
    const c = _chuKhay;
    if (!c){ el.innerHTML = ''; return; }
    // Nút đặt máy quầy LUÔN có (trừ khi chính máy này đã là máy quầy) — lỡ đánh dấu
    // nhầm máy thì còn đường sửa. Lỗi cũ 03/08/2026: chỉ hiện khi CHƯA đánh dấu
    // → đánh nhầm là máy quầy thật kẹt vĩnh viễn.
    const nutDat = c.la_may_quay ? ''
      : ' <button onclick="rfDatMayQuay()" class="tkt-act tkt-slate">📍 Đặt máy này làm máy quầy</button>';
    const nutMuon = ' <button onclick="rfMuonKhay()" class="tkt-act tkt-amber">📡 Mượn khay</button>';

    if (!c.co_may_quay){
      el.innerHTML = '<span class="text-slate-600">📡 Khay dùng chung — mọi máy đều nhận hàng</span>'
        + nutDat;
      return;
    }
    if (c.la_toi){
      el.innerHTML = c.dang_muon
        ? '<span class="text-emerald-700 font-semibold">📡 Bạn đang mượn khay</span> '
          + '<span class="text-slate-500">(còn ' + c.con_giay + 's)</span>'
          + ' <button onclick="rfTraKhay()" class="tkt-act tkt-blue">↩️ Trả khay về quầy</button>'
        : '<span class="text-emerald-700 font-semibold">📡 Khay của máy này</span>' + nutDat;
      return;
    }
    el.innerHTML = (c.dang_muon
        ? '<span class="text-amber-700">📡 Khay đang do <b>' + (c.ten_nguoi_muon || 'người khác')
          + '</b> dùng — hàng KHÔNG vào giỏ máy này</span>'
        : '<span class="text-amber-700">📡 Khay đang ở máy quầy — hàng KHÔNG vào giỏ máy này</span>')
      + nutMuon + nutDat;
  }

  async function _rfChuKhay(url, hoi){
    if (hoi && !confirm(hoi)) return;
    try {
      const r = await (await fetch(url, {method:'POST', headers:{'Content-Type':'application/json'},
                                         body:'{}'})).json();
      if (r.chu_khay){ _chuKhay = r.chu_khay; veKhayChu(); }
      if (r.error === 'forbidden_role') alert('Việc này cần Giám đốc / Phó Giám đốc.');
    } catch(e){ alert('Không gửi được yêu cầu — kiểm tra mạng.'); }
  }
  window.rfMuonKhay = () => _rfChuKhay('/api/rfid/muon-khay',
    (_chuKhay && _chuKhay.dang_muon)
      ? 'Khay đang do ' + (_chuKhay.ten_nguoi_muon || 'người khác') + ' dùng — vẫn lấy?'
      : null);
  window.rfTraKhay  = () => _rfChuKhay('/api/rfid/tra-khay');
  window.rfDatMayQuay = async function(){
    if (typeof askPin !== 'function') return alert('Cần Giám đốc đánh dấu ở máy quầy.');
    askPin('Đánh dấu MÁY NÀY là máy quầy giữ khay', async (pin) => {
      const r = await (await fetch('/api/rfid/may-quay', {method:'POST',
        headers:{'Content-Type':'application/json'}, body: JSON.stringify({pin})})).json();
      if (r.success){ _chuKhay = r.chu_khay; veKhayChu(); alert('✅ Đã đánh dấu máy này là máy quầy.'); }
      else alert('Không đánh dấu được: ' + (r.error || ''));
    });
  };

  // ── 1.9.2: GHÉP MÁY C5 LÀM ĐẦU ĐỌC BÁN HÀNG CHO MÁY NÀY ──────────────────────
  // Máy quầy: chọn 1 máy C5 → tem C5 đọc (đưa sát, công suất bán hàng) vào giỏ MÁY NÀY.
  // Trong máy C5 đang ghép: giỏ trên C5 không nhận, chỉ hiện báo + nút bỏ ghép.
  function veC5Ghep(d){
    const el = document.getElementById('rf-c5-ghep');
    if (!el) return;
    const _x = v => String(v == null ? '' : v).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    if (d.la_c5){
      el.innerHTML = d.c5_dang_ghep_quay
        ? '<span class="text-violet-700 font-semibold">🛒 Máy C5 này đang làm ĐẦU ĐỌC cho máy quầy'
          + (d.nguoi_ghep ? ' (' + _x(d.nguoi_ghep) + ' ghép)' : '') + ' — món bóp cò vào giỏ MÁY QUẦY, không vào giỏ ở đây.</span>'
          + ' <button onclick="rfGhepC5(\'\', false)" class="tkt-act tkt-slate">✂️ Bỏ ghép, bán ngay trên C5</button>'
        : '';
      return;
    }
    const ds = (d.may_c5 || []).filter(m => m.online || m.ghep_voi_toi);
    if (!ds.length){ el.innerHTML = ''; return; }
    el.innerHTML = ds.map(m => {
      const ten = _x(m.ten) + (m.app_ver ? ' · app ' + _x(m.app_ver) : '');
      const ng = _x(JSON.stringify(m.nguon));
      if (m.ghep_voi_toi)
        return '<span class="text-emerald-700 font-semibold">🔗 Đang dùng máy C5 (' + ten + ') làm đầu đọc</span>'
          + (m.online && !m.dang_lam_dau_doc
              ? ' <span class="text-amber-700">— máy C5 đang ở việc khác (kiểm kho / dò tìm / gán tem), tem chưa vào giỏ</span>' : '')
          + (!m.online ? ' <span class="text-red-600">— máy C5 mất kết nối</span>' : '')
          + ' <button onclick="rfGhepC5(' + ng + ', false)" class="tkt-act tkt-slate">✂️ Bỏ ghép</button>';
      if (!m.ho_tro_ghep)
        return '<span class="text-slate-500">📱 Máy C5 (' + ten + ') — cập nhật app C5 (nút "⬆ Bản mới") để dùng làm đầu đọc cho máy này</span>';
      return '<button onclick="rfGhepC5(' + ng + ', true, ' + (m.ghep_noi_khac ? _x(JSON.stringify(m.nguoi_ghep || 'máy khác')) : 'null') + ')"'
        + ' class="tkt-act tkt-indigo">🔗 Dùng máy C5 (' + ten + ') làm đầu đọc cho máy này</button>';
    }).join(' ');
  }
  window.rfGhepC5 = async function(nguon, bat, dangGhepNoiKhac){
    let chiem = false;
    if (bat && dangGhepNoiKhac){
      if (!confirm('Máy C5 này đang làm đầu đọc cho máy của ' + dangGhepNoiKhac + '. Chuyển sang máy này?')) return;
      chiem = true;
    }
    try {
      const r = await fetch('/api/rfid/ghep-c5', {method:'POST', headers:{'Content-Type':'application/json'},
                                                  body: JSON.stringify({nguon, bat, chiem})});
      const d = await r.json();
      if (!d.success){
        alert(d.error === 'ghep_may_khac' ? 'Máy C5 này đang ghép với máy của ' + (d.nguoi_ghep || 'người khác') + ' — bỏ ghép ở máy đó trước.'
            : d.error === 'khong_thay_may_c5' ? 'Không thấy máy C5 này — bật app VangPOS C5 trên máy rồi thử lại.'
            : 'Không ghép được: ' + (d.error || r.status));
        return;
      }
      _ban = '';                 // đánh thức vòng chờ để vẽ lại ngay
      tick(false);
    } catch(e){ alert('Không gửi được yêu cầu — kiểm tra mạng.'); }
  };

  // "CHỜ SẴN" (long-poll): gửi kèm dấu vân tay trạng thái đang giữ; máy chủ GIỮ
  // yêu cầu tới khi khay ĐỔI rồi mới trả → đặt món lên khay là hiện gần như tức
  // thì. Trước đây hỏi lặp mỗi 1,2s nên trung bình mất thêm 0,6s (03/08/2026).
  let _ban = '';
  async function tick(cho){
    if (document.visibilityState !== 'visible') return;
    let d;
    // loc=ban: máy C5 chỉ thấy tem CHÍNH NÓ đọc; máy khác bỏ tem chỉ do C5 đọc
    // (người đi kiểm kho bằng C5 không làm nhảy hàng vào giỏ ở quầy) — 26/10/2026.
    // viec=ban (1.9.2): áp ghép máy C5 làm đầu đọc cho máy quầy (chỉ trang Bán gửi)
    const u = cho ? ('/api/rfid/tray?loc=ban&viec=ban&doi=15&cho=' + encodeURIComponent(_ban))
                  : '/api/rfid/tray?loc=ban&viec=ban';
    try { d = await (await fetch(u, {cache: 'no-store'})).json(); }
    catch(e){ return; }
    _ban = d.ban || '';
    veC5Ghep(d);
    if (!d.agent_online){
      offline++;
      // Băng "ai dùng khay" VẪN vẽ khi khay mất kết nối — nếu không thì mất kết nối
      // là mất luôn nút "Đặt máy này làm máy quầy" (chủ tiệm báo 03/08/2026: F5 mà
      // không thấy nút nào, hoá ra phần mềm khay ở máy quầy đã tắt).
      _chuKhay = d.chu_khay || null;
      veKhayChu();
      // Chưa từng thấy agent (tiệm chưa lắp khay) → im lặng tuyệt đối, trang y hệt cũ
      if (coAgent && offline >= 3)
        pill('📡 <b class="text-red-600">Mất kết nối khay RFID</b> — kiểm tra agent ở máy quầy', 'do');
      return;
    }
    coAgent = true; offline = 0;
    // AI ĐANG DÙNG KHAY (chủ tiệm chốt 03/08/2026): mặc định MÁY QUẦY giữ khay;
    // ai cần thì bấm Mượn, 2 phút không đặt món nào lên khay là TỰ TRẢ về quầy;
    // máy quầy bấm "Lấy khay về" thì đòi lại ngay. Máy KHÔNG phải chủ vẫn bán
    // hàng bình thường (quét mã, gõ tay) — chỉ KHÔNG tự thêm món từ khay, tránh
    // món của người này nhảy vào giỏ người kia.
    _chuKhay = d.chu_khay || null;
    veKhayChu();
    let epcs = d.epcs || [];
    // Không phải chủ khay → không đụng giỏ bằng tem KHAY; tem từ máy C5 đã GHÉP với chính máy này
    // (1.9.2) vẫn vào giỏ — ghép là chủ ý của người đứng máy này.
    if (_chuKhay && !_chuKhay.la_toi){
      epcs = epcs.filter(e => e.tu_c5_ghep);
      if (!epcs.length) return;
    }
    // TEM RỜI KHỎI KHAY → quên đi, để lần sau đặt lại vẫn vào giỏ được.
    // (Lỗi cũ 03/08/2026: đánh dấu rồi giữ mãi → bấm ✕ xóa dòng, nhấc món ra
    //  đặt lại thì không lên nữa, phải F5 trang mới nhận.)
    const tren = new Set(epcs.map(e => e.epc));
    for (const x of [...daThem])   if (!tren.has(x)) daThem.delete(x);
    for (const x of [...daCanhBao]) if (!tren.has(x)) daCanhBao.delete(x);
    const la = [], daBan = [];
    for (const e of epcs){
      if (e.product){
        if (e.product.trang_thai === 'con_hang'){
          if (!daThem.has(e.epc)){
            daThem.add(e.epc);
            // Món ĐANG có trong giỏ thì im lặng bỏ qua — tránh 2 chuyện:
            // (1) tín hiệu chớp mất rồi hiện lại → báo "quét trùng" + rung dòng vô cớ;
            // (2) người dùng CỐ Ý bấm ✕ xóa dòng khi món còn trên khay → tôn trọng,
            //     không tự thêm lại (muốn thêm lại thì nhấc ra đặt vào).
            const dangCo = document.querySelector(
              '#item-list .item-row[data-product-id="' + e.product.id + '"]');
            if (!dangCo){
              scanProductIntoRow(e.product.ma_hang);   // hàm sẵn có: trùng/giá/cảnh báo tự lo
              bip();
            }
          }
        } else if (!daCanhBao.has(e.epc)){
          daCanhBao.add(e.epc);
          daBan.push(e.product.ma_hang);
        }
      } else if (!daCanhBao.has(e.epc)){
        la.push(e.epc);
      }
    }
    if (daBan.length)
      _scanFeedback('⛔ Món ' + daBan.join(', ') + ' ĐÃ BÁN mà đang nằm trên khay — kiểm tra lại!', '#dc2626');
    const soLa = epcs.filter(e => !e.product).length;
    pill('📡 Khay: <b>' + epcs.length + '</b> tem' +
         (soLa ? ' · <b class="text-amber-700">' + soLa + ' tem lạ</b>' : '') +
         ' <span class="text-slate-400">(' + (mo ? 'thu gọn' : 'xem') + ' ▾)</span>');
    if (mo){
      document.getElementById('rf-khay-body').innerHTML = epcs.length
        ? epcs.map(e => e.product
            ? '✔️ <b>' + e.product.ma_hang + '</b> — ' + e.product.ten +
              (e.product.trang_thai !== 'con_hang' ? ' <b class="text-red-600">(đã bán!)</b>' : '')
            : '❓ <span class="font-mono">' + e.epc + '</span> — tem chưa gán, vào <a class="underline font-bold" href="/inventory">Tồn kho → 📡 Gán tem</a>'
          ).join('<br>')
        : '— Khay trống —';
    }
  }
  // NHỊP HỎI KHAY — TỰ GIÃN RA KHI TIỆM CHƯA LẮP KHAY (sửa 29/07/2026).
  // Trước đây hỏi đều 1,2s bất kể có khay hay không = 50 lượt/phút cho một
  // tính năng chưa dùng (khay RFID chưa về). Cộng với vòng báo-duyệt 0,7s thì
  // điện thoại gọi máy chủ 2,3 lượt/GIÂY liên tục → bấm chuyển trang bị xếp
  // hàng sau chúng (đo thật, xem chú thích trong base.html).
  // NAY: đã từng thấy khay → giữ 1,2s (cần nhạy khi đặt hàng lên khay);
  // chưa từng thấy → giãn dần tới 20s (đủ để cắm khay vào là app nhận ra).
  // ĐÃ CÓ KHAY → "chờ sẵn" (long-poll): yêu cầu treo tối đa 15s, máy chủ trả NGAY
  // khoảnh khắc khay đổi → độ trễ gần bằng 0 mà số request lại ÍT HƠN hỏi lặp 1,2s.
  // CHƯA CÓ KHAY → giữ nguyên kiểu giãn dần tới 20s (không giữ kết nối vô ích).
  let _nhip = 1200;
  async function _nhipTick() {
    if (document.visibilityState === 'visible') {
      try { await tick(coAgent); } catch (e) {}
      _nhip = coAgent ? 30 : Math.min(_nhip * 1.5, 20000);
    }
    setTimeout(_nhipTick, _nhip);
  }
  setTimeout(_nhipTick, 1200);
})();
</script>
{% endblock %}