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

{% block extra_style %}
<style>
  .tab-btn { border-radius: var(--r-md); font-weight:700; padding:.5rem 1rem; font-size:.875rem; transition: transform .15s cubic-bezier(.34,1.56,.64,1), opacity .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; -webkit-user-select:none; user-select:none; }
  .tab-btn:active { transform: scale(.96); opacity:.9; }
  .tab-active { background: linear-gradient(135deg,var(--brand-dark),var(--brand)); color:#fff; box-shadow: 0 4px 14px rgba(139,0,0,.28); }
  .tab-inactive { background:#f2f2f7; color:#3a3a3c; }
  .tab-inactive:hover { background:#e5e5ea; }
  .pawn-flash { animation: pawnFlash 1.6s ease; }
  @keyframes pawnFlash { 0%,100% { background-color: transparent; } 25% { background-color: #fef3c7; } }
  .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; }
  /* Segmented control cho bộ lọc bảng theo dõi */
  .pawn-seg .tab-btn { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
  .pawn-seg .tab-btn:active { transform: none; opacity: 1; }
  .pawn-seg .tab-active   { background:#fff; color:#1c1c1e; box-shadow:0 1px 4px rgba(0,0,0,.14); }
  .pawn-seg .tab-inactive { background:transparent; color:#6b7280; box-shadow:none; }
  /* Thẻ bài tab chính — vàng gold */
  .pawn-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;
  }
  .pawn-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);
  }
  .pawn-tab-card-inactive {
    background: #fff;
    color: #7a5500;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .pawn-tab-card-inactive:hover { background: #fffbeb; }
  /* Ô nhập trong bảng hàng cầm — hiện viền để thấy chỗ gõ */
  #item-tbody input.input-ios-sm {
    border-color: #d1d5db;
    background: #fff;
  }
  #item-tbody input.input-ios-sm:focus {
    border-color: #8b0000;
    background: #fff;
  }
  .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;
  }
</style>
{% endblock %}

{% block content %}

  {% if not antt.du %}
  <!-- ── GIẤY CHỨNG NHẬN ANTT (bắt buộc với dịch vụ cầm đồ, 25/09/2026) ── -->
  <div class="ios-card p-4 space-y-2" style="border:1.5px solid #fca5a5">
    <div class="font-bold text-red-800">🛡️ Chưa khai báo Giấy chứng nhận đủ điều kiện về an ninh, trật tự</div>
    <div class="text-xs text-gray-600">Kinh doanh cầm đồ bắt buộc có giấy này (NĐ 96/2016, sửa bởi NĐ 56/2023 và NĐ 58/2026).
      Chưa khai báo thì chưa lập được phiếu cầm MỚI; phiếu đang cầm vẫn chuộc, thu lãi, tất toán bình thường.</div>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
      <input id="antt-so" class="input-ios" placeholder="Số giấy chứng nhận" value="{{ antt.so }}">
      <input id="antt-ngay" class="input-ios" placeholder="Ngày cấp (dd/mm/yyyy)" value="{{ antt.ngay_cap }}">
      <input id="antt-noi" class="input-ios" placeholder="Nơi cấp (Công an ...)" value="{{ antt.noi_cap }}">
    </div>
    <label class="text-xs flex items-start gap-2"><input type="checkbox" id="antt-xn">
      <span>Tôi xác nhận cửa hàng có Giấy chứng nhận đủ điều kiện ANTT còn hiệu lực cho ngành nghề cầm đồ.</span></label>
    <button class="tkt-act tkt-red" onclick="luuGiayAntt()">💾 Lưu (Giám đốc + PIN)</button>
  </div>
  {% endif %}

  <!-- ── CẢNH BÁO QUÁ HẠN MỨC ── -->
  <div id="alert-box"></div>
  <div id="pawn-ltv-settings" class="hidden rounded-xl border border-amber-200 bg-amber-50 p-4">
    <div class="flex flex-wrap items-end gap-3">
      <div><label class="lbl">Cảnh báo khi vượt (%)</label><input id="pawn-ltv-warn" type="number" min="0.01" max="99.99" step="0.01" class="input-ios w-32"></div>
      <div><label class="lbl">Chặn tuyệt đối khi vượt (%)</label><input id="pawn-ltv-block" type="number" min="0.02" max="100" step="0.01" class="input-ios w-32"></div>
      <button type="button" onclick="savePawnLtvSettings()" class="btn-ios btn-ios-secondary px-4 py-2 font-bold text-amber-800">Lưu ngưỡng (GĐ/PGĐ + PIN)</button>
      <span id="pawn-ltv-msg" class="text-sm"></span>
    </div>
  </div>

  <!-- ── TABS ── -->
  <div class="flex gap-3">
    <button onclick="showTab('lap')" id="tab-lap" class="pawn-tab-card pawn-tab-card-active">
      <span class="text-3xl leading-none">🪙</span>
      <span class="text-[15px] font-black tracking-wide">Lập phiếu cầm</span>
      <span class="text-[11px] font-normal opacity-80">Tạo phiếu cầm đồ mới</span>
    </button>
    <button onclick="showTab('theodoi')" id="tab-theodoi" class="pawn-tab-card pawn-tab-card-inactive" data-huong-dan="cam-tab-theodoi">
      <span class="text-3xl leading-none">📋</span>
      <span class="text-[15px] font-black tracking-wide">Bảng theo dõi</span>
      <span class="text-[11px] font-normal opacity-70">Quản lý hàng đang cầm</span>
    </button>
  </div>

  <!-- ════════════════ TAB: LẬP PHIẾU CẦM ════════════════ -->
  <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 flex-wrap gap-2">
        <h2 class="font-bold text-gray-700 text-base">🪙 Lập phiếu cầm đồ</h2>
        <div class="flex items-center gap-3 flex-wrap">
          <span class="text-xs text-gray-400">Mã GD: <span id="lbl-ma-gd" class="font-mono font-bold text-amber-700">…</span></span>
          <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>

      <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="window._crmSuggest(this)" onblur="window._crmBlur()" data-huong-dan="cam-khach">
            </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="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>

        <!-- ② Khoản vay + Phương thức thanh toán -->
        <div class="section-card">
          <div class="section-head text-amber-900" style="background:linear-gradient(90deg,#fffbeb,#fef3c7)">
            <span>💰 Khoản vay &amp; thanh toán</span>
          </div>
          <div class="ios-group" style="border-radius:0">
            <div class="ios-field-row">
              <span class="ios-field-label">Số tiền mượn <span class="text-red-500">*</span></span>
              <input id="hg-sotien" type="text" inputmode="numeric" placeholder="0" class="ios-field-input font-bold" data-huong-dan="cam-so-tien">
              <span class="text-gray-400 text-sm flex-shrink-0">đ</span>
            </div>
            <div class="ios-field-row">
              <span class="ios-field-label">Ngày cầm</span>
              <input id="inp-ngay-cam" type="date" class="ios-field-input font-semibold">
            </div>
            <div class="ios-field-row">
              <span class="ios-field-label">Lãi suất ngày</span>
              <input id="hg-laisuat" type="number" step="0.0001" value="0.5" max="{{ lai_ngay_toi_da }}" class="ios-field-input" oninput="hienLaiNam()" data-huong-dan="cam-lai-suat">
              <span class="text-gray-400 text-sm flex-shrink-0">‰</span>
            </div>
            <div id="hg-lainam" class="text-xs px-3 pb-1"></div>
            {% if chinh_sach_lai %}
            <details class="text-xs px-3 pb-2 text-gray-600">
              <summary class="cursor-pointer font-semibold">⚖️ Chính sách lãi suất (phiên bản {{ chinh_sach_lai.phien_ban }}, rà soát {{ chinh_sach_lai.ngay_ra_soat }})</summary>
              <ul class="list-disc pl-5 mt-1 space-y-1">
                {% for q in chinh_sach_lai.quy_tac %}
                <li><strong>{{ q.loai }}:</strong> {{ q.muc }} — <em>{{ q.can_cu }}</em> (hiệu lực từ {{ q.hieu_luc_tu }}). {{ q.ap_dung_trong_app }}.</li>
                {% endfor %}
              </ul>
              <div class="mt-1">Phiếu đã lập giữ nguyên điều khoản đã ký: app không tính lại lãi và không chặn phiếu cũ; chỉ kiểm khi lập phiếu mới hoặc đổi lãi suất.</div>
            </details>
            {% endif %}
            <div class="ios-field-row">
              <span class="ios-field-label">Lãi đã gửi</span>
              <input id="hg-laidagui" type="text" inputmode="numeric" placeholder="0" class="ios-field-input">
              <span class="text-gray-400 text-sm flex-shrink-0">đ</span>
            </div>
          </div>
          <div class="p-4 space-y-3">
            <label class="text-xs font-semibold text-gray-500 uppercase tracking-wide block">Phương thức thanh toán (chi cho khách)</label>
            <select id="sel-hg-hinhthuc" class="input-ios w-full cursor-pointer" onchange="onHgHtttChange()">
              <option value="tien_mat" selected>💵 Tiền mặt</option>
              <option value="chuyen_khoan">🏦 Chuyển khoản</option>
              <option value="ca_hai">🔀 TM/CK</option>
            </select>
            <div id="hg-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="hg-split-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
              </div>
              <div class="flex-1">
                <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
                <input id="hg-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Hàng cầm -->
      <div class="pt-1">
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Hàng cầm</label>
      </div>
      <div class="overflow-x-auto" data-huong-dan="cam-hang">
        <table class="w-full text-sm item-entry-table">
          <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
            <tr>
              <th class="px-2 py-2 text-center">Stt</th>
              <th class="px-2 py-2 text-left">Tên hàng</th>
              <th class="px-2 py-2 text-left">Chất liệu</th>
              <th class="px-2 py-2 text-right">Tổng TL (chỉ)</th>
              <th class="px-2 py-2 text-right">Đá &amp; hao (chỉ)</th>
              <th class="px-2 py-2 text-right">TL tính (chỉ)</th>
              <th class="px-2 py-2 text-right">Giá tham khảo (đ)</th>
              <th class="px-2 py-2 text-right">Giá tạm tính (đ)</th>
              <th class="px-2 py-2 text-right">Thành tiền (đ)</th>
              <th class="px-2 py-2"></th>
            </tr>
          </thead>
          <tbody id="item-tbody"></tbody>
          <tfoot>
            <tr class="font-bold border-t border-gray-100">
              <td colspan="8" class="px-2 py-2 text-right">Tổng tạm tính:</td>
              <td id="lbl-tong-tamtinh" class="px-2 py-2 text-right text-amber-700">0</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
      <button type="button" onclick="addItemRow()" class="btn-ios btn-ios-secondary text-xs font-bold px-3 py-1.5">➕ Thêm hàng</button>
      <datalist id="dl-chatlieu"></datalist>

      <div class="ios-group">
        <div class="ios-field-row">
          <span class="ios-field-label">Ghi chú</span>
          <input id="inp-ghichu" type="text" placeholder="Thêm ghi chú..." class="ios-field-input">
        </div>
      </div>

      <div class="flex items-center gap-3">
        <button onclick="createPawn()" class="btn-ios btn-ios-gold px-6 py-2.5" data-huong-dan="cam-lap-phieu">✅ Lập phiếu cầm</button>
        <button type="button" onclick="pawnSaveDraft()" class="btn-ios btn-ios-secondary px-5 py-2.5">💾 Lưu nháp &amp; làm bản mới</button>
        <span id="pawn-msg" class="text-sm"></span>
      </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="pawn-drafts-box" class="hidden rounded-xl border border-amber-200 p-3" 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="pawn-drafts-list" class="space-y-2"></div>
      </div>
      <p class="text-xs text-gray-400">
        💡 Trọng lượng tính = Tổng trọng lượng − (Đá &amp; hao). Thành tiền = Trọng lượng tính × Giá tạm tính.
        Giá tham khảo là giá mua vào hiện tại theo bảng giá (chỉ để tham khảo, không in trên phiếu).
        Khi lập phiếu, số tiền mượn sẽ được ghi vào Sổ quỹ (mục Chi).
      </p>
    </div>
  </div>

  <!-- ════════════════ TAB: BẢNG THEO DÕI HÀNG CẦM ════════════════ -->
  <div id="section-theodoi" class="hidden space-y-4">
    <div class="ios-card overflow-hidden">

      <!-- Tiêu đề + nút hành động -->
      <div class="px-4 pt-4 pb-3 flex justify-between items-center gap-2" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <span class="font-extrabold text-gray-800">📋 Bảng theo dõi hàng cầm</span>
        <div class="flex items-center gap-2">
          <button type="button" class="scan-btn text-xs" onclick="openScanner('pawn_ticket', lookupPawnTicket)">📷 Quét mã phiếu</button>
          <a href="/api/pos/pawns/export" class="btn-ios btn-ios-secondary text-xs font-bold text-amber-700 px-3 py-1.5">⬇️ Xuất Excel</a>
        </div>
      </div>

      <!-- Bộ lọc trạng thái — segmented control -->
      <div class="px-4 pt-3 pb-2" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <div class="pawn-seg flex gap-1 bg-gray-200/70 rounded-xl p-1">
          <button onclick="filterPawns('')" class="pawn-filter tab-btn tab-active text-xs flex-1 py-1.5" data-f="">🔲 Tất cả</button>
          <button onclick="filterPawns('chua_lay_hang')" class="pawn-filter tab-btn tab-inactive text-xs flex-1 py-1.5" data-f="chua_lay_hang">🟡 Chưa lấy</button>
          <button onclick="filterPawns('da_lay_hang')" class="pawn-filter tab-btn tab-inactive text-xs flex-1 py-1.5" data-f="da_lay_hang">✅ Đã lấy</button>
          <button onclick="filterPawns('bo_hang')" class="pawn-filter tab-btn tab-inactive text-xs flex-1 py-1.5" data-f="bo_hang">🚫 Bỏ hàng</button>
        </div>
      </div>

      <!-- Thanh tìm kiếm -->
      <div class="px-4 py-2.5 border-b border-gray-100" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <div class="flex items-center gap-2 bg-white/80 rounded-xl px-3 py-2 shadow-sm border border-gray-100">
          <span class="text-gray-400">🔍</span>
          <input id="inp-search-pawns" type="text" placeholder="Tìm mã giao dịch, khách hàng, SĐT..." autocomplete="off"
            readonly onfocus="this.removeAttribute('readonly')"
            class="flex-1 bg-transparent border-none outline-none text-sm text-gray-800 placeholder-gray-400" oninput="renderPawnTable()">
          <button onclick="document.getElementById('inp-search-pawns').value='';renderPawnTable();"
            class="text-gray-300 hover:text-gray-500 text-lg leading-none" title="Xóa">×</button>
        </div>
      </div>

      <!-- Tổng quan — SỐ TỔNG HỢP, ẩn với vai trò không có quyền báo cáo -->
      <div class="so-tong px-4 py-3 grid grid-cols-2 sm:grid-cols-4 gap-2">
        <div class="rounded-xl px-3 py-2" style="background:#fef2f2">
          <div class="text-[11px] text-red-500 uppercase font-semibold">Tổng đang mượn</div>
          <div id="lbl-tong-dangmuon" class="font-black text-red-700 text-lg leading-tight">0</div>
        </div>
        <div class="rounded-xl px-3 py-2" style="background:#fffbeb">
          <div class="text-[11px] text-amber-500 uppercase font-semibold">Lãi hiện tại</div>
          <div id="lbl-tong-laihientai" class="font-black text-amber-700 text-lg leading-tight">0</div>
        </div>
        <div class="rounded-xl px-3 py-2" style="background:#f2f2f7">
          <div class="text-[11px] text-gray-400 uppercase font-semibold">Lãi đã thu</div>
          <div id="lbl-tong-laidagui" class="font-black text-gray-700 text-lg leading-tight">0</div>
        </div>
        <div class="rounded-xl px-3 py-2" style="background:#f2f2f7">
          <div class="text-[11px] text-gray-400 uppercase font-semibold">Khách / phiếu đang cầm</div>
          <div id="lbl-tong-khach" class="font-black text-gray-700 text-lg leading-tight">0</div>
        </div>
      </div>

      <!-- Danh sách khách hàng (gộp phiếu) -->
      <div class="px-4 pb-4">
        <div id="pawns-grouped" class="space-y-3"></div>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt = n => Number(n||0).toLocaleString('vi-VN');
let _myRole = window._NV_ROLE || null;
(async () => {
  try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; } catch(e){}
  if (['giam_doc','pho_giam_doc'].includes(_myRole)) {
    document.getElementById('pawn-ltv-settings').classList.remove('hidden');
    try {
      const d = await (await fetch('/api/cam-do/han-muc', {cache:'no-store'})).json();
      if (d.success) {
        document.getElementById('pawn-ltv-warn').value = d.nguong_canh_bao;
        document.getElementById('pawn-ltv-block').value = d.nguong_chan;
      }
    } catch(e) {}
  }
})();
async function savePawnLtvSettings() {
  const msg = document.getElementById('pawn-ltv-msg');
  const r = await fetch('/api/cam-do/han-muc', {method:'PUT', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({pin:getPin(), nguong_canh_bao:document.getElementById('pawn-ltv-warn').value,
      nguong_chan:document.getElementById('pawn-ltv-block').value})});
  const d = await r.json();
  msg.textContent = d.success ? 'Đã lưu ngưỡng.' : `Không lưu được: ${d.error || 'lỗi'}`;
  msg.className = `text-sm ${d.success ? 'text-green-700' : 'text-red-700'}`;
}
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(); }

