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

{% block extra_style %}
<style>
  .ios-group {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
    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; }
  .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;
  }
  /* Khung chứa dropdown gợi ý (ô Ngân hàng) — KHÔNG được overflow:hidden, nếu không
     hộp gợi ý xổ xuống dưới đáy khung sẽ bị cắt cụt (vô hình). Bo góc dải tiêu đề
     bằng tay để giữ nguyên hình dáng như các khung khác. */
  .section-card.allow-overflow { overflow: visible; }
  .section-card.allow-overflow .section-head { border-radius: 15px 15px 0 0; }
  /* Thẻ hàng mua — 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: end; justify-content: space-between; gap: 12px;
    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 để ô trọng lượng/tiền rộng bằng cả hàng */
  @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; }
  }
  .po-flash { animation: poFlash 1.6s ease; }
  @keyframes poFlash { 0%,100% { background-color: transparent; } 25% { background-color: #fef3c7; } }
  /* Thẻ bài tab chính (giống pawn.html) */
  .main-tab-card {
    flex: 1; min-width: 150px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 16px 20px; border-radius: 16px; cursor: pointer;
    border: 2px solid #e8c84a;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
    font-family: inherit; text-align: center;
  }
  .main-tab-card-active {
    background: linear-gradient(140deg, #7a5500, #b8820a 45%, #e8b820);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 18px rgba(180,130,10,.32);
  }
  .main-tab-card-inactive { background: #fff; color: #7a5500; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
  .main-tab-card-inactive:hover { background: #fffbeb; }
</style>
{% endblock %}

{% block content %}

  <!-- ── TABS ── -->
  <div class="flex gap-3">
    <button onclick="showTab('lap')" id="tab-lap" class="main-tab-card main-tab-card-active">
      <span class="text-3xl leading-none">⚖️</span>
      <span class="text-[15px] font-black tracking-wide">Lập phiếu</span>
      <span class="text-[11px] font-normal opacity-80">Tạo phiếu mua hàng mới</span>
    </button>
    <button onclick="showTab('theodoi')" id="tab-theodoi" class="main-tab-card main-tab-card-inactive">
      <span class="text-3xl leading-none">📋</span>
      <span class="text-[15px] font-black tracking-wide">Mua hàng gần đây</span>
      <span class="text-[11px] font-normal opacity-70">Tra cứu, sửa, in phiếu đã lập</span>
    </button>
  </div>

  <!-- ════════════════ TAB: LẬP PHIẾU ════════════════ -->
  <div id="section-lap" class="space-y-4">
  <div class="ios-card p-5 space-y-4" style="border:1.5px solid #fde68a">
    <div class="flex justify-between items-center">
      <h2 class="font-bold text-gray-700 text-base">📝 Mua hàng (mua vàng/trang sức từ khách)</h2>
      <input id="pin-input" type="password" inputmode="numeric" maxlength="10" placeholder="Mã PIN..."
        class="input-ios text-sm font-bold text-center tracking-widest w-28">
    </div>

    <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:'kh-ten', cccd:'kh-cccd', diachi:'kh-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 class="text-red-500">*</span></span>
            <input id="kh-ten" type="text" placeholder="Nhập họ tên..." class="ios-field-input" oninput="autoNoidung(); syncTenTk(); window._crmSuggest(this);" onblur="window._crmBlur()" data-huong-dan="mua-nguoi-ban">
          </div>
          <div class="ios-field-row relative">
            <span class="ios-field-label">Số CCCD</span>
            <input id="kh-cccd" type="text" placeholder="Gõ hoặc quét QR" class="ios-field-input">
          </div>
          <div class="text-xs text-amber-700 bg-amber-50 px-4 py-2">Thiếu CCCD vẫn lập và in được phiếu nội bộ sau khi xác nhận. Nếu giao dịch thuộc diện lập bảng kê 02/TNDN, cần ghi thông tin theo mẫu.</div>
          <div class="ios-field-row">
            <span class="ios-field-label">Địa chỉ</span>
            <input id="kh-diachi" type="text" placeholder="Địa chỉ khách hàng" class="ios-field-input">
          </div>
          <div class="ios-field-row relative">
            <span class="ios-field-label">Điện thoại</span>
            <input id="kh-dt" type="text" placeholder="Số điện thoại" class="ios-field-input" oninput="window._crmSuggest(this)" onblur="window._crmBlur()">
          </div>
        </div>
      </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="onHtttChange()" data-huong-dan="mua-thanh-toan">
            <option value="tien_mat">💵 Tiền mặt</option>
            <option value="chuyen_khoan" selected>🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 TM/CK</option>
          </select>
          <div id="split-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); _renderThucRa()">
            </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); _renderThucRa()">
            </div>
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Làm tròn tiền</label>
            <div class="flex gap-2">
              <select id="sel-lamtron" class="input-ios cursor-pointer text-sm" style="max-width:10rem" onchange="onLamTronChange()">
                <option value="none" selected>Không</option>
                <option value="chi_them">➕ Chi thêm</option>
                <option value="thu_bot">➖ Thu bớt</option>
              </select>
              <input id="inp-lamtron" type="text" inputmode="numeric" placeholder="0 ₫"
                class="input-ios text-sm flex-1" style="display:none"
                oninput="onSplitAmtInput(this); recalcTotal(); _renderThucRa()">
            </div>
            <!-- Khi thanh toán TM/CK (cả hai): tách rõ phần làm tròn theo từng kênh -->
            <div id="lamtron-split" class="gap-2 mt-2" style="display:none">
              <div class="flex-1">
                <label class="block text-xs text-gray-400 mb-0.5">Làm tròn — Tiền mặt (₫)</label>
                <input id="lamtron-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full"
                  oninput="onSplitAmtInput(this); recalcTotal(); _renderThucRa()">
              </div>
              <div class="flex-1">
                <label class="block text-xs text-gray-400 mb-0.5">Làm tròn — Chuyển khoản (₫)</label>
                <input id="lamtron-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full"
                  oninput="onSplitAmtInput(this); recalcTotal(); _renderThucRa()">
              </div>
            </div>
            <p id="lamtron-hint" class="hidden text-[11px] text-gray-400 mt-1">Khoản này cộng/trừ thẳng vào Tổng cộng và sổ quỹ.</p>
            <p id="lamtron-thucra" class="hidden text-[11px] text-blue-600 mt-1 font-semibold"></p>
          </div>
          <div id="bank-fields" class="hidden">
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Nội dung chuyển khoản</label>
            <input id="kh-noidungck" type="text" placeholder="Thanh toán tiền mua vàng (bạc) của khách hàng..."
              class="w-full input-ios">
          </div>
        </div>
      </div>
    </div>

    <!-- ③ Thông tin tài khoản nhận tiền (luôn hiển thị) -->
    <div class="section-card allow-overflow">
      <div class="section-head text-blue-900" style="background:linear-gradient(90deg,#eff6ff,#dbeafe)">
        <span>🏦 Thông tin tài khoản nhận tiền</span>
        <button type="button" class="scan-btn !normal-case !text-[11px] !font-semibold" onclick="openScanner('vietqr', onBankQrScanned)">📷 Quét QR ngân hàng của khách</button>
      </div>
      <div class="p-4 space-y-3">
        <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-3">
          <div class="relative">
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngân hàng</label>
            <input id="kh-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="kh-nganhang-bin">
            <div id="bank-suggest" class="hidden absolute z-20 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="kh-sotk" type="text" placeholder="Nhập số tài khoản" class="input-ios w-full">
          </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="kh-tentk" type="text" placeholder="Mặc định theo họ tên khách" class="input-ios w-full" oninput="_tentkTouched = true">
          </div>
        </div>
      </div>
    </div>

    <!-- ④ Hàng mua — 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 mua (<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>
      <div id="item-list" class="p-3 space-y-2.5" data-huong-dan="mua-hang"></div>
      <div class="px-4 pb-3 border-t border-green-100 pt-2.5">
        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
          <input type="checkbox" id="chk-nhapkho" checked class="rounded accent-green-600" data-huong-dan="mua-nhap-kho">
          <span>📦 Tự nhập hàng vào <strong>Tồn kho</strong> <span class="text-[11px] text-gray-400">(dùng mã hàng trên phiếu, giá vốn = thành tiền mua — không ghi thêm gì vào sổ quỹ)</span></span>
        </label>
        <p id="nhapkho-note" class="hidden text-[11px] text-amber-600 mt-1"></p>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 items-end pt-1">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ghi chú</label>
        <input id="inp-ghichu" type="text" placeholder="Ghi chú thêm"
          class="w-full input-ios">
      </div>
      <!-- ĐT: xếp DỌC + nút full-width (trước đây flex ngang không wrap → nút "Lưu phiếu
           & in" bị đẩy khỏi màn hình bên phải). Máy tính (sm+): 1 hàng, canh phải. -->
      <div class="flex flex-col sm:flex-row sm:flex-wrap sm:justify-end items-stretch sm:items-center gap-3">
        <div class="text-lg font-bold text-gray-700 bg-amber-50 rounded-2xl px-4 py-2 text-center sm:text-left sm:mr-auto">Tổng cộng: <span id="lbl-tong" class="text-amber-700">0</span> đ</div>
        <button type="button" onclick="poSaveDraft()" class="btn-ios btn-ios-secondary w-full sm:w-auto px-5 py-3 sm:py-2.5 whitespace-nowrap">💾 Lưu nháp &amp; làm bản mới</button>
        <button onclick="submitOrder()" data-huong-dan="mua-luu-phieu"
          class="btn-ios btn-ios-gold w-full sm:w-auto px-6 py-3 sm:py-2.5 whitespace-nowrap font-bold">
          ✅ Lưu phiếu &amp; in
        </button>
      </div>
    </div>
    <!-- Danh sách bản nháp đã lưu (server, gắn người tạo) — chọn sửa tiếp rồi lập phiếu sau -->
    <div id="po-drafts-box" class="hidden rounded-xl border border-amber-200 p-3 mt-2" style="background:#fffbeb">
      <div class="text-xs font-bold text-amber-800 uppercase tracking-wide mb-2">📝 Bản nháp đã lưu — chọn để sửa tiếp rồi lập phiếu</div>
      <div id="po-drafts-list" class="space-y-2"></div>
    </div>
    <p id="po-msg" class="text-sm"></p>
  </div>
  </div>
  <!-- ════════════════ /TAB: LẬP PHIẾU ════════════════ -->

  <!-- ════════════════ TAB: MUA HÀNG GẦN ĐÂY ════════════════ -->
  <div id="section-theodoi" class="hidden space-y-4">
  <!-- Lịch sử -->
  <div class="ios-card overflow-hidden">
    <!-- ĐT: wrap để ô tìm + nút Xuất Excel không bị thẻ overflow-hidden CẮT (trước đây flex
         ngang không wrap, nút Xuất bị đẩy khỏi khung). -->
    <div class="px-5 py-3.5 flex flex-wrap justify-between items-center gap-2" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span class="font-extrabold text-gray-800">🧾 Mua hàng gần đây</span>
      <div class="flex items-center gap-2 flex-1 sm:flex-none justify-end min-w-0">
        <div class="flex items-center gap-1 flex-1 sm:flex-none min-w-0">
          <input id="inp-search-po" type="text" placeholder="Tìm mã, khách, SĐT..." autocomplete="off"
            readonly onfocus="this.removeAttribute('readonly')"
            class="input-ios-sm w-full sm:w-44 font-normal min-w-0" oninput="renderPoTable()">
          <button onclick="document.getElementById('inp-search-po').value='';renderPoTable();"
            class="text-gray-400 hover:text-gray-600 text-xl leading-none font-normal flex-shrink-0" title="Xóa">×</button>
        </div>
        <a href="/api/pos/purchase-orders/export" class="btn-ios btn-ios-secondary text-xs font-bold text-amber-700 px-3 py-1.5 flex-shrink-0 whitespace-nowrap">⬇️ Xuất Excel</a>
      </div>
    </div>
    <div id="po-summary" class="so-tong px-5 pt-4 grid grid-cols-2 sm:grid-cols-4 gap-2.5"></div>
    <div id="po-tbody" class="p-4 space-y-3"></div>
  </div>
  </div>
  <!-- ════════════════ /TAB: MUA HÀNG GẦN ĐÂY ════════════════ -->
{% 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 CAN_EDIT = {{ 'true' if can_edit else 'false' }};
const PIN_KEY = 'vang_admin_pin';
let _myRole = window._NV_ROLE || null;
(async () => { try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; renderPoTable(); } catch(e){} })();
let _allPOs = [];
const fmt = n => Number(n||0).toLocaleString('vi-VN');

// ── Tabs ──
function showTab(tab) {
  document.getElementById('section-lap').classList.toggle('hidden', tab !== 'lap');
  document.getElementById('section-theodoi').classList.toggle('hidden', tab !== 'theodoi');
  document.getElementById('tab-lap').className = 'main-tab-card ' + (tab === 'lap' ? 'main-tab-card-active' : 'main-tab-card-inactive');
  document.getElementById('tab-theodoi').className = 'main-tab-card ' + (tab === 'theodoi' ? 'main-tab-card-active' : 'main-tab-card-inactive');
  if (tab === 'theodoi') loadOrders();
}

// Chuyển sang tab "Mua hàng gần đây" + cuộn tới đúng phiếu vừa lập/sửa
async function lookupPurchaseTicket(maGd) {
  maGd = (maGd || '').trim();
  if (!maGd) return;
  showTab('theodoi');
  await loadOrders();
  document.getElementById('inp-search-po').value = '';
  // Phiếu nằm trong nhóm khách (đang gấp) → mở sẵn nhóm chứa nó rồi mới render + cuộn
  const po = _allPOs.find(o => o.ma_gd === maGd);
  if (po) _poExpanded[_poCustKey(po)] = true;
  renderPoTable();
  setTimeout(() => {
    const el = document.querySelector(`#po-tbody [data-ma-gd="${maGd}"]`);
    if (!el) return;
    el.scrollIntoView({behavior:'smooth', block:'center'});
    el.classList.add('po-flash');
    setTimeout(() => el.classList.remove('po-flash'), 1600);
  }, 200);
}
document.getElementById('pin-input').value = localStorage.getItem(PIN_KEY) || '';
document.getElementById('pin-input').addEventListener('input', e => localStorage.setItem(PIN_KEY, e.target.value.trim()));
function getPin() { return document.getElementById('pin-input').value.trim(); }

// 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 ten = document.getElementById('kh-ten').value.trim();
  document.getElementById('kh-tentk').value = ten;
}

function onHtttChange() {
  const v = document.getElementById('sel-hinhthuc').value;
  document.getElementById('bank-fields').classList.toggle('hidden', v === 'tien_mat');
  document.getElementById('split-row').style.display = v === 'ca_hai' ? 'flex' : 'none';
  _renderLamTron();   // đổi TM/CK ↔ đơn kênh → đổi luôn cách nhập làm tròn
}

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="inp-ten input-ios-sm flex-1 font-semibold" placeholder="Tên hàng — VD: Nhẫn Tròn" onblur="autoGenMaHang(this)">
      <button onclick="nhanBanRow(this)" title="Nhân bản dòng này" class="w-7 h-7 rounded-full bg-teal-50 hover:bg-teal-100 text-teal-600 flex items-center justify-center flex-shrink-0 transition active:scale-90">📄</button>
      <button onclick="removeRow(this)" 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-3 gap-2">
        <div>
          <span class="item-mini-label">Mã hàng</span>
          <input class="inp-mahang input-ios-sm w-full font-mono text-xs" placeholder="Tự sinh">
        </div>
        <div>
          <span class="item-mini-label">Chất liệu / Tuổi</span>
          <input class="inp-chatlieu input-ios-sm w-full" placeholder="VD: 9999 / 750"
                 oninput="poGoiYGia(this)">
        </div>
        <div>
          <span class="item-mini-label">Đơn vị</span>
          <select class="inp-donvi input-ios-sm w-full" onchange="recalcRow(this);poGoiYGia(this)">
            <option value="Món">Món</option>
            <option value="Chỉ" selected>Chỉ</option>
            <option value="Gram">Gram</option>
            <option value="Cái">Cái</option>
            <option value="Đôi">Đôi</option>
            <option value="Bộ">Bộ</option>
            <option value="Sản phẩm">Sản phẩm</option>
          </select>
        </div>
      </div>
      <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 TL</span>
            <input type="number" step="0.0001" class="inp-ttl input-ios-sm w-full text-right" oninput="recalcRow(this)">
          </div>
          <div class="mini-field">
            <span class="item-mini-label">Đá &amp; hao</span>
            <input type="number" step="0.0001" value="0" class="inp-dvh input-ios-sm w-full text-right" oninput="recalcRow(this)">
          </div>
          <div class="mini-field">
            <span class="item-mini-label">TL tịnh</span>
            <div class="inp-tlt input-ios-sm w-full text-right font-bold flex items-center justify-end" style="background:#fef9ec;color:#92400e">0</div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-foot">
      <div class="flex-1 mini-field" style="max-width:220px">
        <span class="item-mini-label">Đơn giá (đ)</span>
        <input type="text" inputmode="numeric" class="inp-gia input-ios-sm w-full text-right font-semibold" oninput="onSplitAmtInput(this);recalcRow(this);poGiaHint(this)" placeholder="0">
        <div class="gia-hint text-[11px] leading-tight mt-0.5" style="min-height:14px"></div>
      </div>
      <div class="text-right pb-0.5">
        <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>
  </div>`;
}

function addRow() {
  document.getElementById('item-list').insertAdjacentHTML('beforeend', rowTemplate());
  NguonGoc.veHop(document.getElementById('item-list').lastElementChild);   // tùy chỉnh NSX/NPP (tắt = không vẽ gì)
  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;
}

// Mã đã cấp trong phiên hiện tại (tránh trùng giữa các dòng chưa lưu)
const _generatedCodes = new Set();

async function autoGenMaHang(el) {
  const row = el.closest('.item-row');
  const maInput = row.querySelector('.inp-mahang');
  const ten = el.value.trim();
  if (!ten || maInput.value.trim()) return;
  try {
    const exclude = [..._generatedCodes].join(',');
    const url = '/api/pos/gen-ma-hang?ten_hang=' + encodeURIComponent(ten)
              + (exclude ? '&exclude=' + encodeURIComponent(exclude) : '');
    const data = await fetch(url).then(r => r.json());
    if (data.ma_hang) {
      maInput.value = data.ma_hang;
      _generatedCodes.add(data.ma_hang);
    }
  } catch (e) {}
}

function removeRow(btn) {
  const row = btn.closest('.item-row');
  const ma = (row.querySelector('.inp-mahang').value || '').trim();
  if (ma) _generatedCodes.delete(ma);
  row.remove();
  renumberRows();
  recalcTotal();
}

// ── NHÂN BẢN DÒNG HÀNG (29/09/2026, chủ tiệm yêu cầu) ─────────────────────
// Copy y hệt 1 dòng hàng mua (tên/chất liệu/đơn vị/trọng lượng/đơn giá) sang dòng
// MỚI ngay bên dưới — dùng khi khách bán nhiều món GIỐNG HỆT nhau (cùng loại,
// cùng cân). CHỈ mã hàng KHÔNG copy — luôn tự sinh mã MỚI (autoGenMaHang, giống
// hệt cách dòng thường tự cấp mã) để không trùng mã giữa các dòng.
function nhanBanRow(btn) {
  const row = btn.closest('.item-row');
  const ten = row.querySelector('.inp-ten').value;
  const chatLieu = row.querySelector('.inp-chatlieu').value;
  const donVi = row.querySelector('.inp-donvi').value;
  const ttl = row.querySelector('.inp-ttl').value;
  const dvh = row.querySelector('.inp-dvh').value;
  const gia = row.querySelector('.inp-gia').value;

  row.insertAdjacentHTML('afterend', rowTemplate());
  const newRow = row.nextElementSibling;
  newRow.querySelector('.inp-ten').value = ten;
  newRow.querySelector('.inp-chatlieu').value = chatLieu;
  newRow.querySelector('.inp-donvi').value = donVi;
  newRow.querySelector('.inp-ttl').value = ttl;
  newRow.querySelector('.inp-dvh').value = dvh;
  newRow.querySelector('.inp-gia').value = gia;
  NguonGoc.dat(newRow, NguonGoc.layTho(row));   // nhân bản luôn NSX/NPP/Xuất xứ
  NguonGoc.veHop(newRow);

  renumberRows();
  recalcRow(newRow.querySelector('.inp-gia'));   // tính lại TL tịnh + thành tiền + hint giá
  autoGenMaHang(newRow.querySelector('.inp-ten'));   // mã hàng: luôn cấp mã MỚI, không copy

  newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
  newRow.style.transition = 'background-color .15s';
  newRow.style.backgroundColor = '#f0fdfa';
  setTimeout(() => { newRow.style.backgroundColor = ''; }, 900);
}

const _WEIGHT_UNITS = new Set(['Chỉ', 'Gram', 'chỉ', 'gram']);

function recalcRow(el) {
  const row = el.closest('.item-row');
  const ttl = parseFloat(row.querySelector('.inp-ttl').value) || 0;
  const dvh = parseFloat(row.querySelector('.inp-dvh').value) || 0;
  const gia = parseFloat((row.querySelector('.inp-gia').value||'').replace(/\./g,'')) || 0;
  const donVi = row.querySelector('.inp-donvi').value;
  const tlt = klvExact(ttl, dvh);
  const tt = _WEIGHT_UNITS.has(donVi) ? tlt * gia : gia;
  row.querySelector('.inp-tlt').textContent = tlt.toLocaleString('vi-VN', {maximumFractionDigits: 4});
  row.querySelector('.inp-tt').textContent = fmt(tt) + ' đ';
  recalcTotal();
  if (row.querySelector('.gia-hint')) poGiaHint(el);   // hint đối chiếu giá bảng luôn tươi
}

// ── GỢI Ý ĐƠN GIÁ MUA THEO BẢNG GIÁ CỬA HÀNG (chủ tiệm chốt 25/07/2026) ────────
// Gõ Chất liệu (VD 9999) → ô Đơn giá TỰ ĐIỀN giá MUA từ bảng giá (đ/chỉ), sửa được;
// hint ngay dưới ô đơn giá luôn ĐỐI CHIẾU với giá bảng (đúng/lệch/chưa có giá).
// AN TOÀN TIỀN: chỉ tự điền khi ô đang TRỐNG hoặc vẫn là số máy điền lần trước
// (row.dataset.giaAuto) — KHÔNG bao giờ đè số người dùng đã gõ tay.
let _poPriceMua = {};   // {loại vàng: giá MUA (nghìn/chỉ)} từ bảng giá hiện hành
fetch('/api/prices').then(r => r.json()).then(d => {
  (d.prices || []).forEach(p => { _poPriceMua[p.loai] = p.mua; });
}).catch(() => {});
function _poTimGiaMua(chatlieu) {          // khớp MỘT PHẦN như findGiaVang của trang Bán
  if (!chatlieu) return [0, ''];
  const lo = chatlieu.replace(/^Vàng\s+/i, '').trim();
  if (_poPriceMua[lo] !== undefined) return [_poPriceMua[lo], lo];
  for (const [k, v] of Object.entries(_poPriceMua)) {
    if (lo === k || lo.includes(k) || k.includes(lo)) return [v, k];
  }
  return [0, ''];
}
function poGoiYGia(el) {
  const row = el.closest('.item-row'); if (!row) return;
  const cl = row.querySelector('.inp-chatlieu').value.trim();
  const donVi = row.querySelector('.inp-donvi').value;
  const giaEl = row.querySelector('.inp-gia');
  const giaDong = Math.round((_poTimGiaMua(cl)[0] || 0) * 1000);
  if (giaDong > 0 && _WEIGHT_UNITS.has(donVi)) {
    const cur = parseFloat((giaEl.value || '').replace(/\./g, '')) || 0;
    if (!cur || String(row.dataset.giaAuto) === String(cur)) {
      giaEl.value = fmt(giaDong);
      row.dataset.giaAuto = giaDong;
      recalcRow(giaEl);
      return;                              // recalcRow đã gọi poGiaHint
    }
  }
  poGiaHint(giaEl);
}
function poGiaHint(el) {
  const row = el.closest('.item-row'); if (!row) return;
  const hint = row.querySelector('.gia-hint'); if (!hint) return;
  const cl = row.querySelector('.inp-chatlieu').value.trim();
  const donVi = row.querySelector('.inp-donvi').value;
  const cur = parseFloat((row.querySelector('.inp-gia').value || '').replace(/\./g, '')) || 0;
  if (!cl || !_WEIGHT_UNITS.has(donVi)) { hint.textContent = ''; return; }
  const [giaNghin, khop] = _poTimGiaMua(cl);
  const giaDong = Math.round((giaNghin || 0) * 1000);
  if (!giaDong) {
    hint.innerHTML = '<span style="color:#dc2626;font-weight:600">⚠️ Loại "' + cl.replace(/</g, '&lt;')
                   + '" chưa có trong bảng giá — tự kiểm tra đơn giá</span>';
  } else if (cur === giaDong) {
    hint.innerHTML = '<span style="color:#16a34a;font-weight:600">💡 Đúng giá bảng mua ' + khop
                   + ': ' + fmt(giaDong) + ' đ/chỉ (sửa được)</span>';
  } else {
    hint.innerHTML = '<span style="color:#d97706;font-weight:700">⚠️ Khác giá bảng mua ' + khop
                   + ' (' + fmt(giaDong) + ' đ/chỉ) — kiểm tra/điều chỉnh nếu cần</span>';
  }
}

function _amtDong(id) {
  return parseFloat((document.getElementById(id).value || '').replace(/\./g, '')) || 0;
}
// Tổng tiền HÀNG (Σ dòng, đồng) — chưa gồm làm tròn.
function _itemsTotalDong() {
  let total = 0;
  document.querySelectorAll('#item-list .item-row').forEach(row => {
    const ttl = parseFloat(row.querySelector('.inp-ttl').value) || 0;
    const dvh = parseFloat(row.querySelector('.inp-dvh').value) || 0;
    const gia = parseFloat((row.querySelector('.inp-gia').value||'').replace(/\./g,'')) || 0;
    const donVi = row.querySelector('.inp-donvi').value;
    const tlt = klvExact(ttl, dvh);
    total += _WEIGHT_UNITS.has(donVi) ? tlt * gia : gia;
  });
  return total;
}
// Tiền HÀNG chia kênh [TM, CK] theo hình thức thanh toán CHÍNH của phần mua.
function _goodsSplitDong() {
  const httt = document.getElementById('sel-hinhthuc').value;
  const items = _itemsTotalDong();
  if (httt === 'ca_hai') return [_amtDong('split-tm'), _amtDong('split-ck')];
  if (httt === 'tien_mat') return [items, 0];
  return [0, items];   // chuyển khoản
}
function recalcTotal() {
  document.getElementById('lbl-tong').textContent = fmt(_itemsTotalDong() + getLamTronDong());
}

// ── Làm tròn tiền (+ = chi thêm / − = thu bớt): LUÔN tách 2 ô TM/CK, ĐỘC LẬP với
//    hình thức thanh toán chính (VD mua trả tiền mặt nhưng làm tròn chuyển khoản). ──
function _lamTronActive() {
  return document.getElementById('sel-lamtron').value !== 'none';
}
function getLamTronDong() {
  if (!_lamTronActive()) return 0;
  const v = _amtDong('lamtron-tm') + _amtDong('lamtron-ck');
  return document.getElementById('sel-lamtron').value === 'thu_bot' ? -v : v;
}

function _renderLamTron() {
  const active = _lamTronActive();
  document.getElementById('inp-lamtron').style.display = 'none';   // đã tách 2 ô, không dùng ô gộp
  document.getElementById('lamtron-split').style.display = active ? 'flex' : 'none';
  document.getElementById('lamtron-hint').classList.toggle('hidden', !active);
  recalcTotal();
  _renderThucRa();
}
function onLamTronChange() { _renderLamTron(); }

// Dòng "Thực trả" từng kênh = tiền hàng (theo hình thức chính) + làm tròn kênh đó.
function _renderThucRa() {
  const el = document.getElementById('lamtron-thucra');
  if (!_lamTronActive()) { el.classList.add('hidden'); return; }
  const sign = document.getElementById('sel-lamtron').value === 'thu_bot' ? -1 : 1;
  const g = _goodsSplitDong();
  const tm = g[0] + sign * _amtDong('lamtron-tm');
  const ck = g[1] + sign * _amtDong('lamtron-ck');
  el.innerHTML = `→ Thực trả: Tiền mặt <b>${fmt(tm)} ₫</b> · Chuyển khoản <b>${fmt(ck)} ₫</b> <span class="text-gray-400">(đã gồm làm tròn)</span>`;
  el.classList.remove('hidden');
}

function resetLamTron() {
  document.getElementById('sel-lamtron').value = 'none';
  document.getElementById('inp-lamtron').value = '';
  document.getElementById('lamtron-tm').value = '';
  document.getElementById('lamtron-ck').value = '';
  onLamTronChange();
}

// ── Nhãn lỗi thân thiện cho phiếu mua ──
function _poErrLabel(e) {
  e = e || '';
  if (e === 'wrong_pin') return 'Sai mã PIN';
  if (e === 'forbidden_role') return 'Chỉ Giám đốc / Phó Giám đốc được thao tác này';
  if (e === 'vi_pham_quy_dinh') return 'Vi phạm quy định nghiệp vụ — xem lại thông tin phiếu';
  if (e.startsWith('ma_hang_ton_tai_trong_kho:'))
    return `Mã hàng ${e.split(':')[1]} đã có trong Tồn kho — đổi mã khác hoặc xóa mã để hệ thống tự cấp.`;
  if (e.startsWith('san_pham_da_su_dung:'))
    return `Món ${e.split(':')[1]} đã BÁN hoặc GỬI XƯỞNG — không thể sửa/xóa dòng này khỏi phiếu. Xử lý hóa đơn/phiếu xưởng liên quan trước.`;
  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.`;
  return 'Lỗi: ' + e;
}

// Chế độ nhập kho: khi SỬA phiếu thì giữ theo phiếu gốc, không cho đổi
function _setNhapKhoEditMode(po) {
  const chk = document.getElementById('chk-nhapkho');
  const note = document.getElementById('nhapkho-note');
  chk.checked = !!(po && po.nhap_kho);
  chk.disabled = true;
  note.innerHTML = chk.checked
    ? 'Đang sửa phiếu: các món sẽ tự đồng bộ với Tồn kho (món bị bỏ → xóa khỏi kho, món thêm → nhập kho).'
    // Phiếu CHƯA nhập kho → cho BẬT LẠI ngay tại đây (trước đây khoá cứng, lỡ tắt là kẹt luôn)
    : 'Phiếu này CHƯA nhập kho — hàng không có trong Tồn kho. '
      + `<button type="button" onclick="batNhapKho(${po && po.id})" `
      + 'class="underline font-bold text-green-700">📦 Đưa hàng vào Tồn kho ngay</button>';
  note.classList.remove('hidden');
}

// Bật nhập kho cho phiếu đã lưu mà lỡ tắt ô tick (không đụng sổ quỹ — tiền đã chi rồi)
async function batNhapKho(poId) {
  if (!poId) return;
  if (!confirm('Đưa toàn bộ hàng của phiếu này vào Tồn kho?\n\n'
             + 'Mỗi món sẽ thành 1 sản phẩm trong kho, giá vốn = số tiền đã trả.\n'
             + 'KHÔNG ghi thêm gì vào sổ quỹ (tiền đã chi lúc lập phiếu).')) return;
  const r = await fetch(`/api/pos/purchase-orders/${poId}/enable-nhap-kho`, {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({pin: getPin()})
  });
  const d = await r.json();
  if (d.success) {
    alert(`✅ Đã đưa ${d.so_mon} món vào Tồn kho:\n${(d.ma_hang || []).join(', ')}`);
    loadOrders();   // (trước ghi nhầm loadPOs — hàm không tồn tại)
    _resetEditMode();
  } else {
    alert('❌ ' + (d.message || d.error || 'Không bật được nhập kho'));
  }
}

function _resetNhapKho() {
  const chk = document.getElementById('chk-nhapkho');
  chk.checked = true; chk.disabled = false;
  document.getElementById('nhapkho-note').classList.add('hidden');
}

// 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 submitOrder() {
  const msg = document.getElementById('po-msg');
  const ten = document.getElementById('kh-ten').value.trim();
  if (!ten && _qdChan('mua_thieu_ten')) { msg.textContent = '⚠️ Vui lòng nhập tên khách hàng.'; msg.className = 'text-sm text-amber-600'; return; }
  // Địa chỉ vẫn theo quy định đã cấu hình; CCCD chỉ cần xác nhận cảnh báo trên máy chủ.
  if (!document.getElementById('kh-diachi').value.trim() && _qdChan('mua_thieu_cccd')) {
    msg.textContent = '⚠️ Phiếu mua hàng thiếu ĐỊA CHỈ người bán.';
    msg.className = 'text-sm text-amber-600'; return;
  }

  const items = [];
  document.querySelectorAll('#item-list .item-row').forEach(tr => {
    const ten_hang = tr.querySelector('.inp-ten').value.trim();
    const ttl = parseFloat(tr.querySelector('.inp-ttl').value) || 0;
    const dvh = parseFloat(tr.querySelector('.inp-dvh').value) || 0;
    const gia = parseFloat((tr.querySelector('.inp-gia').value||'').replace(/\./g,'')) || 0;
    if (!ten_hang && gia <= 0) return;
    items.push({
      ten_hang, chat_lieu: tr.querySelector('.inp-chatlieu').value.trim(),
      tong_trong_luong: ttl, da_va_hao: dvh, gia: gia / 1000,
      ma_hang: tr.querySelector('.inp-mahang').value.trim(),
      don_vi: tr.querySelector('.inp-donvi').value,
      so_luong: 1,
      ...NguonGoc.lay(tr),   // tùy chỉnh tắt → {} (payload y hệt cũ)
    });
  });
  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 httt = document.getElementById('sel-hinhthuc').value;
  const isEdit = _editPoId !== null;
  const isGdPgd = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;

  // ── Làm tròn tách 2 kênh TM/CK, ĐỘC LẬP hình thức chính (đồng, đã mang dấu +/−) ──
  const _ltSign = document.getElementById('sel-lamtron').value === 'thu_bot' ? -1 : 1;
  const ltTmDong = _lamTronActive() ? _ltSign * _amtDong('lamtron-tm') : 0;
  const ltCkDong = _lamTronActive() ? _ltSign * _amtDong('lamtron-ck') : 0;
  // Thực trả từng kênh = tiền hàng (theo hình thức chính) + làm tròn kênh đó.
  const _g = _goodsSplitDong();
  const finalTm = Math.round(_g[0] + ltTmDong);
  const finalCk = Math.round(_g[1] + ltCkDong);
  const _tongDong = Math.round(_itemsTotalDong() + getLamTronDong());
  if (finalTm < 0 || finalCk < 0) {
    msg.textContent = '⚠️ Tiền mặt / Chuyển khoản sau làm tròn không được ÂM — kiểm tra lại phần làm tròn (thu bớt vượt quá tiền của kênh đó).';
    msg.className = 'text-sm text-amber-600'; return;
  }
  if (Math.abs((finalTm + finalCk) - _tongDong) > 1) {
    msg.textContent = '⚠️ Tiền mặt + Chuyển khoản (' + fmt(finalTm + finalCk) + 'đ) không khớp Tổng cộng (' + fmt(_tongDong) + 'đ) — kiểm tra lại phần chia tiền hàng / làm tròn.';
    msg.className = 'text-sm text-amber-600'; return;
  }

  const payload = {
    khach_hang: ten,
    cccd: document.getElementById('kh-cccd').value.trim(),
    dia_chi: document.getElementById('kh-diachi').value.trim(),
    dien_thoai: document.getElementById('kh-dt').value.trim(),
    hinh_thuc_tt: httt,
    so_tien_tien_mat: finalTm,
    so_tien_chuyen_khoan: finalCk,
    so_tk: document.getElementById('kh-sotk').value.trim(),
    ten_tk: document.getElementById('kh-tentk').value.trim(),
    ngan_hang: document.getElementById('kh-nganhang').value.trim(),
    noi_dung_ck: document.getElementById('kh-noidungck').value.trim(),
    items,
    ghi_chu: document.getElementById('inp-ghichu').value.trim(),
    tien_lam_tron: getLamTronDong() / 1000,   // gửi theo nghìn đồng (đơn vị DB)
    tien_lam_tron_tm: ltTmDong / 1000,        // làm tròn phần Tiền mặt (nghìn, có dấu)
    tien_lam_tron_ck: ltCkDong / 1000,        // làm tròn phần Chuyển khoản (nghìn, có dấu)
    nhap_kho: document.getElementById('chk-nhapkho').checked,
  };

  // ⚠️ HỎI LẠI khi lập phiếu MỚI mà ô "Tự nhập hàng vào Tồn kho" đang TẮT — trên điện thoại
  // rất dễ chạm nhầm bỏ tick, hàng sẽ KHÔNG vào kho mà không có dấu hiệu gì (sự cố 23/07/2026).
  if (!isEdit && !payload.nhap_kho) {
    if (!confirm('⚠️ Ô "📦 Tự nhập hàng vào Tồn kho" đang TẮT.\n\n'
               + `${payload.items.length} món của phiếu này sẽ KHÔNG vào Tồn kho `
               + '(tìm trong kho sẽ không thấy).\n\n'
               + 'Bấm Hủy để bật lại ô đó, hoặc OK nếu chắc chắn không muốn nhập kho.')) return;
  }

  // Nhân viên thường sửa phiếu đã có → gửi duyệt thay vì lưu trực tiếp
  if (isEdit && !isGdPgd) {
    return submitPurchaseForApproval(payload);
  }

  const _doSubmit = async (pin) => {
  msg.textContent = '⏳ Đang lưu...';
  msg.className = 'text-sm text-gray-500';
  try {
    const res = await fetch(isEdit ? `/api/pos/purchase-orders/${_editPoId}` : '/api/pos/purchase-orders', {
      method: isEdit ? 'PUT' : 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin, ...payload })
    });
    let data;
    try { data = await res.json(); }
    catch { throw new Error(`Server lỗi HTTP ${res.status}`); }
    if (data.success) {
      const poId = data.id || _editPoId;
      const maGd = data.ma_gd || (_editPoOriginal && _editPoOriginal.ma_gd);
      const label = isEdit ? 'Đã cập nhật phiếu' : `Đã lưu phiếu <strong>${data.ma_gd}</strong>`;
      const khoNote = (!isEdit && payload.nhap_kho) ? ` 📦 Đã nhập ${payload.items.length} món vào tồn kho.` : '';
      msg.innerHTML = `✅ ${label} — Tổng tiền: ${fmt((data.tong_tien||0) * 1000)} đ.${khoNote}<br>
        <span class="inline-flex flex-wrap items-center gap-2 mt-1">
          <a href="/purchase-orders/${poId}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In phiếu</a>
          <button onclick="printRemote('/purchase-orders/${poId}/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="/purchase-orders/${poId}/receipt" target="_blank" class="tkt-act tkt-red">🖨️ In phiếu chi</a>
          <button onclick="printRemote('/purchase-orders/${poId}/receipt', this)" class="tkt-act tkt-red" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In PC Tại Quầy</button>
        </span>`;
      msg.className = 'text-sm text-green-700';
      _resetEditMode();
      _generatedCodes.clear();
      document.getElementById('item-list').innerHTML = '';
      addRow();
      ['kh-ten','kh-cccd','kh-diachi','kh-dt','kh-sotk','kh-tentk','kh-nganhang','kh-noidungck','inp-ghichu'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.value = '';
      });
      _tentkTouched = false;   // phiếu mới → lại mặc định theo họ tên khách
      document.getElementById('sel-hinhthuc').value = 'chuyen_khoan';
      document.getElementById('split-tm').value = '';
      document.getElementById('split-ck').value = '';
      resetLamTron();
      onHtttChange();
      recalcTotal();
      // Phiếu lập từ 1 nháp → xóa nháp đó (đã thành phiếu thật) + làm mới danh sách
      if (_poCurDraft) { fetch('/api/form-drafts/' + _poCurDraft, { method: 'DELETE' }).catch(() => {}); _poCurDraft = null; }
      loadPoDrafts();
      lookupPurchaseTicket(maGd);
    } else {
      msg.textContent = '❌ ' + ((data.error === 'vi_pham_quy_dinh' || data.error === 'can_xac_nhan') && data.message
        ? data.message : _poErrLabel(data.error));
      msg.className = 'text-sm text-red-600 font-semibold';
    }
  } catch (e) {
    msg.textContent = `❌ Không thể kết nối server: ${e.message}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
  }; // end _doSubmit

  if (isEdit) {
    askPin('Xác nhận lưu phiếu mua hàng', _doSubmit);
  } else {
    await _doSubmit(getPin());
  }
}

// ── Mua hàng gần đây: gom theo KHÁCH, mỗi khách 1 hàng (theo mẫu Hóa đơn gần đây) ──
let _poExpanded = {};
const _poHtttLabel = h => h === 'chuyen_khoan' ? '🏦 CK' : h === 'ca_hai' ? '🔀 TM/CK' : '💵 TM';

function togglePoCust(ekey) {
  const key = decodeURIComponent(ekey);
  _poExpanded[key] = !_poExpanded[key];
  const b = document.getElementById('po-cust-' + ekey);
  const ch = document.getElementById('po-chev-' + ekey);
  if (b) b.classList.toggle('hidden', !_poExpanded[key]);
  if (ch) ch.textContent = _poExpanded[key] ? '▴' : '▾';
}

function _poCustKey(o) {
  return (o.cccd || '').trim() ? 'c:' + o.cccd.trim()
       : (o.dien_thoai || '').trim() ? 'd:' + o.dien_thoai.trim()
       : 't:' + ((o.khach_hang || 'Khách lẻ').trim().toLowerCase());
}

function _poTicketRow(o) {
  const isDir = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  // Món hàng hiện NGAY trên phiếu (kiểu Bảng theo dõi hàng cầm) — không cần bấm Sửa mới thấy
  const itemsHtml = (o.items || []).map(it => {
    const klTinh = Math.max((it.tong_trong_luong || 0) - (it.da_va_hao || 0), 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">' + it.ma_hang + '</span> · ' : ''}${it.ten_hang || '—'}${it.chat_lieu ? ' <span class="text-gray-400">(' + it.chat_lieu + ')</span>' : ''}</span>
      <span class="text-gray-400 whitespace-nowrap">${klTinh ? Number(klTinh).toLocaleString('vi-VN', {maximumFractionDigits: 3}) + ' chỉ · ' : ''}${fmt((it.thanh_tien || 0) * 1000)}đ</span>
    </div>`;
  }).join('');
  return `<div class="rounded-xl border border-gray-100 px-3 py-2 space-y-1.5" data-ma-gd="${o.ma_gd}">
    <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5">
      <span class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap" style="background:#dc2626;color:#fff">Mua</span>
      <span class="font-mono font-semibold text-xs">${o.ma_gd}</span>
      <span class="text-xs text-gray-400">${o.ngay}</span>
      <span class="text-xs">${_poHtttLabel(o.hinh_thuc_tt)}</span>
      ${o.nhap_kho ? '<span class="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200 whitespace-nowrap" title="Hàng của phiếu đã nhập vào Tồn kho">📦 Đã nhập kho</span>' : ''}
      <span class="text-sm font-black text-red-600 ml-auto">${fmt((o.tong_tien||0)*1000)}đ</span>
    </div>
    ${itemsHtml ? `<div class="rounded-lg border border-gray-100 divide-y divide-gray-50 bg-gray-50/50">${itemsHtml}</div>` : ''}
    <div class="flex items-center gap-2 flex-wrap">
      <button onclick="viewPO(${o.id})" class="tkt-act tkt-blue">👁️ Xem</button>
      <a href="/purchase-orders/${o.id}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In</a>
      <button onclick="printRemote('/purchase-orders/${o.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="/purchase-orders/${o.id}/receipt" target="_blank" class="tkt-act tkt-red">🖨️ In phiếu chi</a>
      <button onclick="printRemote('/purchase-orders/${o.id}/receipt', this)" class="tkt-act tkt-red" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In PC Tại Quầy</button>
      ${_poCoCK(o) ? `<button onclick="openMBBankById(${o.id})" class="tkt-act tkt-blue">🏦 CK MB${o.so_tk ? '' : ' (thiếu STK)'}</button>` : ''}
      ${CAN_EDIT ? `<button onclick="loadOrderForEdit(${o.id})" class="tkt-act tkt-blue">✏️ Sửa</button>` : ''}
      ${isDir ? `<button onclick="deletePurchaseOrder(${o.id})" class="tkt-act tkt-red">🗑️ Xóa</button>` : `<button onclick='xinXoaPhieu("mua_hang", ${o.id}, ${JSON.stringify(o.ma_gd||"")}, ${JSON.stringify("KH: "+(o.khach_hang||""))})' class="tkt-act tkt-orange">📤 Xin xóa</button>`}
    </div>
  </div>`;
}

