{% extends "base.html" %}
{% block title %}Đặt lấy hàng — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Đặt lấy hàng{% endblock %}

{% block extra_style %}
.ios-group{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06);overflow:visible}
.ios-field-row{display:flex;align-items:center;min-height:50px;padding:10px 16px;border-bottom:1px solid #f2f2f7;position:relative;overflow:visible;gap:10px}
.ios-field-row:last-child{border-bottom:none}
.ios-field-label{font-size:.9375rem;font-weight:500;color:#1c1c1e;white-space:nowrap;flex-shrink:0;min-width:110px}
.ios-field-input{flex:1;background:transparent;border:none;outline:none;font-size:16px;color:#3a3a3c;text-align:right;min-width:0;padding:0;font-family:inherit} /* ≥16px chống iOS zoom */
.ios-field-input::placeholder{color:#c7c7cc}
.ios-field-input:focus{color:#1c1c1e}
.order-flash { animation: orderFlash 1.6s ease; }
@keyframes orderFlash { 0%,100% { background-color: transparent; } 25% { background-color: #fef3c7; } }
.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;
}
/* Thẻ bài tab chính (giống pawn.html) */
.main-tab-card {
  flex: 1; min-width: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px 20px; border-radius: 16px; cursor: pointer;
  border: 2px solid #e8c84a;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: inherit; text-align: center;
}
.main-tab-card-active {
  background: linear-gradient(140deg, #7a5500, #b8820a 45%, #e8b820);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 18px rgba(180,130,10,.32);
}
.main-tab-card-inactive { background: #fff; color: #7a5500; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.main-tab-card-inactive:hover { background: #fffbeb; }
{% endblock %}

{% block content %}

  <!-- ── NHẮC LỊCH HẸN ── -->
  <div id="alert-box"></div>

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

  <!-- ════════════════ TAB: LẬP PHIẾU ════════════════ -->
  <div id="section-lap" class="space-y-4">
  <!-- ── LẬP PHIẾU ĐẶT LẤY HÀNG ── -->
  <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 đặt lấy hàng (khách đặt cọc, hẹn ngày lấy)</h2>
      <div class="flex items-center gap-3 flex-wrap">
        <span class="text-xs text-gray-400">Mã ĐH: <span id="lbl-ma-dh" 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="Gõ để tìm hoặc nhập mới..."
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'ho_ten')" onblur="_crmBlur()">
          </div>
          <div class="ios-field-row relative">
            <span class="ios-field-label">Số CCCD</span>
            <input id="kh-cccd" type="text" placeholder="Gõ hoặc quét QR"
              class="ios-field-input" autocomplete="off"
              oninput="_crmSuggest(this,'cccd')" onblur="_crmBlur()">
          </div>
          <div class="ios-field-row">
            <span class="ios-field-label">Địa chỉ</span>
            <input id="kh-diachi" type="text" placeholder="Địa chỉ khách hàng"
              class="ios-field-input" autocomplete="off">
          </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" autocomplete="off"
              oninput="_crmSuggest(this,'dien_thoai')" onblur="_crmBlur()">
          </div>
        </div>
      </div>

      <!-- ② Hình thức nhận cọc + Ngày -->
      <div class="section-card">
        <div class="section-head text-amber-900" style="background:linear-gradient(90deg,#fffbeb,#fef3c7)">
          <span>💳 Hình thức nhận cọc</span>
        </div>
        <div class="p-4 space-y-3">
          <select id="sel-hinhthuc" class="input-ios w-full cursor-pointer" onchange="onHtttChange()">
            <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="split-row" class="flex gap-2" style="display:none">
            <div class="flex-1">
              <label class="block text-xs text-gray-400 mb-0.5">Tiền mặt (₫)</label>
              <input id="split-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
            </div>
            <div class="flex-1">
              <label class="block text-xs text-gray-400 mb-0.5">Chuyển khoản (₫)</label>
              <input id="split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)">
            </div>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày đặt hàng</label>
              <input id="inp-ngaydat" type="date" lang="vi" class="w-full input-ios">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày dự kiến có hàng</label>
              <input id="inp-ngaycohang" type="date" lang="vi" class="w-full input-ios">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bảng mặt hàng đặt -->
    <div class="rounded-2xl border border-gray-100 overflow-x-auto">
      <table class="w-full text-sm item-entry-table">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-3 py-2">Nội dung / mô tả hàng</th>
            <th class="text-left px-3 py-2">Chất liệu</th>
            <th class="text-right px-3 py-2">TL ước tính (chỉ)</th>
            <th class="text-right px-3 py-2">Đơn giá (đ/chỉ)</th>
            <th class="text-right px-3 py-2">Tiền công (đ)</th>
            <th class="text-right px-3 py-2">Tiền đặt cọc (đ)</th>
            <th class="px-3 py-2"></th>
          </tr>
        </thead>
        <tbody id="item-tbody"></tbody>
      </table>
    </div>
    <button onclick="addRow()" class="btn-ios btn-ios-secondary text-amber-700 font-semibold text-sm px-3.5 py-2">+ Thêm dòng hàng</button>

    <div class="flex justify-between items-center pt-3 border-t border-gray-100">
      <div class="text-lg font-bold text-gray-700 bg-amber-50 rounded-2xl px-4 py-2">Tổng tiền đặt cọc: <span id="lbl-tongcoc" class="text-amber-700">0</span> đ</div>
      <div class="flex items-center gap-3">
        <button type="button" onclick="orderSaveDraft()" class="btn-ios btn-ios-secondary px-5 py-2.5">💾 Lưu nháp &amp; làm bản mới</button>
        <button onclick="submitOrder()"
          class="btn-ios btn-ios-gold px-6 py-2.5">
          ✅ Lập phiếu đặt cọc
        </button>
      </div>
    </div>

    <!-- Danh sách bản nháp đã lưu (server, gắn người tạo) — chọn sửa tiếp rồi lập phiếu sau -->
    <div id="order-drafts-box" class="hidden rounded-xl border border-amber-200 p-3 mt-2" style="background:#fffbeb">
      <div class="text-xs font-bold text-amber-800 uppercase tracking-wide mb-2">📝 Bản nháp đã lưu — chọn để sửa tiếp rồi lập phiếu</div>
      <div id="order-drafts-list" class="space-y-2"></div>
    </div>

    <input id="inp-ghichu" type="text" placeholder="Ghi chú thêm"
      class="w-full input-ios">
    <p id="order-msg" class="text-sm"></p>
    <p class="text-xs text-gray-400">💡 Tổng tiền đặt cọc sẽ được ghi nhận tự động vào Sổ quỹ (mục Thu). Khi khách quay lại lấy hàng, bạn có thể ghi nhận thêm khoản thanh toán còn lại.</p>
  </div>
  </div>
  <!-- ════════════════ /TAB: LẬP PHIẾU ════════════════ -->

  <!-- ════════════════ TAB: BẢNG THEO DÕI ════════════════ -->
  <div id="section-theodoi" class="hidden space-y-4">
  <!-- ── DANH SÁCH CHƯA LẤY HÀNG ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span class="font-extrabold text-gray-800">📋 Đơn hàng chưa lấy</span>
      <div class="flex items-center gap-2 flex-wrap">
        <span id="lbl-chualay-count" class="text-xs text-gray-400"></span>
        <div class="flex items-center gap-1">
          <input id="inp-search-orders" type="text" placeholder="Tìm mã, khách, SĐT..." autocomplete="off"
            readonly onfocus="this.removeAttribute('readonly')"
            class="input-ios-sm w-44 font-normal" oninput="renderOrderTables()">
          <button onclick="document.getElementById('inp-search-orders').value='';renderOrderTables();"
            class="text-gray-400 hover:text-gray-600 text-xl leading-none font-normal" title="Xóa">×</button>
        </div>
        <a href="/api/pos/orders/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>
    <div id="chualay-summary" class="so-tong px-4 pt-4"></div>
    <div id="chualay-grouped" class="p-4 space-y-3"></div>
  </div>

  <!-- ── LỊCH SỬ ĐÃ LẤY HÀNG ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">📜 Lịch sử đã lấy hàng</div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-3 py-2">Mã ĐH</th>
            <th class="text-left px-3 py-2">Khách hàng</th>
            <th class="text-left px-3 py-2">Mặt hàng</th>
            <th class="text-right px-3 py-2">Tiền cọc</th>
            <th class="text-right px-3 py-2">Thu thêm</th>
            <th class="text-left px-3 py-2">Ngày lấy</th>
          </tr>
        </thead>
        <tbody id="dalay-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- ── LỊCH SỬ ĐÃ HỦY ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">🚫 Đơn đã hủy</div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
          <tr>
            <th class="text-left px-3 py-2">Mã ĐH</th>
            <th class="text-left px-3 py-2">Khách hàng</th>
            <th class="text-left px-3 py-2">Mặt hàng</th>
            <th class="text-right px-3 py-2">Tiền cọc</th>
            <th class="text-center px-3 py-2">Cọc</th>
            <th class="text-left px-3 py-2">Ngày hủy</th>
          </tr>
        </thead>
        <tbody id="dahuy-tbody"></tbody>
      </table>
    </div>
  </div>
  </div>
  <!-- ════════════════ /TAB: BẢNG THEO DÕI ════════════════ -->

<!-- ── MODAL GIAO HÀNG ── -->
<div id="pickup-modal" class="hidden fixed inset-0 ios-backdrop bg-black/40 z-50 flex items-center justify-center p-4"
     onclick="if(event.target===this)closePickup()">
  <div class="bg-white rounded-[24px] w-full max-w-2xl shadow-2xl overflow-hidden max-h-[92vh] flex flex-col">
    <div class="px-6 py-4 flex-shrink-0" style="background:linear-gradient(135deg,#4a0000,#8b0000)">
      <h2 class="font-bold text-white text-lg">📦 Giao hàng — chốt hóa đơn</h2>
      <p class="text-yellow-200 text-xs mt-0.5" id="pickup-sub"></p>
    </div>
    <div class="p-6 space-y-3 overflow-y-auto">
      <div class="ios-card p-3 text-sm space-y-1.5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fde68a">
        <div class="flex justify-between"><span>Tổng hàng giao:</span><strong id="pk-tonghang">0</strong></div>
        <div class="flex justify-between items-center gap-2"><span>🏷️ Giảm giá (đ):</span>
          <input id="pk-giamgia" type="number" value="0" class="input-ios text-sm text-right font-bold" style="max-width:150px" oninput="pkRecalcThem()"></div>
        <div class="flex justify-between"><span>Đã đặt cọc:</span><strong id="pk-coc">0</strong></div>
        <div class="flex justify-between border-t border-amber-200 pt-1.5 mt-0.5"><span class="font-bold">→ Còn phải thu:</span><strong id="pk-conthu" class="text-amber-700 text-base">0</strong></div>
      </div>

      <!-- Sản phẩm thực giao — nhập ĐẦY ĐỦ như trang Bán hàng (quét mã / gõ chọn tồn kho) → in giấy đảm bảo + trừ tồn kho -->
      <div class="border border-gray-200 rounded-xl overflow-hidden">
        <div class="flex items-center justify-between px-3 py-2 bg-gray-50 flex-wrap gap-2">
          <span class="text-xs font-bold text-gray-600 uppercase">🏷️ Sản phẩm thực giao <span class="text-gray-400 normal-case font-normal">(để in giấy đảm bảo + trừ tồn kho)</span></span>
          <button type="button" onclick="addPkRow()" class="text-xs font-bold text-white px-2.5 py-1 rounded-lg" style="background:#16a34a">＋ Thêm dòng</button>
        </div>
        <div class="px-3 pt-2">
          <input id="pk-scan-barcode" type="text" autocomplete="off"
            placeholder="🔫 Quét mã vạch sản phẩm (tự điền như trang Bán)"
            class="w-full input-ios-sm text-sm" style="border:1.5px solid #86efac;background:#f0fdf4;font-size:16px">
          <div id="pk-scan-msg" class="text-[11px] mt-1 min-h-[14px]"></div>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full text-xs item-entry-table">
            <thead class="bg-gray-50 text-gray-400">
              <tr>
                <th class="px-2 py-1.5 text-left font-semibold">Mã hàng</th>
                <th class="px-2 py-1.5 text-left font-semibold">Tên sản phẩm</th>
                <th class="px-2 py-1.5 text-center font-semibold">HLV</th>
                <th class="px-2 py-1.5 text-right font-semibold">TL</th>
                <th class="px-2 py-1.5 text-right font-semibold">KLĐ</th>
                <th class="px-2 py-1.5 text-right font-semibold">KLV</th>
                <th class="px-2 py-1.5 text-right font-semibold">Đơn giá/chỉ</th>
                <th class="px-2 py-1.5 text-right font-semibold">Tiền công</th>
                <th class="px-2 py-1.5 text-right font-semibold">Tiền đá</th>
                <th class="px-2 py-1.5 text-right font-semibold">Thành tiền</th>
                <th class="px-1"></th>
              </tr>
            </thead>
            <tbody id="pk-item-tbody"></tbody>
          </table>
          <datalist id="dl-pk-products"></datalist>
        </div>
        <div class="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50/60">
          💡 Quét mã / gõ đúng <b>Mã hàng</b> đã nhập kho → tự điền Tên · Tuổi · KLV · Đơn giá (theo bảng giá vàng) · Tiền công · Tiền đá + trừ tồn kho. Thành tiền = KLV × đơn giá + tiền công + tiền đá. Bỏ trống hết = chỉ ghi giao.
        </div>
      </div>

      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số tiền thu thêm khi giao hàng (nếu có)</label>
        <input id="pk-them" type="number" value="0" class="w-full input-ios text-lg font-bold text-right">
      </div>
      <div id="pk-httt-wrap">
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Khách thanh toán bằng</label>
        <select id="pk-hinhthuc" class="input-ios cursor-pointer" onchange="onPkHtttChange()">
          <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="pk-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="pk-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="pk-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
        </div>
      </div>
      <input id="pk-ghichu" type="text" placeholder="Ghi chú thêm (tùy chọn)"
        class="w-full input-ios text-sm">
      <p id="pickup-msg" class="text-sm"></p>
      <div class="flex gap-3">
        <button onclick="closePickup()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button onclick="confirmPickup()" class="btn-ios btn-ios-gold flex-1 py-2.5">Xác nhận giao hàng</button>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL BỔ SUNG CỌC ── -->
<div id="deposit-modal" class="hidden fixed inset-0 ios-backdrop bg-black/40 z-50 flex items-center justify-center p-4"
     onclick="if(event.target===this)closeDeposit()">
  <div class="bg-white rounded-[24px] w-full max-w-md shadow-2xl max-h-[90vh] overflow-y-auto">
    <div class="px-6 py-4" style="background:linear-gradient(135deg,#166534,#16a34a)">
      <h2 class="font-bold text-white text-lg">💰 Bổ sung tiền cọc</h2>
      <p class="text-green-100 text-xs mt-0.5" id="dep-sub"></p>
    </div>
    <div class="p-6 space-y-3">
      <div class="ios-card p-3 text-sm space-y-1" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fde68a">
        <div class="flex justify-between"><span>Đã đặt cọc:</span><strong id="dep-cocht">0</strong></div>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số tiền cọc thêm</label>
          <input id="dep-sotien" type="text" inputmode="numeric" placeholder="0" class="w-full input-ios text-lg font-bold text-right" oninput="onSplitAmtInput(this)">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày gửi cọc</label>
          <input id="dep-ngay" type="date" lang="vi" class="w-full input-ios">
        </div>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Khách thanh toán bằng</label>
        <select id="dep-hinhthuc" class="input-ios cursor-pointer" onchange="onDepHtttChange()">
          <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="dep-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="dep-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="dep-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
        </div>
      </div>
      <input id="dep-ghichu" type="text" placeholder="Ghi chú thêm (tùy chọn)" class="w-full input-ios text-sm">
      <p id="deposit-msg" class="text-sm"></p>
      <div class="flex gap-3">
        <button onclick="closeDeposit()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button id="dep-btn-xacnhan" onclick="confirmDeposit()" class="btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#166534,#16a34a);border-radius:14px">Xác nhận</button>
        <button id="dep-btn-gui-duyet" onclick="submitDepositForApproval()" class="hidden btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#166534,#16a34a);border-radius:14px">📤 Gửi Duyệt</button>
      </div>

      <!-- Lịch sử các lần bổ sung cọc — sửa/xóa được -->
      <div id="dep-history-wrap" class="hidden pt-3 border-t border-gray-100">
        <div class="text-xs font-bold text-gray-500 uppercase mb-1.5">Các lần đã bổ sung cọc</div>
        <div id="dep-history" class="space-y-1.5"></div>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL SỬA 1 LẦN BỔ SUNG CỌC ── -->
<div id="dep-edit-modal" class="hidden fixed inset-0 ios-backdrop bg-black/40 z-[60] flex items-center justify-center p-4"
     onclick="if(event.target===this)closeDepEdit()">
  <div class="bg-white rounded-[24px] w-full max-w-xs shadow-2xl overflow-hidden">
    <div class="px-5 py-3.5" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">
      <h2 class="font-bold text-white text-base">✏️ Sửa lần bổ sung cọc</h2>
    </div>
    <div class="p-5 space-y-3">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số tiền (₫)</label>
        <input id="de-sotien" type="text" inputmode="numeric" class="w-full input-ios text-right font-bold" oninput="onSplitAmtInput(this)">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày gửi cọc</label>
        <input id="de-ngay" type="date" lang="vi" class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Hình thức</label>
        <select id="de-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>
      <p id="de-msg" class="text-sm"></p>
      <div class="flex gap-3">
        <button onclick="closeDepEdit()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button onclick="confirmDepEdit()" class="btn-ios px-6 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#1d4ed8,#2563eb);border-radius:14px">Lưu</button>
      </div>
    </div>
  </div>
</div>

<!-- ── MODAL HỦY ĐƠN HÀNG ── -->
<div id="cancel-order-modal" class="hidden fixed inset-0 ios-backdrop bg-black/40 z-50 flex items-center justify-center p-4"
     onclick="if(event.target===this)closeCancelOrder()">
  <div class="bg-white rounded-[24px] w-full max-w-md shadow-2xl max-h-[90vh] overflow-y-auto">
    <div class="px-6 py-4" style="background:linear-gradient(135deg,#9a3412,#ea580c)">
      <h2 class="font-bold text-white text-lg">🚫 Hủy đơn đặt hàng</h2>
      <p class="text-orange-100 text-xs mt-0.5" id="cxl-sub"></p>
    </div>
    <div class="p-6 space-y-3">
      <div class="ios-card p-3 text-sm space-y-1" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fde68a">
        <div class="flex justify-between"><span>Tổng tiền cọc đã nhận:</span><strong id="cxl-coc">0</strong></div>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1.5">Xử lý tiền cọc</label>
        <select id="cxl-hoancoc" class="input-ios w-full cursor-pointer" onchange="onCxlHoanChange()">
          <option value="0">🚫 Tiệm giữ cọc (không hoàn lại)</option>
          <option value="1">↩️ Hoàn lại toàn bộ cọc cho khách</option>
        </select>
      </div>
      <div id="cxl-hoan-wrap" class="hidden space-y-3">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Hoàn bằng</label>
          <select id="cxl-hinhthuc" class="input-ios cursor-pointer" onchange="onCxlHtttChange()">
            <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="cxl-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="cxl-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="cxl-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
          </div>
        </div>
      </div>
      <input id="cxl-lydo" type="text" placeholder="Lý do hủy (tùy chọn)" class="w-full input-ios text-sm">
      <p id="cancel-order-msg" class="text-sm"></p>
      <div class="flex gap-3">
        <button onclick="closeCancelOrder()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Đóng</button>
        <button onclick="confirmCancelOrder()" class="btn-ios px-8 py-2.5 flex-1 text-white font-bold" style="background:linear-gradient(135deg,#9a3412,#ea580c);border-radius:14px">Xác nhận hủy</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt = n => Number(n||0).toLocaleString('vi-VN');
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(); }
let _myRole = window._NV_ROLE || null;
(async () => { try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; } catch(e){} })();
let _allOrders = [];

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

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

let currentPickup = null;

function rowTemplate() {
  return `<tr class="border-b border-gray-50">
    <td class="px-3 py-2" data-label="Nội dung / mô tả hàng"><input class="inp-noidung input-ios-sm w-full" placeholder="VD: Đặt cọc lấy nhẫn trơn 1 chỉ"></td>
    <td class="px-3 py-2" data-label="Chất liệu"><input class="inp-chatlieu input-ios-sm w-24" placeholder="VD: 9999"></td>
    <td class="px-3 py-2" data-label="TL ước tính (chỉ)"><input type="number" step="0.001" class="inp-tl input-ios-sm w-24 text-right"></td>
    <td class="px-3 py-2" data-label="Đơn giá (đ/chỉ)"><input type="text" inputmode="numeric" class="inp-gia input-ios-sm w-28 text-right" oninput="onSplitAmtInput(this)"></td>
    <td class="px-3 py-2" data-label="Tiền công (đ)"><input type="text" inputmode="numeric" value="0" class="inp-tiencong input-ios-sm w-24 text-right" oninput="onSplitAmtInput(this)"></td>
    <td class="px-3 py-2" data-label="Tiền đặt cọc (đ)"><input type="text" inputmode="numeric" value="0" class="inp-coc input-ios-sm w-28 text-right" oninput="onSplitAmtInput(this);recalcTotal()"></td>
    <td class="px-3 py-2 text-center item-entry-del"><button onclick="this.closest('tr').remove();recalcTotal()" class="text-red-400 hover:text-red-600 active:scale-90 transition">✕ <span class="sm:hidden">Xóa dòng</span></button></td>
  </tr>`;
}
function addRow() { document.getElementById('item-tbody').insertAdjacentHTML('beforeend', rowTemplate()); }

function onHtttChange() {
  const v = document.getElementById('sel-hinhthuc').value;
  document.getElementById('split-row').style.display = v === 'ca_hai' ? 'flex' : 'none';
}

function recalcTotal() {
  let total = 0;
  document.querySelectorAll('#item-tbody tr').forEach(tr => {
    total += parseFloat((tr.querySelector('.inp-coc').value||'').replace(/\./g,'')) || 0;
  });
  document.getElementById('lbl-tongcoc').textContent = fmt(total);
}

function canhBaoBadge(o) {
  if (o.canh_bao === 'da_lay')
    return `<span class="bg-green-50 text-green-700 border border-green-200 text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">✓ Đã lấy hàng</span>`;
  if (o.canh_bao === 'da_huy')
    return `<span class="bg-gray-100 text-gray-500 border border-gray-200 text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">🚫 Đã hủy</span>`;
  if (o.canh_bao === 'qua_han')
    return `<span class="bg-red-50 text-red-700 border border-red-200 text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">⚠️ Quá hạn ${Math.abs(o.so_ngay_con_lai)} ngày</span>`;
  if (o.canh_bao === 'sap_den_han')
    return `<span class="bg-amber-50 text-amber-700 border border-amber-200 text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">⏰ Còn ${o.so_ngay_con_lai} ngày</span>`;
  return `<span class="bg-gray-50 text-gray-600 border border-gray-200 text-xs px-2 py-0.5 rounded-full font-semibold whitespace-nowrap">Chưa lấy hàng</span>`;
}

function itemSummary(o) {
  if (!o.items || !o.items.length) return '—';
  return o.items.map(it => it.noi_dung).filter(Boolean).join(' · ') || '—';
}

// Mặt hàng kèm chất liệu + khối lượng ước tính — dùng ở bảng theo dõi để thấy ngay không cần mở chi tiết
function itemSummaryFull(o) {
  if (!o.items || !o.items.length) return '—';
  return o.items.map(it => {
    const meta = [it.chat_lieu, it.trong_luong_uoc_tinh ? it.trong_luong_uoc_tinh + ' chỉ' : ''].filter(Boolean).join(', ');
    return (it.noi_dung || '—') + (meta ? ` (${meta})` : '');
  }).join(' · ') || '—';
}

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/orders');
  const data = await res.json();
  const box = document.getElementById('alert-box');
  if (!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>🔔 Nhắc lịch hẹn — ${data.alerts.length} đơn hàng sắp đến hạn / quá hạn lấy hàng</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(o => `
          <div onclick="lookupOrderTicket('${o.ma_dh}')" title="Bấm để xem chi tiết đơn ${o.ma_dh}"
            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>${o.ma_dh}</strong> — ${o.khach_hang} — ${itemSummary(o)} — Hẹn: ${(o.ngay_co_hang||'').split(' ')[0]}</span>
            <span class="flex items-center gap-1.5 whitespace-nowrap">${canhBaoBadge(o)}<span class="text-red-300">→</span></span>
          </div>`).join('')}
      </div>
    </div>`;
}

function depositBreakdown(o) {
  const list = (o.giao_dich || []).filter(g => g.loai === 'bo_sung');
  if (!list.length) return '';
  const parts = list.map(g => `+${fmt((g.so_tien||0)*1000)}đ <span class="text-gray-400">(${(g.ngay||'').split(' ')[0]})</span>`);
  return `<div class="text-[11px] text-green-600 font-normal mt-0.5 leading-snug">${parts.join('<br>')}</div>`;
}

// Tổng giá trị hàng đặt (đồng) = đơn giá × khối lượng + tiền công, cộng dồn các món.
// don_gia/tien_cong lưu bằng đồng đầy đủ (không phải nghìn) — xem CLAUDE.md phần Sổ Quỹ & tiền.
function orderGiaTri(o) {
  return (o.items || []).reduce((s, it) => {
    const tl = parseFloat(it.trong_luong_uoc_tinh) || 0;
    return s + (it.don_gia || 0) * tl + (it.tien_cong || 0);
  }, 0);
}

// Số tiền còn phải thanh toán (đồng) = giá trị hàng - tiền đã cọc (tong_tien_coc lưu bằng nghìn).
// Trả về null nếu chưa nhập đơn giá cho món nào (không đủ dữ liệu để tính).
function orderConLai(o) {
  const giaTri = orderGiaTri(o);
  if (giaTri <= 0) return null;
  return giaTri - (o.tong_tien_coc || 0) * 1000;
}

function orderConLaiHtml(o) {
  const cl = orderConLai(o);
  if (cl === null) return '<span class="text-gray-300">chưa nhập giá</span>';
  if (cl <= 0) return `<span class="text-green-600 font-semibold">Đã đủ${cl < 0 ? ' (dư ' + fmt(-cl) + 'đ)' : ''}</span>`;
  return `<b class="text-red-600">${fmt(cl)}đ</b>`;
}

let _orderDetailOpen = {};   // nhớ đơn hàng nào đang mở rộng chi tiết (theo mã ĐH)
function toggleOrderDetail(maDh) {
  _orderDetailOpen[maDh] = !_orderDetailOpen[maDh];
  const row = document.getElementById('detail-' + maDh);
  const chev = document.getElementById('chev-' + maDh);
  if (row) row.classList.toggle('hidden', !_orderDetailOpen[maDh]);
  if (chev) chev.textContent = _orderDetailOpen[maDh] ? '▴' : '▾';
}

function orderDetailRow(o) {
  const open = !!_orderDetailOpen[o.ma_dh];
  const itemsHtml = (o.items || []).map(it => `
    <tr class="border-b border-amber-100/60">
      <td class="px-2 py-1">${it.noi_dung || '—'}</td>
      <td class="px-2 py-1">${it.chat_lieu || '—'}</td>
      <td class="px-2 py-1 text-right">${it.trong_luong_uoc_tinh || '—'}</td>
      <td class="px-2 py-1 text-right">${fmt(it.don_gia || 0)}</td>
      <td class="px-2 py-1 text-right">${fmt(it.tien_cong || 0)}</td>
      <td class="px-2 py-1 text-right">${fmt((it.tien_dat_coc || 0) * 1000)}</td>
    </tr>`).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-2">Không có món hàng</td></tr>';

  const gd = (o.giao_dich || []).filter(g => g.loai === 'dat_coc' || g.loai === 'bo_sung');
  const gdHtml = gd.length ? gd.map(g => `
      <div class="flex justify-between text-xs bg-white rounded-lg px-2.5 py-1.5 border border-amber-100">
        <span>${g.loai === 'dat_coc' ? '💰 Đặt cọc ban đầu' : '➕ Bổ sung cọc'}</span>
        <span class="font-semibold">${fmt((g.so_tien || 0) * 1000)}đ <span class="text-gray-400 font-normal">(${(g.ngay || '').split(' ')[0]})</span></span>
      </div>`).join('') : '<div class="text-xs text-gray-300">Chưa có giao dịch cọc</div>';

  return `
  <div id="detail-${o.ma_dh}" class="${open ? '' : 'hidden'} bg-amber-50/40 rounded-xl mt-1 px-3 pt-2 pb-3">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs mb-3">
      <div><span class="text-gray-400">Ngày đặt:</span> <b>${(o.ngay_dat || '—').split(' ')[0]}</b></div>
      <div><span class="text-gray-400">Ngày hẹn giao:</span> <b>${(o.ngay_co_hang || '—').split(' ')[0]}</b></div>
      <div><span class="text-gray-400">Trạng thái:</span> ${canhBaoBadge(o)}</div>
      <div><span class="text-gray-400">Tổng đã cọc:</span> <b class="text-green-700">${fmt(o.tong_tien_coc * 1000)}đ</b></div>
    </div>
    <div class="text-xs font-bold text-gray-500 mb-1">📦 Chi tiết mặt hàng</div>
    <div class="overflow-x-auto mb-3">
      <table class="w-full text-xs">
        <thead class="text-gray-400"><tr>
          <th class="text-left px-2 py-1">Tên hàng</th>
          <th class="text-left px-2 py-1">Chất liệu</th>
          <th class="text-right px-2 py-1">KL ước tính</th>
          <th class="text-right px-2 py-1">Đơn giá (đ/chỉ)</th>
          <th class="text-right px-2 py-1">Tiền công (đ)</th>
          <th class="text-right px-2 py-1">Tiền cọc (đ)</th>
        </tr></thead>
        <tbody>${itemsHtml}</tbody>
      </table>
    </div>
    <div class="text-xs font-bold text-gray-500 mb-1">💳 Lịch sử cọc</div>
    <div class="space-y-1">${gdHtml}</div>
    ${o.ghi_chu ? `<div class="text-xs text-gray-500 mt-2">📝 ${o.ghi_chu}</div>` : ''}
  </div>`;
}

// ── Gộp đơn hàng cùng khách (cùng CCCD HOẶC cùng SĐT → cùng nhóm, kể cả bắc cầu) ──
function groupOrdersByCustomer(orders) {
  const parent = orders.map((_, i) => i);
  function find(x) { while (parent[x] !== x) { parent[x] = parent[parent[x]]; x = parent[x]; } return x; }
  function union(a, b) { const ra = find(a), rb = find(b); if (ra !== rb) parent[ra] = rb; }
  const byCccd = new Map(), byDt = new Map();
  orders.forEach((o, i) => {
    const cccd = (o.cccd || '').trim();
    const dt = (o.dien_thoai || '').trim();
    if (cccd) { if (byCccd.has(cccd)) union(i, byCccd.get(cccd)); else byCccd.set(cccd, i); }
    if (dt)   { if (byDt.has(dt))     union(i, byDt.get(dt));     else byDt.set(dt, i); }
  });
  const map = new Map();
  orders.forEach((o, i) => {
    const r = find(i);
    if (!map.has(r)) map.set(r, []);
    map.get(r).push(o);
  });
  return [...map.values()].map(list => {
    list.sort((a, b) => b.id - a.id);
    const soLuongTheoLoai = new Map();
    list.forEach(o => (o.items || []).forEach(it => {
      const ten = (it.noi_dung || '').trim() || '(không tên)';
      const cur = soLuongTheoLoai.get(ten) || { sl: 0, kl: 0 };
      cur.sl += 1;
      cur.kl += parseFloat(it.trong_luong_uoc_tinh) || 0;
      soLuongTheoLoai.set(ten, cur);
    }));
    let tongConLai = 0, soDonCoGia = 0;
    list.forEach(o => {
      const cl = orderConLai(o);
      if (cl !== null) { tongConLai += cl; soDonCoGia++; }
    });
    return {
      orders: list,
      khach_hang: list[0].khach_hang,
      cccd: list.map(o => (o.cccd || '').trim()).find(Boolean) || '',
      dien_thoai: list.map(o => (o.dien_thoai || '').trim()).find(Boolean) || '',
      maxId: Math.max(...list.map(o => o.id)),
      tongCoc: list.reduce((s, o) => s + (o.tong_tien_coc || 0), 0),
      soHang: list.reduce((s, o) => s + (o.items || []).length, 0),
      soLuongTheoLoai: [...soLuongTheoLoai.entries()],
      tongConLai, soDonCoGia,
    };
  });
}

function _orderGroupKey(g) {
  if (g.cccd) return 'cccd:' + g.cccd;
  if (g.dien_thoai) return 'dt:' + g.dien_thoai;
  return 'id:' + Math.min(...g.orders.map(o => o.id));
}

let _orderGroupOpen = {};   // nhớ khách nào đang mở rộng nhóm (theo khóa cccd/sđt)
function toggleOrderGroup(key) {
  key = decodeURIComponent(key);
  _orderGroupOpen[key] = !_orderGroupOpen[key];
  const b = document.getElementById('grp-body-' + key);
  const ch = document.getElementById('grp-chev-' + key);
  if (b) b.classList.toggle('hidden', !_orderGroupOpen[key]);
  if (ch) ch.textContent = _orderGroupOpen[key] ? '▴' : '▾';
}

function _orderTicketRow(o) {
  return `<div class="rounded-xl border border-gray-100 hover:bg-amber-50/60" data-ma-dh="${o.ma_dh}">
    <div class="px-3 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 cursor-pointer" onclick="toggleOrderDetail('${o.ma_dh}')">
      <span id="chev-${o.ma_dh}" class="text-gray-400 inline-block">${_orderDetailOpen[o.ma_dh] ? '▴' : '▾'}</span>
      <span class="font-mono font-semibold text-xs">${o.ma_dh}</span>
      ${canhBaoBadge(o)}
      <span class="text-xs text-gray-500">${itemSummaryFull(o)}</span>
      <span class="text-xs ml-auto whitespace-nowrap">Cọc: <b>${fmt(o.tong_tien_coc * 1000)}đ</b></span>
      <span class="text-xs whitespace-nowrap">Còn lại: ${orderConLaiHtml(o)}</span>
      <span class="text-xs text-gray-400 whitespace-nowrap">Hẹn: ${(o.ngay_co_hang || '—').split(' ')[0]}</span>
      <span class="whitespace-nowrap" onclick="event.stopPropagation()">
        <button onclick='openOrderActionModal(${JSON.stringify(o)})' 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>
    </div>
    ${depositBreakdown(o) ? `<div class="px-3 pb-1.5 -mt-1">${depositBreakdown(o)}</div>` : ''}
    ${orderDetailRow(o)}
  </div>`;
}

function _orderCustCard(g) {
  const key = _orderGroupKey(g);
  const initials = vnInitial(g.khach_hang);
  const open = !!_orderGroupOpen[key];
  return `<div class="ios-card overflow-hidden" style="border:1px solid #fde68a">
    <div onclick="toggleOrderGroup('${encodeURIComponent(key)}')" 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.orders.length} đơ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">Tổng tiền cọc</div>
          <div class="font-black text-gray-800">${fmt(g.tongCoc * 1000)}đ</div>
        </div>
        <span id="grp-chev-${key}" class="text-gray-400">${open ? '▴' : '▾'}</span>
      </div>
    </div>
    <div id="grp-body-${key}" class="${open ? '' : 'hidden'} px-4 pb-4 pt-1 space-y-2">
      <div class="grid grid-cols-1 sm:grid-cols-3 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 số hàng đặt</div>
          <div class="font-bold text-gray-800">${g.soHang} món · ${g.orders.length} đơn</div>
          ${g.soLuongTheoLoai.length ? `<div class="text-xs text-gray-500 mt-1 leading-snug">${g.soLuongTheoLoai.map(([ten, info]) => `${ten}: <b>${info.sl}</b>${info.kl ? ` (${info.kl.toLocaleString('vi-VN', {maximumFractionDigits: 3})} chỉ)` : ''}`).join(' · ')}</div>` : ''}
        </div>
        <div class="rounded-xl px-3 py-2 bg-gray-50"><div class="text-[11px] text-gray-400 uppercase">Tổng số tiền (đã cọc)</div><div class="font-bold text-amber-700">${fmt(g.tongCoc * 1000)}đ</div></div>
        <div class="rounded-xl px-3 py-2 bg-gray-50">
          <div class="text-[11px] text-gray-400 uppercase">Tổng còn phải thu</div>
          <div class="font-bold ${g.tongConLai > 0 ? 'text-red-600' : 'text-green-600'}">${g.soDonCoGia ? fmt(g.tongConLai) + 'đ' : '—'}</div>
          ${g.soDonCoGia < g.orders.length ? `<div class="text-xs text-gray-400 mt-1">${g.orders.length - g.soDonCoGia} đơn chưa nhập giá, chưa tính</div>` : ''}
        </div>
      </div>
      ${g.orders.map(_orderTicketRow).join('')}
    </div>
  </div>`;
}

function renderChuaLaySummary(chuaLay, groups) {
  const box = document.getElementById('chualay-summary');
  if (!chuaLay.length) { box.innerHTML = ''; return; }

  const soLuongTheoLoai = new Map();
  chuaLay.forEach(o => (o.items || []).forEach(it => {
    const ten = (it.noi_dung || '').trim() || '(không tên)';
    const cur = soLuongTheoLoai.get(ten) || { sl: 0, kl: 0 };
    cur.sl += 1;
    cur.kl += parseFloat(it.trong_luong_uoc_tinh) || 0;
    soLuongTheoLoai.set(ten, cur);
  }));
  const soHang = chuaLay.reduce((s, o) => s + (o.items || []).length, 0);
  const tongCoc = chuaLay.reduce((s, o) => s + (o.tong_tien_coc || 0), 0);
  let tongConLai = 0, soDonCoGia = 0;
  chuaLay.forEach(o => { const cl = orderConLai(o); if (cl !== null) { tongConLai += cl; soDonCoGia++; } });

  box.innerHTML = `
    <div class="ios-card p-4 mb-1" style="border:1.5px solid #fcd34d;background:linear-gradient(135deg,#fffbeb,#fff)">
      <div class="text-xs font-bold text-amber-800 uppercase tracking-wide mb-2">📊 Tổng hợp toàn bộ đơn chưa lấy</div>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm">
        <div class="rounded-xl px-3 py-2 bg-white">
          <div class="text-[11px] text-gray-400 uppercase">Khách hàng / Đơn</div>
          <div class="font-bold text-gray-800">${groups.length} khách · ${chuaLay.length} đơn</div>
        </div>
        <div class="rounded-xl px-3 py-2 bg-white">
          <div class="text-[11px] text-gray-400 uppercase">Tổng số hàng đặt</div>
          <div class="font-bold text-gray-800">${soHang} món</div>
          ${soLuongTheoLoai.size ? `<div class="text-xs text-gray-500 mt-1 leading-snug">${[...soLuongTheoLoai.entries()].map(([ten, info]) => `${ten}: <b>${info.sl}</b>${info.kl ? ` (${info.kl.toLocaleString('vi-VN', {maximumFractionDigits: 3})} chỉ)` : ''}`).join(' · ')}</div>` : ''}
        </div>
        <div class="rounded-xl px-3 py-2 bg-white"><div class="text-[11px] text-gray-400 uppercase">Tổng số tiền (đã cọc)</div><div class="font-bold text-amber-700">${fmt(tongCoc * 1000)}đ</div></div>
        <div class="rounded-xl px-3 py-2 bg-white">
          <div class="text-[11px] text-gray-400 uppercase">Tổng còn phải thu</div>
          <div class="font-bold ${tongConLai > 0 ? 'text-red-600' : 'text-green-600'}">${soDonCoGia ? fmt(tongConLai) + 'đ' : '—'}</div>
          ${soDonCoGia < chuaLay.length ? `<div class="text-xs text-gray-400 mt-1">${chuaLay.length - soDonCoGia} đơn chưa nhập giá, chưa tính</div>` : ''}
        </div>
      </div>
    </div>`;
}

function renderOrderTables() {
  const q = (document.getElementById('inp-search-orders')?.value || '').trim().toLowerCase();
  const match = o => !q || [o.ma_dh, o.khach_hang, o.cccd, o.dien_thoai].some(v => (v||'').toLowerCase().includes(q));
  const chuaLay = _allOrders.filter(o => o.trang_thai === 'chua_lay' && match(o));
  const daLay   = _allOrders.filter(o => o.trang_thai === 'da_lay'   && match(o));
  const daHuy   = _allOrders.filter(o => o.trang_thai === 'da_huy'   && match(o));

  document.getElementById('lbl-chualay-count').textContent = `${chuaLay.length} đơn chưa lấy`;
  const groups = groupOrdersByCustomer(chuaLay);
  groups.sort((a, b) => b.maxId - a.maxId);
  renderChuaLaySummary(chuaLay, groups);
  document.getElementById('chualay-grouped').innerHTML = groups.map(_orderCustCard).join('') ||
    '<div class="text-center text-gray-300 py-8">Không có đơn hàng chờ lấy</div>';

  document.getElementById('dalay-tbody').innerHTML = daLay.map(o => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-3 py-2 font-mono">${o.ma_dh}</td>
      <td class="px-3 py-2">${o.khach_hang}<div class="text-xs text-gray-400">${o.dien_thoai||''}</div></td>
      <td class="px-3 py-2">${itemSummary(o)}</td>
      <td class="px-3 py-2 text-right">${fmt(o.tong_tien_coc)}</td>
      <td class="px-3 py-2 text-right text-green-700 font-semibold">${fmt(o.so_tien_thu_them)}</td>
      <td class="px-3 py-2">${(o.ngay_lay||'—').split(' ')[0]}</td>
      <td class="px-3 py-2 text-center whitespace-nowrap"><button onclick='openOrderActionModal(${JSON.stringify(o)})' class="btn-ios text-white text-xs px-3 py-1.5 rounded-lg font-bold" style="background:linear-gradient(135deg,#92400e,#d97706)">⚙️</button></td>
    </tr>`).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-8">Chưa có đơn hàng nào được giao</td></tr>';

  document.getElementById('dahuy-tbody').innerHTML = daHuy.map(o => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-3 py-2 font-mono">${o.ma_dh}</td>
      <td class="px-3 py-2">${o.khach_hang}<div class="text-xs text-gray-400">${o.dien_thoai||''}</div></td>
      <td class="px-3 py-2">${itemSummary(o)}</td>
      <td class="px-3 py-2 text-right">${fmt(o.tong_tien_coc * 1000)}</td>
      <td class="px-3 py-2 text-center">${o.hoan_coc ? '<span class="text-blue-600 text-xs font-semibold">Đã hoàn</span>' : '<span class="text-gray-400 text-xs">Tiệm giữ</span>'}</td>
      <td class="px-3 py-2">${(o.ngay_huy||'—').split(' ')[0]}</td>
    </tr>`).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-8">Chưa có đơn nào bị hủy</td></tr>';
}

async function loadOrders() {
  const res = await fetch('/api/pos/orders');
  const data = await res.json();
  _allOrders = data.orders;
  renderOrderTables();
}

async function submitOrder() {
  const msg = document.getElementById('order-msg');
  const ten = document.getElementById('kh-ten').value.trim();
  if (!ten) { msg.textContent = '⚠️ Vui lòng nhập tên khách hàng.'; msg.className = 'text-sm text-amber-600'; return; }

  const items = [];
  document.querySelectorAll('#item-tbody tr').forEach(tr => {
    const noi_dung = tr.querySelector('.inp-noidung').value.trim();
    const coc = parseFloat((tr.querySelector('.inp-coc').value||'').replace(/\./g,'')) || 0;
    if (!noi_dung && coc <= 0) return;
    items.push({
      noi_dung,
      chat_lieu: tr.querySelector('.inp-chatlieu').value.trim(),
      trong_luong_uoc_tinh: tr.querySelector('.inp-tl').value,
      don_gia: parseFloat((tr.querySelector('.inp-gia').value||'').replace(/\./g,'')) || 0,
      tien_cong: parseFloat((tr.querySelector('.inp-tiencong').value||'').replace(/\./g,'')) || 0,
      tien_dat_coc: coc / 1000,
    });
  });
  if (!items.length) { msg.textContent = '⚠️ Vui lòng thêm ít nhất 1 dòng hàng.'; msg.className = 'text-sm text-amber-600'; return; }

  const ngayCoHangRaw = document.getElementById('inp-ngaycohang').value; // yyyy-mm-dd
  let ngayCoHang = '';
  if (ngayCoHangRaw) {
    const [y, m, d] = ngayCoHangRaw.split('-');
    ngayCoHang = `${d}/${m}/${y}`;
  }
  const ngayDatRaw = document.getElementById('inp-ngaydat').value; // yyyy-mm-dd
  let ngayDat = '';
  if (ngayDatRaw) {
    const [y, m, d] = ngayDatRaw.split('-');
    ngayDat = `${d}/${m}/${y}`;
  }

  const httt = document.getElementById('sel-hinhthuc').value;
  const res = await fetch('/api/pos/orders', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      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(),
      ngay_co_hang: ngayCoHang,
      ngay_dat: ngayDat,
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? document.getElementById('split-tm').value : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? document.getElementById('split-ck').value : 0,
      items,
      ghi_chu: document.getElementById('inp-ghichu').value.trim(),
    })
  });
  const data = await res.json();
  if (data.success) {
    fetch('/api/crm/auto-save', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        ho_ten: ten,
        cccd: document.getElementById('kh-cccd').value.trim(),
        dien_thoai: document.getElementById('kh-dt').value.trim(),
        dia_chi: document.getElementById('kh-diachi').value.trim(),
      })
    }).catch(() => {});
    msg.textContent = `✅ Đã lập phiếu đặt cọc ${data.ma_dh}.`;
    msg.className = 'text-sm text-green-600 font-semibold';
    document.getElementById('item-tbody').innerHTML = '';
    addRow();
    ['kh-ten','kh-cccd','kh-diachi','kh-dt','inp-ngaycohang','inp-ghichu'].forEach(id => fpSet(id, ''));
    fpSet('inp-ngaydat', new Date().toISOString().slice(0, 10));
    document.getElementById('sel-hinhthuc').value = 'tien_mat';
    document.getElementById('split-tm').value = '';
    document.getElementById('split-ck').value = '';
    document.getElementById('split-row').style.display = 'none';
    recalcTotal();
    // Phiếu lập từ 1 nháp → xóa nháp đó (đã thành phiếu thật) + làm mới danh sách
    if (_orderCurDraft) { fetch('/api/form-drafts/' + _orderCurDraft, { method: 'DELETE' }).catch(() => {}); _orderCurDraft = null; }
    loadOrderDrafts();
    loadAlerts(); loadOrders(); loadMaDh();
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── Nhập hàng thực giao ĐẦY ĐỦ như trang Bán hàng (quét mã / gõ chọn tồn kho, giá theo bảng vàng) ──
// Giá trị hiển thị theo ĐỒNG (quy về nghìn khi gửi). Thành tiền = KLV × đơn giá + tiền công + tiền đá.
let pkProducts = [];
let pkPriceMap = {};
async function loadPkProducts() {
  try {
    const d = await (await fetch('/api/pos/products?status=con_hang&gon=1')).json();
    pkProducts = d.products || [];
    const dl = document.getElementById('dl-pk-products');
    if (dl) dl.innerHTML = pkProducts.map(p =>
      `<option value="${(p.ma_hang || '').replace(/"/g, '&quot;')}">${(p.ten || '').replace(/"/g, '&quot;')} · ${p.trong_luong || 0} chỉ</option>`).join('');
  } catch (e) {}
}
async function loadPkPrices() {
  try {
    const d = await (await fetch('/api/prices')).json();
    pkPriceMap = {};
    (d.prices || []).forEach(p => { pkPriceMap[p.loai] = p.ban; });
  } catch (e) {}
}
function pkFindGiaVang(loaiVang) {
  if (!loaiVang) return 0;
  const lo = loaiVang.replace(/^Vàng\s+/i, '').trim();
  if (pkPriceMap[lo] !== undefined) return pkPriceMap[lo];
  for (const [k, v] of Object.entries(pkPriceMap)) { if (lo === k || lo.includes(k) || k.includes(lo)) return v; }
  return 0;
}

function pkRowTemplate(it) {
  it = it || {};
  const esc = s => (s || '').toString().replace(/"/g, '&quot;');
  // order_items: don_gia/tien_cong lưu theo ĐỒNG đầy đủ; trong_luong_uoc_tinh = chỉ
  const tl   = it.trong_luong_uoc_tinh != null ? it.trong_luong_uoc_tinh : (it.trong_luong || 0);
  const klda = it.kl_da || 0;
  const klv  = it.kl_vang != null ? it.kl_vang : tl;
  const dg   = it.don_gia || 0;      // ĐỒNG
  const cong = it.tien_cong || 0;    // ĐỒNG
  const tienda = it.tien_da || 0;    // ĐỒNG
  const pid  = it.product_id ? ` data-product-id="${it.product_id}"` : '';
  return `<tr class="border-b border-gray-50"${pid} data-loai-vang="${esc(it.loai_vang)}">
    <td class="px-1 py-1" data-label="Mã hàng"><input class="pk-mahang input-ios-sm w-24 font-mono text-xs" list="dl-pk-products" placeholder="SKU" value="${esc(it.ma_hang)}" oninput="pkOnMaInput(this)"></td>
    <td class="px-1 py-1" data-label="Tên sản phẩm"><input class="pk-ten input-ios-sm w-full text-xs" placeholder="Tên SP" value="${esc(it.ten || it.noi_dung)}"></td>
    <td class="px-1 py-1" data-label="HLV"><input class="pk-tuoi input-ios-sm w-16 text-center" placeholder="9999" value="${esc(it.loai_vang || it.tuoi || it.chat_lieu)}"></td>
    <td class="px-1 py-1" data-label="TL"><input type="number" step="0.001" class="pk-tl input-ios-sm w-16 text-right" value="${tl}" oninput="recalcPkRow(this)"></td>
    <td class="px-1 py-1" data-label="KLĐ"><input type="number" step="0.001" class="pk-klda input-ios-sm w-16 text-right" value="${klda}" oninput="recalcPkRow(this)"></td>
    <td class="px-1 py-1" data-label="KLV"><input type="number" step="0.001" class="pk-klv input-ios-sm w-16 text-right" value="${klv}" oninput="recalcPkRow(this)"></td>
    <td class="px-1 py-1" data-label="Đơn giá/chỉ"><input type="number" class="pk-dg input-ios-sm w-24 text-right" value="${dg}" oninput="recalcPkRow(this)"></td>
    <td class="px-1 py-1" data-label="Tiền công"><input type="number" class="pk-cong input-ios-sm w-20 text-right" value="${cong}" oninput="recalcPkRow(this)"></td>
    <td class="px-1 py-1" data-label="Tiền đá"><input type="number" class="pk-tienda input-ios-sm w-20 text-right" value="${tienda}" oninput="recalcPkRow(this)"></td>
    <td class="px-2 py-1 text-right font-bold text-amber-700 pk-tt whitespace-nowrap" data-label="Thành tiền">${fmt(klv * dg + cong + tienda)}</td>
    <td class="px-1 py-1 text-center item-entry-del"><button type="button" onclick="this.closest('tr').remove(); pkRecalcThem();" class="text-red-400 hover:text-red-600">✕ <span class="sm:hidden">Xóa dòng</span></button></td>
  </tr>`;
}
function addPkRow(it) { document.getElementById('pk-item-tbody').insertAdjacentHTML('beforeend', pkRowTemplate(it)); }
function recalcPkRow(el) {
  const tr = el.closest('tr');
  // GIÁ CỐ ĐỊNH: giữ tổng đúng bằng giá đã khai dù sửa trọng lượng/công/đá
  if (tr.dataset.giaCoDinh) {
    const _r = giaCoDinhToRow(Number(tr.dataset.giaCoDinh) || 0,
                              parseFloat(tr.querySelector('.pk-klv').value) || 0,
                              parseFloat(tr.querySelector('.pk-cong').value) || 0,
                              parseFloat(tr.querySelector('.pk-tienda').value) || 0);
    tr.querySelector('.pk-dg').value     = _r.donGia;
    tr.querySelector('.pk-cong').value   = _r.tienCong;
    tr.querySelector('.pk-tienda').value = _r.tienDa;
  }
  const klv    = parseFloat(tr.querySelector('.pk-klv').value) || 0;
  const dg     = parseFloat(tr.querySelector('.pk-dg').value) || 0;
  const cong   = parseFloat(tr.querySelector('.pk-cong').value) || 0;
  const tienda = parseFloat(tr.querySelector('.pk-tienda').value) || 0;
  tr.querySelector('.pk-tt').textContent = fmt(klv * dg + cong + tienda);
  pkRecalcThem();
}
// Tổng hàng − giảm giá − đã cọc = còn phải thu (tự điền ô "Số tiền thu thêm")
function pkRecalcThem() {
  let tong = 0;
  document.querySelectorAll('#pk-item-tbody tr').forEach(tr => {
    const klv = parseFloat(tr.querySelector('.pk-klv').value) || 0;
    const dg  = parseFloat(tr.querySelector('.pk-dg').value) || 0;
    const cong = parseFloat(tr.querySelector('.pk-cong').value) || 0;
    const da  = parseFloat(tr.querySelector('.pk-tienda').value) || 0;
    tong += klv * dg + cong + da;
  });
  const giam = parseFloat(document.getElementById('pk-giamgia').value) || 0;
  const coc  = currentPickup ? (currentPickup.tong_tien_coc || 0) * 1000 : 0;
  const conthu = Math.max(0, tong - giam - coc);
  document.getElementById('pk-tonghang').textContent = fmt(tong) + ' đ';
  document.getElementById('pk-conthu').textContent = fmt(conthu) + ' đ';
  const them = document.getElementById('pk-them');
  if (them) them.value = Math.round(conthu);
}
function pkFillFromProduct(p, tr) {
  tr.dataset.productId = p.id;
  tr.dataset.loaiVang = p.loai_vang || '';
  tr.querySelector('.pk-mahang').value = p.ma_hang || '';
  tr.querySelector('.pk-ten').value = p.ten || '';
  tr.querySelector('.pk-tuoi').value = p.tuoi || p.loai_vang || '';
  tr.querySelector('.pk-tl').value = p.trong_luong || 0;
  tr.querySelector('.pk-klda').value = p.kl_da || 0;
  tr.querySelector('.pk-klv').value = p.kl_vang || 0;
  // ĐƠN GIÁ mặc định theo ĐƠN GIÁ LÚC ĐẶT (chốt khi đặt hàng), KHÔNG lấy giá vàng hiện tại:
  // giữ nguyên nếu dòng đã có (điền sẵn từ đơn); dòng quét mới → dùng đơn giá đơn đặt; hết mới rơi về giá vàng.
  const dgEl = tr.querySelector('.pk-dg');
  const curDg = parseFloat(dgEl.value) || 0;
  // Hàng GIÁ CỐ ĐỊNH → quy về đơn giá/công/đá cho khớp đúng giá đã khai (chỉ dùng khi
  // đơn đặt CHƯA chốt đơn giá — giá thỏa thuận lúc đặt vẫn được ưu tiên cao nhất).
  const _r = (p.gia_ban_co_dinh && (p.gia_ban || 0) > 0)
    ? giaCoDinhToRow((p.gia_ban || 0) * 1000, p.kl_vang || 0,
                     (p.tien_cong || 0) * 1000, (p.tien_da || 0) * 1000) : null;
  const _dungCoDinh = !!_r && curDg <= 0 && !(_pkOrderDonGia > 0);
  if (_dungCoDinh) tr.dataset.giaCoDinh = (p.gia_ban || 0) * 1000; else delete tr.dataset.giaCoDinh;
  if (curDg <= 0) {
    const gv = pkFindGiaVang(p.loai_vang || '');
    dgEl.value = (_pkOrderDonGia > 0) ? _pkOrderDonGia
               : (_r ? _r.donGia : (gv ? gv * 1000 : 0));   // tra khong ra gia vang → de 0
  }
  tr.querySelector('.pk-cong').value   = _dungCoDinh ? _r.tienCong : (p.tien_cong || 0) * 1000;
  tr.querySelector('.pk-tienda').value = _dungCoDinh ? _r.tienDa   : (p.tien_da || 0) * 1000;
  recalcPkRow(tr.querySelector('.pk-klv'));
}
function pkOnMaInput(input) {
  const tr = input.closest('tr');
  const val = input.value.trim().toLowerCase();
  if (!val) { delete tr.dataset.productId; return; }
  const p = pkProducts.find(x => (x.ma_hang || '').trim().toLowerCase() === val);
  if (p) pkFillFromProduct(p, tr);
  else delete tr.dataset.productId;
}
function pkScanIntoRow(code) {
  const msg = document.getElementById('pk-scan-msg');
  const p = pkProducts.find(x => (x.ma_hang || '').trim().toLowerCase() === (code || '').trim().toLowerCase());
  if (!p) { msg.textContent = `✕ Không thấy mã "${code}" trong tồn kho (hàng còn). Kiểm tra hoặc nhập tay.`; msg.style.color = '#dc2626'; return; }
  const dup = [...document.querySelectorAll('#pk-item-tbody tr')].find(r => r.dataset.productId == p.id);
  if (dup) { dup.classList.add('shake'); setTimeout(() => dup.classList.remove('shake'), 400); msg.textContent = `⚠ "${p.ten || p.ma_hang}" đã có trong danh sách rồi (quét trùng).`; msg.style.color = '#d97706'; return; }
  let tr = document.querySelector('#pk-item-tbody tr:last-child');
  const trTrong = tr && !tr.dataset.productId && !tr.querySelector('.pk-mahang').value.trim() && !tr.querySelector('.pk-ten').value.trim();
  if (!trTrong) { addPkRow(); tr = document.querySelector('#pk-item-tbody tr:last-child'); }
  pkFillFromProduct(p, tr);
  msg.textContent = `✓ Đã thêm: ${p.ten || p.ma_hang}`; msg.style.color = '#16a34a';
}
function pkCollectItems() {
  const items = [];
  document.querySelectorAll('#pk-item-tbody tr').forEach(tr => {
    const ma = tr.querySelector('.pk-mahang').value.trim();
    const ten = tr.querySelector('.pk-ten').value.trim();
    if (!ten && !ma) return;
    const tuoi = tr.querySelector('.pk-tuoi').value.trim();
    const tl   = parseFloat(tr.querySelector('.pk-tl').value) || 0;
    const klda = parseFloat(tr.querySelector('.pk-klda').value) || 0;
    const klv  = parseFloat(tr.querySelector('.pk-klv').value) || 0;
    const dg   = parseFloat(tr.querySelector('.pk-dg').value) || 0;   // đồng/chỉ
    const cong = parseFloat(tr.querySelector('.pk-cong').value) || 0; // đồng
    const tienda = parseFloat(tr.querySelector('.pk-tienda').value) || 0; // đồng
    const pid = tr.dataset.productId ? parseInt(tr.dataset.productId) : null;
    items.push({
      product_id: pid,
      ma_hang: ma, ten: ten, mo_ta: ten, tuoi: tuoi,
      trong_luong: tl, kl_da: klda, kl_vang: klv, don_vi: 'Chỉ',
      don_gia: dg / 1000, tien_cong: cong / 1000, tien_da: tienda / 1000,
      thanh_tien: (klv * dg + cong + tienda) / 1000,   // nghìn đồng
    });
  });
  return items;
}

let _pkOrderDonGia = 0;   // đơn giá lúc ĐẶT hàng (chốt) — dùng làm mặc định khi giao, không lấy giá vàng hiện tại
function openPickup(o) {
  currentPickup = o;
  // Đơn giá lúc đặt = đơn giá món đầu tiên có giá của đơn (ĐỒNG). Đơn nhiều món khác giá → mỗi dòng
  // điền sẵn vẫn giữ giá riêng của nó; giá trị này chỉ là mặc định cho dòng QUÉT MỚI.
  _pkOrderDonGia = 0;
  (o.items || []).some(it => { const d = parseFloat(it.don_gia) || 0; if (d > 0) { _pkOrderDonGia = d; return true; } });
  document.getElementById('pickup-sub').textContent = `${o.ma_dh} — ${o.khach_hang} — ${itemSummary(o)}`;
  document.getElementById('pk-coc').textContent = fmt(o.tong_tien_coc * 1000) + ' đ';
  document.getElementById('pk-them').value = 0;
  document.getElementById('pk-giamgia').value = 0;
  document.getElementById('pk-ghichu').value = '';
  document.getElementById('pk-hinhthuc').value = 'tien_mat';
  document.getElementById('pk-split-tm').value = '';
  document.getElementById('pk-split-ck').value = '';
  onPkHtttChange();
  // Điền sẵn hàng thực giao từ các món đã đặt (nhân viên chỉnh lại theo hàng thực tế)
  const tb = document.getElementById('pk-item-tbody');
  tb.innerHTML = '';
  (o.items || []).forEach(it => addPkRow(it));
  if (!(o.items || []).length) addPkRow();
  document.getElementById('pickup-msg').textContent = '';
  document.getElementById('pk-scan-msg').textContent = '';
  document.getElementById('pk-scan-barcode').value = '';
  loadPkProducts();   // làm mới tồn kho mỗi lần mở (hàng có thể vừa nhập kho)
  pkRecalcThem();
  document.getElementById('pickup-modal').classList.remove('hidden');
}
function closePickup() { document.getElementById('pickup-modal').classList.add('hidden'); currentPickup = null; }
function onPkHtttChange() {
  document.getElementById('pk-split-row').style.display = document.getElementById('pk-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}

async function confirmPickup() {
  if (!currentPickup) return;
  const msg = document.getElementById('pickup-msg');
  const them = document.getElementById('pk-them').value;
  const httt = document.getElementById('pk-hinhthuc').value;
  const items = pkCollectItems();
  const res = await fetch(`/api/pos/orders/${currentPickup.id}/pickup`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      pin: getPin(), so_tien_thu_them: them, ghi_chu_them: document.getElementById('pk-ghichu').value.trim(),
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('pk-split-tm') : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('pk-split-ck') : 0,
      giam_gia: parseFloat(document.getElementById('pk-giamgia').value) || 0,
      items,
    })
  });
  const data = await res.json();
  if (data.success) {
    // Có hóa đơn giao → cho in giấy đảm bảo vàng ngay
    if (data.sale_id) {
      msg.innerHTML = `✅ Đã giao hàng — thu thêm ${fmt(data.so_tien_thu_them)}đ.<br>`
        + `<span class="inline-flex flex-wrap items-center gap-2 mt-1">`
        + `<a href="/pos/sales/${data.sale_id}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In giấy đảm bảo vàng</a>`
        + `<button onclick="printRemote('/pos/sales/${data.sale_id}/print', this)" class="tkt-act tkt-amber" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>`
        + `</span>`;
      msg.className = 'text-sm text-green-600 font-semibold';
      setTimeout(() => { loadAlerts(); loadOrders(); }, 500);  // giữ modal để bấm in
    } else {
      msg.textContent = `✅ Đã giao hàng — thu thêm ${fmt(data.so_tien_thu_them)}đ.`;
      msg.className = 'text-sm text-green-600 font-semibold';
      setTimeout(() => { closePickup(); loadAlerts(); loadOrders(); }, 900);
    }
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── Bổ sung tiền cọc ──
let currentDeposit = null;
function openDeposit(o) {
  currentDeposit = o;
  document.getElementById('dep-sub').textContent = `${o.ma_dh} — ${o.khach_hang} — ${itemSummary(o)}`;
  document.getElementById('dep-cocht').textContent = fmt(o.tong_tien_coc * 1000) + ' đ';
  document.getElementById('dep-sotien').value = '';
  fpSet('dep-ngay', new Date().toISOString().slice(0, 10));
  document.getElementById('dep-ghichu').value = '';
  document.getElementById('dep-hinhthuc').value = 'tien_mat';
  document.getElementById('dep-split-tm').value = '';
  document.getElementById('dep-split-ck').value = '';
  onDepHtttChange();
  document.getElementById('deposit-msg').textContent = '';
  renderDepHistory(o);
  const isGdPgdDep = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;
  document.getElementById('dep-btn-xacnhan').classList.toggle('hidden', !isGdPgdDep);
  document.getElementById('dep-btn-gui-duyet').classList.toggle('hidden', isGdPgdDep);
  document.getElementById('deposit-modal').classList.remove('hidden');
}
function closeDeposit() { document.getElementById('deposit-modal').classList.add('hidden'); currentDeposit = null; }

