{% extends "base.html" %}
{% block title %}Sổ quỹ — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Sổ quỹ{% endblock %}
{% block extra_style %}
.cb-kieu-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:14px;
  border:1.5px solid #e5e7eb;background:#fff;font-weight:800;font-size:14px;color:#1f2937;text-align:left;transition:all .15s}
.cb-kieu-btn small{font-weight:600;font-size:11px;color:#6b7280}
.cb-kieu-btn:active{transform:scale(.97)}
.cb-kieu-btn.dang-chon{border-color:#b45309;background:#fffbeb;box-shadow:0 0 0 3px #fde68a}
{% endblock %}

{% block content %}

  <!-- ── SUMMARY STRIP ── -->
  <div id="summary-bar" class="so-tong grid grid-cols-1 sm:grid-cols-3 gap-3"></div>

  <!-- ── SECTION TILES ── -->
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">

    <button class="sec-tile so-tong" data-sec="baocao" onclick="secOpen('baocao')"
      style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border-color:#fde68a">
      <span class="text-3xl leading-none">📊</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Báo cáo quỹ</span>
      <span class="text-xs text-amber-700/80">Cập nhật real-time</span>
    </button>

    <button class="sec-tile" id="tile-kiemtien" data-sec="kiemtien" onclick="secOpen('kiemtien')"
      style="background:linear-gradient(135deg,#eff6ff,#f0f9ff);border-color:#bfdbfe">
      <span class="text-3xl leading-none">🧮</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Kiểm tiền</span>
      <span class="text-xs text-blue-700/80">Bàn giao ca</span>
    </button>

    <button class="sec-tile" data-sec="demtien" onclick="secOpen('demtien')"
      style="background:linear-gradient(135deg,#f0fdfa,#ccfbf1);border-color:#99f6e4">
      <span class="text-3xl leading-none">💵</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Đếm tiền nhanh</span>
      <span class="text-xs text-teal-700/80">Không lưu lịch sử</span>
    </button>

    <button class="sec-tile" data-sec="lichsu" onclick="secOpen('lichsu')"
      style="background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-color:#d8b4fe">
      <span class="text-3xl leading-none">📜</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Lịch sử phiếu</span>
      <span class="text-xs text-purple-700/80">Kiểm tiền / bàn giao</span>
    </button>

    <button class="sec-tile" data-sec="ghiso" onclick="secOpen('ghiso')"
      style="background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:#86efac">
      <span class="text-3xl leading-none">➕</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Ghi sổ quỹ</span>
      <span class="text-xs text-green-700/80">Thủ công</span>
    </button>

    <button class="sec-tile" data-sec="giaodich" onclick="secOpen('giaodich')"
      style="background:linear-gradient(135deg,#fff1f2,#ffe4e6);border-color:#fecdd3">
      <span class="text-3xl leading-none">💰</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Giao dịch</span>
      <span class="text-xs text-rose-700/80">Gần đây</span>
    </button>

    <button class="sec-tile" data-sec="hangmuc" onclick="secOpen('hangmuc')"
      style="background:linear-gradient(135deg,#fefce8,#fef9c3);border-color:#fde047">
      <span class="text-3xl leading-none">📊</span>
      <span class="font-bold text-gray-800 text-sm mt-1">Chi phí theo hạng mục</span>
      <span class="text-xs text-yellow-800/80">Thuê nhà · Điện · Xăng...</span>
    </button>

  </div>

  <!-- ══════════════════════════════════════════════════════════
       SECTION PANELS
  ══════════════════════════════════════════════════════════ -->

  <!-- 1 ── Báo cáo quỹ ── -->
  <div id="sec-baocao" class="sec-panel so-tong hidden 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">📊 Báo cáo quỹ</span>
      <span class="text-xs text-gray-400" id="rep-updated"></span>
    </div>
    <div class="p-5 space-y-4">
      <div id="rep-canhbao-gio" class="hidden ios-card p-4 text-sm" style="background:linear-gradient(135deg,#fef2f2,#fff1f2);border:1px solid #fecaca"></div>
      <div class="ios-card p-3 flex flex-wrap items-center justify-between gap-2 text-sm" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
        <div>
          <span class="font-semibold text-blue-700">🌅 Quỹ đầu ca:</span>
          <span class="font-black text-blue-700" id="rep-dauca-sotien">0 đ</span>
          <span class="text-xs text-gray-400 ml-1" id="rep-dauca-info"></span>
        </div>
        <button onclick="secOpen('kiemtien')" class="text-xs font-bold text-amber-700 underline whitespace-nowrap">🧮 Kiểm tiền bàn giao ca →</button>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="ios-card p-4">
          <div class="text-xs text-gray-400 uppercase font-semibold">💵 Tồn quỹ tiền mặt</div>
          <div class="text-xl font-black text-gray-700 mt-0.5" id="rep-ton-tienmat">0 đ</div>
          <div class="text-[11px] text-gray-400 mt-1" id="rep-tienmat-detail"></div>
        </div>
        <div class="ios-card p-4">
          <div class="text-xs text-gray-400 uppercase font-semibold">🏦 Tồn quỹ chuyển khoản</div>
          <div class="text-xl font-black text-gray-700 mt-0.5" id="rep-ton-ck">0 đ</div>
        </div>
        <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
          <div class="text-xs text-amber-600/80 uppercase font-semibold">💰 Tổng tồn quỹ</div>
          <div class="text-xl font-black text-amber-700 mt-0.5" id="rep-ton-tong">0 đ</div>
        </div>
      </div>
      <div class="rounded-2xl border border-gray-100 overflow-hidden 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-4 py-2">Kỳ</th>
              <th class="text-right px-4 py-2">Thu</th>
              <th class="text-right px-4 py-2">Chi</th>
              <th class="text-right px-4 py-2">Chênh lệch</th>
            </tr>
          </thead>
          <tbody id="rep-ky-tbody"></tbody>
        </table>
      </div>
      <div>
        <div class="font-bold text-gray-700 text-sm mb-2">📅 7 ngày gần nhất</div>
        <div class="rounded-2xl border border-gray-100 overflow-hidden 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-4 py-2">Ngày</th>
                <th class="text-right px-4 py-2">Thu</th>
                <th class="text-right px-4 py-2">Chi</th>
                <th class="text-right px-4 py-2">Chênh lệch</th>
              </tr>
            </thead>
            <tbody id="rep-day-tbody"></tbody>
          </table>
        </div>
      </div>
      <div>
        <div class="font-bold text-gray-700 text-sm mb-2">🔍 Đối chiếu cuối ca / chuyển ca gần nhất</div>
        <div id="rep-doichieu" class="ios-card p-4 text-sm text-gray-400">Chưa có phiếu kiểm tiền cuối ca nào.</div>
      </div>
    </div>
  </div>

  <!-- 2 ── Kiểm tiền — bàn giao ca ── -->
  <div id="sec-kiemtien" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
      🧮 Kiểm tiền — bàn giao ca
    </div>
    <div id="kiem-tien" class="p-5 space-y-4">
      <!-- Bản nháp lưu trên SERVER (27/07/2026) — nhiều bản, máy nào cũng mở tiếp được -->
      <div id="cc-drafts-box"></div>
      <div id="cc-draft-banner" class="hidden cc-dr-banner">
        <span>✏️ Đang sửa một <b>bản nháp</b> — bấm <b>Cập nhật nháp</b> để lưu tiếp,
              hoặc <b>Lưu phiếu kiểm tiền</b> để chốt chính thức.</span>
        <button type="button" class="tkt-act tkt-amber" onclick="ccBoSuaDraft()">❌ Bỏ sửa, làm bản mới</button>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Loại phiếu</label>
          <select id="cc-sel-loai" onchange="ccOnLoaiChange()" class="w-full input-ios cursor-pointer font-bold">
            <option value="dau_ca">🌅 Đầu ca — kiểm tiền nhận bàn giao</option>
            <option value="cuoi_ca">🌇 Cuối ca — kiểm tiền giao ca / chốt quỹ</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày ca</label>
          <input id="cc-inp-ngay" type="date" lang="vi" placeholder="Chọn ngày" class="w-full input-ios">
        </div>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tên ca <span class="normal-case font-normal text-gray-400">— bấm + để lưu tên hay dùng, lần sau chỉ việc chọn</span></label>
        <input id="cc-inp-ca" type="text" placeholder="VD: Ca sáng" class="w-full input-ios">
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người kiểm đếm</label>
          <input id="cc-inp-nhanvien" type="text" placeholder="Tên nhân viên" class="w-full input-ios">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người giao ca</label>
          <input id="cc-inp-giao" type="text" placeholder="Tên người giao (tùy chọn)" class="w-full input-ios">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người nhận ca</label>
          <input id="cc-inp-nhan" type="text" placeholder="Tên người nhận (tùy chọn)" class="w-full input-ios">
        </div>
      </div>
      <div class="rounded-2xl border border-gray-100 overflow-hidden 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ệnh giá</th>
              <th class="text-right px-3 py-2">Số tờ</th>
              <th class="text-right px-3 py-2">Thành tiền</th>
            </tr>
          </thead>
          <tbody id="cc-denom-tbody"></tbody>
          <tfoot>
            <tr class="border-t border-gray-100 bg-gray-50">
              <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ / xu khác (đồng)</td>
              <td class="px-3 py-2 text-right">
                <input id="cc-inp-tienle" type="number" step="100" value="0" oninput="ccRecalc()"
                  class="input-ios-sm w-28 text-right">
              </td>
              <td class="px-3 py-2 text-right font-semibold" id="cc-lbl-tienle-tt">0</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
          <div class="text-xs text-amber-600/80 uppercase font-semibold">Tổng kiểm đếm thực tế <span class="font-normal text-amber-500/70">(chưa lưu)</span></div>
          <div class="text-2xl font-black text-amber-700 mt-0.5" id="cc-lbl-tong-dem">0</div>
          <div class="text-xs text-amber-600/70">đồng</div>
        </div>
        <div class="ios-card p-4">
          <div class="text-xs text-gray-400 uppercase font-semibold">Tổng theo sổ quỹ (dự kiến)</div>
          <div class="text-2xl font-black text-gray-700 mt-0.5" id="cc-lbl-tong-ht">—</div>
          <div class="text-xs text-gray-400" id="cc-sub-tong-ht">đồng</div>
        </div>
        <div class="ios-card p-4" id="cc-box-chenhlech">
          <div class="text-xs uppercase font-semibold" id="cc-lbl-chenhlech-title">Chênh lệch</div>
          <div class="text-2xl font-black mt-0.5" id="cc-lbl-chenhlech">—</div>
          <div class="text-xs" id="cc-sub-chenhlech">đồng</div>
        </div>
      </div>
      <div id="cc-breakdown"></div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ghi chú</label>
        <input id="cc-inp-ghichu" type="text" placeholder="Ghi chú thêm (nếu có chênh lệch, nêu lý do...)" class="w-full input-ios">
      </div>
      <div class="flex items-center gap-3 flex-wrap">
        <button onclick="ccSubmit()" class="btn-ios btn-ios-gold px-6 py-2.5">✅ Lưu phiếu kiểm tiền</button>
        <button id="cc-btn-luunhap" onclick="ccSaveDraft()"
                class="btn-ios btn-ios-secondary px-5 py-2.5">💾 Lưu nháp &amp; làm bản mới</button>
        <span id="cc-msg" class="text-sm"></span>
      </div>
    </div>
  </div>

  <!-- 3 ── Đếm tiền nhanh ── -->
  <div id="sec-demtien" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#f0fdfa,#ccfbf1)">
      💵 Đếm tiền nhanh <span class="text-xs font-normal text-teal-700/70">(lưu từng lần đếm — không ảnh hưởng sổ quỹ / tồn quỹ)</span>
    </div>
    <div class="p-5 space-y-4">
      <div class="rounded-2xl border border-gray-100 overflow-hidden 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ệnh giá</th>
              <th class="text-right px-3 py-2">Số tờ</th>
              <th class="text-right px-3 py-2">Thành tiền</th>
            </tr>
          </thead>
          <tbody id="qc-denom-tbody"></tbody>
          <tfoot>
            <tr class="border-t border-gray-100 bg-gray-50">
              <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ / xu khác (đồng)</td>
              <td class="px-3 py-2 text-right">
                <input id="qc-inp-tienle" type="number" step="100" value="0" oninput="qcRecalc()"
                  class="input-ios-sm w-28 text-right">
              </td>
              <td class="px-3 py-2 text-right font-semibold" id="qc-lbl-tienle-tt">0</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="flex items-center justify-between gap-3 flex-wrap">
        <div class="ios-card p-4" style="background:linear-gradient(135deg,#f0fdfa,#ccfbf1)">
          <div class="text-xs text-teal-700/80 uppercase font-semibold">Tổng cộng</div>
          <div class="text-2xl font-black text-teal-700 mt-0.5" id="qc-lbl-tong">0</div>
          <div class="text-xs text-teal-600/70">đồng</div>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
          <button onclick="qcSave()" id="qc-btn-luu" class="btn-ios btn-ios-gold px-5 py-2.5">💾 Lưu lần đếm này</button>
          <button onclick="qcReset()" class="btn-ios btn-ios-secondary px-5 py-2.5">🔄 Làm mới</button>
        </div>
      </div>
      <input id="qc-inp-ghichu" type="text" maxlength="200" placeholder="Ghi chú cho lần đếm (tùy chọn) — VD: đếm két sáng" class="w-full input-ios">
      <div id="qc-msg" class="text-sm"></div>
      <div class="qc-ls">
        <div class="qc-ls-dau">
          <span style="display:inline-flex;align-items:center;gap:6px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:18px;height:18px;display:block;flex-shrink:0" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg> Lịch sử đếm tiền nhanh</span>
          <span id="qc-ls-dem" class="qc-ls-dem"></span>
        </div>
        <div id="qc-ls-list" class="qc-ls-list"><div class="qc-ls-trong">Đang tải…</div></div>
        <div id="qc-ls-them" class="qc-ls-them"></div>
      </div>
    </div>
  </div>

  <!-- 4 ── Lịch sử phiếu kiểm tiền ── -->
  <div id="sec-lichsu" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#faf5ff,#f3e8ff)">
      📜 Lịch sử phiếu kiểm tiền / bàn giao ca
    </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-4 py-2">Thời gian</th>
            <th class="text-left px-4 py-2">Loại</th>
            <th class="text-left px-4 py-2">Ca</th>
            <th class="text-left px-4 py-2">Người kiểm / Giao → Nhận</th>
            <th class="text-right px-4 py-2">Kiểm đếm</th>
            <th class="text-right px-4 py-2">Sổ quỹ</th>
            <th class="text-right px-4 py-2">Chênh lệch</th>
            <th class="text-center px-4 py-2">Phiếu</th>
          </tr>
        </thead>
        <tbody id="cc-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- 5 ── Ghi sổ quỹ thủ công ── -->
  <div id="sec-ghiso" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7)">
      <span class="font-extrabold text-gray-800">➕ Ghi sổ quỹ thủ công</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 class="p-5 space-y-4">
      <!-- GHI THEO NÚT NGHIỆP VỤ (21/09/2026): mỗi nút MỘT nghĩa — máy chủ tự quyết khoản
           tiền vào mục nào của báo cáo, nhân viên không tự chọn phân loại nữa. -->
      <div>
        <div class="text-xs font-bold text-slate-500 mb-1.5">1. Khoản tiền này là việc gì?</div>
        <div id="cb-kieu-row" class="grid grid-cols-2 sm:grid-cols-3 gap-2">
          <button type="button" data-kieu-btn="chi_phi"  onclick="cbChonKieu('chi_phi')"  class="cb-kieu-btn">🧾 Chi phí<small>điện nước, chợ, lương...</small></button>
          <button type="button" data-kieu-btn="thu_khac" onclick="cbChonKieu('thu_khac')" class="cb-kieu-btn">💰 Thu khác<small>sửa vàng, làm mới...</small></button>
          <button type="button" data-kieu-btn="noi_bo"   onclick="cbChonKieu('noi_bo')"   class="cb-kieu-btn">🔁 Chuyển nội bộ<small>quỹ ↔ két ↔ ngân hàng ↔ TK cá nhân</small></button>
          <button type="button" data-kieu-btn="doi_tien" onclick="cbChonKieu('doi_tien')" class="cb-kieu-btn">🤝 Đổi tiền cho khách<small>tiền mặt ↔ chuyển khoản</small></button>
          <button type="button" data-kieu-btn="ho_khach" onclick="cbChonKieu('ho_khach')" class="cb-kieu-btn">↩️ Tiền thừa của khách<small>trả lại / khách đưa thừa</small></button>
          {% if session.get('nv_role') == 'giam_doc' %}
          <button type="button" data-kieu-btn="chu_so_huu" onclick="cbChonKieu('chu_so_huu')" class="cb-kieu-btn">👤 Chủ tiệm nộp / rút<small>chỉ giám đốc</small></button>
          {% endif %}
          {% if session.get('nv_role') in ('giam_doc', 'pho_giam_doc') %}
          <button type="button" data-kieu-btn="nang_cao" onclick="cbChonKieu('nang_cao')" class="cb-kieu-btn">⚙️ Nâng cao<small>tự chọn thu/chi (GĐ, PGĐ)</small></button>
          {% endif %}
        </div>
        <div class="text-[11px] text-slate-500 mt-1.5">🛒 Mua vàng của khách, bán hàng, cầm đồ: làm ở trang
          <a href="/purchase-form" class="underline text-blue-700">Mua hàng</a> /
          <a href="/pos" class="underline text-blue-700">Bán hàng</a> /
          <a href="/pawn" class="underline text-blue-700">Cầm đồ</a> — không ghi tay ở đây, để hàng vào đúng tồn kho.</div>
      </div>
      <div id="cb-nv-khung" class="hidden space-y-3">
        <div class="text-xs font-bold text-slate-500">2. Điền thông tin</div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <select id="nv-khoan-chi" data-kieu="chi_phi" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Chọn khoản chi —</option>
            {% for k in khoan_chi_phi %}<option value="{{ k.ma }}">{{ k.nhan }}</option>{% endfor %}
          </select>
          <select id="nv-khoan-thu" data-kieu="thu_khac" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Chọn khoản thu —</option>
            {% for k in khoan_thu_khac %}<option value="{{ k.ma }}">{{ k.nhan }}</option>{% endfor %}
          </select>
          <select id="nv-tu" data-kieu="noi_bo" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Lấy tiền TỪ —</option>
            {% for n in noi_cat_tien %}<option value="{{ n.ma }}">Từ: {{ n.nhan }}</option>{% endfor %}
          </select>
          <select id="nv-den" data-kieu="noi_bo" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Chuyển ĐẾN —</option>
            {% for n in noi_cat_tien %}<option value="{{ n.ma }}">Đến: {{ n.nhan }}</option>{% endfor %}
          </select>
          <select id="nv-huong-doi" data-kieu="doi_tien" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Chọn chiều đổi —</option>
            <option value="tm_sang_ck">Khách đưa tiền mặt → tiệm chuyển khoản lại</option>
            <option value="ck_sang_tm">Khách chuyển khoản → tiệm đưa tiền mặt</option>
          </select>
          <select id="nv-ly-do" data-kieu="ho_khach" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Chọn trường hợp —</option>
            {% for l in ly_do_ho_khach %}<option value="{{ l.ma }}">{{ l.nhan }}</option>{% endfor %}
          </select>
          <select id="nv-huong-csh" data-kieu="chu_so_huu" class="input-ios cursor-pointer" onchange="cbXemTruoc()">
            <option value="">— Nộp hay rút —</option>
            <option value="nop">Chủ tiệm NỘP tiền vào quỹ</option>
            <option value="rut">Chủ tiệm RÚT tiền ra</option>
          </select>
          <input id="nv-khach" data-kieu="doi_tien ho_khach" placeholder="Tên khách (không bắt buộc)" class="input-ios">
          <select id="f-loai" data-kieu="nang_cao" class="input-ios cursor-pointer" onchange="cbCapNhatPhanLoai(); cbLoadHangMucGoiY()">
            <option value="thu">🟢 Thu</option>
            <option value="chi">🔴 Chi</option>
          </select>
          <select id="f-phanloai" data-kieu="nang_cao" class="input-ios cursor-pointer" onchange="cbBanChatHint('f-phanloai','f-banchat-hint')"
            title="Khoản tiền này THỰC CHẤT là gì — app tự quy ra đúng mục trong báo cáo lãi lỗ">
          </select>
          <input id="f-hangmuc" data-kieu="nang_cao" list="dl-hang-muc" placeholder="Hạng mục (VD Điện nước)..." class="input-ios">
          <datalist id="dl-hang-muc"></datalist>
          <select id="f-hinhthuc" data-kieu="chi_phi thu_khac ho_khach chu_so_huu nang_cao" class="input-ios cursor-pointer" onchange="cbToggleSplit(); cbXemTruoc()">
            <option value="tien_mat">💵 Tiền mặt</option>
            <option value="chuyen_khoan">🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 Cả hai (TM + CK)</option>
          </select>
          <input id="f-sotien" type="text" inputmode="numeric" placeholder="Số tiền (đồng)" class="input-ios" oninput="onSplitAmtInput(this); cbXemTruoc()">
          <input id="f-noidung" placeholder="Ghi chú thêm (không bắt buộc)" class="input-ios" oninput="cbXemTruoc()">
        </div>
        <div id="f-banchat-hint" data-kieu="nang_cao" class="text-xs -mt-1"></div>
        <div id="cb-xem-truoc" class="text-xs rounded-lg px-3 py-2 bg-slate-50 border border-slate-200 hidden"></div>
      </div>
      <!-- TÁCH TM/CK: khách trả 1 phần tiền mặt + 1 phần chuyển khoản. Ghi thành 2 DÒNG
           sổ quỹ (đúng mô hình _insert_cb_split của mua hàng/đặt hàng) — app không lưu
           hinh_thuc 'ca_hai' vì tồn quỹ lọc theo 'tien_mat', thêm giá trị lạ là mất tiền. -->
      <div id="f-split-row" class="hidden grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div>
          <label class="text-xs font-bold text-slate-500">💵 Tiền mặt (đồng)</label>
          <input id="f-tm" type="text" inputmode="numeric" placeholder="0" class="input-ios w-full mt-0.5"
                 oninput="onSplitAmtInput(this); cbSplitTong(); cbXemTruoc()">
        </div>
        <div>
          <label class="text-xs font-bold text-slate-500">🏦 Chuyển khoản (đồng)</label>
          <input id="f-ck" type="text" inputmode="numeric" placeholder="0" class="input-ios w-full mt-0.5"
                 oninput="onSplitAmtInput(this); cbSplitTong(); cbXemTruoc()">
        </div>
        <div id="f-split-tong" class="sm:col-span-2 text-sm font-bold text-slate-600"></div>
      </div>
      <div id="cb-luu-khung" class="hidden space-y-4">
      <!-- THỜI ĐIỂM TIỀN THẬT SỰ RA/VÀO (không phải giờ bấm lưu). Khoản ghi bù phải
           khai đúng giờ thật, nếu không tồn quỹ dự kiến bị trừ 2 lần — xem #cb-ngay-hint -->
      <div class="flex flex-col sm:flex-row sm:items-center gap-2">
        <label for="f-ngay" class="text-xs font-bold text-slate-500 whitespace-nowrap">
          🕒 Thời điểm tiền ra/vào
        </label>
        <input id="f-ngay" type="datetime-local" class="input-ios w-full sm:w-56"
               onchange="cbNgayHint()" oninput="cbNgayHint()">
        <button type="button" onclick="cbNgayNow()"
                class="btn-ios btn-ios-secondary text-xs font-bold px-3 py-1.5 whitespace-nowrap">
          ⏱️ Bây giờ
        </button>
      </div>
      <div id="cb-ngay-hint" class="text-xs leading-relaxed"></div>
      <div class="flex items-center gap-3">
        <button onclick="addEntry()" class="btn-ios btn-ios-gold px-6 py-2.5">Lưu vào sổ quỹ</button>
        <span id="add-msg" class="text-sm"></span>
      </div>
      </div>
    </div>
  </div>

  <!-- 6 ── Giao dịch gần đây ── -->
  <div id="sec-giaodich" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex flex-wrap gap-2 justify-between items-center" style="background:linear-gradient(135deg,#fff1f2,#ffe4e6)">
      <span class="font-extrabold text-gray-800">💰 Sổ quỹ — giao dịch gần đây</span>
      <span class="cb-seg" role="group" aria-label="Số giao dịch hiện">
        <button type="button" id="cb-gh-500" class="on" onclick="cbChonGioiHan('500')">500 gần nhất</button>
        <button type="button" id="cb-gh-tat_ca" onclick="cbChonGioiHan('tat_ca')">Tất cả</button>
      </span>
      <a href="/api/pos/cashbook/export" class="btn-ios btn-ios-secondary text-xs font-bold text-rose-700 px-3 py-1.5">⬇️ Xuất Excel</a>
    </div>
    <div class="px-4 py-2.5 border-b border-gray-100 flex flex-wrap gap-2 items-center bg-white">
      <input id="cb-search" type="search" placeholder="🔍 Tìm nội dung..." oninput="renderCbEntries()"
        class="input-ios text-sm" style="min-width:160px;flex:1">
      <select id="cb-filter-loai" onchange="renderCbEntries()" class="input-ios text-sm" style="width:130px">
        <option value="">Tất cả loại</option>
        <option value="thu">🟢 Thu</option>
        <option value="chi">🔴 Chi</option>
      </select>
      <select id="cb-filter-ht" onchange="renderCbEntries()" class="input-ios text-sm" style="width:165px">
        <option value="">Tất cả hình thức</option>
        <option value="tien_mat">💵 Tiền mặt</option>
        <option value="chuyen_khoan">🏦 Chuyển khoản</option>
      </select>
      <select id="cb-filter-phanloai" onchange="renderCbEntries()" class="input-ios text-sm" style="width:190px"
        title="Chỉ lọc được các khoản ĐÃ chọn Loại chi phí/thu nhập khi ghi tay">
        <option value="">Tất cả loại chi phí/thu nhập</option>
        <option value="ban_hang">🛍️ Chi phí bán hàng</option>
        <option value="quan_ly">🏢 Chi phí quản lý DN</option>
        <option value="tai_chinh">💸 Chi phí/doanh thu tài chính</option>
        <option value="khac">📦 Khác</option>
        <option value="khong_tinh">🚫 Không tính lãi lỗ (nội bộ, hộ khách...)</option>
      </select>
      <input id="cb-from" type="date" lang="vi" placeholder="Từ ngày" onchange="renderCbEntries()" class="input-ios text-sm" style="width:140px" title="Từ ngày">
      <input id="cb-to" type="date" lang="vi" placeholder="Đến ngày" onchange="renderCbEntries()" class="input-ios text-sm" style="width:140px" title="Đến ngày">
      <button onclick="cbResetFilters()" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5 flex-shrink-0">Xóa lọc</button>
      <span id="cb-count" class="text-xs text-gray-400 w-full sm:w-auto sm:ml-auto"></span>
    </div>
    <div id="cb-summary" class="px-4 pt-4 grid grid-cols-2 sm:grid-cols-4 gap-2.5"></div>
    <div id="cb-grid" class="p-4 space-y-3"></div>
  </div>

  <!-- 7 ── Chi phí theo hạng mục (27/08/2026) ── -->
  <div id="sec-hangmuc" class="sec-panel hidden ios-card overflow-hidden">
    <div class="px-5 py-3.5" style="background:linear-gradient(135deg,#fefce8,#fef9c3)">
      <span class="font-extrabold text-gray-800">📊 Chi phí/thu nhập theo hạng mục</span>
      <p class="text-xs text-gray-500 mt-0.5">Chỉ tính các khoản GHI TAY có gắn "Hạng mục" ở
        khối ➕ Ghi sổ quỹ thủ công (bán/mua hàng, cầm đồ, cọc... không có khái niệm hạng mục).</p>
    </div>
    <div class="px-4 py-2.5 border-b border-gray-100 flex flex-wrap gap-2 items-center bg-white">
      <select id="hm-loai" onchange="loadHangMuc()" class="input-ios text-sm" style="width:110px">
        <option value="chi">🔴 Chi</option>
        <option value="thu">🟢 Thu</option>
      </select>
      <input id="hm-from" type="date" lang="vi" placeholder="Từ ngày" onchange="loadHangMuc()" class="input-ios text-sm" style="width:140px" title="Từ ngày">
      <input id="hm-to" type="date" lang="vi" placeholder="Đến ngày" onchange="loadHangMuc()" class="input-ios text-sm" style="width:140px" title="Đến ngày">
      <button onclick="hmQuickThang()" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5">Tháng này</button>
      <button onclick="hmQuickNam()" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5">Năm nay</button>
      <button onclick="hmQuickTatCa()" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5">Tất cả</button>
    </div>
    <div id="hm-body" class="p-4 space-y-2"></div>
  </div>

  <!-- ── MODAL SỬA PHIẾU (chỉ GĐ / PGĐ) ── -->
  <div id="cc-edit-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4"
       onclick="if(event.target===this)ccCloseEdit()">
    <div class="bg-white rounded-[26px] w-full max-w-lg shadow-2xl overflow-y-auto max-h-[90vh]">
      <div class="px-5 py-4 border-b flex justify-between items-center" style="background:linear-gradient(135deg,#eff6ff,#f0f9ff)">
        <h2 class="font-bold text-gray-800">✏️ Sửa phiếu kiểm tiền</h2>
        <button onclick="ccCloseEdit()" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
      </div>
      <div class="p-5 space-y-3">
        <input type="hidden" id="cc-edit-id">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Loại phiếu</label>
            <select id="cc-edit-loai" class="w-full input-ios">
              <option value="dau_ca">🌅 Đầu ca</option>
              <option value="cuoi_ca">🌇 Cuối ca</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Thời gian</label>
            <input id="cc-edit-ngay" type="text" placeholder="dd/mm/yyyy HH:MM:SS" class="w-full input-ios">
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tên ca</label>
            <input id="cc-edit-ca" type="text" class="w-full input-ios">
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ngày ca</label>
            <input id="cc-edit-ngay-phieu" type="date" lang="vi" placeholder="Chọn ngày" class="w-full input-ios">
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người kiểm đếm</label>
            <input id="cc-edit-nhanvien" type="text" class="w-full input-ios">
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người giao ca</label>
            <input id="cc-edit-giao" type="text" class="w-full input-ios">
          </div>
          <div>
            <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Người nhận ca</label>
            <input id="cc-edit-nhan" type="text" class="w-full input-ios">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Kiểm đếm theo mệnh giá</label>
          <div class="rounded-2xl border border-gray-100 overflow-hidden 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ệnh giá</th>
                  <th class="text-right px-3 py-2">Số tờ</th>
                  <th class="text-right px-3 py-2">Thành tiền</th>
                </tr>
              </thead>
              <tbody id="cc-edit-denom-tbody"></tbody>
              <tfoot>
                <tr class="border-t border-gray-100 bg-gray-50">
                  <td class="px-3 py-2 font-semibold text-gray-600">Tiền lẻ (đồng)</td>
                  <td class="px-3 py-2 text-right">
                    <input id="cc-edit-tienle" type="number" step="100" value="0" oninput="ccEditRecalc()"
                      class="input-ios-sm w-28 text-right">
                  </td>
                  <td class="px-3 py-2 text-right font-semibold" id="cc-edit-tienle-tt">0</td>
                </tr>
              </tfoot>
            </table>
          </div>
          <div class="mt-2 flex justify-end items-baseline gap-2">
            <span class="text-xs text-gray-500 uppercase font-semibold">Tổng kiểm đếm:</span>
            <span class="font-black text-amber-700 text-xl" id="cc-edit-tong">0</span>
            <span class="text-xs text-amber-600/70">đồng</span>
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ghi chú</label>
          <input id="cc-edit-ghichu" type="text" class="w-full input-ios">
        </div>
        <div class="flex gap-3 pt-2">
          <button onclick="ccSaveEdit()" class="btn-ios btn-ios-gold flex-1 py-2.5">💾 Lưu thay đổi</button>
          <button onclick="ccCloseEdit()" class="btn-ios btn-ios-secondary px-5 py-2.5">Hủy</button>
        </div>
        <p id="cc-edit-msg" class="text-sm text-center"></p>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<style>
.sec-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 22px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  text-align: left;
  min-height: 120px;
}
.sec-tile:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.sec-tile:active { transform: scale(.97); }
.sec-tile.active { box-shadow: 0 0 0 2.5px #f59e0b, 0 6px 20px rgba(245,158,11,.18); }
.sec-panel { animation: panelIn .2s ease; }
@keyframes panelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Bản nháp kiểm tiền (lưu server, nhiều bản) ───────────────────────── */
.cc-dr-wrap  { border:1.5px solid #bfdbfe; background:linear-gradient(135deg,#eff6ff,#f8fbff);
               border-radius:18px; padding:12px 14px; }
.cc-dr-title { font-size:12.5px; font-weight:800; color:#1e40af; text-transform:uppercase;
               letter-spacing:.03em; display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.cc-dr-count { background:#1d4ed8; color:#fff; border-radius:999px; padding:1px 9px;
               font-size:11.5px; font-weight:800; letter-spacing:0; }
.cc-dr-list  { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:9px; }
.cc-dr-item  { background:#fff; border:1px solid #dbeafe; border-radius:14px; padding:10px 12px;
               display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc-dr-main  { flex:1; min-width:170px; }
.cc-dr-sum   { font-size:13.5px; font-weight:800; color:#1f2937; line-height:1.4; word-break:break-word; }
.cc-dr-meta  { font-size:11.5px; color:#6b7280; margin-top:3px; }
.cc-dr-btns  { display:flex; gap:6px; flex-shrink:0; }
.cc-dr-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
               border:1.5px solid #fcd34d; background:linear-gradient(135deg,#fffbeb,#fffdf5);
               border-radius:14px; padding:10px 13px; font-size:13px; color:#78350f; }
.cc-dr-banner.hidden { display:none; }
@media (max-width:640px){ .cc-dr-list{ grid-template-columns:1fr; } }
/* Chọn 500 / Tất cả giao dịch (23/10/2026) */
.cb-seg { display:inline-flex; background:#fff; border:1.5px solid #fecdd3; border-radius:12px; padding:3px; gap:2px; margin-left:auto; margin-right:8px; }
.cb-seg button { padding:6px 11px; border-radius:9px; font-size:12.5px; font-weight:800; color:#9f1239; white-space:nowrap; }
.cb-seg button.on { background:linear-gradient(135deg,#4a0000,#8b0000); color:#fff; }
/* Lịch sử đếm tiền nhanh (23/10/2026) */
.qc-ls { border:1px solid #ccfbf1; border-radius:16px; overflow:hidden; }
.qc-ls-dau { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px;
             background:linear-gradient(135deg,#f0fdfa,#ccfbf1); font-weight:800; color:#115e59; font-size:14px; }
.qc-ls-dem { font-size:12px; font-weight:700; color:#0f766e; }
.qc-ls-list { display:flex; flex-direction:column; }
.qc-ls-item { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 14px; border-top:1px solid #f0fdfa; }
.qc-ls-item .tg { font-size:12.5px; color:#6b7280; font-variant-numeric:tabular-nums; }
.qc-ls-item .tien { font-weight:900; color:#0f766e; font-size:16px; font-variant-numeric:tabular-nums; }
.qc-ls-item .ct { flex:1 1 100%; font-size:12px; color:#4b5563; line-height:1.45; }
.qc-ls-item .nd { font-size:12.5px; color:#374151; }
.qc-ls-item .xoa { margin-left:auto; }
.qc-ls-trong { padding:14px; text-align:center; color:#9ca3af; font-size:13px; }
.qc-ls-them { padding:0 14px; }
.qc-ls-them button { margin:8px 0 10px; font-size:13px; font-weight:800; color:#0f766e; text-decoration:underline; }
@media (max-width:640px){ .cb-seg { margin-left:0; } }
</style>
<script src="/static/js/kiem-tien.js?v=20261024d2"></script>
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt    = n => Number(n||0).toLocaleString('vi-VN');
const fmtVnd = n => Number((n||0) * 1000).toLocaleString('vi-VN') + ' đ';
let _myRole = window._NV_ROLE || null;
(async () => { try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; } catch(e){} })();
// Trang sổ quỹ: hiển thị đồng (×1000) thay vì nghìn đồng
ccFmt      = n => Number((n||0) * 1000).toLocaleString('vi-VN');
ccDenomLabel = d => Number((d||0) * 1000).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(); }

// ── Section toggle ──────────────────────────────────────────
let _secActive = null;
let ccInited   = false;

function secOpen(sec) {
  const wasActive = _secActive === sec;
  // Deactivate all
  document.querySelectorAll('.sec-panel').forEach(p => p.classList.add('hidden'));
  document.querySelectorAll('.sec-tile').forEach(t => t.classList.remove('active'));
  if (wasActive) { _secActive = null; return; }
  // Activate target
  document.getElementById('sec-' + sec).classList.remove('hidden');
  const tile = document.querySelector(`[data-sec="${sec}"]`);
  if (tile) tile.classList.add('active');
  _secActive = sec;
  setTimeout(() => document.getElementById('sec-' + sec).scrollIntoView({behavior:'smooth', block:'nearest'}), 60);
  // Lazy-init kiểm tiền / đếm nhanh / lịch sử (share same data)
  if ((sec === 'kiemtien' || sec === 'demtien' || sec === 'lichsu') && !ccInited) {
    ccInited = true; ccInit();
  }
  if (sec === 'hangmuc' && !_hmInited) {
    _hmInited = true;
    const t = new Date();
    fpSet('hm-from', `${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,'0')}-01`);
    fpSet('hm-to', t.toISOString().slice(0, 10));
    loadHangMuc();
  }
}
let _hmInited = false;

// Danh mục chọn nhanh (23/10/2026): nút + lưu giá trị đang gõ, ☰ danh sách xem/xóa lựa chọn
if (window.DanhMuc) {
  DanhMuc.gan('cc-inp-ca', 'ten_ca');
  DanhMuc.gan('cc-inp-nhanvien', 'nguoi_kiem_dem');
  DanhMuc.gan('cc-inp-giao', 'nguoi_giao_ca');
  DanhMuc.gan('cc-inp-nhan', 'nguoi_nhan_ca');
}

// Handle hash navigation from external link
if (location.hash === '#kiem-tien') { secOpen('kiemtien'); }

// ── Cashbook data ───────────────────────────────────────────
let _cbEntries = [];

function cbParseDate(ngay) {
  if (!ngay) return '';
  const p = ngay.split(' ')[0].split('/');
  return p.length === 3 ? `${p[2]}-${p[1]}-${p[0]}` : '';
}
// Khóa thời điểm ĐẦY ĐỦ 'yyyy-mm-dd HH:MM:SS' (so chuỗi = đúng thứ tự thời gian) — để sắp
// trong-ngày. Ngày lưu 'dd/mm/yyyy HH:MM:SS' nên KHÔNG so chuỗi trực tiếp được (phải đổi ISO).
function cbTsKey(ngay) {
  const d = cbParseDate(ngay);
  const t = (ngay || '').split(' ')[1] || '00:00:00';
  return d ? d + ' ' + t : '';
}

function renderCbEntries() {
  const q    = (document.getElementById('cb-search').value || '').trim().toLowerCase();
  const loai = document.getElementById('cb-filter-loai').value;
  const ht   = document.getElementById('cb-filter-ht').value;
  const pl   = document.getElementById('cb-filter-phanloai').value;
  const from = document.getElementById('cb-from').value;
  const to   = document.getElementById('cb-to').value;

  let list = _cbEntries;
  if (q)    list = list.filter(e => (e.noi_dung || '').toLowerCase().includes(q));
  if (loai) list = list.filter(e => e.loai === loai);
  if (ht)   list = list.filter(e => e.hinh_thuc === ht);
  if (pl)   list = list.filter(e => (e.phan_loai || '') === pl);
  if (from) list = list.filter(e => cbParseDate(e.ngay) >= from);
  if (to)   list = list.filter(e => cbParseDate(e.ngay) <= to);

  const filtered = q || loai || ht || pl || from || to;
  const _pv = _cbGhDaTai === 'tat_ca' || _cbTongSo <= _cbEntries.length
    ? `tất cả ${fmt(_cbEntries.length)} giao dịch`
    : `${fmt(_cbEntries.length)} giao dịch gần nhất / tổng ${fmt(_cbTongSo)}`;
  document.getElementById('cb-count').textContent = filtered
    ? `${fmt(list.length)} khớp lọc trong ${_pv}`
    : `Đang hiện ${_pv}`;

  // ── Thẻ tổng quan cho tập đang xem (thu / chi / chênh lệch) ──
  const tThu = list.filter(e => e.loai === 'thu').reduce((a, e) => a + (e.so_tien || 0), 0);
  const tChi = list.filter(e => e.loai === 'chi').reduce((a, e) => a + (e.so_tien || 0), 0);
  const sCard = (val, label, color) => `
    <div class="rounded-2xl p-3 text-center" style="background:${color}26;border:1px solid ${color}44">
      <div class="text-base font-black tabular-nums leading-tight" style="color:${color}">${val}</div>
      <div class="text-[11px] font-bold text-gray-600 mt-0.5">${label}</div>
    </div>`;
  const net = tThu - tChi;
  document.getElementById('cb-summary').innerHTML =
    sCard(fmt(list.length), (filtered ? 'GD khớp lọc' : 'GD gần đây'), '#b45309') +
    sCard(fmtVnd(tThu), 'Thu (đ)', '#16a34a') +
    sCard(fmtVnd(tChi), 'Chi (đ)', '#dc2626') +
    sCard((net >= 0 ? '+' : '−') + fmtVnd(Math.abs(net)), 'Thu − Chi', '#2563eb');

  // ── Gom theo NGÀY — mỗi ngày 1 thẻ, bấm xổ chi tiết (mẫu Hóa đơn gần đây) ──
  const groups = new Map();
  list.forEach(e => {
    const ngay = (e.ngay || '').split(' ')[0] || '(không rõ ngày)';
    if (!groups.has(ngay)) groups.set(ngay, { ngay, entries: [] });
    groups.get(ngay).entries.push(e);
  });
  // Sắp NGÀY theo ngày THẬT giảm dần — KHÔNG theo thứ tự id DESC của danh sách: phiếu ghi lùi
  // ngày (VD cầm hàng ghi theo ngày_cầm quá khứ) có id mới nhưng ngày cũ → nếu giữ thứ tự id
  // thì ngày CŨ nhảy lên đầu. Trong mỗi ngày cũng sắp theo thời điểm giảm dần (id tie-break).
  const dayArr = [...groups.values()].sort((a, b) => cbParseDate(b.ngay).localeCompare(cbParseDate(a.ngay)));
  dayArr.forEach(g => g.entries.sort((x, y) => cbTsKey(y.ngay).localeCompare(cbTsKey(x.ngay)) || (y.id || 0) - (x.id || 0)));
  const dayKeys = dayArr.map(g => g.ngay);
  _cbDayMap = {};
  dayArr.forEach(g => { _cbDayMap[g.ngay] = g; });
  document.getElementById('cb-grid').innerHTML = dayArr.map(_cbDayCard).join('')
    || `<div class="text-center text-gray-300 py-10">${filtered ? 'Không tìm thấy giao dịch nào phù hợp' : 'Chưa có giao dịch'}</div>`;
  // Đang lọc → mở hết cho thấy ngay; không lọc → mở sẵn ngày mới nhất
  if (filtered) {
    dayKeys.forEach(k => { _cbDayExpanded[k] = true; });
  } else if (dayKeys.length) {
    const first = dayKeys[0];
    if (_cbDayExpanded[first] === undefined) _cbDayExpanded[first] = true;
  }
  dayKeys.forEach(k => {
    const ek = encodeURIComponent(k);
    const b = document.getElementById('cb-day-' + ek);
    const ch = document.getElementById('cb-chev-' + ek);
    if (_cbDayExpanded[k]) _cbFillDay(k);
    if (b) b.classList.toggle('hidden', !_cbDayExpanded[k]);
    if (ch) ch.textContent = _cbDayExpanded[k] ? '▴' : '▾';
  });
}

// Dòng giao dịch của 1 ngày chỉ dựng khi MỞ ngày đó (chọn "Tất cả" hàng chục nghìn dòng vẫn nhẹ)
let _cbDayMap = {};
function _cbFillDay(key) {
  const b = document.getElementById('cb-day-' + encodeURIComponent(key));
  if (!b || b.dataset.daVe) return;
  const g = _cbDayMap[key];
  b.innerHTML = g ? g.entries.map(_cbEntryRow).join('') : '';
  b.dataset.daVe = '1';
}

let _cbDayExpanded = {};
function toggleCbDay(ek) {
  const key = decodeURIComponent(ek);
  _cbDayExpanded[key] = !_cbDayExpanded[key];
  if (_cbDayExpanded[key]) _cbFillDay(key);
  const b = document.getElementById('cb-day-' + ek);
  const ch = document.getElementById('cb-chev-' + ek);
  if (b) b.classList.toggle('hidden', !_cbDayExpanded[key]);
  if (ch) ch.textContent = _cbDayExpanded[key] ? '▴' : '▾';
}

// Nhãn "Loại chi phí/thu nhập" — chỉ hiện khi dòng ĐÃ được gắn cờ lúc ghi tay (27/08/2026).
const CB_PHAN_LOAI_NHAN = {
  ban_hang: '🛍️ Bán hàng', quan_ly: '🏢 Quản lý DN', tai_chinh: '💸 Tài chính', khac: '📦 Khác',
  khong_tinh: '🚫 Khoản ngoài',
};

// 1 dòng giao dịch bên trong ngày
function _cbEntryRow(e) {
  const canEdit = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc';
  const isThu = e.loai === 'thu';
  const gio = (e.ngay || '').split(' ')[1] || '';
  const _bc = CB_BAN_CHAT_MAP[e.ban_chat];
  const plNhan = _bc ? _bc.nhan.split(' (')[0] : CB_PHAN_LOAI_NHAN[e.phan_loai];
  return `<div class="rounded-xl border border-gray-100 px-3 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5">
    <span class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap" style="${isThu?'background:#16a34a;color:#fff':'background:#dc2626;color:#fff'}">${isThu?'Thu':'Chi'}</span>
    ${plNhan ? `<span class="text-[11px] font-semibold px-2 py-0.5 rounded-full whitespace-nowrap bg-amber-50 text-amber-700 border border-amber-200">${plNhan}</span>` : ''}
    <span class="text-xs text-gray-400 font-mono">${gio}</span>
    <span class="text-xs">${e.hinh_thuc === 'tien_mat' ? '💵 TM' : '🏦 CK'}</span>
    <span class="text-sm text-gray-700 flex-1 min-w-[8rem] truncate" title="${(e.noi_dung||'').replace(/"/g,'&quot;')}">${e.noi_dung || '—'}</span>
    <span class="text-sm font-black ${isThu?'text-green-700':'text-red-600'} whitespace-nowrap">${isThu?'+':'−'}${fmtVnd(e.so_tien)}</span>
    <span class="flex items-center gap-2 whitespace-nowrap">
      <a href="/cashbook/${e.id}/print" target="_blank" class="tkt-act ${isThu?'tkt-emerald':'tkt-red'}">🖨️ In ${isThu?'phiếu thu':'phiếu chi'}</a>
      <button onclick="printRemote('/cashbook/${e.id}/print', this)" class="tkt-act ${isThu?'tkt-emerald':'tkt-red'}" 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>
      ${canEdit ? `
      <button onclick='openCbEdit(${JSON.stringify(e)})' class="tkt-act tkt-blue">✏️ Sửa</button>
      <button onclick='deleteCbEntry(${e.id},${e.sale_id||'null'},${JSON.stringify(e.noi_dung||'')})' class="tkt-act tkt-red">🗑️</button>` : ''}
    </span>
  </div>`;
}

// 1 THẺ mỗi ngày — header đậm kiểu Hóa đơn gần đây
function _cbDayCard(g) {
  const ek = encodeURIComponent(g.ngay);
  const tThu = g.entries.filter(e => e.loai === 'thu').reduce((a, e) => a + (e.so_tien || 0), 0);
  const tChi = g.entries.filter(e => e.loai === 'chi').reduce((a, e) => a + (e.so_tien || 0), 0);
  const net = tThu - tChi;
  const dd = (g.ngay.split('/')[0]) || '•';
  const netBadge = net >= 0
    ? `<span style="background:#dbeafe;color:#1e40af" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">▲ +${fmtVnd(net)}</span>`
    : `<span style="background:#fee2e2;color:#991b1b" class="text-[11px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">▼ −${fmtVnd(Math.abs(net))}</span>`;
  const open = !!_cbDayExpanded[g.ngay];
  return `<div class="ios-card overflow-hidden" style="border:1px solid #fde68a">
    <div onclick="toggleCbDay('${ek}')" class="px-4 py-3 cursor-pointer flex flex-wrap items-center gap-3" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <div class="w-10 h-10 rounded-2xl flex items-center justify-center flex-shrink-0 text-white font-black leading-none" style="background:linear-gradient(135deg,#4a0000,#8b0000)">${dd}</div>
      <div class="flex-1 min-w-0">
        <div class="font-bold text-gray-800 truncate">${g.ngay}</div>
        <div class="text-xs text-gray-400 truncate">${g.entries.length} giao dịch</div>
      </div>
      <div class="text-right flex-shrink-0">
        ${tThu ? `<div class="font-black text-green-700 leading-tight">+${fmtVnd(tThu)}</div>` : ''}
        ${tChi ? `<div class="font-black text-red-600 leading-tight ${tThu?'text-sm':''}">−${fmtVnd(tChi)}</div>` : ''}
      </div>
      ${netBadge}
      <span id="cb-chev-${ek}" class="text-gray-400 flex-shrink-0">${open ? '▴' : '▾'}</span>
    </div>
    <div id="cb-day-${ek}" class="p-3 space-y-2 ${open ? '' : 'hidden'}"></div>
  </div>`;
}

function cbResetFilters() {
  document.getElementById('cb-search').value = '';
  document.getElementById('cb-filter-loai').value = '';
  document.getElementById('cb-filter-ht').value = '';
  document.getElementById('cb-filter-phanloai').value = '';
  fpSet('cb-from', '');     // ô lịch flatpickr: phải xóa qua fpSet, gán .value không xóa ô hiển thị
  fpSet('cb-to', '');
  renderCbEntries();
}

// ── Chi phí/thu nhập theo hạng mục (27/08/2026) ──────────────────────────────
function hmQuickThang() {
  const t = new Date();
  fpSet('hm-from', `${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,'0')}-01`);
  fpSet('hm-to', t.toISOString().slice(0, 10));
  loadHangMuc();
}
function hmQuickNam() {
  const t = new Date();
  fpSet('hm-from', `${t.getFullYear()}-01-01`);
  fpSet('hm-to', t.toISOString().slice(0, 10));
  loadHangMuc();
}
function hmQuickTatCa() {
  fpSet('hm-from', ''); fpSet('hm-to', '');
  loadHangMuc();
}

async function loadHangMuc() {
  const loai = document.getElementById('hm-loai').value;
  const from = document.getElementById('hm-from').value;
  const to = document.getElementById('hm-to').value;
  const params = new URLSearchParams({ loai });
  if (from) params.set('from', from);
  if (to) params.set('to', to);
  const body = document.getElementById('hm-body');
  body.innerHTML = '<div class="text-center text-gray-300 py-6">Đang tải…</div>';
  const r = await fetch('/api/pos/cashbook/hang-muc?' + params.toString(), { cache: 'no-store' });
  if (!r.ok) { body.innerHTML = '<div class="text-center text-red-400 py-6">Không có quyền xem báo cáo này.</div>'; return; }
  const d = await r.json();
  const groups = d.groups || [];
  const maxVal = Math.max(1, ...groups.map(g => g.so_tien));
  const color = loai === 'chi' ? '#dc2626' : '#16a34a';
  let html = '';
  if (!groups.length) {
    html = '<div class="text-center text-gray-300 py-6">Chưa có khoản nào gắn hạng mục trong kỳ này.</div>';
  } else {
    html = groups.map(g => `
      <div class="rounded-xl border border-gray-100 p-3">
        <div class="flex justify-between items-baseline mb-1">
          <span class="font-bold text-gray-700 text-sm">${g.hang_muc}</span>
          <span class="font-black tabular-nums text-sm" style="color:${color}">${fmtVnd(g.so_tien)} <span class="text-xs text-gray-400 font-normal">(${g.so_giao_dich} lần)</span></span>
        </div>
        <div class="h-2 rounded-full bg-gray-100 overflow-hidden">
          <div class="h-full rounded-full" style="width:${(g.so_tien/maxVal*100).toFixed(1)}%;background:${color}"></div>
        </div>
      </div>`).join('');
  }
  const tongDaGan = d.tong_co_hang_muc || 0;
  const tongChuaGan = d.tong_khong_hang_muc || 0;
  html += `<div class="rounded-xl p-3 mt-1" style="background:#f9fafb">
    <div class="flex justify-between text-sm"><span class="font-semibold text-gray-600">Tổng ĐÃ gắn hạng mục</span><span class="font-black tabular-nums">${fmtVnd(tongDaGan)}</span></div>
    <div class="flex justify-between text-sm mt-1"><span class="text-gray-400">Chưa gắn hạng mục (${d.so_dong_khong_hang_muc||0} khoản ghi tay khác)</span><span class="tabular-nums text-gray-400">${fmtVnd(tongChuaGan)}</span></div>
    <div class="flex justify-between text-sm mt-1 pt-1 border-t border-gray-200"><span class="font-bold text-gray-700">Tổng ${loai==='chi'?'chi':'thu'} ghi tay trong kỳ</span><span class="font-black tabular-nums">${fmtVnd(d.tong_tat_ca||0)}</span></div>
  </div>`;
  body.innerHTML = html;
}

// 500 gần nhất (mặc định) / Tất cả — KHÔNG lưu lựa chọn: tải lại trang luôn về 500.
let _cbGioiHan = '500';
let _cbGhDaTai = '500';     // phạm vi của dữ liệu ĐÃ tải xong — nhãn/tổng theo dữ liệu thật đang có
let _cbTongSo = 0;
let _cbLuot = 0;
function cbChonGioiHan(v) {
  _cbGioiHan = v === 'tat_ca' ? 'tat_ca' : '500';
  ['500', 'tat_ca'].forEach(k => document.getElementById('cb-gh-' + k)?.classList.toggle('on', k === _cbGioiHan));
  loadCashbook();
}

async function loadCashbook() {
  const luot = ++_cbLuot;
  const _cnt = document.getElementById('cb-count');
  if (_cnt && _cbGioiHan !== _cbGhDaTai) _cnt.textContent = '⏳ Đang tải ' + (_cbGioiHan === 'tat_ca' ? 'tất cả giao dịch…' : '500 giao dịch gần nhất…');
  const res = await fetch('/api/pos/cashbook' + (_cbGioiHan === 'tat_ca' ? '?gioi_han=tat_ca' : ''));
  const data = await res.json();
  if (luot !== _cbLuot) return;
  _cbTongSo = data.tong_so || (data.entries || []).length;
  _cbGhDaTai = data.gioi_han === 'tat_ca' ? 'tat_ca' : '500';
  const s = data.summary;
  if (!s) {               // khong co quyen bao cao -> khong hien Tong thu/chi/Ton quy
    document.getElementById('summary-bar').innerHTML = '';
    _cbEntries = data.entries;
    renderCbEntries();
    return;
  }
  document.getElementById('summary-bar').innerHTML = `
    <div class="ios-card p-4">
      <div class="text-xs text-gray-400 uppercase font-semibold">🟢 Tổng thu</div>
      <div class="text-lg font-black tabular-nums break-words text-green-700 mt-0.5">${fmtVnd(s.thu)}</div>
    </div>
    <div class="ios-card p-4">
      <div class="text-xs text-gray-400 uppercase font-semibold">🔴 Tổng chi</div>
      <div class="text-lg font-black tabular-nums break-words text-red-700 mt-0.5">${fmtVnd(s.chi)}</div>
    </div>
    <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <div class="text-xs text-amber-600/80 uppercase font-semibold">💰 Tồn quỹ</div>
      <div class="text-lg font-black tabular-nums break-words text-amber-700 mt-0.5">${fmtVnd(s.ton_quy)}</div>
    </div>`;
  _cbEntries = data.entries;
  renderCbEntries();
}

function repPeriodRow(label, p) {
  const cls  = p.chenh_lech >= 0 ? 'text-blue-700' : 'text-red-700';
  const sign = p.chenh_lech >= 0 ? '+' : '';
  return `<tr class="border-b border-gray-50">
    <td class="px-4 py-2 font-semibold text-gray-700">${label}</td>
    <td class="px-4 py-2 text-right text-green-700">+${fmtVnd(p.thu)}</td>
    <td class="px-4 py-2 text-right text-red-700">-${fmtVnd(p.chi)}</td>
    <td class="px-4 py-2 text-right font-semibold ${cls}">${sign}${fmtVnd(p.chenh_lech)}</td>
  </tr>`;
}

async function loadCashReport() {
  const res  = await fetch('/api/pos/cashbook/report');
  const data = await res.json();
  document.getElementById('rep-ton-tienmat').textContent = fmtVnd(data.ton_quy_tien_mat);
  document.getElementById('rep-ton-ck').textContent      = fmtVnd(data.ton_quy_chuyen_khoan);
  document.getElementById('rep-ton-tong').textContent    = fmtVnd(data.ton_quy_tong);
  const qd = data.quy_dau_ca;
  document.getElementById('rep-dauca-sotien').textContent = fmtVnd(qd.so_tien);
  document.getElementById('rep-dauca-info').textContent   = qd.ngay
    ? `(Ca: ${qd.ca || '—'} · lúc ${qd.ngay})`
    : '(chưa có phiếu đầu ca)';
  document.getElementById('rep-tienmat-detail').textContent = qd.ngay
    ? `= Đầu ca ${fmtVnd(qd.so_tien)} + Thu ${fmtVnd(data.thu_tien_mat_ca)} − Chi ${fmtVnd(data.chi_tien_mat_ca)}`
    : `= Thu ${fmtVnd(data.thu_tien_mat_ca)} − Chi ${fmtVnd(data.chi_tien_mat_ca)} (chưa có phiếu đầu ca)`;
  document.getElementById('rep-ky-tbody').innerHTML =
    repPeriodRow('Hôm nay', data.hom_nay) +
    repPeriodRow('Tuần này', data.tuan_nay) +
    repPeriodRow('Tháng này', data.thang_nay);
  document.getElementById('rep-day-tbody').innerHTML = data.theo_ngay.map(d => {
    const cls  = d.chenh_lech >= 0 ? 'text-blue-700' : 'text-red-700';
    const sign = d.chenh_lech >= 0 ? '+' : '';
    return `<tr class="border-b border-gray-50">
      <td class="px-4 py-2">${d.ngay}</td>
      <td class="px-4 py-2 text-right text-green-700">${d.thu ? '+' + fmtVnd(d.thu) : '—'}</td>
      <td class="px-4 py-2 text-right text-red-700">${d.chi ? '-' + fmtVnd(d.chi) : '—'}</td>
      <td class="px-4 py-2 text-right font-semibold ${cls}">${(d.thu || d.chi) ? sign + fmtVnd(d.chenh_lech) : '—'}</td>
    </tr>`;
  }).join('');
  const dc   = data.doi_chieu_cuoi_ca;
  const dcEl = document.getElementById('rep-doichieu');
  if (!dc) {
    dcEl.className   = 'ios-card p-4 text-sm text-gray-400';
    dcEl.textContent = 'Chưa có phiếu kiểm tiền cuối ca / chuyển ca nào để đối chiếu.';
  } else {
    const cl    = dc.chenh_lech;
    const hasHt = dc.tong_he_thong !== null && dc.tong_he_thong !== undefined;
    const khop  = hasHt && Math.abs(cl) < 0.0001;
    const clCls = !hasHt ? 'text-gray-400' : (khop ? 'text-green-700' : (cl > 0 ? 'text-blue-700' : 'text-red-700'));
    const clTxt = !hasHt ? '—' : (khop ? '✓ Khớp quỹ' : (cl > 0 ? '+' + fmtVnd(cl) : fmtVnd(cl)));
    dcEl.className = 'ios-card p-4';
    dcEl.innerHTML  = `
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div>
          <div class="text-xs text-gray-400 uppercase font-semibold">Kiểm đếm thực tế</div>
          <div class="text-lg font-black text-amber-700">${fmtVnd(dc.tong_kiem_dem)}</div>
        </div>
        <div>
          <div class="text-xs text-gray-400 uppercase font-semibold">Sổ quỹ dự kiến</div>
          <div class="text-lg font-black text-gray-700">${hasHt ? fmtVnd(dc.tong_he_thong) : '—'}</div>
        </div>
        <div>
          <div class="text-xs uppercase font-semibold ${clCls}">Chênh lệch</div>
          <div class="text-lg font-black ${clCls}">${clTxt}</div>
        </div>
      </div>
      <div class="text-xs text-gray-400 mt-2">Ca: ${dc.ca || '—'} · lúc ${dc.ngay}</div>`;
  }
  const cbEl = document.getElementById('rep-canhbao-gio');
  const cb = data.canh_bao_gio || [];
  if (cb.length) {
    const items = cb.map(x => {
      const dau = x.loai === 'thu' ? '+' : '−';
      const cls = x.loai === 'thu' ? 'text-green-700' : 'text-red-700';
      return `<li>• <span class="${cls} font-semibold">${dau}${fmtVnd(x.so_tien)}</span> — ${x.noi_dung}</li>`;
    }).join('');
    cbEl.innerHTML = `
      <div class="font-bold text-red-700 mb-1">⚠️ Giao dịch hôm nay bị ghi sai giờ (00:00:00)</div>
      <div class="text-gray-600 mb-2">${cb.length} giao dịch dưới đây có thể làm lệch đối chiếu tồn quỹ. Vào từng phiếu sửa lại giờ, hoặc báo quản lý.</div>
      <ul class="space-y-0.5 text-gray-700">${items}</ul>`;
    cbEl.classList.remove('hidden');
  } else {
    cbEl.classList.add('hidden');
  }
  document.getElementById('rep-updated').textContent = 'Cập nhật ' + new Date().toLocaleTimeString('vi-VN');
}

// ── Thời điểm tiền ra/vào ────────────────────────────────────────────────
// Cột cashbook.ngay TRƯỚC ĐÂY luôn = giờ bấm lưu. Khi nhân viên nhớ ra khoản đã chi/thu
// từ trước rồi mới ghi bù, tiền đó ĐÃ nằm trong lần đếm gần nhất → tồn quỹ dự kiến trừ
// thêm lần nữa = sai (lỗi thật 27/07/2026, khoản 5.000.000đ trả Ngọc Hai).
// Nay khai đúng giờ thật thì chốt chặn sẵn có trong expected_cash tự loại, không trừ 2 lần.
let _cbMocKiem = null;    // Date của lần kiểm tiền gần nhất (mốc tính tồn quỹ dự kiến)

function _cbLocalNow() {
  const d = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
  return d.toISOString().slice(0, 16);
}
function cbNgayNow() {
  document.getElementById('f-ngay').value = _cbLocalNow();
  cbNgayHint();
}
function _cbHHMM(d) {
  return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0') +
         ' ngày ' + String(d.getDate()).padStart(2, '0') + '/' + String(d.getMonth() + 1).padStart(2, '0');
}
function cbNgayHint() {
  const el = document.getElementById('cb-ngay-hint');
  const v  = (document.getElementById('f-ngay').value || '').trim();
  if (!el) return;
  if (!v) { el.className = 'text-xs text-slate-400'; el.textContent = 'Để trống = lấy đúng giờ bấm lưu.'; return; }
  const dt = new Date(v);
  if (isNaN(dt)) { el.className = 'text-xs text-red-600 font-semibold'; el.textContent = '⚠️ Thời điểm không hợp lệ.'; return; }
  if (dt.getTime() > Date.now() + 5 * 60000) {
    el.className = 'text-xs text-red-600 font-semibold';
    el.textContent = '⚠️ Thời điểm ở TƯƠNG LAI — kiểm lại ngày/giờ.'; return;
  }
  if (!_cbMocKiem) { el.className = 'text-xs text-slate-400'; el.textContent = ''; return; }
  if (dt < _cbMocKiem) {
    el.className = 'text-xs text-sky-700 bg-sky-50 border border-sky-200 rounded-lg px-3 py-2 font-semibold';
    el.textContent = '⏪ Trước lần kiểm tiền lúc ' + _cbHHMM(_cbMocKiem) +
      ' → tiền này ĐÃ nằm trong số đã đếm, nên tồn quỹ dự kiến sẽ KHÔNG cộng/trừ lại lần nữa. ' +
      'Đây là cách ghi ĐÚNG cho khoản nhớ ra sau (ghi bù).';
  } else {
    el.className = 'text-xs text-emerald-700 font-semibold';
    el.textContent = '▶️ Sau lần kiểm tiền lúc ' + _cbHHMM(_cbMocKiem) +
      ' → khoản này SẼ được tính vào tồn quỹ dự kiến.';
  }
}
async function cbLoadMocKiem() {
  try {
    const d = await (await fetch('/api/pos/cash-counts/expected?loai=dau_ca', { cache: 'no-store' })).json();
    const m = (d && d.moc_ngay) || '';
    // 'dd/mm/yyyy HH:MM:SS' → Date (so chuỗi kiểu này là SAI thứ tự, phải tách tay)
    const g = m.match(/^(\d{2})\/(\d{2})\/(\d{4})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
    _cbMocKiem = g ? new Date(+g[3], +g[2] - 1, +g[1], +g[4], +g[5], +(g[6] || 0)) : null;
  } catch (e) { _cbMocKiem = null; }
  cbNgayHint();
}

// BẢN CHẤT khoản tiền (21/09/2026) — nhân viên chọn bằng LỜI THƯỜNG, server tự quy ra
// phan_loai kế toán (pos_db.BAN_CHAT_SO_QUY là nguồn DUY NHẤT, truyền vào qua Jinja).
const CB_BAN_CHAT = {{ ban_chat_so_quy|tojson }};
const CB_BAN_CHAT_MAP = Object.fromEntries(CB_BAN_CHAT.map(b => [b.ma, b]));
const CB_PL_TEN = {quan_ly: 'Chi phí quản lý DN', ban_hang: 'Chi phí bán hàng',
  tai_chinh: 'mục Tài chính', khac: 'mục Khác (thu nhập/chi phí khác)'};
function _cbBanChatHtml(loai, dongDau) {
  const ds = CB_BAN_CHAT.filter(b => b.loai === '*' || b.loai === loai);
  const nhom = (lst) => lst.map(b => `<option value="${b.ma}">${b.canh_bao ? '⚠️ ' : ''}${b.nhan}</option>`).join('');
  return `<option value="">${dongDau}</option>`
    + `<optgroup label="── Doanh thu / chi phí của tiệm (tính lãi lỗ) ──">${nhom(ds.filter(b => b.phan_loai !== 'khong_tinh'))}</optgroup>`
    + `<optgroup label="── KHÔNG phải doanh thu / chi phí (chỉ tính tồn quỹ) ──">${nhom(ds.filter(b => b.phan_loai === 'khong_tinh'))}</optgroup>`;
}
function cbBanChatHint(selId, hintId) {
  const b = CB_BAN_CHAT_MAP[document.getElementById(selId).value];
  const el = document.getElementById(hintId);
  if (!el) return;
  if (!b) { el.innerHTML = ''; return; }
  let h = b.phan_loai === 'khong_tinh'
    ? '<span class="text-slate-500">→ Chỉ tính vào sổ quỹ / tồn quỹ, <b>KHÔNG</b> tính vào báo cáo lãi lỗ.</span>'
    : `<span class="text-emerald-700">→ Tính vào báo cáo lãi lỗ: <b>${CB_PL_TEN[b.phan_loai] || b.phan_loai}</b>.</span>`;
  if (b.canh_bao) h += '<br><span class="text-red-600 font-semibold">⚠️ Nên lập ở đúng trang nghiệp vụ (Bán hàng / Mua hàng / Cầm đồ). '
    + 'Ghi tay ở đây thì hàng hoặc phiếu KHÔNG vào/ra tồn kho, không có giá vốn.</span>';
  el.innerHTML = h;
}
function cbCapNhatPhanLoai() {
  const loai = document.getElementById('f-loai').value;
  const sel = document.getElementById('f-phanloai');
  sel.innerHTML = _cbBanChatHtml(loai, '⚠️ — Bắt buộc chọn: khoản tiền này là gì? — ⚠️');
  cbBanChatHint('f-phanloai', 'f-banchat-hint');
}
cbCapNhatPhanLoai();

// ── Hạng mục chi phí/thu nhập CHI TIẾT (27/08/2026) — gợi ý theo Thu/Chi đang chọn ──
async function cbLoadHangMucGoiY() {
  const loai = document.getElementById('f-loai').value;
  try {
    const r = await fetch('/api/pos/cashbook/hang-muc-goi-y?loai=' + loai, { cache: 'no-store' });
    const d = await r.json();
    document.getElementById('dl-hang-muc').innerHTML =
      (d.items || []).map(h => `<option value="${h.replace(/"/g,'&quot;')}">`).join('');
  } catch (e) { /* gợi ý là phụ, lỗi mạng không chặn ghi sổ */ }
}
cbLoadHangMucGoiY();

// ── Tách Tiền mặt / Chuyển khoản khi chọn "Cả hai" ──
function _cbSo(id) {
  return parseFloat((document.getElementById(id).value || '').replace(/\./g, '')) || 0;
}
function cbToggleSplit() {
  const caHai = document.getElementById('f-hinhthuc').value === 'ca_hai';
  document.getElementById('f-split-row').classList.toggle('hidden', !caHai);
  document.getElementById('f-sotien').classList.toggle('hidden', caHai);
  if (caHai) cbSplitTong();
}
function cbSplitTong() {
  const tm = _cbSo('f-tm'), ck = _cbSo('f-ck');
  document.getElementById('f-split-tong').textContent =
    (tm + ck) > 0 ? `→ Tổng ghi sổ: ${fmt(tm + ck)}đ (2 dòng: TM ${fmt(tm)}đ · CK ${fmt(ck)}đ)` : '';
}

// ═══ GHI THEO NÚT NGHIỆP VỤ (21/09/2026) ═══
let _cbKieu = '';
const CB_NOI_TEN = {{ noi_cat_tien|tojson }}.reduce((o, n) => (o[n.ma] = n.nhan, o), {});
const CB_KIEU_MOTA = {
  chi_phi:    'Khoản chi của tiệm. Tự tính vào báo cáo lãi lỗ theo đúng loại khoản đã chọn.',
  thu_khac:   'Khoản thu ngoài bán hàng. Tự tính vào báo cáo lãi lỗ.',
  noi_bo:     'Chỉ là di chuyển tiền của tiệm giữa các nơi cất. KHÔNG tính vào lãi lỗ.',
  doi_tien:   'App tự ghi 1 cặp thu – chi bằng nhau (cộng lại bằng 0). KHÔNG tính vào lãi lỗ.',
  ho_khach:   'Tiền của khách, không phải của tiệm. KHÔNG tính vào lãi lỗ.',
  chu_so_huu: 'Tiền chủ tiệm bỏ thêm vào hoặc lấy ra. KHÔNG tính vào lãi lỗ.',
  nang_cao:   'Tự chọn thu/chi và bản chất — chỉ dùng cho ca đặc biệt.',
};
function cbChonKieu(k) {
  _cbKieu = k;
  document.querySelectorAll('[data-kieu-btn]').forEach(b => b.classList.toggle('dang-chon', b.dataset.kieuBtn === k));
  document.querySelectorAll('#cb-nv-khung [data-kieu]').forEach(el => {
    el.classList.toggle('hidden', !el.dataset.kieu.split(' ').includes(k));
  });
  document.getElementById('cb-nv-khung').classList.remove('hidden');
  document.getElementById('cb-luu-khung').classList.remove('hidden');
  // Chuyển nội bộ / đổi tiền: hình thức do app tự quyết theo nơi cất / chiều đổi
  if (k === 'noi_bo' || k === 'doi_tien') document.getElementById('f-hinhthuc').value = 'tien_mat';
  cbToggleSplit();
  document.getElementById('f-noidung').placeholder = (k === 'nang_cao') ? 'Nội dung' :
    ((k === 'chi_phi' || k === 'thu_khac') ? 'Ghi chú thêm (bắt buộc nếu chọn "khác")' : 'Ghi chú thêm (không bắt buộc)');
  document.getElementById('add-msg').textContent = '';
  cbXemTruoc();
}
function _cbVal(id) { return (document.getElementById(id).value || '').trim(); }
function _cbHtTen(h) { return h === 'tien_mat' ? 'tiền mặt' : 'chuyển khoản'; }
// Dựng trước các dòng SẼ ghi — CÙNG quy tắc với pos_db.dung_dong_nghiep_vu (máy chủ vẫn là
// nơi quyết cuối cùng; đây chỉ để nhân viên nhìn thấy trước khi bấm Lưu).
function cbXemTruoc() {
  const box = document.getElementById('cb-xem-truoc');
  const k = _cbKieu;
  if (!k || k === 'nang_cao') { box.classList.add('hidden'); return; }
  const caHai = _cbVal('f-hinhthuc') === 'ca_hai';
  const tien = caHai ? (_cbSo('f-tm') + _cbSo('f-ck')) : _cbSo('f-sotien');
  const d = [];   // [loai, ht]
  if (k === 'noi_bo') {
    const tu = _cbVal('nv-tu'), den = _cbVal('nv-den');
    const htc = {quy_tm: 'tien_mat', ngan_hang: 'chuyen_khoan'};
    if (tu && den && tu === den) { box.innerHTML = '⚠️ Nơi lấy và nơi đến đang trùng nhau.'; box.classList.remove('hidden'); return; }
    if (tu && den && !htc[tu] && !htc[den]) { box.innerHTML = '⚠️ Két và tài khoản cá nhân đều không nằm trong sổ quỹ — không có gì để ghi.'; box.classList.remove('hidden'); return; }
    if (htc[tu]) d.push(['chi', htc[tu]]);
    if (htc[den]) d.push(['thu', htc[den]]);
  } else if (k === 'doi_tien') {
    const h = _cbVal('nv-huong-doi');
    if (h === 'tm_sang_ck') d.push(['thu', 'tien_mat'], ['chi', 'chuyen_khoan']);
    if (h === 'ck_sang_tm') d.push(['thu', 'chuyen_khoan'], ['chi', 'tien_mat']);
  } else {
    const loai = (k === 'chi_phi') ? 'chi' : (k === 'thu_khac') ? 'thu'
      : (k === 'chu_so_huu') ? (_cbVal('nv-huong-csh') === 'nop' ? 'thu' : (_cbVal('nv-huong-csh') ? 'chi' : ''))
      : ({{ ly_do_ho_khach|tojson }}.find(l => l.ma === _cbVal('nv-ly-do')) || {}).loai;
    if (loai) {
      if (caHai) { if (_cbSo('f-tm') > 0) d.push([loai, 'tien_mat']); if (_cbSo('f-ck') > 0) d.push([loai, 'chuyen_khoan']); }
      else d.push([loai, _cbVal('f-hinhthuc')]);
    }
  }
  let h = `<div class="text-slate-600 mb-1">ℹ️ ${CB_KIEU_MOTA[k]}</div>`;
  if (d.length && tien > 0) {
    h += '<div class="font-semibold text-slate-700">Sẽ ghi vào sổ quỹ:</div>' + d.map(([l, ht]) => {
      const st = caHai ? (ht === 'tien_mat' ? _cbSo('f-tm') : _cbSo('f-ck')) : tien;
      return `<div class="${l === 'thu' ? 'text-green-700' : 'text-red-600'}">• ${l === 'thu' ? 'Thu' : 'Chi'} ${fmt(st)}đ — ${_cbHtTen(ht)}</div>`;
    }).join('');
    if (k === 'noi_bo' && (_cbVal('nv-tu') === 'ket' || _cbVal('nv-den') === 'ket'))
      h += '<div class="text-slate-500 mt-1">(Két không nằm trong sổ quỹ nên phía két không có dòng.)</div>';
    if (k === 'noi_bo' && (_cbVal('nv-tu') === 'ca_nhan' || _cbVal('nv-den') === 'ca_nhan'))
      h += '<div class="text-amber-700 mt-1">Tài khoản cá nhân không phải tiền của tiệm: app ghi là chủ tiệm ' + (_cbVal('nv-den') === 'ca_nhan' ? 'RÚT tiền ra' : 'NỘP tiền vào') + ', không tính lãi lỗ. Chỉ tài khoản giám đốc ghi được.</div>';
  }
  box.innerHTML = h;
  box.classList.remove('hidden');
}
const CB_LOI_NV = {
  thieu_so_tien: 'Nhập số tiền.', noi_chuyen_khong_hop_le: 'Chọn đủ nơi lấy và nơi đến.',
  noi_chuyen_trung_nhau: 'Nơi lấy và nơi đến đang trùng nhau.', huong_doi_tien_khong_hop_le: 'Chọn chiều đổi tiền.',
  ly_do_khong_hop_le: 'Chọn trường hợp.', khoan_khong_hop_le: 'Chọn khoản.',
  thieu_ghi_chu: 'Đã chọn "khác" thì phải ghi rõ ở ô Ghi chú (ít nhất 5 ký tự).',
  huong_khong_hop_le: 'Chọn nộp hay rút.', noi_chuyen_ngoai_so_quy: 'Két và tài khoản cá nhân đều không nằm trong sổ quỹ — không có gì để ghi.', chi_giam_doc: 'Chỉ tài khoản giám đốc được ghi khoản này.',
  so_tien_am: 'Số tiền không được âm.', thoi_diem_tuong_lai: 'Thời điểm ở tương lai — kiểm lại ngày giờ.',
  thoi_diem_khong_hop_le: 'Thời điểm không hợp lệ.', wrong_pin: 'Sai mã PIN.',
  dung_nut_nghiep_vu: 'Hãy chọn một nút nghiệp vụ ở trên.', phai_dung_trang_nghiep_vu: 'Mua/bán/cầm đồ phải làm ở đúng trang nghiệp vụ.',
};
function _cbDonForm() {
  ['f-sotien', 'f-tm', 'f-ck', 'f-noidung', 'nv-khach'].forEach(id => document.getElementById(id).value = '');
  ['nv-khoan-chi', 'nv-khoan-thu', 'nv-tu', 'nv-den', 'nv-huong-doi', 'nv-ly-do', 'nv-huong-csh'].forEach(id => document.getElementById(id).value = '');
  cbSplitTong();
  document.getElementById('f-hinhthuc').value = 'tien_mat';   // xem giải thích ở _addEntryNangCao
  cbToggleSplit();
  document.getElementById('f-ngay').value = '';
  cbNgayHint();
  cbXemTruoc();
}
async function addEntry() {
  const msg = document.getElementById('add-msg');
  if (!_cbKieu) { msg.textContent = '⚠️ Chọn một nút ở bước 1 trước.'; msg.className = 'text-sm text-amber-600'; return; }
  if (_cbKieu === 'nang_cao') return _addEntryNangCao();
  const caHai = _cbVal('f-hinhthuc') === 'ca_hai';
  const tm = _cbSo('f-tm'), ck = _cbSo('f-ck');
  const body = {
    pin: getPin(), kieu: _cbKieu,
    hinh_thuc: _cbVal('f-hinhthuc'),
    so_tien: (caHai ? (tm + ck) : _cbSo('f-sotien')) / 1000,
    so_tien_tien_mat: tm / 1000, so_tien_chuyen_khoan: ck / 1000,
    ghi_chu: _cbVal('f-noidung'), ngay: _cbVal('f-ngay'), khach: _cbVal('nv-khach'),
    khoan: _cbKieu === 'chi_phi' ? _cbVal('nv-khoan-chi') : _cbVal('nv-khoan-thu'),
    tu: _cbVal('nv-tu'), den: _cbVal('nv-den'), ly_do: _cbVal('nv-ly-do'),
    huong: _cbKieu === 'doi_tien' ? _cbVal('nv-huong-doi') : _cbVal('nv-huong-csh'),
  };
  const res = await fetch('/api/pos/cashbook/nghiep-vu', {
    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)});
  const data = await res.json();
  if (data.success) {
    msg.textContent = `✅ Đã ghi ${data.so_dong} dòng vào sổ quỹ.`;
    msg.className = 'text-sm text-green-600 font-semibold';
    _cbDonForm();
    loadCashbook(); loadCashReport(); cbLoadMocKiem();
  } else {
    msg.textContent = '❌ ' + (CB_LOI_NV[data.error] || ('Lỗi: ' + data.error));
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function _addEntryNangCao() {
  const msg   = document.getElementById('add-msg');
  const caHai = document.getElementById('f-hinhthuc').value === 'ca_hai';
  const tm = _cbSo('f-tm'), ck = _cbSo('f-ck');
  const sotien = caHai ? (tm + ck) : _cbSo('f-sotien');
  if (!sotien || sotien <= 0) {
    msg.textContent = caHai ? '⚠️ Nhập số tiền mặt và/hoặc chuyển khoản.'
                            : '⚠️ Vui lòng nhập số tiền hợp lệ.';
    msg.className   = 'text-sm text-amber-600';
    return;
  }
  // BẮT BUỘC chọn Phân loại — không cho để trống rồi hệ thống tự đoán (06/09/2026, chủ
  // tiệm yêu cầu). Chặn ngay ở client cho phản hồi tức thì; server (/api/pos/cashbook)
  // cũng tự chặn lại (lỗi thieu_phan_loai) phòng khi ai đó gọi thẳng API.
  const phanLoai = document.getElementById('f-phanloai').value;
  if (phanLoai && CB_BAN_CHAT_MAP[phanLoai] && CB_BAN_CHAT_MAP[phanLoai].canh_bao) {
    msg.textContent = '❌ Mua/bán/cầm đồ phải làm ở đúng trang nghiệp vụ (Mua hàng / Bán hàng / Cầm đồ) để hàng vào tồn kho.';
    msg.className   = 'text-sm text-red-600 font-semibold';
    return;
  }
  if (!phanLoai) {
    msg.textContent = '⚠️ Vui lòng chọn khoản tiền này là gì — không được để trống.';
    msg.className   = 'text-sm text-amber-600';
    document.getElementById('f-phanloai').focus();
    return;
  }
  const res  = await fetch('/api/pos/cashbook', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      pin: getPin(), loai: document.getElementById('f-loai').value,
      hinh_thuc: document.getElementById('f-hinhthuc').value,
      so_tien: sotien / 1000,
      so_tien_tien_mat: tm / 1000,
      so_tien_chuyen_khoan: ck / 1000,
      noi_dung: document.getElementById('f-noidung').value.trim(),
      ngay: (document.getElementById('f-ngay').value || '').trim(),
      ban_chat: document.getElementById('f-phanloai').value,
      hang_muc: document.getElementById('f-hangmuc').value.trim(),
    })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ Đã ghi sổ quỹ.';
    msg.className   = 'text-sm text-green-600 font-semibold';
    document.getElementById('f-sotien').value  = '';
    document.getElementById('f-tm').value      = '';
    document.getElementById('f-ck').value      = '';
    cbSplitTong();
    document.getElementById('f-noidung').value = '';
    document.getElementById('f-phanloai').value = '';
    cbBanChatHint('f-phanloai', 'f-banchat-hint');
    document.getElementById('f-hangmuc').value = '';
    // ĐƯA HÌNH THỨC VỀ "Tiền mặt" SAU MỖI LẦN LƯU — <select> không tự reset khi ghi
    // qua fetch (trang không tải lại) nên GIỮ NGUYÊN lựa chọn lần ghi trước. Lỗi thật
    // 06/09/2026: 1 dòng lỡ chọn "Chuyển khoản" xong quên đổi lại → 2 dòng chi tiền mặt
    // thật (mua dầu mè, mua khăn quàng) bị ghi NHẦM sang chuyển khoản — tiền mặt trong
    // két đã ra thật nhưng sổ quỹ không trừ, tồn quỹ chuyển khoản lại bị trừ oan → lệch
    // quỹ tiền mặt đúng bằng khoản đó. "Tiền mặt" là hình thức phổ biến nhất (chi vặt
    // hàng ngày) nên chọn làm mặc định an toàn; ai ghi liền 2 dòng Chuyển khoản thì chọn
    // lại 1 lần nữa cho dòng sau — đỡ hơn nhiều so với âm thầm ghi sai loại quỹ.
    document.getElementById('f-hinhthuc').value = 'tien_mat';
    cbToggleSplit();
    // KHÔNG cbNgayNow() ở đây — nếu tab mở lâu rồi mới ghi dòng TIẾP THEO, mốc giờ cũ
    // sẽ bị coi là "đã chọn" và gửi kèm, ghi sai lùi ngày (lỗi thật 06/09/2026: dòng
    // "khăn quàng cho mốc" ghi lúc chiều nhưng ngay= 21:14 hôm trước còn sót trong ô,
    // vì trước đây field được auto-điền lúc lưu THÀNH CÔNG rồi để yên tới lần ghi kế).
    // Để TRỐNG → server tự lấy đúng giờ bấm lưu (_parse_ngay_nhap trả None cho ô rỗng).
    document.getElementById('f-ngay').value = '';
    cbNgayHint();
    loadCashbook(); loadCashReport(); cbLoadMocKiem();
    cbLoadHangMucGoiY();   // vừa ghi hạng mục mới (nếu có) → nạp lại gợi ý cho lần sau
  } else if (data.error === 'thoi_diem_khong_hop_le' || data.error === 'thoi_diem_tuong_lai') {
    msg.textContent = data.error === 'thoi_diem_tuong_lai'
      ? '❌ Thời điểm ở tương lai — kiểm lại ngày/giờ.'
      : '❌ Thời điểm không hợp lệ.';
    msg.className = 'text-sm text-red-600 font-semibold';
  } else if (data.error === 'thieu_phan_loai') {
    msg.textContent = '⚠️ Chưa chọn Phân loại — bắt buộc phải chọn trước khi ghi sổ.';
    msg.className = 'text-sm text-amber-600';
  } else {
    msg.textContent = '❌ ' + (CB_LOI_NV[data.error] || ('Lỗi: ' + data.error));
    msg.className   = 'text-sm text-red-600 font-semibold';
  }
}

loadCashbook();
loadCashReport();
// Ô Thời điểm để TRỐNG lúc mở trang (KHÔNG chốt sẵn giờ tải trang) — cùng lý do đã
// bỏ cbNgayNow() sau khi lưu: mở trang từ lâu mới ghi sổ thì giờ chốt sẵn đã cũ, dễ
// vô tình ghi lùi ngày. Để trống → server tự lấy đúng giờ bấm lưu.
cbNgayHint();
cbLoadMocKiem();      // lấy mốc kiểm tiền để nhắc trước/sau
setInterval(loadCashbook,  30000);
setInterval(loadCashReport, 1000);
document.addEventListener('kiemtien:saved', () => { loadCashbook(); loadCashReport(); });

// ── Sửa / Xóa giao dịch sổ quỹ (giám đốc / phó GĐ) ──
let _editCbId = null;

function cbeToggleSplit() {
  const caHai = document.getElementById('cbe-hinh_thuc').value === 'ca_hai';
  document.getElementById('cbe-split-row').classList.toggle('hidden', !caHai);
  document.getElementById('cbe-sotien-box').classList.toggle('hidden', caHai);
  if (caHai) {
    // Lần đầu chuyển sang "Cả hai": ném trọn số tiền hiện tại vào đúng kênh đang dùng
    if (!_cbSo('cbe-tm') && !_cbSo('cbe-ck')) {
      const tong = _cbSo('cbe-sotien');
      const o = document.getElementById(_cbHtCu === 'chuyen_khoan' ? 'cbe-ck' : 'cbe-tm');
      o.value = formatSplitAmt(tong);
    }
    cbeSplitTong();
  }
}
function cbeSplitTong() {
  const tm = _cbSo('cbe-tm'), ck = _cbSo('cbe-ck');
  document.getElementById('cbe-split-tong').textContent = (tm + ck) > 0
    ? `→ Tổng ${fmt(tm + ck)}đ — lưu xong tách thành 2 dòng: TM ${fmt(tm)}đ · CK ${fmt(ck)}đ`
    : '';
}

let _cbHtCu = 'tien_mat';

function cbeCapNhatPhanLoai() {
  const loai = document.getElementById('cbe-loai').value;
  document.getElementById('cbe-phanloai').innerHTML = _cbBanChatHtml(loai, '— Giữ nguyên như hiện tại —');
  cbBanChatHint('cbe-phanloai', 'cbe-banchat-hint');
}

function openCbEdit(e) {
  _editCbId = e.id;
  _cbHtCu = e.hinh_thuc || 'tien_mat';
  document.getElementById('cbe-loai').value = e.loai || 'thu';
  document.getElementById('cbe-sotien').value = formatSplitAmt((e.so_tien || 0) * 1000);
  document.getElementById('cbe-hinh_thuc').value = _cbHtCu;
  document.getElementById('cbe-noidung').value = e.noi_dung || '';
  // Sửa được luôn phân loại của dòng ĐÃ TẠO (06/09/2026 — trước chỉ chọn được lúc ghi mới,
  // dòng đã lỡ ghi sai/chưa gắn phải xóa-tạo-lại mới đổi được).
  cbeCapNhatPhanLoai();
  document.getElementById('cbe-phanloai').value = (e.ban_chat && CB_BAN_CHAT_MAP[e.ban_chat]) ? e.ban_chat : '';
  cbBanChatHint('cbe-phanloai', 'cbe-banchat-hint');
  document.getElementById('cbe-pl-hien').textContent = 'Đang tính trong báo cáo: '
    + (e.phan_loai === 'khong_tinh' ? 'không tính lãi lỗ' : (CB_PL_TEN[e.phan_loai] || 'mặc định (chưa chọn)'));
  document.getElementById('cbe-tm').value = '';
  document.getElementById('cbe-ck').value = '';
  cbeToggleSplit();
  document.getElementById('cbe-modal').classList.remove('hidden');
}

function saveCbEdit() {
  const caHai = document.getElementById('cbe-hinh_thuc').value === 'ca_hai';
  const tm = _cbSo('cbe-tm'), ck = _cbSo('cbe-ck');
  const soTienDong = caHai ? (tm + ck) : _cbSo('cbe-sotien');
  if (soTienDong <= 0) {
    alert(caHai ? '⚠️ Nhập số tiền mặt và/hoặc chuyển khoản.' : '⚠️ Nhập số tiền hợp lệ.');
    return;
  }
  askPin('Xác nhận lưu giao dịch sổ quỹ', async (pin) => {
    const res = await fetch(`/api/pos/cashbook/${_editCbId}`, {
      method: 'PUT', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        pin,
        loai: document.getElementById('cbe-loai').value,
        so_tien: soTienDong / 1000,
        hinh_thuc: document.getElementById('cbe-hinh_thuc').value,
        so_tien_tien_mat: tm / 1000,
        so_tien_chuyen_khoan: ck / 1000,
        noi_dung: document.getElementById('cbe-noidung').value.trim(),
        ban_chat: document.getElementById('cbe-phanloai').value,
      })
    });
    const d = await res.json();
    if (!d.success) { alert(`❌ Lỗi: ${d.error}`); return; }
    document.getElementById('cbe-modal').classList.add('hidden');
    if (d.tach_dong_moi) alert('✅ Đã tách thành 2 dòng sổ quỹ: 1 Tiền mặt + 1 Chuyển khoản.');
    loadCashbook(); loadCashReport();
  });
}

function deleteCbEntry(id, saleId, noiDung) {
  const isPawn = !saleId && (noiDung || '').includes('Phiếu ');
  const warn = saleId
    ? '⚠️ Giao dịch này thuộc một hóa đơn.\nXóa sẽ đồng thời hủy hóa đơn gốc và hoàn lại hàng vào kho.\nThao tác không thể hoàn tác.'
    : isPawn
    ? '⚠️ Giao dịch này liên quan đến phiếu cầm đồ.\nXóa sẽ đồng thời xóa toàn bộ phiếu cầm đồ và các giao dịch liên quan.\nThao tác không thể hoàn tác.'
    : '⚠️ Xóa giao dịch này khỏi sổ quỹ? Thao tác không thể hoàn tác.';
  if (!confirm(warn)) return;
  askPin('Xác nhận xóa giao dịch sổ quỹ', async (pin) => {
    const res = await fetch(`/api/pos/cashbook/${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; }
    if (d.deleted_sale) alert(`✅ Đã xóa giao dịch và hóa đơn ${d.deleted_sale}${d.so_sp ? ` — ${d.so_sp} SP hoàn lại kho` : ''}.`);
    if (d.deleted_pawn) alert(`✅ Đã xóa giao dịch và phiếu cầm đồ ${d.deleted_pawn}.`);
    loadCashbook(); loadCashReport();
  });
}
</script>

<!-- ── Modal sửa giao dịch sổ quỹ ── -->
<div id="cbe-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,.45)">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 p-6 max-h-[90vh] overflow-y-auto">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-bold text-lg">✏️ Sửa giao dịch sổ quỹ</h3>
      <button onclick="document.getElementById('cbe-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">&times;</button>
    </div>
    <div class="space-y-3">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="text-xs font-semibold text-gray-500">Loại</label>
          <select id="cbe-loai" class="input-ios w-full mt-0.5" onchange="cbeCapNhatPhanLoai()">
            <option value="thu">🟢 Thu</option>
            <option value="chi">🔴 Chi</option>
          </select>
        </div>
        <div>
          <label class="text-xs font-semibold text-gray-500">Hình thức</label>
          <select id="cbe-hinh_thuc" class="input-ios w-full mt-0.5" onchange="cbeToggleSplit()">
            <option value="tien_mat">💵 Tiền mặt</option>
            <option value="chuyen_khoan">🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 Cả hai (TM + CK)</option>
          </select>
        </div>
      </div>
      <div id="cbe-sotien-box">
        <label class="text-xs font-semibold text-gray-500">Số tiền (đồng)</label>
        <input id="cbe-sotien" type="text" inputmode="numeric" class="input-ios w-full mt-0.5" oninput="onSplitAmtInput(this)">
      </div>
      <!-- Chọn "Cả hai" → khoản này TÁCH THÀNH 2 DÒNG sổ quỹ (1 TM + 1 CK), giữ nguyên
           giờ ghi sổ gốc để không lệch tồn quỹ dự kiến qua mốc kiểm tiền. -->
      <div id="cbe-split-row" class="hidden grid grid-cols-2 gap-3">
        <div>
          <label class="text-xs font-semibold text-gray-500">💵 Tiền mặt (đồng)</label>
          <input id="cbe-tm" type="text" inputmode="numeric" class="input-ios w-full mt-0.5"
                 oninput="onSplitAmtInput(this); cbeSplitTong()">
        </div>
        <div>
          <label class="text-xs font-semibold text-gray-500">🏦 Chuyển khoản (đồng)</label>
          <input id="cbe-ck" type="text" inputmode="numeric" class="input-ios w-full mt-0.5"
                 oninput="onSplitAmtInput(this); cbeSplitTong()">
        </div>
        <div id="cbe-split-tong" class="col-span-2 text-sm font-bold text-slate-600"></div>
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Nội dung</label>
        <input id="cbe-noidung" type="text" class="input-ios w-full mt-0.5">
      </div>
      <div>
        <label class="text-xs font-semibold text-gray-500">Khoản tiền này là gì?</label>
        <select id="cbe-phanloai" class="input-ios w-full mt-0.5" onchange="cbBanChatHint('cbe-phanloai','cbe-banchat-hint')"></select>
        <div id="cbe-pl-hien" class="text-[11px] text-gray-400 mt-1"></div>
        <div id="cbe-banchat-hint" class="text-xs mt-1"></div>
      </div>
    </div>
    <div class="flex justify-end gap-2 mt-5">
      <button onclick="document.getElementById('cbe-modal').classList.add('hidden')" class="btn-ios btn-ios-gray px-5">Hủy</button>
      <button onclick="saveCbEdit()" class="btn-ios btn-ios-gold px-5">💾 Lưu</button>
    </div>
  </div>
</div>
{% endblock %}