function _poCustRow(g) {
  const ekey = encodeURIComponent(g.key);
  const initials = vnInitial(g.ten);
  const tong = g.orders.reduce((a, o) => a + (o.tong_tien || 0), 0);
  const open = !!_poExpanded[g.key];
  return `<div class="ios-card overflow-hidden" style="border:1px solid #fde68a">
    <div onclick="togglePoCust('${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)">${initials}</div>
      <div class="flex-1" style="min-width:150px">
        <div class="font-bold text-gray-800 break-words">${g.ten}</div>
        <div class="text-xs text-gray-400 truncate">${g.sdt || '(không SĐT)'} · ${g.orders.length} phiếu · ${g.orders[0].ngay}</div>
      </div>
      <div class="flex items-center gap-2 ml-auto flex-shrink-0">
        <div class="text-right">
          <div class="text-[11px] text-gray-400 uppercase">Đã chi mua</div>
          <div class="font-black text-red-600 leading-tight">−${fmt(tong*1000)}đ</div>
        </div>
        <span style="background:#fee2e2;color:#991b1b" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">🔴 Mua vào</span>
        <span id="po-chev-${ekey}" class="text-gray-400">${open ? '▴' : '▾'}</span>
      </div>
    </div>
    <div id="po-cust-${ekey}" class="p-3 space-y-2 ${open ? '' : 'hidden'}">
      ${g.orders.map(_poTicketRow).join('')}
    </div>
  </div>`;
}

