{% extends "base.html" %}
{% block title %}Đặt gia công — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Đặt gia cô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}
.gc-flash { animation: gcFlash 1.6s ease; }
@keyframes gcFlash { 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 gia cô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 gia công</span>
    </button>
  </div>

  <!-- ════════════════ TAB: LẬP PHIẾU ════════════════ -->
  <div id="section-lap" class="space-y-4">
  <!-- ── LẬP PHIẾU ĐẶT GIA CÔ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 gia công (khách đặt cọc, hẹn ngày giao)</h2>
      <div class="flex items-center gap-3 flex-wrap">
        <span class="text-xs text-gray-400">Mã GC: <span id="lbl-ma-gc" 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 gia cô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 hẹn giao</label>
              <input id="inp-ngayhengiao" type="date" lang="vi" class="w-full input-ios">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bảng công việc gia công -->
    <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 công việc</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 công việc</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="gcSaveDraft()" 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="submitGiaCong()"
          class="btn-ios btn-ios-gold px-6 py-2.5">
          ✅ Lập phiếu đặt gia công
        </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="gc-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="gc-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="gc-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 giao hàng cho khách, bạn có thể ghi nhận thêm khoản thanh toán còn lại (tiền công + chênh lệch).</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 ĐANG GIA CÔ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 đang gia công</span>
      <div class="flex items-center gap-2 flex-wrap">
        <span id="lbl-danglam-count" class="text-xs text-gray-400"></span>
        <div class="flex items-center gap-1">
          <input id="inp-search-gc" 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="renderGiaCongTables()">
          <button onclick="document.getElementById('inp-search-gc').value='';renderGiaCongTables();"
            class="text-gray-400 hover:text-gray-600 text-xl leading-none font-normal" title="Xóa">×</button>
        </div>
        <a href="/api/pos/gia-cong/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="danglam-summary" class="so-tong px-4 pt-4"></div>
    <div id="danglam-grouped" class="p-4 space-y-3"></div>
  </div>

  <!-- ── LỊCH SỬ ĐÃ GIAO ── -->
  <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ử đã giao</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ã GC</th>
            <th class="text-left px-3 py-2">Khách hàng</th>
            <th class="text-left px-3 py-2">Công việc</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 giao</th>
          </tr>
        </thead>
        <tbody id="dagiao-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ã GC</th>
            <th class="text-left px-3 py-2">Khách hàng</th>
            <th class="text-left px-3 py-2">Công việc</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 HOÀN THÀNH & GIAO HÀNG ── -->
<div id="complete-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)closeComplete()">
  <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">🔨 Hoàn thành & giao hàng</h2>
      <p class="text-yellow-200 text-xs mt-0.5" id="complete-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="cp-tonghang">0</strong></div>
        <div class="flex justify-between items-center gap-2"><span>🏷️ Giảm giá (đ):</span>
          <input id="cp-giamgia" type="number" value="0" class="input-ios text-sm text-right font-bold" style="max-width:150px" oninput="cpRecalcThem()"></div>
        <div class="flex justify-between"><span>Đã đặt cọc:</span><strong id="cp-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="cp-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="addCpRow()" 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="cp-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="cp-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="cp-item-tbody"></tbody>
          </table>
          <datalist id="dl-cp-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 (tiền công + chênh lệch, nếu có)</label>
        <input id="cp-them" type="number" value="0" class="w-full input-ios text-lg font-bold text-right">
      </div>
      <div id="cp-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="cp-hinhthuc" class="input-ios cursor-pointer" onchange="onCpHtttChange()">
          <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="cp-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="cp-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="cp-split-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios text-sm w-full" oninput="onSplitAmtInput(this)"></div>
        </div>
      </div>
      <input id="cp-ghichu" type="text" placeholder="Ghi chú thêm (tùy chọn)"
        class="w-full input-ios text-sm">
      <p id="complete-msg" class="text-sm"></p>
      <div class="flex gap-3">
        <button onclick="closeComplete()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button onclick="confirmComplete()" 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 TIỀN 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 GIA CÔ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 gia cô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;
const _roleReady = (async () => { try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; } catch(e){} })();
let _allGiaCong = [];

// ── Mã giao dịch tự động ──
async function loadMaGc() {
  try {
    const r = await fetch('/api/pos/gia-cong/gen-ma-gc');
    const d = await r.json();
    document.getElementById('lbl-ma-gc').textContent = d.ma_gc;
  } 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') loadGiaCong();
}

let currentComplete = null;