document.getElementById('inp-ngay-cam').value = new Date().toISOString().slice(0, 10);

// ── 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 = 'pawn-tab-card ' + (tab === 'lap' ? 'pawn-tab-card-active' : 'pawn-tab-card-inactive');
  document.getElementById('tab-theodoi').className = 'pawn-tab-card ' + (tab === 'theodoi' ? 'pawn-tab-card-active' : 'pawn-tab-card-inactive');
  if (tab === 'theodoi') loadPawns();
}

// ── Bảng giá vàng hiện hành (tra "giá tham khảo" = giá mua vào) ──
let _buyPriceMap = {};
async function fetchPrices() {
  try {
    const r = await fetch('/api/prices');
    const d = await r.json();
    _buyPriceMap = {};
    const dl = document.getElementById('dl-chatlieu');
    dl.innerHTML = '';
    (d.prices || []).forEach(p => {
      _buyPriceMap[String(p.loai).trim().toUpperCase()] = p.mua;
      dl.innerHTML += `<option value="${p.loai}">`;
    });
    document.querySelectorAll('#item-tbody tr').forEach(recalcItemRow);
  } catch (e) {}
}
function lookupBuyPrice(chatLieu) {
  if (!chatLieu) return null;
  const key = chatLieu.trim().toUpperCase();
  return _buyPriceMap[key] !== undefined ? _buyPriceMap[key] : null;
}

// ── Định dạng tiền có dấu phân cách hàng nghìn ──
function bindMoneyInput(el) {
  el.addEventListener('input', () => {
    const raw = el.value.replace(/[^\d]/g, '');
    el.value = raw ? Number(raw).toLocaleString('vi-VN') : '';
    const tr = el.closest('tr');
    if (tr && tr.querySelector('.it-ttl')) recalcItemRow(tr);
  });
}
function parseMoneyInput(el) {
  return parseFloat((el.value || '').replace(/\./g, '')) || 0;
}
bindMoneyInput(document.getElementById('hg-sotien'));
bindMoneyInput(document.getElementById('hg-laidagui'));

// ── Bảng hàng cầm (Thêm hàng) ──
function addItemRow() {
  const tbody = document.getElementById('item-tbody');
  const tr = document.createElement('tr');
  tr.className = 'border-b border-gray-50';
  tr.innerHTML = `
    <td class="px-2 py-1.5 text-center text-gray-400 it-stt"></td>
    <td class="px-2 py-1.5" data-label="Tên hàng"><input type="text" class="input-ios-sm w-full it-ten" placeholder="Tên hàng *"></td>
    <td class="px-2 py-1.5" data-label="Chất liệu"><input type="text" class="input-ios-sm w-24 it-chatlieu" list="dl-chatlieu" placeholder="VD: 9999"></td>
    <td class="px-2 py-1.5" data-label="Tổng TL (chỉ)"><input type="number" step="0.001" class="input-ios-sm w-20 text-right it-ttl" placeholder="0"></td>
    <td class="px-2 py-1.5" data-label="Đá &amp; hao (chỉ)"><input type="number" step="0.001" class="input-ios-sm w-20 text-right it-dvh" placeholder="0"></td>
    <td class="px-2 py-1.5 text-right font-semibold it-tlt" data-label="TL tính (chỉ)">0</td>
    <td class="px-2 py-1.5 text-right text-gray-400 it-giatk" data-label="Giá tham khảo (đ)">—</td>
    <td class="px-2 py-1.5" data-label="Giá tạm tính (đ)"><input type="text" inputmode="numeric" class="input-ios-sm w-24 text-right it-giatt" placeholder="0"></td>
    <td class="px-2 py-1.5 text-right font-bold text-amber-700 it-thanhtien" data-label="Thành tiền (đ)">0</td>
    <td class="px-2 py-1.5 text-center item-entry-del"><button type="button" onclick="this.closest('tr').remove(); renumberItems(); recalcTotals();" class="text-red-400 hover:text-red-600 font-bold">✕ <span class="sm:hidden">Xóa dòng</span></button></td>
  `;
  tbody.appendChild(tr);
  bindMoneyInput(tr.querySelector('.it-giatt'));
  tr.querySelector('.it-ttl').addEventListener('input', () => recalcItemRow(tr));
  tr.querySelector('.it-dvh').addEventListener('input', () => recalcItemRow(tr));
  tr.querySelector('.it-chatlieu').addEventListener('input', () => recalcItemRow(tr));
  renumberItems();
}

function renumberItems() {
  document.querySelectorAll('#item-tbody tr').forEach((tr, i) => {
    tr.querySelector('.it-stt').textContent = i + 1;
  });
}

function recalcItemRow(tr) {
  const ttl = parseFloat(tr.querySelector('.it-ttl').value) || 0;
  const dvh = parseFloat(tr.querySelector('.it-dvh').value) || 0;
  const tlt = Math.max(ttl - dvh, 0);
  tr.querySelector('.it-tlt').textContent = tlt.toLocaleString('vi-VN', {maximumFractionDigits:3});

  const chatLieu = tr.querySelector('.it-chatlieu').value.trim();
  const giaTk = lookupBuyPrice(chatLieu);
  tr.querySelector('.it-giatk').textContent = giaTk !== null ? fmt(giaTk * 1000) : '—';

  const giatt = parseMoneyInput(tr.querySelector('.it-giatt'));
  tr.querySelector('.it-thanhtien').textContent = fmt(Math.round(tlt * giatt));

  recalcTotals();
}

function recalcTotals() {
  let total = 0;
  document.querySelectorAll('#item-tbody tr').forEach(tr => {
    const ttl = parseFloat(tr.querySelector('.it-ttl').value) || 0;
    const dvh = parseFloat(tr.querySelector('.it-dvh').value) || 0;
    const tlt = Math.max(ttl - dvh, 0);
    const giatt = parseMoneyInput(tr.querySelector('.it-giatt'));
    total += tlt * giatt;
  });
  document.getElementById('lbl-tong-tamtinh').textContent = fmt(Math.round(total)) + ' đ';
}

// ── Mã giao dịch tự động ──
async function loadMaGd() {
  try {
    const r = await fetch('/api/pos/pawns/gen-ma-gd');
    const d = await r.json();
    document.getElementById('lbl-ma-gd').textContent = d.ma_gd;
  } catch (e) {}
}

// ── Phương thức thanh toán khi lập phiếu cầm ──
function onHgHtttChange() {
  const v = document.getElementById('sel-hg-hinhthuc').value;
  document.getElementById('hg-split-row').style.display = v === 'ca_hai' ? 'flex' : 'none';
}

// ── Phương thức thanh toán khi sửa phiếu cầm ──
function onEpHtttChange() {
  const v = document.getElementById('ep-hinhthuc').value;
  document.getElementById('ep-split-row').style.display = v === 'ca_hai' ? 'flex' : 'none';
}

function _hgNgayCam() {
  const raw = document.getElementById('inp-ngay-cam').value; // yyyy-mm-dd
  if (!raw) return '';
  const [y, m, d] = raw.split('-');
  return `${d}/${m}/${y}`;
}

function _collectPawnItems(sel) {
  const items = [];
  document.querySelectorAll(sel).forEach(tr => {
    const ten_hang = tr.querySelector('.it-ten').value.trim();
    if (!ten_hang) return;
    items.push({
      ten_hang,
      chat_lieu: tr.querySelector('.it-chatlieu').value.trim(),
      tong_trong_luong: parseFloat(tr.querySelector('.it-ttl').value) || 0,
      da_va_hao: parseFloat(tr.querySelector('.it-dvh').value) || 0,
      gia_tam_tinh: parseMoneyInput(tr.querySelector('.it-giatt')) / 1000,
    });
  });
  return items;
}

// ── Lập phiếu cầm ──
async function createPawn() {
  const msg = document.getElementById('pawn-msg');
  const ten = document.getElementById('kh-ten').value.trim();
  // KHÁCH GỬI HÀNG NHƯNG CHƯA CẦM → số tiền cầm = 0 là HỢP LỆ (chủ tiệm chốt 29/07/2026).
  // Chỉ báo lỗi khi ô số tiền BỎ TRỐNG (chưa điền), không chặn số 0.
  const oSoTien = document.getElementById('hg-sotien');
  const chuaDien = String(oSoTien.value || '').trim() === '';
  const sotien = parseMoneyInput(oSoTien);
  const items = _collectPawnItems('#item-tbody tr');
  if (!ten || chuaDien || !items.length) {
    msg.textContent = !ten ? '⚠️ Vui lòng nhập tên khách hàng.'
      : (chuaDien ? '⚠️ Vui lòng điền Số tiền cầm. Khách gửi hàng mà chưa cầm thì điền 0.'
                  : '⚠️ Vui lòng nhập ít nhất 1 món hàng cầm (tên hàng).');
    msg.className = 'text-sm text-amber-600';
    return;
  }
  if (sotien < 0) {
    msg.textContent = '⚠️ Số tiền cầm không được âm.';
    msg.className = 'text-sm text-amber-600';
    return;
  }

  const httt = document.getElementById('sel-hg-hinhthuc').value;
  const body = {
      pin: getPin(),
      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(),
      so_tien_muon: sotien / 1000,
      lai_suat_ngay: document.getElementById('hg-laisuat').value,
      lai_da_gui: parseMoneyInput(document.getElementById('hg-laidagui')) / 1000,
      ngay_cam: _hgNgayCam(),
      items,
      ghi_chu: document.getElementById('inp-ghichu').value.trim(),
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('hg-split-tm') : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('hg-split-ck') : 0,
  };
  let res = await fetch('/api/pos/pawns', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify(body)
  });
  let data = await res.json();
  if (res.status === 409 && data.error === 'can_xac_nhan_vuot_nguong') {
    const d = data.chi_tiet || {};
    const noiDung = `Tỷ lệ nghĩa vụ/giá trị tài sản là ${d.ty_le_phan_tram}% (ngưỡng cảnh báo ${d.nguong_canh_bao}%).\n` +
      `Nghĩa vụ ${Number(d.tong_nghia_vu || 0).toLocaleString('vi-VN')} nghìn đồng; định giá ${Number(d.gia_tri_hang || 0).toLocaleString('vi-VN')} nghìn đồng.\n` +
      'Chỉ Giám đốc/Phó Giám đốc được xác nhận tiếp tục. Mức vượt ngưỡng tuyệt đối vẫn bị chặn.';
    if (confirm(noiDung)) {
      const pin = prompt('Giám đốc/Phó Giám đốc nhập PIN để xác nhận khoản cầm vượt ngưỡng cảnh báo:');
      if (!pin) return;
      body.pin = pin.trim();
      body.xac_nhan_han_muc = true;
      res = await fetch('/api/pos/pawns', {
        method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body)
      });
      data = await res.json();
    } else return;
  }
  if (data.success) {
    msg.innerHTML = `✅ Đã lập phiếu cầm ${data.ma_gd} — đang chuyển sang Bảng theo dõi...`;
    msg.className = 'text-sm text-green-600 font-semibold';
    ['kh-ten','kh-cccd','kh-diachi','kh-dt','hg-sotien','hg-laidagui','inp-ghichu','hg-split-tm','hg-split-ck'].forEach(id => document.getElementById(id).value = '');
    document.getElementById('hg-laisuat').value = '0.5'; hienLaiNam();
    fpSet('inp-ngay-cam', new Date().toISOString().slice(0, 10));
    document.getElementById('sel-hg-hinhthuc').value = 'tien_mat';
    onHgHtttChange();
    document.getElementById('item-tbody').innerHTML = '';
    addItemRow();
    recalcTotals();
    loadMaGd();
    loadAlerts();
    // Nếu phiếu này lập từ 1 bản nháp → xóa nháp đó (đã thành phiếu thật) + làm mới danh sách
    if (_pawnCurDraft) {
      fetch('/api/pawn/drafts/' + _pawnCurDraft, { method: 'DELETE' }).catch(() => {});
      _pawnCurDraft = null;
    }
    loadPawnDrafts();
    // Hiện ngay thông tin phiếu vừa lập ở Bảng theo dõi (cuộn tới + nháy sáng) —
    // in phiếu giờ là thao tác TÙY CHỌN (nút 🖨️ In ngay trên dòng phiếu đó), không tự mở nữa.
    lookupPawnTicket(data.ma_gd);
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ ${data.message || data.error || 'Không thể lưu phiếu.'}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── Lưu nháp phiếu cầm (LƯU SERVER — nhiều bản, gắn người tạo, sửa tiếp/lập sau) ──
let _pawnCurDraft = null;   // id bản nháp đang sửa (null = form mới, chưa gắn nháp)

function _pawnDraftData() {
  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,
    so_tien_muon: document.getElementById('hg-sotien').value,
    lai_suat_ngay: document.getElementById('hg-laisuat').value,
    lai_da_gui: document.getElementById('hg-laidagui').value,
    ngay_cam: document.getElementById('inp-ngay-cam').value,
    ghi_chu: document.getElementById('inp-ghichu').value,
    hinh_thuc_tt: document.getElementById('sel-hg-hinhthuc').value,
    split_tm: document.getElementById('hg-split-tm').value,
    split_ck: document.getElementById('hg-split-ck').value,
    items: _collectPawnItems('#item-tbody tr'),
  };
}

function _pawnResetForm() {
  ['kh-ten','kh-cccd','kh-diachi','kh-dt','hg-sotien','hg-laidagui','inp-ghichu','hg-split-tm','hg-split-ck']
    .forEach(id => document.getElementById(id).value = '');
  document.getElementById('hg-laisuat').value = '0.5'; hienLaiNam();
  document.getElementById('sel-hg-hinhthuc').value = 'tien_mat';
  onHgHtttChange();
  fpSet('inp-ngay-cam', new Date().toISOString().slice(0, 10));
  document.getElementById('item-tbody').innerHTML = '';
  addItemRow();
  recalcTotals();
  _pawnCurDraft = null;
}

async function pawnSaveDraft() {
  const msg = document.getElementById('pawn-msg');
  const data = _pawnDraftData();
  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 nhất tên khách hoặc 1 món hàng rồi lưu.';
    msg.className = 'text-sm text-amber-600'; return;
  }
  const sotien = parseMoneyInput(document.getElementById('hg-sotien'));
  const tom_tat = `${ten || '(chưa có tên)'} — ${sotien ? fmt(sotien) + 'đ' : 'chưa nhập tiền'} — ${(data.items || []).length} món`;
  try {
    const r = await fetch('/api/pawn/drafts', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ id: _pawnCurDraft, 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';
    _pawnResetForm();
    loadPawnDrafts();
  } catch (e) {
    msg.textContent = '❌ Không lưu được nháp: ' + e.message;
    msg.className = 'text-sm text-red-600';
  }
}

function _pawnFillDraft(d) {
  d = d || {};
  document.getElementById('kh-ten').value = d.khach_hang || '';
  document.getElementById('kh-cccd').value = d.cccd || '';
  document.getElementById('kh-diachi').value = d.dia_chi || '';
  document.getElementById('kh-dt').value = d.dien_thoai || '';
  document.getElementById('hg-sotien').value = d.so_tien_muon || '';
  document.getElementById('hg-laisuat').value = d.lai_suat_ngay || '0.5'; hienLaiNam();
  document.getElementById('hg-laidagui').value = d.lai_da_gui || '';
  if (d.ngay_cam) fpSet('inp-ngay-cam', (d.ngay_cam || '').slice(0, 10));
  document.getElementById('inp-ghichu').value = d.ghi_chu || '';
  document.getElementById('sel-hg-hinhthuc').value = d.hinh_thuc_tt || 'tien_mat';
  document.getElementById('hg-split-tm').value = d.split_tm || '';
  document.getElementById('hg-split-ck').value = d.split_ck || '';
  onHgHtttChange();
  document.getElementById('item-tbody').innerHTML = '';
  (d.items || []).forEach(it => {
    addItemRow();
    const tr = document.getElementById('item-tbody').lastElementChild;
    tr.querySelector('.it-ten').value = it.ten_hang || '';
    tr.querySelector('.it-chatlieu').value = it.chat_lieu || '';
    tr.querySelector('.it-ttl').value = it.tong_trong_luong || '';
    tr.querySelector('.it-dvh').value = it.da_va_hao || '';
    tr.querySelector('.it-giatt').value = it.gia_tam_tinh ? Number(it.gia_tam_tinh * 1000).toLocaleString('vi-VN') : '';
    recalcItemRow(tr);
  });
  if (!(d.items || []).length) addItemRow();
  recalcTotals();
}