function renderPoTable() {
  const q = (document.getElementById('inp-search-po')?.value || '').trim().toLowerCase();
  const orders = q ? _allPOs.filter(o =>
    [o.ma_gd, o.khach_hang, o.dien_thoai, o.cccd].some(v => (v||'').toLowerCase().includes(q))
  ) : _allPOs;

  // Tổng quan (màu đậm, viền nhẹ)
  const tongChi = orders.reduce((a, o) => a + (o.tong_tien || 0), 0) * 1000;
  const homNay = new Date().toLocaleDateString('vi-VN', {day:'2-digit',month:'2-digit',year:'numeric'});
  const soHomNay = orders.filter(o => (o.ngay||'').startsWith(homNay)).length;
  const groups = new Map();
  orders.forEach(o => {
    const key = _poCustKey(o);
    if (!groups.has(key)) groups.set(key, { key, ten: o.khach_hang || 'Khách lẻ', sdt: o.dien_thoai || '', orders: [] });
    groups.get(key).orders.push(o);
  });
  const sCard = (val, label, color) => `
    <div class="rounded-2xl p-3 text-center" style="background:${color}26;border:1px solid ${color}44">
      <div class="text-lg font-black leading-tight" style="color:${color}">${val}</div>
      <div class="text-[11px] font-bold text-gray-600 mt-0.5">${label}</div>
    </div>`;
  document.getElementById('po-summary').innerHTML =
    sCard(fmt(orders.length), (q ? 'Phiếu khớp tìm' : 'Phiếu mua'), '#b45309') +
    sCard(fmt(tongChi), 'Tổng chi mua (đ)', '#dc2626') +
    sCard(fmt(groups.size), 'Khách bán', '#2563eb') +
    sCard(fmt(soHomNay), 'Phiếu hôm nay', '#16a34a');

  document.getElementById('po-tbody').innerHTML = [...groups.values()].map(_poCustRow).join('')
    || `<div class="text-center text-gray-300 py-10">${q ? 'Không tìm thấy phiếu phù hợp' : 'Chưa có phiếu mua hàng'}</div>`;
  // Đang tìm kiếm → tự mở hết
  if (q) [...groups.keys()].forEach(k => { _poExpanded[k] = true;
    const b = document.getElementById('po-cust-' + encodeURIComponent(k));
    if (b) b.classList.remove('hidden');
    const ch = document.getElementById('po-chev-' + encodeURIComponent(k));
    if (ch) ch.textContent = '▴'; });
}