function _htLabel(h) { return h === 'chuyen_khoan' ? '🏦 CK' : '💵 TM'; }
function renderDepHistory(o) {
  const wrap = document.getElementById('dep-history-wrap');
  const box = document.getElementById('dep-history');
  const list = (o.giao_dich || []).filter(g => g.loai === 'bo_sung');
  if (!list.length) { wrap.classList.add('hidden'); box.innerHTML = ''; return; }
  wrap.classList.remove('hidden');
  box.innerHTML = list.map(g => `
    <div class="flex items-center justify-between gap-2 bg-gray-50 rounded-xl px-3 py-2 text-sm">
      <div>
        <span class="font-semibold text-green-700">+ ${fmt((g.so_tien||0)*1000)}đ</span>
        <span class="text-xs text-gray-400 ml-1">${_htLabel(g.hinh_thuc)} · ${(g.ngay||'').split(' ')[0]}</span>
      </div>
      <div class="flex items-center gap-2 flex-shrink-0">
        <button onclick='openDepEdit(${g.id}, ${g.so_tien||0}, "${(g.ngay||'').split(' ')[0]}", "${g.hinh_thuc||'tien_mat'}")' class="tkt-act tkt-blue">✏️ Sửa</button>
        <button onclick="deleteDepositTxn(${g.id})" class="tkt-act tkt-red">🗑️</button>
      </div>
    </div>`).join('');
}

