{% extends "base.html" %}
{% block title %}Khách hàng — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Quản lý khách hàng (CRM){% endblock %}

{% block extra_style %}
  /* Bảng hồ sơ khách hàng — MÁY TÍNH: 6 cột rộng rãi, KHÔNG cắt chữ.
     (Trước đây 9 cột nhồi nhau: địa chỉ bị cắt "..." 653 ô, cột Tổng chi tiêu
     bị đẩy tràn ra ngoài thẻ.) ĐIỆN THOẠI: kiểu thẻ dọc `data-card-table`. */
  .crm-table td, .crm-table th { vertical-align: top; }
  .crm-table .crm-diachi {
    white-space: normal; word-break: break-word; line-height: 1.4;
  }
  .crm-table tbody tr:hover { background: #fffbeb; }
  @media (max-width: 640px) {
    .crm-table .crm-lienhe > div, .crm-table .crm-diachi { text-align: right; }
  }
{% endblock %}

{% block content %}

  <!-- ── BỘ LỌC / HÀNH ĐỘNG ── -->
  <div class="ios-card p-5">
    <div class="flex flex-wrap items-end gap-3">
      <div class="flex-1 min-w-[180px]">
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tìm khách hàng</label>
        <input id="f-search" class="input-ios !py-2 text-sm" placeholder="Tên, CCCD hoặc SĐT..." oninput="debouncedLoad()">
      </div>
      {% if crm_is_admin %}
      <button onclick="syncCustomers()" class="btn-ios btn-ios-secondary text-sm font-semibold text-amber-700 px-3 py-2">
        🔄 Đồng bộ từ giao dịch
      </button>
      {% endif %}
      {# Xuat/nhap Excel + bao cao phan loai: chi vai tro co quyen bao cao (chu tiem chot 28/07/2026) #}
      {% if xem_tong %}
      <a href="/api/crm/customers/export" class="btn-ios btn-ios-secondary text-sm font-semibold text-emerald-700 px-3 py-2">
        📥 Tải danh sách (Excel)
      </a>
      <a href="/api/crm/customers/import-template" class="btn-ios btn-ios-secondary text-sm font-semibold text-green-700 px-3 py-2">
        ⬇️ Tải mẫu Excel
      </a>
      <button onclick="document.getElementById('import-file').click()" class="btn-ios btn-ios-secondary text-sm font-semibold text-green-700 px-3 py-2">
        ⬆️ Nhập từ Excel
      </button>
      <input id="import-file" type="file" accept=".xlsx" class="hidden" onchange="importCustomers(this)">
      <a href="/bao-cao-khach-hang" class="btn-ios btn-ios-secondary text-sm font-semibold text-indigo-700 px-3 py-2">
        📊 Báo cáo phân loại
      </a>
      {% endif %}
      {% if crm_is_admin %}
      <button onclick="openAddModal()" class="btn-ios btn-ios-gold px-5 py-2.5 ml-auto">
        ➕ Thêm khách hàng
      </button>
      {% endif %}
    </div>
    <span id="sync-msg" class="text-xs font-semibold"></span>
    {% if not crm_is_admin %}
    <div class="text-xs text-gray-400 mt-2">
      🔒 Bạn chỉ xem được khách khi tìm bằng tên/SĐT — không xem được cả danh bạ. Chỉ sửa được
      <b>Ngày sinh</b> và <b>Ghi chú</b>; không thấy CCCD, địa chỉ, tổng chi tiêu của khách.
    </div>
    {% endif %}
  </div>

  {% if xem_tong %}
  <!-- ── LỌC KHÁCH HÀNG THEO GIAO DỊCH (27/08/2026) — KHÁC danh sách/báo cáo phân loại sẵn
       có: lọc theo khoảng thời gian CÓ giao dịch, số lượng, loại (bán/mua/cầm đồ), số tiền,
       xuất ra file Excel RIÊNG ("Báo cáo lọc khách theo giao dịch"). -->
  <details class="ios-card p-5">
    <summary class="font-bold text-gray-800 cursor-pointer select-none flex items-center gap-2">
      🔎 Lọc khách hàng theo giao dịch
      <span class="text-xs font-normal text-gray-400">(bấm để mở)</span>
    </summary>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
      <div style="align-self:end">
        <input type="date" id="lgd-tu-ngay" class="input-ios !py-2 text-sm w-full" placeholder="Có giao dịch từ ngày" aria-label="Có giao dịch từ ngày">
      </div>
      <div style="align-self:end">
        <input type="date" id="lgd-den-ngay" class="input-ios !py-2 text-sm w-full" placeholder="Đến ngày" aria-label="Đến ngày">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Loại giao dịch</label>
        <select id="lgd-loai" class="input-ios !py-2 text-sm w-full">
          <option value="tat_ca">Tất cả (bán + mua + cầm đồ)</option>
          <option value="ban">Bán hàng</option>
          <option value="mua">Mua hàng</option>
          <option value="cam_do">Cầm đồ</option>
        </select>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số lượng giao dịch — từ</label>
        <input type="number" min="0" id="lgd-so-gd-tu" class="input-ios !py-2 text-sm w-full" placeholder="Không giới hạn">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">đến</label>
        <input type="number" min="0" id="lgd-so-gd-den" class="input-ios !py-2 text-sm w-full" placeholder="Không giới hạn">
      </div>
      <div></div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tổng tiền giao dịch (đ) — từ</label>
        <input type="text" inputmode="numeric" id="lgd-tien-tu" class="input-ios !py-2 text-sm w-full money-inp" placeholder="Không giới hạn" oninput="onSplitAmtInput(this)">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">đến</label>
        <input type="text" inputmode="numeric" id="lgd-tien-den" class="input-ios !py-2 text-sm w-full money-inp" placeholder="Không giới hạn" oninput="onSplitAmtInput(this)">
      </div>
      <div class="flex items-end gap-2">
        <button onclick="locKhachTheoGiaoDich()" class="btn-ios btn-ios-gold px-4 py-2 text-sm flex-1">🔎 Xem kết quả</button>
      </div>
    </div>
    <div id="lgd-ket-qua" class="mt-4"></div>
  </details>
  {% endif %}

  <!-- ── DANH SÁCH KHÁCH HÀNG ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span class="font-extrabold text-gray-800">👥 Hồ sơ khách hàng</span>
      <span id="lbl-count" class="text-xs text-gray-400"></span>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm data-card-table crm-table">
        {% if crm_is_admin %}
        <colgroup>
          <col style="width:26%"><col style="width:16%"><col style="width:24%">
          <col style="width:13%"><col style="width:15%"><col style="width:6%">
        </colgroup>
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase tracking-wide">
          <tr>
            <th class="text-left px-4 py-2.5">Khách hàng</th>
            <th class="text-left px-3 py-2.5">Liên hệ</th>
            <th class="text-left px-3 py-2.5">Địa chỉ</th>
            <th class="text-center px-3 py-2.5">Giao dịch</th>
            <th class="text-right px-3 py-2.5">Tổng chi tiêu</th>
            <th class="px-3 py-2.5"></th>
          </tr>
        </thead>
        {% else %}
        <colgroup>
          <col style="width:34%"><col style="width:22%"><col style="width:22%"><col style="width:22%">
        </colgroup>
        <thead class="bg-gray-50 text-gray-400 text-xs uppercase tracking-wide">
          <tr>
            <th class="text-left px-4 py-2.5">Khách hàng</th>
            <th class="text-left px-3 py-2.5">SĐT</th>
            <th class="text-left px-3 py-2.5">Ngày sinh</th>
            <th class="px-3 py-2.5"></th>
          </tr>
        </thead>
        {% endif %}
        <tbody id="cust-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- ══ MODAL THÊM/SỬA KHÁCH HÀNG ══ -->
  <div id="cust-modal" class="fixed inset-0 z-50 hidden ios-backdrop bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-xl w-full max-w-sm max-h-[90vh] overflow-y-auto">
      <div class="flex justify-between items-center px-5 py-3.5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <h3 id="cust-modal-title" class="font-extrabold text-gray-800">➕ Thêm khách hàng</h3>
        <button onclick="closeCustModal()" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">&times;</button>
      </div>
      <div class="p-5 space-y-3">
        <input type="hidden" id="cust-id" value="">
        <button type="button"
          onclick="openScanner('cccd', {ten:'cust-ho-ten', cccd:'cust-cccd', diachi:'cust-dia-chi', ngaysinh:'cust-ngay-sinh'})"
          class="btn-ios btn-ios-secondary w-full text-sm font-semibold text-purple-700 py-2">
          📷 Quét QR mặt sau CCCD (tự điền tên · CCCD · địa chỉ · ngày sinh)
        </button>
        <div>
          <label class="lbl">Họ tên *</label>
          <input id="cust-ho-ten" class="inp" placeholder="Nguyễn Văn A">
        </div>
        <div>
          <label class="lbl">Số CCCD</label>
          <input id="cust-cccd" class="inp" placeholder="0123456789xx" inputmode="numeric">
        </div>
        <div>
          <label class="lbl">Số điện thoại</label>
          <input id="cust-dien-thoai" class="inp" placeholder="09xxxxxxxx" inputmode="tel">
        </div>
        <div>
          <label class="lbl">Địa chỉ</label>
          <input id="cust-dia-chi" class="inp" placeholder="">
        </div>
        <div>
          <label class="lbl">Ngày sinh</label>
          <input id="cust-ngay-sinh" type="date" class="inp">
        </div>
        <div>
          <label class="lbl">Nhóm khách hàng</label>
          <input id="cust-nhom" class="inp" placeholder="VIP, thân thiết...">
        </div>
        <div>
          <label class="lbl">Ghi chú</label>
          <input id="cust-ghi-chu" class="inp" placeholder="">
        </div>
        <div>
          <label class="lbl">Mã PIN</label>
          <input id="cust-pin" type="password" inputmode="numeric" maxlength="10"
            class="inp font-bold text-center tracking-widest" placeholder="••••">
        </div>
      </div>
      <div class="px-5 pb-5 flex items-center gap-2 flex-wrap">
        <button id="cust-btn-luu" onclick="saveCustomer()" class="btn-ios btn-ios-gold px-5 py-2 flex-1 min-w-0">💾 Lưu</button>
        <button id="cust-btn-gui-duyet" onclick="submitCrmForApproval()" class="btn-ios px-5 py-2 flex-1 min-w-0 font-bold text-white hidden" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">📤 Gửi Duyệt</button>
        <button id="cust-btn-delete" onclick="deleteCustomer()" class="hidden btn-ios bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 font-semibold px-3 py-2 text-sm whitespace-nowrap">🗑️ Xóa</button>
        <span id="cust-msg" class="text-xs text-red-500 w-full"></span>
        <button onclick="closeCustModal()" class="text-gray-400 text-sm hover:text-gray-600">Hủy</button>
      </div>
    </div>
  </div>

  <!-- ══ MODAL NHÂN VIÊN — CHỈ CẬP NHẬT NGÀY SINH + GHI CHÚ (24/08/2026) ══
       Tách RIÊNG khỏi #cust-modal/#detail-modal (dành cho GĐ/PGĐ) — nhân viên
       không bao giờ thấy CCCD/Địa chỉ/Tổng chi tiêu qua modal này, kể cả khi
       server trả về (server đã tự lược bỏ những trường đó ở /api/crm/customers/<id>). -->
  <div id="nv-cust-modal" class="fixed inset-0 z-50 hidden ios-backdrop bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-xl w-full max-w-sm">
      <div class="flex justify-between items-center px-5 py-3.5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <h3 class="font-extrabold text-gray-800">✏️ Cập nhật thông tin khách</h3>
        <button onclick="closeNvCustModal()" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">&times;</button>
      </div>
      <div class="p-5 space-y-3">
        <input type="hidden" id="nv-cust-id" value="">
        <div class="rounded-xl bg-gray-50 px-3 py-2.5">
          <div class="font-bold text-gray-800" id="nv-cust-ten">—</div>
          <div class="text-xs text-gray-400 mt-0.5" id="nv-cust-sdt"></div>
        </div>
        <div>
          <label class="lbl">Ngày sinh</label>
          <input id="nv-cust-ngay-sinh" type="date" class="inp">
        </div>
        <div>
          <label class="lbl">Ghi chú</label>
          <input id="nv-cust-ghi-chu" class="inp" placeholder="Sở thích, thói quen, dịp đặc biệt...">
        </div>
      </div>
      <div class="px-5 pb-5 flex items-center gap-2 flex-wrap">
        <button onclick="ghiChamSocNv()" class="btn-ios btn-ios-secondary text-xs font-semibold text-emerald-700 px-3 py-2"
                title="Ghi lại việc đã gọi/nhắn hỏi thăm khách này">📞 Đã liên hệ</button>
        <button onclick="saveNvCustomer()" class="btn-ios btn-ios-gold px-5 py-2 flex-1 min-w-0">💾 Lưu</button>
        <span id="nv-cust-msg" class="text-xs text-red-500 w-full"></span>
        <button onclick="closeNvCustModal()" class="text-gray-400 text-sm hover:text-gray-600">Đóng</button>
      </div>
    </div>
  </div>

  <!-- ══ MODAL CHI TIẾT KHÁCH HÀNG ══ -->
  <div id="detail-modal" class="fixed inset-0 z-50 hidden ios-backdrop bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-[24px] shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto overflow-x-hidden">
      <div class="flex justify-between items-center px-5 py-3.5 sticky top-0 bg-white z-10" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <div>
          <h3 id="detail-ten" class="font-extrabold text-gray-800">Khách hàng</h3>
          <div id="detail-sub" class="text-xs text-gray-400"></div>
        </div>
        <div class="flex items-center gap-2">
          <button onclick="ghiChamSoc()" class="btn-ios btn-ios-secondary text-xs font-semibold text-emerald-700 px-3 py-1.5"
                  title="Ghi lại việc đã gọi/nhắn hỏi thăm khách này">📞 Đã liên hệ</button>
          <button onclick="openEditFromDetail()" class="btn-ios btn-ios-secondary text-xs font-semibold text-amber-700 px-3 py-1.5">✏️ Sửa</button>
          <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">&times;</button>
        </div>
      </div>

      <!-- Tổng kết (luôn hiện) -->
      <div id="detail-summary" class="px-5 pt-4"></div>

      <!-- Tabs -->
      <div class="flex border-b border-gray-100 px-3 sticky top-0 bg-white z-10 overflow-x-auto">
        <button class="detail-tab-btn" data-tab="info" onclick="switchTab('info')">📋 Thông tin</button>
        <button class="detail-tab-btn" data-tab="sales" onclick="switchTab('sales')">🧾 Mua/bán</button>
        <button class="detail-tab-btn" data-tab="pawns" onclick="switchTab('pawns')">💍 Cầm đồ</button>
        <button class="detail-tab-btn" data-tab="orders" onclick="switchTab('orders')">📦 Đặt hàng</button>
        <button class="detail-tab-btn" data-tab="giacong" onclick="switchTab('giacong')">🔨 Gia công</button>
        <button class="detail-tab-btn" data-tab="notes" onclick="switchTab('notes')">📝 Ghi chú</button>
      </div>

      <div class="p-5">
        <div id="tab-info" class="tab-pane space-y-2 text-sm"></div>
        <div id="tab-sales" class="tab-pane hidden overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-400 text-sm uppercase">
              <tr>
                <th class="text-left px-3 py-2">Mã HĐ</th>
                <th class="text-left px-3 py-2">Ngày</th>
                <th class="text-left px-3 py-2">Loại</th>
                <th class="text-right px-3 py-2">Tổng tiền</th>
                <th class="text-left px-3 py-2">Trạng thái</th>
              </tr>
            </thead>
            <tbody id="sales-tbody"></tbody>
          </table>
        </div>
        <div id="tab-pawns" class="tab-pane hidden overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-400 text-sm uppercase">
              <tr>
                <th class="text-left px-3 py-2">Mã phiếu</th>
                <th class="text-left px-3 py-2">Ngày cầm</th>
                <th class="text-right px-3 py-2">Số tiền vay</th>
                <th class="text-left px-3 py-2">Trạng thái</th>
              </tr>
            </thead>
            <tbody id="pawns-tbody"></tbody>
          </table>
        </div>
        <div id="tab-orders" class="tab-pane hidden overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-400 text-sm uppercase">
              <tr>
                <th class="text-left px-3 py-2">Mã đơn</th>
                <th class="text-left px-3 py-2">Ngày đặt</th>
                <th class="text-right px-3 py-2">Cọc</th>
                <th class="text-right px-3 py-2">Trả thêm</th>
                <th class="text-left px-3 py-2">Trạng thái</th>
              </tr>
            </thead>
            <tbody id="orders-tbody"></tbody>
          </table>
        </div>
        <div id="tab-giacong" class="tab-pane hidden overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-400 text-sm uppercase">
              <tr>
                <th class="text-left px-3 py-2">Mã phiếu</th>
                <th class="text-left px-3 py-2">Ngày đặt</th>
                <th class="text-right px-3 py-2">Cọc</th>
                <th class="text-right px-3 py-2">Trả thêm</th>
                <th class="text-left px-3 py-2">Trạng thái</th>
              </tr>
            </thead>
            <tbody id="giacong-tbody"></tbody>
          </table>
        </div>
        <div id="tab-notes" class="tab-pane hidden space-y-3">
          <div class="flex flex-wrap gap-2">
            <input id="note-input" class="inp flex-1 min-w-full sm:min-w-0" placeholder="Ghi chú chăm sóc khách hàng...">
            <input id="note-pin" type="password" inputmode="numeric" maxlength="10" placeholder="PIN" class="inp w-20 text-center font-bold">
            <button onclick="addNote()" class="btn-ios btn-ios-gold px-4 py-2 whitespace-nowrap">➕ Thêm</button>
          </div>
          <div id="notes-list" class="space-y-2"></div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<style>
.lbl { display:block; font-size:11px; font-weight:600; color:#8a8a8e; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
.inp { width:100%; background:#f2f2f7; border:1.5px solid transparent; border-radius:12px;
       padding:9px 12px; outline:none; font-size:13px; color:#1c1c1e;
       transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.inp::placeholder { color:#bcbcc2; }
.inp:focus { background:#fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(139,0,0,.08); }
.detail-tab-btn {
  padding: 10px 14px; font-size: 13px; font-weight: 700; color: #9ca3af;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.detail-tab-btn.active { color: #b45309; border-bottom-color: #b45309; }
</style>
<script>
const PIN_KEY = 'vang_admin_pin';
// 24/08/2026: chế độ hiển thị theo vai trò — GĐ/PGĐ = đầy đủ, còn lại = thu gọn
// (không xem cả danh bạ, chỉ Tên/SĐT/Ngày sinh/Ghi chú). Server CŨNG chặn riêng
// (xem crm_routes.py) — biến này CHỈ quyết định GIAO DIỆN hiện gì, không phải
// lớp bảo mật duy nhất.
const _crmIsAdmin = {{ 'true' if crm_is_admin else 'false' }};
const fmt = n => Number(n||0).toLocaleString('vi-VN');
// Tiền lưu đơn vị NGHÌN đồng → hiển thị ĐỒNG (quy ước: người dùng chỉ nhìn thấy "đ")
const fmtD = n => fmt(Math.round((n||0)*1000)) + 'đ';
let _myRole = window._NV_ROLE || null;
(async () => { try { const d = await (await fetch('/api/my-perms')).json(); _myRole = d.role || null; } catch(e){} })();
let _customers = [];
let _curCustomer = null;

function getPin() { return document.getElementById('cust-pin').value.trim() || localStorage.getItem(PIN_KEY) || ''; }

// 27/08/2026: Lọc khách hàng theo giao dịch — API trả tiền đã ×1000 (ĐỒNG thật), KHÁC
// fmtD() ở trên (vốn nhân ×1000 từ số NGHÌN của crm_customers) — dùng fmt() trần + 'đ'
// để KHÔNG bị nhân lại lần 2.
const fmtDong = n => fmt(n || 0) + 'đ';
function _lgdParam(id) {
  const el = document.getElementById(id);
  const v = (el.value || '').replace(/\./g, '').trim();
  return v;
}
function _lgdQueryString() {
  const p = new URLSearchParams();
  const tu = document.getElementById('lgd-tu-ngay').value;
  const den = document.getElementById('lgd-den-ngay').value;
  if (tu) p.set('tu_ngay', tu);
  if (den) p.set('den_ngay', den);
  p.set('loai_gd', document.getElementById('lgd-loai').value);
  const soGdTu = _lgdParam('lgd-so-gd-tu'); if (soGdTu) p.set('so_gd_tu', soGdTu);
  const soGdDen = _lgdParam('lgd-so-gd-den'); if (soGdDen) p.set('so_gd_den', soGdDen);
  const tienTu = _lgdParam('lgd-tien-tu'); if (tienTu) p.set('tien_tu', tienTu);
  const tienDen = _lgdParam('lgd-tien-den'); if (tienDen) p.set('tien_den', tienDen);
  return p.toString();
}
async function locKhachTheoGiaoDich() {
  const box = document.getElementById('lgd-ket-qua');
  box.innerHTML = '<div class="text-sm text-gray-400 py-3">Đang lọc...</div>';
  try {
    const r = await fetch('/api/crm/loc-giao-dich?' + _lgdQueryString());
    const d = await r.json();
    if (!d.success) { box.innerHTML = '<div class="text-sm text-red-500 py-3">Không có quyền xem (chỉ vai trò có quyền Báo cáo).</div>'; return; }
    if (!d.khach.length) {
      box.innerHTML = '<div class="text-sm text-gray-400 py-3">Không có khách nào khớp bộ lọc.</div>';
      return;
    }
    const rows = d.khach.map((k, i) => `
      <tr class="border-t border-gray-50">
        <td class="px-2 py-1.5 text-center text-gray-400">${i + 1}</td>
        <td class="px-2 py-1.5 font-semibold">${k.ho_ten}</td>
        <td class="px-2 py-1.5 text-xs text-gray-500">${k.dien_thoai || '—'}</td>
        <td class="px-2 py-1.5 text-center font-bold text-amber-700">${k.so_gd_loc}</td>
        <td class="px-2 py-1.5 text-right font-bold text-emerald-700">${fmtDong(k.tong_tien_loc)}</td>
        <td class="px-2 py-1.5 text-xs text-gray-500 text-center">${k.so_gd_ban} bán · ${k.so_gd_mua} mua · ${k.so_gd_cam} cầm</td>
      </tr>`).join('');
    box.innerHTML = `
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-bold text-gray-700">✓ Khớp ${d.tong_so} khách</span>
        <a href="/api/crm/loc-giao-dich/export?${_lgdQueryString()}" class="btn-ios btn-ios-secondary text-xs font-semibold text-emerald-700 px-3 py-1.5">📥 Xuất Excel kết quả này</a>
      </div>
      <div class="overflow-x-auto border border-gray-100 rounded-xl">
        <table class="w-full text-sm">
          <thead class="bg-gray-50"><tr class="text-left text-xs text-gray-400 uppercase">
            <th class="px-2 py-2">#</th><th class="px-2 py-2">Tên</th><th class="px-2 py-2">SĐT</th>
            <th class="px-2 py-2 text-center">Số GD</th><th class="px-2 py-2 text-right">Tổng tiền</th>
            <th class="px-2 py-2 text-center">Chi tiết</th>
          </tr></thead>
          <tbody>${rows}</tbody>
        </table>
      </div>`;
  } catch (e) {
    box.innerHTML = '<div class="text-sm text-red-500 py-3">Lỗi kết nối.</div>';
  }
}

let _debounce = null;
function debouncedLoad() {
  clearTimeout(_debounce);
  _debounce = setTimeout(loadCustomers, 300);
}

async function loadCustomers() {
  const q = document.getElementById('f-search').value.trim();
  const tbody = document.getElementById('cust-tbody');
  // Nhân viên (không phải GĐ/PGĐ): KHÔNG được kéo cả danh bạ — bắt buộc gõ tìm
  // kiếm trước (server cũng chặn y hệt, đây chỉ là gợi ý cho đỡ gọi API vô ích).
  if (!_crmIsAdmin && !q) {
    _customers = [];
    document.getElementById('lbl-count').textContent = '';
    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-gray-300 py-8">
      🔍 Gõ tên hoặc số điện thoại khách để tìm</td></tr>`;
    return;
  }
  const res = await fetch('/api/crm/customers' + (q ? '?q=' + encodeURIComponent(q) : ''));
  const d = await res.json();
  _customers = d.customers || [];
  document.getElementById('lbl-count').textContent = `${_customers.length} khách hàng`;
  if (!_crmIsAdmin) {
    // Chế độ thu gọn: chỉ Tên/SĐT/Ngày sinh, mở modal riêng CHỈ sửa Ngày sinh+Ghi chú.
    veTheoLo(tbody, _customers, c => `
      <tr class="border-b border-gray-50 hover:bg-amber-50 cursor-pointer" onclick="openNvCustModal(${c.id})">
        <td class="px-4 py-2.5 dct-title">
          <div class="flex items-center gap-2.5">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-black flex-shrink-0"
                 style="background:${_avaColor(c.ho_ten)}">${vnInitial(c.ho_ten)}</div>
            <div class="font-bold text-gray-800 leading-snug break-words">${c.ho_ten}</div>
          </div>
        </td>
        <td class="px-3 py-2.5 text-gray-700 tabular-nums" data-label="SĐT">${c.dien_thoai || '<span class="text-gray-300">—</span>'}</td>
        <td class="px-3 py-2.5 text-gray-700" data-label="Ngày sinh">${c.ngay_sinh || '<span class="text-gray-300">—</span>'}</td>
        <td class="px-3 py-2.5 text-center dct-act" onclick="event.stopPropagation()">
          <button onclick="openNvCustModal(${c.id})" title="Cập nhật ngày sinh / ghi chú"
            class="text-xs font-semibold text-amber-700 bg-amber-50 hover:bg-amber-100 border border-amber-200 rounded-lg px-2.5 py-1.5 whitespace-nowrap">
            ✏️ Cập nhật
          </button>
        </td>
      </tr>`, { moiLo: 40,
          khiRong: '<tr><td colspan="4" class="text-center text-gray-300 py-8">Không tìm thấy khách nào</td></tr>' });
    return;
  }
  // Dựng THEO LÔ: 2.160 khách dựng một mạch làm máy đứng hình 3,1 giây (đo 29/07/2026).
  // Lô đầu hiện ngay, cuộn tới đâu dựng tiếp — không bỏ sót khách nào.
  veTheoLo(tbody, _customers, c => `
    <tr class="border-b border-gray-50 hover:bg-amber-50 cursor-pointer" onclick="openCustomer(${c.id})">
      <td class="px-4 py-2.5 dct-title">
        <div class="flex items-center gap-2.5">
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-black flex-shrink-0"
               style="background:${_avaColor(c.ho_ten)}">${vnInitial(c.ho_ten)}</div>
          <div class="min-w-0">
            <div class="font-bold text-gray-800 leading-snug break-words">${c.ho_ten}</div>
            <div class="mt-0.5">${_nhomBadge(c.nhom)}</div>
          </div>
        </div>
      </td>
      <td class="px-3 py-2.5 crm-lienhe" data-label="Liên hệ">
        <div class="font-semibold text-gray-700 tabular-nums">${c.dien_thoai ? '📱 ' + c.dien_thoai : '<span class="text-gray-300">— chưa có SĐT</span>'}</div>
        <div class="text-[11px] text-gray-400 tabular-nums mt-0.5">${c.cccd ? '🪪 ' + c.cccd : '—'}</div>
      </td>
      <td class="px-3 py-2.5 text-gray-600 crm-diachi" data-label="Địa chỉ">${c.dia_chi || '<span class="text-gray-300">—</span>'}</td>
      <td class="px-3 py-2.5 text-center" data-label="Giao dịch">
        <div class="font-bold text-gray-700">${fmt(c.so_giao_dich)}<span class="text-[11px] font-normal text-gray-400"> lần</span></div>
        ${c.so_lan_cam ? `<div class="text-[11px] text-purple-600 mt-0.5">💍 cầm ${fmt(c.so_lan_cam)}</div>` : ''}
      </td>
      <td class="px-3 py-2.5 text-right font-bold text-gray-800 tabular-nums" data-label="Tổng chi tiêu">${fmtD(c.tong_chi_tieu)}</td>
      <td class="px-3 py-2.5 text-center dct-act" onclick="event.stopPropagation()">
        <button onclick="openEditModal(_customers.find(x=>x.id===${c.id}))" title="Sửa hồ sơ"
          class="text-xs font-semibold text-amber-700 bg-amber-50 hover:bg-amber-100 border border-amber-200 rounded-lg px-2.5 py-1.5 whitespace-nowrap">
          ✏️ Sửa
        </button>
      </td>
    </tr>`, { moiLo: 40,
        khiRong: '<tr><td colspan="6" class="text-center text-gray-300 py-8">Chưa có hồ sơ khách hàng</td></tr>' });
}

// Màu avatar ổn định theo tên (hash đơn giản)
const _AVA = ['#b45309','#16a34a','#2563eb','#7c3aed','#dc2626','#0891b2','#db2777','#65a30d'];
function _avaColor(name) {
  let h = 0; for (const ch of (name||'')) h = (h * 31 + ch.charCodeAt(0)) & 0xffff;
  return _AVA[h % _AVA.length];
}
function _nhomBadge(nhom) {
  if (!nhom) return '—';
  const n = nhom.toLowerCase();
  let s = 'background:#f1f5f9;color:#475569';
  if (n.includes('vip') || n.includes('kim cương')) s = 'background:#fef3c7;color:#92400e';
  else if (n.includes('thân') || n.includes('vàng'))   s = 'background:#fee2e2;color:#991b1b';
  else if (n.includes('bạc'))                          s = 'background:#e0e7ff;color:#3730a3';
  else if (n.includes('mới'))                          s = 'background:#dcfce7;color:#166534';
  return `<span class="text-xs font-semibold rounded-full px-2 py-0.5" style="${s}">${nhom}</span>`;
}

function syncCustomers() {
  // PIN qua modal ẩn ****** (askPin của base.html) — không dùng prompt() vì lộ chữ
  askPin('Đồng bộ khách hàng từ giao dịch — nhập mã PIN:', _doSyncCustomers);
}
async function _doSyncCustomers(pin) {
  const res = await fetch('/api/crm/sync', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({pin})
  });
  const d = await res.json();
  const msg = document.getElementById('sync-msg');
  if (d.success) {
    msg.className = 'text-xs font-semibold text-green-600';
    msg.textContent = `Đã thêm ${d.added} khách hàng mới từ lịch sử giao dịch.`;
    loadCustomers();
  } else {
    msg.className = 'text-xs font-semibold text-red-600';
    msg.textContent = 'Sai mã PIN hoặc không có quyền.';
  }
}

function importCustomers(input) {
  const file = input.files && input.files[0];
  input.value = '';   // reset để chọn lại cùng file vẫn kích hoạt onchange
  if (!file) return;
  // PIN qua modal ẩn ****** (askPin của base.html) — không dùng prompt() vì lộ chữ
  askPin(`Nhập khách hàng từ file "${file.name}" — nhập mã PIN:`, pin => _doImportCustomers(file, pin));
}
async function _doImportCustomers(file, pin) {
  const msg = document.getElementById('sync-msg');
  msg.className = 'text-xs font-semibold text-gray-500';
  msg.textContent = '⏳ Đang nhập dữ liệu...';
  const fd = new FormData();
  fd.append('file', file);
  fd.append('pin', pin);
  try {
    const res = await fetch('/api/crm/customers/import', { method: 'POST', body: fd });
    const d = await res.json();
    if (d.success) {
      msg.className = 'text-xs font-semibold text-green-600';
      let t = `✅ Đã nhập xong: thêm mới ${d.added}, cập nhật ${d.updated} (tổng ${d.total} dòng).`;
      if (d.errors && d.errors.length) t += ` ⚠️ ${d.errors.length} dòng bỏ qua: ${d.errors.join('; ')}`;
      msg.textContent = t;
      loadCustomers();
    } else {
      msg.className = 'text-xs font-semibold text-red-600';
      msg.textContent = d.error === 'wrong_pin' ? '❌ Sai mã PIN hoặc không có quyền.' : `❌ Lỗi: ${d.error}`;
    }
  } catch (e) {
    msg.className = 'text-xs font-semibold text-red-600';
    msg.textContent = '❌ Lỗi kết nối: ' + e.message;
  }
}

// ── Modal thêm/sửa ──────────────────────────────────────────
function openAddModal() {
  document.getElementById('cust-modal-title').textContent = '➕ Thêm khách hàng';
  document.getElementById('cust-id').value = '';
  document.getElementById('cust-ho-ten').value = '';
  document.getElementById('cust-cccd').value = '';
  document.getElementById('cust-dien-thoai').value = '';
  document.getElementById('cust-dia-chi').value = '';
  fpSet('cust-ngay-sinh', '');
  document.getElementById('cust-nhom').value = '';
  document.getElementById('cust-ghi-chu').value = '';
  document.getElementById('cust-pin').value = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('cust-btn-delete').classList.add('hidden');
  document.getElementById('cust-btn-luu').classList.remove('hidden');
  document.getElementById('cust-btn-gui-duyet').classList.add('hidden');
  document.getElementById('cust-msg').textContent = '';
  document.getElementById('cust-modal').classList.remove('hidden');
}

let _editCrmOriginal = null;

function openEditModal(c) {
  _editCrmOriginal = c;
  document.getElementById('cust-modal-title').textContent = '✏️ Sửa khách hàng';
  document.getElementById('cust-id').value = c.id;
  document.getElementById('cust-ho-ten').value = c.ho_ten || '';
  document.getElementById('cust-cccd').value = c.cccd || '';
  document.getElementById('cust-dien-thoai').value = c.dien_thoai || '';
  document.getElementById('cust-dia-chi').value = c.dia_chi || '';
  fpSet('cust-ngay-sinh', c.ngay_sinh || '');
  document.getElementById('cust-nhom').value = c.nhom || '';
  document.getElementById('cust-ghi-chu').value = c.ghi_chu || '';
  document.getElementById('cust-pin').value = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('cust-btn-delete').classList.remove('hidden');
  document.getElementById('cust-msg').textContent = '';
  const isGdPgd = _myRole === 'giam_doc' || _myRole === 'pho_giam_doc' || !_myRole;
  document.getElementById('cust-btn-luu').classList.toggle('hidden', !isGdPgd);
  document.getElementById('cust-btn-gui-duyet').classList.toggle('hidden', isGdPgd);
  document.getElementById('cust-modal').classList.remove('hidden');
}

function openEditFromDetail() {
  if (!_curCustomer) return;
  closeDetailModal();
  openEditModal(_curCustomer);
}

function closeCustModal() {
  document.getElementById('cust-modal').classList.add('hidden');
}

async function saveCustomer() {
  const pin = getPin();
  if (pin) localStorage.setItem(PIN_KEY, pin);
  const id = document.getElementById('cust-id').value;
  const payload = {
    ho_ten: document.getElementById('cust-ho-ten').value.trim(),
    cccd: document.getElementById('cust-cccd').value.trim(),
    dien_thoai: document.getElementById('cust-dien-thoai').value.trim(),
    dia_chi: document.getElementById('cust-dia-chi').value.trim(),
    ngay_sinh: document.getElementById('cust-ngay-sinh').value,
    nhom: document.getElementById('cust-nhom').value.trim(),
    ghi_chu: document.getElementById('cust-ghi-chu').value.trim(),
    pin,
  };
  if (!payload.ho_ten) {
    document.getElementById('cust-msg').textContent = 'Vui lòng nhập họ tên.';
    return;
  }
  const url = id ? `/api/crm/customers/${id}` : '/api/crm/customers';
  const method = id ? 'PUT' : 'POST';
  const res = await fetch(url, {method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)});
  const d = await res.json();
  if (d.success) {
    closeCustModal();
    loadCustomers();
  } else if (d.error === 'cccd_exists') {
    document.getElementById('cust-msg').textContent = 'Số CCCD này đã có hồ sơ khác.';
  } else if (d.error === 'wrong_pin') {
    document.getElementById('cust-msg').textContent = 'Sai mã PIN hoặc không có quyền.';
  } else {
    document.getElementById('cust-msg').textContent = 'Có lỗi xảy ra, vui lòng thử lại.';
  }
}

async function submitCrmForApproval() {
  const id = document.getElementById('cust-id').value;
  if (!id) return;
  const ho_ten = document.getElementById('cust-ho-ten').value.trim();
  if (!ho_ten) { document.getElementById('cust-msg').textContent = 'Vui lòng nhập họ tên.'; return; }
  const payload = {
    ho_ten,
    cccd: document.getElementById('cust-cccd').value.trim(),
    dien_thoai: document.getElementById('cust-dien-thoai').value.trim(),
    dia_chi: document.getElementById('cust-dia-chi').value.trim(),
    ngay_sinh: document.getElementById('cust-ngay-sinh').value,
    nhom: document.getElementById('cust-nhom').value.trim(),
    ghi_chu: document.getElementById('cust-ghi-chu').value.trim(),
  };
  const btn = document.getElementById('cust-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 = _editCrmOriginal || {};
          const changes = [];
          const _cmp = (label, ov, nv) => { if (String(ov??'') !== String(nv??'')) changes.push({label, old: ov||'—', new: nv||'—'}); };
          _cmp('Họ tên', o.ho_ten, payload.ho_ten);
          _cmp('Điện thoại', o.dien_thoai, payload.dien_thoai);
          _cmp('CCCD/CMND', o.cccd, payload.cccd);
          _cmp('Địa chỉ', o.dia_chi, payload.dia_chi);
          _cmp('Ngày sinh', o.ngay_sinh, payload.ngay_sinh);
          _cmp('Nhóm KH', o.nhom, payload.nhom);
          _cmp('Ghi chú', o.ghi_chu, payload.ghi_chu);
          if (changes.length) { payload._delta = changes.map(c=>`${c.label}: ${c.old} → ${c.new}`); payload._changes = changes; }
          return { loai: 'crm', phieu_id: parseInt(id), payload,
            mo_ta: `KH ${payload.ho_ten} — ${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('cust-modal').classList.add('hidden');
      alert('✅ Đã gửi yêu cầu duyệt. Vui lòng chờ GĐ/PGĐ xem xét.');
    } else {
      document.getElementById('cust-msg').textContent = '❌ ' + (d.message || d.error || 'Gửi thất bại');
    }
  } finally {
    btn.disabled = false; btn.textContent = '📤 Gửi Duyệt';
  }
}

async function deleteCustomer() {
  const id = document.getElementById('cust-id').value;
  if (!id) return;
  if (!confirm('Xóa hồ sơ khách hàng này? Ghi chú liên quan cũng sẽ bị xóa.')) return;
  const pin = getPin();
  const res = await fetch(`/api/crm/customers/${id}`, {
    method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({pin})
  });
  const d = await res.json();
  if (d.success) {
    closeCustModal();
    loadCustomers();
  } else {
    document.getElementById('cust-msg').textContent = 'Sai mã PIN hoặc không có quyền.';
  }
}

// ── Modal NHÂN VIÊN — CHỈ Ngày sinh + Ghi chú (24/08/2026) ──────────────────
let _curNvCustomer = null;

async function openNvCustModal(id) {
  const res = await fetch(`/api/crm/customers/${id}`);
  const d = await res.json();
  if (!d.customer) return;
  _curNvCustomer = d.customer;
  document.getElementById('nv-cust-id').value = d.customer.id;
  document.getElementById('nv-cust-ten').textContent = d.customer.ho_ten || '';
  document.getElementById('nv-cust-sdt').textContent = d.customer.dien_thoai
    ? '📱 ' + d.customer.dien_thoai : 'Chưa có SĐT';
  fpSet('nv-cust-ngay-sinh', d.customer.ngay_sinh || '');
  document.getElementById('nv-cust-ghi-chu').value = d.customer.ghi_chu || '';
  document.getElementById('nv-cust-msg').textContent = '';
  document.getElementById('nv-cust-modal').classList.remove('hidden');
}

function closeNvCustModal() {
  document.getElementById('nv-cust-modal').classList.add('hidden');
}

async function saveNvCustomer() {
  const id = document.getElementById('nv-cust-id').value;
  if (!id) return;
  const payload = {
    ngay_sinh: document.getElementById('nv-cust-ngay-sinh').value,
    ghi_chu: document.getElementById('nv-cust-ghi-chu').value.trim(),
  };
  const res = await fetch(`/api/crm/customers/${id}`, {
    method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
  });
  const d = await res.json();
  if (d.success) {
    closeNvCustModal();
    loadCustomers();
  } else {
    document.getElementById('nv-cust-msg').textContent = 'Có lỗi xảy ra, vui lòng thử lại.';
  }
}

async function ghiChamSocNv() {
  const c = _curNvCustomer;
  if (!c) return;
  if (!c.dien_thoai) {
    alert('Khách này chưa có số điện thoại nên chưa ghi được liên hệ.');
    return;
  }
  const kenh = prompt('Đã liên hệ khách "' + (c.ho_ten || '') + '" bằng cách nào?\n\n'
    + '1 = Gọi điện   2 = Nhắn Zalo   3 = Nhắn tin   4 = Gặp trực tiếp', '1');
  if (kenh === null) return;
  const MAP = {'1': 'goi_dien', '2': 'zalo', '3': 'nhan_tin', '4': 'gap_truc_tiep'};
  const nd = prompt('Nội dung trao đổi (không bắt buộc):', '') || '';
  const r = await fetch('/api/cham-soc-khach', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({dien_thoai: c.dien_thoai, ten_khach: c.ho_ten || '',
                          kenh: MAP[kenh] || 'goi_dien', noi_dung: nd})
  });
  const d = await r.json();
  if (!d.success) {
    alert(d.error === 'tai_khoan_chua_lien_ket_ho_so_nv'
      ? 'Tài khoản của bạn chưa được liên kết với hồ sơ nhân viên.\nBáo quản lý gắn giúp ở trang Chấm công → Liên kết tài khoản.'
      : ('Chưa ghi được: ' + (d.error || '')));
    return;
  }
  alert('✓ Đã ghi nhận chăm sóc khách ' + (c.ho_ten || '') + '.');
}

// ── Modal chi tiết ──────────────────────────────────────────
async function openCustomer(id) {
  const res = await fetch(`/api/crm/customers/${id}`);
  const d = await res.json();
  if (!d.customer) return;
  _curCustomer = d.customer;
  document.getElementById('detail-ten').textContent = d.customer.ho_ten;
  document.getElementById('detail-sub').textContent =
    [d.customer.cccd ? `CCCD: ${d.customer.cccd}` : null, d.customer.dien_thoai ? `SĐT: ${d.customer.dien_thoai}` : null]
      .filter(Boolean).join(' · ') || 'Chưa có CCCD/SĐT';

  // ── Khối tổng kết (báo cáo nhanh) ──
  const sm = (d.history && d.history.summary) || {};
  const vnd = k => fmt((k || 0) * 1000) + 'đ';
  const statCard = (val, label, color) => `
    <div class="rounded-2xl p-3 text-center" style="background:${color}22">
      <div class="text-xl font-black" style="color:${color}">${val}</div>
      <div class="text-[11px] font-semibold text-gray-500 mt-0.5">${label}</div>
    </div>`;
  document.getElementById('detail-summary').innerHTML = `
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
      ${statCard(fmt(sm.so_giao_dich || 0), 'Tổng giao dịch', '#b45309')}
      ${statCard(vnd(sm.tong_chi_tieu), 'Đã mua của tiệm', '#16a34a')}
      ${statCard(vnd(sm.tong_ban_cho_tiem), 'Đã bán cho tiệm', '#dc2626')}
      ${statCard(fmt(sm.so_lan_cam || 0) + ' lần', 'Cầm đồ', '#7c3aed')}
    </div>
    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-400 mt-2 px-1">
      <span>🛍️ Mua ${sm.so_lan_mua || 0} lần</span>
      <span>📦 Đặt hàng ${sm.so_don_dat || 0}</span>
      <span>🔨 Gia công ${sm.so_don_gia_cong || 0}</span>
      ${sm.lan_dau ? `<span class="ml-auto">Giao dịch đầu: <b>${sm.lan_dau}</b> · Gần nhất: <b>${sm.lan_gan_nhat}</b></span>` : ''}
    </div>`;

  document.getElementById('tab-info').innerHTML = `
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      <div><span class="text-gray-400">Họ tên:</span> <span class="font-semibold">${d.customer.ho_ten}</span></div>
      <div><span class="text-gray-400">CCCD:</span> ${d.customer.cccd || '—'}</div>
      <div><span class="text-gray-400">SĐT:</span> ${d.customer.dien_thoai || '—'}</div>
      <div><span class="text-gray-400">Ngày sinh:</span> ${d.customer.ngay_sinh || '—'}</div>
      <div><span class="text-gray-400">Nhóm:</span> ${d.customer.nhom || '—'}</div>
      <div class="sm:col-span-2"><span class="text-gray-400">Địa chỉ:</span> ${d.customer.dia_chi || '—'}</div>
      <div class="sm:col-span-2"><span class="text-gray-400">Ghi chú:</span> ${d.customer.ghi_chu || '—'}</div>
      <div class="sm:col-span-2 text-gray-400 pt-2 border-t mt-1">
        Tạo: ${d.customer.created_at || '—'} · Cập nhật: ${d.customer.updated_at || '—'}
      </div>
    </div>`;

  const H = d.history || {};
  document.getElementById('sales-tbody').innerHTML = (H.sales || []).map(s => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-2 font-mono">${s.ma_hd}</td>
      <td class="px-3 py-2 whitespace-nowrap">${s.ngay}</td>
      <td class="px-3 py-2">${s.loai === 'ban' ? '🟢 Bán' : '🔴 Mua'}</td>
      <td class="px-3 py-2 text-right font-semibold">${fmt(s.tong_tien)}k</td>
      <td class="px-3 py-2">${_stLabel(s.trang_thai)}</td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-6">Chưa có giao dịch mua/bán</td></tr>';

  document.getElementById('pawns-tbody').innerHTML = (H.pawns || []).map(p => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-2 font-mono">${p.ma_gd}</td>
      <td class="px-3 py-2 whitespace-nowrap">${p.ngay_cam}</td>
      <td class="px-3 py-2 text-right font-semibold">${fmt(p.so_tien_muon)}k</td>
      <td class="px-3 py-2">${p.tinh_trang || _stLabel(p.trang_thai)}</td>
    </tr>`).join('') || '<tr><td colspan="4" class="text-center text-gray-300 py-6">Chưa có lịch sử cầm đồ</td></tr>';

  document.getElementById('orders-tbody').innerHTML = (H.orders || []).map(o => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-2 font-mono">${o.ma_dh}</td>
      <td class="px-3 py-2 whitespace-nowrap">${(o.ngay_dat||'').split(' ')[0]}</td>
      <td class="px-3 py-2 text-right">${fmt(o.tong_tien_coc)}k</td>
      <td class="px-3 py-2 text-right">${fmt(o.so_tien_thu_them)}k</td>
      <td class="px-3 py-2">${_stLabel(o.trang_thai)}</td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-6">Chưa có đơn đặt hàng</td></tr>';

  document.getElementById('giacong-tbody').innerHTML = (H.gia_cong || []).map(g => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-2 font-mono">${g.ma_gc}</td>
      <td class="px-3 py-2 whitespace-nowrap">${(g.ngay_dat||'').split(' ')[0]}</td>
      <td class="px-3 py-2 text-right">${fmt(g.tong_tien_coc)}k</td>
      <td class="px-3 py-2 text-right">${fmt(g.so_tien_thu_them)}k</td>
      <td class="px-3 py-2">${_stLabel(g.trang_thai)}</td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-6">Chưa có đơn gia công</td></tr>';

  renderNotes(d.notes || []);
  switchTab('info');
  document.getElementById('detail-modal').classList.remove('hidden');
}

function _stLabel(st) {
  return ({
    hoan_thanh:'✅ Hoàn thành', nhap:'📝 Nháp', hoan_lai:'↩️ Hoàn lại',
    chua_lay:'⏳ Chưa lấy', da_lay:'✅ Đã lấy', da_huy:'❌ Đã hủy',
    dang_lam:'🔨 Đang làm', da_giao:'✅ Đã giao',
    chua_lay_hang:'⏳ Đang cầm', da_chuoc:'✅ Đã chuộc', da_thanh_ly:'⚠️ Thanh lý',
  })[st] || (st || '');
}

function renderNotes(notes) {
  document.getElementById('notes-list').innerHTML = notes.map(n => `
    <div class="ios-card p-3 flex justify-between items-start gap-2">
      <div>
        <div class="text-sm text-gray-700 whitespace-pre-wrap">${n.noi_dung}</div>
        <div class="text-xs text-gray-400 mt-1">${n.nguoi_tao || ''} · ${n.created_at || ''}</div>
      </div>
      <button onclick="deleteNote(${n.id})" class="text-gray-300 hover:text-red-500 text-lg leading-none flex-shrink-0">&times;</button>
    </div>`).join('') || '<div class="text-center text-gray-300 py-6 text-sm">Chưa có ghi chú</div>';
}

async function addNote() {
  if (!_curCustomer) return;
  const noi_dung = document.getElementById('note-input').value.trim();
  if (!noi_dung) return;
  const pin = document.getElementById('note-pin').value.trim() || localStorage.getItem(PIN_KEY) || '';
  const res = await fetch(`/api/crm/customers/${_curCustomer.id}/notes`, {
    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({noi_dung, pin})
  });
  const d = await res.json();
  if (d.success) {
    if (pin) localStorage.setItem(PIN_KEY, pin);
    document.getElementById('note-input').value = '';
    openCustomer(_curCustomer.id);
  } else {
    alert('Sai mã PIN hoặc không có quyền.');
  }
}

async function deleteNote(noteId) {
  if (!confirm('Xóa ghi chú này?')) return;
  const pin = document.getElementById('note-pin').value.trim() || localStorage.getItem(PIN_KEY) || '';
  const res = await fetch(`/api/crm/notes/${noteId}`, {
    method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({pin})
  });
  const d = await res.json();
  if (d.success) {
    openCustomer(_curCustomer.id);
  } else {
    alert('Sai mã PIN hoặc không có quyền.');
  }
}

// ── Ghi lại việc CHĂM SÓC khách (gọi/nhắn hỏi thăm) ──
// App chỉ lưu VẾT ai chăm ai lúc nào. Nhân viên KHÔNG thấy điểm/công thức KPI.
// (Vết này là bằng chứng mạnh nhất cho "mình chăm → khách quay lại mua".)
async function ghiChamSoc(){
  const c = _curCustomer;
  if (!c) return;
  if (!(c.cccd || c.dien_thoai)){
    alert('Khách này chưa có CCCD hoặc số điện thoại nên chưa ghi được.\nBấm ✏️ Sửa để bổ sung trước.');
    return;
  }
  const kenh = prompt('Đã liên hệ khách "' + (c.ho_ten || '') + '" bằng cách nào?\n\n'
    + '1 = Gọi điện   2 = Nhắn Zalo   3 = Nhắn tin   4 = Gặp trực tiếp', '1');
  if (kenh === null) return;
  const MAP = {'1': 'goi_dien', '2': 'zalo', '3': 'nhan_tin', '4': 'gap_truc_tiep'};
  const nd = prompt('Nội dung trao đổi (không bắt buộc):', '') || '';
  const r = await fetch('/api/cham-soc-khach', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({cccd: c.cccd || '', dien_thoai: c.dien_thoai || '',
                          ten_khach: c.ho_ten || '', kenh: MAP[kenh] || 'goi_dien', noi_dung: nd})
  });
  const d = await r.json();
  if (!d.success){
    alert(d.error === 'tai_khoan_chua_lien_ket_ho_so_nv'
      ? 'Tài khoản của bạn chưa được liên kết với hồ sơ nhân viên.\nBáo quản lý gắn giúp ở trang Chấm công → Liên kết tài khoản.'
      : ('Chưa ghi được: ' + (d.error || '')));
    return;
  }
  alert('✓ Đã ghi nhận chăm sóc khách ' + (c.ho_ten || '') + '.');
}

function closeDetailModal() {
  document.getElementById('detail-modal').classList.add('hidden');
  _curCustomer = null;
}

function switchTab(tab) {
  document.querySelectorAll('.tab-pane').forEach(el => el.classList.add('hidden'));
  document.getElementById('tab-' + tab).classList.remove('hidden');
  document.querySelectorAll('.detail-tab-btn').forEach(el => el.classList.toggle('active', el.dataset.tab === tab));
}

loadCustomers();
</script>
{% endblock %}