async function loadOrders() {
  const res = await fetch('/api/pos/purchase-orders');
  const data = await res.json();
  _allPOs = data.orders;
  renderPoTable();
}

// ── Edit mode ────────────────────────────────────────────────────────────
let _editPoId = null;
let _editPoOriginal = null;
let _currentCkData = null;
let _qrChuyenKhoanRequest = 0;

async function loadOrderForEdit(poId) {
  const res = await fetch(`/api/pos/purchase-orders/${poId}`);
  const po = await res.json();
  if (!po || po.error) { alert('Không tải được phiếu!'); return; }

  _editPoId = poId;
  _editPoOriginal = po;

  // Điền thông tin khách
  document.getElementById('kh-ten').value     = po.khach_hang || '';
  document.getElementById('kh-cccd').value    = po.cccd || '';
  document.getElementById('kh-diachi').value  = po.dia_chi || '';
  document.getElementById('kh-dt').value      = po.dien_thoai || '';
  document.getElementById('kh-sotk').value    = po.so_tk || '';
  document.getElementById('kh-tentk').value   = po.ten_tk || '';
  _tentkTouched = true;   // sửa phiếu cũ → giữ nguyên tên chủ TK đã lưu, không tự ghi đè
  document.getElementById('kh-nganhang').value = po.ngan_hang || '';
  document.getElementById('kh-noidungck').value = po.noi_dung_ck || '';
  document.getElementById('inp-ghichu').value = po.ghi_chu || '';

  // Hình thức thanh toán
  const httt = po.hinh_thuc_tt || 'chuyen_khoan';
  document.getElementById('sel-hinhthuc').value = httt;
  onHtttChange();
  // Làm tròn tách kênh đã lưu (nghìn, có dấu). Ô "tiền hàng" = thực trả − làm tròn kênh.
  const _ltTm = po.tien_lam_tron_tm || 0;
  const _ltCk = po.tien_lam_tron_ck || 0;
  document.getElementById('split-tm').value = formatSplitAmt(Math.round((po.so_tien_tien_mat||0) - _ltTm * 1000));
  document.getElementById('split-ck').value = formatSplitAmt(Math.round((po.so_tien_chuyen_khoan||0) - _ltCk * 1000));

  // Làm tròn tiền (tien_lam_tron lưu theo nghìn đồng, + = chi thêm / − = thu bớt)
  const _lt = po.tien_lam_tron || 0;
  document.getElementById('sel-lamtron').value = _lt > 0 ? 'chi_them' : (_lt < 0 ? 'thu_bot' : 'none');
  document.getElementById('inp-lamtron').value = _lt ? formatSplitAmt(Math.round(Math.abs(_lt) * 1000)) : '';
  document.getElementById('lamtron-tm').value = _ltTm ? formatSplitAmt(Math.round(Math.abs(_ltTm) * 1000)) : '';
  document.getElementById('lamtron-ck').value = _ltCk ? formatSplitAmt(Math.round(Math.abs(_ltCk) * 1000)) : '';
  onLamTronChange();

  // Chế độ nhập kho theo phiếu gốc (không đổi được khi sửa)
  _setNhapKhoEditMode(po);

  // Điền dòng hàng
  _generatedCodes.clear();
  document.getElementById('item-list').innerHTML = '';
  (po.items || []).forEach(it => {
    addRow();
    const tr = document.getElementById('item-list').lastElementChild;
    tr.querySelector('.inp-mahang').value   = it.ma_hang || '';
    tr.querySelector('.inp-ten').value      = it.ten_hang || '';
    tr.querySelector('.inp-chatlieu').value = it.chat_lieu || '';
    tr.querySelector('.inp-ttl').value      = it.tong_trong_luong || 0;
    tr.querySelector('.inp-dvh').value      = it.da_va_hao || 0;
    tr.querySelector('.inp-donvi').value    = it.don_vi || 'Chỉ';
    tr.querySelector('.inp-gia').value      = formatSplitAmt(Math.round((it.gia || 0) * 1000));
    NguonGoc.dat(tr, it);
    if (it.ma_hang) _generatedCodes.add(it.ma_hang);
    recalcRow(tr.querySelector('.inp-ttl'));
  });

  // Đổi nút sang chế độ sửa — nhân viên thường thì gửi duyệt, GĐ/PGĐ thì lưu thẳng
  const isGdPgd = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;
  const btn = document.querySelector('button[onclick="submitOrder()"]');
  btn.textContent = isGdPgd ? '💾 Cập nhật phiếu' : '📤 Gửi Duyệt';
  const msg = document.getElementById('po-msg');
  msg.textContent = isGdPgd
    ? `✏️ Đang sửa phiếu ${po.ma_gd} — chỉnh xong bấm "Cập nhật phiếu".`
    : `✏️ Đang sửa phiếu ${po.ma_gd} — chỉnh xong bấm "Gửi Duyệt" để GĐ/PGĐ xét duyệt.`;
  msg.className = 'text-sm text-blue-700';

  // Chuyển về tab "Lập phiếu" để thấy form đã điền sẵn (nút Sửa nằm ở tab "Mua hàng
  // gần đây" — không chuyển tab thì bấm xong sẽ tưởng như không có gì xảy ra).
  showTab('lap');
  window.scrollTo({top: 0, behavior: 'smooth'});
}

