{% extends "base.html" %}
{% block title %}Nhân sự — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Quản lý nhân sự{% endblock %}

{% block content %}

  <!-- ── TABS ── -->
  <div class="ios-card p-2 flex gap-1 overflow-x-auto">
    <button class="hr-tab-btn" data-tab="emp" onclick="switchTab('emp')">👤 Nhân viên</button>
    <button class="hr-tab-btn" data-tab="att" onclick="switchTab('att')">🗓️ Chấm công</button>
    <button class="hr-tab-btn" data-tab="pay" onclick="switchTab('pay')">💰 Bảng lương</button>
    <button class="hr-tab-btn" data-tab="kpi" onclick="switchTab('kpi')">🏆 KPI</button>
  </div>

  <!-- ══ TAB: NHÂN VIÊN ══ -->
  <div id="tab-emp" class="hr-pane space-y-4">
    <div class="ios-card p-5">
      <div class="flex flex-wrap items-end gap-3">
        <h2 class="font-extrabold text-gray-800">Danh sách nhân viên</h2>
        <button onclick="openAddEmpModal()" class="btn-ios btn-ios-gold px-5 py-2.5 ml-auto">➕ Thêm nhân viên</button>
      </div>
    </div>
    <div class="ios-card overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-sm data-card-table">
          <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
            <tr>
              <th class="text-left px-4 py-2">Họ tên</th>
              <th class="text-left px-4 py-2">Chức vụ</th>
              <th class="text-left px-4 py-2">Chế độ</th>
              <th class="text-right px-4 py-2">Lương cơ bản</th>
              <th class="text-left px-4 py-2">Trạng thái</th>
              <th class="text-left px-4 py-2">Ngày vào</th>
            </tr>
          </thead>
          <tbody id="emp-tbody"></tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ══ TAB: CHẤM CÔNG ══ -->
  <div id="tab-att" class="hr-pane hidden space-y-4">
    <div class="ios-card p-5">
      <div class="flex flex-wrap items-end gap-3">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Nhân viên</label>
          <select id="att-employee" class="input-ios !py-2 text-sm" onchange="loadAttendance()"></select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tháng</label>
          <div class="flex gap-1.5">
            <select id="att-month-m" class="input-ios !py-2 text-sm cursor-pointer" onchange="_syncMonth('att'); loadAttendance()">
              <option value="01">Tháng 1</option><option value="02">Tháng 2</option><option value="03">Tháng 3</option>
              <option value="04">Tháng 4</option><option value="05">Tháng 5</option><option value="06">Tháng 6</option>
              <option value="07">Tháng 7</option><option value="08">Tháng 8</option><option value="09">Tháng 9</option>
              <option value="10">Tháng 10</option><option value="11">Tháng 11</option><option value="12">Tháng 12</option>
            </select>
            <select id="att-month-y" class="input-ios !py-2 text-sm cursor-pointer" onchange="_syncMonth('att'); loadAttendance()"></select>
            <input id="att-month" type="hidden">
          </div>
        </div>
        <div class="ml-auto text-right">
          <div class="text-xs text-gray-400 uppercase font-semibold">Tổng công</div>
          <div id="att-total" class="text-2xl font-black text-amber-700">0</div>
        </div>
      </div>
    </div>
    <div class="ios-card p-5">
      <p class="text-xs text-gray-400 mb-3">Bấm vào ô ngày để chuyển lần lượt: 1 công → 0.5 công → nghỉ (0) → 1 công...</p>
      <div id="att-grid" class="grid grid-cols-7 gap-1"></div>
    </div>
  </div>

  <!-- ══ TAB: BẢNG LƯƠNG ══ -->
  <div id="tab-pay" class="hr-pane hidden space-y-4">
    <div class="ios-card p-5">
      <div class="flex flex-wrap items-end gap-3">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tháng</label>
          <div class="flex gap-1.5">
            <select id="pay-month-m" class="input-ios !py-2 text-sm cursor-pointer" onchange="_syncMonth('pay'); loadPayroll()">
              <option value="01">Tháng 1</option><option value="02">Tháng 2</option><option value="03">Tháng 3</option>
              <option value="04">Tháng 4</option><option value="05">Tháng 5</option><option value="06">Tháng 6</option>
              <option value="07">Tháng 7</option><option value="08">Tháng 8</option><option value="09">Tháng 9</option>
              <option value="10">Tháng 10</option><option value="11">Tháng 11</option><option value="12">Tháng 12</option>
            </select>
            <select id="pay-month-y" class="input-ios !py-2 text-sm cursor-pointer" onchange="_syncMonth('pay'); loadPayroll()"></select>
            <input id="pay-month" type="hidden">
          </div>
        </div>
        <div id="pay-kpi-ref" class="ml-auto text-right text-sm"></div>
      </div>
    </div>
    <!-- Thanh tổng quan (bao quát cả tháng) -->
    <div id="pay-summary" class="grid grid-cols-2 lg:grid-cols-4 gap-3"></div>
    <!-- Lưới thẻ lương — mỗi nhân viên 1 thẻ, tự xuống dòng, KHÔNG kéo ngang -->
    <div id="pay-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"></div>
  </div>

  <!-- ══ TAB: KPI ══ (27/08/2026: chủ tiệm chốt "chuyển thẳng nội dung /kpi vào Nhân sự,
       thay hẳn KPI trong Nhân sự, xóa trang /kpi bên ngoài sau khi chuyển xong"). Toàn bộ
       nội dung dưới đây CHUYỂN NGUYÊN VĂN từ templates/kpi.html (trang /kpi cũ, đã xóa route
       trang — /api/kpi/* GIỮ NGUYÊN, embed này gọi lại y hệt các API đó). Hệ KPI CŨ (chấm tay
       chuyên cần/thái độ) đã BỎ khỏi công thức lương từ 25/08/2026 (xem hr_db.compute_payroll)
       — đây là hệ MỚI (mô hình mức ảnh hưởng), bảng tổng hợp mọi nhân viên trong tháng. -->
  <div id="tab-kpi" class="hr-pane hidden space-y-4">
    <div class="ios-card p-4" style="border:1.5px solid #fecaca">
      <div class="flex flex-col sm:flex-row sm:flex-wrap gap-3 sm:items-end">
        <div class="flex-1" style="min-width:150px">
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tháng</label>
          <input type="date" id="kpi-f-thang" class="input-ios !py-2 w-full" title="Chọn 1 ngày bất kỳ trong tháng muốn xem">
        </div>
        <button onclick="kpiTaiKpi()" class="tkt-act tkt-blue w-full sm:w-auto">🔄 Xem</button>
        <button onclick="kpiMoThamSo()" class="tkt-act tkt-amber w-full sm:w-auto">⚙️ Tham số</button>
        <button onclick="kpiChotThang()" class="tkt-act tkt-emerald w-full sm:w-auto">✅ Chốt vào bảng lương</button>
      </div>
      <p class="text-gray-500 mt-2" style="font-size:11.5px">
        🔒 Chỉ Giám đốc / Phó Giám đốc xem được. Nhân viên không thấy công thức lẫn cách tính.
      </p>
    </div>

    <div id="kpi-canh-bao" style="display:none"></div>

    <div class="kpi-luoi" id="kpi-tong-quan"></div>

    <div class="ios-card p-4">
      <div class="font-bold text-gray-700 mb-2 text-sm">📊 So sánh nhân viên</div>
      <div style="position:relative;height:240px"><canvas id="kpi-bd-cot"></canvas></div>
    </div>

    <div class="font-bold text-gray-700 mb-2 text-sm">🏆 Xếp hạng tháng — bấm vào từng người để xem dẫn chứng</div>
    <div id="kpi-ds-nv"></div>

    <!-- Modal chi tiết 1 nhân viên -->
    <div id="kpi-modal-nv" class="fixed inset-0 z-50 hidden items-end sm:items-center justify-center p-0 sm:p-4"
         style="background:rgba(0,0,0,.45)">
      <div class="bg-white w-full sm:max-w-3xl rounded-t-2xl sm:rounded-2xl flex flex-col" style="max-height:94vh">
        <div class="p-4 text-white rounded-t-2xl flex items-center justify-between"
             style="background:linear-gradient(135deg,#4a0000,#8b0000)">
          <div>
            <div class="font-bold" id="kpi-m-ten">—</div>
            <div class="text-xs opacity-80" id="kpi-m-phu">—</div>
          </div>
          <button onclick="kpiDongModal()" class="text-white text-2xl leading-none px-2">×</button>
        </div>
        <div class="p-4 overflow-y-auto flex-1" id="kpi-m-than"></div>
      </div>
    </div>

    <!-- Modal tham số -->
    <div id="kpi-modal-ts" class="fixed inset-0 z-50 hidden items-end sm:items-center justify-center p-0 sm:p-4"
         style="background:rgba(0,0,0,.45)">
      <div class="bg-white w-full sm:max-w-xl rounded-t-2xl sm:rounded-2xl flex flex-col" style="max-height:94vh">
        <div class="p-4 text-white rounded-t-2xl flex items-center justify-between"
             style="background:linear-gradient(135deg,#78350f,#b45309)">
          <div class="font-bold">⚙️ Tham số KPI</div>
          <button onclick="kpiDongTs()" class="text-white text-2xl leading-none px-2">×</button>
        </div>
        <div class="p-4 overflow-y-auto flex-1" id="kpi-ts-than"></div>
        <div class="p-3 border-t flex flex-wrap gap-2 justify-end">
          <button onclick="kpiDongTs()" class="tkt-act tkt-blue">Đóng</button>
          <button onclick="kpiLuuThamSo()" class="tkt-act tkt-emerald">💾 Lưu tham số</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ MODAL THÊM/SỬA NHÂN VIÊN ══ -->
  <div id="emp-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="emp-modal-title" class="font-extrabold text-gray-800">➕ Thêm nhân viên</h3>
        <button onclick="closeEmpModal()" 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="emp-id" value="">
        <div>
          <label class="lbl">Họ tên *</label>
          <input id="emp-ho-ten" class="inp" placeholder="Nguyễn Văn A">
        </div>
        <div>
          <label class="lbl">Chức vụ</label>
          <input id="emp-chuc-vu" class="inp" placeholder="Nhân viên bán hàng">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="lbl">Lương cơ bản (đồng/tháng)</label>
            <input id="emp-luong" type="text" inputmode="numeric" class="inp money-inp" placeholder="0">
          </div>
          <div>
            <label class="lbl">% KPI theo lãi gộp</label>
            <input id="emp-kpi" type="number" step="any" class="inp" placeholder="0">
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="lbl">Chế độ nhân viên</label>
            <select id="emp-che-do" class="inp" onchange="onCheDoChange()">
              <option value="chinh_thuc">✅ Chính thức</option>
              <option value="thu_viec">🔄 Thử việc (80% lương)</option>
            </select>
          </div>
          <div id="div-ngay-ct">
            <label class="lbl">Ngày chính thức</label>
            <input id="emp-ngay-chinh-thuc" type="date" lang="vi" class="inp">
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="div-bhxh-ancn">
          <div>
            <label class="lbl">Lương tham gia BHXH (đồng)</label>
            <input id="emp-luong-bhxh" type="text" inputmode="numeric" class="inp money-inp" placeholder="0">
          </div>
        </div>
        <div>
          <label class="lbl">Số CCCD</label>
          <input id="emp-cccd" class="inp" placeholder="" inputmode="numeric">
        </div>
        <div>
          <label class="lbl">Số điện thoại</label>
          <input id="emp-dien-thoai" class="inp" placeholder="" inputmode="tel">
        </div>
        <div>
          <label class="lbl">Địa chỉ</label>
          <input id="emp-dia-chi" class="inp" placeholder="">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label class="lbl">Ngày vào làm</label>
            <input id="emp-ngay-vao" type="date" lang="vi" class="inp">
          </div>
          <div>
            <label class="lbl">Trạng thái</label>
            <select id="emp-trang-thai" class="inp">
              <option value="dang_lam">Đang làm</option>
              <option value="nghi_viec">Đã nghỉ</option>
            </select>
          </div>
        </div>
        <div>
          <label class="lbl">Ghi chú</label>
          <input id="emp-ghi-chu" class="inp" placeholder="">
        </div>
        <div>
          <label class="lbl">Mã PIN</label>
          <input id="emp-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 onclick="saveEmployee()" class="btn-ios btn-ios-gold px-5 py-2 flex-1 min-w-0">💾 Lưu</button>
        <button id="emp-btn-delete" onclick="deleteEmployee()" 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="emp-msg" class="text-xs text-red-500 w-full"></span>
        <button onclick="closeEmpModal()" class="text-gray-400 text-sm hover:text-gray-600">Hủy</button>
      </div>
    </div>
  </div>

  <!-- ══ MODAL CHI TRẢ LƯƠNG ══ -->
  <div id="pay-modal" class="fixed inset-0 z-50 hidden ios-backdrop bg-black/40 flex items-center justify-center p-4"
       onclick="if(event.target===this)closePayModal()">
    <div class="bg-white rounded-[24px] shadow-xl w-full max-w-sm max-h-[90vh] overflow-y-auto">
      <div class="px-5 py-4" style="background:linear-gradient(135deg,#065f46,#059669)">
        <h3 class="font-extrabold text-white">💵 Chi trả lương</h3>
        <p class="text-green-100 text-xs mt-0.5" id="pay-sub"></p>
      </div>
      <div class="p-5 space-y-3">
        <div class="ios-card p-3 text-sm flex justify-between items-center" style="background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1.5px solid #a7f3d0">
          <span class="text-gray-600">Thực lĩnh:</span>
          <strong id="pay-thuclinh" class="text-lg text-green-700">0</strong>
        </div>
        <div>
          <label class="lbl">Chi trả bằng</label>
          <select id="pay-hinhthuc" class="inp cursor-pointer" onchange="onPayHtttChange()">
            <option value="tien_mat" selected>💵 Tiền mặt</option>
            <option value="chuyen_khoan">🏦 Chuyển khoản</option>
            <option value="ca_hai">🔀 TM/CK</option>
          </select>
          <div id="pay-split-row" class="flex gap-2 mt-2" style="display:none">
            <div class="flex-1"><label class="text-xs text-gray-400">Tiền mặt (₫)</label><input id="pay-split-tm" type="text" inputmode="numeric" class="inp money-inp" placeholder="0"></div>
            <div class="flex-1"><label class="text-xs text-gray-400">Chuyển khoản (₫)</label><input id="pay-split-ck" type="text" inputmode="numeric" class="inp money-inp" placeholder="0"></div>
          </div>
        </div>
        <div>
          <label class="lbl">Mã PIN</label>
          <input id="pay-pin" type="password" inputmode="numeric" maxlength="10" class="inp font-bold text-center tracking-widest" placeholder="••••">
        </div>
        <p id="pay-msg" class="text-sm"></p>
      </div>
      <div class="px-5 pb-5 flex gap-2">
        <button onclick="closePayModal()" class="btn-ios btn-ios-secondary flex-1 py-2.5">Hủy</button>
        <button onclick="confirmPaySalary()" class="btn-ios flex-1 py-2.5 text-white font-bold" style="background:linear-gradient(135deg,#065f46,#059669);border-radius:14px">Xác nhận chi trả</button>
      </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); }
.hr-tab-btn {
  flex: 1; padding: 13px 14px; font-size: 14px; font-weight: 800; color: #c9a84c;
  border-radius: 14px; white-space: nowrap; text-align: center;
  background: linear-gradient(135deg, #fffbf0, #fdf3d0);
  border: 1.5px solid #e8c96a;
  text-shadow: 0 1px 2px rgba(180,130,0,.15);
  transition: all .15s;
}
.hr-tab-btn.active {
  color: #7a5200;
  background: linear-gradient(135deg, #ffd700, #f0a500);
  border-color: #c8860a;
  box-shadow: 0 2px 12px rgba(200,134,10,.35);
  text-shadow: 0 1px 3px rgba(120,80,0,.25);
}
.att-day {
  aspect-ratio: 1; border-radius: 12px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size: 12px; font-weight: 700; cursor: pointer; background: #f2f2f7; color: #6b7280;
  transition: background .12s ease;
}
.att-day.full { background: #dcfce7; color: #15803d; }
.att-day.half { background: #fef9c3; color: #92400e; }
.pay-input { width: 90px; text-align: right; }
.kpi-sub-btn {
  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 700; color: #9ca3af;
  border-radius: 12px; white-space: nowrap; text-align: center;
}
.kpi-sub-btn.active { color: #92400e; background: linear-gradient(135deg,#fff7ed,#fffbeb); }
/* 27/08/2026: CSS chuyển nguyên văn từ templates/kpi.html (tab KPI trong Nhân sự) */
.kpi-the{background:#fff;border-radius:16px;padding:14px 16px;border:1.5px solid #eef2f7}
.kpi-the .nhan{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.kpi-the .so{font-size:21px;font-weight:800;color:#0f172a;margin-top:3px;line-height:1.15}
.kpi-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:1rem}
.kpi-nv-hang{background:#fff;border-radius:16px;border:1.5px solid #eef2f7;padding:14px;margin-bottom:10px;
         cursor:pointer;transition:.15s}
.kpi-nv-hang:hover{border-color:#c7d2fe;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.kpi-vach{height:9px;border-radius:99px;background:#eef2f7;overflow:hidden;margin-top:5px}
.kpi-vach i{display:block;height:100%;border-radius:99px}
.kpi-huy{background:linear-gradient(90deg,#dc2626,#f87171)}
.kpi-kha{background:linear-gradient(90deg,#d97706,#fbbf24)}
.kpi-tot{background:linear-gradient(90deg,#059669,#34d399)}
.kpi-xs {background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.kpi-vien-tv{background:#fef3c7;color:#92400e;border:1px solid #fde68a;font-size:10.5px;
         padding:2px 7px;border-radius:99px;font-weight:700}
.kpi-ct-bang{width:100%;font-size:12.5px;border-collapse:collapse}
.kpi-ct-bang th{background:#f8fafc;color:#475569;font-weight:700;padding:7px 8px;text-align:left;
            border-bottom:1.5px solid #e2e8f0;white-space:nowrap}
.kpi-ct-bang td{padding:6px 8px;border-bottom:1px solid #f1f5f9}
.kpi-ts-o{display:grid;grid-template-columns:1fr 108px;gap:8px;align-items:center;margin-bottom:7px}
.kpi-ts-o label{font-size:12.5px;color:#334155}
.kpi-ts-o input{border:1.5px solid #e2e8f0;border-radius:9px;padding:5px 9px;font-size:14px;
            text-align:right;width:100%}
@media(max-width:640px){.kpi-the .so{font-size:18px}}
</style>
<script src="/static/vendor/chart-4.umd.min.js"></script>
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt = n => Number(n||0).toLocaleString('vi-VN');
const fmtD = n => Number(n||0).toLocaleString('vi-VN') + ' đ';
const moneyFmt = n => (n = Math.round(n || 0)) ? n.toLocaleString('vi-VN') : '';
const moneyParse = s => parseFloat(String(s || '').replace(/\./g, '')) || 0;
document.addEventListener('input', e => {
  if (!e.target.classList.contains('money-inp')) return;
  const el = e.target, raw = el.value.replace(/\D/g, '');
  if (!raw) { el.value = ''; return; }
  const pos = el.selectionStart, oldLen = el.value.length;
  el.value = parseInt(raw, 10).toLocaleString('vi-VN');
  el.setSelectionRange(pos + el.value.length - oldLen, pos + el.value.length - oldLen);
});
const fmtDate = iso => {
  if (!iso) return '';
  const [y, m, d] = iso.split('-');
  return (y && m && d) ? `${d}/${m}/${y}` : iso;
};
let _employees = [];
let _attData = {};

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

function switchTab(tab) {
  document.querySelectorAll('.hr-pane').forEach(el => el.classList.add('hidden'));
  document.getElementById('tab-' + tab).classList.remove('hidden');
  document.querySelectorAll('.hr-tab-btn').forEach(el => el.classList.toggle('active', el.dataset.tab === tab));
  if (tab === 'att') loadAttendance();
  if (tab === 'pay') loadPayroll();
  // 27/08/2026: tab-kpi giờ nhúng NGUYÊN VĂN nội dung /kpi cũ (xem CLAUDE.md) — mở tab là tải
  // luôn số liệu tháng hiện tại (chỉ đặt giá trị ô tháng lần ĐẦU mở, tránh reset lựa chọn
  // tháng của GĐ mỗi lần quay lại tab).
  if (tab === 'kpi') {
    if (!_kpiLoaded) {
      // #kpi-f-thang là flatpickr (type=date, lịch Việt như trang mua/bán) — đặt qua fpSet,
      // KHÔNG gán .value trực tiếp (base.html tự nâng cấp input[type=date] thành flatpickr).
      const iso = new Date().toISOString().slice(0, 10);
      if (typeof fpSet === 'function') fpSet('kpi-f-thang', iso); else document.getElementById('kpi-f-thang').value = iso;
      _kpiLoaded = true;
    }
    kpiTaiKpi();
  }
}

function switchKpiSub(sub) {
  document.querySelectorAll('.kpi-sub-pane').forEach(el => el.classList.add('hidden'));
  document.getElementById('kpi-sub-' + sub).classList.remove('hidden');
  document.querySelectorAll('.kpi-sub-btn').forEach(el => el.classList.toggle('active', el.dataset.sub === sub));
  if (sub === 'ds') loadKpiDS();
  if (sub === 'cc') loadKpiCC();
  if (sub === 'td') loadKpiTD();
  if (sub === 'dg') loadDanhGia();
}

function loadKpiTab() {
  switchKpiSub('ds');
}

function onCheDoChange() {
  const isThuViec = document.getElementById('emp-che-do').value === 'thu_viec';
  document.getElementById('div-bhxh-ancn').style.display = isThuViec ? 'none' : '';
}

// ── Nhân viên ────────────────────────────────────────────────
async function loadEmployees(keepSelection) {
  const res = await fetch('/api/hr/employees');
  const d = await res.json();
  _employees = d.employees || [];

  document.getElementById('emp-tbody').innerHTML = _employees.map(e => {
    const cheDoLabel = e.che_do === 'thu_viec'
      ? '<span class="text-xs font-semibold bg-blue-100 text-blue-700 rounded-full px-2 py-0.5">Thử việc</span>'
      : '<span class="text-xs font-semibold bg-amber-100 text-amber-700 rounded-full px-2 py-0.5">Chính thức</span>';
    return `<tr class="border-b border-gray-50 hover:bg-amber-50 cursor-pointer" onclick="openEditEmpModal(${e.id})">
      <td class="px-4 py-2 font-semibold dct-title">${e.ho_ten}</td>
      <td class="px-4 py-2" data-label="Chức vụ">${e.chuc_vu || '—'}</td>
      <td class="px-4 py-2" data-label="Chế độ">${cheDoLabel}</td>
      <td class="px-4 py-2 text-right" data-label="Lương cơ bản">${e.che_do === 'thu_viec' ? `<span class="line-through text-gray-300">${fmt(e.luong_co_ban)} đ</span> <span class="text-blue-600">${fmtD(Math.round(e.luong_co_ban*0.8))}</span>` : fmtD(e.luong_co_ban)}</td>
      <td class="px-4 py-2" data-label="Trạng thái">${e.trang_thai === 'dang_lam' ? '<span class="text-xs font-semibold bg-green-100 text-green-700 rounded-full px-2 py-0.5">Đang làm</span>' : '<span class="text-xs font-semibold bg-gray-100 text-gray-500 rounded-full px-2 py-0.5">Đã nghỉ</span>'}</td>
      <td class="px-4 py-2" data-label="Ngày vào">${e.ngay_vao ? fmtDate(e.ngay_vao) : '—'}</td>
    </tr>`;
  }).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-8">Chưa có nhân viên</td></tr>';

  // Dropdown chấm công
  const sel = document.getElementById('att-employee');
  const prev = keepSelection ? sel.value : '';
  sel.innerHTML = _employees.filter(e => e.trang_thai === 'dang_lam').map(e => `<option value="${e.id}">${e.ho_ten}</option>`).join('');
  if (prev && _employees.some(e => String(e.id) === prev)) sel.value = prev;
}

function openAddEmpModal() {
  document.getElementById('emp-modal-title').textContent = '➕ Thêm nhân viên';
  document.getElementById('emp-id').value = '';
  document.getElementById('emp-ho-ten').value = '';
  document.getElementById('emp-chuc-vu').value = '';
  document.getElementById('emp-luong').value = '';
  document.getElementById('emp-kpi').value = '';
  document.getElementById('emp-che-do').value = 'chinh_thuc';
  fpSet('emp-ngay-chinh-thuc', '');
  document.getElementById('emp-luong-bhxh').value = '';
  document.getElementById('emp-cccd').value = '';
  document.getElementById('emp-dien-thoai').value = '';
  document.getElementById('emp-dia-chi').value = '';
  fpSet('emp-ngay-vao', '');
  document.getElementById('emp-trang-thai').value = 'dang_lam';
  document.getElementById('emp-ghi-chu').value = '';
  document.getElementById('emp-pin').value = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('emp-btn-delete').classList.add('hidden');
  document.getElementById('emp-msg').textContent = '';
  onCheDoChange();
  document.getElementById('emp-modal').classList.remove('hidden');
}

function openEditEmpModal(id) {
  const e = _employees.find(x => x.id === id);
  if (!e) return;
  document.getElementById('emp-modal-title').textContent = '✏️ Sửa nhân viên';
  document.getElementById('emp-id').value = e.id;
  document.getElementById('emp-ho-ten').value = e.ho_ten || '';
  document.getElementById('emp-chuc-vu').value = e.chuc_vu || '';
  document.getElementById('emp-luong').value = moneyFmt(e.luong_co_ban || 0);
  document.getElementById('emp-kpi').value = e.ty_le_kpi || 0;
  document.getElementById('emp-che-do').value = e.che_do || 'chinh_thuc';
  fpSet('emp-ngay-chinh-thuc', e.ngay_chinh_thuc || '');
  document.getElementById('emp-luong-bhxh').value = moneyFmt(e.luong_bhxh || 0);
  document.getElementById('emp-cccd').value = e.cccd || '';
  document.getElementById('emp-dien-thoai').value = e.dien_thoai || '';
  document.getElementById('emp-dia-chi').value = e.dia_chi || '';
  fpSet('emp-ngay-vao', e.ngay_vao || '');
  document.getElementById('emp-trang-thai').value = e.trang_thai || 'dang_lam';
  document.getElementById('emp-ghi-chu').value = e.ghi_chu || '';
  document.getElementById('emp-pin').value = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('emp-btn-delete').classList.remove('hidden');
  document.getElementById('emp-msg').textContent = '';
  onCheDoChange();
  document.getElementById('emp-modal').classList.remove('hidden');
}

function closeEmpModal() {
  document.getElementById('emp-modal').classList.add('hidden');
}

async function saveEmployee() {
  const pin = getPin();
  if (pin) localStorage.setItem(PIN_KEY, pin);
  const id = document.getElementById('emp-id').value;
  const payload = {
    ho_ten: document.getElementById('emp-ho-ten').value.trim(),
    chuc_vu: document.getElementById('emp-chuc-vu').value.trim(),
    luong_co_ban: moneyParse(document.getElementById('emp-luong').value) || 0,
    ty_le_kpi: document.getElementById('emp-kpi').value || 0,
    che_do: document.getElementById('emp-che-do').value,
    ngay_chinh_thuc: document.getElementById('emp-ngay-chinh-thuc').value,
    luong_bhxh: moneyParse(document.getElementById('emp-luong-bhxh').value) || 0,
    cccd: document.getElementById('emp-cccd').value.trim(),
    dien_thoai: document.getElementById('emp-dien-thoai').value.trim(),
    dia_chi: document.getElementById('emp-dia-chi').value.trim(),
    ngay_vao: document.getElementById('emp-ngay-vao').value,
    trang_thai: document.getElementById('emp-trang-thai').value,
    ghi_chu: document.getElementById('emp-ghi-chu').value.trim(),
    pin,
  };
  if (!payload.ho_ten) {
    document.getElementById('emp-msg').textContent = 'Vui lòng nhập họ tên.';
    return;
  }
  const url = id ? `/api/hr/employees/${id}` : '/api/hr/employees';
  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) {
    closeEmpModal();
    loadEmployees(true);
  } else {
    document.getElementById('emp-msg').textContent = 'Sai mã PIN hoặc không có quyền.';
  }
}

async function deleteEmployee() {
  const id = document.getElementById('emp-id').value;
  if (!id) return;
  if (!confirm('Xóa nhân viên này? Dữ liệu chấm công/lương liên quan cũng sẽ bị xóa.')) return;
  const pin = getPin();
  const res = await fetch(`/api/hr/employees/${id}`, {
    method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({pin})
  });
  const d = await res.json();
  if (d.success) {
    closeEmpModal();
    loadEmployees();
  } else {
    document.getElementById('emp-msg').textContent = 'Sai mã PIN hoặc không có quyền.';
  }
}

// ── Chấm công ────────────────────────────────────────────────
function curMonth() {
  const t = new Date();
  return `${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,'0')}`;
}
function _syncMonth(prefix) {
  const m = document.getElementById(prefix+'-month-m').value;
  const y = document.getElementById(prefix+'-month-y').value;
  if (m && y) document.getElementById(prefix+'-month').value = `${y}-${m}`;
}
function _initMonthPicker(prefix) {
  const now = new Date();
  const curY = now.getFullYear(), curM = now.getMonth() + 1;
  const selY = document.getElementById(prefix+'-month-y');
  selY.innerHTML = '';
  for (let y = curY - 3; y <= curY + 1; y++) {
    const o = document.createElement('option');
    o.value = y; o.textContent = `Năm ${y}`; o.selected = (y === curY);
    selY.appendChild(o);
  }
  document.getElementById(prefix+'-month-m').value = String(curM).padStart(2,'0');
  _syncMonth(prefix);
}

async function loadAttendance() {
  const employeeId = document.getElementById('att-employee').value;
  const thang = document.getElementById('att-month').value;
  if (!employeeId || !thang) return;
  const res = await fetch(`/api/hr/attendance?employee_id=${employeeId}&thang=${thang}`);
  const d = await res.json();
  _attData = {};
  (d.attendance || []).forEach(a => { _attData[a.ngay] = a.cong; });
  document.getElementById('att-total').textContent = fmt(d.tong_cong);

  const grid = document.getElementById('att-grid');
  let html = '';
  for (let day = 1; day <= d.days_in_month; day++) {
    const ngay = `${thang}-${String(day).padStart(2,'0')}`;
    const cong = _attData[ngay] || 0;
    const cls = cong === 1 ? 'full' : (cong === 0.5 ? 'half' : '');
    html += `<div class="att-day ${cls}" onclick="toggleAttDay('${ngay}')">
      <div>${day}</div><div style="font-size:10px">${cong ? fmt(cong) : ''}</div>
    </div>`;
  }
  grid.innerHTML = html;
}

async function toggleAttDay(ngay) {
  const employeeId = document.getElementById('att-employee').value;
  const cur = _attData[ngay] || 0;
  const next = cur === 1 ? 0.5 : (cur === 0.5 ? 0 : 1);
  const pin = localStorage.getItem(PIN_KEY) || '';
  const res = await fetch('/api/hr/attendance', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({employee_id: employeeId, ngay, cong: next, pin})
  });
  const d = await res.json();
  if (d.success) {
    _attData[ngay] = next;
    loadAttendance();
  } else {
    // PIN qua modal ẩn ****** (askPin của base.html) — không dùng prompt() vì lộ chữ
    askPin('Nhập mã PIN để chấm công:', newPin => {
      localStorage.setItem(PIN_KEY, newPin.trim());
      toggleAttDay(ngay);
    });
  }
}

// ── Bảng lương ───────────────────────────────────────────────
async function loadPayroll() {
  const thang = document.getElementById('pay-month').value;
  if (!thang) return;
  const res = await fetch(`/api/hr/payroll?thang=${thang}`);
  const d = await res.json();

  document.getElementById('pay-kpi-ref').innerHTML =
    `<span class="text-xs text-gray-400 uppercase font-semibold">Tham chiếu KPI tháng:</span> ` +
    `Doanh thu bán <b class="text-green-700">${fmt(d.kpi_ref.doanh_thu_ban*1000)} đ</b> · ` +
    `Lãi gộp <b class="text-amber-700">${fmt(d.kpi_ref.lai_gop*1000)} đ</b>`;

  const rows = d.payroll || [];

  // ── Thanh tổng quan ──
  const tongNV = rows.length;
  const tongQuy = rows.reduce((s, p) => s + (p.thuc_linh || 0), 0);
  const daTraArr = rows.filter(p => p.da_tra);
  const tongDaTra = daTraArr.reduce((s, p) => s + (p.thuc_linh || 0), 0);
  const chuaChot = rows.filter(p => p.chua_tinh).length;
  const sCard = (val, label, color, sub) => `
    <div class="rounded-2xl p-3.5" style="background:${color}18">
      <div class="text-base sm:text-lg font-black leading-tight tabular-nums break-words" style="color:${color}">${val}</div>
      <div class="text-[11px] font-semibold text-gray-500 mt-0.5">${label}</div>
      ${sub ? `<div class="text-[11px] text-gray-400">${sub}</div>` : ''}
    </div>`;
  document.getElementById('pay-summary').innerHTML =
    sCard(fmt(tongNV), 'Nhân viên', '#b45309') +
    sCard(fmtD(tongQuy), 'Tổng quỹ lương', '#0891b2') +
    sCard(`${daTraArr.length}/${tongNV}`, 'Đã chi trả', '#16a34a', fmtD(tongDaTra)) +
    sCard(fmt(chuaChot), 'Chưa chốt', chuaChot ? '#dc2626' : '#9ca3af', chuaChot ? 'cần bấm Tính' : 'đã chốt hết');

  // ── Lưới thẻ ──
  document.getElementById('pay-grid').innerHTML = rows.map(p => {
    const tv = p.che_do === 'thu_viec';
    // 25/08/2026: KPI thưởng lương giờ CHỈ đến từ hệ MỚI (trang /kpi, cột payroll.thuong_kpi) —
    // đã bỏ hẳn hệ CŨ (kpi_doanh_so/kpi_chuyen_can/kpi_thai_do, chấm tay + % cứng) để khỏi
    // cộng tiền song song 2 hệ. Xem CLAUDE.md mục "THỐNG NHẤT KPI".
    const kpiTip = tv ? 'Thử việc — không tính KPI' : 'Từ hệ KPI mới — xem chi tiết ở trang /kpi';
    const kpiCell = tv
      ? '<span class="text-xs text-gray-300">— Thử việc</span>'
      : `<span class="pay-kpi-total font-bold cursor-help ${(p.thuong_kpi||0)>0?'text-green-600':'text-gray-400'}" data-val="${p.thuong_kpi||0}" title="${kpiTip}">${fmtD(p.thuong_kpi||0)}</span>`;
    const nameBadge = tv ? ' <span class="text-[10px] bg-blue-100 text-blue-700 rounded-full px-1.5 py-0.5">TV</span>' : '';
    const bhxhDis = tv ? 'disabled style="opacity:.35"' : '';
    const tlTip = `Lương: ${fmtD(p.luong_theo_cong)} − BHXH: ${fmtD(tv?0:(p.tru_bhxh||0))} + KPI: ${fmtD(tv?0:(p.thuong_kpi||0))} + Thưởng: ${fmtD(p.thuong_khac||0)} − Trừ: ${fmtD(p.khoan_tru||0)}`;
    const statusChip = p.da_tra
      ? `<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#dcfce7;color:#166534">✓ Đã chi trả ${(p.ngay_tra||'').split(' ')[0]}</span>`
      : (p.chua_tinh
        ? `<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#fef3c7;color:#92400e">⏳ Chưa chốt — bấm Tính</span>`
        : `<span class="text-xs font-bold px-2.5 py-1 rounded-full" style="background:#dbeafe;color:#1e40af">✓ Đã chốt · chưa trả</span>`);
    const payBtn = (p.da_tra || p.chua_tinh) ? ''
      : `<button onclick="openPaySalary('${p.employee_id}','${thang}','${(p.ho_ten||'').replace(/'/g,'')}',${p.thuc_linh||0})" class="btn-ios flex-1 py-2 text-sm text-white font-bold" style="background:linear-gradient(135deg,#065f46,#059669)">💵 Chi trả</button>`;
    const box = (label, inner) => `<div class="bg-gray-50 rounded-xl px-2.5 py-1.5"><div class="text-[10px] text-gray-400 uppercase font-semibold">${label}</div>${inner}</div>`;
    const inpBox = (label, cls, val) => `<label class="bg-amber-50/60 rounded-xl px-2.5 py-1.5 block"><div class="text-[10px] text-amber-700/70 uppercase font-semibold">${label}</div><input type="text" inputmode="numeric" class="${cls} money-inp bg-transparent w-full outline-none font-bold text-sm text-gray-800" value="${val}" ${cls.includes('bhxh')?bhxhDis:''} onchange="recalcRow(this.closest('.pay-card'))"></label>`;
    return `<div class="pay-card ios-card p-4 flex flex-col gap-3 ${p.da_tra?'ring-1 ring-green-200':''}" data-emp="${p.employee_id}" data-luong-coban="${p.luong_co_ban}" data-che-do="${p.che_do||'chinh_thuc'}">
      <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-black flex-shrink-0" style="background:${_avaColor(p.ho_ten)}">${vnInitial(p.ho_ten)}</div>
        <div class="min-w-0 flex-1">
          <div class="font-bold text-gray-800 truncate">${p.ho_ten}${nameBadge}</div>
          <div class="text-xs text-gray-400 truncate">${p.chuc_vu || ''}</div>
          <div class="mt-1">${statusChip}</div>
        </div>
        <div class="text-right flex-shrink-0">
          <div class="text-[10px] text-gray-400 uppercase font-semibold">Thực lĩnh</div>
          <div class="pay-tong-linh text-xl font-black text-amber-700 leading-tight cursor-help" title="${tlTip}">${fmtD(p.thuc_linh)}</div>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-2">
        ${box('Ngày công', `<div class="text-sm"><span class="pay-so-cong font-bold text-amber-700" data-val="${p.so_cong}">${fmt(p.so_cong)}</span><span class="text-gray-300"> / </span><input type="number" step="any" class="pay-cong-chuan bg-transparent w-10 text-center font-bold outline-none" value="${p.so_cong_chuan||30}" onchange="recalcRow(this.closest('.pay-card'))" title="Chỉ dùng cho công CHẤM TAY không gắn ca (dữ liệu cũ) — công có ca sáng/chiều đã tính đúng theo cham_cong, không phụ thuộc số này"></div>`)}
        ${box('Tiền lương', `<div class="pay-tien-luong text-sm font-bold text-gray-700" data-val="${p.luong_theo_cong||0}">${fmtD(p.luong_theo_cong)}</div>`)}
        ${box('KPI tự động', `<div class="text-sm">${kpiCell}</div>`)}
        ${box('Trừ BHXH (10.5%)', `<div class="pay-tru-bhxh text-sm font-bold text-red-500">${fmtD(tv?0:(p.tru_bhxh||0))}</div>`)}
      </div>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
        ${inpBox('Lương BHXH', 'pay-luong-bhxh', moneyFmt(tv?0:(p.luong_bhxh||0)))}
        ${inpBox('Thưởng khác', 'pay-thuong-khac', moneyFmt(p.thuong_khac||0))}
        ${inpBox('Khoản trừ', 'pay-khoan-tru', moneyFmt(p.khoan_tru||0))}
      </div>
      <div class="flex gap-2">
        <button onclick="savePayrollRow(this,'${p.employee_id}','${thang}')" class="btn-ios btn-ios-gold ${payBtn?'':'flex-1'} px-4 py-2 text-sm">💾 Tính lại</button>
        ${payBtn}
      </div>
    </div>`;
  }).join('') || '<div class="col-span-full text-center text-gray-300 py-10">Chưa có nhân viên đang làm</div>';
}

// Màu avatar ổn định theo tên
const _AVA_HR = ['#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_HR[h % _AVA_HR.length];
}

function recalcRow(tr) {
  // 27/08/2026: "Tiền lương" (luong_theo_cong) giờ = Σ tiền từng ca đã chấm (server tính từ
  // cham_cong.tien_cong, xem hr_db.tien_cong_da_cham) — KHÔNG còn phụ thuộc số "ngày công
  // chuẩn" gõ ở đây (số đó chỉ còn dùng cho phần công CHẤM TAY không gắn ca, hiếm gặp). Vì
  // vậy KHÔNG tự tính lại "Tiền lương" ở client nữa — đọc thẳng số SERVER đã trả
  // (data-val, cố định, không đổi theo BHXH/thưởng/trừ), chỉ tính lại phần TỔNG.
  const tv = (tr.dataset.cheDo || 'chinh_thuc') === 'thu_viec';
  const tienLuong = parseFloat(tr.querySelector('.pay-tien-luong').dataset.val || 0);
  const luongBHXH = tv ? 0 : moneyParse(tr.querySelector('.pay-luong-bhxh').value);
  const kpiTotal = tv ? 0 : parseFloat((tr.querySelector('.pay-kpi-total') || {dataset:{val:0}}).dataset.val || 0);
  const thuongKhac = moneyParse(tr.querySelector('.pay-thuong-khac').value);
  const khoanTru = moneyParse(tr.querySelector('.pay-khoan-tru').value);
  const truBHXH = tv ? 0 : Math.round(luongBHXH * 0.105);
  const tongLinh = Math.round(tienLuong - truBHXH + kpiTotal + thuongKhac - khoanTru);
  tr.querySelector('.pay-tru-bhxh').textContent = fmtD(truBHXH);
  const tlEl = tr.querySelector('.pay-tong-linh');
  tlEl.textContent = fmtD(tongLinh);
  tlEl.title = `Lương: ${fmtD(tienLuong)} − BHXH: ${fmtD(truBHXH)} + KPI: ${fmtD(kpiTotal)} + Thưởng: ${fmtD(thuongKhac)} − Trừ: ${fmtD(khoanTru)}`;
}

async function savePayrollRow(btn, employeeId, thang) {
  const tr = btn.closest('.pay-card');
  const so_cong_chuan = parseFloat(tr.querySelector('.pay-cong-chuan').value || 30);
  const luong_bhxh = moneyParse(tr.querySelector('.pay-luong-bhxh').value);
  const thuong_khac = moneyParse(tr.querySelector('.pay-thuong-khac').value);
  const khoan_tru = moneyParse(tr.querySelector('.pay-khoan-tru').value);
  const pin = localStorage.getItem(PIN_KEY) || '';
  btn.disabled = true; btn.textContent = '⏳ Đang tính...';
  const res = await fetch('/api/hr/payroll', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({employee_id: employeeId, thang, so_cong_chuan, luong_bhxh, thuong_khac, khoan_tru, pin})
  });
  const d = await res.json();
  btn.disabled = false; btn.textContent = '💾 Tính lại';
  if (d.success) {
    // Chốt xong → render lại cả lưới (hiện nút "Chi trả" + cập nhật thanh tổng quan)
    loadPayroll();
  } else {
    // PIN qua modal ẩn ****** (askPin của base.html) — không dùng prompt() vì lộ chữ
    askPin('Nhập mã PIN để tính lương:', newPin => {
      localStorage.setItem(PIN_KEY, newPin.trim());
      savePayrollRow(btn, employeeId, thang);
    });
  }
}

// ── Chi trả lương (ghi bút toán 'chi' vào sổ quỹ) ────────────
let _payCtx = null;
function openPaySalary(employeeId, thang, hoTen, thucLinh) {
  _payCtx = { employeeId, thang, thucLinh: Number(thucLinh) || 0 };
  document.getElementById('pay-sub').textContent = `${hoTen} — lương tháng ${thang}`;
  document.getElementById('pay-thuclinh').textContent = fmtD(_payCtx.thucLinh);
  document.getElementById('pay-hinhthuc').value = 'tien_mat';
  document.getElementById('pay-split-tm').value = '';
  document.getElementById('pay-split-ck').value = '';
  document.getElementById('pay-pin').value = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('pay-msg').textContent = '';
  onPayHtttChange();
  document.getElementById('pay-modal').classList.remove('hidden');
}
function closePayModal() { document.getElementById('pay-modal').classList.add('hidden'); _payCtx = null; }
function onPayHtttChange() {
  document.getElementById('pay-split-row').style.display =
    document.getElementById('pay-hinhthuc').value === 'ca_hai' ? 'flex' : 'none';
}
async function confirmPaySalary() {
  if (!_payCtx) return;
  const msg = document.getElementById('pay-msg');
  const httt = document.getElementById('pay-hinhthuc').value;
  const pin = document.getElementById('pay-pin').value.trim();
  if (pin) localStorage.setItem(PIN_KEY, pin);
  let stm = 0, sck = 0;
  if (httt === 'ca_hai') {
    stm = moneyParse(document.getElementById('pay-split-tm').value) || 0;
    sck = moneyParse(document.getElementById('pay-split-ck').value) || 0;
    if (Math.round(stm + sck) !== Math.round(_payCtx.thucLinh)) {
      msg.textContent = `⚠️ TM + CK (${fmtD(stm+sck)}) phải bằng thực lĩnh (${fmtD(_payCtx.thucLinh)}).`;
      msg.className = 'text-sm text-amber-600'; return;
    }
  }
  const res = await fetch('/api/hr/payroll/pay', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ employee_id: _payCtx.employeeId, thang: _payCtx.thang,
      hinh_thuc_tt: httt, so_tien_tien_mat: stm, so_tien_chuyen_khoan: sck, pin })
  });
  const d = await res.json();
  if (d.success) {
    msg.textContent = '✅ Đã chi trả — đã ghi vào sổ quỹ.';
    msg.className = 'text-sm text-green-600 font-semibold';
    setTimeout(() => { closePayModal(); loadPayroll(); }, 800);
  } else {
    msg.textContent = ({ wrong_pin:'❌ Sai mã PIN', chua_chot_luong:'❌ Chưa chốt lương — bấm "💾 Tính" trước.',
      da_tra_roi:'❌ Lương này đã chi trả rồi.', thuc_linh_khong_hop_le:'❌ Thực lĩnh không hợp lệ.'
    })[d.error] || ('❌ Lỗi: ' + d.error);
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

// ── KPI Doanh số ─────────────────────────────────────────────
async function loadKpiDS() {
  const res = await fetch('/api/hr/kpi/doanh-so');
  const d = await res.json();
  renderKpiDS(d.rows || []);
}

function renderKpiDS(rows) {
  const pin = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('kpi-ds-tbody').innerHTML = rows.map(r => `
    <tr class="border-b border-gray-50" data-id="${r.id}">
      <td class="px-3 py-1.5"><input class="inp text-sm kds-loai" value="${r.loai_san_pham||''}" placeholder="(tất cả)"></td>
      <td class="px-3 py-1.5 text-right"><input type="number" step="any" min="0" class="inp text-sm kds-tyle text-right" value="${r.ty_le||0}" style="width:80px"></td>
      <td class="px-3 py-1.5"><input class="inp text-sm kds-chu" value="${r.ghi_chu||''}"></td>
      <td class="px-3 py-1.5 text-right flex gap-1 justify-end">
        <button onclick="saveKpiDsRow(this)" class="btn-ios btn-ios-gold px-2 py-1 text-xs">💾</button>
        <button onclick="deleteKpiDsRow(this)" class="btn-ios bg-red-50 hover:bg-red-100 text-red-500 border border-red-200 px-2 py-1 text-xs">🗑️</button>
      </td>
    </tr>`).join('') || '<tr><td colspan="4" class="text-center text-gray-300 py-4 text-sm">Chưa có công thức. Thêm dòng mới.</td></tr>';
}

function addKpiDsRow() {
  const tbody = document.getElementById('kpi-ds-tbody');
  const tr = document.createElement('tr');
  tr.dataset.id = '';
  tr.className = 'border-b border-gray-50';
  tr.innerHTML = `
    <td class="px-3 py-1.5"><input class="inp text-sm kds-loai" placeholder="(tất cả)"></td>
    <td class="px-3 py-1.5 text-right"><input type="number" step="any" min="0" class="inp text-sm kds-tyle text-right" value="0" style="width:80px"></td>
    <td class="px-3 py-1.5"><input class="inp text-sm kds-chu"></td>
    <td class="px-3 py-1.5 text-right flex gap-1 justify-end">
      <button onclick="saveKpiDsRow(this)" class="btn-ios btn-ios-gold px-2 py-1 text-xs">💾</button>
      <button onclick="deleteKpiDsRow(this)" class="btn-ios bg-red-50 hover:bg-red-100 text-red-500 border border-red-200 px-2 py-1 text-xs">🗑️</button>
    </td>`;
  tbody.appendChild(tr);
}

async function saveKpiDsRow(btn) {
  const tr = btn.closest('tr');
  const id = tr.dataset.id || null;
  const pin = localStorage.getItem(PIN_KEY) || '';
  const res = await fetch('/api/hr/kpi/doanh-so', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id, pin,
      loai_san_pham: tr.querySelector('.kds-loai').value.trim(),
      ty_le: parseFloat(tr.querySelector('.kds-tyle').value || 0),
      ghi_chu: tr.querySelector('.kds-chu').value.trim()})
  });
  const d = await res.json();
  if (d.success) { renderKpiDS(d.rows); }
  else { alert('Sai PIN hoặc không có quyền.'); }
}

async function deleteKpiDsRow(btn) {
  const tr = btn.closest('tr');
  const id = tr.dataset.id;
  if (!id) { tr.remove(); return; }
  const pin = localStorage.getItem(PIN_KEY) || '';
  const res = await fetch(`/api/hr/kpi/doanh-so/${id}`, {
    method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({pin})
  });
  if ((await res.json()).success) loadKpiDS();
  else alert('Sai PIN.');
}

// ── KPI Chuyên cần ───────────────────────────────────────────
async function loadKpiCC() {
  const res = await fetch('/api/hr/kpi/chuyen-can');
  const d = await res.json();
  document.getElementById('kpi-cc-tbody').innerHTML = (d.rows||[]).map(r => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-1.5 text-right"><input type="number" step="any" class="inp text-sm text-right kcc-min" value="${r.min_cong}" style="width:80px"></td>
      <td class="px-3 py-1.5 text-right"><input type="number" step="any" class="inp text-sm text-right kcc-max" value="${r.max_cong!=null?r.max_cong:''}" placeholder="∞" style="width:80px"></td>
      <td class="px-3 py-1.5 text-right"><input type="text" inputmode="numeric" class="inp text-sm text-right kcc-diem money-inp" value="${moneyFmt(r.diem||0)}" style="width:90px"></td>
      <td class="px-3 py-1.5"><input class="inp text-sm kcc-chu" value="${r.ghi_chu||''}"></td>
    </tr>`).join('');
}

async function saveKpiCC() {
  const pin = localStorage.getItem(PIN_KEY) || '';
  const rows = [...document.querySelectorAll('#kpi-cc-tbody tr')].map(tr => ({
    min_cong: parseFloat(tr.querySelector('.kcc-min').value || 0),
    max_cong: tr.querySelector('.kcc-max').value !== '' ? parseFloat(tr.querySelector('.kcc-max').value) : null,
    diem: moneyParse(tr.querySelector('.kcc-diem').value),
    ghi_chu: tr.querySelector('.kcc-chu').value.trim(),
  }));
  const res = await fetch('/api/hr/kpi/chuyen-can', {
    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({rows, pin})
  });
  const d = await res.json();
  if (d.success) { alert('✅ Đã lưu thang chuyên cần!'); loadKpiCC(); }
  else alert('Sai PIN.');
}

// ── KPI Thái độ config ───────────────────────────────────────
async function loadKpiTD() {
  const res = await fetch('/api/hr/kpi/thai-do');
  const d = await res.json();
  document.getElementById('kpi-td-tbody').innerHTML = (d.levels||[]).map(r => `
    <tr class="border-b border-gray-50">
      <td class="px-3 py-1.5 text-center">
        <span class="text-lg">${['','⭐','⭐⭐','⭐⭐⭐','⭐⭐⭐⭐','⭐⭐⭐⭐⭐'][r.muc]}</span>
        <span class="text-xs text-gray-400 block">Mức ${r.muc}</span>
      </td>
      <td class="px-3 py-1.5"><input class="inp text-sm ktd-mo-ta" value="${r.mo_ta||''}"></td>
      <td class="px-3 py-1.5 text-right"><input type="text" inputmode="numeric" class="inp text-sm text-right ktd-diem money-inp" data-muc="${r.muc}" value="${moneyFmt(r.diem||0)}" style="width:90px"></td>
    </tr>`).join('');
}

async function saveKpiTD() {
  const pin = localStorage.getItem(PIN_KEY) || '';
  const levels = [...document.querySelectorAll('#kpi-td-tbody tr')].map(tr => ({
    muc: parseInt(tr.querySelector('.ktd-diem').dataset.muc),
    mo_ta: tr.querySelector('.ktd-mo-ta').value.trim(),
    diem: moneyParse(tr.querySelector('.ktd-diem').value),
  }));
  const res = await fetch('/api/hr/kpi/thai-do', {
    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({levels, pin})
  });
  if ((await res.json()).success) { alert('✅ Đã lưu thang thái độ!'); }
  else alert('Sai PIN.');
}

// ── Đánh giá thái độ tháng ──────────────────────────────────
let _kpiTdLevels = [];
async function loadDanhGia() {
  const thang = document.getElementById('dg-month').value;
  if (!thang) return;
  if (!_kpiTdLevels.length) {
    const cr = await fetch('/api/hr/kpi/thai-do');
    _kpiTdLevels = (await cr.json()).levels || [];
  }
  const res = await fetch(`/api/hr/kpi/danh-gia?thang=${thang}`);
  const d = await res.json();
  document.getElementById('kpi-dg-tbody').innerHTML = (d.rows||[])
    .filter(r => r.che_do !== 'thu_viec')
    .map(r => `
    <tr class="border-b border-gray-50" data-eid="${r.employee_id}">
      <td class="px-3 py-2 font-semibold" data-label="Nhân viên">${r.ho_ten}<div class="text-xs text-gray-400">${r.chuc_vu||''}</div></td>
      <td class="px-3 py-2 text-center" data-label="Mức thái độ (1–5)">
        <select class="inp text-sm dg-muc" style="width:auto">
          <option value="">— Chưa đánh giá</option>
          ${_kpiTdLevels.map(l => `<option value="${l.muc}" ${r.muc==l.muc?'selected':''}>${['','⭐','⭐⭐','⭐⭐⭐','⭐⭐⭐⭐','⭐⭐⭐⭐⭐'][l.muc]} Mức ${l.muc}</option>`).join('')}
        </select>
      </td>
      <td class="px-3 py-2 text-right font-semibold text-green-600" data-label="KPI thái độ">${r.diem?fmtD(r.diem):'—'}</td>
      <td class="px-3 py-2" data-label="Ghi chú"><input class="inp text-sm dg-chu" value="${r.ghi_chu||''}" placeholder="Nhận xét..."></td>
      <td class="px-3 py-2 item-entry-del"><button onclick="saveDanhGiaRow(this,'${thang}')" class="btn-ios btn-ios-gold px-2 py-1 text-xs">💾</button></td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-6">Không có nhân viên chính thức</td></tr>';
}

async function saveDanhGiaRow(btn, thang) {
  const tr = btn.closest('tr');
  const employee_id = tr.dataset.eid;
  const muc = tr.querySelector('.dg-muc').value;
  if (!muc) { alert('Vui lòng chọn mức thái độ.'); return; }
  const pin = document.getElementById('dg-pin').value.trim() || localStorage.getItem(PIN_KEY) || '';
  const nguoi_danh_gia = document.getElementById('dg-nguoi').value.trim();
  const res = await fetch('/api/hr/kpi/danh-gia', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({employee_id, thang, muc: parseInt(muc), pin, nguoi_danh_gia,
      ghi_chu: tr.querySelector('.dg-chu').value.trim()})
  });
  const d = await res.json();
  if (d.success) {
    btn.textContent = '✅';
    const diemCell = tr.querySelector('td:nth-child(3)');
    if (diemCell) diemCell.textContent = fmtD(d.diem);
    setTimeout(() => { btn.textContent = '💾'; }, 1200);
  } else { alert('Sai PIN hoặc không có quyền.'); }
}

// ═══════════════════════════════════════════════════════════════════════════
// TAB KPI — 27/08/2026: chuyển NGUYÊN VĂN logic từ templates/kpi.html (trang /kpi cũ,
// route trang đã xóa — /api/kpi/* GIỮ NGUYÊN). Đổi tên `fmt`→`kpiFmt` (TRÁNH ĐỤNG `fmt` đã
// khai báo ở đầu file này — khác định dạng: fmt() ở trên KHÔNG có 'đ', kpiFmt() CÓ 'đ'); mọi
// id/class HTML + tên hàm khác đã đổi tiền tố `kpi-`/`kpi` khi dựng HTML phía trên (không
// đụng tới `fmt`/`fmtN`/`_du`/`_cfg`/`_bdCot`/`_bdNv` — không trùng tên gì sẵn có trong file).
// ═══════════════════════════════════════════════════════════════════════════
const kpiFmt = n => (Math.round(n||0)).toLocaleString('vi-VN') + 'đ';
const fmtN = n => (Math.round(n||0)).toLocaleString('vi-VN');
let _du = null, _cfg = null, _bdCot = null, _bdNv = {};
let _kpiLoaded = false;

function mauTheoS(S){ return S < 70 ? 'kpi-huy' : S < 85 ? 'kpi-kha' : S <= 100 ? 'kpi-tot' : 'kpi-xs'; }

function thangHienTaiKpi(){
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0');
}

async function kpiTaiKpi(){
  const thang = (document.getElementById('kpi-f-thang').value || '').slice(0, 7) || thangHienTaiKpi();
  document.getElementById('kpi-ds-nv').innerHTML =
    '<div class="text-center text-gray-400 py-8 text-sm">Đang tính…</div>';
  const r = await fetch('/api/kpi/thang?thang=' + thang);
  const d = await r.json();
  if (!d.success){
    document.getElementById('kpi-ds-nv').innerHTML =
      '<div class="ios-card p-6 text-center text-red-600">' + (d.thong_bao || d.error) + '</div>';
    return;
  }
  _du = d.du_lieu;
  kpiVeTongQuan(); kpiVeCanhBao(); kpiVeDanhSach(); kpiVeBieuDoCot();
}

function kpiVeCanhBao(){
  const el = document.getElementById('kpi-canh-bao');
  const cb = (_du.chi_tieu || {})._canh_bao;
  if (!cb){ el.style.display = 'none'; return; }
  el.style.display = '';
  el.innerHTML = '<div class="ios-card p-3 text-sm" style="background:#fffbeb;border:1.5px solid #fde68a">'
    + '<b class="text-amber-800">⚠️ Lưu ý chỉ tiêu:</b> <span class="text-amber-900">' + cb + '</span></div>';
}

function kpiVeTongQuan(){
  const nv = _du.nhan_vien || [];
  const dat = nv.filter(x => x.S >= 85).length;
  const the = [
    ['Nhân viên được chấm', nv.length + ' người'],
    ['Đạt chuẩn (S ≥ 85)', dat + '/' + nv.length],
    ['Lãi gộp tháng', kpiFmt(_du.lai_gop)],
    ['Trần quỹ hoa hồng', kpiFmt(_du.tran_quy)],
    ['Tổng hoa hồng phải trả', kpiFmt(_du.tong_tra)],
  ];
  document.getElementById('kpi-tong-quan').innerHTML = the.map(t =>
    '<div class="kpi-the"><div class="nhan">' + t[0] + '</div><div class="so">' + t[1] + '</div></div>'
  ).join('');
}

function kpiVeDanhSach(){
  const nv = [..._du.nhan_vien].sort((a,b) => b.S - a.S);
  document.getElementById('kpi-ds-nv').innerHTML = nv.map((r,i) => {
    const dtTho = Object.values(r.dt_tho||{}).reduce((a,b)=>a+b,0);
    const dtQd  = Object.values(r.dt_quy_doi||{}).reduce((a,b)=>a+b,0);
    return `<div class="kpi-nv-hang" onclick="kpiMoNv(${r.employee_id},'${(r.ho_ten||'').replace(/'/g,"\\'")}')">
      <div class="flex items-start gap-3 flex-wrap">
        <div class="w-9 h-9 rounded-full flex items-center justify-center text-white font-bold shrink-0"
             style="background:linear-gradient(135deg,#4a0000,#8b0000)">${i+1}</div>
        <div class="flex-1" style="min-width:150px">
          <div class="font-bold text-gray-800">${r.ho_ten}
            ${r.thu_viec ? '<span class="kpi-vien-tv ml-1">Thử việc — chưa trả</span>' : ''}</div>
          <div class="text-gray-500" style="font-size:11.5px">${r.so_hd} hóa đơn · ${r.so_khach_moi} khách mới</div>
          <div class="kpi-vach"><i class="${mauTheoS(r.S)}" style="width:${Math.min(r.S,120)/1.2}%"></i></div>
        </div>
        <div class="text-right shrink-0">
          <div class="text-xl font-extrabold" style="color:${r.cham_duoc?'#8b0000':'#94a3b8'}">
            ${r.cham_duoc ? r.S : '—'}</div>
          <div class="text-gray-500" style="font-size:11px">
            ${r.cham_duoc ? ('điểm · nhận ' + r.he_so + '%') : 'chưa chấm được'}</div>
        </div>
        <div class="text-right shrink-0" style="min-width:120px">
          <div class="text-gray-500" style="font-size:11px">Doanh thu</div>
          <div class="text-sm font-bold text-gray-700">${kpiFmt(dtTho)}</div>
          <div class="text-gray-400" style="font-size:11px">quy đổi ${kpiFmt(dtQd)}</div>
        </div>
        <div class="text-right shrink-0" style="min-width:132px">
          <div class="text-gray-500" style="font-size:11px">Thực nhận</div>
          <div class="text-base font-extrabold ${r.thuc_nhan>0?'text-emerald-600':'text-gray-400'}">
            ${kpiFmt(r.thuc_nhan)}</div>
          ${r.so_dong_hang ? `<div class="text-gray-500" style="font-size:10.5px">
            hoa hồng ${kpiFmt(r.hoa_hong_co_so)} × ${r.he_so}%</div>
          <div class="text-gray-400" style="font-size:10.5px">
            ảnh hưởng TB <b class="text-purple-600">${r.anh_huong_tb}%</b> · ${r.so_dong_hang} món</div>` : ''}
        </div>
      </div></div>`;
  }).join('') || '<div class="ios-card p-6 text-center text-gray-400">Chưa có nhân viên nào.</div>';
}

function kpiVeBieuDoCot(){
  const nv = [..._du.nhan_vien].sort((a,b) => b.S - a.S);
  const ctx = document.getElementById('kpi-bd-cot');
  if (_bdCot) _bdCot.destroy();
  _bdCot = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: nv.map(r => r.ho_ten),
      datasets: [
        {label:'Doanh thu quy đổi', data: nv.map(r => Object.values(r.dt_quy_doi||{}).reduce((a,b)=>a+b,0)),
         backgroundColor:'#8b0000', borderRadius:6, yAxisID:'y'},
        {label:'Điểm tháng (S)', data: nv.map(r => r.S), type:'line',
         borderColor:'#d97706', backgroundColor:'#d97706', tension:.3, yAxisID:'y1'},
      ]
    },
    options: {
      responsive:true, maintainAspectRatio:false,
      plugins:{legend:{labels:{font:{size:11}}},
        tooltip:{callbacks:{label:c => c.dataset.yAxisID==='y1'
          ? c.dataset.label+': '+c.parsed.y+' điểm' : c.dataset.label+': '+kpiFmt(c.parsed.y)}}},
      scales:{
        y:{position:'left', ticks:{font:{size:10}, callback:v => (v/1e6).toFixed(0)+'tr'}},
        y1:{position:'right', min:0, max:120, grid:{drawOnChartArea:false}, ticks:{font:{size:10}}},
        x:{ticks:{font:{size:10}}}
      }
    }
  });
}

// ── Chi tiết 1 nhân viên ────────────────────────────────────────────────────
async function kpiMoNv(id, ten){
  const thang = (document.getElementById('kpi-f-thang').value || '').slice(0, 7) || thangHienTaiKpi();
  const r = _du.nhan_vien.find(x => x.employee_id === id);
  document.getElementById('kpi-m-ten').textContent = ten;
  document.getElementById('kpi-m-phu').textContent =
    'Điểm ' + r.S + ' · ảnh hưởng TB ' + (r.anh_huong_tb||0) + '% · hoa hồng '
    + kpiFmt(r.hoa_hong_co_so) + ' × ' + r.he_so + '% = ' + kpiFmt(r.thuc_nhan);
  document.getElementById('kpi-m-than').innerHTML = '<div class="text-center text-gray-400 py-6">Đang tải…</div>';
  document.getElementById('kpi-modal-nv').classList.remove('hidden');
  document.getElementById('kpi-modal-nv').classList.add('flex');

  const [rc, rx] = await Promise.all([
    fetch('/api/kpi/chi-tiet/' + id + '?thang=' + thang),
    fetch('/api/kpi/xu-huong/' + id + '?thang=' + thang),
  ]);
  const dc = await rc.json(), dx = await rx.json();
  if (!dc.success){ document.getElementById('kpi-m-than').innerHTML =
    '<div class="text-red-600 text-center py-4">' + (dc.thong_bao||dc.error) + '</div>'; return; }

  const chiSo = dc.chi_so.map(c => {
    const dv = c.kieu === 'tien' ? kpiFmt(c.ket_qua) : (c.kieu === 'pct' ? c.ket_qua+'%' : fmtN(c.ket_qua));
    const chuaDo = c.dat_pct === null;
    const mt = chuaDo ? '<i class="text-amber-600">chưa đặt chỉ tiêu</i>'
             : (c.kieu === 'tien' ? kpiFmt(c.chi_tieu) : (c.kieu === 'pct' ? c.chi_tieu+'%' : fmtN(c.chi_tieu)));
    return `<tr${chuaDo?' style="background:#fffbeb"':''}><td>${c.ten}</td>
      <td class="text-right">${dv}</td><td class="text-right text-gray-500">${mt}</td>
      <td class="text-right font-bold">${chuaDo?'—':c.dat_pct+'%'}</td>
      <td class="text-right text-gray-500">${c.trong_so}%</td>
      <td class="text-right font-bold" style="color:#8b0000">${chuaDo?'—':c.gop}</td></tr>`;
  }).join('');

  const hh = dc.hoa_hong.map(h =>
    `<tr><td>${h.nhom}<div class="text-gray-400" style="font-size:10px">${h.so_dong||0} món</div></td>
     <td class="text-right">${kpiFmt(h.doanh_thu)}</td>
     <td class="text-right text-gray-500">${h.ty_le}%</td>
     <td class="text-right" style="color:#7c3aed">${h.anh_huong_tb||0}%</td>
     <td class="text-right font-bold">${kpiFmt(h.hoa_hong)}</td></tr>`).join('');

  const hd = dc.hoa_don.map(h =>
    `<tr><td>${h.ma_hd}</td><td>${(h.ngay||'').slice(0,10)}</td><td>${h.khach||''}</td>
     <td class="text-right">${h.lan_truoc===null?'<span class="text-red-500">không ghi khách</span>'
        :(h.lan_truoc===0?'<b class="text-emerald-600">KHÁCH MỚI</b>':'đã mua '+h.lan_truoc+' lần')}</td>
     <td class="text-right">${h.he_so}</td><td class="text-right">${kpiFmt(h.tien)}</td>
     <td class="text-right font-bold">${kpiFmt(h.quy_doi)}</td></tr>`).join('')
    || '<tr><td colspan="7" class="text-center text-gray-400 py-3">Chưa có hóa đơn nào gắn tên người này.</td></tr>';

  const vp = (dc.vi_pham||[]).map(v =>
    `<li>${v.loai}: ${v.so_lan} lần — trừ ${v.tru} điểm</li>`).join('') ||
    '<li class="text-emerald-600">Không có vi phạm nào.</li>';

  // ── MỨC ĐỘ ẢNH HƯỞNG chấm cho TỪNG MÓN HÀNG (bản 2.0) ──
  const dgs = dc.dong_hang || [];
  const mauDiem = p => p >= 70 ? '#059669' : (p >= 40 ? '#7c3aed' : '#94a3b8');
  const ahHtml = !dgs.length ? '' : `
    <div class="font-bold text-sm text-gray-700 mb-1">🎖️ Mức độ ảnh hưởng từng món hàng</div>
    <div class="ios-card p-3 mb-2" style="background:#faf5ff;border:1.5px solid #e9d5ff">
      <div class="text-gray-600 text-center" style="font-size:11.5px">
        Hoa hồng mỗi món = doanh thu × tỷ lệ nhóm ×
        <b class="text-purple-700">mức ảnh hưởng</b> × hệ số điểm tháng
      </div>
      <div class="text-gray-500 text-center mt-1" style="font-size:10.5px">
        Ảnh hưởng = <b>A</b> món hàng × <b>B</b> khách × <b>C</b> cách bán (mỗi trục 0–100%)
      </div>
    </div>
    <div class="overflow-x-auto mb-4"><table class="kpi-ct-bang"><thead><tr>
      <th>Món hàng</th><th>Khách</th><th class="text-right">Doanh thu</th>
      <th class="text-right">Ảnh hưởng</th><th class="text-right">Hoa hồng</th><th>Vì sao</th>
    </tr></thead><tbody>${
      dgs.slice().sort((x,y)=>y.anh_huong-x.anh_huong).map(h =>
        `<tr>
          <td>${(h.ten||'').slice(0,26)}<div class="text-gray-400" style="font-size:10px">${h.nhom}</div></td>
          <td>${(h.khach||'').slice(0,18)}</td>
          <td class="text-right">${kpiFmt(h.doanh_thu)}</td>
          <td class="text-right font-bold" style="color:${mauDiem(h.anh_huong)}">${h.anh_huong}%</td>
          <td class="text-right font-bold">${kpiFmt(h.hoa_hong)}</td>
          <td style="font-size:11px;color:#64748b">${(h.vet||[]).join(' × ')}</td></tr>`).join('')
    }</tbody></table></div>`;

  document.getElementById('kpi-m-than').innerHTML = ahHtml + `
    <div class="font-bold text-sm text-gray-700 mb-1">📈 Xu hướng 6 tháng</div>
    <div style="position:relative;height:170px" class="mb-4"><canvas id="kpi-bd-nv"></canvas></div>

    <div class="font-bold text-sm text-gray-700 mb-1">🎯 Điểm từng chỉ số</div>
    <div class="overflow-x-auto mb-4"><table class="kpi-ct-bang"><thead><tr>
      <th>Chỉ số</th><th class="text-right">Kết quả</th><th class="text-right">Chỉ tiêu</th>
      <th class="text-right">Đạt</th><th class="text-right">Trọng số</th><th class="text-right">Góp điểm</th>
    </tr></thead><tbody>${chiSo}</tbody></table></div>

    <div class="font-bold text-sm text-gray-700 mb-1">💰 Hoa hồng theo nhóm hàng
      <span class="text-gray-400 font-normal" style="font-size:11px">(đã nhân mức ảnh hưởng)</span></div>
    <div class="overflow-x-auto mb-4"><table class="kpi-ct-bang"><thead><tr>
      <th>Nhóm hàng</th><th class="text-right">Doanh thu</th><th class="text-right">Tỷ lệ</th>
      <th class="text-right">Ảnh hưởng TB</th>
      <th class="text-right">Hoa hồng</th></tr></thead><tbody>${hh}</tbody></table></div>

    <div class="font-bold text-sm text-gray-700 mb-1">⚖️ Kỷ luật</div>
    <ul class="text-xs text-gray-600 mb-4 pl-4 list-disc">${vp}</ul>

    <div class="font-bold text-sm text-gray-700 mb-1">🧾 Từng hóa đơn (dẫn chứng)</div>
    <div class="overflow-x-auto"><table class="kpi-ct-bang"><thead><tr>
      <th>Hóa đơn</th><th>Ngày</th><th>Khách</th><th class="text-right">Loại khách</th>
      <th class="text-right">Hệ số</th><th class="text-right">Tiền</th><th class="text-right">Quy đổi</th>
    </tr></thead><tbody>${hd}</tbody></table></div>`;

  if (_bdNv.c) _bdNv.c.destroy();
  _bdNv.c = new Chart(document.getElementById('kpi-bd-nv'), {
    type:'line',
    data:{ labels: dx.diem.map(x => x.thang.slice(5)+'/'+x.thang.slice(2,4)),
      datasets:[
        {label:'Điểm S', data: dx.diem.map(x=>x.S), borderColor:'#8b0000',
         backgroundColor:'rgba(139,0,0,.08)', fill:true, tension:.3, yAxisID:'y'},
        {label:'Hoa hồng', data: dx.diem.map(x=>x.hoa_hong), borderColor:'#059669',
         tension:.3, yAxisID:'y1'},
      ]},
    options:{responsive:true, maintainAspectRatio:false,
      plugins:{legend:{labels:{font:{size:10}}}},
      scales:{y:{min:0,max:120,ticks:{font:{size:9}}},
        y1:{position:'right',grid:{drawOnChartArea:false},
            ticks:{font:{size:9},callback:v=>(v/1e6).toFixed(1)+'tr'}},
        x:{ticks:{font:{size:9}}}}}
  });
}

function kpiDongModal(){
  document.getElementById('kpi-modal-nv').classList.add('hidden');
  document.getElementById('kpi-modal-nv').classList.remove('flex');
}

// ── Tham số ─────────────────────────────────────────────────────────────────
async function kpiMoThamSo(){
  const r = await fetch('/api/kpi/cau-hinh');
  const d = await r.json();
  if (!d.success){ alert(d.thong_bao || d.error); return; }
  _cfg = d.cfg;
  const _ah = d.anh_huong || {};
  const o = (nhan, key, val, buoc) =>
    `<div class="kpi-ts-o"><label>${nhan}</label>
     <input type="number" step="${buoc||'0.01'}" data-key="${key}" value="${val}"></div>`;
  document.getElementById('kpi-ts-than').innerHTML = `
    <div class="font-bold text-sm text-gray-700 mb-2">💰 Tỷ lệ hoa hồng (% doanh thu)</div>
    ${o('① Vàng cao tuổi','hoa_hong.vang_cao',_cfg.hoa_hong.vang_cao)}
    ${o('② Vàng tây / trang sức','hoa_hong.trang_suc',_cfg.hoa_hong.trang_suc)}
    ${o('③ Bạc','hoa_hong.bac',_cfg.hoa_hong.bac)}
    <div class="text-gray-400 mb-2" style="font-size:11px">
      Lãi cầm đồ KHÔNG tính vào KPI (chủ tiệm chốt 01/08/2026).</div>

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">👥 Hệ số khách</div>
    ${o('Giảm mỗi lần giao dịch (0,95 = giảm 5%)','he_so_khach.giam_moi_lan',_cfg.he_so_khach.giam_moi_lan)}
    ${o('Sàn thấp nhất','he_so_khach.san',_cfg.he_so_khach.san)}
    ${o('Hóa đơn không ghi khách','he_so_khach.khong_dinh_danh',_cfg.he_so_khach.khong_dinh_danh)}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">⚖️ Trọng số chỉ số (cộng = 100)</div>
    ${o('Doanh thu vàng cao tuổi','trong_so.dt_vang_cao',_cfg.trong_so.dt_vang_cao,'1')}
    ${o('Doanh thu trang sức + bạc','trong_so.dt_trang_suc',_cfg.trong_so.dt_trang_suc,'1')}
    ${o('Hồ sơ khách (phần khó)','trong_so.ho_so_khach',_cfg.trong_so.ho_so_khach,'1')}
    ${o('Khách cũ quay lại','trong_so.khach_quay_lai',_cfg.trong_so.khach_quay_lai,'1')}
    ${o('Kỷ luật — an ninh','trong_so.ky_luat',_cfg.trong_so.ky_luat,'1')}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">🎯 Chỉ tiêu</div>
    ${o('Hệ số phấn đấu (1,10 = hơn nền 10%)','chi_tieu.he_so_phan_dau',_cfg.chi_tieu.he_so_phan_dau)}
    ${o('Chỉ tiêu hồ sơ khách (% hóa đơn)','chi_tieu.ho_so_khach_pct',_cfg.chi_tieu.ho_so_khach_pct,'1')}
    ${o('Tháng dưới bao nhiêu HĐ thì bỏ khỏi nền','chi_tieu.toi_thieu_hd_moi_thang',_cfg.chi_tieu.toi_thieu_hd_moi_thang,'1')}
    ${o('Trần mỗi chỉ số (%)','tran_chi_so',_cfg.tran_chi_so,'1')}
    ${o('Trần quỹ hoa hồng (% lãi gộp)','tran_quy_pct_lai_gop',_cfg.tran_quy_pct_lai_gop,'0.5')}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">⚖️ Trừ điểm kỷ luật</div>
    ${o('Mỗi lần lệch quỹ (đã chốt là lỗi)','tru_ky_luat.lech_quy',_cfg.tru_ky_luat.lech_quy,'1')}
    ${o('Mỗi lần đi muộn','tru_ky_luat.di_muon',_cfg.tru_ky_luat.di_muon,'1')}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">🎖️ MỨC ĐỘ ẢNH HƯỞNG — trục A: món hàng</div>
    <div class="text-gray-500 mb-2" style="font-size:11px">
      Món này có tự bán được không? Vàng ta giá niêm yết công khai nên ai đứng quầy
      cũng bán được → để thấp. Trang sức phải tư vấn, cho thử → để cao.</div>
    ${o('A · Vàng cao tuổi (%)','anh_huong.hang.vang_cao',(_ah.hang||{}).vang_cao,'1')}
    ${o('A · Vàng tây / trang sức (%)','anh_huong.hang.trang_suc',(_ah.hang||{}).trang_suc,'1')}
    ${o('A · Bạc (%)','anh_huong.hang.bac',(_ah.hang||{}).bac,'1')}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">👤 Trục B: khách</div>
    <div class="text-gray-500 mb-2" style="font-size:11px">
      Khách lần đầu 100%; khách cũ giảm dần theo số lần đã mua, không xuống dưới sàn.</div>
    ${o('B · Giảm mỗi lần mua (0,95 = giảm 5%)','anh_huong.khach.giam_moi_lan',(_ah.khach||{}).giam_moi_lan,'0.01')}
    ${o('B · Sàn thấp nhất (%)','anh_huong.khach.san',(_ah.khach||{}).san,'1')}
    ${o('B · Hóa đơn không ghi khách (%)','anh_huong.khach.khong_dinh_danh',(_ah.khach||{}).khong_dinh_danh,'1')}

    <div class="font-bold text-sm text-gray-700 mt-4 mb-2">🤝 Trục C: cách bán</div>
    ${o('C · Chủ động (mình mời / giới thiệu / quay lại tìm / đã chăm sóc) (%)','anh_huong.cach_ban.chu_dong',(_ah.cach_ban||{}).chu_dong,'1')}
    ${o('C · Bán kèm món thứ 2 trở đi (%)','anh_huong.cach_ban.ban_kem',(_ah.cach_ban||{}).ban_kem,'1')}
    ${o('C · Khách tự đến mua đúng thứ định mua (%)','anh_huong.cach_ban.thuong',(_ah.cach_ban||{}).thuong,'1')}
    ${o('C · Phải giảm giá mạnh mới chốt (%)','anh_huong.cach_ban.giam_gia_manh',(_ah.cach_ban||{}).giam_gia_manh,'1')}
    ${o('Giảm quá bao nhiêu % thì coi là "giảm giá mạnh"','anh_huong.giam_gia_manh_pct',_ah.giam_gia_manh_pct,'0.5')}
    ${o('Số ngày tính "đã chăm sóc trước"','anh_huong.so_ngay_cham_soc',_ah.so_ngay_cham_soc,'1')}

    <div class="mt-4 text-gray-500" style="font-size:11.5px">
      <b>Công thức:</b> hoa hồng mỗi món = doanh thu × tỷ lệ nhóm × (A × B × C) × hệ số điểm S.<br>
      Bậc hệ số theo điểm S: dưới 70 → 0% · 70–85 → 100% · 85–100 → 100% · trên 100 → 120%.
      (Muốn đổi bậc, báo để chỉnh trong mã nguồn — tránh sửa nhầm gây sai lương.)<br>
      Lãi cầm đồ KHÔNG tính vào KPI.
    </div>`;
  document.getElementById('kpi-modal-ts').classList.remove('hidden');
  document.getElementById('kpi-modal-ts').classList.add('flex');
}

function kpiDongTs(){
  document.getElementById('kpi-modal-ts').classList.add('hidden');
  document.getElementById('kpi-modal-ts').classList.remove('flex');
}

function kpiLuuThamSo(){
  const cfg = JSON.parse(JSON.stringify(_cfg));
  document.querySelectorAll('#kpi-ts-than input[data-key]').forEach(el => {
    const p = el.dataset.key.split('.');
    const v = parseFloat(el.value);
    if (isNaN(v)) return;
    if (p.length === 1) cfg[p[0]] = v;
    else if (p.length === 2){ cfg[p[0]] = cfg[p[0]] || {}; cfg[p[0]][p[1]] = v; }
    else { cfg[p[0]] = cfg[p[0]] || {}; cfg[p[0]][p[1]] = cfg[p[0]][p[1]] || {}; cfg[p[0]][p[1]][p[2]] = v; }
  });
  const ts = cfg.trong_so;
  const tong = ts.dt_vang_cao + ts.dt_trang_suc + ts.ho_so_khach + ts.khach_quay_lai + ts.ky_luat;
  if (Math.abs(tong - 100) > 0.01){
    alert('Tổng trọng số phải bằng 100 — hiện đang là ' + tong + '.');
    return;
  }
  askPin('Nhập PIN để lưu tham số KPI', async pin => {
    const r = await fetch('/api/kpi/cau-hinh', {method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({pin, cfg})});
    const d = await r.json();
    if (!d.success){ alert(d.error === 'wrong_pin' ? 'Sai PIN.' : (d.thong_bao || d.error)); return; }
    kpiDongTs(); kpiTaiKpi();
    alert('✅ Đã lưu tham số. Số liệu đã tính lại theo tham số mới.');
  });
}

// ── Chốt tháng ──────────────────────────────────────────────────────────────
function kpiChotThang(){
  const thang = (document.getElementById('kpi-f-thang').value || '').slice(0, 7) || thangHienTaiKpi();
  if (!_du){ alert('Hãy bấm Xem để tải số liệu tháng trước đã.'); return; }
  if (!confirm('Chốt KPI tháng ' + thang + ' và ghi ' + kpiFmt(_du.tong_tra)
      + ' vào bảng lương?\n\nNgười đã TRẢ lương tháng này sẽ được bỏ qua (không sửa số đã chi).')) return;
  askPin('Nhập PIN để chốt KPI tháng ' + thang, async pin => {
    const r = await fetch('/api/kpi/chot', {method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({pin, thang})});
    const d = await r.json();
    if (!d.success){
      if (String(d.error||'').startsWith('chua_du_chi_tieu:')){
        alert('⛔ CHƯA CHỐT ĐƯỢC — các chỉ số sau chưa có chỉ tiêu nên không chấm được:\n\n• '
          + String(d.error).split(':')[1].split(' · ').join('\n• ')
          + '\n\nVào "⚙️ Tham số" đặt chỉ tiêu tay cho tháng này, hoặc chờ đủ dữ liệu lịch sử.\n'
          + 'Chốt khi thiếu chỉ số sẽ ra lương SAI.');
        return;
      }
      alert(d.error === 'wrong_pin' ? 'Sai PIN.' : (d.thong_bao || d.error)); return;
    }
    let s = '✅ Đã chốt KPI tháng ' + thang + '\n\n';
    (d.dong||[]).forEach(x => { s += '• ' + x.ho_ten + ': KPI ' + kpiFmt(x.kpi_cu) + ' → ' + kpiFmt(x.kpi_moi)
      + '  (thực lĩnh ' + kpiFmt(x.thuc_linh_cu) + ' → ' + kpiFmt(x.thuc_linh_moi) + ')\n'; });
    (d.bo_qua||[]).forEach(x => { s += '• (bỏ qua) ' + x.ho_ten + ': ' + x.ly_do + '\n'; });
    alert(s);
  });
}

// ── Khởi động ────────────────────────────────────────────────
_initMonthPicker('att');
_initMonthPicker('pay');
// 27/08/2026: BỎ _initMonthPicker('dg') — bug THẬT gây "mất dữ liệu Nhân viên/Chấm công"
// (25/08/2026 khi gỡ tab "Đánh giá tháng" cũ, các ô dg-month-m/dg-month-y/dg-month bị xóa
// nhưng dòng gọi này vẫn còn → throw NGAY ở top-level → 2 dòng switchTab('emp')/loadEmployees()
// PHÍA DƯỚI không bao giờ chạy → danh sách NV + lưới chấm công luôn trống. Xem CLAUDE.md.
switchTab('emp');
loadEmployees();
</script>
{% endblock %}