{% extends "base.html" %}
{% block title %}Đổi hàng bù tiền — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Đổi hàng bù tiền{% endblock %}

{% block content %}
<style>
  .item-row { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:8px; }
  .item-head { display:flex; align-items:center; gap:8px; padding:5px 12px; border-bottom:1px solid #e5e7eb; }
  .item-head.mua { background:linear-gradient(90deg,#ecfdf5,#f0fdf4); border-color:#d1fae5; }
  .item-head.ban { background:linear-gradient(90deg,#eff6ff,#f0f9ff); border-color:#dbeafe; }
  .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; }
  .item-mini-label { font-size:11px; color:#8a8a8e; text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:1px; }
  .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; }
  @media (max-width:640px){ .mini-field{flex-direction:column;align-items:stretch;gap:1px;} .mini-field .item-mini-label{white-space:normal;} }
  .dg-hint { display:block; width:100%; white-space:normal; }
  .stt-cell { width:24px; height:24px; border-radius:50%; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
</style>

<div class="max-w-3xl mx-auto space-y-4">

  <!-- 🔧 ĐANG SỬA -->
  <div id="edit-banner" class="hidden ios-card p-3 flex items-center justify-between gap-2" style="background:linear-gradient(90deg,#fff7ed,#ffedd5);border:1px solid #fdba74">
    <div class="text-sm font-semibold text-orange-800">✏️ Đang sửa giao dịch <span id="edit-banner-ma" class="font-mono"></span> — bấm <b>Cập nhật</b> để lưu (xóa bản cũ, tạo lại).</div>
    <button onclick="huyChinhSua()" class="text-xs font-bold text-gray-500 hover:text-gray-800 whitespace-nowrap">✕ Hủy sửa</button>
  </div>

  <!-- 👤 KHÁCH HÀNG -->
  <div class="ios-card p-4 space-y-3">
    <div class="font-extrabold text-gray-800">👤 Khách hàng</div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      <div class="relative">
        <input id="kh-ten" class="input-ios w-full" placeholder="Tên khách" autocomplete="off" data-huong-dan="doi-khach"
               oninput="khSuggest(this.value,'kh-drop');syncTenTk()" onblur="setTimeout(()=>khHideDrop('kh-drop'),200)">
        <div id="kh-drop" class="hidden absolute z-30 bg-white border border-gray-200 rounded-xl shadow-lg mt-1 w-full max-h-56 overflow-auto"></div>
      </div>
      <div class="relative">
        <input id="kh-sdt" class="input-ios w-full" placeholder="Số điện thoại" autocomplete="off" inputmode="tel"
               oninput="khSuggest(this.value,'kh-drop-sdt')" onblur="setTimeout(()=>khHideDrop('kh-drop-sdt'),200)">
        <div id="kh-drop-sdt" class="hidden absolute z-30 bg-white border border-gray-200 rounded-xl shadow-lg mt-1 w-full max-h-56 overflow-auto"></div>
      </div>
      <input id="kh-cccd" class="input-ios w-full" placeholder="CCCD" autocomplete="off">
      <input id="kh-diachi" class="input-ios w-full" placeholder="Địa chỉ" autocomplete="off">
    </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="dh-sel-nhanvien" class="input-ios w-full cursor-pointer">
        <option value="">— Chưa chọn —</option>
      </select>
    </div>
  </div>

  <!-- 🟢 KHU A: HÀNG KHÁCH BÁN CHO TIỆM (mua vào) -->
  <div class="ios-card p-4 space-y-2">
    <div class="flex items-center justify-between">
      <div class="font-extrabold text-emerald-700">🟢 Hàng khách BÁN cho tiệm <span class="text-xs font-normal text-gray-400">(tiệm mua vào — nhập kho)</span></div>
      <button onclick="addMuaRow()" class="btn-ios btn-ios-secondary text-emerald-700 text-sm font-bold px-3 py-1.5">+ Thêm món</button>
    </div>
    <div id="mua-list" data-huong-dan="doi-hang-cu"></div>
    <div class="text-right font-extrabold text-emerald-700">Tổng mua (A): <span id="tong-mua">0đ</span></div>
  </div>

  <!-- 🔵 KHU B: HÀNG KHÁCH MUA CỦA TIỆM (bán ra, y hệt trang Bán hàng) -->
  <div class="ios-card p-4 space-y-2">
    <div class="font-extrabold text-blue-700">🔵 Hàng khách MUA của tiệm <span class="text-xs font-normal text-gray-400">(tiệm bán ra — từ tồn kho)</span></div>
    <div class="flex gap-2">
      <input id="ban-scan" class="input-ios flex-1" placeholder="🔫 Quét/nhập mã hàng tồn kho rồi Enter" autocomplete="off"
             onkeydown="if(event.key==='Enter'){event.preventDefault();scanBan(this.value);this.value='';}">
      <button onclick="const e=document.getElementById('ban-scan');scanBan(e.value);e.value='';" class="btn-ios btn-ios-gold px-4 text-sm font-bold">Thêm</button>
      <button onclick="addBanRow()" class="btn-ios btn-ios-secondary text-blue-700 text-sm font-bold px-3">Nhập tay</button>
    </div>
    <div id="ban-feedback" class="text-xs font-semibold" style="min-height:14px"></div>
    <datalist id="dl-doihang-products"></datalist>
    <div id="ban-list" data-huong-dan="doi-hang-moi"></div>
    <div class="flex items-center justify-between flex-wrap gap-2 pt-1">
      <label class="text-sm text-gray-600">Giảm giá (đồng):
        <input id="ban-giamgia" class="input-ios w-32 text-right" inputmode="numeric" placeholder="0" oninput="onSplitAmtInput(this);calcBan()">
      </label>
      <div class="font-extrabold text-blue-700">Tổng bán (B): <span id="tong-ban">0đ</span></div>
    </div>
  </div>

  <!-- 💰 QUYẾT TOÁN CHÊNH LỆCH -->
  <div class="ios-card p-4 space-y-3" style="background:linear-gradient(135deg,#fffbeb,#fff7ed)">
    <div class="grid grid-cols-2 gap-2 text-center text-sm">
      <div class="rounded-xl bg-emerald-50 px-2 py-1.5"><div class="text-[11px] text-emerald-600 uppercase">Tổng mua (A)</div><div class="font-bold text-emerald-700" id="qt-a">0đ</div></div>
      <div class="rounded-xl bg-blue-50 px-2 py-1.5"><div class="text-[11px] text-blue-600 uppercase">Tổng bán (B)</div><div class="font-bold text-blue-700" id="qt-b">0đ</div></div>
    </div>
    <div id="qt-label" class="font-extrabold text-gray-800 text-center text-lg" data-huong-dan="doi-thanh-toan">Chênh lệch: 0đ</div>
    <div id="qt-box" class="space-y-2" style="display:none">
      <!-- Hình thức thanh toán — y hệt trang Bán hàng; áp cho CẢ hóa đơn bán + phiếu mua -->
      <label class="block text-sm font-semibold text-gray-600">💳 Hình thức thanh toán
        <select id="qt-httt" class="input-ios w-full cursor-pointer" onchange="onQtHtttChange()">
          <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>
      </label>
      <div id="qt-split-row" class="grid grid-cols-1 sm:grid-cols-2 gap-2" style="display:none">
        <label class="text-sm font-semibold text-gray-600">💵 Tiền mặt (đồng)
          <input id="qt-tm" class="input-ios w-full text-right" inputmode="numeric" placeholder="0" oninput="onSplitAmtInput(this);onQtInput()">
        </label>
        <label class="text-sm font-semibold text-gray-600">🏦 Chuyển khoản (đồng)
          <input id="qt-ck" class="input-ios w-full text-right" inputmode="numeric" placeholder="0" oninput="onSplitAmtInput(this);onQtInput()">
        </label>
      </div>
      <!-- Tài khoản ngân hàng nhận CK — chỉ hiện khi có Chuyển khoản (thiết kế y hệt phiếu mua hàng) -->
      <div id="qt-bank" class="rounded-xl border border-blue-100" style="display:none">
        <div class="flex items-center justify-between px-3 py-2 rounded-t-xl" style="background:linear-gradient(90deg,#eff6ff,#dbeafe)">
          <span class="font-semibold text-blue-900 text-sm">🏦 Thông tin tài khoản nhận tiền</span>
          <button type="button" class="text-[11px] font-semibold text-blue-700" onclick="openScanner('vietqr', onQtBankQrScanned)">📷 Quét QR ngân hàng của khách</button>
        </div>
        <div class="p-3 space-y-2 rounded-b-xl" style="background:#f8fbff">
          <p class="text-[11px] text-gray-400">💡 Nhờ khách mở app ngân hàng → mục <strong>Nhận tiền / QR của tôi</strong> → quét vào đây để tự điền đầy đủ thông tin.</p>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div class="relative">
              <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngân hàng</label>
              <input id="qt-nganhang" type="text" placeholder="Gõ để tìm ngân hàng..." autocomplete="off"
                class="input-ios w-full" oninput="filterBanks()" onfocus="filterBanks()">
              <input type="hidden" id="qt-nganhang-bin">
              <div id="qt-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-56 overflow-y-auto"></div>
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số tài khoản</label>
              <input id="qt-sotk" type="text" placeholder="Nhập số tài khoản" class="input-ios w-full" inputmode="numeric" autocomplete="off">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tên chủ tài khoản</label>
              <input id="qt-tentk" type="text" placeholder="Mặc định theo tên khách" class="input-ios w-full" autocomplete="off" oninput="_tentkTouched=true">
            </div>
          </div>
          <div id="qt-bank-msg" class="text-xs"></div>
        </div>
      </div>
    </div>
    <div id="qt-warn" class="text-sm font-bold text-center"></div>
    <div id="qt-readout" class="text-sm text-center text-gray-600"></div>
    <button id="btn-luu" onclick="luuDoiHang()" class="btn-ios btn-ios-gold w-full py-3 font-extrabold">💾 Lưu giao dịch đổi hàng</button>
  </div>

  <!-- KẾT QUẢ SAU LƯU -->
  <div id="ket-qua" class="ios-card p-4 space-y-2 hidden" style="background:#ecfdf5">
    <div class="font-extrabold text-emerald-700">✅ Đã lưu giao dịch <span id="kq-magd"></span></div>
    <div id="kq-tomtat" class="text-sm text-gray-700"></div>
    <div class="flex flex-wrap gap-2">
      <a id="kq-in-ban" target="_blank" class="btn-ios btn-ios-secondary text-blue-700 font-bold px-4 py-2">🖨️ In hóa đơn bán</a>
      <button id="kq-in-ban-remote" class="btn-ios btn-ios-secondary text-blue-700 font-bold px-4 py-2" 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="kq-in-mua" target="_blank" class="btn-ios btn-ios-secondary text-emerald-700 font-bold px-4 py-2">🖨️ In phiếu mua</a>
      <button id="kq-in-mua-remote" class="btn-ios btn-ios-secondary text-emerald-700 font-bold px-4 py-2" 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>
      <button onclick="resetForm()" class="btn-ios btn-ios-gold font-bold px-4 py-2">➕ Giao dịch mới</button>
    </div>
  </div>

  <!-- GẦN ĐÂY -->
  <div class="space-y-2">
    <div class="flex items-center justify-between px-1">
      <div class="font-extrabold text-gray-800">🔁 Đổi hàng gần đây</div>
      <input id="dh-search" class="input-ios text-sm" style="max-width:190px" placeholder="🔍 Tìm khách / mã..." oninput="renderRecent()" autocomplete="off">
    </div>
    <div id="dh-recent" class="space-y-2"></div>
  </div>
</div>

<!-- ── Modal CK MB ── -->
<div id="ck-mb-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,.5)" onclick="if(event.target===this)document.getElementById('ck-mb-modal').classList.add('hidden')">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-5">
    <div class="flex justify-between items-center mb-3">
      <h3 class="font-bold text-lg text-gray-800">🏦 Thông tin chuyển khoản</h3>
      <button type="button" onclick="document.getElementById('ck-mb-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">&times;</button>
    </div>
    <div id="ck-mb-qr" class="mb-1 flex justify-center"></div>
    <p id="ck-mb-qr-hint" class="hidden text-[11px] text-emerald-700 bg-emerald-50 rounded-lg px-2.5 py-1.5 mb-3 text-center leading-snug">👆 <b>Trên điện thoại:</b> nhấn giữ vào mã QR → chọn <b>Lưu ảnh</b>, rồi mở app ngân hàng (Biz MBBank hoặc bất kỳ app nào) → <b>Quét QR</b> → chọn ảnh vừa lưu. App không quét-từ-ảnh được thì nhờ điện thoại/máy khác quét trực tiếp màn hình đang hiện QR này.</p>
    <label for="ck-mb-app-select" class="block text-xs font-semibold text-gray-600 mb-1">Ứng dụng ngân hàng dùng để chuyển</label>
    <select id="ck-mb-app-select" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm mb-2"></select>
    <p class="text-[10px] text-gray-500 mb-3">Trên điện thoại, các app trong danh sách sẽ mở lệnh có sẵn thông tin. Liên kết đi qua VietQR.io; hãy kiểm tra người nhận, số tiền và nội dung trong app ngân hàng. VangPOS không gửi hay xác nhận giao dịch.</p>
    <div class="bg-gray-50 rounded-xl p-3 space-y-2.5 text-sm mb-4">
      <div class="flex justify-between items-center gap-2"><span class="text-gray-400 flex-shrink-0">Ngân hàng</span><span id="ck-mb-nganhang" class="font-semibold text-right"></span></div>
      <div class="flex justify-between items-center gap-2"><span class="text-gray-400 flex-shrink-0">Số tài khoản</span>
        <div class="flex items-center gap-1.5"><span id="ck-mb-sotk" class="font-mono font-bold text-base"></span>
          <button type="button" onclick="_copyCkField('ck-mb-sotk')" title="Copy" class="text-blue-500 hover:text-blue-700 text-base">📋</button></div></div>
      <div class="flex justify-between items-center gap-2"><span class="text-gray-400 flex-shrink-0">Tên tài khoản</span><span id="ck-mb-tentk" class="font-semibold text-right"></span></div>
      <div class="flex justify-between items-center gap-2"><span class="text-gray-400 flex-shrink-0">Số tiền</span><span id="ck-mb-sotien" class="font-bold text-green-700 text-base"></span></div>
      <div class="flex justify-between items-start gap-2"><span class="text-gray-400 flex-shrink-0">Nội dung CK</span>
        <div class="flex items-start gap-1.5"><span id="ck-mb-noidung" class="text-xs text-right leading-snug"></span>
          <button type="button" onclick="_copyCkField('ck-mb-noidung')" title="Copy" class="text-blue-500 hover:text-blue-700 text-base flex-shrink-0">📋</button></div></div>
    </div>
    <button type="button" onclick="openMBBankOnline()" class="w-full py-2.5 bg-blue-700 hover:bg-blue-800 text-white font-bold rounded-xl text-sm">🖥️ Mở MB Bank Online (máy tính — hiện chỉ hỗ trợ MB)</button>
    <a id="ck-mb-deeplink" href="#" target="_blank" rel="noopener noreferrer" class="hidden w-full py-2 mt-2 bg-white border border-gray-200 hover:bg-gray-50 text-gray-500 font-medium rounded-xl text-xs text-center">📱 Mở app ngân hàng trên điện thoại</a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/ngan-hang-nguon.js') }}"></script>
<script src="{{ url_for('static', filename='js/qr-chuyen-khoan.js') }}"></script>
<script src="{{ url_for('static', filename='js/nguon-goc.js') }}?v=1"></script>
<script>
const fmt = n => Number(Math.round(n||0)).toLocaleString('vi-VN');
const fmtD = n => fmt(n) + 'đ';
const WEIGHT_UNITS = ['Chỉ','chỉ','Gram','gram'];
let _products = [];          // hàng con_hang
let _priceMap = {};          // { "9999": giá bán nghìn/chỉ }
let _khoByMa = {};           // ma_hang(UPPER) -> product

async function loadData(){
  try{
    const [rp, rg] = await Promise.all([
      fetch('/api/pos/products?status=con_hang&gon=1'), fetch('/api/prices')]);
    _products = (await rp.json()).products || [];
    _khoByMa = {}; _products.forEach(p=>{ _khoByMa[(p.ma_hang||'').trim().toUpperCase()]=p; });
    const dl=document.getElementById('dl-doihang-products');
    dl.innerHTML=_products.map(p=>`<option value="${(p.ma_hang+' '+(p.ten||'')).replace(/"/g,'&quot;')}">`).join('');
    const g=(await rg.json()).prices||[]; _priceMap={}; g.forEach(p=>{ _priceMap[p.loai]=p.ban; });
  }catch(e){}
}
function findGiaVang(lv){
  if(!lv) return 0;
  const lo=lv.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;
}
function _num(el){ return el? (parseFloat((el.value||'').toString().replace(/[^\d.-]/g,''))||0) : 0; }
// Ô TIỀN (đồng, có dấu chấm ngăn nghìn "5.000.000") — PHẢI dùng _numD, không dùng _num
// (_num coi dấu chấm là thập phân → "5.000.000" thành 5).
function _numD(el){ return el? (parseFloat((el.value||'').toString().replace(/\./g,'').replace(/[^\d-]/g,''))||0) : 0; }

// ── Khách: gợi ý CRM ──
// Mặc định "Tên chủ tài khoản" = Họ tên khách hàng cho đến khi người dùng tự sửa ô đó.
let _tentkTouched=false;
function syncTenTk(){
  if(_tentkTouched) return;
  const el=document.getElementById('qt-tentk'); if(!el) return;
  el.value=document.getElementById('kh-ten').value.trim();
}
// Gợi ý khách dùng CHUNG cho ô Tên và ô SĐT (23/10/2026: trước đây chỉ ô Tên có gợi ý).
// Chọn bằng onmousedown (chạy TRƯỚC onblur ẩn dropdown); nội dung thoát ký tự (_khE) chống chèn mã.
let _khTimer=null, _khKetQua={};
function _khE(s){ return String(s==null?'':s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
function khSuggest(q, dropId){
  dropId=dropId||'kh-drop';
  clearTimeout(_khTimer);
  if(!q||q.trim().length<1){ khHideDrop(dropId); return; }
  _khTimer=setTimeout(async()=>{
    try{
      const d=await (await fetch('/api/crm/search-lite?q='+encodeURIComponent(q.trim()))).json();
      const drop=document.getElementById(dropId);
      if(!d.customers||!d.customers.length){ khHideDrop(dropId); return; }
      _khKetQua[dropId]=d.customers;
      drop.innerHTML=d.customers.map((c,i)=>`<div class="px-3 py-2 hover:bg-amber-50 cursor-pointer text-sm"
        onmousedown="event.preventDefault();khPickIdx('${dropId}',${i})">
        <div class="font-semibold">${_khE(c.ho_ten||'')}</div>
        <div class="text-xs text-gray-400">${_khE(c.dien_thoai||'')} ${c.cccd?'· '+_khE(c.cccd):''}${c.dia_chi?' · '+_khE(c.dia_chi):''}</div></div>`).join('');
      drop.classList.remove('hidden');
    }catch(e){ khHideDrop(dropId); }
  },250);
}
function khPickIdx(dropId,i){ const c=(_khKetQua[dropId]||[])[i]; if(c) khPick(c); }
function khPick(c){
  document.getElementById('kh-ten').value=c.ho_ten||'';
  document.getElementById('kh-sdt').value=c.dien_thoai||'';
  document.getElementById('kh-cccd').value=c.cccd||'';
  document.getElementById('kh-diachi').value=c.dia_chi||'';
  syncTenTk();
  khHideDrop('kh-drop'); khHideDrop('kh-drop-sdt');
}
function khHideDrop(dropId){ const el=document.getElementById(dropId||'kh-drop'); if(el) el.classList.add('hidden'); }

// ── KHU A: hàng khách bán (mua vào) ──
function muaRowTemplate(){
  return `<div class="item-row">
    <div class="item-head mua">
      <span class="stt-cell" style="background:linear-gradient(135deg,#16a34a,#15803d)"></span>
      <input class="m-ten input-ios-sm flex-1 font-semibold" placeholder="Tên hàng khách bán">
      <button onclick="this.closest('.item-row').remove();calcMua()" class="w-7 h-7 rounded-full bg-red-50 text-red-500 flex items-center justify-center flex-shrink-0">✕</button>
    </div>
    <div class="item-body">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
        <div class="mini-field"><span class="item-mini-label">Chất liệu</span><input class="m-cl input-ios-sm w-full" placeholder="9999"></div>
        <div class="mini-field"><span class="item-mini-label">KL tổng</span><input type="number" step="0.001" class="m-tl input-ios-sm w-full text-right" oninput="calcMua()" placeholder="0"></div>
        <div class="mini-field"><span class="item-mini-label">Đá & hao</span><input type="number" step="0.001" class="m-dh input-ios-sm w-full text-right" value="0" oninput="calcMua()" placeholder="0"></div>
        <div class="mini-field"><span class="item-mini-label">Đơn giá (đ)</span><input type="text" inputmode="numeric" class="m-gia input-ios-sm w-full text-right" oninput="onSplitAmtInput(this);calcMua()" placeholder="0"></div>
        <div class="mini-field"><span class="item-mini-label">Đơn vị</span>
          <select class="m-dv input-ios-sm w-full" onchange="calcMua()">
            <option value="Chỉ">Chỉ</option><option value="Gram">Gram</option><option value="Món">Món</option><option value="Cái">Cái</option><option value="Đôi">Đôi</option>
          </select></div>
      </div>
    </div>
    <div class="item-foot"><span class="item-group-label" style="margin-bottom:0;color:#15803d">Thành tiền</span><div class="m-tt text-lg font-black text-emerald-700">0đ</div></div>
  </div>`;
}
function addMuaRow(){
  document.getElementById('mua-list').insertAdjacentHTML('beforeend', muaRowTemplate());
  NguonGoc.veHop(document.getElementById('mua-list').lastElementChild);   // tùy chỉnh NSX/NPP (tắt = không vẽ gì)
  renumberMua();
}
function renumberMua(){ document.querySelectorAll('#mua-list .stt-cell').forEach((s,i)=>s.textContent=i+1); }
function calcMua(){
  let tong=0;
  document.querySelectorAll('#mua-list .item-row').forEach(tr=>{
    const tl=_num(tr.querySelector('.m-tl')), dh=_num(tr.querySelector('.m-dh'));
    const gia=_numD(tr.querySelector('.m-gia')), dv=tr.querySelector('.m-dv').value;
    const tt=WEIGHT_UNITS.includes(dv)?Math.max(tl-dh,0)*gia:gia;
    tr.querySelector('.m-tt').textContent=fmtD(tt); tr._tt=tt; tong+=tt;
  });
  document.getElementById('tong-mua').textContent=fmtD(tong);
  recalcChenh();
}

// ── KHU B: hàng khách mua (bán ra) — y hệt giỏ hàng bán ──
function banRowTemplate(){
  return `<div class="item-row">
    <div class="item-head ban">
      <span class="stt-cell" style="background:linear-gradient(135deg,#2563eb,#1d4ed8)"></span>
      <input class="b-sel input-ios-sm flex-1 font-semibold" list="dl-doihang-products" placeholder="🔍 Tìm sản phẩm tồn kho..." autocomplete="off" oninput="onBanSel(this)">
      <button onclick="this.closest('.item-row').remove();renumberBan();calcBan()" class="w-7 h-7 rounded-full bg-red-50 text-red-500 flex items-center justify-center flex-shrink-0">✕</button>
    </div>
    <div class="item-body space-y-1.5">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
        <div class="mini-field"><span class="item-mini-label">Mã SP</span><input class="b-ma input-ios-sm w-full font-mono text-xs" placeholder="Mã"></div>
        <div class="sm:col-span-2 mini-field"><span class="item-mini-label">Tên SP</span><input class="b-ten input-ios-sm w-full" placeholder="Tên sản phẩm"></div>
        <div class="mini-field"><span class="item-mini-label">HLV</span><input class="b-tuoi input-ios-sm w-full text-center" placeholder="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="b-tl input-ios-sm w-full text-right" oninput="recalcBanRow(this)" placeholder="0"></div>
            <div class="mini-field"><span class="item-mini-label">Đá</span><input type="number" step="0.001" class="b-klda input-ios-sm w-full text-right" oninput="recalcBanRow(this)" placeholder="0"></div>
            <div class="mini-field"><span class="item-mini-label">Vàng</span><input type="number" step="0.001" class="b-klvang input-ios-sm w-full text-right font-bold" style="color:#92400e" oninput="recalcBanRow(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="text" inputmode="numeric" class="b-dg input-ios-sm w-full text-right font-semibold" oninput="onSplitAmtInput(this);recalcBanRow(this)" placeholder="0"></div><div class="b-dghint dg-hint text-[10px] mt-0.5 text-right"></div></div>
            <div class="mini-field"><span class="item-mini-label">Tiền công</span><input type="text" inputmode="numeric" class="b-cong input-ios-sm w-full text-right" oninput="onSplitAmtInput(this);recalcBanRow(this)" placeholder="0"></div>
            <div class="mini-field"><span class="item-mini-label">Tiền đá</span><input type="text" inputmode="numeric" class="b-da input-ios-sm w-full text-right" oninput="onSplitAmtInput(this);recalcBanRow(this)" placeholder="0"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-foot"><span class="item-group-label" style="margin-bottom:0;color:#1d4ed8">Thành tiền</span><div class="b-tt text-lg font-black text-blue-700">0đ</div></div>
  </div>`;
}
function addBanRow(){ document.getElementById('ban-list').insertAdjacentHTML('beforeend', banRowTemplate()); renumberBan(); }
function renumberBan(){ document.querySelectorAll('#ban-list .stt-cell').forEach((s,i)=>s.textContent=i+1); }
function _banFeedback(msg,mau){ const fb=document.getElementById('ban-feedback'); fb.textContent=msg; fb.style.color=mau; clearTimeout(fb._t); fb._t=setTimeout(()=>fb.textContent='',3500); }
function scanBan(code){
  code=(code||'').trim(); if(!code) return;
  const p=_khoByMa[code.toUpperCase()];
  if(!p){ _banFeedback('✕ Không tìm thấy mã "'+code+'" trong hàng còn kho.','#dc2626'); return; }
  if([...document.querySelectorAll('#ban-list .item-row')].find(r=>r.dataset.pid==p.id)){ _banFeedback('⚠ "'+(p.ten||p.ma_hang)+'" đã có trong danh sách.','#d97706'); return; }
  let tr=document.querySelector('#ban-list .item-row:last-child');
  const trong=tr && !tr.dataset.pid && !tr.querySelector('.b-ten').value.trim() && !(_num(tr.querySelector('.b-tl'))>0);
  if(!trong){ addBanRow(); tr=document.querySelector('#ban-list .item-row:last-child'); }
  fillBanFromProduct(p,tr);
  _banFeedback('✓ Đã thêm: '+(p.ten||p.ma_hang),'#16a34a');
}
function onBanSel(input){
  const tr=input.closest('.item-row'); const val=input.value.trim();
  if(!val){ delete tr.dataset.pid; return; }
  const p=_products.find(x=>((x.ma_hang||'')+' '+(x.ten||'')).trim()===val) || _khoByMa[val.toUpperCase()];
  if(p) fillBanFromProduct(p,tr); else delete tr.dataset.pid;
}
function fillBanFromProduct(p,tr){
  tr.dataset.pid=p.id; tr.dataset.loaiVang=p.loai_vang||'';
  tr.querySelector('.b-sel').value=(p.ma_hang+' '+(p.ten||'')).trim();
  tr.querySelector('.b-ma').value=p.ma_hang||'';
  tr.querySelector('.b-ten').value=p.ten||'';
  tr.querySelector('.b-tuoi').value=p.loai_vang||p.tuoi||'';
  tr.querySelector('.b-tl').value=p.trong_luong||0;
  tr.querySelector('.b-klda').value=p.kl_da||0;
  tr.querySelector('.b-klvang').value=p.kl_vang||0;
  // GIÁ CỐ ĐỊNH (gia_ban_co_dinh=1): bán ĐÚNG giá đã khai, KHÔNG 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('.b-dg').value=formatSplitAmt(r.donGia);
    tr.querySelector('.b-cong').value=formatSplitAmt(r.tienCong);
    tr.querySelector('.b-da').value=formatSplitAmt(r.tienDa);
  } else {
    delete tr.dataset.giaCoDinh;
    const gv=findGiaVang(p.loai_vang||'');
    tr.querySelector('.b-dg').value=formatSplitAmt(gv?gv*1000:0);   // tra khong ra gia vang → de 0 cho chot chan bao do
    tr.querySelector('.b-cong').value=formatSplitAmt((p.tien_cong||0)*1000);
    tr.querySelector('.b-da').value=formatSplitAmt((p.tien_da||0)*1000);
  }
  recalcBanRow(tr.querySelector('.b-tl'));
}
function recalcBanRow(el){
  const tr=el.closest('.item-row');
  // GIÁ CỐ ĐỊNH: tổng luôn = giá đã khai dù sửa trọng lượng/công/đá → tính lại ĐƠN GIÁ
  if(tr.dataset.giaCoDinh){
    const _r=giaCoDinhToRow(Number(tr.dataset.giaCoDinh)||0, _num(tr.querySelector('.b-klvang')),
                            _numD(tr.querySelector('.b-cong')), _numD(tr.querySelector('.b-da')));
    tr.querySelector('.b-dg').value=formatSplitAmt(_r.donGia);
    tr.querySelector('.b-cong').value=formatSplitAmt(_r.tienCong);
    tr.querySelector('.b-da').value=formatSplitAmt(_r.tienDa);
  }
  const klv=_num(tr.querySelector('.b-klvang')), dg=_numD(tr.querySelector('.b-dg'));
  const cong=_numD(tr.querySelector('.b-cong')), da=_numD(tr.querySelector('.b-da'));
  const tt=klv*dg+cong+da;
  tr.querySelector('.b-tt').textContent=fmtD(tt); tr._tt=tt;
  // gợi ý giá bảng vàng
  const hint=tr.querySelector('.b-dghint'), lv=tr.dataset.loaiVang||''; const gv=findGiaVang(lv);
  if(tr.dataset.giaCoDinh){ hint.innerHTML=`<span class="text-sky-700">🔒 Giá cố định: ${fmt(Number(tr.dataset.giaCoDinh))} đ</span>`; }
  else 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${lv?' "'+lv+'"':''}</span>`; }
  else if(lv&&gv){ const latest=gv*1000; hint.innerHTML=Math.abs(dg-latest)<1?`<span class="text-emerald-600">✓ Khớp ${lv}</span>`:`<span class="text-amber-600 cursor-pointer" onclick="applyBanPrice(this)">⚠️ BG ${lv}: ${fmt(latest)}</span>`; } else hint.innerHTML='';
  calcBan();
}
function applyBanPrice(el){ const tr=el.closest('.item-row'); const gv=findGiaVang(tr.dataset.loaiVang||''); if(!gv) return; tr.querySelector('.b-dg').value=formatSplitAmt(gv*1000); recalcBanRow(tr.querySelector('.b-dg')); }
function calcBan(){
  let tong=0; document.querySelectorAll('#ban-list .item-row').forEach(tr=>tong+=(tr._tt||0));
  const gg=_numD(document.getElementById('ban-giamgia'));
  const net=Math.max(tong-gg,0);
  document.getElementById('tong-ban').textContent=fmtD(net);
  recalcChenh();
}

// ── QUYẾT TOÁN ──
function getTongMua(){ let t=0; document.querySelectorAll('#mua-list .item-row').forEach(tr=>t+=(tr._tt||0)); return t; }
function getTongBan(){ let t=0; document.querySelectorAll('#ban-list .item-row').forEach(tr=>t+=(tr._tt||0)); return Math.max(t-_numD(document.getElementById('ban-giamgia')),0); }
function recalcChenh(){
  const A=getTongMua(), B=getTongBan(), chenh=A-B;
  document.getElementById('qt-a').textContent=fmtD(A);
  document.getElementById('qt-b').textContent=fmtD(B);
  const lbl=document.getElementById('qt-label'), box=document.getElementById('qt-box');
  if(Math.abs(chenh)<1){ lbl.innerHTML='Chênh lệch: <span class="text-gray-500">0đ — không bù tiền</span>'; box.style.display='none'; }
  else if(chenh>0){ lbl.innerHTML='💰 <span class="text-red-700">KHÁCH LẤY LẠI: '+fmtD(chenh)+'</span>'; box.style.display=''; }
  else { lbl.innerHTML='💵 <span class="text-green-700">KHÁCH THANH TOÁN THÊM: '+fmtD(-chenh)+'</span>'; box.style.display=''; }
  _qtAutoFill();
  onQtInput();
}
// Hình thức thanh toán (y hệt trang Bán): TM/CK → tự điền TRỌN chênh lệch vào kênh đó,
// chỉ "Cả hai" mới hiện 2 ô tách cho người dùng tự chia.
function _qtAutoFill(){
  const v=document.getElementById('qt-httt').value;
  if(v==='ca_hai') return;   // người dùng tự chia — không ghi đè
  const chenh=Math.round(Math.abs(getTongMua()-getTongBan()));
  document.getElementById('qt-tm').value = v==='tien_mat' ? formatSplitAmt(chenh) : '';
  document.getElementById('qt-ck').value = v==='chuyen_khoan' ? formatSplitAmt(chenh) : '';
}
function onQtHtttChange(){
  document.getElementById('qt-split-row').style.display =
    document.getElementById('qt-httt').value==='ca_hai' ? '' : 'none';
  _qtAutoFill();
  onQtInput();
}
function onQtInput(){
  const chenh=Math.abs(getTongMua()-getTongBan());
  const tm=_numD(document.getElementById('qt-tm')), ck=_numD(document.getElementById('qt-ck'));
  document.getElementById('qt-bank').style.display = ck>0 ? '' : 'none';
  const warn=document.getElementById('qt-warn'), ro=document.getElementById('qt-readout'), btn=document.getElementById('btn-luu');
  const chi=getTongMua()>getTongBan();
  if(chenh<1){ warn.textContent=''; ro.textContent=''; btn.disabled=false; btn.style.opacity=1; return; }
  const tong=tm+ck, lech=tong-chenh;
  const nh=document.getElementById('qt-nganhang').value.trim(), stk=document.getElementById('qt-sotk').value.trim();
  const ckTxt = ck>0 ? (' + CK '+fmtD(ck)+(stk||nh?(' vào TK '+stk+' '+nh):'')) : '';
  ro.innerHTML = (chi?'Tiệm trả khách: ':'Khách trả tiệm: ')+'<b>'+fmtD(chenh)+'</b> = TM '+fmtD(tm)+ckTxt;
  if(Math.abs(lech)>=1){ warn.innerHTML='<span class="text-red-600">⚠ Tiền mặt + Chuyển khoản ('+fmtD(tong)+') phải bằng '+fmtD(chenh)+'</span>'; btn.disabled=true; btn.style.opacity=.5; }
  else { warn.innerHTML='<span class="text-green-600">✓ Khớp chênh lệch</span>'; btn.disabled=false; btn.style.opacity=1; }
}

// ── LƯU ──
async function luuDoiHang(){
  const A=getTongMua(), Braw=(()=>{let t=0;document.querySelectorAll('#ban-list .item-row').forEach(tr=>t+=(tr._tt||0));return t;})();
  const gg=_numD(document.getElementById('ban-giamgia'));
  const B=Math.max(Braw-gg,0);
  if(A<=0){ alert('Chưa nhập hàng khách bán (khu A).'); return; }
  if(Braw<=0){ alert('Chưa chọn hàng khách mua (khu B).'); return; }
  // ⚠️ CHẶN khi dòng bán ra còn CHƯA CÓ GIÁ (có KL vàng mà đơn giá = 0) — tránh bán hụt
  {
    const _loi=[];
    document.querySelectorAll('#ban-list .item-row').forEach(tr=>{
      const klv=_num(tr.querySelector('.b-klvang')), dg=_numD(tr.querySelector('.b-dg'));
      if(klv>0 && dg<=0){
        const ma=tr.querySelector('.b-ma').value.trim(), ten=tr.querySelector('.b-ten').value.trim();
        const lv=tr.dataset.loaiVang||'';
        _loi.push(`• ${ma||ten||'(dòng chưa có tên)'}${lv?` — loại vàng "${lv}"`:''}`);
      }
    });
    if(_loi.length){
      alert('⚠️ CHƯA THỂ LƯU — có '+_loi.length+' dòng hàng bán ra chưa có giá:\n\n'+_loi.join('\n')
            +'\n\n→ Sửa lại loại vàng cho đúng, hoặc điền Đơn giá cho dòng đó.');
      return;
    }
  }
  const chenh=Math.abs(A-B); let tm=0,ck=0;
  if(chenh>=1){ tm=_numD(document.getElementById('qt-tm')); ck=_numD(document.getElementById('qt-ck'));
    if(Math.abs((tm+ck)-chenh)>=1){ alert('Tiền mặt + Chuyển khoản phải bằng chênh lệch '+fmtD(chenh)); return; } }
  const items_mua=[];
  for(const tr of document.querySelectorAll('#mua-list .item-row')){
    const ten=tr.querySelector('.m-ten').value.trim(); if(!ten && (tr._tt||0)<=0) continue;
    items_mua.push({ ten_hang:ten, chat_lieu:tr.querySelector('.m-cl').value.trim(),
      tong_trong_luong:_num(tr.querySelector('.m-tl')), da_va_hao:_num(tr.querySelector('.m-dh')),
      gia:_numD(tr.querySelector('.m-gia'))/1000, don_vi:tr.querySelector('.m-dv').value, so_luong:1,
      ...NguonGoc.lay(tr) });   // tùy chỉnh tắt → {} (payload y hệt cũ)
  }
  const items_ban=[];
  for(const tr of document.querySelectorAll('#ban-list .item-row')){
    if(!tr.dataset.pid){ alert('Món bán "'+(tr.querySelector('.b-ten').value||'?')+'" chưa chọn từ tồn kho (khu B phải là hàng có sẵn).'); return; }
    items_ban.push({ product_id:parseInt(tr.dataset.pid), ma_hang:tr.querySelector('.b-ma').value.trim(),
      ten:tr.querySelector('.b-ten').value.trim(), mo_ta:tr.querySelector('.b-ten').value.trim(),
      tuoi:tr.querySelector('.b-tuoi').value.trim(), trong_luong:_num(tr.querySelector('.b-tl')),
      kl_da:_num(tr.querySelector('.b-klda')), kl_vang:_num(tr.querySelector('.b-klvang')),
      don_gia:_numD(tr.querySelector('.b-dg'))/1000, tien_cong:_numD(tr.querySelector('.b-cong'))/1000,
      tien_da:_numD(tr.querySelector('.b-da'))/1000, thanh_tien:(tr._tt||0)/1000 });
  }
  if(!items_mua.length){ alert('Khu A chưa có hàng hợp lệ.'); return; }
  if(!items_ban.length){ alert('Khu B chưa có hàng.'); return; }
  const payload={ khach:{ ten:document.getElementById('kh-ten').value.trim(), sdt:document.getElementById('kh-sdt').value.trim(),
      cccd:document.getElementById('kh-cccd').value.trim(), dia_chi:document.getElementById('kh-diachi').value.trim() },
    items_mua, items_ban, net_tm:tm/1000, net_ck:ck/1000, giam_gia:gg/1000,
    so_tk:document.getElementById('qt-sotk').value.trim(), ten_tk:document.getElementById('qt-tentk').value.trim(),
    ngan_hang:document.getElementById('qt-nganhang').value.trim(),
    nhan_vien_id:document.getElementById('dh-sel-nhanvien').value||null };
  const isEdit=_editDhId!==null;
  if(isEdit){
    // PIN qua modal ẩn ****** (askPin của base.html) — KHÔNG dùng prompt() vì lộ chữ
    askPin('SỬA = xóa giao dịch cũ và tạo lại (mã/HĐ mới). Nhập PIN Giám đốc/Phó GĐ:',
      pin => { payload.pin = pin; _dhSubmit(payload, true); });
    return;
  }
  _dhSubmit(payload, false);
}
async function _dhSubmit(payload, isEdit){
  const btn=document.getElementById('btn-luu'); btn.disabled=true; btn.textContent='Đang lưu...';
  try{
    const d=await (await fetch(isEdit?('/api/doi-hang/'+_editDhId):'/api/doi-hang',
      {method:isEdit?'PUT':'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)})).json();
    if(!d.success){ alert('❌ '+dhErr(d.error)); return; }
    _editDhId=null; document.getElementById('edit-banner').classList.add('hidden');
    showKetQua(d);
  }catch(e){ alert('Lỗi mạng: '+e); }
  finally{ btn.disabled=false; btn.textContent=_editDhId!==null?'💾 Cập nhật giao dịch (xóa làm lại)':'💾 Lưu giao dịch đổi hàng'; }
}
function dhErr(e){
  e=e||'';
  if(e==='can_xac_nhan') return 'Chưa lưu: anh/chị chưa xác nhận cảnh báo 20 triệu. Đổi phần tiền mặt sang chuyển khoản rồi lưu lại.';
  if(e.startsWith('ban_sp_da_ban:')) return 'Hàng khách mua đã bán ở hóa đơn '+e.split(':')[1];
  if(e.startsWith('ban_sp_khong_con_hang:')) return 'Hàng khách mua không còn trong kho: '+e.split(':')[1];
  if(e.startsWith('mua_ma_ton_tai:')) return 'Mã hàng khách bán trùng mã đã có trong kho: '+e.split(':')[1];
  if(e.startsWith('mua_sp_da_su_dung:')) return 'Hàng mua của giao dịch cũ đã bán/gửi xưởng, không sửa được: '+e.split(':')[1];
  if(e==='tong_thanh_toan_lech') return 'Tổng tiền quyết toán không khớp chênh lệch.';
  if(e==='thieu_hang_mua') return 'Chưa có hàng khách bán (khu A).';
  if(e==='thieu_hang_ban') return 'Chưa có hàng khách mua (khu B).';
  if(e==='forbidden_role') return 'Chỉ Giám đốc/Phó GĐ mới sửa được (kiểm tra PIN).';
  if(e==='not_found') return 'Không tìm thấy giao dịch.';
  if(e==='wrong_pin') return 'Sai PIN hoặc không đủ quyền.';
  if(e.startsWith('nsx_khong_co_trong_danh_muc:')||e.startsWith('npp_khong_co_trong_danh_muc:'))
    return '"'+e.split(':').slice(1).join(':')+'" không có trong danh mục NSX/NPP (trang Tồn kho) — chọn lại trong ô sổ xuống.';
  if(e==='thieu_hau_to_kimsuri') return 'Hàng Kim Suri: tên sản phẩm phải có hậu tố "(KIMSURI)".';
  return e;
}
function showKetQua(d){
  document.getElementById('kq-magd').textContent=d.ma_gd;
  const huong=d.huong==='chi'?('Khách lấy lại '+fmtD(Math.abs(d.so_chenh)*1000)):d.huong==='thu'?('Khách trả thêm '+fmtD(Math.abs(d.so_chenh)*1000)):'Không bù tiền';
  const bank=(d.ngan_hang||d.so_tk)?(' · CK vào TK '+(d.so_tk||'')+' '+(d.ngan_hang||'')):'';
  document.getElementById('kq-tomtat').innerHTML=`Bán <b>${d.ma_ban}</b> (${fmtD(d.tong_ban*1000)}) · Mua <b>${d.ma_mua}</b> (${fmtD(d.tong_mua*1000)}) · <b>${huong}</b> = TM ${fmtD(d.net_tm*1000)} + CK ${fmtD(d.net_ck*1000)}${bank}`;
  document.getElementById('kq-in-ban').href='/pos/sales/'+d.sale_id+'/print';
  document.getElementById('kq-in-ban-remote').onclick = function(){ printRemote('/pos/sales/'+d.sale_id+'/print', this); };
  document.getElementById('kq-in-mua').href='/purchase-orders/'+d.po_id+'/print';
  document.getElementById('kq-in-mua-remote').onclick = function(){ printRemote('/purchase-orders/'+d.po_id+'/print', this); };
  document.getElementById('ket-qua').classList.remove('hidden');
  document.getElementById('ket-qua').scrollIntoView({behavior:'smooth'});
  loadRecent();
}
function resetForm(){
  ['kh-ten','kh-sdt','kh-cccd','kh-diachi','qt-tm','qt-ck','qt-nganhang','qt-sotk','qt-tentk','ban-giamgia'].forEach(id=>document.getElementById(id).value='');
  document.getElementById('mua-list').innerHTML=''; document.getElementById('ban-list').innerHTML='';
  document.getElementById('ket-qua').classList.add('hidden');
  // GIỮ nhân viên đang đăng nhập cho giao dịch kế tiếp (khớp hành vi sel-nhanvien của pos.html)
  document.getElementById('dh-sel-nhanvien').value=window._nvMacDinh||'';
  _tentkTouched=false;
  _editDhId=null; document.getElementById('edit-banner').classList.add('hidden');
  document.getElementById('btn-luu').textContent='💾 Lưu giao dịch đổi hàng';
  document.getElementById('qt-httt').value='tien_mat';
  document.getElementById('qt-split-row').style.display='none';
  addMuaRow(); calcMua(); calcBan();
}

// ── GẦN ĐÂY (thẻ theo khách, giống Mua hàng gần đây) ──
let _dhList=[], _dhExpanded={}, _dhMyRole='';
fetch('/api/my-perms',{cache:'no-store'}).then(r=>r.json()).then(d=>{ _dhMyRole=d.role||''; renderRecent(); }).catch(()=>{});
async function loadRecent(){
  try{ const d=await (await fetch('/api/doi-hang?limit=60')).json(); _dhList=d.items||[]; renderRecent(); }catch(e){}
}
function _dhCustKey(x){ return 't:'+((x.khach_hang||'Khách lẻ').trim().toLowerCase()); }
function toggleDhCust(ekey){
  const k=decodeURIComponent(ekey); _dhExpanded[k]=!_dhExpanded[k]; renderRecent();
  // Mở thẻ → tự cuộn thẻ đó lên đầu màn hình để thấy ngay nội dung (khỏi kéo tay)
  if(_dhExpanded[k]){
    const el=document.getElementById('dh-cust-'+ekey);
    if(el) setTimeout(()=>el.scrollIntoView({behavior:'smooth',block:'start'}),60);
  }
}
function renderRecent(){
  const box=document.getElementById('dh-recent'); if(!box) return;
  const q=(document.getElementById('dh-search')?.value||'').trim().toLowerCase();
  let list=_dhList;
  if(q) list=list.filter(x=>((x.khach_hang||'')+' '+(x.ma_gd||'')+' '+(x.ma_ban||'')+' '+(x.ma_mua||'')).toLowerCase().includes(q));
  if(!list.length){ box.innerHTML='<div class="ios-card p-4 text-gray-300 text-sm text-center">Chưa có giao dịch</div>'; return; }
  const groups=new Map();
  list.forEach(x=>{ const k=_dhCustKey(x); if(!groups.has(k)) groups.set(k,{key:k, ten:x.khach_hang||'Khách lẻ', items:[]}); groups.get(k).items.push(x); });
  box.innerHTML=[...groups.values()].map(_dhCustCard).join('');
}
function _dhCustCard(g){
  const ekey=encodeURIComponent(g.key).replace(/'/g,'%27'), initials=(window.vnInitial?vnInitial(g.ten):(g.ten||'?').trim()[0]||'?'), open=!!_dhExpanded[g.key];
  return `<div id="dh-cust-${ekey}" class="ios-card overflow-hidden" style="border:1px solid #fed7aa;scroll-margin-top:76px">
    <div onclick="toggleDhCust('${ekey}')" class="px-4 py-3 cursor-pointer flex items-center gap-3 flex-wrap" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold" style="background:linear-gradient(135deg,#4a0000,#8b0000)">${_escNk(initials)}</div>
      <div class="flex-1" style="min-width:150px">
        <div class="font-bold text-gray-800 break-words">${_escNk(g.ten)}</div>
        <div class="text-xs text-gray-400 truncate">${g.items.length} lần đổi · ${(g.items[0].created_at||'').slice(0,16)}</div>
      </div>
      <div class="flex items-center gap-2 ml-auto flex-shrink-0">
        <span style="background:#ffedd5;color:#9a3412" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">🔁 Đổi hàng</span>
        <span class="text-gray-400">${open?'▴':'▾'}</span>
      </div>
    </div>
    <div class="p-3 space-y-2 ${open?'':'hidden'}">${g.items.map(_dhTicket).join('')}</div>
  </div>`;
}
function _dhItemLine(ten, ma, kl, tt){
  return `<div class="flex justify-between gap-2 min-w-0 px-2 py-1 text-xs">
    <span class="truncate">${ma?'<span class="font-mono text-gray-400">'+ma+'</span> · ':''}${ten||'—'}</span>
    <span class="text-gray-400 whitespace-nowrap">${kl?Number(kl).toLocaleString('vi-VN',{maximumFractionDigits:3})+' chỉ · ':''}${fmtD((tt||0)*1000)}</span>
  </div>`;
}
function _dhTicket(x){
  const isDir=_dhMyRole==='giam_doc'||_dhMyRole==='pho_giam_doc';
  const huongTxt=x.huong==='chi'?('Khách lấy lại '+fmtD(Math.abs(x.so_chenh)*1000)):x.huong==='thu'?('Khách trả thêm '+fmtD(Math.abs(x.so_chenh)*1000)):'Không bù tiền';
  const huongColor=x.huong==='chi'?'#dc2626':x.huong==='thu'?'#16a34a':'#6b7280';
  const pay=[]; if(x.net_tm>0) pay.push('TM '+fmtD(x.net_tm*1000)); if(x.net_ck>0) pay.push('CK '+fmtD(x.net_ck*1000));
  const bank=(x.ngan_hang||x.so_tk)?(' → '+((x.so_tk||'')+' '+(x.ngan_hang||'')).trim()):'';
  const showCk = x.huong==='chi' && x.net_ck>0 && x.so_tk;
  const banHtml=(x.items_ban||[]).map(it=>_dhItemLine(it.ten||it.mo_ta, it.ma_hang, it.kl_vang||it.trong_luong, it.thanh_tien)).join('');
  const muaHtml=(x.items_mua||[]).map(it=>_dhItemLine(it.ten_hang+(it.chat_lieu?' ('+it.chat_lieu+')':''), it.ma_hang, Math.max((it.tong_trong_luong||0)-(it.da_va_hao||0),0), it.thanh_tien)).join('');
  return `<div class="rounded-xl border border-gray-100 px-3 py-2 space-y-1.5" data-ma-gd="${x.ma_gd}">
    <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
      <span class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap" style="background:#ea580c;color:#fff">Đổi</span>
      <span class="font-mono font-semibold text-xs">${x.ma_gd}</span>
      <span class="text-xs text-gray-400">${(x.created_at||'').slice(0,16)}</span>
      <span class="text-sm font-black ml-auto" style="color:${huongColor}">${huongTxt}</span>
    </div>
    ${banHtml?`<div class="rounded-lg border border-blue-100 overflow-hidden">
      <div class="px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase" style="background:#eff6ff">🔵 Khách mua (bán ra) · ${x.ma_ban}</div>
      <div class="divide-y divide-gray-50">${banHtml}</div></div>`:''}
    ${muaHtml?`<div class="rounded-lg border border-emerald-100 overflow-hidden">
      <div class="px-2 py-0.5 text-[10px] font-bold text-emerald-700 uppercase" style="background:#ecfdf5">🟢 Khách bán (mua vào) · ${x.ma_mua}</div>
      <div class="divide-y divide-gray-50">${muaHtml}</div></div>`:''}
    ${pay.length?`<div class="text-xs text-gray-500">💳 ${pay.join(' + ')}${bank}</div>`:''}
    <div class="flex items-center gap-2 flex-wrap pt-0.5">
      <a target="_blank" href="/pos/sales/${x.sale_id}/print" class="tkt-act tkt-blue">🖨️ In bán</a>
      <a target="_blank" href="/purchase-orders/${x.po_id}/print" class="tkt-act tkt-emerald">🖨️ In mua</a>
      <button onclick="printRemote('/pos/sales/${x.sale_id}/print', this)" class="tkt-act tkt-blue" title="Gửi in thẳng ra máy in ở quầy">📠 In bán tại quầy</button>
      <button onclick="printRemote('/purchase-orders/${x.po_id}/print', this)" class="tkt-act tkt-emerald" title="Gửi in thẳng ra máy in ở quầy">📠 In mua tại quầy</button>
      <button onclick="xuatHDDTDoiHang(${x.sale_id})" class="tkt-act tkt-amber">📤 HĐĐT</button>
      ${showCk?`<button onclick="openCkMbDoiHang(${x.id})" class="tkt-act tkt-blue">🏦 CK MB</button>`:''}
      ${isDir?`<button onclick="suaDoiHang(${x.id})" class="tkt-act tkt-orange">✏️ Sửa</button>`:''}
      ${isDir?`<button onclick="xoaDoiHang(${x.id},'${x.ma_gd}')" class="tkt-act tkt-red">🗑️ Xóa</button>`:`<button onclick="xinXoaPhieu('doi_hang', ${x.id}, '${x.ma_gd}', '')" class="tkt-act tkt-orange">📤 Xin xóa</button>`}
    </div>
  </div>`;
}
function xoaDoiHang(id,ma){
  if(!confirm('Xóa giao dịch đổi hàng '+ma+'?\nHoàn CẢ hóa đơn bán + phiếu mua + dòng sổ quỹ. (Cần PIN Giám đốc/Phó GĐ)')) return;
  // PIN qua modal ẩn ****** (askPin của base.html) — KHÔNG dùng prompt() vì lộ chữ
  askPin('Xóa giao dịch đổi hàng '+ma+' — nhập PIN Giám đốc/Phó GĐ:', async pin => {
    const d=await (await fetch('/api/doi-hang/'+id,{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({pin})})).json();
    if(!d.success){ alert('❌ '+(d.error==='forbidden_role'?'Chỉ Giám đốc/Phó GĐ (kiểm tra PIN).'
      :d.error==='not_found'?'Không tìm thấy giao dịch đổi hàng (có thể đã bị xóa).'
      :(d.error&&d.error.startsWith('mua_sp_da_su_dung:')?'Hàng mua đã bán/gửi xưởng: '+d.error.split(':')[1]
      :(d.message||d.error||'Không xóa được.')))); return; }
    loadRecent();
  });
}

// ── SỬA (xóa làm lại): nạp lại toàn bộ vào form ──
let _editDhId=null;
async function suaDoiHang(id){
  const d=await (await fetch('/api/doi-hang/'+id)).json();
  if(!d||!d.success){ alert('Không tải được giao dịch để sửa.'); return; }
  // Khách
  document.getElementById('kh-ten').value=d.khach.ten||'';
  document.getElementById('kh-sdt').value=d.khach.sdt||'';
  document.getElementById('kh-cccd').value=d.khach.cccd||'';
  document.getElementById('kh-diachi').value=d.khach.dia_chi||'';
  document.getElementById('dh-sel-nhanvien').value=d.nhan_vien_id?String(d.nhan_vien_id):'';
  _tentkTouched=true;   // giữ tên chủ TK đã lưu, không để tên khách ghi đè
  // Khu A (mua)
  document.getElementById('mua-list').innerHTML='';
  (d.items_mua||[]).forEach(it=>{
    addMuaRow(); const tr=document.querySelector('#mua-list .item-row:last-child');
    tr.querySelector('.m-ten').value=it.ten_hang||'';
    tr.querySelector('.m-cl').value=it.chat_lieu||'';
    tr.querySelector('.m-tl').value=it.tong_trong_luong||0;
    tr.querySelector('.m-dh').value=it.da_va_hao||0;
    tr.querySelector('.m-gia').value=formatSplitAmt(Math.round((it.gia||0)*1000));
    const sel=tr.querySelector('.m-dv'), opt=[...sel.options].find(o=>o.value.toLowerCase()===(it.don_vi||'').toLowerCase()); if(opt) sel.value=opt.value;
    NguonGoc.dat(tr, it);
  });
  if(!(d.items_mua||[]).length) addMuaRow();
  calcMua();
  // Khu B (bán)
  document.getElementById('ban-list').innerHTML='';
  (d.items_ban||[]).forEach(it=>{
    addBanRow(); const tr=document.querySelector('#ban-list .item-row:last-child');
    tr.dataset.pid=it.product_id; tr.dataset.loaiVang=it.tuoi||'';
    tr.querySelector('.b-sel').value=((it.ma_hang||'')+' '+(it.ten||'')).trim();
    tr.querySelector('.b-ma').value=it.ma_hang||'';
    tr.querySelector('.b-ten').value=it.ten||'';
    tr.querySelector('.b-tuoi').value=it.loai_vang||it.tuoi||'';
    tr.querySelector('.b-tl').value=it.trong_luong||0;
    tr.querySelector('.b-klda').value=it.kl_da||0;
    tr.querySelector('.b-klvang').value=it.kl_vang||0;
    tr.querySelector('.b-dg').value=formatSplitAmt(Math.round((it.don_gia||0)*1000));
    tr.querySelector('.b-cong').value=formatSplitAmt(Math.round((it.tien_cong||0)*1000));
    tr.querySelector('.b-da').value=formatSplitAmt(Math.round((it.tien_da||0)*1000));
    recalcBanRow(tr.querySelector('.b-tl'));
  });
  document.getElementById('ban-giamgia').value=formatSplitAmt(Math.round((d.giam_gia||0)*1000));
  calcBan();
  // Quyết toán: suy hình thức từ net đã lưu (cả hai / CK / TM) rồi đổ số
  const _tm=(d.net_tm||0), _ck=(d.net_ck||0);
  document.getElementById('qt-httt').value = (_tm>0&&_ck>0) ? 'ca_hai' : (_ck>0 ? 'chuyen_khoan' : 'tien_mat');
  document.getElementById('qt-split-row').style.display = (_tm>0&&_ck>0) ? '' : 'none';
  document.getElementById('qt-tm').value=formatSplitAmt(Math.round(_tm*1000));
  document.getElementById('qt-ck').value=formatSplitAmt(Math.round(_ck*1000));
  document.getElementById('qt-nganhang').value=d.ngan_hang||'';
  document.getElementById('qt-sotk').value=d.so_tk||'';
  document.getElementById('qt-tentk').value=d.ten_tk||'';
  recalcChenh();
  _editDhId=id;
  document.getElementById('btn-luu').textContent='💾 Cập nhật giao dịch (xóa làm lại)';
  document.getElementById('edit-banner-ma').textContent=d.ma_gd;
  document.getElementById('edit-banner').classList.remove('hidden');
  document.getElementById('ket-qua').classList.add('hidden');
  window.scrollTo({top:0,behavior:'smooth'});
}
function huyChinhSua(){ _editDhId=null; document.getElementById('edit-banner').classList.add('hidden'); document.getElementById('btn-luu').textContent='💾 Lưu giao dịch đổi hàng'; resetForm(); }

// ── XUẤT HĐĐT (bên bán — giống trang bán hàng) ──
async function xuatHDDTDoiHang(saleId){
  try{
    const data=await (await fetch('/api/einvoice/sales/'+saleId)).json();
    if(!data.success){ alert('❌ '+(data.error||'Lỗi tải dữ liệu hóa đơn')); return; }
    if(!data.configured){ alert('⚠️ Chưa cấu hình HĐĐT. 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})))))
      .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)); }
}

// ── CK MB (chuyển tiền chênh cho khách — giống Mua hàng) ──
let _currentCkData=null;
let _currentCkMobileData=null;
let _qrChuyenKhoanRequest=0;
function openCkMbDoiHang(id){
  const x=_dhList.find(v=>v.id===id); if(!x) return;
  const soTien=Math.round((x.net_ck||0)*1000);
  const noiDungCk=(x.khach_hang&&x.ma_gd)?`Doi hang ${x.ma_gd} cho KH ${x.khach_hang}`:'';
  openMBBankFromDoiHang({ soTk:x.so_tk, nganHang:x.ngan_hang, tenTk:x.ten_tk, noiDungCk, soTien, maGd:x.ma_gd, khachHang:x.khach_hang });
}
function openMBBankFromDoiHang(o){
  const noiDungCk=o.noiDungCk||''; const detail={...o, noiDungCk, _ts:Date.now()};
  document.getElementById('ck-mb-nganhang').textContent=o.nganHang||'—';
  document.getElementById('ck-mb-sotk').textContent=o.soTk||'—';
  document.getElementById('ck-mb-tentk').textContent=o.tenTk||'—';
  document.getElementById('ck-mb-sotien').textContent=Number(o.soTien||0).toLocaleString('vi-VN')+' đ';
  document.getElementById('ck-mb-noidung').textContent=noiDungCk;
  const bank=_matchBank(o.nganHang);
  const qrDiv=document.getElementById('ck-mb-qr');
  const qrHint=document.getElementById('ck-mb-qr-hint');
  const qrRequest=++_qrChuyenKhoanRequest;
  if(bank&&o.soTk&&o.soTien){
    qrDiv.replaceChildren();
    if(qrHint) qrHint.classList.add('hidden');
    VangPOSQrChuyenKhoan.taoNoiBo({
      maNganHang:bank.code, soTaiKhoan:o.soTk,
      soTienVnd:Math.round(o.soTien), noiDung:noiDungCk,
    }).then(qrData=>{
      if(qrRequest!==_qrChuyenKhoanRequest) return;
      if(!qrData){ qrDiv.textContent='Không tạo được mã QR nội bộ. Vui lòng chuyển khoản thủ công.'; return; }
      const img=document.createElement('img');
      img.src=qrData; img.alt='Mã QR chuyển khoản';
      img.className='w-44 h-44 rounded-xl border mx-auto';
      qrDiv.replaceChildren(img);
      if(qrHint) qrHint.classList.remove('hidden');
    });
  } else { qrDiv.replaceChildren(); if(qrHint) qrHint.classList.add('hidden'); }
  _currentCkMobileData=[bank, o.soTk, o.tenTk, o.soTien, noiDungCk];
  _setDeeplinkBtn(bank, o.soTk, o.tenTk, o.soTien, noiDungCk);
  if(o.soTk&&navigator.clipboard) navigator.clipboard.writeText(o.soTk).catch(()=>{});
  _currentCkData=detail;
  fetch('/api/mb-transfer',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(detail)})
    .then(r=>r.json()).then(d=>{ if(d.token) detail._serverToken=d.token; })
    .catch(()=>{}).finally(()=>window.dispatchEvent(new CustomEvent('pos_mb_transfer',{detail})));
  document.getElementById('ck-mb-modal').classList.remove('hidden');
}
function openMBBankOnline(){
  if(_currentCkData){ _currentCkData._ts=Date.now(); window.dispatchEvent(new CustomEvent('pos_mb_transfer',{detail:_currentCkData})); }
  // 18/08/2026: SỬA — trước mở /cp/pl/login (đăng nhập CÁ NHÂN) trong khi tiệm dùng
  // Biz MBBank (doanh nghiệp) → đăng nhập xong extension tự điều hướng sang
  // /biz/cash-management/... (mbbank_fill.js TRANSFER_URL) mà phiên cá nhân không
  // khớp phiên Biz → trang cứ quay không load được. Mở THẲNG cổng Biz.
  // 20/08/2026: thêm 'noopener,noreferrer' — chủ tiệm kiểm chứng "mở tay bình
  // thường, mở qua app thì quay" → cổng Biz MBBank rất có thể chặn tab được mở
  // kèm window.opener trỏ về trang lạ (chống clickjacking). Xem giải thích đầy đủ
  // ở purchase_form.html openMBBankOnline() — cùng nguyên nhân, sửa đồng bộ.
  setTimeout(()=>window.open('https://ebank.mbbank.com.vn/biz/','_blank','noopener,noreferrer'),150);
}
function _copyCkField(id){
  const text=document.getElementById(id).textContent.trim();
  if(!navigator.clipboard){ alert('📋 '+text); return; }
  navigator.clipboard.writeText(text).then(()=>{ const el=document.getElementById(id), prev=el.style.color; el.style.color='#16a34a'; setTimeout(()=>{el.style.color=prev;},900); }).catch(()=>{});
}

// ── NGÂN HÀNG: gợi ý từ danh sách MB (y hệt phiếu mua hàng) ──
let MB_BANKS=[];
fetch('/api/mb-banks').then(r=>r.json()).then(d=>{ MB_BANKS=d.banks||[]; }).catch(()=>{});
window.addEventListener('mb_banks_ready', e=>{ MB_BANKS=e.detail||[]; });
let BANKS=[];
fetch('/static/data/vn_banks.json').then(r=>r.json()).then(d=>BANKS=d).catch(()=>{});

// ── Deep link mở THẲNG app ngân hàng của tiệm trên điện thoại (VietQR dl.vietqr.io) ──
// Xem giải thích đầy đủ ở purchase_form.html (cùng logic, copy nguyên).
// Khớp tên NH nhập tay — xem giải thích đầy đủ ở purchase_form.html (cùng logic, copy nguyên).
function _matchBank(nganHangText){
  const raw=(nganHangText||'').trim(); if(!raw) return null;
  const m=raw.match(/\(([A-Za-z]{2,6})\)\s*$/);
  if(m){ const byCode=BANKS.find(b=>(b.code||'').toLowerCase()===m[1].toLowerCase()); if(byCode) return byCode; }
  const q=raw.toLowerCase();
  return BANKS.find(b=>b.shortName.toLowerCase().includes(q)||b.name.toLowerCase().includes(q)||q.includes(b.shortName.toLowerCase()))||null;
}
function _vietqrDeeplink(bank,soTk,tenTk,soTien,noiDungCk){
  if(!bank||!bank.code||!soTk||!soTien) return null;
  const maApp=VangPOSNganHangNguon.layLuaChon(window.localStorage,'');
  return VangPOSNganHangNguon.taoDeeplink(maApp,{maNganHangNhan:bank.code,soTaiKhoan:soTk,tenTaiKhoan:tenTk,soTienVnd:Math.round(soTien),noiDung:noiDungCk||''});
}
function _setDeeplinkBtn(bank,soTk,tenTk,soTien,noiDungCk){
  const a=document.getElementById('ck-mb-deeplink'); if(!a) return;
  const url=_vietqrDeeplink(bank,soTk,tenTk,soTien,noiDungCk);
  const maApp=VangPOSNganHangNguon.layLuaChon(window.localStorage,'');
  const app=VangPOSNganHangNguon.danhSach().find(x=>x.ma===maApp);
  if(url&&app){ a.href=url; a.textContent=`📱 Mở ${app.ten} trên điện thoại`; a.classList.remove('hidden'); } else { a.href='#'; a.classList.add('hidden'); }
}
VangPOSNganHangNguon.ganLuaChon(document.getElementById('ck-mb-app-select'),window.localStorage,'',()=>{if(_currentCkMobileData)_setDeeplinkBtn(..._currentCkMobileData);});
const _boDauJs=s=>(s||'').normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/đ/g,'d').replace(/Đ/g,'D').toLowerCase();
function filterBanks(){
  const _bdNH = s => (s||'').normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/đ/g,'d').replace(/Đ/g,'D').toLowerCase();
  const q=_bdNH(document.getElementById('qt-nganhang').value.trim());
  const box=document.getElementById('qt-bank-suggest');
  if(!q){ box.classList.add('hidden'); box.innerHTML=''; return; }
  if(MB_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 — mọi máy/mọi trang sau đó dùng ngay.</div>';
    box.classList.remove('hidden'); return;
  }
  const matches=MB_BANKS.filter(name=>_bdNH(name).includes(q)).slice(0,12);
  if(!matches.length){ box.classList.add('hidden'); box.innerHTML=''; return; }
  const options=matches.map(name=>{
    const option=document.createElement('div');
    option.className='px-3 py-2 hover:bg-amber-50 cursor-pointer text-sm';
    option.textContent=name;
    option.addEventListener('click',()=>selectMBBank(name));
    return option;
  });
  box.replaceChildren(...options);
  box.classList.remove('hidden');
}
function selectMBBank(name){
  document.getElementById('qt-nganhang').value=name;
  document.getElementById('qt-nganhang-bin').value='';
  document.getElementById('qt-bank-suggest').classList.add('hidden');
  onQtInput();
}
function selectBankByBin(bin){
  const b=BANKS.find(x=>x.bin===bin); if(!b) return;
  let mbName=''; const cands=[b.shortName,b.code].filter(Boolean).map(_boDauJs);
  for(const nm of MB_BANKS){ if(cands.some(cd=>cd&&_boDauJs(nm).includes(cd))){ mbName=nm; break; } }
  document.getElementById('qt-nganhang').value=mbName||`${b.shortName} - ${b.name}`;
  document.getElementById('qt-nganhang-bin').value=b.bin;
  document.getElementById('qt-bank-suggest').classList.add('hidden');
}
document.addEventListener('click', e=>{
  if(!e.target.closest('#qt-nganhang') && !e.target.closest('#qt-bank-suggest')){ document.getElementById('qt-bank-suggest').classList.add('hidden'); }
});
// ── Quét QR chuyển khoản (VietQR/EMVCo) → tự điền NH + STK + chủ TK ──
function _parseTLV(str){ const r={}; let i=0; while(i+4<=str.length){ const id=str.substr(i,2), len=parseInt(str.substr(i+2,2),10); if(isNaN(len)||i+4+len>str.length) break; r[id]=str.substr(i+4,len); i+=4+len; } return r; }
function parseVietQR(text){ const root=_parseTLV(text), r={};
  if(root['38']){ const m=_parseTLV(root['38']); if(m['01']){ const b=_parseTLV(m['01']); r.bin=b['00']||''; r.so_tk=b['01']||''; } }
  return r; }
async function onQtBankQrScanned(text){
  const info=parseVietQR(text), msg=document.getElementById('qt-bank-msg');
  if(!info.bin && !info.so_tk){ msg.textContent='⚠️ Không đọc được thông tin chuyển khoản từ mã QR này.'; msg.className='text-xs text-amber-600'; return; }
  if(info.bin) selectBankByBin(info.bin);
  if(info.so_tk) document.getElementById('qt-sotk').value=info.so_tk;
  onQtInput();
  msg.textContent='✅ Đã điền Ngân hàng + STK từ mã QR.'; msg.className='text-xs text-green-700';
  if(info.bin && info.so_tk){
    msg.textContent='⏳ Đã điền NH + STK — đang tra tên chủ tài khoản...'; msg.className='text-xs text-gray-500';
    try{
      const d=await (await fetch('/api/pos/lookup-account', {method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify({bin:info.bin, so_tk:info.so_tk})})).json();
      if(d.success && d.ten_tk){ document.getElementById('qt-tentk').value=d.ten_tk; _tentkTouched=true; onQtInput();
        msg.textContent=`✅ Quét QR xong: đã điền Ngân hàng + STK + chủ TK "${d.ten_tk}".`; msg.className='text-xs text-green-700 font-semibold'; }
      else { msg.textContent='✅ Đã điền NH + STK từ QR (không tra được tên chủ TK — đối chiếu với khách).'; msg.className='text-xs text-green-700'; }
    }catch(e){ msg.textContent='✅ Đã điền NH + STK từ QR (lỗi tra tên chủ TK).'; msg.className='text-xs text-amber-600'; }
  }
}

// init
loadData().then(()=>{ addMuaRow(); calcMua(); calcBan(); });
NguonGoc.khoiDong('doi_hang_nguon_goc', '#mua-list .item-row');
loadRecent();

// Nhân viên bán hàng: đổ danh sách + TỰ CHỌN người ĐANG ĐĂNG NHẬP (25/08/2026, sửa lỗi doanh
// thu đổi hàng không tính KPI — cùng pattern sel-nhanvien của pos.html, xem CLAUDE.md).
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('dh-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 đổi hàng */ }
})();
</script>
{% endblock %}