async function loadPawnDrafts() {
  const box = document.getElementById('pawn-drafts-box');
  const list = document.getElementById('pawn-drafts-list');
  try {
    const r = await fetch('/api/pawn/drafts');
    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 = (_pawnCurDraft == 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="resumePawnDraft(${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="deletePawnDraft(${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 resumePawnDraft(id) {
  const msg = document.getElementById('pawn-msg');
  try {
    const r = await fetch('/api/pawn/drafts/' + id);
    const d = await r.json();
    if (!d.success) throw new Error(d.error || 'không tìm thấy');
    _pawnFillDraft((d.draft && d.draft.data) || {});
    _pawnCurDraft = id;
    msg.innerHTML = `✏️ Đang sửa bản nháp. Bấm <b>Lập phiếu cầm</b> để hoàn tất (nháp tự xóa), hoặc <b>Lưu nháp</b> để cập nhật lại.`;
    msg.className = 'text-sm text-blue-600';
    loadPawnDrafts();
    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 deletePawnDraft(id) {
  if (!confirm('Xóa bản nháp này?')) return;
  try {
    await fetch('/api/pawn/drafts/' + id, { method: 'DELETE' });
    if (_pawnCurDraft == id) _pawnCurDraft = null;
    loadPawnDrafts();
  } catch (e) {}
}

// ── Cảnh báo quá hạn mức ──
function canhBaoBadge(p) {
  const map = {
    con_han_muc: ['bg-green-50 text-green-700 border-green-200', '✅ Còn hạn mức'],
    qua_han_muc: ['bg-red-50 text-red-700 border-red-200', '⚠️ Quá hạn mức'],
    da_tra_hang: ['bg-blue-50 text-blue-700 border-blue-200', '📦 Đã trả hàng'],
    da_huy_hang: ['bg-gray-100 text-gray-500 border-gray-200', '🚫 Đã hủy hàng'],
  };
  const [cls, label] = map[p.canh_bao] || ['bg-gray-50 text-gray-500 border-gray-200', p.canh_bao || ''];
  return `<span class="border text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap ${cls}">${label}</span>`;
}

let _alertsOpen = false;   // mặc định thu gọn — chỉ hiện tiêu đề, click mới xổ danh sách

function toggleAlerts() {
  _alertsOpen = !_alertsOpen;
  const list = document.getElementById('alert-list');
  const chev = document.getElementById('alert-chev');
  if (list) list.classList.toggle('hidden', !_alertsOpen);
  if (chev) chev.textContent = _alertsOpen ? '▴' : '▾';
}

async function loadAlerts() {
  const res = await fetch('/api/pos/pawns');
  const data = await res.json();
  const box = document.getElementById('alert-box');
  if (!data.alerts || !data.alerts.length) { box.innerHTML = ''; return; }
  box.innerHTML = `
    <div class="ios-card p-4" style="border:1.5px solid #fecaca;background:linear-gradient(135deg,#fef2f2,#fff1f2)">
      <div onclick="toggleAlerts()" class="font-bold text-red-700 flex items-center justify-between cursor-pointer select-none">
        <span>🔔 Cảnh báo — ${data.alerts.length} phiếu cầm đã quá hạn mức</span>
        <span id="alert-chev" class="text-red-400">${_alertsOpen ? '▴' : '▾'}</span>
      </div>
      <div id="alert-list" class="space-y-1 text-sm mt-2 ${_alertsOpen ? '' : 'hidden'}">
        ${data.alerts.map(p => `
          <div onclick="lookupPawnTicket('${p.ma_gd}')" title="Bấm để xem chi tiết phiếu ${p.ma_gd}"
            class="flex justify-between items-center bg-white rounded-xl px-3 py-2 border border-red-100 cursor-pointer hover:bg-red-50 transition">
            <span><strong>${p.ma_gd}</strong> — ${p.khach_hang||''} — ${(p.items||[]).map(i=>i.ten_hang).join(', ')} — Giá trị còn lại: ${fmt(p.gia_tri_con_lai * 1000)}đ</span>
            <span class="flex items-center gap-1.5 whitespace-nowrap">${canhBaoBadge(p)}<span class="text-red-300">→</span></span>
          </div>`).join('')}
      </div>
    </div>`;
}

// ── Bảng theo dõi hàng cầm ──
let _currentFilter = '';
let _allPawns = [];
function filterPawns(status) {
  _currentFilter = status;
  document.querySelectorAll('.pawn-filter').forEach(b => {
    b.className = 'pawn-filter tab-btn text-xs flex-1 py-1.5 ' + (b.dataset.f === status ? 'tab-active' : 'tab-inactive');
  });
  loadPawns();
}

const _TRANG_THAI_OPTS = { chua_lay_hang: 'Chưa lấy hàng', da_lay_hang: 'Đã lấy hàng', bo_hang: 'Bỏ hàng' };
let _pawnExpanded = {};   // nhớ khách nào đang mở rộng (theo khóa)

function _pawnCustKey(p) {
  return (p.cccd && p.cccd.trim()) ? 'cccd:' + p.cccd.trim()
                                   : 'ten:' + ((p.khach_hang || '').trim().toLowerCase());
}

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

// Nhãn + màu trạng thái (CHỈ HIỂN THỊ ở dòng phiếu — muốn đổi phải vào ⚙️ Thao tác)
function _ttBadgePawn(tt) {
  const m = {
    chua_lay_hang: ['Chưa lấy hàng', '#fef3c7', '#92400e'],
    da_lay_hang:   ['Đã lấy hàng',   '#dcfce7', '#166534'],
    bo_hang:       ['Bỏ hàng',       '#fee2e2', '#991b1b'],
  }[tt] || [tt || '—', '#f2f2f7', '#6b7280'];
  return `<span class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap" style="background:${m[1]};color:${m[2]}">${m[0]}</span>`;
}

function _pawnTicketRow(p) {
  // Dòng phiếu = THÔNG BÁO thuần (không ô nhập/chọn nào) — mọi thao tác gom vào nút ⚙️
  return `<div class="rounded-xl border border-gray-100 px-3 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5" data-ma-gd="${p.ma_gd}">
    <span class="font-mono font-semibold text-xs">${p.ma_gd}</span>
    ${_ttBadgePawn(p.trang_thai)}
    ${canhBaoBadge(p)}
    <span class="text-xs text-gray-400">${(p.ngay_cam||'').split(' ')[0]} · ${p.so_ngay_da_cam ?? '—'} ngày</span>
    <span class="text-xs">Dư nợ: <b>${fmt((p.du_no_hien_tai ?? p.so_tien_muon) * 1000)}đ</b></span>
    <span class="text-xs ${p.lai_hien_tai>0?'text-amber-700':''}">Lãi HT: <b>${fmt(p.lai_hien_tai * 1000)}đ</b></span>
    <span class="text-xs text-gray-400">Lãi đã gửi: <b class="text-gray-700">${fmt(p.lai_da_gui * 1000)}đ</b></span>
    <span class="ml-auto flex items-center gap-2 whitespace-nowrap">
      <button onclick='openPawnActionModal(${p.id})' data-huong-dan="cam-action-ticket"
        class="btn-ios text-white text-xs px-3 py-1.5 rounded-lg font-bold"
        style="background:linear-gradient(135deg,#92400e,#d97706)">⚙️ Thao tác</button>
    </span>
    ${p.ghi_chu ? `<div class="w-full text-xs text-gray-500 whitespace-pre-wrap break-words">📝 ${String(p.ghi_chu).replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[ch]))}</div>` : ''}
    ${p.lai_nam_hieu_dung > 20 ? `<div class="w-full rounded-lg bg-red-50 px-3 py-2 text-xs text-red-800">⚠️ Phiếu cũ có gốc ban đầu ${fmt(Number(p.so_tien_muon) * 1000)}đ; do mức sàn tính lãi 1.000.000đ, lãi tương đương ${Number(p.lai_nam_hieu_dung).toFixed(2)}%/năm trên gốc. Không tự đổi số lãi lịch sử; cần rà soát cách xử lý.</div>` : ''}
  </div>`;
}

// Phân loại NGUỒN thu/chi từ tiền tố nội dung sổ quỹ (pawn_db ghi prefix cố định)
function _gdNguon(gd) {
  const nd = gd.noi_dung || '';
  if (nd.startsWith('Thu lãi'))   return ['Thu lãi', '#dcfce7', '#166534'];
  if (nd.startsWith('Chuộc hàng')) return ['Thu chuộc hàng (gốc + lãi)', '#dcfce7', '#166534'];
  if (nd.startsWith('Trả bớt'))   return ['Thu trả bớt gốc', '#d1fae5', '#065f46'];
  if (nd.startsWith('Vay thêm'))  return ['Chi khách vay thêm', '#fee2e2', '#991b1b'];
  if (nd.startsWith('Cầm hàng') || nd.includes('cầm hàng — Phiếu')) return ['Chi cho vay (cầm hàng)', '#fef3c7', '#92400e'];
  return [gd.loai === 'thu' ? 'Thu khác' : 'Chi khác', '#f2f2f7', '#6b7280'];
}

function _custCard(g) {
  const key = _pawnCustKey(g.pawns[0]);
  const ekey = encodeURIComponent(key);
  const initials = vnInitial(g.khach_hang);
  const badge = g.quaHan
    ? '<span style="background:#fee2e2;color:#991b1b" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">Quá hạn mức</span>'
    : g.active ? '<span style="background:#dcfce7;color:#166534" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">Đang cầm</span>'
    : '<span style="background:#f2f2f7;color:#6b7280" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">Đã tất toán</span>';

  // Món cầm đang giữ (phiếu chưa lấy) + các điều chỉnh + lịch sử thanh toán TM/CK
  const items = [];
  g.pawns.forEach(p => (p.items||[]).forEach(it => { if (p.trang_thai==='chua_lay_hang') items.push({it, ma_gd:p.ma_gd}); }));
  const adjs = [];
  g.pawns.forEach(p => (p.adjustments||[]).forEach(a => adjs.push({a, ma_gd:p.ma_gd})));
  adjs.sort((x,y)=> (y.a.id||0) - (x.a.id||0));
  const giaoDich = [];
  g.pawns.forEach(p => (p.giao_dich||[]).forEach(gd => giaoDich.push({gd, ma_gd:p.ma_gd, pawn_id:p.id})));
  giaoDich.sort((x,y)=> (y.gd.id||0) - (x.gd.id||0));

  const open = !!_pawnExpanded[key];
  return `<div class="ios-card overflow-hidden" style="border:1px solid ${g.quaHan?'#fecaca':'#fde68a'}">
    <div onclick="togglePawnCust('${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.khach_hang||'—'}</div>
        <div class="text-xs text-gray-400 truncate">${g.cccd||'(không CCCD)'}${g.dien_thoai?' · '+g.dien_thoai:''} · ${g.pawns.length} phiếu · ${g.soMon} món</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">Đang mượn</div>
          <div class="font-black ${g.quaHan?'text-red-700':'text-gray-800'}">${fmt(g.dangMuon*1000)}đ</div>
        </div>
        ${badge}
        <span id="cust-chev-${key}" class="text-gray-400">${open?'▴':'▾'}</span>
      </div>
    </div>
    <div id="cust-body-${key}" class="${open?'':'hidden'} px-4 pb-4 pt-1 space-y-3">
      <div class="grid grid-cols-2 gap-2 text-sm">
        <div class="rounded-xl px-3 py-2 bg-gray-50"><div class="text-[11px] text-gray-400 uppercase">Tổng phải thu (gốc + lãi)</div><div class="font-bold text-gray-800">${fmt(g.phaiThu*1000)}đ</div></div>
        <div class="rounded-xl px-3 py-2 bg-gray-50"><div class="text-[11px] text-gray-400 uppercase">Lãi hiện tại</div><div class="font-bold text-amber-700">${fmt(g.laiHT*1000)}đ</div></div>
      </div>

      <div>
        <div class="text-xs font-semibold text-gray-500 mb-1">💎 Sản phẩm đang cầm (${items.length})</div>
        ${items.length ? `<div class="rounded-xl border border-gray-100 divide-y divide-gray-50">
          ${items.map(({it,ma_gd}) => `<div class="px-3 py-1.5 flex justify-between gap-2 text-sm">
            <span>${it.ten_hang||'—'}${it.chat_lieu?' <span class="text-gray-400">('+it.chat_lieu+')</span>':''}</span>
            <span class="text-gray-400 text-xs whitespace-nowrap">${ma_gd} · ${Number(it.trong_luong_tinh||0).toLocaleString('vi-VN',{maximumFractionDigits:3})} chỉ</span>
          </div>`).join('')}
        </div>` : '<div class="text-xs text-gray-300">Không còn món nào đang cầm.</div>'}
      </div>

      ${adjs.length ? `<div>
        <div class="text-xs font-semibold text-gray-500 mb-1">🔄 Vay thêm / trả bớt (${adjs.length})</div>
        <div class="space-y-1">
          ${adjs.map(({a,ma_gd}) => `<div class="flex items-center gap-2 text-sm">
            <span class="${a.loai==='vay_them'?'text-green-700':'text-red-600'} font-bold">${a.loai==='vay_them'?'➕ Vay thêm':'➖ Trả bớt'}</span>
            <b>${fmt((a.so_tien||0)*1000)}đ</b>
            <span class="text-gray-400 text-xs ml-auto">${(a.ngay_bat_dau||'').split(' ')[0]} · ${ma_gd}</span>
          </div>`).join('')}
        </div>
      </div>` : ''}

      ${giaoDich.length ? `<div>
        <div class="text-xs font-semibold text-gray-500 mb-1">💳 Lịch sử thanh toán (${giaoDich.length})</div>
        <div class="rounded-xl border border-gray-100 divide-y divide-gray-50">
          ${giaoDich.map(({gd,ma_gd,pawn_id}) => {
            const isThu = gd.loai === 'thu';
            const httBadge = gd.hinh_thuc === 'tien_mat'
              ? '<span class="text-[10px] px-1.5 py-0.5 rounded-full font-bold" style="background:#dcfce7;color:#166534">💵 TM</span>'
              : '<span class="text-[10px] px-1.5 py-0.5 rounded-full font-bold" style="background:#dbeafe;color:#1e40af">🏦 CK</span>';
            const ng = _gdNguon(gd);
            return `<div class="px-3 py-1.5 flex items-center gap-2 text-sm flex-wrap">
              <span class="${isThu?'text-green-700':'text-red-600'} font-bold whitespace-nowrap">${isThu?'▲ Thu':'▼ Chi'}</span>
              <span class="text-[10px] px-1.5 py-0.5 rounded-full font-bold whitespace-nowrap" style="background:${ng[1]};color:${ng[2]}">${ng[0]}</span>
              <b class="whitespace-nowrap">${fmt((gd.so_tien||0)*1000)}đ</b>
              ${httBadge}
              <span class="text-gray-400 text-xs">${ma_gd}</span>
              ${ng[0].endsWith('khác') ? `<span class="w-full text-gray-400 text-xs whitespace-pre-wrap break-words">${gd.noi_dung||''}</span>` : ''}
              <span class="text-gray-300 text-xs ml-auto whitespace-nowrap">${(gd.ngay||'').split(' ')[0]}</span>
              ${_gdKind(gd.noi_dung) && _gdKind(gd.noi_dung) !== 'cam_hang'
                ? `<button onclick='window.open("/pawns/${pawn_id}/bien-lai?cb=${gd.id}","_blank")' class="text-amber-500 hover:text-amber-700 text-xs flex-shrink-0" title="In biên lai giao dịch này">🖨️</button>` : ''}
              <button onclick='openGdModal(${pawn_id}, ${JSON.stringify(gd)})' class="text-blue-400 hover:text-blue-600 text-xs flex-shrink-0" title="Sửa giao dịch">✏️</button>
              ${_laGdPgd() && _gdKind(gd.noi_dung) !== 'cam_hang'
                ? `<button onclick='xoaGiaoDichCam(${pawn_id}, ${gd.id}, ${JSON.stringify(gd.noi_dung||'')})' class="text-red-400 hover:text-red-600 text-xs flex-shrink-0" title="Xóa giao dịch — GIÁ TRỊ HOÀN LẠI như trước (xóa khoản đóng lãi thì lãi phải thu quay lại)">🗑️</button>` : ''}
            </div>`;
          }).join('')}
        </div>
      </div>` : ''}

      <div>
        <div class="text-xs font-semibold text-gray-500 mb-1">📄 Phiếu cầm (${g.pawns.length})</div>
        <div class="space-y-2">${g.pawns.map(_pawnTicketRow).join('')}</div>
      </div>
    </div>
  </div>`;
}

function renderPawnTable() {
  const q = (document.getElementById('inp-search-pawns')?.value || '').trim().toLowerCase();
  const pawns = q ? _allPawns.filter(p =>
    [p.ma_gd, p.khach_hang, p.cccd, p.dien_thoai].some(v => (v || '').toLowerCase().includes(q))
  ) : _allPawns;

  // Gộp theo khách hàng (CCCD, thiếu CCCD thì theo tên)
  const groups = new Map();
  pawns.forEach(p => {
    const k = _pawnCustKey(p);
    if (!groups.has(k)) groups.set(k, { khach_hang: p.khach_hang, cccd: p.cccd, dien_thoai: p.dien_thoai, pawns: [] });
    groups.get(k).pawns.push(p);
  });
  const arr = [...groups.values()];
  arr.forEach(g => {
    const chua = g.pawns.filter(p => p.trang_thai === 'chua_lay_hang');
    g.dangMuon = chua.reduce((s,p) => s + (p.du_no_hien_tai ?? p.so_tien_muon ?? 0), 0);
    g.laiHT    = chua.reduce((s,p) => s + (p.lai_hien_tai || 0), 0);
    g.phaiThu  = chua.reduce((s,p) => s + ((p.du_no_hien_tai ?? p.so_tien_muon ?? 0) + (p.lai_hien_tai || 0)), 0);
    g.soMon    = g.pawns.reduce((s,p) => s + (p.items||[]).length, 0);
    g.active   = chua.length > 0;
    g.quaHan   = chua.some(p => p.canh_bao === 'qua_han_muc');
    g.maxId    = Math.max(...g.pawns.map(p => p.id));   // phiếu mới nhất của khách này
  });
  // Khách ĐANG CÒN cầm lên trên (mới nhất trước); khách đã TẤT TOÁN hết xuống dưới cùng
  arr.sort((a,b) => (b.active - a.active) || (b.maxId - a.maxId));

  const box = document.getElementById('pawns-grouped');
  box.innerHTML = arr.map(_custCard).join('') ||
    '<div class="text-center text-gray-300 py-10">Không có phiếu cầm</div>';

  // Tổng quan (chỉ tính phiếu chưa lấy)
  const chuaAll = pawns.filter(p => p.trang_thai === 'chua_lay_hang');
  const setTxt = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; };
  setTxt('lbl-tong-dangmuon', fmt(chuaAll.reduce((s,p)=>s+(p.du_no_hien_tai ?? p.so_tien_muon ?? 0),0)*1000) + ' đ');
  setTxt('lbl-tong-laihientai', fmt(chuaAll.reduce((s,p)=>s+(p.lai_hien_tai||0),0)*1000) + ' đ');
  setTxt('lbl-tong-laidagui', fmt(chuaAll.reduce((s,p)=>s+(p.lai_da_gui||0),0)*1000) + ' đ');
  setTxt('lbl-tong-khach', arr.filter(g=>g.active).length + ' / ' + chuaAll.length);
}

async function loadPawns() {
  const res = await fetch('/api/pos/pawns' + (_currentFilter ? '?status=' + _currentFilter : ''));
  const data = await res.json();
  _allPawns = data.pawns;
  renderPawnTable();   // tự dựng thẻ khách + tổng quan
}

async function updatePawn(id, payload) {
  const res = await fetch(`/api/pos/pawns/${id}/update`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), ...payload })
  });
  return res.json();
}