function rowTemplate() {
  return `<tr class="border-b border-gray-50">
    <td class="px-3 py-2" data-label="Nội dung công việc"><input class="inp-noidung input-ios-sm w-full" placeholder="VD: Làm nhẫn nam theo mẫu tầm 2 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: 18K"></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(g) {
  if (g.canh_bao === 'da_giao')
    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">✓ Đã giao</span>`;
  if (g.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 (g.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(g.so_ngay_con_lai)} ngày</span>`;
  if (g.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 ${g.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">Đang làm</span>`;
}

function itemSummary(g) {
  if (!g.items || !g.items.length) return '—';
  return g.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 — thấy ngay không cần mở chi tiết
function itemSummaryFull(g) {
  if (!g.items || !g.items.length) return '—';
  return g.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(' · ') || '—';
}

function gcDepositBreakdown(g) {
  const list = (g.giao_dich || []).filter(gd => gd.loai === 'bo_sung');
  if (!list.length) return '';
  const parts = list.map(gd => `+${fmt((gd.so_tien||0)*1000)}đ <span class="text-gray-400">(${(gd.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ị công việc (đồng) = đơn giá × khối lượng + tiền công, cộng dồn các món.
function gcGiaTri(g) {
  return (g.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ị công việc - tiền đã cọc (tong_tien_coc lưu bằng nghìn).
function gcConLai(g) {
  const giaTri = gcGiaTri(g);
  if (giaTri <= 0) return null;
  return giaTri - (g.tong_tien_coc || 0) * 1000;
}

function gcConLaiHtml(g) {
  const cl = gcConLai(g);
  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>`;
}

// ── Gộp đơn gia cô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 groupGcByCustomer(list0) {
  const parent = list0.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();
  list0.forEach((g, i) => {
    const cccd = (g.cccd || '').trim();
    const dt = (g.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();
  list0.forEach((g, i) => {
    const r = find(i);
    if (!map.has(r)) map.set(r, []);
    map.get(r).push(g);
  });
  return [...map.values()].map(list => {
    list.sort((a, b) => b.id - a.id);
    const soLuongTheoLoai = new Map();
    list.forEach(g => (g.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(g => {
      const cl = gcConLai(g);
      if (cl !== null) { tongConLai += cl; soDonCoGia++; }
    });
    return {
      list, khach_hang: list[0].khach_hang,
      cccd: list.map(g => (g.cccd || '').trim()).find(Boolean) || '',
      dien_thoai: list.map(g => (g.dien_thoai || '').trim()).find(Boolean) || '',
      maxId: Math.max(...list.map(g => g.id)),
      tongCoc: list.reduce((s, g) => s + (g.tong_tien_coc || 0), 0),
      soHang: list.reduce((s, g) => s + (g.items || []).length, 0),
      soLuongTheoLoai: [...soLuongTheoLoai.entries()],
      tongConLai, soDonCoGia,
    };
  });
}

function _gcGroupKey(grp) {
  if (grp.cccd) return 'cccd:' + grp.cccd;
  if (grp.dien_thoai) return 'dt:' + grp.dien_thoai;
  return 'id:' + Math.min(...grp.list.map(g => g.id));
}

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

let _gcDetailOpen = {};   // nhớ đơn gia công nào đang mở rộng chi tiết (theo mã GC)
function toggleGcDetail(maGc) {
  _gcDetailOpen[maGc] = !_gcDetailOpen[maGc];
  const row = document.getElementById('gcdetail-' + maGc);
  const chev = document.getElementById('gcchev-' + maGc);
  if (row) row.classList.toggle('hidden', !_gcDetailOpen[maGc]);
  if (chev) chev.textContent = _gcDetailOpen[maGc] ? '▴' : '▾';
}

function gcDetailRow(g) {
  const open = !!_gcDetailOpen[g.ma_gc];
  const itemsHtml = (g.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>';

  return `
  <div id="gcdetail-${g.ma_gc}" 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>${(g.ngay_dat || '—').split(' ')[0]}</b></div>
      <div><span class="text-gray-400">Ngày hẹn giao:</span> <b>${(g.ngay_hen_giao || '—').split(' ')[0]}</b></div>
      <div><span class="text-gray-400">Trạng thái:</span> ${canhBaoBadge(g)}</div>
      <div><span class="text-gray-400">Tổng đã cọc:</span> <b class="text-green-700">${fmt(g.tong_tien_coc * 1000)}đ</b></div>
    </div>
    <div class="text-xs font-bold text-gray-500 mb-1">📦 Chi tiết công việc</div>
    <div class="overflow-x-auto mb-1">
      <table class="w-full text-xs">
        <thead class="text-gray-400"><tr>
          <th class="text-left px-2 py-1">Nội dung</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>
    ${g.ghi_chu ? `<div class="text-xs text-gray-500 mt-2">📝 ${g.ghi_chu}</div>` : ''}
  </div>`;
}

function _gcTicketRow(g) {
  const isDir = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  return `<div class="rounded-xl border border-gray-100 hover:bg-amber-50/60" data-ma-gc="${g.ma_gc}">
    <div class="px-3 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 cursor-pointer" onclick="toggleGcDetail('${g.ma_gc}')">
      <span id="gcchev-${g.ma_gc}" class="text-gray-400 inline-block">${_gcDetailOpen[g.ma_gc] ? '▴' : '▾'}</span>
      <span class="font-mono font-semibold text-xs">${g.ma_gc}</span>
      ${canhBaoBadge(g)}
      <span class="text-xs text-gray-500">${itemSummaryFull(g)}</span>
      <span class="text-xs ml-auto whitespace-nowrap">Cọc: <b>${fmt(g.tong_tien_coc * 1000)}đ</b></span>
      <span class="text-xs whitespace-nowrap">Còn lại: ${gcConLaiHtml(g)}</span>
      <span class="text-xs text-gray-400 whitespace-nowrap">Hẹn: ${(g.ngay_hen_giao || '—').split(' ')[0]}</span>
      <span class="flex items-center gap-1.5 whitespace-nowrap" onclick="event.stopPropagation()">
        <a href="/gia-cong/${g.id}/print" target="_blank" class="tkt-act tkt-amber" title="In phiếu đặt gia công">🖨️ In</a>
        <button onclick="printRemote('/gia-cong/${g.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>
        <button onclick='openComplete(${JSON.stringify(g)})' class="btn-ios btn-ios-gold text-xs px-3 py-1.5">Hoàn thành &amp; giao</button>
        <button onclick='openDeposit(${JSON.stringify(g)})' class="tkt-act tkt-emerald" title="Bổ sung cọc">💰 +Cọc</button>
        <button onclick='openCancelOrder(${JSON.stringify(g)})' class="tkt-act tkt-orange" title="Hủy đơn">🚫 Hủy</button>
        <button onclick='openGcEdit(${JSON.stringify(g)})' class="tkt-act tkt-blue" title="Sửa">✏️</button>${isDir ? `<button onclick='deleteGiaCong(${g.id})' class="tkt-act tkt-red" title="Xóa">🗑️</button>` : `<button onclick='xinXoaPhieu("gia_cong", ${g.id}, ${JSON.stringify(g.ma_gc||"")}, ${JSON.stringify("KH: "+(g.khach_hang||""))})' class="tkt-act tkt-orange" title="NV không tự xóa — gửi GĐ/PGĐ duyệt">📤 Xin xóa</button>`}
      </span>
    </div>
    ${gcDepositBreakdown(g) ? `<div class="px-3 pb-1.5 -mt-1">${gcDepositBreakdown(g)}</div>` : ''}
    ${gcDetailRow(g)}
  </div>`;
}

function _gcCustCard(grp) {
  const key = _gcGroupKey(grp);
  const initials = vnInitial(grp.khach_hang);
  const open = !!_gcGroupOpen[key];
  return `<div class="ios-card overflow-hidden" style="border:1px solid #fde68a">
    <div onclick="toggleGcGroup('${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">${grp.khach_hang || '—'}</div>
        <div class="text-xs text-gray-400 truncate">${grp.cccd || '(không CCCD)'}${grp.dien_thoai ? ' · ' + grp.dien_thoai : ''} · ${grp.list.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(grp.tongCoc * 1000)}đ</div>
        </div>
        <span id="gcgrp-chev-${key}" class="text-gray-400">${open ? '▴' : '▾'}</span>
      </div>
    </div>
    <div id="gcgrp-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">${grp.soHang} món · ${grp.list.length} đơn</div>
          ${grp.soLuongTheoLoai.length ? `<div class="text-xs text-gray-500 mt-1 leading-snug">${grp.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(grp.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 ${grp.tongConLai > 0 ? 'text-red-600' : 'text-green-600'}">${grp.soDonCoGia ? fmt(grp.tongConLai) + 'đ' : '—'}</div>
          ${grp.soDonCoGia < grp.list.length ? `<div class="text-xs text-gray-400 mt-1">${grp.list.length - grp.soDonCoGia} đơn chưa nhập giá, chưa tính</div>` : ''}
        </div>
      </div>
      ${grp.list.map(_gcTicketRow).join('')}
    </div>
  </div>`;
}

function renderDangLamSummary(dangLam, groups) {
  const box = document.getElementById('danglam-summary');
  if (!dangLam.length) { box.innerHTML = ''; return; }

  const soLuongTheoLoai = new Map();
  dangLam.forEach(g => (g.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 = dangLam.reduce((s, g) => s + (g.items || []).length, 0);
  const tongCoc = dangLam.reduce((s, g) => s + (g.tong_tien_coc || 0), 0);
  let tongConLai = 0, soDonCoGia = 0;
  dangLam.forEach(g => { const cl = gcConLai(g); 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 đang làm</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 · ${dangLam.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 < dangLam.length ? `<div class="text-xs text-gray-400 mt-1">${dangLam.length - soDonCoGia} đơn chưa nhập giá, chưa tính</div>` : ''}
        </div>
      </div>
    </div>`;
}

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/gia-cong');
  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 gia công sắp đến hạn / quá hạn giao</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(g => `
          <div onclick="lookupGiaCongTicket('${g.ma_gc}')" title="Bấm để xem chi tiết đơn ${g.ma_gc}"
            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>${g.ma_gc}</strong> — ${g.khach_hang} — ${itemSummary(g)} — Hẹn: ${(g.ngay_hen_giao||'').split(' ')[0]}</span>
            <span class="flex items-center gap-1.5 whitespace-nowrap">${canhBaoBadge(g)}<span class="text-red-300">→</span></span>
          </div>`).join('')}
      </div>
    </div>`;
}

function renderGiaCongTables() {
  const q = (document.getElementById('inp-search-gc')?.value || '').trim().toLowerCase();
  const match = g => !q || [g.ma_gc, g.khach_hang, g.dien_thoai].some(v => (v||'').toLowerCase().includes(q));
  const dangLam = _allGiaCong.filter(g => g.trang_thai === 'dang_lam' && match(g));
  const daGiao  = _allGiaCong.filter(g => g.trang_thai === 'da_giao'  && match(g));
  const daHuy   = _allGiaCong.filter(g => g.trang_thai === 'da_huy'   && match(g));

  document.getElementById('lbl-danglam-count').textContent = `${dangLam.length} đơn đang làm`;
  const gcGroups = groupGcByCustomer(dangLam);
  gcGroups.sort((a, b) => b.maxId - a.maxId);
  renderDangLamSummary(dangLam, gcGroups);
  document.getElementById('danglam-grouped').innerHTML = gcGroups.map(_gcCustCard).join('') ||
    '<div class="text-center text-gray-300 py-8">Không có đơn gia công nào đang làm</div>';

  document.getElementById('dagiao-tbody').innerHTML = daGiao.map(g => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-3 py-2 font-mono">${g.ma_gc}</td>
      <td class="px-3 py-2">${g.khach_hang}<div class="text-xs text-gray-400">${g.dien_thoai||''}</div></td>
      <td class="px-3 py-2">${itemSummary(g)}</td>
      <td class="px-3 py-2 text-right">${fmt(g.tong_tien_coc * 1000)}</td>
      <td class="px-3 py-2 text-right text-green-700 font-semibold">${fmt(g.so_tien_thu_them)}</td>
      <td class="px-3 py-2">${(g.ngay_giao||'—').split(' ')[0]}</td>
      <td class="px-3 py-2 text-center whitespace-nowrap"><button onclick='openGcEdit(${JSON.stringify(g)})' class="tkt-act tkt-blue">✏️</button>${(_myRole==='giam_doc'||_myRole==='pho_giam_doc') ? ` <button onclick='revertGiao(${JSON.stringify(g)})' class="tkt-act" style="background:#faf5ff;color:#7e22ce;border-color:#e9d5ff" title="Hoàn lại phiếu giao — đưa về đang làm để sửa">♻️</button> <button onclick='deleteGiaCong(${g.id})' class="tkt-act tkt-red">🗑️</button>` : ` <button onclick='xinXoaPhieu("gia_cong", ${g.id}, ${JSON.stringify(g.ma_gc||"")}, ${JSON.stringify("KH: "+(g.khach_hang||""))})' class="tkt-act tkt-orange">📤 Xin xóa</button>`}</td>
    </tr>`).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-8">Chưa có đơn gia công nào được giao</td></tr>';

  document.getElementById('dahuy-tbody').innerHTML = daHuy.map(g => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-3 py-2 font-mono">${g.ma_gc}</td>
      <td class="px-3 py-2">${g.khach_hang}<div class="text-xs text-gray-400">${g.dien_thoai||''}</div></td>
      <td class="px-3 py-2">${itemSummary(g)}</td>
      <td class="px-3 py-2 text-right">${fmt(g.tong_tien_coc * 1000)}</td>
      <td class="px-3 py-2 text-center">${g.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">${(g.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 loadGiaCong() {
  const res = await fetch('/api/pos/gia-cong');
  const data = await res.json();
  _allGiaCong = data.don_hang;
  renderGiaCongTables();
}

async function submitGiaCong() {
  const msg = document.getElementById('gc-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 công việc.'; msg.className = 'text-sm text-amber-600'; return; }

  const ngayHenRaw = document.getElementById('inp-ngayhengiao').value; // yyyy-mm-dd
  let ngayHen = '';
  if (ngayHenRaw) {
    const [y, m, d] = ngayHenRaw.split('-');
    ngayHen = `${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/gia-cong', {
    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_hen_giao: ngayHen,
      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) {
    msg.textContent = `✅ Đã lập phiếu đặt gia công ${data.ma_gc}.`;
    msg.className = 'text-sm text-green-600 font-semibold';
    document.getElementById('item-tbody').innerHTML = '';
    addRow();
    ['kh-ten','kh-cccd','kh-diachi','kh-dt','inp-ngayhengiao','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 (_gcCurDraft) { fetch('/api/form-drafts/' + _gcCurDraft, { method: 'DELETE' }).catch(() => {}); _gcCurDraft = null; }
    loadGcDrafts();
    loadAlerts(); loadGiaCong(); loadMaGc();
  } 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 cpProducts = [];
let cpPriceMap = {};
async function loadCpProducts() {
  try {
    const d = await (await fetch('/api/pos/products?status=con_hang&gon=1')).json();
    cpProducts = d.products || [];
    const dl = document.getElementById('dl-cp-products');
    if (dl) dl.innerHTML = cpProducts.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 loadCpPrices() {
  try {
    const d = await (await fetch('/api/prices')).json();
    cpPriceMap = {};
    (d.prices || []).forEach(p => { cpPriceMap[p.loai] = p.ban; });
  } catch (e) {}
}
// Giá bán mới nhất (nghìn đồng/chỉ) theo loại vàng — khớp một phần (VD "Vàng 9999" → "9999")
function cpFindGiaVang(loaiVang) {
  if (!loaiVang) return 0;
  const lo = loaiVang.replace(/^Vàng\s+/i, '').trim();
  if (cpPriceMap[lo] !== undefined) return cpPriceMap[lo];
  for (const [k, v] of Object.entries(cpPriceMap)) { if (lo === k || lo.includes(k) || k.includes(lo)) return v; }
  return 0;
}

function cpRowTemplate(it) {
  it = it || {};
  const esc = s => (s || '').toString().replace(/"/g, '&quot;');
  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="cp-mahang input-ios-sm w-24 font-mono text-xs" list="dl-cp-products" placeholder="SKU" value="${esc(it.ma_hang)}" oninput="cpOnMaInput(this)"></td>
    <td class="px-1 py-1" data-label="Tên sản phẩm"><input class="cp-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="cp-tuoi input-ios-sm w-16 text-center" placeholder="9999" value="${esc(it.loai_vang || it.tuoi)}"></td>
    <td class="px-1 py-1" data-label="TL"><input type="number" step="0.001" class="cp-tl input-ios-sm w-16 text-right" value="${tl}" oninput="recalcCpRow(this)"></td>
    <td class="px-1 py-1" data-label="KLĐ"><input type="number" step="0.001" class="cp-klda input-ios-sm w-16 text-right" value="${klda}" oninput="recalcCpRow(this)"></td>
    <td class="px-1 py-1" data-label="KLV"><input type="number" step="0.001" class="cp-klv input-ios-sm w-16 text-right" value="${klv}" oninput="recalcCpRow(this)"></td>
    <td class="px-1 py-1" data-label="Đơn giá/chỉ"><input type="number" class="cp-dg input-ios-sm w-24 text-right" value="${dg}" oninput="recalcCpRow(this)"></td>
    <td class="px-1 py-1" data-label="Tiền công"><input type="number" class="cp-cong input-ios-sm w-20 text-right" value="${cong}" oninput="recalcCpRow(this)"></td>
    <td class="px-1 py-1" data-label="Tiền đá"><input type="number" class="cp-tienda input-ios-sm w-20 text-right" value="${tienda}" oninput="recalcCpRow(this)"></td>
    <td class="px-2 py-1 text-right font-bold text-amber-700 cp-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(); cpRecalcThem();" class="text-red-400 hover:text-red-600">✕ <span class="sm:hidden">Xóa dòng</span></button></td>
  </tr>`;
}
function addCpRow(it) { document.getElementById('cp-item-tbody').insertAdjacentHTML('beforeend', cpRowTemplate(it)); }
function recalcCpRow(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('.cp-klv').value) || 0,
                              parseFloat(tr.querySelector('.cp-cong').value) || 0,
                              parseFloat(tr.querySelector('.cp-tienda').value) || 0);
    tr.querySelector('.cp-dg').value     = _r.donGia;
    tr.querySelector('.cp-cong').value   = _r.tienCong;
    tr.querySelector('.cp-tienda').value = _r.tienDa;
  }
  const klv    = parseFloat(tr.querySelector('.cp-klv').value) || 0;
  const dg     = parseFloat(tr.querySelector('.cp-dg').value) || 0;
  const cong   = parseFloat(tr.querySelector('.cp-cong').value) || 0;
  const tienda = parseFloat(tr.querySelector('.cp-tienda').value) || 0;
  tr.querySelector('.cp-tt').textContent = fmt(klv * dg + cong + tienda);
  cpRecalcThem();
}
// Tổng hàng − giảm giá − đã cọc = còn phải thu (tự điền ô "Số tiền thu thêm")
function cpRecalcThem() {
  let tong = 0;
  document.querySelectorAll('#cp-item-tbody tr').forEach(tr => {
    const klv = parseFloat(tr.querySelector('.cp-klv').value) || 0;
    const dg  = parseFloat(tr.querySelector('.cp-dg').value) || 0;
    const cong = parseFloat(tr.querySelector('.cp-cong').value) || 0;
    const da  = parseFloat(tr.querySelector('.cp-tienda').value) || 0;
    tong += klv * dg + cong + da;
  });
  const giam = parseFloat(document.getElementById('cp-giamgia').value) || 0;
  const coc  = currentComplete ? (currentComplete.tong_tien_coc || 0) * 1000 : 0;
  const conthu = Math.max(0, tong - giam - coc);
  document.getElementById('cp-tonghang').textContent = fmt(tong) + ' đ';
  document.getElementById('cp-conthu').textContent = fmt(conthu) + ' đ';
  const them = document.getElementById('cp-them');
  if (them) them.value = Math.round(conthu);
}
// Điền 1 dòng từ sản phẩm tồn kho (như fillFromProduct trang Bán) — đơn giá lấy theo bảng giá vàng hiện tại
function cpFillFromProduct(p, tr) {
  tr.dataset.productId = p.id;
  tr.dataset.loaiVang = p.loai_vang || '';
  tr.querySelector('.cp-mahang').value = p.ma_hang || '';
  tr.querySelector('.cp-ten').value = p.ten || '';
  tr.querySelector('.cp-tuoi').value = p.tuoi || p.loai_vang || '';
  tr.querySelector('.cp-tl').value = p.trong_luong || 0;
  tr.querySelector('.cp-klda').value = p.kl_da || 0;
  tr.querySelector('.cp-klv').value = p.kl_vang || 0;
  // ĐƠN GIÁ mặc định theo ĐƠN GIÁ LÚC ĐẶT GIA CÔNG, KHÔNG lấy giá vàng hiện tại: giữ nếu đã có
  // (điền sẵn từ đơn); dòng quét mới → dùng đơn giá đơn gia công; hết mới rơi về giá vàng.
  const dgEl = tr.querySelector('.cp-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 gia công CHƯA chốt đơn giá — giá thỏa thuận lúc đặt vẫn ư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 && !(_cpOrderDonGia > 0);
  if (_dungCoDinh) tr.dataset.giaCoDinh = (p.gia_ban || 0) * 1000; else delete tr.dataset.giaCoDinh;
  if (curDg <= 0) {
    const gv = cpFindGiaVang(p.loai_vang || '');
    dgEl.value = (_cpOrderDonGia > 0) ? _cpOrderDonGia
               : (_r ? _r.donGia : (gv ? gv * 1000 : 0));   // tra khong ra gia vang → de 0
  }
  tr.querySelector('.cp-cong').value   = _dungCoDinh ? _r.tienCong : (p.tien_cong || 0) * 1000;
  tr.querySelector('.cp-tienda').value = _dungCoDinh ? _r.tienDa   : (p.tien_da || 0) * 1000;
  recalcCpRow(tr.querySelector('.cp-klv'));
}
// Gõ Mã hàng khớp SKU tồn kho → tự điền cả dòng
function cpOnMaInput(input) {
  const tr = input.closest('tr');
  const val = input.value.trim().toLowerCase();
  if (!val) { delete tr.dataset.productId; return; }
  const p = cpProducts.find(x => (x.ma_hang || '').trim().toLowerCase() === val);
  if (p) cpFillFromProduct(p, tr);
  else delete tr.dataset.productId;
}
// Quét mã vạch → thêm/điền dòng (như scanProductIntoRow trang Bán)
function cpScanIntoRow(code) {
  const msg = document.getElementById('cp-scan-msg');
  const p = cpProducts.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('#cp-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('#cp-item-tbody tr:last-child');
  const trTrong = tr && !tr.dataset.productId && !tr.querySelector('.cp-mahang').value.trim() && !tr.querySelector('.cp-ten').value.trim();
  if (!trTrong) { addCpRow(); tr = document.querySelector('#cp-item-tbody tr:last-child'); }
  cpFillFromProduct(p, tr);
  msg.textContent = `✓ Đã thêm: ${p.ten || p.ma_hang}`; msg.style.color = '#16a34a';
}
function cpCollectItems() {
  const items = [];
  document.querySelectorAll('#cp-item-tbody tr').forEach(tr => {
    const ma = tr.querySelector('.cp-mahang').value.trim();
    const ten = tr.querySelector('.cp-ten').value.trim();
    if (!ten && !ma) return;
    const tuoi = tr.querySelector('.cp-tuoi').value.trim();
    const tl   = parseFloat(tr.querySelector('.cp-tl').value) || 0;
    const klda = parseFloat(tr.querySelector('.cp-klda').value) || 0;
    const klv  = parseFloat(tr.querySelector('.cp-klv').value) || 0;
    const dg   = parseFloat(tr.querySelector('.cp-dg').value) || 0;
    const cong = parseFloat(tr.querySelector('.cp-cong').value) || 0;
    const tienda = parseFloat(tr.querySelector('.cp-tienda').value) || 0;
    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,
    });
  });
  return items;
}

let _cpOrderDonGia = 0;   // đơn giá lúc ĐẶT gia công (chốt) — mặc định khi giao, không lấy giá vàng hiện tại
function openComplete(g) {
  currentComplete = g;
  _cpOrderDonGia = 0;
  (g.items || []).some(it => { const d = parseFloat(it.don_gia) || 0; if (d > 0) { _cpOrderDonGia = d; return true; } });
  document.getElementById('complete-sub').textContent = `${g.ma_gc} — ${g.khach_hang} — ${itemSummary(g)}`;
  document.getElementById('cp-coc').textContent = fmt(g.tong_tien_coc * 1000) + ' đ';
  document.getElementById('cp-them').value = 0;
  document.getElementById('cp-giamgia').value = 0;
  document.getElementById('cp-hinhthuc').value = 'tien_mat';
  document.getElementById('cp-split-tm').value = '';
  document.getElementById('cp-split-ck').value = '';
  onCpHtttChange();
  document.getElementById('cp-ghichu').value = '';
  const tb = document.getElementById('cp-item-tbody');
  tb.innerHTML = '';
  (g.items || []).forEach(it => addCpRow(it));
  if (!(g.items || []).length) addCpRow();
  document.getElementById('complete-msg').textContent = '';
  document.getElementById('cp-scan-msg').textContent = '';
  document.getElementById('cp-scan-barcode').value = '';
  loadCpProducts();   // làm mới tồn kho mỗi lần mở (có thể vừa nhập từ xưởng về)
  cpRecalcThem();
  document.getElementById('complete-modal').classList.remove('hidden');
}
function closeComplete() { document.getElementById('complete-modal').classList.add('hidden'); currentComplete = null; }
function onCpHtttChange() {
  document.getElementById('cp-split-row').style.display = document.getElementById('cp-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}

async function confirmComplete() {
  if (!currentComplete) return;
  const msg = document.getElementById('complete-msg');
  const them = document.getElementById('cp-them').value;
  const httt = document.getElementById('cp-hinhthuc').value;
  const items = cpCollectItems();
  const res = await fetch(`/api/pos/gia-cong/${currentComplete.id}/complete`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      pin: getPin(), so_tien_thu_them: them, ghi_chu_them: document.getElementById('cp-ghichu').value.trim(),
      hinh_thuc_tt: httt,
      so_tien_tien_mat: httt === 'ca_hai' ? parseSplitAmt('cp-split-tm') : 0,
      so_tien_chuyen_khoan: httt === 'ca_hai' ? parseSplitAmt('cp-split-ck') : 0,
      giam_gia: parseFloat(document.getElementById('cp-giamgia').value) || 0,
      items,
    })
  });
  const data = await res.json();
  if (data.success) {
    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(); loadGiaCong(); }, 500);
    } 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(() => { closeComplete(); loadAlerts(); loadGiaCong(); }, 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(g) {
  currentDeposit = g;
  document.getElementById('dep-sub').textContent = `${g.ma_gc} — ${g.khach_hang} — ${itemSummary(g)}`;
  document.getElementById('dep-cocht').textContent = fmt(g.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(g);
  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(g) {
  const wrap = document.getElementById('dep-history-wrap');
  const box = document.getElementById('dep-history');
  const list = (g.giao_dich || []).filter(gd => gd.loai === 'bo_sung');
  if (!list.length) { wrap.classList.add('hidden'); box.innerHTML = ''; return; }
  wrap.classList.remove('hidden');
  box.innerHTML = list.map(gd => `
    <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((gd.so_tien||0)*1000)}đ</span>
        <span class="text-xs text-gray-400 ml-1">${_htLabel(gd.hinh_thuc)} · ${(gd.ngay||'').split(' ')[0]}</span>
      </div>
      <div class="flex items-center gap-2 flex-shrink-0">
        <button onclick='openDepEdit(${gd.id}, ${gd.so_tien||0}, "${(gd.ngay||'').split(' ')[0]}", "${gd.hinh_thuc||'tien_mat'}")' class="tkt-act tkt-blue">✏️ Sửa</button>
        <button onclick="deleteDepositTxn(${gd.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/gia-cong/${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.gia_cong;
    document.getElementById('dep-cocht').textContent = fmt(data.gia_cong.tong_tien_coc * 1000) + ' đ';
    renderDepHistory(data.gia_cong);
    closeDepEdit();
    loadGiaCong(); 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/gia-cong/${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.gia_cong;
    document.getElementById('dep-cocht').textContent = fmt(data.gia_cong.tong_tien_coc * 1000) + ' đ';
    renderDepHistory(data.gia_cong);
    loadGiaCong(); 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/gia-cong/${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';
    currentDeposit = data.gia_cong;
    document.getElementById('dep-cocht').textContent = fmt(data.gia_cong.tong_tien_coc * 1000) + ' đ';
    document.getElementById('dep-sotien').value = '';
    document.getElementById('dep-split-tm').value = '';
    document.getElementById('dep-split-ck').value = '';
    renderDepHistory(data.gia_cong);
    loadAlerts(); loadGiaCong();
  } 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_gia_cong', phieu_id: currentDeposit.id, payload,
        ma_phieu: currentDeposit.ma_gc,
        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 gia công ──
let currentCancelOrder = null;
function openCancelOrder(g) {
  currentCancelOrder = g;
  document.getElementById('cxl-sub').textContent = `${g.ma_gc} — ${g.khach_hang} — ${itemSummary(g)}`;
  document.getElementById('cxl-coc').textContent = fmt(g.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_gc} 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_gc} — 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/gia-cong/${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_gc}.`;
    msg.className = 'text-sm text-green-600 font-semibold';
    setTimeout(() => { closeCancelOrder(); loadAlerts(); loadGiaCong(); }, 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 gia công (LƯU SERVER — nhiều bản, gắn người tạo, sửa tiếp/lập sau) ──
function _collectGcItems() {
  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 _gcCurDraft = null;   // id bản nháp đang sửa (null = form mới)

function _gcDraftData() {
  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_hen_giao: document.getElementById('inp-ngayhengiao').value,
    ghi_chu: document.getElementById('inp-ghichu').value,
    items: _collectGcItems(),
  };
}

function _gcResetForm() {
  document.getElementById('item-tbody').innerHTML = '';
  addRow();
  ['kh-ten','kh-cccd','kh-diachi','kh-dt','inp-ngayhengiao','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();
  _gcCurDraft = null;
}

async function gcSaveDraft() {
  const msg = document.getElementById('gc-msg');
  const data = _gcDraftData();
  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: 'gia_cong', id: _gcCurDraft, 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';
    _gcResetForm();
    loadGcDrafts();
  } catch (e) {
    msg.textContent = '❌ Không lưu được nháp: ' + e.message; msg.className = 'text-sm text-red-600';
  }
}

function _gcFillDraft(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_hen_giao) fpSet('inp-ngayhengiao', (d.ngay_hen_giao || '').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 loadGcDrafts() {
  const box = document.getElementById('gc-drafts-box');
  const list = document.getElementById('gc-drafts-list');
  try {
    const r = await fetch('/api/form-drafts?loai=gia_cong');
    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 = (_gcCurDraft == 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="resumeGcDraft(${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="deleteGcDraft(${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 resumeGcDraft(id) {
  const msg = document.getElementById('gc-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');
    _gcFillDraft((d.draft && d.draft.data) || {});
    _gcCurDraft = id;
    msg.innerHTML = `✏️ Đang sửa bản nháp. Bấm <b>Lập phiếu đặt gia công</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';
    loadGcDrafts();
    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 deleteGcDraft(id) {
  if (!confirm('Xóa bản nháp này?')) return;
  try {
    await fetch('/api/form-drafts/' + id, { method: 'DELETE' });
    if (_gcCurDraft == id) _gcCurDraft = null;
    loadGcDrafts();
  } catch (e) {}
}

addRow();
document.getElementById('inp-ngaydat').value = new Date().toISOString().slice(0, 10);
loadAlerts();
_roleReady.then(() => loadGiaCong());
loadGcDrafts();
loadMaGc();
// Nhập hàng thực giao "y hệt trang Bán": nạp tồn kho + bảng giá vàng + gắn ô quét mã 1 lần
loadCpProducts();
loadCpPrices();
try { bindBarcodeScanInput('cp-scan-barcode', code => cpScanIntoRow(code)); } catch (e) {}

// Link từ Tổng quan (?ma_gc=GC...) → cuộn tới + highlight đúng đơn gia công
async function lookupGiaCongTicket(maGc) {
  maGc = (maGc || '').trim();
  if (!maGc) return;
  showTab('theodoi');
  await _roleReady;
  await loadGiaCong();
  document.getElementById('inp-search-gc').value = '';
  renderGiaCongTables();
  setTimeout(() => {
    const el = document.querySelector(`#danglam-grouped [data-ma-gc="${maGc}"]`);
    if (!el) { alert(`⚠️ Không tìm thấy đơn gia công "${maGc}" (có thể đã giao xong).`); return; }
    const body = el.closest('[id^="gcgrp-body-"]');
    if (body && body.classList.contains('hidden')) {
      const key = body.id.replace('gcgrp-body-', '');
      _gcGroupOpen[key] = true;
      body.classList.remove('hidden');
      const ch = document.getElementById('gcgrp-chev-' + key);
      if (ch) ch.textContent = '▴';
    }
    el.scrollIntoView({behavior:'smooth', block:'center'});
    el.classList.add('gc-flash');
    setTimeout(() => el.classList.remove('gc-flash'), 1600);
  }, 200);
}
(function() {
  const maGc = new URLSearchParams(location.search).get('ma_gc');
  if (maGc) lookupGiaCongTicket(maGc);
})();

// ── Sửa / Xóa đơn gia công (giám đốc / phó GĐ) ──
let _editGcId = null;
let _editGcOriginal = null;

function openGcEdit(g) {
  _editGcId = g.id;
  _editGcOriginal = g;
  // Hiện modal TRƯỚC khi gán ô lịch (flatpickr không vẽ đúng khi phần tử còn ẩn)
  document.getElementById('eg-modal').classList.remove('hidden');
  document.getElementById('eg-magd').textContent = g.ma_gc || '';
  document.getElementById('eg-tt').innerHTML =
    g.trang_thai === 'da_giao' ? '<span class="text-green-700">✅ Đã giao</span>'
    : g.trang_thai === 'da_huy' ? '<span class="text-red-600">🚫 Đã hủy</span>'
    : '<span class="text-amber-700">🔨 Đang làm</span>';
  document.getElementById('eg-tongcoc').textContent = fmt((g.tong_tien_coc || 0) * 1000) + 'đ';
  document.getElementById('eg-ngaydat').textContent = (g.ngay_dat || '—').split(' ')[0];
  document.getElementById('eg-kh').value = g.khach_hang || '';
  document.getElementById('eg-cccd').value = g.cccd || '';
  document.getElementById('eg-diachi').value = g.dia_chi || '';
  document.getElementById('eg-dt').value = g.dien_thoai || '';
  // Ô ngày nay là LỊCH CHỌN (flatpickr) — dd/mm/yyyy trong DB → yyyy-mm-dd qua fpSet
  const [gd_, gm_, gy_] = ((g.ngay_hen_giao || '').split(' ')[0]).split('/');
  fpSet('eg-ngay', (gd_ && gm_ && gy_) ? `${gy_}-${gm_}-${gd_}` : '');
  document.getElementById('eg-ghichu').value = g.ghi_chu || '';
  const tbody = document.getElementById('eg-item-tbody');
  tbody.innerHTML = '';
  (g.items || []).forEach(it => addEgItemRow(it));
  if (!(g.items||[]).length) addEgItemRow();
  egTinhTien();
  // Lịch sử tiền cọc (chỉ xem)
  const gds = (g.giao_dich || []).filter(x => x.loai === 'dat_coc' || x.loai === 'bo_sung');
  document.getElementById('eg-coc-list').innerHTML = gds.length
    ? gds.map(x => `<div class="px-4 py-2 flex items-center gap-2 text-sm">
        <span class="font-bold ${x.loai === 'dat_coc' ? 'text-blue-700' : 'text-emerald-700'}">${x.loai === 'dat_coc' ? '🔖 Đặt cọc' : '➕ Bổ sung'}</span>
        <b class="tabular-nums">${fmt((x.so_tien || 0) * 1000)}đ</b>
        <span class="text-[10px] px-1.5 py-0.5 rounded-full font-bold" style="background:${x.hinh_thuc === 'chuyen_khoan' ? '#dbeafe' : '#dcfce7'};color:${x.hinh_thuc === 'chuyen_khoan' ? '#1e40af' : '#166534'}">${x.hinh_thuc === 'chuyen_khoan' ? '🏦 CK' : '💵 TM'}</span>
        <span class="text-gray-400 text-xs ml-auto">${(x.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('eg-btn-luu').classList.toggle('hidden', !isGdPgd);
  document.getElementById('eg-btn-gui-duyet').classList.toggle('hidden', isGdPgd);
  document.getElementById('eg-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 — tham khảo, giá thật chốt lúc giao)
function egTinhTien() {
  let tong = 0;
  document.getElementById('eg-item-tbody').querySelectorAll('tr').forEach(tr => {
    const tl = parseFloat(tr.querySelector('.eg-tl').value) || 0;
    const dg = parseFloat((tr.querySelector('.eg-dongia').value || '').replace(/\./g, '')) || 0;
    const tc = parseFloat((tr.querySelector('.eg-tiencong').value || '').replace(/\./g, '')) || 0;
    const tt = Math.round(tl * dg + tc);
    tong += tt;
    const o = tr.querySelector('.eg-tamtinh');
    if (o) o.textContent = tt ? fmt(tt) : '—';
  });
  const s = fmt(tong) + 'đ';
  const a = document.getElementById('eg-tamtinh');   if (a) a.textContent = s;
  const b = document.getElementById('eg-tamtinh-2'); if (b) b.textContent = s;
}

// Ô ngày hẹn giờ trả yyyy-mm-dd (lịch chọn) — quy về dd/mm/yyyy như DB lưu
function egNgayDmy() {
  const v = (document.getElementById('eg-ngay').value || '').trim();
  if (!v) return '';
  const [y, m, d] = v.split('-');
  return (y && m && d) ? `${d}/${m}/${y}` : v;
}

function addEgItemRow(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 eg-noidung" placeholder="VD: Đánh bóng lắc tay" 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 eg-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 eg-tl" oninput="egTinhTien()" 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 eg-dongia" value="${formatSplitAmt(it.don_gia||0)}" oninput="onSplitAmtInput(this);egTinhTien()"></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 eg-tiencong" value="${formatSplitAmt(it.tien_cong||0)}" oninput="onSplitAmtInput(this);egTinhTien()"></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 eg-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="eg-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();egTinhTien()" class="text-red-500 text-xs">✕ <span class="sm:hidden">Xóa dòng</span></button></td>`;
  document.getElementById('eg-item-tbody').appendChild(tr);
}

function saveGcEdit() {
  const items = [];
  document.getElementById('eg-item-tbody').querySelectorAll('tr').forEach(tr => {
    const nd = tr.querySelector('.eg-noidung').value.trim();
    if (!nd) return;
    items.push({
      noi_dung: nd,
      chat_lieu: tr.querySelector('.eg-cl').value.trim(),
      trong_luong_uoc_tinh: parseFloat(tr.querySelector('.eg-tl').value) || 0,
      don_gia: parseFloat((tr.querySelector('.eg-dongia').value||'').replace(/\./g,'')) || 0,
      tien_cong: parseFloat((tr.querySelector('.eg-tiencong').value||'').replace(/\./g,'')) || 0,
      tien_dat_coc: (parseFloat((tr.querySelector('.eg-coc').value||'').replace(/\./g,'')) || 0) / 1000,
    });
  });
  askPin('Xác nhận lưu đơn gia công', async (pin) => {
    const res = await fetch(`/api/pos/gia-cong/${_editGcId}/full`, {
      method: 'PUT', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        pin,
        khach_hang: document.getElementById('eg-kh').value.trim(),
        cccd: document.getElementById('eg-cccd').value.trim(),
        dia_chi: document.getElementById('eg-diachi').value.trim(),
        dien_thoai: document.getElementById('eg-dt').value.trim(),
        ngay_hen_giao: egNgayDmy(),
        ghi_chu: document.getElementById('eg-ghichu').value.trim(),
        items,
      })
    });
    const d = await res.json();
    if (!d.success) { alert(`❌ Lỗi: ${d.error}`); return; }
    document.getElementById('eg-modal').classList.add('hidden');
    loadGiaCong(); loadAlerts();
  });
}

async function submitGcForApproval() {
  const items = [];
  document.getElementById('eg-item-tbody').querySelectorAll('tr').forEach(tr => {
    const nd = tr.querySelector('.eg-noidung').value.trim();
    if (!nd) return;
    items.push({
      noi_dung: nd,
      chat_lieu: tr.querySelector('.eg-cl').value.trim(),
      trong_luong_uoc_tinh: parseFloat(tr.querySelector('.eg-tl').value) || 0,
      don_gia: parseFloat((tr.querySelector('.eg-dongia').value||'').replace(/\./g,'')) || 0,
      tien_cong: parseFloat((tr.querySelector('.eg-tiencong').value||'').replace(/\./g,'')) || 0,
      tien_dat_coc: (parseFloat((tr.querySelector('.eg-coc').value||'').replace(/\./g,'')) || 0) / 1000,
    });
  });
  const payload = {
    khach_hang: document.getElementById('eg-kh').value.trim(),
    cccd: document.getElementById('eg-cccd').value.trim(),
    dia_chi: document.getElementById('eg-diachi').value.trim(),
    dien_thoai: document.getElementById('eg-dt').value.trim(),
    ngay_hen_giao: egNgayDmy(),
    ghi_chu: document.getElementById('eg-ghichu').value.trim(),
    items,
  };
  const btn = document.getElementById('eg-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 = _editGcOriginal || {};
          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 hẹn giao', (o.ngay_hen_giao||'').split(' ')[0], payload.ngay_hen_giao);
          _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: 'gia_cong', phieu_id: _editGcId, payload,
            mo_ta: `Gia công #${_editGcId} — ${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('eg-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 deleteGiaCong(id) {
  if (!confirm('⚠️ Xóa đơn gia công này? Thao tác không thể hoàn tác.')) return;
  askPin('Xác nhận xóa đơn gia công', async (pin) => {
    const res = await fetch(`/api/pos/gia-cong/${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; }
    loadGiaCong(); loadAlerts();
  });
}
// HOÀN LẠI PHIẾU GIAO gia công (GĐ/PGĐ): đưa đơn ĐÃ GIAO về ĐANG LÀM để sửa/giao lại.
function revertGiao(g) {
  if (!g) return;
  if (!confirm(`♻️ Hoàn lại phiếu giao đơn ${g.ma_gc}?\n\n• Hủy hóa đơn giao đã lập → sản phẩm trả về kho.\n• Đưa đơn về "ĐANG LÀM" để 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/gia-cong/${g.id}/revert-giao`, {
      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 ${g.ma_gc} về "Đang làm". Tiền cọc giữ nguyên.`);
    loadGiaCong(); loadAlerts();
  });
}
</script>

<!-- ── Modal sửa đơn gia công ── -->
<!-- SỬA ĐƠN GIA CÔNG — 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, tạm tính
     từng dòng + tổng live, lịch sử tiền cọc chỉ-xem. Ô ngày hẹn nâng từ gõ tay
     DD/MM/YYYY lên LỊCH CHỌN (type=date + fpSet). Giữ nguyên id/class hook eg-*. -->
<div id="eg-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 gia công</div>
          <div class="text-xs text-gray-400 font-mono" id="eg-magd"></div>
        </div>
      </div>
      <button onclick="document.getElementById('eg-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="eg-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="eg-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="eg-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="eg-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="eg-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="eg-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="eg-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="eg-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 hẹn giao</label><input id="eg-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="eg-ghichu" class="input-ios w-full" placeholder="Ghi chú thêm về đơn này..."></div>
        </div>
      </div>

      <!-- ③ Danh sách công việc gia công -->
      <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 công việc gia công</span>
          </div>
          <button onclick="addEgItemRow()" 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="eg-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="eg-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</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")</span>
        </div>
        <div id="eg-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="eg-footer-hint" class="text-xs text-gray-400"></div>
      <div class="flex gap-2">
        <button onclick="document.getElementById('eg-modal').classList.add('hidden')" class="btn-ios btn-ios-gray px-5">Hủy</button>
        <button id="eg-btn-gui-duyet" onclick="submitGcForApproval()" class="btn-ios px-5 font-bold text-white hidden" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">📤 Gửi Duyệt</button>
        <button id="eg-btn-luu" onclick="saveGcEdit()" class="btn-ios btn-ios-gold px-5">💾 Lưu</button>
      </div>
    </div>
  </div>
</div>

<script>
// ── Autocomplete khách hàng từ CRM ──
(function() {
  let _crmTimer = null, _crmDropEl = null, _crmAnchor = null;
  function _dropPos(el) {
    const r = el.getBoundingClientRect();
    return { top: r.bottom + 4, left: r.left, width: Math.max(r.width, 280) };
  }
  function _removeDrop() {
    if (_crmDropEl) { _crmDropEl.remove(); _crmDropEl = null; }
    _crmAnchor = null;
  }
  function _getOrCreateDrop(el) {
    if (!_crmDropEl) {
      const d = document.createElement('div');
      d.style.cssText = 'position:fixed;z-index:99999;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.15);max-width:440px;max-height:240px;overflow-y:auto;';
      document.body.appendChild(d); _crmDropEl = d;
    }
    const p = _dropPos(el);
    Object.assign(_crmDropEl.style, { top: p.top+'px', left: p.left+'px', width: p.width+'px' });
    return _crmDropEl;
  }
  function _fillCustomer(c) {
    document.getElementById('kh-ten').value    = c.ho_ten     || '';
    document.getElementById('kh-diachi').value = c.dia_chi    || '';
    document.getElementById('kh-dt').value     = c.dien_thoai || '';
    _removeDrop();
  }
  function _renderDrop(customers, el) {
    if (!customers.length) { _removeDrop(); return; }
    const d = _getOrCreateDrop(el);
    d.innerHTML = '';
    customers.forEach(c => {
      const row = document.createElement('div');
      row.style.cssText = 'padding:10px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;font-size:13px;line-height:1.5;';
      row.innerHTML = `<div style="font-weight:600;color:#1e293b">${c.ho_ten||''}</div>`
        + `<div style="color:#94a3b8;font-size:11px">${[c.dien_thoai,c.cccd,c.dia_chi].filter(Boolean).join(' · ')}</div>`;
      row.addEventListener('mousedown', e => { e.preventDefault(); _fillCustomer(c); });
      row.addEventListener('mouseover', () => row.style.background = '#fffbeb');
      row.addEventListener('mouseout',  () => row.style.background = '');
      d.appendChild(row);
    });
    window.vpPlaceDrop(d, el, 280);   // định vị an toàn cho ĐT (không đè ô đang gõ)
  }
  window._crmSuggest = function(el) {
    const q = el.value.trim(); _crmAnchor = el; clearTimeout(_crmTimer);
    if (q.length < 1) { _removeDrop(); return; }
    _crmTimer = setTimeout(async () => {
      try {
        const res = await fetch('/api/crm/search-lite?q=' + encodeURIComponent(q));
        if (!res.ok) return;
        const data = await res.json();
        if (_crmAnchor === el) _renderDrop(data.customers || [], el);
      } catch(e) {}
    }, 180);
  };
  window._crmBlur = function() { setTimeout(_removeDrop, 200); };
  document.addEventListener('click', e => {
    if (_crmDropEl && !_crmDropEl.contains(e.target)) _removeDrop();
  });
})();

// ── Màn hình khách: hiện phiếu gia cô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 gia công', items,
      phu: [{label: 'Số món gia công', val: String(items.length)}],
      tong: document.getElementById('lbl-tongcoc').textContent + ' đ',
      tong_label: 'Tổng tiền đặt cọc',
    } : null,
  };
};
</script>
{% endblock %}