function _resetEditMode() {
  _editPoId = null;
  _editPoOriginal = null;
  _resetNhapKho();
  document.querySelector('button[onclick="submitOrder()"]').textContent = '✅ Lưu phiếu & in';
}

// Nhân viên thường gửi yêu cầu sửa phiếu mua hàng để GĐ/PGĐ duyệt
async function submitPurchaseForApproval(payload) {
  const msg = document.getElementById('po-msg');
  const o = _editPoOriginal || {};
  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('CCCD/CMND', o.cccd, payload.cccd);
  _cmp('Địa chỉ', o.dia_chi, payload.dia_chi);
  _cmp('Điện thoại', o.dien_thoai, payload.dien_thoai);
  _cmp('Số TK', o.so_tk, payload.so_tk);
  _cmp('Ngân hàng', o.ngan_hang, payload.ngan_hang);
  _cmp('Ghi chú', o.ghi_chu, payload.ghi_chu);
  _cmp('Làm tròn tiền', fmt((o.tien_lam_tron || 0) * 1000) + ' đ', fmt((payload.tien_lam_tron || 0) * 1000) + ' đ');
  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) { payload._delta = changes.map(c => `${c.label}: ${c.old} → ${c.new}`); payload._changes = changes; }

  const ma_phieu = o.ma_gd || '';
  const btn = document.querySelector('button[onclick="submitOrder()"]');
  btn.disabled = true; const _old = btn.textContent; btn.textContent = '⏳ Đang gửi...';
  try {
    const res = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ loai: 'mua_hang', phieu_id: _editPoId, ma_phieu, payload,
        mo_ta: `Phiếu mua hàng ${ma_phieu} — ${changes.length ? changes.map(c => c.label).join(', ') : 'Cập nhật thông tin'}` })
    });
    const d = await res.json();
    if (d.success) {
      msg.textContent = '✅ Đã gửi yêu cầu duyệt. Vui lòng chờ GĐ/PGĐ xem xét.';
      msg.className = 'text-sm text-green-700 font-semibold';
      _resetEditMode();
      _generatedCodes.clear();
      document.getElementById('item-list').innerHTML = '';
      addRow();
      ['kh-ten','kh-cccd','kh-diachi','kh-dt','kh-sotk','kh-tentk','kh-nganhang','kh-noidungck','inp-ghichu'].forEach(id => {
        const el = document.getElementById(id); if (el) el.value = '';
      });
      resetLamTron();
      onHtttChange(); recalcTotal();
    } else {
      msg.textContent = '❌ ' + (d.message || d.error || 'Gửi thất bại');
      msg.className = 'text-sm text-red-600 font-semibold';
    }
  } catch (e) {
    msg.textContent = '❌ Lỗi kết nối: ' + e.message;
    msg.className = 'text-sm text-red-600 font-semibold';
  } finally {
    btn.disabled = false; if (btn.textContent === '⏳ Đang gửi...') btn.textContent = _old;
  }
}