// ── Modal xác nhận thanh toán (thu lãi / chuộc hàng) ──
let _pmCtx = null;
function openPawnPayModal(title, amountNghin, onConfirm, onCancel) {
  document.getElementById('pm-title').textContent = title;
  document.getElementById('pm-amount').textContent = fmt(amountNghin * 1000) + ' đ';
  document.getElementById('pm-sel').value = 'tien_mat';
  document.getElementById('pm-tm').value = '';
  document.getElementById('pm-ck').value = '';
  pmOnHtttChange();
  _pmCtx = { onConfirm, onCancel };
  document.getElementById('pawn-pay-modal').classList.remove('hidden');
}
function pmOnHtttChange() {
  document.getElementById('pm-split-row').style.display = document.getElementById('pm-sel').value === 'ca_hai' ? 'flex' : 'none';
}
function pmCancel() {
  document.getElementById('pawn-pay-modal').classList.add('hidden');
  const cb = _pmCtx && _pmCtx.onCancel;
  _pmCtx = null;
  if (cb) cb();
}
function pmConfirm() {
  const httt = document.getElementById('pm-sel').value;
  const stm = httt === 'ca_hai' ? parseSplitAmt('pm-tm') : 0;
  const sck = httt === 'ca_hai' ? parseSplitAmt('pm-ck') : 0;
  document.getElementById('pawn-pay-modal').classList.add('hidden');
  const cb = _pmCtx && _pmCtx.onConfirm;
  _pmCtx = null;
  if (cb) cb(httt, stm, sck);
}

// ── Modal ⚙️ THAO TÁC PHIẾU — gom thu lãi / đổi tình trạng / vay-trả / sửa / in vào 1 chỗ ──
let _actPawnId = null;

function openPawnActionModal(id) {
  const p = _allPawns.find(x => String(x.id) === String(id));
  if (!p) return;
  _actPawnId = id;
  const isDir = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  document.getElementById('act-magd').textContent = p.ma_gd;
  document.getElementById('act-khach').textContent = p.khach_hang || '—';
  document.getElementById('act-duno').textContent = fmt((p.du_no_hien_tai ?? p.so_tien_muon) * 1000) + 'đ';
  document.getElementById('act-laiht').textContent = fmt((p.lai_hien_tai || 0) * 1000) + 'đ';
  document.getElementById('act-laidagui').textContent = fmt((p.lai_da_gui || 0) * 1000) + 'đ';
  document.getElementById('act-thulai-inp').value = '';
  // Sửa lãi suất: GĐ/PGĐ đổi trực tiếp; NHÂN VIÊN cũng thấy ô nhưng nút là GỬI DUYỆT
  // (29/07/2026 — "chặn từ đầu + nút gửi duyệt rõ ràng", không giấu tính năng).
  document.getElementById('act-laisuat-box').classList.remove('hidden');
  document.getElementById('act-laisuat-inp').value = p.lai_suat_ngay ?? 0;
  const _lsBtn = document.querySelector('#act-laisuat-box button');
  if (_lsBtn) _lsBtn.textContent = isDir ? '💾 Lưu' : '📤 Gửi duyệt';
  // Nút trạng thái: tô đậm trạng thái hiện tại
  document.querySelectorAll('.act-tt-btn').forEach(b => {
    const on = b.dataset.tt === p.trang_thai;
    b.style.opacity = on ? '1' : '.55';
    b.style.outline = on ? '2px solid #92400e' : 'none';
  });
  // Vay/Trả + Thu lãi LUÔN hiện (30/09/2026, chủ tiệm chốt: cảnh báo chứ không chặn — đảo lại
  // quyết định ẩn nút 28/09). Phiếu đã tất toán vẫn dùng được, chỉ server hỏi xác nhận
  // (can_xac_nhan) trước khi ghi. Đặt lại '' MỖI LẦN mở (modal dùng chung, phiếu trước có thể
  // đã ẩn). Xóa: GĐ/PGĐ xóa thẳng; NV thấy nút GỬI DUYỆT xóa (29/07/2026).
  document.getElementById('act-vaytra-btn').style.display = '';
  document.getElementById('act-thulai-box').style.display = '';
  // ♻️ Hoàn lại phiếu: chỉ hiện với phiếu ĐÃ TẤT TOÁN (chuộc / bỏ hàng) và chỉ GĐ/PGĐ
  document.getElementById('act-hoanlai-btn').style.display =
    (isDir && p.trang_thai !== 'chua_lay_hang') ? '' : 'none';
  document.getElementById('act-del-btn').textContent = isDir ? '🗑️ Xóa phiếu' : '📤 Xin xóa (gửi duyệt)';
  document.getElementById('pawn-action-modal').classList.remove('hidden');
}
function closePawnActionModal() {
  document.getElementById('pawn-action-modal').classList.add('hidden');
  _actPawnId = null;
}

// Thu lãi: nhập SỐ TIỀN THU THÊM (đồng) → xác nhận TM/CK → cộng vào lãi đã gửi
function pawnActionThuLai() {
  const p = _allPawns.find(x => String(x.id) === String(_actPawnId));
  if (!p) return;
  const el = document.getElementById('act-thulai-inp');
  const them = parseMoneyInput(el);
  if (!them || them <= 0) { alert('⚠️ Nhập số tiền lãi thu thêm (đồng).'); el.focus(); return; }
  const newVal = (p.lai_da_gui || 0) * 1000 + them;
  const id = _actPawnId;
  closePawnActionModal();
  openPawnPayModal(`💰 Thu lãi — Phiếu ${p.ma_gd}`, them / 1000, async (httt, stm, sck) => {
    const data = await updatePawn(id, { lai_da_gui: newVal / 1000, hinh_thuc_tt: httt, so_tien_tien_mat: stm, so_tien_chuyen_khoan: sck });
    if (!data.success) alert(
      data.error === 'wrong_pin' ? '❌ Sai mã PIN'
      : data.error === 'can_xac_nhan' ? '⚠️ Chưa lưu — bạn đã hủy xác nhận cảnh báo "phiếu đã tất toán". Thử lại nếu vẫn muốn ghi.'
      : `❌ Lỗi: ${data.error}`);
    loadPawns(); loadAlerts();
    if (data.success) setTimeout(() => {
      if (confirm('🖨️ In biên lai thu lãi cho khách?'))
        window.open(`/pawns/${id}/bien-lai?loai=thu_lai`, '_blank');
    }, 150);
  }, () => loadPawns());
}

// Sửa lãi suất phiếu (‰/ngày) — chỉ GĐ/PGĐ; lãi toàn phiếu tính lại theo mức mới
async function pawnActionSuaLaiSuat() {
  const p = _allPawns.find(x => String(x.id) === String(_actPawnId));
  if (!p) return;
  const v = parseFloat(document.getElementById('act-laisuat-inp').value);
  if (isNaN(v) || v < 0) { alert('⚠️ Nhập lãi suất hợp lệ (‰/ngày, ≥ 0).'); return; }
  const cur = Number(p.lai_suat_ngay || 0);
  if (v === cur) { alert('Lãi suất không thay đổi.'); return; }
  // NHÂN VIÊN → gửi duyệt (GĐ/PGĐ duyệt là hệ thống tự đổi)
  if (!_laGdPgd()) {
    const res = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'pawn_lai_suat', phieu_id: Number(_actPawnId),
        ma_phieu: p.ma_gd, payload: { lai_suat_ngay: v,
          _delta: [`Lãi suất: ${cur} → ${v} ‰/ngày`] },
        mo_ta: `Đổi lãi suất ${cur} → ${v} ‰/ngày — Phiếu ${p.ma_gd}` })
    });
    const dt = await res.json();
    if (dt.success) { closePawnActionModal(); alert('✅ Đã gửi yêu cầu đổi lãi suất. GĐ/PGĐ duyệt là áp dụng ngay.'); }
    else alert('❌ ' + (dt.message || dt.error || 'Gửi thất bại'));
    return;
  }
  if (!confirm(`Đổi lãi suất phiếu ${p.ma_gd} từ ${cur} → ${v} ‰/ngày?\nLãi toàn phiếu (kể cả các khoản vay thêm) sẽ tính lại theo mức mới.`)) return;
  const id = _actPawnId;
  const data = await updatePawn(id, { lai_suat_ngay: v });
  if (!data.success) {
    alert(data.error === 'forbidden_role' ? '❌ Chỉ Giám đốc/Phó GĐ mới đổi được lãi suất (kiểm tra đăng nhập + PIN).'
        : (data.error === 'lai_suat_vuot_tran' || data.error === 'vi_pham_quy_dinh') ? `❌ ${data.message || data.error}`
        : data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`);
    return;
  }
  closePawnActionModal();
  loadPawns(); loadAlerts();
}

// Đổi tình trạng phiếu (từ modal thao tác)
async function changePawnTrangThai(val) {
  const id = _actPawnId;
  const p = _allPawns.find(x => String(x.id) === String(id));
  if (!p || p.trang_thai === val) return;
  const labels = {chua_lay_hang:'Chưa lấy hàng', da_lay_hang:'Đã lấy hàng', bo_hang:'Bỏ hàng'};
  if (val === 'da_lay_hang') {
    closePawnActionModal();
    openPawnPayModal(`✅ Chuộc hàng — Phiếu ${p.ma_gd}`, p.tong_phai_thu || 0, async (httt, stm, sck) => {
      const data = await updatePawn(id, { trang_thai: val, hinh_thuc_tt: httt, so_tien_tien_mat: stm, so_tien_chuyen_khoan: sck });
      if (!data.success) alert(data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`);
      loadPawns(); loadAlerts();
      if (data.success) setTimeout(() => {
        if (confirm('🖨️ In biên lai tất toán (chuộc hàng) cho khách?'))
          window.open(`/pawns/${id}/bien-lai?loai=chuoc`, '_blank');
      }, 150);
    }, () => loadPawns());
    return;
  }
  if (!confirm(`Xác nhận chuyển phiếu ${p.ma_gd} thành "${labels[val]}"?`)) return;
  closePawnActionModal();
  const data = await updatePawn(id, { trang_thai: val });
  if (!data.success) alert(
    data.error === 'wrong_pin' ? '❌ Sai mã PIN'
    : data.error === 'dung_hoan_lai_phieu'
      ? '⛔ Phiếu này ĐÃ CHUỘC và tiệm ĐÃ THU tiền chuộc.\n\n'
        + 'Đổi trạng thái suông sẽ giữ nguyên tiền đã thu mà lãi lại tính từ đầu '
        + '(đòi khách 2 lần). Hãy dùng nút ♻️ "Hoàn lại phiếu" trong ⚙️ Thao tác — '
        + 'nút đó gỡ đúng khoản chuộc khỏi sổ quỹ rồi mới mở lại phiếu.'
    : `❌ Lỗi: ${data.error}`);
  loadPawns(); loadAlerts();
  if (data.success && val === 'bo_hang') setTimeout(() => {
    if (confirm('🖨️ In biên bản khách bỏ hàng (2 bên ký xác nhận)?'))
      window.open(`/pawns/${id}/bien-lai?loai=bo_hang`, '_blank');
  }, 150);
}

// ♻️ HOÀN LẠI PHIẾU đã tất toán → về ĐANG CẦM (GĐ/PGĐ). Gỡ đúng khoản tiền
// chuộc đã thu khỏi sổ quỹ — KHÁC hẳn việc chỉ bấm đổi trạng thái (đường đó
// giữ nguyên tiền đã thu mà lãi lại tính từ đầu → đã bị chặn ở server).
async function pawnActionHoanLai() {
  const id = _actPawnId;
  const p = _allPawns.find(x => String(x.id) === String(id));
  if (!p) return;
  const daChuoc = p.trang_thai === 'da_lay_hang';
  const canhBao = daChuoc
    ? `Khoản tiền chuộc đã thu sẽ được GỠ khỏi sổ quỹ (tồn quỹ giảm tương ứng), phiếu quay lại ĐANG CẦM và tính lãi tiếp từ ngày cầm.`
    : `Phiếu "bỏ hàng" quay lại ĐANG CẦM. Lúc bỏ hàng không phát sinh tiền nên sổ quỹ không đổi.`;
  if (!confirm(`♻️ Hoàn lại phiếu ${p.ma_gd}?\n\n${canhBao}`)) return;
  closePawnActionModal();
  askPin('Xác nhận HOÀN LẠI phiếu cầm', async (pin) => {
    const res = await fetch(`/api/pos/pawns/${id}/hoan-lai`, {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin })
    });
    const d = await res.json();
    if (!d.success) {
      alert({ forbidden_role: '❌ Chỉ Giám đốc/Phó GĐ được hoàn lại phiếu.',
              phieu_dang_cam: 'Phiếu này đang cầm — không có gì để hoàn lại.',
            }[d.error] || `❌ Lỗi: ${d.error}`);
      return;
    }
    alert(d.da_hoan_tien
      ? `✅ Đã hoàn lại phiếu. Gỡ khoản chuộc ${fmt(d.da_hoan_tien * 1000)}đ khỏi sổ quỹ — phiếu quay lại ĐANG CẦM.`
      : '✅ Đã hoàn lại phiếu về ĐANG CẦM (không phát sinh tiền).');
    loadPawns(); loadAlerts();
  });
}

function pawnActionVayTra() {
  const p = _allPawns.find(x => String(x.id) === String(_actPawnId));
  if (!p) return;
  const id = _actPawnId;
  closePawnActionModal();
  openPawnAdjModal(id, p.ma_gd);
}
function pawnActionEdit() {
  const p = _allPawns.find(x => String(x.id) === String(_actPawnId));
  if (!p) return;
  closePawnActionModal();
  openPawnEdit(p);
}
function pawnActionNhanBan() {
  const id = _actPawnId;
  closePawnActionModal();
  pawnNhanBan(id);
}