function _depErr(e) {
  return ({wrong_pin:'❌ Sai mã PIN', invalid_so_tien:'❌ Số tiền không hợp lệ',
    chi_sua_duoc_bo_sung_coc:'❌ Chỉ sửa được các lần bổ sung cọc',
    chi_xoa_duoc_bo_sung_coc:'❌ Chỉ xóa được các lần bổ sung cọc'}[e] || ('❌ Lỗi: ' + e));
}

let _depEditCbId = null;
function openDepEdit(cbId, soTienNghin, ngayDmy, hinhThuc) {
  _depEditCbId = cbId;
  document.getElementById('de-sotien').value = fmt((soTienNghin || 0) * 1000);
  const m = (ngayDmy || '').match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
  fpSet('de-ngay', m ? `${m[3]}-${m[2]}-${m[1]}` : '');
  document.getElementById('de-hinhthuc').value = (hinhThuc === 'chuyen_khoan') ? 'chuyen_khoan' : 'tien_mat';
  document.getElementById('de-msg').textContent = '';
  document.getElementById('dep-edit-modal').classList.remove('hidden');
}
function closeDepEdit() { document.getElementById('dep-edit-modal').classList.add('hidden'); _depEditCbId = null; }

async function confirmDepEdit() {
  if (!currentDeposit || !_depEditCbId) return;
  const msg = document.getElementById('de-msg');
  const sotien = parseSplitAmt('de-sotien');
  if (!sotien) { msg.textContent = '⚠️ Nhập số tiền.'; msg.className = 'text-sm text-amber-600'; return; }
  const ngayRaw = document.getElementById('de-ngay').value;
  let ngay = '';
  if (ngayRaw) { const [y, m, d] = ngayRaw.split('-'); ngay = `${d}/${m}/${y}`; }
  const res = await fetch(`/api/pos/orders/${currentDeposit.id}/giao-dich/${_depEditCbId}`, {
    method: 'PUT', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), so_tien: sotien / 1000, ngay, hinh_thuc: document.getElementById('de-hinhthuc').value })
  });
  const data = await res.json();
  if (data.success) {
    currentDeposit = data.order;
    document.getElementById('dep-cocht').textContent = fmt(data.order.tong_tien_coc * 1000) + ' đ';
    renderDepHistory(data.order);
    closeDepEdit();
    loadOrders(); loadAlerts();
  } else {
    msg.textContent = _depErr(data.error); msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function deleteDepositTxn(cbId) {
  if (!currentDeposit) return;
  if (!confirm('Xóa lần bổ sung cọc này? Số tiền sẽ được trừ khỏi tổng cọc đã nhận.')) return;
  const res = await fetch(`/api/pos/orders/${currentDeposit.id}/giao-dich/${cbId}`, {
    method: 'DELETE', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ pin: getPin() })
  });
  const data = await res.json();
  if (data.success) {
    currentDeposit = data.order;
    document.getElementById('dep-cocht').textContent = fmt(data.order.tong_tien_coc * 1000) + ' đ';
    renderDepHistory(data.order);
    loadOrders(); loadAlerts();
  } else {
    alert(_depErr(data.error));
  }
}
function onDepHtttChange() {
  document.getElementById('dep-split-row').style.display = document.getElementById('dep-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}
async function confirmDeposit() {
  if (!currentDeposit) return;
  const msg = document.getElementById('deposit-msg');
  const sotien = parseSplitAmt('dep-sotien');
  if (!sotien) { msg.textContent = '⚠️ Vui lòng nhập số tiền cọc thêm.'; msg.className = 'text-sm text-amber-600'; return; }
  const httt = document.getElementById('dep-hinhthuc').value;
  const ngayRaw = document.getElementById('dep-ngay').value; // yyyy-mm-dd
  let ngay = '';
  if (ngayRaw) { const [y, m, d] = ngayRaw.split('-'); ngay = `${d}/${m}/${y}`; }
  const res = await fetch(`/api/pos/orders/${currentDeposit.id}/deposit`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      pin: getPin(), so_tien: sotien / 1000, ngay,
      ghi_chu: document.getElementById('dep-ghichu').value.trim(),
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('dep-split-tm') : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('dep-split-ck') : 0,
    })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = `✅ Đã bổ sung cọc +${fmt(sotien)}đ. (Có thể sửa/xóa ở danh sách bên dưới)`;
    msg.className = 'text-sm text-green-600 font-semibold';
    // làm mới tại chỗ: cập nhật tổng cọc + lịch sử, xóa ô nhập — KHÔNG đóng modal
    currentDeposit = data.order;
    document.getElementById('dep-cocht').textContent = fmt(data.order.tong_tien_coc * 1000) + ' đ';
    document.getElementById('dep-sotien').value = '';
    document.getElementById('dep-split-tm').value = '';
    document.getElementById('dep-split-ck').value = '';
    renderDepHistory(data.order);
    loadAlerts(); loadOrders();
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function submitDepositForApproval() {
  if (!currentDeposit) return;
  const msg = document.getElementById('deposit-msg');
  const sotien = parseSplitAmt('dep-sotien');
  if (!sotien) { msg.textContent = '⚠️ Vui lòng nhập số tiền cọc thêm.'; msg.className = 'text-sm text-amber-600'; return; }
  const httt = document.getElementById('dep-hinhthuc').value;
  const ngayRaw = document.getElementById('dep-ngay').value; // yyyy-mm-dd
  let ngay = '';
  if (ngayRaw) { const [y, m, d] = ngayRaw.split('-'); ngay = `${d}/${m}/${y}`; }
  const htttLabel = httt === 'ca_hai' ? '🔀 TM/CK' : httt === 'chuyen_khoan' ? '🏦 Chuyển khoản' : '💵 Tiền mặt';
  const payload = {
    so_tien: sotien / 1000, ngay,
    ghi_chu: document.getElementById('dep-ghichu').value.trim(),
    hinh_thuc_tt: httt,
    so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('dep-split-tm') : 0,
    so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('dep-split-ck') : 0,
    _delta: [
      `Cọc hiện tại: ${fmt(currentDeposit.tong_tien_coc*1000)}đ → ${fmt(currentDeposit.tong_tien_coc*1000 + sotien)}đ (+${fmt(sotien)}đ)`,
      `Thanh toán: ${htttLabel}${ngay ? ' · Ngày: ' + ngay : ''}`,
    ],
  };
  const btn = document.getElementById('dep-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: 'coc_dat_hang', phieu_id: currentDeposit.id, payload,
        ma_phieu: currentDeposit.ma_dh,
        mo_ta: `Bổ sung cọc +${fmt(sotien)}đ — ${currentDeposit.khach_hang}`,
      })
    });
    const d = await res.json();
    if (d.success) {
      closeDeposit();
      alert('✅ Đã gửi yêu cầu duyệt. Vui lòng chờ GĐ/PGĐ xem xét.');
    } else {
      msg.textContent = '❌ ' + (d.message || d.error || 'Gửi thất bại');
      msg.className = 'text-sm text-red-600 font-semibold';
    }
  } finally {
    btn.disabled = false; btn.textContent = '📤 Gửi Duyệt';
  }
}