// ── Bản nháp phiếu mua hàng (LƯU SERVER — nhiều bản, gắn người tạo, sửa tiếp/lập sau) ──
function _collectPoItems() {
  const items = [];
  document.querySelectorAll('#item-list .item-row').forEach(row => {
    items.push({
      ma_hang: row.querySelector('.inp-mahang').value,
      ten_hang: row.querySelector('.inp-ten').value,
      chat_lieu: row.querySelector('.inp-chatlieu').value,
      don_vi: row.querySelector('.inp-donvi').value,
      tong_trong_luong: row.querySelector('.inp-ttl').value,
      da_va_hao: row.querySelector('.inp-dvh').value,
      gia: row.querySelector('.inp-gia').value,
      ...NguonGoc.layTho(row),   // nháp giữ cả NSX/NPP/Xuất xứ
    });
  });
  return items;
}

let _poCurDraft = null;   // id bản nháp đang sửa (null = form mới, khác _editPoId của "sửa phiếu đã lưu")

function _poDraftData() {
  return {
    khach_hang: document.getElementById('kh-ten').value,
    cccd: document.getElementById('kh-cccd').value,
    dia_chi: document.getElementById('kh-diachi').value,
    dien_thoai: document.getElementById('kh-dt').value,
    hinh_thuc_tt: document.getElementById('sel-hinhthuc').value,
    split_tm: document.getElementById('split-tm').value,
    split_ck: document.getElementById('split-ck').value,
    lamtron_mode: document.getElementById('sel-lamtron').value,
    lamtron_val: document.getElementById('inp-lamtron').value,
    lamtron_tm: document.getElementById('lamtron-tm').value,
    lamtron_ck: document.getElementById('lamtron-ck').value,
    so_tk: document.getElementById('kh-sotk').value,
    ten_tk: document.getElementById('kh-tentk').value,
    ngan_hang: document.getElementById('kh-nganhang').value,
    ngan_hang_bin: document.getElementById('kh-nganhang-bin').value,
    noi_dung_ck: document.getElementById('kh-noidungck').value,
    ghi_chu: document.getElementById('inp-ghichu').value,
    items: _collectPoItems(),
  };
}

function _poResetForm() {
  _generatedCodes.clear();
  document.getElementById('item-list').innerHTML = '';
  addRow();
  ['kh-ten','kh-cccd','kh-diachi','kh-dt','kh-sotk','kh-tentk','kh-nganhang','kh-nganhang-bin','kh-noidungck','inp-ghichu']
    .forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });
  _tentkTouched = false;
  document.getElementById('sel-hinhthuc').value = 'chuyen_khoan';
  document.getElementById('split-tm').value = '';
  document.getElementById('split-ck').value = '';
  resetLamTron();
  onHtttChange();
  recalcTotal();
  _poCurDraft = null;
}

async function poSaveDraft() {
  const msg = document.getElementById('po-msg');
  const data = _poDraftData();
  const ten = (data.khach_hang || '').trim();
  const hasItem = (data.items || []).some(it => (it.ten_hang || '').trim());
  if (!ten && !hasItem) {
    msg.textContent = '⚠️ Nháp trống — nhập tên khách hoặc 1 dòng hàng rồi lưu.';
    msg.className = 'text-sm text-amber-600'; return;
  }
  const tom_tat = `${ten || '(chưa có tên)'} — ${(data.items || []).length} món hàng`;
  try {
    const r = await fetch('/api/form-drafts', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'mua_hang', id: _poCurDraft, tom_tat, data })
    });
    const d = await r.json();
    if (!d.success) throw new Error(d.error || 'lỗi');
    msg.textContent = '💾 Đã lưu nháp — form đã reset, làm bản mới được rồi.';
    msg.className = 'text-sm text-blue-600 font-semibold';
    _poResetForm();
    loadPoDrafts();
  } catch (e) {
    msg.textContent = '❌ Không lưu được nháp: ' + e.message; msg.className = 'text-sm text-red-600';
  }
}

function _poFillDraft(draft) {
  draft = draft || {};
  document.getElementById('kh-ten').value = draft.khach_hang || '';
  document.getElementById('kh-cccd').value = draft.cccd || '';
  document.getElementById('kh-diachi').value = draft.dia_chi || '';
  document.getElementById('kh-dt').value = draft.dien_thoai || '';
  document.getElementById('sel-hinhthuc').value = draft.hinh_thuc_tt || 'chuyen_khoan';
  onHtttChange();
  document.getElementById('split-tm').value = draft.split_tm || '';
  document.getElementById('split-ck').value = draft.split_ck || '';
  document.getElementById('sel-lamtron').value = draft.lamtron_mode || 'none';
  document.getElementById('inp-lamtron').value = draft.lamtron_val || '';
  document.getElementById('lamtron-tm').value = draft.lamtron_tm || '';
  document.getElementById('lamtron-ck').value = draft.lamtron_ck || '';
  onLamTronChange();
  document.getElementById('kh-sotk').value = draft.so_tk || '';
  document.getElementById('kh-tentk').value = draft.ten_tk || '';
  _tentkTouched = !!(draft.ten_tk || '').trim();
  syncTenTk();
  document.getElementById('kh-nganhang').value = draft.ngan_hang || '';
  document.getElementById('kh-nganhang-bin').value = draft.ngan_hang_bin || '';
  document.getElementById('kh-noidungck').value = draft.noi_dung_ck || '';
  document.getElementById('inp-ghichu').value = draft.ghi_chu || '';
  _generatedCodes.clear();
  document.getElementById('item-list').innerHTML = '';
  (draft.items || []).forEach(it => {
    addRow();
    const tr = document.getElementById('item-list').lastElementChild;
    tr.querySelector('.inp-mahang').value   = it.ma_hang || '';
    tr.querySelector('.inp-ten').value      = it.ten_hang || '';
    tr.querySelector('.inp-chatlieu').value = it.chat_lieu || '';
    tr.querySelector('.inp-donvi').value    = it.don_vi || 'Chỉ';
    tr.querySelector('.inp-ttl').value      = it.tong_trong_luong || '';
    tr.querySelector('.inp-dvh').value      = it.da_va_hao || '';
    tr.querySelector('.inp-gia').value      = it.gia || '';
    NguonGoc.dat(tr, it);
    if (it.ma_hang) _generatedCodes.add(it.ma_hang);
    recalcRow(tr.querySelector('.inp-ttl'));
  });
  if (!(draft.items || []).length) addRow();
  recalcTotal();
}

async function loadPoDrafts() {
  const box = document.getElementById('po-drafts-box');
  const list = document.getElementById('po-drafts-list');
  try {
    const r = await fetch('/api/form-drafts?loai=mua_hang');
    const d = await r.json();
    const drafts = d.drafts || [];
    if (!drafts.length) { box.classList.add('hidden'); list.innerHTML = ''; return; }
    box.classList.remove('hidden');
    list.innerHTML = drafts.map(dr => {
      const editing = (_poCurDraft == dr.id) ? ' · <b style="color:#b45309">đang sửa</b>' : '';
      return `<div class="flex items-center gap-2 bg-white rounded-lg border border-amber-100 px-3 py-2">
        <div class="flex-1 min-w-0">
          <div class="text-sm font-semibold text-gray-800 break-words">${dr.tom_tat || '(nháp)'}</div>
          <div class="text-[11px] text-gray-400 truncate">👤 ${dr.nguoi_tao || '?'} · ${(dr.updated_at || '').slice(0, 16)}${editing}</div>
        </div>
        <button type="button" onclick="resumePoDraft(${dr.id})" class="btn-ios btn-ios-secondary !px-3 !py-1 text-xs whitespace-nowrap">✏️ Sửa tiếp</button>
        <button type="button" onclick="deletePoDraft(${dr.id})" class="text-red-500 hover:text-red-700 text-sm px-1" title="Xóa nháp">✕</button>
      </div>`;
    }).join('');
  } catch (e) { box.classList.add('hidden'); }
}

async function resumePoDraft(id) {
  const msg = document.getElementById('po-msg');
  try {
    const r = await fetch('/api/form-drafts/' + id);
    const d = await r.json();
    if (!d.success) throw new Error(d.error || 'không tìm thấy');
    _poFillDraft((d.draft && d.draft.data) || {});
    _poCurDraft = id;
    msg.innerHTML = `✏️ Đang sửa bản nháp. Bấm <b>Lưu phiếu &amp; in</b> để hoàn tất (nháp tự xóa), hoặc <b>Lưu nháp</b> để cập nhật.`;
    msg.className = 'text-sm text-blue-600';
    loadPoDrafts();
    document.getElementById('kh-ten').scrollIntoView({ behavior: 'smooth', block: 'center' });
  } catch (e) {
    msg.textContent = '❌ Không mở được nháp: ' + e.message; msg.className = 'text-sm text-red-600';
  }
}

async function deletePoDraft(id) {
  if (!confirm('Xóa bản nháp này?')) return;
  try {
    await fetch('/api/form-drafts/' + id, { method: 'DELETE' });
    if (_poCurDraft == id) _poCurDraft = null;
    loadPoDrafts();
  } catch (e) {}
}

addRow();
onHtttChange();
NguonGoc.khoiDong('mua_hang_nguon_goc', '#item-list .item-row');
loadOrders();
loadPoDrafts();

// 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('kh-cccd', {ten: 'kh-ten', cccd: 'kh-cccd', diachi: 'kh-diachi'});