// ── 📄 Nhân bản phiếu (30/09/2026, chủ tiệm chốt): copy lại thông tin khách + hàng cầm của
// 1 phiếu (thường ĐÃ TẤT TOÁN) sang form "Lập phiếu cầm" để tạo PHIẾU CẦM MỚI — thay cho việc
// Vay thêm trên phiếu cũ (bị chặn cứng). CHỈ giữ đúng THÔNG TIN SẢN PHẨM (tên hàng, chất liệu,
// trọng lượng TỔNG, đá & hao) — CHỦ TIỆM CHỐT 30/09/2026: mọi thứ gắn với GIÁ TRỊ/THỜI ĐIỂM đều
// RESET để nhân viên tự định lại theo hiện tại, KHÔNG copy từ phiếu cũ: Giá tạm tính (từng món),
// Số tiền mượn, Lãi suất, Lãi đã gửi, Ngày cầm (tự đặt = HÔM NAY). Mã phiếu tự sinh mới.
function pawnNhanBan(id) {
  const p = _allPawns.find(x => String(x.id) === String(id));
  if (!p) return;
  showTab('lap');
  // Thông tin KHÁCH HÀNG — giữ nguyên (vẫn cùng 1 khách quay lại cầm tiếp)
  document.getElementById('kh-ten').value = p.khach_hang || '';
  document.getElementById('kh-cccd').value = p.cccd || '';
  document.getElementById('kh-diachi').value = p.dia_chi || '';
  document.getElementById('kh-dt').value = p.dien_thoai || '';
  // Khoản vay MỚI — RESET hết về mặc định, KHÔNG copy từ phiếu cũ
  document.getElementById('hg-sotien').value = '';                // Giá cầm (số tiền mượn) — để trống
  document.getElementById('hg-laisuat').value = '0.5';            // Lãi suất — về mặc định chuẩn, KHÔNG lấy lãi phiếu cũ
  hienLaiNam();
  document.getElementById('hg-laidagui').value = '';
  fpSet('inp-ngay-cam', new Date().toISOString().slice(0, 10));   // Ngày cầm = HÔM NAY (phiếu mới)
  document.getElementById('sel-hg-hinhthuc').value = 'tien_mat';
  onHgHtttChange();
  document.getElementById('hg-split-tm').value = '';
  document.getElementById('hg-split-ck').value = '';
  document.getElementById('inp-ghichu').value = `Nhân bản từ phiếu ${p.ma_gd} (đã tất toán)`;

  // Hàng cầm — CHỈ copy THÔNG TIN SẢN PHẨM (tên/chất liệu/TL tổng/đá & hao). "Giá tạm tính"
  // (đơn giá dùng tính khoản cho vay của từng món) CỐ Ý để TRỐNG — không copy giá cũ, vì giá
  // vàng/giá thẩm định có thể đã đổi rất nhiều từ lúc phiếu cũ lập tới nay. Nhân viên tự định
  // giá theo cột "Giá tham khảo" LIVE (tự tính theo bảng giá vàng hiện tại từ chất liệu vừa copy).
  const tbody = document.getElementById('item-tbody');
  tbody.innerHTML = '';
  (p.items || []).forEach(it => {
    addItemRow();
    const tr = tbody.lastElementChild;
    tr.querySelector('.it-ten').value = it.ten_hang || '';
    tr.querySelector('.it-chatlieu').value = it.chat_lieu || '';
    tr.querySelector('.it-ttl').value = it.tong_trong_luong || '';
    tr.querySelector('.it-dvh').value = it.da_va_hao || '';
    // .it-giatt (Giá tạm tính) KHÔNG gán gì — giữ trống mặc định của addItemRow().
    recalcItemRow(tr);
  });
  if (!(p.items || []).length) addItemRow();
  renumberItems(); recalcTotals();
  document.getElementById('pawn-msg').textContent = '';
  window.scrollTo({ top: 0, behavior: 'smooth' });
  setTimeout(() => alert(
    `📄 Đã điền lại THÔNG TIN SẢN PHẨM (tên, chất liệu, trọng lượng, đá & hao) từ phiếu ${p.ma_gd}.\n` +
    `Giá tạm tính / Số tiền mượn / Lãi suất / Ngày cầm đã RESET — vui lòng định giá và điền lại theo thời điểm hiện tại rồi bấm "✅ Lập phiếu cầm".`
  ), 150);
}
async function pawnActionDelete() {
  const id = _actPawnId;
  const p = _allPawns.find(x => String(x.id) === String(id)) || {};
  closePawnActionModal();
  // NHÂN VIÊN → gửi yêu cầu xóa (GĐ/PGĐ duyệt là hệ thống xóa; server cũng chặn tầng 2)
  if (!_laGdPgd()) {
    if (!confirm(`Gửi yêu cầu XÓA phiếu cầm ${p.ma_gd || id} lên GĐ/PGĐ?`)) return;
    const res = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'xoa_phieu', phieu_id: Number(id),
        ma_phieu: p.ma_gd || '', payload: { module: 'cam_do',
          _delta: ['XÓA toàn bộ phiếu cầm ' + (p.ma_gd || id)] },
        mo_ta: `Xin XÓA phiếu cầm ${p.ma_gd || id} — KH: ${p.khach_hang || ''}` })
    });
    const dt = await res.json();
    alert(dt.success ? '✅ Đã gửi yêu cầu xóa. GĐ/PGĐ duyệt là phiếu được xóa.'
                     : '❌ ' + (dt.message || dt.error || 'Gửi thất bại'));
    return;
  }
  deletePawn(id);
}
function pawnActionPrint() {
  window.open(`/pawns/${_actPawnId}/print`, '_blank');
}
function pawnActionPrintRemote() {
  // Đóng modal ⚙️ Thao tác TRƯỚC (cùng z-50, để mở nó sẽ che khuất modal chọn máy in)
  const id = _actPawnId;
  closePawnActionModal();
  printRemote('/pawns/' + id + '/print');
}

// ── Modal vay thêm / trả bớt ──
let _adjPawnId = null;
function _laGdPgd() { return _myRole === 'giam_doc' || _myRole === 'pho_giam_doc'; }

function openPawnAdjModal(id, maGd) {
  // 30/09/2026 (chủ tiệm chốt): Vay thêm/Trả bớt trên phiếu ĐÃ TẤT TOÁN bị CHẶN CỨNG (server
  // cũng chặn `phieu_da_dong` — đây chỉ để tránh bấm rồi mới báo lỗi + gợi ý ngay lối đúng).
  const _pAdj = _allPawns.find(x => String(x.id) === String(id));
  if (_pAdj && _pAdj.trang_thai !== 'chua_lay_hang') {
    if (confirm(`⚠️ Phiếu ${maGd} ĐÃ TẤT TOÁN (đã chuộc/bỏ hàng) — không thể Vay thêm/Trả bớt trên phiếu cũ.\n\nMuốn cho khách vay lại (cầm lại đồ)? Dùng "📄 Nhân bản phiếu" để tạo PHIẾU CẦM MỚI, copy lại thông tin khách + hàng từ phiếu này.\n\nMở Nhân bản phiếu ngay?`)) {
      pawnNhanBan(id);
    }
    return;
  }
  _adjPawnId = id;
  document.getElementById('adj-magd').textContent = maGd;
  document.getElementById('adj-loai').value = 'vay_them';
  document.getElementById('adj-sotien').value = '';
  fpSet('adj-ngay', new Date().toISOString().slice(0, 10));
  document.getElementById('adj-ghichu').value = '';
  document.getElementById('adj-hinhthuc').value = 'tien_mat';
  document.getElementById('adj-split-tm').value = '';
  document.getElementById('adj-split-ck').value = '';
  onAdjHtttChange();
  // Vay thêm/trả bớt đụng TIỀN GỐC → GĐ/PGĐ làm trực tiếp; nhân viên vẫn nhập
  // đủ thông tin nhưng nút là GỬI DUYỆT (chủ tiệm chốt 29/07/2026 — chặn từ đầu,
  // nút gửi duyệt rõ ràng, không để bấm xong mới báo lỗi quyền).
  document.getElementById('adj-submit-btn').textContent =
    _laGdPgd() ? '✅ Xác nhận' : '📤 Gửi duyệt (chờ GĐ/PGĐ)';
  document.getElementById('pawn-adj-modal').classList.remove('hidden');
}
function onAdjHtttChange() {
  document.getElementById('adj-split-row').style.display = document.getElementById('adj-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}
async function submitPawnAdj() {
  const loai = document.getElementById('adj-loai').value;
  const sotien = parseSplitAmt('adj-sotien');
  const ngayRaw = document.getElementById('adj-ngay').value;
  if (!sotien || !ngayRaw) { alert('⚠️ Vui lòng nhập số tiền và ngày.'); return; }
  const [y, m, d] = ngayRaw.split('-');
  const httt = document.getElementById('adj-hinhthuc').value;
  const payload = {
    loai, so_tien: sotien / 1000, ngay_bat_dau: `${d}/${m}/${y}`,
    ghi_chu: document.getElementById('adj-ghichu').value.trim(),
    hinh_thuc_tt: httt,
    so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('adj-split-tm') : 0,
    so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('adj-split-ck') : 0,
  };
  const nhan = loai === 'vay_them' ? 'Vay thêm' : 'Trả bớt';
  const p = _allPawns.find(x => String(x.id) === String(_adjPawnId)) || {};

  // NHÂN VIÊN → GỬI DUYỆT (không gọi thẳng API; server cũng chặn tầng 2)
  if (!_laGdPgd()) {
    payload._delta = [`${nhan}: ${fmt(sotien)}đ (${d}/${m}/${y})`];
    const res = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'pawn_vay_tra', phieu_id: Number(_adjPawnId),
        ma_phieu: p.ma_gd || '', payload,
        mo_ta: `${nhan} ${fmt(sotien)}đ — Phiếu ${p.ma_gd || _adjPawnId}` })
    });
    const dt = await res.json();
    if (dt.success) {
      document.getElementById('pawn-adj-modal').classList.add('hidden');
      alert('✅ Đã gửi yêu cầu ' + nhan.toLowerCase() + '. GĐ/PGĐ duyệt là hệ thống tự ghi.');
    } else alert('❌ ' + (dt.message || dt.error || 'Gửi thất bại'));
    return;
  }

  askPin(`Xác nhận ${nhan} phiếu cầm`, async (pin) => {
    const gui = async (maPin, xacNhan=false) => {
      const res = await fetch(`/api/pos/pawns/${_adjPawnId}/adjustment`, {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ pin:maPin, ...payload, xac_nhan_han_muc:xacNhan })
      });
      const data = await res.json();
      if (!data.success && data.error === 'can_xac_nhan_vuot_nguong' && !xacNhan) {
        const d = data.chi_tiet || {};
        if (!confirm(`Nghĩa vụ sau giao dịch / định giá tài sản: ${d.ty_le_phan_tram}% (ngưỡng cảnh báo ${d.nguong_canh_bao}%).\nTổng nghĩa vụ ${Number(d.tong_nghia_vu || 0).toLocaleString('vi-VN')} nghìn đồng; định giá ${Number(d.gia_tri_hang || 0).toLocaleString('vi-VN')} nghìn đồng.\nGiám đốc/Phó Giám đốc có thể xác nhận; vượt ${d.nguong_chan}% sẽ luôn bị chặn.`)) return;
        askPin(`Xác nhận ${nhan} vượt ngưỡng cảnh báo`, pin2 => gui(pin2, true));
        return;
      }
      if (!data.success) {
      const errMsg = {
        wrong_pin: '❌ Sai mã PIN',
        forbidden_role: '❌ Vay thêm/trả bớt cần Giám đốc hoặc Phó GĐ (kiểm tra đăng nhập + PIN).',
        invalid_ngay: '❌ Ngày không hợp lệ.',
        ngay_phai_sau_ngay_cam: '❌ Ngày điều chỉnh phải sau ngày cầm hàng.',
        phieu_da_dong: '❌ Phiếu này ĐÃ TẤT TOÁN (đã chuộc/đã bỏ hàng) — không thể vay thêm/trả bớt trên phiếu cũ.\nKhách cầm lại đồ (hoặc vay thêm sau khi đã chuộc) là 1 giao dịch cầm đồ MỚI — hãy dùng "📄 Nhân bản phiếu" để tạo PHIẾU CẦM MỚI.',
        vuot_nguong_toi_da: '❌ Tổng nghĩa vụ vượt ngưỡng tối đa. Giao dịch bị chặn, không ghi sổ quỹ.',
        khong_co_gia_tham_chieu: '❌ Không có đủ giá mua hiện hành để định giá an toàn tài sản.',
      }[data.error] || `❌ Lỗi: ${data.error}`;
      alert(errMsg);
      return;
      }
      document.getElementById('pawn-adj-modal').classList.add('hidden');
      loadPawns(); loadAlerts();
      const idIn = _adjPawnId;
      setTimeout(() => {
        if (confirm(`🖨️ In biên lai ${nhan.toLowerCase()} cho khách?`))
          window.open(`/pawns/${idIn}/bien-lai?loai=${loai}`, '_blank');
      }, 150);
    };
    gui(pin);
  });
}

// ── XÓA giao dịch + HOÀN GIÁ TRỊ (GĐ/PGĐ — 29/07/2026 chủ tiệm chốt) ──
async function xoaGiaoDichCam(pawnId, cbId, noiDung) {
  const kind = _gdKind(noiDung);
  const giaiThich = {
    thu_lai:   'Lãi ĐÃ THU sẽ trừ lại → LÃI PHẢI THU của khách QUAY TRỞ LẠI.',
    vay_them:  'Khoản vay thêm bị gỡ → DƯ NỢ GỐC + LÃI tự tính lại như chưa từng vay.',
    tra_bot:   'Khoản trả bớt bị gỡ → DƯ NỢ GỐC + LÃI tự tính lại như chưa từng trả.',
    chuoc_hang:'Khoản chuộc bị gỡ → phiếu QUAY LẠI "Chưa lấy hàng", dư nợ + lãi phải thu như trước.',
  }[kind] || '';
  if (!confirm(`⚠️ XÓA giao dịch này?\n${(noiDung||'').split(' — ')[0]}\n\n${giaiThich}\nDòng sổ quỹ tương ứng cũng bị gỡ (tồn quỹ đổi theo).`)) return;
  askPin('Xác nhận XÓA giao dịch (hoàn giá trị)', async (pin) => {
    const res = await fetch(`/api/pos/pawns/${pawnId}/cashbook/${cbId}`, {
      method: 'DELETE', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin })
    });
    const d = await res.json();
    if (!d.success) {
      alert({ forbidden_role: '❌ Chỉ Giám đốc/Phó GĐ được xóa giao dịch.',
              dung_xoa_phieu:
                'ℹ️ Đây là khoản CHI GỐC lúc cầm hàng — nó CHÍNH LÀ số tiền cho khách vay, '
                + 'xóa riêng nó thì phiếu còn món hàng và còn tính lãi mà không còn khoản vay.\n\n'
                + 'Tùy việc anh cần:\n'
                + '  • Ghi NHẦM SỐ TIỀN → bấm ✏️ ngay dòng này để sửa số (dư nợ tự tính lại).\n'
                + '  • Bỏ hẳn giao dịch → ⚙️ Thao tác → 🗑️ Xóa phiếu (gỡ luôn mọi khoản liên quan).',
              khong_tim_thay_dieu_chinh_lien_ket: '❌ Giao dịch cũ không có liên kết điều chỉnh — cần xử lý tay để không lệch dư nợ.',
            }[d.error] || `❌ Lỗi: ${d.error}`);
      return;
    }
    alert('✅ Đã xóa và HOÀN GIÁ TRỊ — số liệu phiếu đã quay về như trước giao dịch.');
    loadPawns(); loadAlerts();
  });
}