// ── Hủy đơn đặt hàng ──
let currentCancelOrder = null;
function openCancelOrder(o) {
  currentCancelOrder = o;
  document.getElementById('cxl-sub').textContent = `${o.ma_dh} — ${o.khach_hang} — ${itemSummary(o)}`;
  document.getElementById('cxl-coc').textContent = fmt(o.tong_tien_coc * 1000) + ' đ';
  document.getElementById('cxl-hoancoc').value = '0';
  document.getElementById('cxl-hinhthuc').value = 'tien_mat';
  document.getElementById('cxl-split-tm').value = '';
  document.getElementById('cxl-split-ck').value = '';
  document.getElementById('cxl-lydo').value = '';
  onCxlHoanChange();
  document.getElementById('cancel-order-msg').textContent = '';
  document.getElementById('cancel-order-modal').classList.remove('hidden');
}
function closeCancelOrder() { document.getElementById('cancel-order-modal').classList.add('hidden'); currentCancelOrder = null; }
function onCxlHoanChange() {
  const hoan = document.getElementById('cxl-hoancoc').value === '1';
  document.getElementById('cxl-hoan-wrap').classList.toggle('hidden', !hoan);
  onCxlHtttChange();
}
function onCxlHtttChange() {
  document.getElementById('cxl-split-row').style.display = document.getElementById('cxl-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}
async function confirmCancelOrder() {
  if (!currentCancelOrder) return;
  const msg = document.getElementById('cancel-order-msg');
  const hoan = document.getElementById('cxl-hoancoc').value === '1';
  if (!confirm(hoan
    ? `Xác nhận hủy đơn ${currentCancelOrder.ma_dh} và HOÀN LẠI ${fmt(currentCancelOrder.tong_tien_coc*1000)}đ tiền cọc cho khách?`
    : `Xác nhận hủy đơn ${currentCancelOrder.ma_dh} — tiệm GIỮ LẠI tiền cọc (không hoàn)?`)) return;
  const httt = document.getElementById('cxl-hinhthuc').value;
  const res = await fetch(`/api/pos/orders/${currentCancelOrder.id}/cancel`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      pin: getPin(), hoan_coc: hoan,
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('cxl-split-tm') : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('cxl-split-ck') : 0,
      ly_do: document.getElementById('cxl-lydo').value.trim(),
    })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = `✅ Đã hủy đơn ${currentCancelOrder.ma_dh}.`;
    msg.className = 'text-sm text-green-600 font-semibold';
    setTimeout(() => { closeCancelOrder(); loadAlerts(); loadOrders(); }, 900);
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── Bản nháp phiếu đặt lấy hàng (LƯU SERVER — nhiều bản, gắn người tạo, sửa tiếp/lập sau) ──
function _collectOrderItems() {
  const items = [];
  document.querySelectorAll('#item-tbody tr').forEach(tr => {
    items.push({
      noi_dung: tr.querySelector('.inp-noidung').value,
      chat_lieu: tr.querySelector('.inp-chatlieu').value,
      tl: tr.querySelector('.inp-tl').value,
      gia: tr.querySelector('.inp-gia').value,
      tiencong: tr.querySelector('.inp-tiencong').value,
      coc: tr.querySelector('.inp-coc').value,
    });
  });
  return items;
}

let _orderCurDraft = null;   // id bản nháp đang sửa (null = form mới)

function _orderDraftData() {
  return {
    khach_hang: document.getElementById('kh-ten').value,
    cccd: document.getElementById('kh-cccd').value,
    dia_chi: document.getElementById('kh-diachi').value,
    dien_thoai: document.getElementById('kh-dt').value,
    hinh_thuc_tt: document.getElementById('sel-hinhthuc').value,
    split_tm: document.getElementById('split-tm').value,
    split_ck: document.getElementById('split-ck').value,
    ngay_dat: document.getElementById('inp-ngaydat').value,
    ngay_co_hang: document.getElementById('inp-ngaycohang').value,
    ghi_chu: document.getElementById('inp-ghichu').value,
    items: _collectOrderItems(),
  };
}

function _orderResetForm() {
  document.getElementById('item-tbody').innerHTML = '';
  addRow();
  ['kh-ten','kh-cccd','kh-diachi','kh-dt','inp-ngaycohang','inp-ghichu'].forEach(id => fpSet(id, ''));
  fpSet('inp-ngaydat', new Date().toISOString().slice(0, 10));
  document.getElementById('sel-hinhthuc').value = 'tien_mat';
  document.getElementById('split-tm').value = '';
  document.getElementById('split-ck').value = '';
  onHtttChange();
  recalcTotal();
  _orderCurDraft = null;
}

async function orderSaveDraft() {
  const msg = document.getElementById('order-msg');
  const data = _orderDraftData();
  const ten = (data.khach_hang || '').trim();
  const hasItem = (data.items || []).some(it => (it.noi_dung || '').trim());
  if (!ten && !hasItem) {
    msg.textContent = '⚠️ Nháp trống — nhập tên khách hoặc 1 dòng hàng rồi lưu.';
    msg.className = 'text-sm text-amber-600'; return;
  }
  const tom_tat = `${ten || '(chưa có tên)'} — ${(data.items || []).length} món hàng`;
  try {
    const r = await fetch('/api/form-drafts', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ loai: 'dat_hang', id: _orderCurDraft, 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';
    _orderResetForm();
    loadOrderDrafts();
  } catch (e) {
    msg.textContent = '❌ Không lưu được nháp: ' + e.message; msg.className = 'text-sm text-red-600';
  }
}

function _orderFillDraft(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('sel-hinhthuc').value = d.hinh_thuc_tt || 'tien_mat';
  onHtttChange();
  document.getElementById('split-tm').value = d.split_tm || '';
  document.getElementById('split-ck').value = d.split_ck || '';
  if (d.ngay_dat) fpSet('inp-ngaydat', (d.ngay_dat || '').slice(0, 10));
  if (d.ngay_co_hang) fpSet('inp-ngaycohang', (d.ngay_co_hang || '').slice(0, 10));
  document.getElementById('inp-ghichu').value = d.ghi_chu || '';
  document.getElementById('item-tbody').innerHTML = '';
  (d.items || []).forEach(it => {
    addRow();
    const tr = document.getElementById('item-tbody').lastElementChild;
    tr.querySelector('.inp-noidung').value = it.noi_dung || '';
    tr.querySelector('.inp-chatlieu').value = it.chat_lieu || '';
    tr.querySelector('.inp-tl').value = it.tl || '';
    tr.querySelector('.inp-gia').value = it.gia || '';
    tr.querySelector('.inp-tiencong').value = it.tiencong || '';
    tr.querySelector('.inp-coc').value = it.coc || '';
  });
  if (!(d.items || []).length) addRow();
  recalcTotal();
}

async function loadOrderDrafts() {
  const box = document.getElementById('order-drafts-box');
  const list = document.getElementById('order-drafts-list');
  try {
    const r = await fetch('/api/form-drafts?loai=dat_hang');
    const d = await r.json();
    const drafts = d.drafts || [];
    if (!drafts.length) { box.classList.add('hidden'); list.innerHTML = ''; return; }
    box.classList.remove('hidden');
    list.innerHTML = drafts.map(dr => {
      const editing = (_orderCurDraft == 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="resumeOrderDraft(${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="deleteOrderDraft(${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 resumeOrderDraft(id) {
  const msg = document.getElementById('order-msg');
  try {
    const r = await fetch('/api/form-drafts/' + id);
    const d = await r.json();
    if (!d.success) throw new Error(d.error || 'không tìm thấy');
    _orderFillDraft((d.draft && d.draft.data) || {});
    _orderCurDraft = id;
    msg.innerHTML = `✏️ Đang sửa bản nháp. Bấm <b>Lập phiếu đặt cọc</b> để hoàn tất (nháp tự xóa), hoặc <b>Lưu nháp</b> để cập nhật.`;
    msg.className = 'text-sm text-blue-600';
    loadOrderDrafts();
    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 deleteOrderDraft(id) {
  if (!confirm('Xóa bản nháp này?')) return;
  try {
    await fetch('/api/form-drafts/' + id, { method: 'DELETE' });
    if (_orderCurDraft == id) _orderCurDraft = null;
    loadOrderDrafts();
  } catch (e) {}
}

addRow();
document.getElementById('inp-ngaydat').value = new Date().toISOString().slice(0, 10);
loadOrderDrafts();
loadAlerts();
loadOrders();
loadMaDh();
// Giao hàng "y hệt trang Bán": nạp tồn kho + bảng giá vàng + gắn ô quét mã 1 lần
loadPkProducts();
loadPkPrices();
try { bindBarcodeScanInput('pk-scan-barcode', code => pkScanIntoRow(code)); } catch (e) {}

// Link từ Tổng quan (?ma_dh=DH...) → cuộn tới + highlight đúng đơn hàng
async function lookupOrderTicket(maDh) {
  maDh = (maDh || '').trim();
  if (!maDh) return;
  showTab('theodoi');
  await loadOrders();
  document.getElementById('inp-search-orders').value = '';
  renderOrderTables();
  setTimeout(() => {
    const el = document.querySelector(`#chualay-grouped [data-ma-dh="${maDh}"]`);
    if (!el) { alert(`⚠️ Không tìm thấy đơn hàng "${maDh}" (có thể đã lấy hàng/đã hủy).`); return; }
    const body = el.closest('[id^="grp-body-"]');
    if (body && body.classList.contains('hidden')) {
      const key = body.id.replace('grp-body-', '');
      _orderGroupOpen[key] = true;
      body.classList.remove('hidden');
      const ch = document.getElementById('grp-chev-' + key);
      if (ch) ch.textContent = '▴';
    }
    el.scrollIntoView({behavior:'smooth', block:'center'});
    el.classList.add('order-flash');
    setTimeout(() => el.classList.remove('order-flash'), 1600);
  }, 200);
}
(function() {
  const maDh = new URLSearchParams(location.search).get('ma_dh');
  if (maDh) lookupOrderTicket(maDh);
})();

// ── Sửa / Xóa đơn đặt hàng (giám đốc / phó GĐ) ──
let _editOrderId = null;
let _editOrderOriginal = null;

// ── ⚙️ Thao tác: gom mọi hành động của 1 đơn vào 1 modal (học tập pawn.html) ──
let _actOrderId = null, _actOrder = null;
function openOrderActionModal(o) {
  _actOrderId = o.id; _actOrder = o;
  const isDir = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  const chuaLay = o.trang_thai !== 'da_lay' && o.trang_thai !== 'da_huy';
  document.getElementById('act-o-magd').textContent = o.ma_dh;
  document.getElementById('act-o-khach').textContent = o.khach_hang || '—';
  document.getElementById('act-o-tt').innerHTML = canhBaoBadge(o);
  document.getElementById('act-o-coc').textContent = fmt(o.tong_tien_coc * 1000) + 'đ';
  document.getElementById('act-o-hen').textContent = (o.ngay_co_hang || '—').split(' ')[0];
  document.getElementById('act-o-giaohang-btn').style.display = chuaLay ? '' : 'none';
  document.getElementById('act-o-coc-btn').style.display = chuaLay ? '' : 'none';
  document.getElementById('act-o-huy-btn').style.display = chuaLay ? '' : 'none';
  document.getElementById('act-o-giaydb-btn').style.display = (o.trang_thai === 'da_lay' && o.sale_id_lay) ? '' : 'none';
  document.getElementById('act-o-giaydb-remote-btn').style.display = (o.trang_thai === 'da_lay' && o.sale_id_lay) ? '' : 'none';
  document.getElementById('act-o-hoanphieu-btn').style.display = (o.trang_thai === 'da_lay' && isDir) ? '' : 'none';
  // NV không xóa được — thấy nút GỬI DUYỆT xóa (29/07/2026, chủ tiệm chốt)
  document.getElementById('act-o-del-btn').textContent = isDir ? '🗑️ Xóa phiếu' : '📤 Xin xóa (gửi duyệt)';
  document.getElementById('order-action-modal').classList.remove('hidden');
}
function closeOrderActionModal() {
  document.getElementById('order-action-modal').classList.add('hidden');
  _actOrderId = null; _actOrder = null;
}
// LƯU Ý: phải chụp _actOrder/_actOrderId ra biến cục bộ TRƯỚC khi gọi closeOrderActionModal()
// — hàm đó xóa _actOrder/_actOrderId về null, gọi closeOrderActionModal() trước rồi mới đọc
// _actOrder sẽ luôn nhận null (đã bắt bằng test logic, sửa 17/07/2026).
function orderActionPickup() { const o = _actOrder; closeOrderActionModal(); openPickup(o); }
function orderActionDeposit() { const o = _actOrder; closeOrderActionModal(); openDeposit(o); }
function orderActionCancel() { const o = _actOrder; closeOrderActionModal(); openCancelOrder(o); }
function orderActionEdit() { const o = _actOrder; closeOrderActionModal(); openOrderEdit(o); }
function orderActionPrint() { window.open(`/orders/${_actOrderId}/print`, '_blank'); }
function orderActionPrintRemote() { const id = _actOrderId; closeOrderActionModal(); printRemote('/orders/' + id + '/print'); }
function orderActionPrintGiayDB() { if (_actOrder && _actOrder.sale_id_lay) window.open(`/pos/sales/${_actOrder.sale_id_lay}/print`, '_blank'); }
function orderActionPrintGiayDBRemote() {
  const o = _actOrder;
  closeOrderActionModal();
  if (o && o.sale_id_lay) printRemote('/pos/sales/' + o.sale_id_lay + '/print');
}
function orderActionDelete() {
  const id = _actOrderId, o = _actOrder;
  closeOrderActionModal();
  if (_myRole !== 'giam_doc' && _myRole !== 'pho_giam_doc') {
    xinXoaPhieu('dat_hang', id, o && o.ma_dh, 'KH: ' + ((o && o.khach_hang) || ''));
    return;
  }
  deleteOrder(id);
}
function orderActionRevert() { const o = _actOrder; closeOrderActionModal(); revertPickup(o); }
// HOÀN LẠI PHIẾU GIAO (GĐ/PGĐ): đưa đơn ĐÃ LẤY về CHƯA LẤY để sửa/giao lại linh hoạt.
function revertPickup(o) {
  if (!o) return;
  if (!confirm(`♻️ Hoàn lại phiếu giao đơn ${o.ma_dh}?\n\n• Hủy hóa đơn giao đã lập → sản phẩm trả về kho.\n• Đưa đơn về "CHƯA LẤY" để sửa lại.\n• GIỮ NGUYÊN tiền cọc đã nhận.`)) return;
  askPin('Xác nhận hoàn lại phiếu giao', async (pin) => {
    const res = await fetch(`/api/pos/orders/${o.id}/revert-pickup`, {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin })
    });
    const d = await res.json();
    if (!d.success) { alert(`❌ Lỗi: ${d.error === 'forbidden_role' ? 'Cần quyền Giám đốc/Phó GĐ + PIN đúng' : d.error}`); return; }
    alert(`✅ Đã hoàn lại phiếu giao — đơn ${o.ma_dh} về "Chưa lấy". Tiền cọc giữ nguyên.`);
    loadOrders(); loadAlerts();
  });
}

function openOrderEdit(o) {
  _editOrderId = o.id;
  _editOrderOriginal = o;
  // Hiện modal TRƯỚC khi gán ô lịch (input type="date") — một số trình duyệt không vẽ lại
  // đúng widget lịch nếu gán giá trị lúc phần tử còn display:none (xem pawn.html openPawnEdit).
  document.getElementById('eo-modal').classList.remove('hidden');
  document.getElementById('eo-magd').textContent = o.ma_dh || '';
  document.getElementById('eo-tt').innerHTML = canhBaoBadge(o);
  document.getElementById('eo-tongcoc').textContent = fmt((o.tong_tien_coc || 0) * 1000) + 'đ';
  document.getElementById('eo-ngaydat').textContent = (o.ngay_dat || '—').split(' ')[0];
  document.getElementById('eo-kh').value = o.khach_hang || '';
  document.getElementById('eo-cccd').value = o.cccd || '';
  document.getElementById('eo-diachi').value = o.dia_chi || '';
  document.getElementById('eo-dt').value = o.dien_thoai || '';
  const ngayDmy = (o.ngay_co_hang || '').split(' ')[0];   // dd/mm/yyyy lưu trong DB
  const [d, m, y] = ngayDmy.split('/');
  // input#eo-ngay đượ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('eo-ngay', (d && m && y) ? `${y}-${m}-${d}` : '');
  document.getElementById('eo-ghichu').value = o.ghi_chu || '';
  const tbody = document.getElementById('eo-item-tbody');
  tbody.innerHTML = '';
  (o.items || []).forEach(it => addEoItemRow(it));
  if (!(o.items||[]).length) addEoItemRow();
  eoTinhTien();
  // Lịch sử tiền cọc (chỉ xem) — đặt cọc ban đầu + các lần bổ sung, từ sổ quỹ
  const gds = (o.giao_dich || []).filter(g => g.loai === 'dat_coc' || g.loai === 'bo_sung');
  document.getElementById('eo-coc-list').innerHTML = gds.length
    ? gds.map(g => `<div class="px-4 py-2 flex items-center gap-2 text-sm">
        <span class="font-bold ${g.loai === 'dat_coc' ? 'text-blue-700' : 'text-emerald-700'}">${g.loai === 'dat_coc' ? '🔖 Đặt cọc' : '➕ Bổ sung'}</span>
        <b class="tabular-nums">${fmt((g.so_tien || 0) * 1000)}đ</b>
        <span class="text-[10px] px-1.5 py-0.5 rounded-full font-bold" style="background:${g.hinh_thuc === 'chuyen_khoan' ? '#dbeafe' : '#dcfce7'};color:${g.hinh_thuc === 'chuyen_khoan' ? '#1e40af' : '#166534'}">${g.hinh_thuc === 'chuyen_khoan' ? '🏦 CK' : '💵 TM'}</span>
        <span class="text-gray-400 text-xs ml-auto">${(g.ngay || '').split(' ')[0]}</span>
      </div>`).join('')
    : '<div class="px-4 py-2.5 text-xs text-gray-400">Chưa có khoản cọc nào ghi trong sổ quỹ.</div>';
  const isGdPgd = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;
  document.getElementById('eo-btn-luu').classList.toggle('hidden', !isGdPgd);
  document.getElementById('eo-btn-gui-duyet').classList.toggle('hidden', isGdPgd);
  document.getElementById('eo-footer-hint').innerHTML = isGdPgd
    ? 'Nhấn <b>Lưu</b> để xác nhận với mã PIN'
    : 'Bạn không có quyền lưu trực tiếp — <b>Gửi duyệt</b> để GĐ/PGĐ xác nhận';
}

// Tạm tính từng dòng + tổng (TL × đơn giá + công — chỉ THAM KHẢO, giá thật chốt lúc giao)
function eoTinhTien() {
  let tong = 0;
  document.getElementById('eo-item-tbody').querySelectorAll('tr').forEach(tr => {
    const tl = parseFloat(tr.querySelector('.eo-tl').value) || 0;
    const dg = parseFloat((tr.querySelector('.eo-dongia').value || '').replace(/\./g, '')) || 0;
    const tc = parseFloat((tr.querySelector('.eo-tiencong').value || '').replace(/\./g, '')) || 0;
    const tt = Math.round(tl * dg + tc);
    tong += tt;
    const o = tr.querySelector('.eo-tamtinh');
    if (o) o.textContent = tt ? fmt(tt) : '—';
  });
  const s = fmt(tong) + 'đ';
  const a = document.getElementById('eo-tamtinh');   if (a) a.textContent = s;
  const b = document.getElementById('eo-tamtinh-2'); if (b) b.textContent = s;
}

function addEoItemRow(it) {
  it = it || {};
  const tr = document.createElement('tr');
  tr.className = 'border-b border-green-50';
  tr.innerHTML = `
    <td class="px-2 py-1.5" data-label="Mô tả"><input class="w-full text-xs border-0 outline-none eo-noidung" placeholder="VD: Nhẫn trơn 1 chỉ" value="${(it.noi_dung||'').replace(/"/g,'&quot;')}"></td>
    <td class="px-2 py-1.5" data-label="Chất liệu"><input class="w-full text-xs border-0 outline-none eo-cl" placeholder="9999" value="${(it.chat_lieu||'').replace(/"/g,'&quot;')}"></td>
    <td class="px-2 py-1.5" data-label="TL ước tính (chỉ)"><input type="number" step="0.001" class="w-full text-xs border-0 outline-none text-right eo-tl" oninput="eoTinhTien()" value="${it.trong_luong_uoc_tinh||0}"></td>
    <td class="px-2 py-1.5" data-label="Đơn giá (đ/chỉ)"><input type="text" inputmode="numeric" class="w-full text-xs border-0 outline-none text-right eo-dongia" value="${formatSplitAmt(it.don_gia||0)}" oninput="onSplitAmtInput(this);eoTinhTien()"></td>
    <td class="px-2 py-1.5" data-label="Tiền công (đ)"><input type="text" inputmode="numeric" class="w-full text-xs border-0 outline-none text-right eo-tiencong" value="${formatSplitAmt(it.tien_cong||0)}" oninput="onSplitAmtInput(this);eoTinhTien()"></td>
    <td class="px-2 py-1.5" data-label="Đặt cọc (đ)"><input type="text" inputmode="numeric" class="w-full text-xs border-0 outline-none text-right eo-coc" value="${formatSplitAmt((it.tien_dat_coc||0)*1000)}" oninput="onSplitAmtInput(this)"></td>
    <td class="px-2 py-1.5 text-right" data-label="Tạm tính (đ)"><span class="eo-tamtinh text-xs font-bold text-green-800 tabular-nums">—</span></td>
    <td class="px-1 py-1.5 text-center item-entry-del"><button onclick="this.closest('tr').remove();eoTinhTien()" class="text-red-500 text-xs">✕ <span class="sm:hidden">Xóa dòng</span></button></td>`;
  document.getElementById('eo-item-tbody').appendChild(tr);
}

function saveOrderEdit() {
  const items = [];
  document.getElementById('eo-item-tbody').querySelectorAll('tr').forEach(tr => {
    const nd = tr.querySelector('.eo-noidung').value.trim();
    if (!nd) return;
    items.push({
      noi_dung: nd,
      chat_lieu: tr.querySelector('.eo-cl').value.trim(),
      trong_luong_uoc_tinh: parseFloat(tr.querySelector('.eo-tl').value) || 0,
      don_gia: parseFloat((tr.querySelector('.eo-dongia').value||'').replace(/\./g,'')) || 0,
      tien_cong: parseFloat((tr.querySelector('.eo-tiencong').value||'').replace(/\./g,'')) || 0,
      tien_dat_coc: (parseFloat((tr.querySelector('.eo-coc').value||'').replace(/\./g,'')) || 0) / 1000,
    });
  });
  const eoNgayRaw = document.getElementById('eo-ngay').value; // yyyy-mm-dd
  let eoNgay = '';
  if (eoNgayRaw) { const [y, m, d] = eoNgayRaw.split('-'); eoNgay = `${d}/${m}/${y}`; }
  askPin('Xác nhận lưu đơn đặt hàng', async (pin) => {
    const res = await fetch(`/api/pos/orders/${_editOrderId}/full`, {
      method: 'PUT', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        pin,
        khach_hang: document.getElementById('eo-kh').value.trim(),
        cccd: document.getElementById('eo-cccd').value.trim(),
        dia_chi: document.getElementById('eo-diachi').value.trim(),
        dien_thoai: document.getElementById('eo-dt').value.trim(),
        ngay_co_hang: eoNgay,
        ghi_chu: document.getElementById('eo-ghichu').value.trim(),
        items,
      })
    });
    const d = await res.json();
    if (!d.success) { alert(`❌ Lỗi: ${d.error}`); return; }
    document.getElementById('eo-modal').classList.add('hidden');
    loadOrders(); loadAlerts();
  });
}

async function submitOrderForApproval() {
  const items = [];
  document.getElementById('eo-item-tbody').querySelectorAll('tr').forEach(tr => {
    const nd = tr.querySelector('.eo-noidung').value.trim();
    if (!nd) return;
    items.push({
      noi_dung: nd,
      chat_lieu: tr.querySelector('.eo-cl').value.trim(),
      trong_luong_uoc_tinh: parseFloat(tr.querySelector('.eo-tl').value) || 0,
      don_gia: parseFloat((tr.querySelector('.eo-dongia').value||'').replace(/\./g,'')) || 0,
      tien_cong: parseFloat((tr.querySelector('.eo-tiencong').value||'').replace(/\./g,'')) || 0,
      tien_dat_coc: (parseFloat((tr.querySelector('.eo-coc').value||'').replace(/\./g,'')) || 0) / 1000,
    });
  });
  const eoNgayRaw2 = document.getElementById('eo-ngay').value; // yyyy-mm-dd
  let eoNgay2 = '';
  if (eoNgayRaw2) { const [y, m, d] = eoNgayRaw2.split('-'); eoNgay2 = `${d}/${m}/${y}`; }
  const payload = {
    khach_hang: document.getElementById('eo-kh').value.trim(),
    cccd: document.getElementById('eo-cccd').value.trim(),
    dia_chi: document.getElementById('eo-diachi').value.trim(),
    dien_thoai: document.getElementById('eo-dt').value.trim(),
    ngay_co_hang: eoNgay2,
    ghi_chu: document.getElementById('eo-ghichu').value.trim(),
    items,
  };
  const btn = document.getElementById('eo-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((() => {
          const o = _editOrderOriginal || {};
          const changes = [];
          const _cmp = (label, ov, nv) => { if (String(ov??'') !== String(nv??'')) changes.push({label, old: ov||'—', new: nv||'—'}); };
          _cmp('Khách hàng', o.khach_hang, payload.khach_hang);
          _cmp('CCCD/CMND', o.cccd, payload.cccd);
          _cmp('Địa chỉ', o.dia_chi, payload.dia_chi);
          _cmp('Điện thoại', o.dien_thoai, payload.dien_thoai);
          _cmp('Ngày có hàng', (o.ngay_co_hang||'').split(' ')[0], payload.ngay_co_hang);
          _cmp('Ghi chú', o.ghi_chu, payload.ghi_chu);
          if ((o.items||[]).length !== items.length) changes.push({label:'Số mặt hàng', old:(o.items||[]).length+' món', new:items.length+' món'});
          if (changes.length) { payload._delta = changes.map(c=>`${c.label}: ${c.old} → ${c.new}`); payload._changes = changes; }
          return { loai: 'dat_hang', phieu_id: _editOrderId, payload,
            mo_ta: `Đặt hàng #${_editOrderId} — ${changes.length ? changes.map(c=>c.label).join(', ') : 'Cập nhật thông tin'}` };
        })())
    });
    const d = await res.json();
    if (d.success) {
      document.getElementById('eo-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 deleteOrder(id) {
  if (!confirm('⚠️ Xóa đơn đặt hàng này? Thao tác không thể hoàn tác.')) return;
  askPin('Xác nhận xóa đơn đặt hàng', async (pin) => {
    const res = await fetch(`/api/pos/orders/${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; }
    loadOrders(); loadAlerts();
  });
}
</script>

<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 đơn đặt hàng đ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('.inp-chatlieu')?.value.trim() || '';
    const tl       = tr.querySelector('.inp-tl')?.value.trim() || '';
    const gia      = tr.querySelector('.inp-gia')?.value.trim() || '';
    const cong     = tr.querySelector('.inp-tiencong')?.value.trim() || '';
    let sub = [];
    if (chatlieu) sub.push(chatlieu);
    if (tl && tl !== '0') sub.push(tl + ' chỉ' + (gia && gia !== '0' ? ' × ' + gia + ' đ' : ''));
    if (cong && cong !== '0') sub.push('công ' + cong + ' đ');
    return {
      ten: tr.querySelector('.inp-noidung').value.trim(),
      sub: sub.join(' · '),
      tt:  'Cọc ' + (tr.querySelector('.inp-coc').value.trim() || '0') + ' đ',
    };
  }).filter(i => i.ten);
  return {
    ten: document.getElementById('kh-ten').value.trim(),
    sdt: document.getElementById('kh-dt').value.trim(),
    giao_dich: items.length ? {
      loai: '🛍️ Đặt lấy hàng', items,
      phu: [{label: 'Số món đặt', val: String(items.length)}],
      tong: document.getElementById('lbl-tongcoc').textContent + ' đ',
      tong_label: 'Tổng tiền đặt cọc',
    } : null,
  };
};
</script>

<!-- ── Modal sửa đơn đặt hàng — sheet trượt lên trên ĐT / dialog giữa màn hình trên máy tính,
     giống hệt modal "Sửa phiếu cầm" (pawn.html #ep-modal): header+footer cố định, phần giữa
     tự cuộn riêng, có dải tóm tắt đọc nhanh trước khi sửa. ── -->
<!-- SỬA ĐƠN ĐẶT — thiết kế lại 29/07/2026 theo mẫu Sửa phiếu cầm (ep-modal):
     sheet trượt lên trên ĐT / dialog giữa trên máy tính, thẻ section màu theo nhóm,
     thành tiền TẠM TÍNH từng dòng + tổng live, lịch sử tiền cọc chỉ-xem ngay trong
     modal. GIỮ NGUYÊN mọi id/class hook cũ (eo-*) — JS lưu/gửi duyệt không đổi. -->
<div id="eo-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-3xl max-h-[96vh] flex flex-col" style="border-top:4px solid #8b0000">

    <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 text-white" style="background:linear-gradient(135deg,#4a0000,#8b0000)">✏️</div>
        <div>
          <div class="font-black text-[18px] text-gray-900">Sửa đơn đặt hàng</div>
          <div class="text-xs text-gray-400 font-mono" id="eo-magd"></div>
        </div>
      </div>
      <button onclick="document.getElementById('eo-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>

    <div class="overflow-y-auto flex-1 px-6 py-5 space-y-5">

      <!-- ⓪ Tóm tắt đọc nhanh -->
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center">
        <div class="rounded-xl px-2 py-2 bg-gray-50"><div class="text-[10px] text-gray-400 uppercase">Trạng thái</div><div id="eo-tt" class="font-bold text-sm"></div></div>
        <div class="rounded-xl px-2 py-2 bg-green-50"><div class="text-[10px] text-green-600 uppercase">Tổng đã cọc</div><div id="eo-tongcoc" class="font-bold text-sm text-green-700"></div></div>
        <div class="rounded-xl px-2 py-2 bg-amber-50"><div class="text-[10px] text-amber-600 uppercase">Ngày đặt</div><div id="eo-ngaydat" class="font-bold text-sm text-amber-700"></div></div>
        <div class="rounded-xl px-2 py-2 bg-blue-50"><div class="text-[10px] text-blue-500 uppercase">Tạm tính hàng</div><div id="eo-tamtinh" class="font-bold text-sm text-blue-700 tabular-nums">—</div></div>
      </div>

      <!-- ① 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-1 sm: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="eo-kh" class="input-ios w-full"></div>
          <div><label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">CCCD / CMND</label><input id="eo-cccd" class="input-ios w-full font-mono"></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="eo-dt" class="input-ios w-full" 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="eo-diachi" class="input-ios w-full"></div>
        </div>
      </div>

      <!-- ② Hẹn & ghi chú -->
      <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">Hẹn giao &amp; ghi chú</span>
        </div>
        <div class="p-4 grid grid-cols-1 sm: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ó hàng</label><input id="eo-ngay" type="date" lang="vi" class="input-ios w-full font-bold"></div>
          <div><label class="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">📝 Ghi chú</label><input id="eo-ghichu" class="input-ios w-full" placeholder="Ghi chú thêm về đơn này..."></div>
        </div>
      </div>

      <!-- ③ Danh sách hàng đặt -->
      <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 đặt</span>
          </div>
          <button onclick="addEoItemRow()" 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 text-xs border-collapse item-entry-table" style="min-width:640px">
            <thead><tr style="background:#f0fdf4;border-bottom:2px solid #bbf7d0">
              <th class="px-2 py-2 text-left text-xs font-bold text-green-800 uppercase">Mô tả</th>
              <th class="px-2 py-2 text-xs font-bold text-green-800 uppercase">Chất liệu</th>
              <th class="px-2 py-2 text-xs font-bold text-green-800 uppercase">TL ước tính (chỉ)</th>
              <th class="px-2 py-2 text-xs font-bold text-green-800 uppercase">Đơn giá (đ/chỉ)</th>
              <th class="px-2 py-2 text-xs font-bold text-green-800 uppercase">Tiền công (đ)</th>
              <th class="px-2 py-2 text-xs font-bold text-green-800 uppercase">Đặt cọc (đ)</th>
              <th class="px-2 py-2 text-right text-xs font-bold text-green-800 uppercase">Tạm tính (đ)</th>
              <th></th>
            </tr></thead>
            <tbody id="eo-item-tbody"></tbody>
          </table>
        </div>
        <div class="px-4 py-2 text-right text-xs text-gray-500 border-t border-green-100" style="background:#fafffb">
          Tổng tạm tính (TL × đơn giá + công): <b id="eo-tamtinh-2" class="text-green-800 text-sm tabular-nums">0đ</b>
          <span class="text-gray-400"> — chỉ để tham khảo, giá thật chốt lúc giao hàng</span>
        </div>
      </div>

      <!-- ④ Lịch sử tiền cọc (chỉ xem) -->
      <div class="rounded-2xl border border-blue-200 overflow-hidden">
        <div class="px-4 py-2.5 flex items-center gap-2" style="background:linear-gradient(90deg,#eff6ff,#dbeafe)">
          <span class="text-base">💰</span><span class="font-bold text-sm text-blue-900 uppercase tracking-wide">Lịch sử tiền cọc</span>
          <span class="text-xs text-blue-500 font-normal">(chỉ xem — thu thêm dùng nút "💰 Bổ sung cọc" ở ⚙️ Thao tác)</span>
        </div>
        <div id="eo-coc-list" class="divide-y divide-blue-50"></div>
      </div>

    </div>

    <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="eo-footer-hint" class="text-xs text-gray-400"></div>
      <div class="flex gap-2">
        <button onclick="document.getElementById('eo-modal').classList.add('hidden')" class="btn-ios btn-ios-gray px-5">Hủy</button>
        <button id="eo-btn-gui-duyet" onclick="submitOrderForApproval()" class="btn-ios px-5 font-bold text-white hidden" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">📤 Gửi Duyệt</button>
        <button id="eo-btn-luu" onclick="saveOrderEdit()" class="btn-ios btn-ios-gold px-5">💾 Lưu</button>
      </div>
    </div>
  </div>
</div>

<!-- ── Modal ⚙️ Thao tác — gom MỌI hành động của 1 đơn đặt hàng vào 1 chỗ, giống hệt
     pawn.html #pawn-action-modal (chủ tiệm yêu cầu "học tập sửa phiếu cầm"). ── -->
<div id="order-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)closeOrderActionModal()">
  <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">⚙️ Đơn <span id="act-o-magd" class="font-mono"></span></div>
        <div class="text-red-100 text-xs truncate" id="act-o-khach"></div>
      </div>
      <button onclick="closeOrderActionModal()" class="text-white/70 hover:text-white text-2xl leading-none flex-shrink-0">×</button>
    </div>
    <div class="p-5 space-y-4">
      <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">Trạng thái</div><div id="act-o-tt" class="font-bold text-sm"></div></div>
        <div class="rounded-xl px-2 py-2 bg-green-50"><div class="text-[10px] text-green-600 uppercase">Đã cọc</div><div id="act-o-coc" class="font-bold text-sm text-green-700"></div></div>
        <div class="rounded-xl px-2 py-2 bg-amber-50"><div class="text-[10px] text-amber-600 uppercase">Hẹn giao</div><div id="act-o-hen" class="font-bold text-sm text-amber-700"></div></div>
      </div>
      <div class="grid grid-cols-2 gap-2">
        <button id="act-o-giaohang-btn" onclick="orderActionPickup()" class="btn-ios btn-ios-gold text-xs py-2.5 rounded-xl font-bold col-span-2">📦 Giao hàng</button>
        <button id="act-o-coc-btn" onclick="orderActionDeposit()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#ecfdf5;color:#15803d">💰 Bổ sung cọc</button>
        <button id="act-o-huy-btn" onclick="orderActionCancel()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#fff7ed;color:#c2410c">🚫 Hủy đơn</button>
        <button onclick="orderActionEdit()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#eff6ff;color:#1d4ed8">✏️ Sửa phiếu</button>
        <button onclick="orderActionPrint()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#fffbeb;color:#92400e">🖨️ In phiếu</button>
        <button onclick="orderActionPrintRemote()" 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-o-giaydb-btn" onclick="orderActionPrintGiayDB()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#f0fdf4;color:#166534">🖨️ In giấy đảm bảo vàng</button>
        <button id="act-o-giaydb-remote-btn" onclick="orderActionPrintGiayDBRemote()" class="btn-ios text-xs py-2.5 rounded-xl font-bold" style="background:#dcfce7;color:#166534" 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-o-hoanphieu-btn" onclick="orderActionRevert()" class="btn-ios text-xs py-2.5 rounded-xl font-bold col-span-2" style="background:#faf5ff;color:#7e22ce" title="Đưa đơn đã lấy về chưa lấy để sửa/giao lại — chỉ Giám đốc/Phó GĐ">♻️ Hoàn lại phiếu giao</button>
        <button id="act-o-del-btn" onclick="orderActionDelete()" class="btn-ios text-xs py-2.5 rounded-xl font-bold col-span-2" style="background:#fef2f2;color:#b91c1c">🗑️ Xóa phiếu</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}