// ── 👁️ Xem chi tiết phiếu mua (dữ liệu từ _allPOs, giống viewSale bên Bán hàng) ──
function viewPO(id) {
  const o = _allPOs.find(x => x.id === id);
  if (!o) { alert('Không tìm thấy phiếu.'); return; }
  document.getElementById('pvm-magd').textContent = o.ma_gd;

  const itemsHtml = (o.items || []).map((it, idx) => {
    const klTinh = Math.max((it.tong_trong_luong || 0) - (it.da_va_hao || 0), 0);
    return `<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">${it.ma_hang || '—'}</td>
      <td class="px-2 py-1.5">${it.ten_hang || '—'}</td>
      <td class="px-2 py-1.5 text-center">${it.chat_lieu || '—'}</td>
      <td class="px-2 py-1.5 text-right">${fmt(it.tong_trong_luong || 0)}</td>
      <td class="px-2 py-1.5 text-right">${fmt(it.da_va_hao || 0)}</td>
      <td class="px-2 py-1.5 text-right">${fmt(klTinh)}</td>
      <td class="px-2 py-1.5 text-right">${fmt((it.gia || 0) * 1000)}</td>
      <td class="px-2 py-1.5 text-center">${it.don_vi || '—'}</td>
      <td class="px-2 py-1.5 text-right font-semibold">${fmt((it.thanh_tien || 0) * 1000)}</td>
    </tr>`;
  }).join('') || '<tr><td colspan="10" class="text-center text-gray-300 py-4">Không có dòng hàng</td></tr>';

  const lamTron = (o.tien_lam_tron || 0) * 1000;
  const tongCong = (o.tong_tien || 0) * 1000;            // tong_tien ĐÃ gồm làm tròn
  const tongHang = tongCong - lamTron;
  const lamTronTm = (o.tien_lam_tron_tm || 0) * 1000, lamTronCk = (o.tien_lam_tron_ck || 0) * 1000;
  const httt = o.hinh_thuc_tt === 'chuyen_khoan' ? '🏦 Chuyển khoản'
    : o.hinh_thuc_tt === 'ca_hai'
      ? `🔀 TM/CK (💵 ${fmt((o.so_tien_tien_mat || 0))} + 🏦 ${fmt((o.so_tien_chuyen_khoan || 0))})`
      : '💵 Tiền mặt';
  const bank = (o.so_tk || o.ngan_hang)
    ? `${o.ngan_hang || ''} · <span class="font-mono">${o.so_tk || ''}</span>${o.ten_tk ? ' · ' + o.ten_tk : ''}` : '—';
  const lamTronTxt = lamTron
    ? `${fmt(lamTron)} đ${(lamTronTm && lamTronCk) ? ` (TM ${fmt(lamTronTm)} + CK ${fmt(lamTronCk)})` : ''}` : '—';

  document.getElementById('pvm-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">Thời gian:</span> ${o.ngay || '—'}</div>
      <div><span class="font-semibold text-gray-500">Khách hàng:</span> ${o.khach_hang || '—'}</div>
      <div><span class="font-semibold text-gray-500">Số CCCD:</span> ${o.cccd || '—'}</div>
      <div><span class="font-semibold text-gray-500">Điện thoại:</span> ${o.dien_thoai || '—'}</div>
      <div class="sm:col-span-2"><span class="font-semibold text-gray-500">Địa chỉ:</span> ${o.dia_chi || '—'}</div>
      <div><span class="font-semibold text-gray-500">Hình thức TT:</span> ${httt}</div>
      <div><span class="font-semibold text-gray-500">Nhập kho:</span> ${o.nhap_kho ? '📦 Đã nhập vào Tồn kho' : 'Không'}</div>
      <div class="sm:col-span-2"><span class="font-semibold text-gray-500">TK nhận tiền:</span> ${bank}</div>
      ${o.noi_dung_ck ? `<div class="sm:col-span-2"><span class="font-semibold text-gray-500">Nội dung CK:</span> ${o.noi_dung_ck}</div>` : ''}
      ${o.ghi_chu ? `<div class="sm:col-span-2"><span class="font-semibold text-gray-500">Ghi chú:</span> ${o.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 hàng</th>
            <th class="px-2 py-1.5">Chất liệu</th>
            <th class="text-right px-2 py-1.5">KL tổng</th>
            <th class="text-right px-2 py-1.5">Đá & hao</th>
            <th class="text-right px-2 py-1.5">KL tịnh</th>
            <th class="text-right px-2 py-1.5">Đơn giá</th>
            <th class="px-2 py-1.5">ĐV</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(tongHang)} đ</span></div>
      <div>Làm tròn: <span class="font-semibold">${lamTronTxt}</span></div>
      <div class="text-lg font-bold text-red-600">Tổng chi trả khách: ${fmt(tongCong)} đ</div>
    </div>
  `;

  document.getElementById('pvm-print-link').href = `/purchase-orders/${o.id}/print`;
  const pvmRemoteBtn = document.getElementById('pvm-print-remote-btn');
  pvmRemoteBtn.onclick = () => printRemote(`/purchase-orders/${o.id}/print`, pvmRemoteBtn);
  document.getElementById('pvm-receipt-link').href = `/purchase-orders/${o.id}/receipt`;
  const pvmReceiptRemoteBtn = document.getElementById('pvm-receipt-remote-btn');
  pvmReceiptRemoteBtn.onclick = () => printRemote(`/purchase-orders/${o.id}/receipt`, pvmReceiptRemoteBtn);
  const ckBtn = document.getElementById('pvm-ckmb-btn');
  if (_poCoCK(o)) {
    ckBtn.classList.remove('hidden');
    ckBtn.onclick = () => { closePoViewModal(); openMBBankById(o.id); };
  } else ckBtn.classList.add('hidden');
  document.getElementById('po-view-modal').classList.remove('hidden');
}
function closePoViewModal() { document.getElementById('po-view-modal').classList.add('hidden'); }

// Phiếu có phần CHUYỂN KHOẢN (hoặc đã có STK) mới hiện nút CK MB — thiếu STK vẫn hiện để nhắc nhập.
function _poCoCK(o) {
  return !!o.so_tk || o.hinh_thuc_tt === 'chuyen_khoan' || (o.hinh_thuc_tt === 'ca_hai' && Number(o.so_tien_chuyen_khoan || 0) > 0);
}
function openMBBankById(id) {
  const o = _allPOs.find(x => x.id === id);
  if (!o) return;
  if (!o.so_tk) {
    alert('⚠️ Phiếu ' + (o.ma_gd || id) + ' chưa có số tài khoản/ngân hàng của khách — bấm ✏️ Sửa để nhập rồi mới tạo lệnh CK MB được.');
    return;
  }
  openMBBankFromOrder({
    soTk: o.so_tk, nganHang: o.ngan_hang, tenTk: o.ten_tk,
    noiDungCk: o.noi_dung_ck, soTien: Math.round((o.tong_tien||0)*1000),
    maGd: o.ma_gd, khachHang: o.khach_hang
  });
}

function openMBBankFromOrder(o) {
  const noiDungCk = o.khachHang && o.maGd
    ? `TT mua vang cua KH ${o.khachHang} phieu ${o.maGd}`
    : (o.noiDungCk || '');
  const detail = { ...o, noiDungCk, _ts: Date.now() };

  // Hiện modal thông tin CK
  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;

  // Tạo QR VietQR từ BIN ngân hàng
  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);

  // Auto copy STK vào clipboard
  if (o.soTk && navigator.clipboard) navigator.clipboard.writeText(o.soTk).catch(() => {});

  // Lưu lại để nút "Mở MB Bank" dispatch lại đúng data khi mở tab mới
  _currentCkData = detail;

  // Lưu lên server để máy LAN cũng đọc được (không phụ thuộc chrome.storage)
  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 })));

  // Dispatch dữ liệu kèm mã truy cập ngắn hạn cho extension (máy có cài)

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

function openMBBankOnline() {
  if (_currentCkData) {
    // Làm mới dấu thời gian + dispatch lại để chrome.storage có data mới nhất
    _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: SỬA TIẾP (gốc thật) — chủ tiệm kiểm chứng "mở tay MB Bank thì bình
  // thường, mở QUA APP thì quay" → khác biệt DUY NHẤT là window.open() mặc định
  // giữ window.opener trỏ ngược về trang POS + gửi kèm Referer. Cổng Biz MBBank
  // (ngân hàng doanh nghiệp) rất có thể có cơ chế chống giả mạo/clickjacking: tab
  // được mở kèm "cửa sổ gốc" trỏ về 1 trang lạ bên thứ 3 → chặn/quay vòng thay vì
  // vào bình thường. Thêm 'noopener,noreferrer' để tab mới KHÔNG còn opener/referer
  // nào cả — giống hệt như người dùng tự gõ địa chỉ vào thanh URL. Đây cũng là
  // thực hành bảo mật đúng khi mở link ngoài (chặn trang đích redirect ngược tab
  // gốc — 1 kiểu phishing đã biết), nên dù giả thuyết đúng hay sai vẫn nên sửa.
  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);
    const prev = el.style.color;
    el.style.color = '#16a34a';
    setTimeout(() => { el.style.color = prev; }, 900);
  }).catch(() => {});
}

function openMBBank() {
  const soTk      = document.getElementById('kh-sotk').value.trim();
  const nganHang  = document.getElementById('kh-nganhang').value.trim();
  const tenTk     = document.getElementById('kh-tentk').value.trim();
  const noiDungCk = document.getElementById('kh-noidungck').value.trim();
  const soTien    = document.getElementById('lbl-tong').textContent.replace(/\./g, '').trim();
  const msg       = document.getElementById('po-msg');

  // Gửi dữ liệu sang extension (localhost_relay.js chuyển tiếp vào chrome.storage)
  window.dispatchEvent(new CustomEvent('pos_mb_transfer', {
    detail: { soTk, nganHang, tenTk, noiDungCk, soTien, _ts: Date.now() }
  }));

  if (soTk) {
    navigator.clipboard.writeText(soTk).then(() => {
      msg.textContent = `📋 Đã lưu thông tin chuyển khoản — MB Bank sẽ hiện panel tự điền sau khi đăng nhập.`;
      msg.className = 'text-sm text-blue-700';
    }).catch(() => {
      msg.textContent = `🏦 Đang mở MB Bank — extension sẽ tự điền thông tin sau khi đăng nhập.`;
      msg.className = 'text-sm text-blue-700';
    });
  }
  window.open('https://ebank.mbbank.com.vn/biz/', '_blank', 'noopener,noreferrer');
}

// ── Danh sách ngân hàng Việt Nam (gợi ý khi gõ) ─────────────────────────
let BANKS = [];
fetch('/static/data/vn_banks.json').then(r => r.json()).then(d => BANKS = d).catch(() => {});

// ── Deep link app nguồn đã chọn trên thiết bị; tách riêng tài khoản nhận của tiệm ──
let _currentCkMobileData = null;
// Khớp tên NH nhập tay ra đúng bản ghi trong vn_banks.json — ƯU TIÊN mã trong ngoặc
// "Ngoại thương Việt Nam (VCB)" (đúng định dạng MB Bank hay trả về khi tra tên) vì
// shortName/name không khớp dạng này (đã vấp 15/08/2026 — QR lẫn nút điện thoại đều
// biến mất do bank=undefined). Fallback về so khớp cũ cho các dạng tên khác.
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); }
);

// Danh sách ngân hàng từ MB Bank — nguồn chính là server (bền, không phụ thuộc
// extension/đúng lúc đồng bộ/đúng domain truy cập); event 'mb_banks_ready' (từ
// extension, nếu đang hoạt động) chỉ là lớp cập nhật tức thời thêm khi có đồng bộ
// mới ngay trong phiên đang mở.
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 || []; });

function filterBanks() {
  const _bdNH = s => (s||'').normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/đ/g,'d').replace(/Đ/g,'D').toLowerCase();
  const q = _bdNH(document.getElementById('kh-nganhang').value.trim());
  const box = document.getElementById('bank-suggest');
  if (!q) { box.classList.add('hidden'); box.innerHTML = ''; return; }

  // CHỈ dùng danh sách ngân hàng đồng bộ từ MB Bank (không dùng danh sách chung)
  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('kh-nganhang').value = name;
  document.getElementById('kh-nganhang-bin').value = '';
  document.getElementById('bank-suggest').classList.add('hidden');
}

const _boDauJs = s => (s || '').normalize('NFD').replace(/[̀-ͯ]/g, '')
  .replace(/đ/g, 'd').replace(/Đ/g, 'D').toLowerCase();