// ── Sửa giao dịch (Cầm hàng/Thu lãi/Chuộc hàng/Vay thêm/Trả bớt) ──
function _gdKind(noiDung) {
  const s = noiDung || '';
  if (s.startsWith('Vay thêm cầm hàng')) return 'vay_them';
  if (s.startsWith('Trả bớt gốc cầm hàng')) return 'tra_bot';
  if (s.startsWith('Cầm hàng')) return 'cam_hang';
  if (s.startsWith('Thu lãi cầm hàng')) return 'thu_lai';
  if (s.startsWith('Chuộc hàng cầm')) return 'chuoc_hang';
  return '';
}
function openGdModal(pawnId, gd) {
  const kind = _gdKind(gd.noi_dung);
  const label = (gd.noi_dung || '').split(' — Phiếu')[0];
  document.getElementById('gdn-label').textContent = label;
  document.getElementById('gdn-pawnid').value = pawnId;
  document.getElementById('gdn-cbid').value = gd.id;
  const isAdj = kind === 'vay_them' || kind === 'tra_bot';
  document.getElementById('gdn-loai-wrap').classList.toggle('hidden', !isAdj);
  if (isAdj) document.getElementById('gdn-loai').value = kind;
  document.getElementById('gdn-sotien').value = (gd.so_tien || 0) * 1000 ? Number((gd.so_tien||0)*1000).toLocaleString('vi-VN') : '';
  document.getElementById('gdn-hinhthuc').value = gd.hinh_thuc || 'tien_mat';
  const [d, t] = (gd.ngay || '').split(' ');
  fpSet('gdn-ngay', _dmy2iso(d || ''));
  document.getElementById('gdn-gio').value = (t || '00:00:00').slice(0, 5);
  document.getElementById('gdn-msg').textContent = '';
  document.getElementById('giaodich-ngay-modal').classList.remove('hidden');
}
async function confirmGdNgay() {
  const msg = document.getElementById('gdn-msg');
  const pawnId = document.getElementById('gdn-pawnid').value;
  const cbId = document.getElementById('gdn-cbid').value;
  const dRaw = document.getElementById('gdn-ngay').value;
  const tRaw = document.getElementById('gdn-gio').value || '00:00';
  const sotien = parseSplitAmt('gdn-sotien');
  if (!dRaw) { msg.textContent = '⚠️ Vui lòng chọn ngày.'; msg.className = 'text-sm text-amber-600'; return; }
  if (!sotien) { msg.textContent = '⚠️ Vui lòng nhập số tiền.'; msg.className = 'text-sm text-amber-600'; return; }
  const [y, m, d] = dRaw.split('-');
  const ngayMoi = `${d}/${m}/${y} ${tRaw}:00`;
  const isAdjVisible = !document.getElementById('gdn-loai-wrap').classList.contains('hidden');
  askPin('Xác nhận sửa giao dịch', async (pin) => {
    const res = await fetch(`/api/pos/pawns/${pawnId}/cashbook/${cbId}`, {
      method: 'PUT', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        pin, ngay: ngayMoi, so_tien: sotien / 1000,
        hinh_thuc: document.getElementById('gdn-hinhthuc').value,
        loai_vay: isAdjVisible ? document.getElementById('gdn-loai').value : null,
      })
    });
    const data = await res.json();
    if (!data.success) {
      const errMsg = {
        wrong_pin: '❌ Sai mã PIN',
        invalid_so_tien: '❌ Số tiền không hợp lệ.',
        invalid_ngay: '❌ Ngày không hợp lệ.',
        ngay_phai_sau_ngay_cam: '❌ Ngày phải sau ngày cầm hàng.',
        khong_tim_thay_dieu_chinh_lien_ket: '❌ Không tìm thấy khoản vay thêm/trả bớt liên kết với giao dịch này (dữ liệu cũ trước bản cập nhật) — không thể sửa an toàn qua đây.',
      }[data.error] || `❌ Lỗi: ${data.error}`;
      alert(errMsg);
      return;
    }
    document.getElementById('giaodich-ngay-modal').classList.add('hidden');
    loadPawns(); loadAlerts();
  });
}

async function onTinhTrangChange(el) {
  const id = el.dataset.id;
  const data = await updatePawn(id, { tinh_trang: el.value.trim() });
  if (!data.success) alert(data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`);
}

// ── Sửa / Xóa phiếu cầm (giám đốc / phó GĐ) ──
let _editPawnId = null;
let _editPawnOriginal = null;

function openPawnEdit(p) {
  _editPawnId = p.id;
  _editPawnOriginal = p;
  // Hiện modal TRƯỚC khi điền dữ liệu — một số trình duyệt không vẽ lại đúng ô lịch
  // (input type="date") nếu gán giá trị trong lúc phần tử còn display:none.
  document.getElementById('ep-modal').classList.remove('hidden');
  const sub = document.getElementById('ep-modal-subtitle');
  if (sub) sub.textContent = (p.ma_gd || '') + (p.ngay_cam ? '  ·  ' + p.ngay_cam.split(' ')[0] : '');
  document.getElementById('ep-kh').value = p.khach_hang || '';
  document.getElementById('ep-cccd').value = p.cccd || '';
  document.getElementById('ep-diachi').value = p.dia_chi || '';
  document.getElementById('ep-dt').value = p.dien_thoai || '';
  // input#ep-ngaycam được flatpickr (base.html) nâng cấp thành altInput riêng — gán thẳng
  // .value không bắn event nên flatpickr không hay biết, ô hiện rỗng/không cập nhật.
  // Phải dùng fpSet() (helper chung của flatpickr trong base.html) để gọi đúng setDate().
  fpSet('ep-ngaycam', _dmy2iso((p.ngay_cam || '').split(' ')[0]));
  updateEpNgayCamHint();
  const _epSotienEl = document.getElementById('ep-sotien');
  _epSotienEl.value = (p.so_tien_muon || 0) * 1000 ? Number((p.so_tien_muon||0)*1000).toLocaleString('vi-VN') : '';
  bindMoneyInput(_epSotienEl);
  document.getElementById('ep-laisuat').value = p.lai_suat_ngay || 0;
  const _epLaiDaGuiEl = document.getElementById('ep-laidagui');
  _epLaiDaGuiEl.value = (p.lai_da_gui || 0) * 1000 ? Number((p.lai_da_gui||0)*1000).toLocaleString('vi-VN') : '';
  bindMoneyInput(_epLaiDaGuiEl);
  const _epLaiDaGuiThemEl = document.getElementById('ep-laidagui-them');
  _epLaiDaGuiThemEl.value = '';
  bindMoneyInput(_epLaiDaGuiThemEl);
  document.getElementById('ep-ghichu').value = p.ghi_chu || '';
  const tbody = document.getElementById('ep-item-tbody');
  tbody.innerHTML = '';
  (p.items || []).forEach(it => addEpItemRow(it));
  if (!(p.items||[]).length) addEpItemRow();

  // Phương thức thanh toán khi cầm (nay sửa được — đồng bộ lại đúng dòng sổ quỹ gốc)
  document.getElementById('ep-hinhthuc').value = p.hinh_thuc_tt || 'tien_mat';
  document.getElementById('ep-split-tm').value = (p.so_tien_tien_mat || 0) ? Number(p.so_tien_tien_mat).toLocaleString('vi-VN') : '';
  document.getElementById('ep-split-ck').value = (p.so_tien_chuyen_khoan || 0) ? Number(p.so_tien_chuyen_khoan).toLocaleString('vi-VN') : '';
  onEpHtttChange();

  // Thanh tóm tắt (chỉ xem) — trạng thái, dư nợ/lãi hiện tại
  document.getElementById('ep-summary').innerHTML = `
    <div><div class="text-[11px] text-gray-400 uppercase">Trạng thái</div><div class="font-bold text-gray-800">${_TRANG_THAI_OPTS[p.trang_thai] || p.trang_thai || '—'}</div></div>
    <div><div class="text-[11px] text-gray-400 uppercase">Dư nợ hiện tại</div><div class="font-bold text-amber-700">${fmt((p.du_no_hien_tai??p.so_tien_muon)*1000)}đ</div></div>
    <div><div class="text-[11px] text-gray-400 uppercase">Lãi hiện tại</div><div class="font-bold text-amber-700">${fmt((p.lai_hien_tai||0)*1000)}đ</div></div>
    <div><div class="text-[11px] text-gray-400 uppercase">Giá tạm tính hàng</div><div class="font-bold text-blue-700 tabular-nums" id="ep-tamtinh">—</div></div>`;
  epTinhTien();

  // Điều chỉnh khoản vay — chỉ xem (vay thêm/trả bớt là giao dịch riêng, có sổ quỹ ngay lúc phát sinh)
  renderEpAdjReadonly(p.adjustments || []);
  // Nút LUÔN hiện (30/09/2026, chủ tiệm chốt lần 2: Vay thêm/Trả bớt trên phiếu đã tất toán
  // CHẶN CỨNG — bấm vẫn được nhưng openPawnAdjModal() tự chặn + gợi ý "📄 Nhân bản phiếu").
  const _epVaythemBtn = document.getElementById('ep-btn-vaythem');
  _epVaythemBtn.style.display = '';
  _epVaythemBtn.onclick = () => { document.getElementById('ep-modal').classList.add('hidden'); openPawnAdjModal(p.id, p.ma_gd); };
  if (p.trang_thai !== 'chua_lay_hang') {
    document.getElementById('ep-adj-list').insertAdjacentHTML('afterbegin',
      '<div class="px-4 py-2 text-xs text-purple-600 bg-purple-50">⚠️ Phiếu đã tất toán — khách cầm lại/vay thêm phải dùng "📄 Nhân bản phiếu" để tạo phiếu cầm MỚI, không ghi được vào phiếu này.</div>');
  }
  // Footer: GĐ/PGĐ → Lưu trực tiếp; nhân viên → Gửi Duyệt
  const isGdPgd = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;
  document.getElementById('ep-btn-luu').classList.toggle('hidden', !isGdPgd);
  document.getElementById('ep-btn-gui-duyet').classList.toggle('hidden', isGdPgd);
  document.getElementById('ep-footer-hint').textContent = isGdPgd
    ? 'Nhấn Lưu để xác nhận với mã PIN'
    : 'Yêu cầu sửa sẽ gửi đến GĐ/PGĐ để duyệt';
}

// Khách đóng thêm lãi thật (tiền vào quỹ) ngay trong màn Sửa phiếu cầm — hỏi TM/CK
// rồi cộng dồn vào lai_da_gui + ghi sổ quỹ, dùng lại đúng cơ chế của ô "Lãi đã gửi"
// trong Bảng theo dõi (update_pawn tự tính phần chênh lệch để ghi 'thu').
function epGhiNhanLaiGuiThem() {
  const el = document.getElementById('ep-laidagui-them');
  const them = parseMoneyInput(el);
  if (!them || them <= 0) { alert('⚠️ Vui lòng nhập số tiền đóng thêm.'); return; }
  const p = _editPawnOriginal;
  if (!p || p.id !== _editPawnId) return;
  const newTotalDong = (p.lai_da_gui || 0) * 1000 + them;
  document.getElementById('ep-modal').classList.add('hidden');
  openPawnPayModal(`💰 Thu lãi thêm — Phiếu ${p.ma_gd}`, them / 1000, async (httt, stm, sck) => {
    const data = await updatePawn(p.id, { lai_da_gui: newTotalDong / 1000, hinh_thuc_tt: httt, so_tien_tien_mat: stm, so_tien_chuyen_khoan: sck });
    if (!data.success) { alert(data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`); return; }
    loadPawns(); loadAlerts();
  }, () => { document.getElementById('ep-modal').classList.remove('hidden'); });
}

function addEpItemRow(it) {
  it = it || {};
  const tr = document.createElement('tr');
  tr.style.borderBottom = '1px solid #dcfce7';
  tr.innerHTML = `
    <td class="px-3 py-2" data-label="Tên hàng"><input class="input-ios-sm w-full ep-ten" value="${(it.ten_hang||'').replace(/"/g,'&quot;')}" placeholder="Tên hàng..."></td>
    <td class="px-3 py-2" data-label="Chất liệu"><input class="input-ios-sm w-full text-center ep-cl" value="${(it.chat_lieu||'').replace(/"/g,'&quot;')}" placeholder="Vàng 18k"></td>
    <td class="px-3 py-2" data-label="Tổng TL (chỉ)"><input type="number" step="0.001" class="input-ios-sm w-full text-center ep-ttl" value="${it.tong_trong_luong||''}" placeholder="0"></td>
    <td class="px-3 py-2" data-label="Đá &amp; hao (chỉ)"><input type="number" step="0.001" class="input-ios-sm w-full text-center ep-dvh" value="${it.da_va_hao||''}" placeholder="0"></td>
    <td class="px-3 py-2" data-label="Giá tạm tính (đ)"><input type="text" inputmode="numeric" class="input-ios-sm w-full text-right ep-giatt font-semibold" value="${(it.gia_tam_tinh||0)*1000 ? Number((it.gia_tam_tinh||0)*1000).toLocaleString('vi-VN') : ''}" placeholder="0"></td>
    <td class="px-3 py-2 text-center item-entry-del"><button onclick="this.closest('tr').remove()" class="w-7 h-7 rounded-full bg-red-100 hover:bg-red-200 text-red-600 text-sm font-bold transition">×</button></td>`;
  document.getElementById('ep-item-tbody').appendChild(tr);
  bindMoneyInput(tr.querySelector('.ep-giatt'));
  tr.querySelector('.ep-giatt').addEventListener('input', epTinhTien);
  tr.querySelector('.item-entry-del button').addEventListener('click', () => setTimeout(epTinhTien, 0));
  epTinhTien();
}

// Tổng "Giá tạm tính" các món — hiện live trên thanh tóm tắt (cải tiến 29/07/2026,
// áp cùng mẫu với modal Sửa đơn đặt / gia công mới)
function epTinhTien() {
  let tong = 0;
  document.querySelectorAll('#ep-item-tbody .ep-giatt').forEach(el => {
    tong += parseFloat((el.value || '').replace(/\./g, '')) || 0;
  });
  const o = document.getElementById('ep-tamtinh');
  if (o) o.textContent = fmt(tong) + 'đ';
}

function updateEpNgayCamHint() {
  const el = document.getElementById('ep-ngaycam');
  const hint = document.getElementById('ep-ngaycam-hint');
  const dmy = _iso2dmy(el.value);
  hint.textContent = dmy ? `→ Ngày ${dmy} (dd/mm/yyyy)` : '';
}
function _dmy2iso(dmy) {
  const m = (dmy || '').match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
  return m ? `${m[3]}-${m[2]}-${m[1]}` : '';
}
function _iso2dmy(iso) {
  const m = (iso || '').match(/^(\d{4})-(\d{2})-(\d{2})$/);
  return m ? `${m[3]}/${m[2]}/${m[1]}` : '';
}

// Vay thêm/trả bớt là giao dịch riêng (ghi sổ quỹ ngay lúc phát sinh — xem openPawnAdjModal),
// nên ở đây chỉ hiển thị lịch sử, không cho sửa/xóa hàng loạt.
function renderEpAdjReadonly(adjustments) {
  const box = document.getElementById('ep-adj-list');
  if (!adjustments.length) {
    box.innerHTML = '<div class="px-4 py-3 text-sm text-gray-300">Chưa có điều chỉnh nào.</div>';
    return;
  }
  box.innerHTML = adjustments.map(a => {
    const isVayThem = a.loai === 'vay_them';
    return `<div class="px-4 py-2 flex items-center gap-2 text-sm border-b border-blue-50 last:border-0">
      <span class="${isVayThem?'text-green-700':'text-red-600'} font-bold whitespace-nowrap">${isVayThem?'➕ Vay thêm':'➖ Trả bớt'}</span>
      <b>${fmt((a.so_tien||0)*1000)}đ</b>
      ${a.ghi_chu ? `<span class="text-gray-400 text-xs truncate">${a.ghi_chu}</span>` : ''}
      <span class="text-gray-400 text-xs ml-auto whitespace-nowrap">${(a.ngay_bat_dau||'').split(' ')[0]}</span>
    </div>`;
  }).join('');
}

function savePawnEdit() {
  const tbody = document.getElementById('ep-item-tbody');
  const items = [];
  tbody.querySelectorAll('tr').forEach(tr => {
    const ten = tr.querySelector('.ep-ten').value.trim();
    if (!ten) return;
    items.push({
      ten_hang: ten,
      chat_lieu: tr.querySelector('.ep-cl').value.trim(),
      tong_trong_luong: parseFloat(tr.querySelector('.ep-ttl').value) || 0,
      da_va_hao: parseFloat(tr.querySelector('.ep-dvh').value) || 0,
      gia_tam_tinh: parseMoneyInput(tr.querySelector('.ep-giatt')) / 1000,
    });
  });
  const ep_httt = document.getElementById('ep-hinhthuc').value;
  askPin('Xác nhận lưu phiếu cầm', async (pin) => {
    const res = await fetch(`/api/pos/pawns/${_editPawnId}/full`, {
      method: 'PUT', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        pin,
        khach_hang: document.getElementById('ep-kh').value.trim(),
        cccd: document.getElementById('ep-cccd').value.trim(),
        dia_chi: document.getElementById('ep-diachi').value.trim(),
        dien_thoai: document.getElementById('ep-dt').value.trim(),
        so_tien_muon: parseMoneyInput(document.getElementById('ep-sotien')) / 1000,
        lai_suat_ngay: parseFloat(document.getElementById('ep-laisuat').value) || 0,
        ghi_chu: document.getElementById('ep-ghichu').value.trim(),
        items,
        hinh_thuc_tt: ep_httt,
        so_tien_tien_mat: ep_httt === 'ca_hai' ? parseSplitAmt('ep-split-tm') : 0,
        so_tien_chuyen_khoan: ep_httt === 'ca_hai' ? parseSplitAmt('ep-split-ck') : 0,
        ngay_cam: _iso2dmy(document.getElementById('ep-ngaycam').value),
        lai_da_gui: parseSplitAmt('ep-laidagui') / 1000,
      })
    });
    const d = await res.json();
    if (!d.success) { alert(d.error === 'vi_pham_quy_dinh' && d.message ? '❌ ' + d.message : _epErrMsg(d.error)); return; }
    document.getElementById('ep-modal').classList.add('hidden');
    loadPawns(); loadAlerts();
  });
}

