{% extends "base.html" %}
{% block title %}Chấm công{% endblock %}
{% block content %}
<style>
  .cc-card { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05); }
  .cc-big-btn { font-size:17px; font-weight:800; padding:16px 10px; border-radius:16px; border:none; cursor:pointer; width:100%; }
  .cc-big-btn:disabled { opacity:.5; cursor:not-allowed; }
  .cc-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
  .cc-tab { padding:8px 14px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#6b7280; }
  .cc-tab.on { background:linear-gradient(135deg,#4a0000,#8b0000); color:#fff; border-color:transparent; }
</style>

<div class="max-w-3xl mx-auto px-4 py-6 space-y-5">

  <div class="flex items-center gap-3">
    <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl" style="background:linear-gradient(135deg,#4a0000,#8b0000)">🕐</div>
    <div>
      <h1 class="text-2xl font-black text-gray-900">Chấm công</h1>
      <p class="text-sm text-gray-400">Bấm Vào ca khi đến — chỉ nhận khi đang dùng Wi-Fi của tiệm</p>
    </div>
  </div>

  <!-- ── KHỐI NHÂN VIÊN ── -->
  <div class="cc-card p-5" id="cc-my-box">
    <div id="cc-my-status" class="text-sm text-gray-400">Đang tải...</div>
    <div class="grid grid-cols-2 gap-3 mt-3">
      <button id="btn-vao" class="cc-big-btn text-white" style="background:linear-gradient(135deg,#065f46,#059669)" onclick="ccVao()">🕐 Vào ca</button>
      <button id="btn-ra" class="cc-big-btn text-white" style="background:linear-gradient(135deg,#92400e,#d97706)" onclick="ccRa()">🏁 Tan ca</button>
    </div>
    <div id="cc-msg" class="text-sm font-semibold mt-3 min-h-[20px]"></div>

    <div class="mt-4">
      <div class="text-xs font-bold text-gray-500 uppercase mb-2">Tháng này của tôi</div>
      <div class="grid grid-cols-2 gap-2 mb-2">
        <div class="rounded-xl px-3 py-2 bg-gray-50 text-center"><div class="text-[11px] text-gray-400 uppercase">Tổng công</div><div class="font-black text-gray-800" id="cc-tong-cong">—</div></div>
        <div class="rounded-xl px-3 py-2 bg-green-50 text-center"><div class="text-[11px] text-green-600 uppercase">Tiền công dự kiến</div><div class="font-black text-green-700" id="cc-tong-tien">—</div></div>
      </div>
      <div id="cc-lich-su" class="space-y-1.5"></div>
    </div>
  </div>

  {% if is_director %}
  <!-- ── KHỐI GIÁM ĐỐC ── -->
  <div class="flex gap-2 flex-wrap">
    <button class="cc-tab on" data-t="duyet" onclick="ccTab('duyet')">📋 Duyệt ngày</button>
    <button class="cc-tab" data-t="cauhinh" onclick="ccTab('cauhinh')">⚙️ Cấu hình ca</button>
    <button class="cc-tab" data-t="lienket" onclick="ccTab('lienket')">🔗 Liên kết tài khoản</button>
  </div>

  <!-- Duyệt ngày -->
  <div class="cc-card p-5" id="cc-tab-duyet">
    <!-- TỔNG HỢP THÁNG: đặt app-ghi-nhận CẠNH bảng-công-tính-lương để soi lệch ngay.
         Trước 30/07/2026 không có chỗ nào bày ra nên chủ tiệm không biết máy đã ghi gì. -->
    <div class="mb-4 rounded-xl border border-gray-100 overflow-hidden">
      <div class="px-4 py-2.5 flex items-center gap-2 flex-wrap"
           style="background:linear-gradient(135deg,#fffbeb,#fef3c7)">
        <span class="font-extrabold text-gray-800 text-sm">📊 Tổng hợp tháng</span>
        <input id="cc-thang" type="date" class="input-ios text-sm" style="max-width:150px"
               onchange="ccLoadThang()" title="Chọn 1 ngày bất kỳ trong tháng muốn xem">
        <button onclick="ccLoadThang()" class="btn-ios btn-ios-secondary px-3 py-1.5 text-xs ml-auto">↻ Làm mới</button>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full text-sm data-card-table">
          <thead><tr class="text-[11px] text-gray-400 uppercase text-left">
            <th class="py-1.5 px-3">Nhân viên</th>
            <th class="py-1.5 pr-2">NV chấm trên app</th>
            <th class="py-1.5 pr-2">Bảng công tính lương</th>
            <th class="py-1.5 pr-2">Lệch</th>
            <th class="py-1.5 pr-2">Đi muộn</th>
            <th class="py-1.5 pr-3">Ghi chú</th>
          </tr></thead>
          <tbody id="cc-thang-body"></tbody>
        </table>
      </div>
      <div class="px-4 py-2 text-gray-500 bg-gray-50 border-t border-gray-100" style="font-size:11.5px">
        Cột <b>NV chấm trên app</b> = nhân viên tự bấm Vào ca · Cột <b>Bảng công</b> = số dùng
        TÍNH LƯƠNG (gồm cả ngày Giám đốc chấm tay). Hai cột lệch nhau thì bấm ngày đó xem lại bên dưới.
      </div>
    </div>

    <div class="flex items-center gap-2 flex-wrap mb-3">
      <input id="cc-ngay" type="date" class="input-ios" style="max-width:170px">
      <button onclick="ccLoadNgay()" class="btn-ios btn-ios-secondary px-4 py-2 text-sm">Xem</button>
      <button onclick="ccMoThem()" class="btn-ios text-white px-4 py-2 text-sm font-bold" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">➕ Thêm chấm công</button>
      <button onclick="ccChotNgay()" class="btn-ios text-white px-4 py-2 text-sm font-bold ml-auto" style="background:linear-gradient(135deg,#065f46,#059669)">✅ Chốt ngày (đánh dấu đã xem)</button>
    </div>
    <div class="text-[12px] text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 mb-3">
      ✅ Công <strong>tự điền ngay</strong> vào bảng công tính lương mỗi khi nhân viên chấm — <strong>không cần bấm "Chốt ngày" từng ngày</strong>. Sửa/xóa ô nào thì lương cập nhật theo liền. Nút "Chốt ngày" giờ chỉ để đánh dấu đã xem.
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm data-card-table">
        <thead><tr class="text-[11px] text-gray-400 uppercase text-left">
          <th class="py-1.5 pr-2">Nhân viên</th><th class="py-1.5 pr-2">Ca</th>
          <th class="py-1.5 pr-2">Vào</th><th class="py-1.5 pr-2">Ra</th>
          <th class="py-1.5 pr-2">Muộn</th><th class="py-1.5 pr-2">Công</th>
          <th class="py-1.5 pr-2">Tiền công</th><th class="py-1.5 pr-2">Đối chiếu app</th>
          <th class="py-1.5"></th>
        </tr></thead>
        <tbody id="cc-ngay-body"></tbody>
      </table>
    </div>
    <div id="cc-ngay-empty" class="hidden text-center text-gray-300 py-6">Chưa có chấm công ngày này</div>
  </div>

  <!-- Thêm/Sửa chấm công (GĐ/PGĐ) — chọn ĐÚNG ca vì lương ca sáng khác ca chiều -->
  <div id="cc-them-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,#eff6ff,#dbeafe)">
        <h3 id="cc-them-title" class="font-extrabold text-gray-800">➕ Thêm chấm công</h3>
        <button onclick="ccDongThem()" 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="cc-them-id" value="">
        <div id="cc-them-nv-box">
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Nhân viên</label>
          <select id="cc-them-nv" class="input-ios w-full cursor-pointer">
            <option value="">— Chọn nhân viên —</option>
          </select>
        </div>
        <div id="cc-them-nv-ten" class="hidden font-bold text-gray-800"></div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Ngày</label>
          <input id="cc-them-ngay" type="date" class="input-ios w-full">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Ca — lương ca sáng khác ca chiều, chọn đúng ca đã làm</label>
          <select id="cc-them-ca" class="input-ios w-full cursor-pointer" onchange="ccTinhTienPreview()">
            <option value="ca1">☀️ Ca 1 (sáng)</option>
            <option value="ca2">🌙 Ca 2 (chiều)</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Công (1 = đủ công, 0.8/0.5 = công lẻ, 0 = không tính công)</label>
          <input id="cc-them-cong" type="number" step="0.1" value="1" inputmode="decimal" class="input-ios w-full font-bold" oninput="ccTinhTienPreview()">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Ghi chú (vì sao chấm hộ — VD: quên bấm Vào ca)</label>
          <input id="cc-them-ghichu" class="input-ios w-full" placeholder="Không bắt buộc">
        </div>
        <div id="cc-them-tien-preview" class="text-xs text-emerald-700 bg-emerald-50 rounded-lg px-3 py-2"></div>
      </div>
      <div class="px-5 pb-5 flex items-center gap-2 flex-wrap">
        <button onclick="ccLuuThem()" class="btn-ios text-white px-5 py-2 flex-1 min-w-0 font-bold" style="background:linear-gradient(135deg,#1d4ed8,#2563eb)">💾 Lưu</button>
        <span id="cc-them-msg" class="text-xs text-red-500 w-full"></span>
        <button onclick="ccDongThem()" class="text-gray-400 text-sm hover:text-gray-600">Hủy</button>
      </div>
    </div>
  </div>

  <!-- Cấu hình -->
  <div class="cc-card p-5 hidden" id="cc-tab-cauhinh">
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
      <label>Ca 1 bắt đầu <input id="cf-ca1-bd" class="input-ios w-full" placeholder="08:00"></label>
      <label>Ca 1 kết thúc <input id="cf-ca1-kt" class="input-ios w-full" placeholder="15:00"></label>
      <label>Lương ca 1 (đ/tháng) <input id="cf-luong1" class="input-ios w-full text-right" inputmode="numeric" oninput="onSplitAmtInput(this)"></label>
      <label>Ca 2 bắt đầu <input id="cf-ca2-bd" class="input-ios w-full" placeholder="15:00"></label>
      <label>Ca 2 kết thúc <input id="cf-ca2-kt" class="input-ios w-full" placeholder="21:30"></label>
      <label>Lương ca 2 (đ/tháng) <input id="cf-luong2" class="input-ios w-full text-right" inputmode="numeric" oninput="onSplitAmtInput(this)"></label>
      <label>Mốc CHIA CA khi bấm Vào (bấm trước giờ này tính ca 1, sau tính ca 2 — KHÔNG phải giờ tính muộn; nên để giữa 2 ca, VD 11:30)
        <input id="cf-ca2-tu" class="input-ios w-full" placeholder="11:30"></label>
      <label>Muộn từ (phút) <input id="cf-muon" class="input-ios w-full text-right" inputmode="numeric"></label>
      <label>Trừ công khi muộn (%) <input id="cf-tru" class="input-ios w-full text-right" inputmode="numeric"></label>
      <label>Thử việc hưởng (% lương ca) <input id="cf-tv-pct" class="input-ios w-full text-right" inputmode="numeric"></label>
      <label>Được chấm sớm trước giờ ca (phút) <input id="cf-som" class="input-ios w-full text-right" inputmode="numeric"></label>
      <label class="col-span-2 sm:col-span-3">IP thêm được coi là Ở TIỆM (cách nhau dấu phẩy — dành cho máy đặc biệt, VD máy bàn vào qua Tailscale)
        <input id="cf-ip-them" class="input-ios w-full" placeholder="VD: 100.88.107.44"></label>
    </div>
    <div class="text-xs text-gray-400 mt-2">Giá 1 công của ca = lương tháng của ca ÷ 30. Muộn ≥ ngưỡng → công × (100% − % trừ). Riêng ngày GĐ/PGĐ tự tay Sửa/Thêm chấm công thì dùng đúng số công GĐ/PGĐ nhập, không áp công thức trừ này.<br>
    Nhận diện "ở tiệm": vào bằng địa chỉ LAN → theo IP nội bộ; vào qua đường hầm (link https công cộng) → so IP công cộng của thiết bị với IP công cộng của tiệm (tự động).</div>
    <button onclick="ccSaveCfg()" class="btn-ios text-white px-5 py-2.5 mt-3 font-bold" style="background:linear-gradient(135deg,#4a0000,#8b0000)">💾 Lưu cấu hình</button>
    <span id="cf-msg" class="text-sm font-semibold ml-2"></span>

    <!-- Bằng chứng: các lần chấm công BỊ CHẶN gần đây (từ lúc server chạy) -->
    <div class="mt-4 pt-3 border-t border-gray-100">
      <div class="text-xs font-bold text-gray-500 uppercase mb-1.5">📵 Thiết bị bị chặn gần đây</div>
      <div class="text-[11px] text-gray-400 mb-2">Nhân viên ĐỨNG Ở TIỆM mà vẫn bị chặn → IP của họ hiện ở đây, bấm ➕ để cho phép rồi <b>💾 Lưu cấu hình</b>. IP lạ giờ lạ (chấm từ nhà) thì ĐỪNG thêm.</div>
      <div id="cc-bichan-body" class="space-y-1.5 text-sm"><span class="text-gray-300 text-xs">Đang tải...</span></div>
    </div>
  </div>

  <!-- Liên kết -->
  <div class="cc-card p-5 hidden" id="cc-tab-lienket">
    <div class="text-xs text-gray-400 mb-2">Mỗi nhân sự gắn đúng 1 tài khoản đăng nhập của chính mình (gắn tài khoản đã dùng chỗ khác sẽ tự gỡ chỗ cũ).</div>
    <div id="cc-lienket-body" class="space-y-2"></div>
  </div>
  {% endif %}
</div>

<script>
// Mã thiết bị cố định theo trình duyệt — phát hiện 1 máy chấm cho nhiều người
function ccThietBi() {
  let tb = localStorage.getItem('cc_tb');
  if (!tb) { tb = 'tb_' + Math.random().toString(36).slice(2, 12) + Date.now().toString(36); localStorage.setItem('cc_tb', tb); }
  return tb;
}
function ccMsg(t, ok) { const el = document.getElementById('cc-msg'); el.textContent = t; el.style.color = ok ? '#065f46' : '#b91c1c'; }
const ccFmt = n => (n || 0).toLocaleString('vi-VN');
const CA_LABEL = { ca1: 'Ca 1 (sáng)', ca2: 'Ca 2 (chiều)' };

async function ccLoadToi() {
  try {
    const r = await fetch('/api/cham-cong/toi', { cache: 'no-store' });
    const d = await r.json();
    const st = document.getElementById('cc-my-status');
    if (!d.lien_ket) {
      st.innerHTML = '⚠️ Tài khoản của bạn <b>chưa được liên kết hồ sơ nhân sự</b> — nhờ Giám đốc vào mục "Liên kết tài khoản" bên dưới.';
      document.getElementById('btn-vao').disabled = true;
      document.getElementById('btn-ra').disabled = true;
      return;
    }
    let html = `👤 <b>${d.ho_ten}</b>`;
    if (d.che_do === 'thu_viec') html += ` <span class="cc-badge" style="background:#dbeafe;color:#1e40af">Thử việc — ${d.thu_viec_pct}% lương ca</span>`;
    html += d.o_tiem ? ' · <span class="cc-badge" style="background:#dcfce7;color:#166534">📶 Đang ở mạng tiệm</span>'
                     : ` · <span class="cc-badge" style="background:#fee2e2;color:#991b1b">📵 KHÔNG ở mạng tiệm — không chấm được</span> <span class="text-[10px] text-gray-300">(${d.mang || '?'})</span>`;
    (d.hom_nay || []).forEach(c => {
      html += `<div class="mt-1.5 text-gray-700">✅ <b>${CA_LABEL[c.ca] || c.ca}</b>: vào ${c.gio_vao || '—'}${c.gio_ra ? ' → ra ' + c.gio_ra : ''}`
        + (c.muon_phut > 0 ? ` <span class="cc-badge" style="background:#fef3c7;color:#92400e">muộn ${c.muon_phut}'</span>` : '')
        + ` · công <b>${c.cong}</b> · ${ccFmt(c.tien_cong)}đ</div>`;
    });
    if (!(d.hom_nay || []).length) html += '<div class="mt-1.5 text-gray-400">Hôm nay chưa chấm công.</div>';
    st.innerHTML = html;
    document.getElementById('btn-vao').disabled = !d.o_tiem;
    document.getElementById('btn-ra').disabled = !d.o_tiem;
    document.getElementById('cc-tong-cong').textContent = d.tong_cong;
    document.getElementById('cc-tong-tien').textContent = ccFmt(d.tong_tien) + 'đ';
    const ls = document.getElementById('cc-lich-su');
    ls.innerHTML = (d.lich_su || []).map(c => `
      <div class="flex items-center gap-2 text-xs rounded-lg px-2.5 py-1.5 ${c.trang_thai === 'da_chot' ? 'bg-green-50' : 'bg-gray-50'}">
        <span class="font-mono">${c.ngay.slice(8)}/${c.ngay.slice(5, 7)}</span>
        <span>${CA_LABEL[c.ca] || c.ca}</span>
        <span class="text-gray-400">${c.gio_vao || '—'}${c.gio_ra ? '→' + c.gio_ra : ''}</span>
        ${c.muon_phut > 0 ? `<span class="cc-badge" style="background:#fef3c7;color:#92400e">muộn ${c.muon_phut}'</span>` : ''}
        <span class="ml-auto">công <b>${c.cong}</b></span>
        <span class="text-green-700 font-semibold">${ccFmt(c.tien_cong)}đ</span>
        <span class="cc-badge" style="${c.trang_thai === 'da_chot' ? 'background:#dcfce7;color:#166534' : 'background:#f2f2f7;color:#6b7280'}">${c.trang_thai === 'da_chot' ? 'Đã chốt' : 'Nháp'}</span>
      </div>`).join('') || '<div class="text-xs text-gray-300">Chưa có dữ liệu tháng này.</div>';
  } catch (e) {}
}

async function ccVao() {
  const r = await fetch('/api/cham-cong/vao', { method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ thiet_bi: ccThietBi() }) });
  const d = await r.json();
  if (d.success) {
    const c = d.cc || {};
    ccMsg(d.da_cham_roi ? ('ℹ️ ' + d.message) : `✅ Đã vào ${CA_LABEL[c.ca] || c.ca} lúc ${c.gio_vao}` + (c.muon_phut > 0 ? ` — muộn ${c.muon_phut} phút, công còn ${c.cong}` : ' — đúng giờ, đủ 1 công'), true);
  } else ccMsg('❌ ' + (d.message || d.error), false);
  ccLoadToi();
}
async function ccRa() {
  const r = await fetch('/api/cham-cong/ra', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
  const d = await r.json();
  ccMsg(d.success ? `✅ Đã tan ca (${CA_LABEL[d.ca] || d.ca}) lúc ${d.gio_ra}` : '❌ ' + (d.message || d.error), d.success);
  ccLoadToi();
}

{% if is_director %}
// ── KHỐI GĐ ──
function ccTab(t) {
  document.querySelectorAll('.cc-tab').forEach(b => b.classList.toggle('on', b.dataset.t === t));
  ['duyet', 'cauhinh', 'lienket'].forEach(x => document.getElementById('cc-tab-' + x).classList.toggle('hidden', x !== t));
  if (t === 'cauhinh') ccLoadCfg();
  if (t === 'lienket') ccLoadLienKet();
}

async function ccLoadThang() {
  // 27/08/2026: #cc-thang đổi từ input[type=month] sang input[type=date] (flatpickr lịch
  // tiếng Việt, giống trang mua/bán hàng) — chỉ lấy 7 ký tự đầu (YYYY-MM) làm "thang".
  const dVal = document.getElementById('cc-thang').value;
  const th = (dVal ? dVal.slice(0, 7) : '') || new Date().toISOString().slice(0, 7);
  const r = await fetch('/api/cham-cong/thang?thang=' + th, { cache: 'no-store' });
  const d = await r.json();
  document.getElementById('cc-thang-body').innerHTML = (d.rows || []).map(x => {
    const lech = x.lech_cong;
    const mauLech = Math.abs(lech) < 0.01 ? 'color:#6b7280'
                  : (lech > 0 ? 'color:#b45309;font-weight:800' : 'color:#b91c1c;font-weight:800');
    let gc = [];
    if (x.ngay_thieu_bang_cong.length)
      gc.push(`<span style="color:#b91c1c">🚩 NV đã chấm mà bảng công chưa có: ngày ${x.ngay_thieu_bang_cong.join(', ')}</span>`);
    if (x.ngay_cham_tay.length)
      gc.push(`<span style="color:#92400e">✍️ Giám đốc chấm tay ${x.ngay_cham_tay.length} ngày: ${x.ngay_cham_tay.join(', ')}</span>`);
    if (!gc.length && x.cc_so_ngay) gc.push('<span style="color:#047857">✓ Khớp — máy tự ghi đủ</span>');
    if (!x.cc_so_ngay && !x.bc_so_ngay) gc.push('<span style="color:#9ca3af">Chưa có dữ liệu</span>');
    if (!x.cc_so_ngay && x.bc_so_ngay) gc.push('<span style="color:#b45309">⚠️ Chưa hề chấm trên app — toàn bộ do chấm tay</span>');
    return `<tr class="border-t border-gray-50">
      <td class="py-2 px-3 font-semibold dct-title">${x.ho_ten}</td>
      <td class="py-2 pr-2" data-label="NV chấm trên app">${x.cc_so_ngay} ngày · <b>${x.cc_cong}</b> công</td>
      <td class="py-2 pr-2" data-label="Bảng công tính lương">${x.bc_so_ngay} ngày · <b>${x.bc_cong}</b> công</td>
      <td class="py-2 pr-2" data-label="Lệch" style="${mauLech}">${lech > 0 ? '+' : ''}${lech}</td>
      <td class="py-2 pr-2" data-label="Đi muộn">${x.cc_so_muon ? `<span class="cc-badge" style="background:#fef3c7;color:#92400e">${x.cc_so_muon} buổi</span>` : '—'}</td>
      <td class="py-2 pr-3" style="font-size:11.5px" data-label="Ghi chú">${gc.join('<br>')}</td>
    </tr>`;
  }).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-5">Chưa có dữ liệu</td></tr>';
}

async function ccLoadNgay() {
  const ngay = document.getElementById('cc-ngay').value;
  const r = await fetch('/api/cham-cong/ngay?ngay=' + ngay, { cache: 'no-store' });
  const d = await r.json();
  const rows = d.rows || [];
  document.getElementById('cc-ngay-empty').classList.toggle('hidden', rows.length > 0);
  document.getElementById('cc-ngay-body').innerHTML = rows.map(c => `
    <tr class="border-t border-gray-50 ${c.co ? 'bg-red-50' : (c.nguon === 'tu_dong' ? 'bg-amber-50' : '')}">
      <td class="py-2 pr-2 font-semibold dct-title">${c.ho_ten}${c.nguon === 'tu_dong' ? ' <span class="cc-badge" style="background:#fef3c7;color:#92400e">tự động</span>' : ''}
        ${c.co ? `<div class="text-[11px] text-red-600 font-semibold">🚩 ${c.co}</div>` : ''}</td>
      <td class="py-2 pr-2" data-label="Ca">${CA_LABEL[c.ca] || c.ca}</td>
      <td class="py-2 pr-2 font-mono text-xs" data-label="Vào">${c.gio_vao || '—'}</td>
      <td class="py-2 pr-2 font-mono text-xs" data-label="Ra">${c.gio_ra || '—'}</td>
      <td class="py-2 pr-2" data-label="Muộn">${c.muon_phut > 0 ? `<span class="cc-badge" style="background:#fef3c7;color:#92400e">${c.muon_phut}'</span>` : '—'}</td>
      <td class="py-2 pr-2 font-bold" data-label="Công">${c.cong}</td>
      <td class="py-2 pr-2 whitespace-nowrap" data-label="Tiền công">${ccFmt(c.tien_cong)}đ</td>
      <td class="py-2 pr-2 text-xs text-gray-400" data-label="Đối chiếu app">${c.hoat_dong || ''}</td>
      <td class="py-2 whitespace-nowrap dct-act">
        <span class="cc-badge" style="${c.trang_thai === 'da_chot' ? 'background:#dcfce7;color:#166534' : 'background:#f2f2f7;color:#6b7280'}">${c.trang_thai === 'da_chot' ? 'Đã chốt' : 'Nháp'}</span>
        ${c.trang_thai !== 'da_chot' ? `<button onclick='ccMoSua(${JSON.stringify(c)})' class="text-blue-600 text-xs font-semibold ml-1">✏️</button>
        <button onclick="ccXoa(${c.id})" class="text-red-500 text-xs ml-1">🗑️</button>` : ''}
      </td>
    </tr>`).join('');
}

// ── Thêm/Sửa chấm công (GĐ/PGĐ) — dùng CHUNG 1 modal, chọn ĐÚNG ca vì lương ca sáng
// khác ca chiều (25/08/2026: trước đó "Sửa" chỉ đổi được số công qua prompt(), không đổi
// được ca; và KHÔNG có cách nào tạo mới 1 bản ghi cho ngày chưa ai chấm gì — GĐ/PGĐ hết
// đường chấm hộ đúng loại công khi NV quên bấm hoàn toàn).
let _ccCfgCache = null, _ccEmpCache = null, _ccThemMode = 'them';
async function _ccLayCfg() {
  if (_ccCfgCache) return _ccCfgCache;
  const d = await (await fetch('/api/cham-cong/config')).json();
  _ccCfgCache = d.cfg;
  return _ccCfgCache;
}
async function ccMoThem() {
  _ccThemMode = 'them';
  document.getElementById('cc-them-title').textContent = '➕ Thêm chấm công';
  document.getElementById('cc-them-id').value = '';
  document.getElementById('cc-them-nv-box').classList.remove('hidden');
  document.getElementById('cc-them-nv-ten').classList.add('hidden');
  document.getElementById('cc-them-ngay').value = document.getElementById('cc-ngay').value || new Date().toISOString().slice(0, 10);
  document.getElementById('cc-them-ca').value = 'ca1';
  document.getElementById('cc-them-cong').value = '1';
  document.getElementById('cc-them-ghichu').value = '';
  document.getElementById('cc-them-msg').textContent = '';
  const sel = document.getElementById('cc-them-nv');
  if (!_ccEmpCache) {
    const d = await (await fetch('/api/hr/employees?trang_thai=dang_lam')).json();
    _ccEmpCache = d.employees || [];
    sel.innerHTML = '<option value="">— Chọn nhân viên —</option>' +
      _ccEmpCache.map(e => `<option value="${e.id}" data-chedo="${e.che_do || 'chinh_thuc'}">${e.ho_ten}${e.chuc_vu ? ' — ' + e.chuc_vu : ''}</option>`).join('');
  }
  await _ccLayCfg();
  ccTinhTienPreview();
  document.getElementById('cc-them-modal').classList.remove('hidden');
}
function ccMoSua(c) {
  _ccThemMode = 'sua';
  document.getElementById('cc-them-title').textContent = '✏️ Sửa chấm công';
  document.getElementById('cc-them-id').value = c.id;
  document.getElementById('cc-them-nv-box').classList.add('hidden');
  const tenEl = document.getElementById('cc-them-nv-ten');
  tenEl.textContent = c.ho_ten; tenEl.classList.remove('hidden');
  document.getElementById('cc-them-ngay').value = document.getElementById('cc-ngay').value;
  document.getElementById('cc-them-ca').value = c.ca;
  document.getElementById('cc-them-cong').value = c.cong;
  document.getElementById('cc-them-ghichu').value = c.ghi_chu || '';
  document.getElementById('cc-them-msg').textContent = '';
  _ccLayCfg().then(ccTinhTienPreview);
  document.getElementById('cc-them-modal').classList.remove('hidden');
}
function ccDongThem() {
  document.getElementById('cc-them-modal').classList.add('hidden');
}
function ccTinhTienPreview() {
  const box = document.getElementById('cc-them-tien-preview');
  if (!_ccCfgCache) { box.textContent = ''; return; }
  const ca = document.getElementById('cc-them-ca').value;
  const cong = parseFloat(document.getElementById('cc-them-cong').value) || 0;
  const luongCa = ca === 'ca1' ? _ccCfgCache.luong_ca1 : _ccCfgCache.luong_ca2;
  const sel = document.getElementById('cc-them-nv');
  const opt = sel.options[sel.selectedIndex];
  const isThuViec = opt && opt.dataset && opt.dataset.chedo === 'thu_viec';
  const heSo = isThuViec ? (parseFloat(_ccCfgCache.thu_viec_pct) || 80) / 100 : 1;
  const tien = Math.round(cong * luongCa / 30 * heSo);
  box.textContent = `💰 Tiền công dự kiến: ${tien.toLocaleString('vi-VN')}đ (${CA_LABEL[ca]}${isThuViec ? ' · thử việc' : ''})`;
}
document.addEventListener('change', e => { if (e.target && e.target.id === 'cc-them-nv') ccTinhTienPreview(); });
async function ccLuuThem() {
  const msg = document.getElementById('cc-them-msg');
  const ngay = document.getElementById('cc-them-ngay').value;
  const ca = document.getElementById('cc-them-ca').value;
  const cong = parseFloat(document.getElementById('cc-them-cong').value);
  const ghiChu = document.getElementById('cc-them-ghichu').value.trim();
  if (!ngay) { msg.textContent = 'Chưa chọn ngày.'; return; }
  if (isNaN(cong) || cong < 0) { msg.textContent = 'Công không hợp lệ.'; return; }
  if (_ccThemMode === 'them') {
    const empId = document.getElementById('cc-them-nv').value;
    if (!empId) { msg.textContent = 'Chưa chọn nhân viên.'; return; }
    askPin('Nhập PIN để thêm chấm công', async pin => {
      const r = await fetch('/api/cham-cong/them', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin, employee_id: empId, ngay, ca, cong, ghi_chu: ghiChu }) });
      const d = await r.json();
      if (!d.success) { msg.textContent = d.message || d.error || 'Lỗi'; return; }
      ccDongThem(); ccLoadNgay();
    });
  } else {
    const id = document.getElementById('cc-them-id').value;
    askPin('Nhập PIN để sửa chấm công', async pin => {
      const r = await fetch('/api/cham-cong/sua', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin, id, ca, cong, ghi_chu: ghiChu, tinh_lai_tien: true }) });
      const d = await r.json();
      if (!d.success) { msg.textContent = d.error || 'Lỗi'; return; }
      ccDongThem(); ccLoadNgay();
    });
  }
}
function ccXoa(id) {
  if (!confirm('Xóa bản ghi chấm công này?')) return;
  askPin('Nhập PIN để xóa', async pin => {
    await fetch('/api/cham-cong/sua', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin, id, xoa: true }) });
    ccLoadNgay();
  });
}
function ccChotNgay() {
  const ngay = document.getElementById('cc-ngay').value;
  if (!confirm(`Chốt chấm công ngày ${ngay} vào BẢNG CÔNG tính lương?\n(Cộng công các ca của từng nhân viên — sau khi chốt không sửa ở đây nữa)`)) return;
  askPin('Nhập PIN để chốt ngày', async pin => {
    const r = await fetch('/api/cham-cong/chot-ngay', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin, ngay }) });
    const d = await r.json();
    alert(d.success ? `✅ Đã chốt ${d.so_nv} nhân viên, tổng ${d.tong_cong} công vào bảng công.` : '❌ ' + (d.error || 'Lỗi'));
    ccLoadNgay();
  });
}

async function ccLoadCfg() {
  const d = await (await fetch('/api/cham-cong/config')).json();
  const c = d.cfg;
  document.getElementById('cf-ca1-bd').value = c.ca1_bat_dau; document.getElementById('cf-ca1-kt').value = c.ca1_ket_thuc;
  document.getElementById('cf-ca2-bd').value = c.ca2_bat_dau; document.getElementById('cf-ca2-kt').value = c.ca2_ket_thuc;
  document.getElementById('cf-ca2-tu').value = c.ca2_tu;
  document.getElementById('cf-muon').value = c.muon_phut; document.getElementById('cf-tru').value = c.tru_pct;
  document.getElementById('cf-luong1').value = ccFmt(c.luong_ca1); document.getElementById('cf-luong2').value = ccFmt(c.luong_ca2);
  document.getElementById('cf-ip-them').value = c.ip_tiem_them || '';
  document.getElementById('cf-tv-pct').value = c.thu_viec_pct != null ? c.thu_viec_pct : 80;
  document.getElementById('cf-som').value = c.som_phut != null ? c.som_phut : 30;
  ccLoadBiChan();
}

async function ccLoadBiChan() {
  const box = document.getElementById('cc-bichan-body');
  try {
    const d = await (await fetch('/api/cham-cong/bi-chan', { cache: 'no-store' })).json();
    const rows = d.rows || [];
    if (!rows.length) { box.innerHTML = '<span class="text-gray-300 text-xs">Chưa có lần chặn nào từ lúc server chạy. Nhờ nhân viên bấm "Vào ca" lại 1 lần rồi bấm tab này lại.</span>'; return; }
    box.innerHTML = rows.map(r => `
      <div class="flex items-center gap-2 flex-wrap rounded-lg bg-red-50 border border-red-100 px-2.5 py-1.5">
        <span class="text-xs text-gray-400">${r.luc}</span>
        <b class="text-xs">${r.nguoi}</b>
        <span class="font-mono text-xs">${r.ip}</span>
        <button onclick="ccThemIp('${r.ip}')" class="btn-ios text-white text-xs px-2.5 py-1 rounded-lg font-bold ml-auto" style="background:linear-gradient(135deg,#065f46,#059669)">➕ Cho phép IP này</button>
      </div>`).join('')
      + `<div class="text-[11px] text-gray-400 mt-1">IP internet của tiệm (đường máy chủ): <b>${d.ip_tiem || '?'}</b> — IP trùng số này đã tự được cho phép.</div>`;
  } catch (e) { box.innerHTML = '<span class="text-red-500 text-xs">Lỗi tải danh sách.</span>'; }
}

function ccThemIp(ip) {
  const el = document.getElementById('cf-ip-them');
  const cur = (el.value || '').split(',').map(x => x.trim()).filter(Boolean);
  if (!cur.includes(ip)) cur.push(ip);
  el.value = cur.join(', ');
  ccSaveCfg();   // lưu luôn (hỏi PIN)
}
function ccSaveCfg() {
  const num = id => parseFloat((document.getElementById(id).value || '').replace(/\./g, '')) || 0;
  askPin('Nhập PIN để lưu cấu hình chấm công', async pin => {
    const r = await fetch('/api/cham-cong/config', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin,
        ca1_bat_dau: document.getElementById('cf-ca1-bd').value.trim(), ca1_ket_thuc: document.getElementById('cf-ca1-kt').value.trim(),
        ca2_bat_dau: document.getElementById('cf-ca2-bd').value.trim(), ca2_ket_thuc: document.getElementById('cf-ca2-kt').value.trim(),
        ca2_tu: document.getElementById('cf-ca2-tu').value.trim(),
        muon_phut: num('cf-muon'), tru_pct: num('cf-tru'), thu_viec_pct: num('cf-tv-pct'),
        som_phut: num('cf-som'),
        luong_ca1: num('cf-luong1'), luong_ca2: num('cf-luong2'),
        ip_tiem_them: document.getElementById('cf-ip-them').value.trim() }) });
    const d = await r.json();
    const m = document.getElementById('cf-msg');
    m.textContent = d.success ? '✓ Đã lưu' : '❌ ' + (d.error || 'Lỗi');
    m.style.color = d.success ? '#065f46' : '#b91c1c';
  });
}

async function ccLoadLienKet() {
  const d = await (await fetch('/api/cham-cong/lien-ket')).json();
  const users = d.users || [];
  document.getElementById('cc-lienket-body').innerHTML = (d.employees || []).map(e => `
    <div class="flex items-center gap-2 flex-wrap rounded-xl border border-gray-100 px-3 py-2">
      <div class="flex-1" style="min-width:140px"><b>${e.ho_ten}</b> <span class="text-xs text-gray-400">${e.chuc_vu || ''}</span></div>
      <select id="lk-${e.id}" class="input-ios text-sm" style="max-width:220px">
        <option value="">— chưa liên kết —</option>
        ${users.map(u => `<option value="${u.id}" ${e.nv_user_id === u.id ? 'selected' : ''}>${u.display_name || u.username} (@${u.username})</option>`).join('')}
      </select>
      <button onclick="ccLuuLienKet(${e.id})" class="btn-ios btn-ios-secondary px-3 py-1.5 text-xs">Lưu</button>
    </div>`).join('');
}
function ccLuuLienKet(empId) {
  const uid = document.getElementById('lk-' + empId).value;
  askPin('Nhập PIN để lưu liên kết', async pin => {
    const r = await fetch('/api/cham-cong/lien-ket', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin, employee_id: empId, nv_user_id: uid || null }) });
    const d = await r.json();
    if (!d.success) alert('❌ ' + (d.error || 'Lỗi'));
    ccLoadLienKet();
  });
}
{% endif %}

// ── Khởi động ──
ccLoadToi();
setInterval(ccLoadToi, 30000);
{% if is_director %}
(function () {
  // Ô ngày là flatpickr (base.html nâng cấp) → đặt giá trị qua fpSet, KHÔNG gán .value.
  // #cc-thang giờ CŨNG là type=date (flatpickr) — 27/08/2026, đổi từ input[type=month] cũ.
  const iso = new Date().toISOString().slice(0, 10);
  setTimeout(() => { if (typeof fpSet === 'function') fpSet('cc-thang', iso); }, 300);
  setTimeout(() => { if (typeof fpSet === 'function') fpSet('cc-ngay', iso); }, 300);
  setTimeout(ccLoadNgay, 600);
  ccLoadThang();
})();
{% endif %}
</script>
{% endblock %}