function selectBankByBin(bin) {
  const b = BANKS.find(x => x.bin === bin);
  if (!b) return;
  // Ưu tiên điền theo TÊN TRONG DANH SÁCH MB (khớp không dấu theo shortName/code)
  // — nút "🏦 CK MB" tự điền cần đúng tên MB mới chọn trúng ô Ngân hàng.
  let mbName = '';
  const cands = [b.shortName, b.code].filter(Boolean).map(_boDauJs);
  for (const nm of MB_BANKS) {
    const nmd = _boDauJs(nm);
    if (cands.some(cd => cd && nmd.includes(cd))) { mbName = nm; break; }
  }
  document.getElementById('kh-nganhang').value = mbName || `${b.shortName} - ${b.name}`;
  document.getElementById('kh-nganhang-bin').value = b.bin;
  document.getElementById('bank-suggest').classList.add('hidden');
}

document.addEventListener('click', e => {
  if (!e.target.closest('#kh-nganhang') && !e.target.closest('#bank-suggest')) {
    document.getElementById('bank-suggest').classList.add('hidden');
  }
});

// ── Quét mã QR chuyển khoản (VietQR / EMVCo) — tự điền ngân hàng, số TK, nội dung ──
function _parseTLV(str) {
  const result = {};
  let i = 0;
  while (i + 4 <= str.length) {
    const id = str.substr(i, 2);
    const len = parseInt(str.substr(i + 2, 2), 10);
    if (isNaN(len) || i + 4 + len > str.length) break;
    result[id] = str.substr(i + 4, len);
    i += 4 + len;
  }
  return result;
}

function parseVietQR(text) {
  const root = _parseTLV(text);
  const result = {};
  if (root['38']) {
    const merchant = _parseTLV(root['38']);
    if (merchant['01']) {
      const beneficiary = _parseTLV(merchant['01']);
      result.bin = beneficiary['00'] || '';
      result.so_tk = beneficiary['01'] || '';
    }
  }
  if (root['54']) result.amount = root['54'];
  if (root['62']) {
    const additional = _parseTLV(root['62']);
    result.noi_dung = additional['08'] || '';
  }
  return result;
}

function autoNoidung() {
  const ten = document.getElementById('kh-ten').value.trim();
  const el = document.getElementById('kh-noidungck');
  const cur = el.value.trim();
  if (!cur || cur.startsWith('Thanh toán tiền mua vàng')) {
    el.value = ten ? `Thanh toán tiền mua vàng (bạc) của khách hàng ${ten}` : '';
  }
}

async function onBankQrScanned(text) {
  const info = parseVietQR(text);
  const msg = document.getElementById('po-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-sm text-amber-600';
    return;
  }
  if (info.bin) selectBankByBin(info.bin);
  if (info.so_tk) document.getElementById('kh-sotk').value = info.so_tk;
  if (info.noi_dung) document.getElementById('kh-noidungck').value = info.noi_dung;
  msg.textContent = '✅ Đã điền Ngân hàng + STK từ mã QR.';
  msg.className = 'text-sm text-green-700';

  // Tra luôn TÊN CHỦ TÀI KHOẢN (VietQR lookup) — khỏi phải gõ tay
  if (info.bin && info.so_tk) {
    msg.textContent = '⏳ Đã điền NH + STK — đang tra tên chủ tài khoản...';
    msg.className = 'text-sm text-gray-500';
    try {
      const r = await fetch('/api/pos/lookup-account', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({bin: info.bin, so_tk: info.so_tk})
      });
      const d = await r.json();
      if (d.success && d.ten_tk) {
        document.getElementById('kh-tentk').value = d.ten_tk;
        _tentkTouched = true;   // tên tra từ ngân hàng là chuẩn — không để tên khách ghi đè
        msg.textContent = `✅ Quét QR xong: đã điền Ngân hàng + STK + chủ TK "${d.ten_tk}".`;
        msg.className = 'text-sm 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 tên với khách).';
        msg.className = 'text-sm text-green-700';
      }
    } catch (e) {
      msg.textContent = '✅ Đã điền NH + STK từ QR (mạng lỗi, chưa tra được tên chủ TK).';
      msg.className = 'text-sm text-green-700';
    }
  }
}

function deletePurchaseOrder(id) {
  if (!confirm('⚠️ Xóa phiếu mua hàng này? Hàng đã nhập kho từ phiếu (nếu có) cũng bị gỡ khỏi Tồn kho. Thao tác không thể hoàn tác.')) return;
  askPin('Xác nhận xóa phiếu mua hàng', async (pin) => {
    const res = await fetch(`/api/pos/purchase-orders/${id}`, {
      method: 'DELETE', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin })
    });
    const d = await res.json();
    if (!d.success) { alert('❌ ' + _poErrLabel(d.error)); return; }
    loadOrders();
  });
}

// ── CRM Autocomplete ──────────────────────────────────────────────────────────
let _crmResults = [];
let _crmTimer = null;

function _setupCrmAC(inputId) {
  const input = document.getElementById(inputId);
  const wrap = input.parentElement;
  const drop = document.createElement('div');
  drop.className = 'hidden absolute left-0 right-0 bg-white border border-gray-200 rounded-xl shadow-xl z-50 overflow-y-auto';
  drop.style.top = (wrap.offsetHeight || 50) + 4 + 'px';
  drop.style.maxHeight = '200px';
  wrap.appendChild(drop);

  input.addEventListener('input', () => {
    clearTimeout(_crmTimer);
    const q = input.value.trim();
    if (q.length < 1) { drop.classList.add('hidden'); return; }
    _crmTimer = setTimeout(async () => {
      try {
        const res = await fetch('/api/crm/customers?q=' + encodeURIComponent(q));
        const d = await res.json();
        _crmResults = (d.customers || []).slice(0, 8);
        if (!_crmResults.length) { drop.classList.add('hidden'); return; }
        drop.innerHTML = _crmResults.map((c, i) => `
          <div class="px-3 py-2 hover:bg-amber-50 cursor-pointer border-b border-gray-100 last:border-0 text-sm"
               onmousedown="_selectCrmKh(${i})">
            <div class="font-semibold">${c.ho_ten}</div>
            <div class="text-xs text-gray-400">${[c.cccd, c.dien_thoai, c.dia_chi].filter(Boolean).join(' · ')}</div>
          </div>`).join('');
        drop.classList.remove('hidden');
      } catch(e) {}
    }, 250);
  });

  input.addEventListener('blur', () => setTimeout(() => drop.classList.add('hidden'), 150));
}

function _selectCrmKh(i) {
  const c = _crmResults[i];
  if (!c) return;
  document.getElementById('kh-ten').value = c.ho_ten || '';
  document.getElementById('kh-cccd').value = c.cccd || '';
  document.getElementById('kh-dt').value = c.dien_thoai || '';
  document.getElementById('kh-diachi').value = c.dia_chi || '';
  autoNoidung(); syncTenTk();
  document.querySelectorAll('#kh-ten, #kh-cccd, #kh-dt').forEach(inp => {
    const drop = inp.parentElement.querySelector('div');
    if (drop) drop.classList.add('hidden');
  });
}

_setupCrmAC('kh-ten');
_setupCrmAC('kh-cccd');
_setupCrmAC('kh-dt');
</script>

<!-- ── Modal XEM CHI TIẾT phiếu mua (giống 👁️ Xem của Bán hàng) ── -->
<div id="po-view-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4"
     onclick="if(event.target===this)closePoViewModal()">
  <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 phiếu mua <span id="pvm-magd" class="text-amber-700"></span></div>
      <button onclick="closePoViewModal()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">✕</button>
    </div>
    <div id="pvm-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="pvm-ckmb-btn" onclick="" class="hidden btn-ios btn-ios-secondary text-blue-700 px-4 py-2 text-sm">🏦 CK MB</button>
      <a id="pvm-print-link" target="_blank" class="btn-ios btn-ios-secondary text-amber-700 px-4 py-2 text-sm">🖨️ In phiếu</a>
      <button id="pvm-print-remote-btn" 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 id="pvm-receipt-link" target="_blank" class="btn-ios btn-ios-secondary text-red-700 px-4 py-2 text-sm">🖨️ In phiếu chi</a>
      <button id="pvm-receipt-remote-btn" class="btn-ios btn-ios-secondary text-red-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 PC Tại Quầy</button>
      <button onclick="closePoViewModal()" class="btn-ios btn-ios-gold px-4 py-2 text-sm">Đóng</button>
    </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>

<script>
// ── Autocomplete khách hàng từ CRM ──
(function() {
  let _crmTimer = null, _crmDropEl = null, _crmAnchor = null;
  function _dropPos(el) {
    const r = el.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(el) {
    if (!_crmDropEl) {
      const d = document.createElement('div');
      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(el);
    Object.assign(_crmDropEl.style, { top: p.top+'px', left: p.left+'px', width: p.width+'px' });
    return _crmDropEl;
  }
  function _fillCustomer(c) {
    document.getElementById('kh-ten').value    = c.ho_ten     || '';
    document.getElementById('kh-cccd').value   = c.cccd       || '';
    document.getElementById('kh-diachi').value = c.dia_chi    || '';
    document.getElementById('kh-dt').value     = c.dien_thoai || '';
    if (typeof syncTenTk === 'function') syncTenTk();
    _removeDrop();
  }
  function _renderDrop(customers, el) {
    if (!customers.length) { _removeDrop(); return; }
    const d = _getOrCreateDrop(el);
    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">${c.ho_ten||''}</div>`
        + `<div style="color:#94a3b8;font-size:11px">${[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, el, 280);   // định vị an toàn cho ĐT (không đè ô đang gõ)
  }
  window._crmSuggest = function(el) {
    const q = el.value.trim(); _crmAnchor = el; 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 === el) _renderDrop(data.customers || [], el);
      } catch(e) {}
    }, 180);
  };
  window._crmBlur = function() { setTimeout(_removeDrop, 200); };
  document.addEventListener('click', e => {
    if (_crmDropEl && !_crmDropEl.contains(e.target)) _removeDrop();
  });
})();

// ── Màn hình khách: hiện phiếu thu mua đang lập (base.html poll qua _MHK_COLLECT) ──
window._MHK_COLLECT = function() {
  const items = [...document.querySelectorAll('#item-list .item-row')].map(tr => {
    const chatlieu = tr.querySelector('.inp-chatlieu')?.value.trim() || '';
    const tlt      = tr.querySelector('.inp-tlt')?.textContent.trim() || '';
    const gia      = tr.querySelector('.inp-gia')?.value.trim() || '';
    let sub = [];
    if (chatlieu) sub.push(chatlieu);
    if (tlt && tlt !== '0') sub.push('TL tính ' + tlt + ' chỉ' + (gia && gia !== '0' ? ' × ' + gia : ''));
    return {
      ten: tr.querySelector('.inp-ten').value.trim(),
      sub: sub.join(' · '),
      tt:  tr.querySelector('.inp-tt').textContent.trim(),
    };
  }).filter(i => i.ten);
  return {
    ten: document.getElementById('kh-ten').value.trim(),
    sdt: document.getElementById('kh-dt').value.trim(),
    giao_dich: items.length ? {
      loai: '🛒 Thu mua vàng', items,
      phu: [{label: 'Số món', val: String(items.length)}],
      tong: document.getElementById('lbl-tong').textContent + ' đ',
      tong_label: 'Tổng tiền trả khách',
    } : null,
  };
};
</script>
{% endblock %}