function _epErrMsg(err) {
  return {
    invalid_ngay_cam: '❌ Ngày cầm không hợp lệ.',
    ngay_cam_phai_truoc_dieu_chinh: '❌ Ngày cầm phải trước ngày của mọi khoản vay thêm/trả bớt đã có trên phiếu này.',
    invalid_lai_da_gui: '❌ Lãi đã gửi không hợp lệ (không được âm).',
  }[err] || `❌ Lỗi: ${err}`;
}

async function submitPawnForApproval() {
  const tbody = document.getElementById('ep-item-tbody');
  const items = [];
  tbody.querySelectorAll('tr').forEach(tr => {
    const ten = tr.querySelector('.ep-ten').value.trim();
    if (!ten) return;
    items.push({
      ten_hang: ten,
      chat_lieu: tr.querySelector('.ep-cl').value.trim(),
      tong_trong_luong: parseFloat(tr.querySelector('.ep-ttl').value) || 0,
      da_va_hao: parseFloat(tr.querySelector('.ep-dvh').value) || 0,
      gia_tam_tinh: parseMoneyInput(tr.querySelector('.ep-giatt')) / 1000,
    });
  });
  const httt2 = document.getElementById('ep-hinhthuc').value;
  const payload = {
    khach_hang: document.getElementById('ep-kh').value.trim(),
    cccd: document.getElementById('ep-cccd').value.trim(),
    dia_chi: document.getElementById('ep-diachi').value.trim(),
    dien_thoai: document.getElementById('ep-dt').value.trim(),
    so_tien_muon: parseMoneyInput(document.getElementById('ep-sotien')) / 1000,
    lai_suat_ngay: parseFloat(document.getElementById('ep-laisuat').value) || 0,
    ghi_chu: document.getElementById('ep-ghichu').value.trim(),
    items,
    hinh_thuc_tt: httt2,
    so_tien_tien_mat: httt2 === 'ca_hai' ? parseSplitAmt('ep-split-tm') : 0,
    so_tien_chuyen_khoan: httt2 === 'ca_hai' ? parseSplitAmt('ep-split-ck') : 0,
    ngay_cam: _iso2dmy(document.getElementById('ep-ngaycam').value),
    lai_da_gui: parseSplitAmt('ep-laidagui') / 1000,
  };
  // So sánh trước/sau — xây dựng danh sách thay đổi có cấu trúc cho phiếu chuyển GĐ/PGĐ
  const orig = _editPawnOriginal || {};
  const _money = n => Number(n || 0).toLocaleString('vi-VN') + 'đ';
  const _httLbl = v => ({tien_mat:'💵 Tiền mặt', chuyen_khoan:'🏦 Chuyển khoản', ca_hai:'🔀 TM/CK'}[v] || v || '—');
  const changes = [];
  const _cmp = (label, ov, nv, fmt) => {
    if (String(ov ?? '') !== String(nv ?? ''))
      changes.push({ label, old: fmt ? fmt(ov) : (ov || '—'), new: fmt ? fmt(nv) : (nv || '—') });
  };
  _cmp('Khách hàng', orig.khach_hang, payload.khach_hang);
  _cmp('CCCD/CMND', orig.cccd, payload.cccd);
  _cmp('Địa chỉ', orig.dia_chi, payload.dia_chi);
  _cmp('Điện thoại', orig.dien_thoai, payload.dien_thoai);
  _cmp('Ngày cầm', (orig.ngay_cam||'').split(' ')[0], payload.ngay_cam);
  if (Math.abs((orig.so_tien_muon||0) - payload.so_tien_muon) > 0.001)
    changes.push({ label: 'Số tiền vay', old: _money((orig.so_tien_muon||0)*1000), new: _money(payload.so_tien_muon*1000) });
  _cmp('Lãi suất', orig.lai_suat_ngay, payload.lai_suat_ngay, v => (v||0) + '%/ngày');
  if (Math.abs((orig.lai_da_gui||0) - payload.lai_da_gui) > 0.001)
    changes.push({ label: 'Lãi đã gửi', old: _money((orig.lai_da_gui||0)*1000), new: _money(payload.lai_da_gui*1000) });
  _cmp('Phương thức thanh toán', orig.hinh_thuc_tt || 'tien_mat', payload.hinh_thuc_tt, _httLbl);
  _cmp('Ghi chú', orig.ghi_chu, payload.ghi_chu);
  if ((orig.items || []).length !== items.length)
    changes.push({ label: 'Số món hàng', old: (orig.items||[]).length + ' món', new: items.length + ' món' });

  const sub = document.getElementById('ep-modal-subtitle');
  const ma_phieu = (sub ? sub.textContent : '').split('·')[0].trim();
  const deltaLines = changes.map(c => `${c.label}: ${c.old} → ${c.new}`);
  const mo_ta = `Phiếu ${ma_phieu} — ${changes.length ? changes.map(c=>c.label).join(', ') : 'Cập nhật thông tin phiếu'}`;
  if (changes.length) { payload._delta = deltaLines; payload._changes = changes; }
  const btn = document.getElementById('ep-btn-gui-duyet');
  btn.disabled = true; btn.textContent = '⏳ Đang gửi...';
  try {
    const res = await fetch('/api/approval/submit', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'cam_do', phieu_id: _editPawnId, ma_phieu, payload, mo_ta })
    });
    const d = await res.json();
    if (d.success) {
      document.getElementById('ep-modal').classList.add('hidden');
      alert('✅ Đã gửi yêu cầu duyệt. Vui lòng chờ GĐ/PGĐ xem xét.');
    } else {
      alert('❌ ' + (d.message || d.error || 'Gửi thất bại'));
    }
  } finally {
    btn.disabled = false; btn.textContent = '📤 Gửi Duyệt';
  }
}

function deletePawn(id) {
  if (!confirm('⚠️ Xóa phiếu cầm này? Thao tác không thể hoàn tác.')) return;
  askPin('Xác nhận xóa phiếu cầm', async (pin) => {
    const res = await fetch(`/api/pos/pawns/${id}`, {
      method: 'DELETE', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin })
    });
    const d = await res.json();
    if (!d.success) { alert(`❌ Lỗi: ${d.error}`); return; }
    loadPawns(); loadAlerts();
  });
}

// ── Quét mã QR phiếu cầm ──
async function lookupPawnTicket(maGd) {
  maGd = (maGd || '').trim();
  if (!maGd) return;
  const res = await fetch(`/api/pos/pawns/by-ma-gd/${encodeURIComponent(maGd)}`);
  const data = await res.json();
  if (!data.success) { alert(`⚠️ Không tìm thấy phiếu cầm với mã "${maGd}".`); return; }
  showTab('theodoi');
  _currentFilter = '';
  document.querySelectorAll('.pawn-filter').forEach(b => {
    b.className = 'pawn-filter tab-btn text-xs flex-1 py-1.5 ' + (b.dataset.f === '' ? 'tab-active' : 'tab-inactive');
  });
  await loadPawns();   // ĐỢI tải + dựng lại bảng xong hẳn rồi mới tìm — trước đây không đợi
                        // nên nếu mạng chậm hơn 300ms sẽ tìm hụt, không mở/cuộn được.
  const el = document.querySelector(`#pawns-grouped [data-ma-gd="${data.pawn.ma_gd}"]`);
  if (el) {
    // Mở rộng thẻ khách chứa phiếu này (nếu đang thu gọn) để bấm được nút 🖨️ In ngay
    const body = el.closest('[id^="cust-body-"]');
    if (body && body.classList.contains('hidden')) {
      const key = body.id.replace('cust-body-', '');
      _pawnExpanded[key] = true;
      body.classList.remove('hidden');
      const ch = document.getElementById('cust-chev-' + key);
      if (ch) ch.textContent = '▴';
    }
    el.scrollIntoView({behavior:'smooth', block:'center'});
    el.classList.add('pawn-flash');
    setTimeout(() => el.classList.remove('pawn-flash'), 1600);
  }
}

// Hỗ trợ máy quét QR CCCD / mã vạch SĐT dạng USB (gõ trực tiếp vào ô tương ứng)
bindCccdScanInput('kh-cccd', {ten: 'kh-ten', cccd: 'kh-cccd', diachi: 'kh-diachi'});
bindBarcodeScanInput('kh-dt', code => { document.getElementById('kh-dt').value = code; });

// ── Khởi tạo ──
addItemRow();
fetchPrices();
loadMaGd();
loadAlerts();
loadPawnDrafts();

// Link từ Tổng quan (?ma_gd=CH...) → tự chuyển sang Bảng theo dõi và cuộn tới đúng phiếu
(function() {
  const maGd = new URLSearchParams(location.search).get('ma_gd');
  if (maGd) lookupPawnTicket(maGd);
})();

// ── 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 || '';
  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 xác nhận thanh toán (chuộc hàng / thu lãi) ── -->
<!-- ── Modal ⚙️ THAO TÁC PHIẾU CẦM (gom mọi chỉnh sửa vào 1 chỗ) ── -->
<div id="pawn-action-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
     style="background:rgba(0,0,0,.55);backdrop-filter:blur(4px)" onclick="if(event.target===this)closePawnActionModal()">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
    <div class="px-5 py-4 flex items-center gap-3" style="background:linear-gradient(135deg,#4a0000,#8b0000)">
      <div class="flex-1 min-w-0">
        <div class="text-white font-black">⚙️ Phiếu <span id="act-magd" class="font-mono"></span></div>
        <div class="text-red-100 text-xs truncate" id="act-khach"></div>
      </div>
      <button onclick="closePawnActionModal()" class="text-white/70 hover:text-white text-2xl leading-none flex-shrink-0">×</button>
    </div>
    <div class="p-5 space-y-4">
      <!-- Số liệu hiện tại -->
      <div class="grid grid-cols-3 gap-2 text-center">
        <div class="rounded-xl px-2 py-2 bg-gray-50"><div class="text-[10px] text-gray-400 uppercase">Dư nợ</div><div class="font-bold text-sm text-gray-800" id="act-duno"></div></div>
        <div class="rounded-xl px-2 py-2 bg-amber-50"><div class="text-[10px] text-amber-600 uppercase">Lãi hiện tại</div><div class="font-bold text-sm text-amber-700" id="act-laiht"></div></div>
        <div class="rounded-xl px-2 py-2 bg-green-50"><div class="text-[10px] text-green-600 uppercase">Lãi đã gửi</div><div class="font-bold text-sm text-green-700" id="act-laidagui"></div></div>
      </div>

      <!-- 💰 Thu lãi (chỉ phiếu ĐANG cầm — phiếu đã chuộc đã thu đủ gốc+lãi lúc chuộc) -->
      <div id="act-thulai-box" class="rounded-xl border border-amber-200 p-3" style="background:#fffbeb" data-huong-dan="cam-thu-lai">
        <div class="text-xs font-bold text-amber-800 mb-1.5">💰 Thu lãi (cộng vào "Lãi đã gửi")</div>
        <div class="flex gap-2">
          <input id="act-thulai-inp" type="text" inputmode="numeric" placeholder="Số tiền lãi thu thêm (đồng)"
                 class="input-ios flex-1 text-right" oninput="onSplitAmtInput(this)">
          <button onclick="pawnActionThuLai()" class="btn-ios text-white px-4 py-2 rounded-xl font-bold text-sm"
                  style="background:linear-gradient(135deg,#92400e,#d97706)">Thu lãi</button>
        </div>
      </div>

      <!-- ✏️ Sửa lãi suất (chỉ GĐ/PGĐ) -->
      <div id="act-laisuat-box" class="rounded-xl border border-indigo-200 p-3 hidden" style="background:#eef2ff">
        <div class="text-xs font-bold text-indigo-800 mb-1.5">✏️ Sửa lãi suất (‰ / ngày)</div>
        <div class="flex gap-2">
          <input id="act-laisuat-inp" type="number" step="0.01" min="0" placeholder="Lãi suất ‰/ngày"
                 class="input-ios flex-1 text-right">
          <button onclick="pawnActionSuaLaiSuat()" class="btn-ios text-white px-4 py-2 rounded-xl font-bold text-sm"
                  style="background:linear-gradient(135deg,#4338ca,#6366f1)">Lưu</button>
        </div>
        <div class="text-[11px] text-indigo-400 mt-1">Áp cho toàn phiếu, lãi tính lại ngay theo mức mới (không đụng sổ quỹ).</div>
      </div>

      <!-- Tình trạng -->
      <div>
        <div class="text-xs font-bold text-gray-500 mb-1.5">Tình trạng phiếu</div>
        <div class="grid grid-cols-3 gap-2">
          <button data-tt="chua_lay_hang" onclick="changePawnTrangThai('chua_lay_hang')" class="act-tt-btn btn-ios text-xs py-2 rounded-xl font-bold" style="background:#fef3c7;color:#92400e">Chưa lấy hàng</button>
          <button data-tt="da_lay_hang" onclick="changePawnTrangThai('da_lay_hang')" class="act-tt-btn btn-ios text-xs py-2 rounded-xl font-bold" style="background:#dcfce7;color:#166534" data-huong-dan="cam-chuoc">✅ Đã lấy (chuộc)</button>
          <button data-tt="bo_hang" onclick="changePawnTrangThai('bo_hang')" class="act-tt-btn btn-ios text-xs py-2 rounded-xl font-bold" style="background:#fee2e2;color:#991b1b">Bỏ hàng</button>
        </div>
        <div class="text-[11px] text-gray-400 mt-1">Chọn "Đã lấy (chuộc)" sẽ hỏi xác nhận thu tiền gốc + lãi.</div>
      </div>

      <!-- Thao tác khác -->
      <div class="grid grid-cols-2 gap-2">
        <button id="act-hoanlai-btn" onclick="pawnActionHoanLai()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#faf5ff;color:#7e22ce;display:none" title="Đưa phiếu ĐÃ TẤT TOÁN quay lại ĐANG CẦM — tiền chuộc đã thu được gỡ khỏi sổ quỹ">♻️ Hoàn lại phiếu</button>
        <button id="act-vaytra-btn" onclick="pawnActionVayTra()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#eef2ff;color:#4338ca">🔄 Vay thêm / Trả bớt</button>
        <button onclick="pawnActionNhanBan()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#f0fdfa;color:#0f766e" title="Copy lại thông tin khách + hàng cầm của phiếu này để lập PHIẾU CẦM MỚI — dùng khi khách cầm lại đồ sau khi đã chuộc">📄 Nhân bản phiếu</button>
        <button onclick="pawnActionEdit()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#eff6ff;color:#1d4ed8">✏️ Sửa phiếu</button>
        <button onclick="pawnActionPrint()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#fffbeb;color:#92400e">🖨️ In phiếu</button>
        <button onclick="pawnActionPrintRemote()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#fef9c3;color:#854d0e" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>
        <button id="act-del-btn" onclick="pawnActionDelete()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#fef2f2;color:#b91c1c">🗑️ Xóa phiếu</button>
      </div>
    </div>
  </div>
</div>

<div id="pawn-pay-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" style="background:rgba(0,0,0,.55);backdrop-filter:blur(4px)" data-huong-dan="cam-xac-nhan-thanh-toan">
  <div class="bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 space-y-4" style="border-top:4px solid #8b0000">
    <div class="font-black text-lg text-gray-900" id="pm-title">Xác nhận thanh toán</div>
    <div class="rounded-xl bg-gray-50 px-4 py-3">
      <div class="text-xs text-gray-400 uppercase">Số tiền</div>
      <div class="text-2xl font-black text-amber-700" id="pm-amount">0 đ</div>
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Khách thanh toán bằng</label>
      <select id="pm-sel" class="input-ios w-full cursor-pointer" onchange="pmOnHtttChange()">
        <option value="tien_mat" selected>💵 Tiền mặt</option>
        <option value="chuyen_khoan">🏦 Chuyển khoản</option>
        <option value="ca_hai">🔀 TM/CK</option>
      </select>
      <div id="pm-split-row" class="flex gap-2 mt-2" style="display:none">
        <div class="flex-1">
          <label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label>
          <input id="pm-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
        </div>
        <div class="flex-1">
          <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
          <input id="pm-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
        </div>
      </div>
    </div>
    <div class="flex gap-3 pt-1">
      <button onclick="pmCancel()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
      <button onclick="pmConfirm()" class="btn-ios btn-ios-gold flex-1 py-2.5">✅ Xác nhận</button>
    </div>
  </div>
</div>

<!-- ── Modal vay thêm / trả bớt ── -->
<div id="pawn-adj-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" style="background:rgba(0,0,0,.55);backdrop-filter:blur(4px)">
  <div class="bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 space-y-4" style="border-top:4px solid #2563eb">
    <div class="font-black text-lg text-gray-900">🔄 Vay thêm / Trả bớt</div>
    <div class="text-xs text-gray-400 font-mono" id="adj-magd"></div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Loại</label>
      <select id="adj-loai" class="input-ios w-full cursor-pointer">
        <option value="vay_them">➕ Vay thêm (tiệm chi thêm cho khách)</option>
        <option value="tra_bot">➖ Trả bớt (khách trả bớt gốc)</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Số tiền (đ)</label>
      <input id="adj-sotien" type="text" inputmode="numeric" class="input-ios w-full text-right font-bold text-lg" placeholder="0" oninput="onSplitAmtInput(this)">
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Ngày</label>
      <input id="adj-ngay" type="date" class="input-ios w-full">
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Ghi chú</label>
      <input id="adj-ghichu" type="text" class="input-ios w-full" placeholder="Không bắt buộc">
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Phương thức thanh toán</label>
      <select id="adj-hinhthuc" class="input-ios w-full cursor-pointer" onchange="onAdjHtttChange()">
        <option value="tien_mat" selected>💵 Tiền mặt</option>
        <option value="chuyen_khoan">🏦 Chuyển khoản</option>
        <option value="ca_hai">🔀 TM/CK</option>
      </select>
      <div id="adj-split-row" class="flex gap-2 mt-2" style="display:none">
        <div class="flex-1">
          <label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label>
          <input id="adj-split-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
        </div>
        <div class="flex-1">
          <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
          <input id="adj-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
        </div>
      </div>
    </div>
    <div class="flex gap-3 pt-1">
      <button onclick="document.getElementById('pawn-adj-modal').classList.add('hidden')" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
      <button id="adj-submit-btn" onclick="submitPawnAdj()" class="btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#1d4ed8,#2563eb);border-radius:14px">✅ Xác nhận</button>
    </div>
  </div>
</div>

<!-- ── Modal sửa giao dịch (ngày/giờ, số tiền, TM-CK, loại) ── -->
<div id="giaodich-ngay-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" style="background:rgba(0,0,0,.55);backdrop-filter:blur(4px)">
  <div class="bg-white w-full max-w-sm rounded-3xl shadow-2xl p-6 space-y-4" style="border-top:4px solid #2563eb">
    <div class="font-black text-lg text-gray-900">🕐 Sửa giao dịch</div>
    <div class="text-sm text-gray-500" id="gdn-label"></div>
    <div id="gdn-loai-wrap" class="hidden">
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Loại</label>
      <select id="gdn-loai" class="input-ios w-full cursor-pointer">
        <option value="vay_them">➕ Vay thêm (Chi)</option>
        <option value="tra_bot">➖ Trả bớt (Thu)</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Số tiền (đ)</label>
      <input id="gdn-sotien" type="text" inputmode="numeric" class="input-ios w-full text-right font-bold text-lg" placeholder="0" oninput="onSplitAmtInput(this)">
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Phương thức</label>
      <select id="gdn-hinhthuc" class="input-ios w-full cursor-pointer">
        <option value="tien_mat">💵 Tiền mặt</option>
        <option value="chuyen_khoan">🏦 Chuyển khoản</option>
      </select>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Ngày</label>
        <input id="gdn-ngay" type="date" class="input-ios w-full">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Giờ</label>
        <input id="gdn-gio" type="time" class="input-ios w-full">
      </div>
    </div>
    <input type="hidden" id="gdn-pawnid">
    <input type="hidden" id="gdn-cbid">
    <p id="gdn-msg" class="text-sm"></p>
    <div class="flex gap-3 pt-1">
      <button onclick="document.getElementById('giaodich-ngay-modal').classList.add('hidden')" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
      <button onclick="confirmGdNgay()" class="btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#1d4ed8,#2563eb);border-radius:14px">✅ Xác nhận</button>
    </div>
  </div>
</div>

<!-- ── Modal sửa phiếu cầm ── -->
<div id="ep-modal" class="hidden fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4" style="background:rgba(0,0,0,.55);backdrop-filter:blur(4px)">
  <div class="bg-white w-full sm:rounded-3xl shadow-2xl sm:max-w-4xl max-h-[96vh] flex flex-col" style="border-top:4px solid #8b0000">

    <!-- ── Tiêu đề ── -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-2xl flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#4a0000,#8b0000)">✏️</div>
        <div>
          <div class="font-black text-[18px] text-gray-900">Sửa phiếu cầm</div>
          <div id="ep-modal-subtitle" class="text-xs text-gray-400 font-mono"></div>
        </div>
      </div>
      <button onclick="document.getElementById('ep-modal').classList.add('hidden')"
        class="w-9 h-9 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 text-xl transition">×</button>
    </div>

    <!-- ── Nội dung cuộn ── -->
    <div class="overflow-y-auto flex-1 px-6 py-5 space-y-5">

      <!-- ⓪ Tóm tắt (chỉ xem) -->
      <div id="ep-summary" class="grid grid-cols-2 sm:grid-cols-4 gap-3 rounded-2xl border border-gray-200 p-4" style="background:#fafafa"></div>

      <!-- ① Thông tin khách hàng -->
      <div class="rounded-2xl border border-gray-200 overflow-hidden">
        <div class="px-4 py-2.5 flex items-center gap-2" style="background:linear-gradient(90deg,#f9f5ff,#fdf4ff)">
          <span class="text-base">👤</span>
          <span class="font-bold text-sm text-purple-900 uppercase tracking-wide">Thông tin khách hàng</span>
        </div>
        <div class="p-4 grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Họ tên khách</label>
            <input id="ep-kh" class="input-ios w-full" placeholder="Nguyễn Văn A">
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">CCCD / CMND</label>
            <input id="ep-cccd" class="input-ios w-full font-mono" placeholder="0123456789">
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Điện thoại</label>
            <input id="ep-dt" class="input-ios w-full" placeholder="0901 234 567" inputmode="tel">
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Địa chỉ</label>
            <input id="ep-diachi" class="input-ios w-full" placeholder="Số nhà, đường, phường...">
          </div>
        </div>
      </div>

      <!-- ② Khoản vay -->
      <div class="rounded-2xl border border-amber-200 overflow-hidden">
        <div class="px-4 py-2.5 flex items-center gap-2" style="background:linear-gradient(90deg,#fffbeb,#fef3c7)">
          <span class="text-base">💰</span>
          <span class="font-bold text-sm text-amber-900 uppercase tracking-wide">Khoản vay gốc</span>
        </div>
        <div class="p-4 grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Ngày cầm</label>
            <input id="ep-ngaycam" type="date" class="input-ios w-full font-bold" oninput="updateEpNgayCamHint()">
            <p id="ep-ngaycam-hint" class="text-[11px] font-bold text-emerald-600 mt-1"></p>
            <p class="text-[11px] text-gray-400 mt-1">Phải trước ngày của mọi khoản vay thêm/trả bớt đã có.</p>
          </div>
          <div></div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Số tiền mượn (đ)</label>
            <input id="ep-sotien" type="text" inputmode="numeric"
              class="input-ios w-full text-right font-bold text-[20px]" style="color:#92400e"
              placeholder="0">
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Lãi suất (‰ / ngày)</label>
            <input id="ep-laisuat" type="number" step="0.01"
              class="input-ios w-full text-right text-[20px] font-bold" style="color:#1d4ed8"
              placeholder="0.5">
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Lãi đã gửi (đ)</label>
            <input id="ep-laidagui" type="text" inputmode="numeric"
              class="input-ios w-full text-right font-bold" style="color:#3a3a3c"
              placeholder="0">
            <p class="text-[11px] text-gray-400 mt-1">Chỉ sửa số liệu — không ghi sổ quỹ.</p>
          </div>
          <div class="rounded-xl p-2.5" style="background:#f0fdf4;border:1px solid #bbf7d0">
            <label class="block text-xs font-bold text-emerald-700 uppercase tracking-wide mb-1.5">➕ Lãi gửi thêm lần này (đ)</label>
            <div class="flex gap-2">
              <input id="ep-laidagui-them" type="text" inputmode="numeric"
                class="input-ios w-full text-right font-bold" style="color:#15803d" placeholder="0">
              <button type="button" onclick="epGhiNhanLaiGuiThem()"
                class="btn-ios btn-ios-gold px-3 py-1.5 text-xs font-bold whitespace-nowrap">💰 Ghi nhận</button>
            </div>
            <p class="text-[11px] text-gray-400 mt-1">Khách vừa trả thêm lãi thật (tiền vào quỹ) — nhập số tiền đóng thêm, hệ thống hỏi TM/CK rồi tự cộng dồn vào "Lãi đã gửi" và ghi vào sổ quỹ.</p>
          </div>
          <div class="col-span-2">
            <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Phương thức thanh toán (chi cho khách)</label>
            <select id="ep-hinhthuc" class="input-ios w-full cursor-pointer" onchange="onEpHtttChange()">
              <option value="tien_mat">💵 Tiền mặt</option>
              <option value="chuyen_khoan">🏦 Chuyển khoản</option>
              <option value="ca_hai">🔀 TM/CK</option>
            </select>
            <div id="ep-split-row" class="flex gap-2 mt-2" style="display:none">
              <div class="flex-1">
                <label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label>
                <input id="ep-split-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
              </div>
              <div class="flex-1">
                <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
                <input id="ep-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ③ Danh sách hàng cầm -->
      <div class="rounded-2xl border border-gray-200 overflow-hidden">
        <div class="px-4 py-2.5 flex items-center justify-between" style="background:linear-gradient(90deg,#f0fdf4,#dcfce7)">
          <div class="flex items-center gap-2">
            <span class="text-base">📦</span>
            <span class="font-bold text-sm text-green-900 uppercase tracking-wide">Danh sách hàng cầm</span>
          </div>
          <button onclick="addEpItemRow()"
            class="flex items-center gap-1 text-sm font-bold text-white px-3 py-1 rounded-lg transition"
            style="background:#16a34a">＋ Thêm hàng</button>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full border-collapse item-entry-table" style="min-width:520px">
            <thead>
              <tr style="background:#f0fdf4;border-bottom:2px solid #bbf7d0">
                <th class="px-3 py-2.5 text-left text-xs font-bold text-green-800 uppercase tracking-wide" style="width:32%">Tên hàng</th>
                <th class="px-3 py-2.5 text-center text-xs font-bold text-green-800 uppercase tracking-wide" style="width:13%">Chất liệu</th>
                <th class="px-3 py-2.5 text-center text-xs font-bold text-green-800 uppercase tracking-wide" style="width:13%">Tổng TL (chỉ)</th>
                <th class="px-3 py-2.5 text-center text-xs font-bold text-green-800 uppercase tracking-wide" style="width:13%">Đá &amp; hao (chỉ)</th>
                <th class="px-3 py-2.5 text-right text-xs font-bold text-green-800 uppercase tracking-wide" style="width:23%">Giá tạm tính (đ)</th>
                <th style="width:6%"></th>
              </tr>
            </thead>
            <tbody id="ep-item-tbody"></tbody>
          </table>
        </div>
      </div>

      <!-- ④ Điều chỉnh khoản vay (chỉ xem — vay thêm/trả bớt ghi sổ quỹ ngay lúc phát sinh) -->
      <div class="rounded-2xl border border-blue-200 overflow-hidden">
        <div class="px-4 py-2.5 flex items-center justify-between" style="background:linear-gradient(90deg,#eff6ff,#dbeafe)">
          <div class="flex items-center gap-2">
            <span class="text-base">🔄</span>
            <span class="font-bold text-sm text-blue-900 uppercase tracking-wide">Điều chỉnh khoản vay</span>
            <span class="text-xs text-blue-500 font-normal">(vay thêm / trả bớt — lịch sử)</span>
          </div>
          <button type="button" id="ep-btn-vaythem"
            class="flex items-center gap-1 text-sm font-bold text-white px-3 py-1 rounded-lg transition"
            style="background:#2563eb">🔄 Vay thêm / Trả bớt</button>
        </div>
        <div id="ep-adj-list" class="divide-y divide-blue-50"></div>
      </div>

      <!-- ⑤ Ghi chú -->
      <div>
        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">📝 Ghi chú</label>
        <input id="ep-ghichu" class="input-ios w-full" placeholder="Ghi chú thêm về phiếu cầm này...">
      </div>

    </div><!-- end scroll area -->

    <!-- ── Nút hành động (cố định dưới) ── -->
    <div class="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-100 flex-shrink-0 bg-white sm:rounded-b-3xl">
      <div id="ep-footer-hint" class="text-xs text-gray-400">Nhấn <b>Lưu</b> để xác nhận với mã PIN</div>
      <div class="flex gap-3">
        <button onclick="document.getElementById('ep-modal').classList.add('hidden')"
          class="btn-ios btn-ios-secondary px-6 py-3 text-sm">Hủy bỏ</button>
        <button id="ep-btn-gui-duyet" onclick="submitPawnForApproval()"
          class="btn-ios px-8 py-3 text-base font-bold text-white hidden"
          style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">📤 Gửi Duyệt</button>
        <button id="ep-btn-luu" onclick="savePawnEdit()"
          class="btn-ios btn-ios-gold px-8 py-3 text-base">💾 Lưu phiếu</button>
      </div>
    </div>

  </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 || '';
    _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 cầm đang lập (base.html poll qua _MHK_COLLECT) ──
window._MHK_COLLECT = function() {
  const items = [...document.querySelectorAll('#item-tbody tr')].map(tr => {
    const chatlieu = tr.querySelector('.it-chatlieu')?.value.trim() || '';
    const tlt      = tr.querySelector('.it-tlt')?.textContent.trim() || '';
    const giatt    = tr.querySelector('.it-giatt')?.value.trim() || '';
    let sub = [];
    if (chatlieu) sub.push(chatlieu);
    if (tlt && tlt !== '0') sub.push('TL tính ' + tlt + ' chỉ' + (giatt && giatt !== '0' ? ' × ' + giatt + ' đ' : ''));
    return {
      ten: tr.querySelector('.it-ten').value.trim(),
      sub: sub.join(' · '),
      tt:  tr.querySelector('.it-thanhtien').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: '💍 Cầm hàng', items,
      phu: [
        {label: 'Số món cầm', val: String(items.length)},
        {label: 'Giá trị hàng tạm tính', val: document.getElementById('lbl-tong-tamtinh').textContent.trim()},
      ],
      tong: (document.getElementById('hg-sotien').value.trim() || '0') + ' đ',
      tong_label: 'Số tiền cầm',
    } : null,
  };
};
</script>
<script>
const LAI_NAM_TOI_DA = {{ lai_nam_toi_da }};
function hienLaiNam() {
  const el = document.getElementById('hg-lainam'); if (!el) return;
  const v = parseFloat(document.getElementById('hg-laisuat').value) || 0;
  const namChinhXac = v * 365 / 10;
  const nam = Math.round(namChinhXac * 1000) / 1000;
  const vuot = namChinhXac > LAI_NAM_TOI_DA + 1e-9;
  el.style.color = vuot ? '#b91c1c' : '#15803d';
  el.textContent = '= ' + nam.toLocaleString('vi-VN') + '%/năm' + (vuot
    ? ' — VƯỢT trần ' + LAI_NAM_TOI_DA + '%/năm ({{ can_cu_lai }}); phần lãi vượt trần không có hiệu lực. Mức tối đa {{ lai_ngay_toi_da }}‰/ngày — khi lưu app sẽ cảnh báo hoặc chặn tùy Quy định nghiệp vụ.'
      + (namChinhXac >= 100 ? ' ⚠️ Từ 100%/năm: dấu hiệu cho vay lãi nặng (Điều 201 Bộ luật Hình sự).' : '')
    : ' (trần luật ' + LAI_NAM_TOI_DA + '%/năm)');
}
document.addEventListener('DOMContentLoaded', hienLaiNam);
function luuGiayAntt() {
  const body = {so: document.getElementById('antt-so').value, ngay_cap: document.getElementById('antt-ngay').value,
                noi_cap: document.getElementById('antt-noi').value, xac_nhan: document.getElementById('antt-xn').checked};
  askPin('Nhập PIN Giám đốc để lưu Giấy chứng nhận ANTT', async (pin) => {
    if (!pin) return;
    const r = await fetch('/api/cam-do/giay-antt', {method: 'POST', headers: {'Content-Type': 'application/json'},
                                                    body: JSON.stringify(Object.assign(body, {pin}))});
    const d = await r.json();
    if (d.success) location.reload(); else alert(d.error === 'forbidden_role' ? 'Chỉ Giám đốc / Phó GĐ (PIN đúng)' : d.error);
  });
}
</script>
{% endblock %}