{% extends "base.html" %}
{% block title %}Bảng lương của tôi — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Bảng lương của tôi{% endblock %}

{% block extra_style %}
<style>
  .pay-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
             padding:12px 16px; border-bottom:1px solid #f4f4f6; }
  .pay-row:last-child { border-bottom:none; }
  .pay-ic { width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
            justify-content:center; font-size:17px; flex-shrink:0; }
  .pay-label { font-size:.92rem; color:#1c1c1e; font-weight:600; }
  .pay-hint  { font-size:.72rem; color:#9ca3af; margin-top:2px; line-height:1.45; }
  .pay-val   { font-size:.98rem; font-weight:800; white-space:nowrap; }
  .pay-plus  { color:#15803d; }
  .pay-minus { color:#dc2626; }
  .sec-head  { padding:12px 16px; font-weight:800; font-size:.8rem; text-transform:uppercase;
               letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
  .chip { font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; }
  /* Thanh cơ cấu thu nhập (stacked bar) */
  .comp-bar { display:flex; height:16px; border-radius:99px; overflow:hidden; background:#f1f5f9; }
  .comp-seg { height:100%; transition:width .5s ease; }
  .comp-leg { display:flex; align-items:center; gap:6px; font-size:.76rem; color:#374151; }
  .comp-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
  /* Vòng tròn chuyên cần (conic) */
  .ring { width:78px; height:78px; border-radius:50%; display:flex; align-items:center;
          justify-content:center; flex-shrink:0; }
  .ring-in { width:60px; height:60px; border-radius:50%; background:#fff; display:flex;
             flex-direction:column; align-items:center; justify-content:center; }
  /* Mini bar KPI */
  .kbar-track { height:9px; border-radius:99px; background:#eef2f7; overflow:hidden; margin-top:5px; }
  .kbar-fill  { height:100%; border-radius:99px; transition:width .5s ease; }
</style>
{% endblock %}

{% block content %}

  <!-- Thẻ đầu: nhân viên + chọn tháng -->
  <div class="ios-card p-5">
    <div class="flex flex-wrap items-center gap-3">
      <div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-black text-lg flex-shrink-0"
           style="background:linear-gradient(135deg,#4a0000,#8b0000)" id="lg-avatar">?</div>
      <div class="flex-1 min-w-[150px]">
        <div class="font-extrabold text-gray-800 text-lg" id="lg-ten">—</div>
        <div class="text-xs text-gray-400" id="lg-chucvu"></div>
      </div>
      <div>
        <label class="block text-[11px] font-semibold text-gray-500 uppercase mb-1">Tháng lương</label>
        <div class="flex gap-1.5">
          <select id="lg-thang-m" class="input-ios text-sm font-semibold cursor-pointer" onchange="_lgSyncThang(); loadMyPayroll()">
            <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="lg-thang-y" class="input-ios text-sm font-semibold cursor-pointer" onchange="_lgSyncThang(); loadMyPayroll()"></select>
          <input id="lg-thang" type="hidden">
        </div>
      </div>
      <button onclick="loadMyPayroll()" class="btn-ios btn-ios-secondary text-sm font-semibold text-amber-700 px-3 py-2 self-end">🔄 Làm mới</button>
    </div>
    <div class="mt-3 flex items-center gap-2 flex-wrap">
      <span id="lg-status" class="chip"></span>
      <span class="text-[11px] text-gray-400" id="lg-updated"></span>
    </div>
  </div>

  <!-- Nội dung chính -->
  <div id="lg-body"></div>

  <!-- Chưa liên kết -->
  <div id="lg-nolink" class="ios-card p-6 text-center hidden">
    <div class="text-4xl mb-2">🔎</div>
    <div class="font-bold text-gray-700 mb-1">Chưa tìm thấy hồ sơ nhân viên của bạn</div>
    <div class="text-sm text-gray-400" id="lg-nolink-msg"></div>
  </div>

{% endblock %}

{% block scripts %}
<script>
const fmtD = n => Number(Math.round(n||0)).toLocaleString('vi-VN') + ' đ';
const fmt  = n => Number(n||0).toLocaleString('vi-VN');
let _timer = null;

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

async function loadMyPayroll() {
  const thang = document.getElementById('lg-thang').value || _defaultThang();
  let d;
  try {
    const res = await fetch('/api/hr/my-payroll?thang=' + thang);
    d = await res.json();
  } catch (e) { return; }
  if (!d.success) return;

  const body = document.getElementById('lg-body');
  const nolink = document.getElementById('lg-nolink');

  if (!d.linked) {
    body.innerHTML = '';
    nolink.classList.remove('hidden');
    document.getElementById('lg-nolink-msg').innerHTML =
      `Tài khoản <b>${d.display_name || ''}</b> chưa được gắn với hồ sơ nhân viên trong mục Nhân sự.<br>`
      + `Vui lòng báo quản lý tạo hồ sơ nhân viên đúng tên để xem được bảng lương.`;
    document.getElementById('lg-ten').textContent = d.display_name || '—';
    document.getElementById('lg-avatar').textContent = vnInitial(d.display_name);
    document.getElementById('lg-status').className = 'chip';
    document.getElementById('lg-status').textContent = '';
    return;
  }
  nolink.classList.add('hidden');

  const e = d.employee, p = d.payroll || {}, kd = d.kpi_detail || {}, cfg = d.config || {};
  const tv = e.che_do === 'thu_viec';

  document.getElementById('lg-ten').textContent = e.ho_ten;
  document.getElementById('lg-avatar').textContent = vnInitial(e.ho_ten);
  document.getElementById('lg-chucvu').textContent =
    (e.chuc_vu || '') + (tv ? '  ·  Thử việc' : '');

  const daChot = p && p.chua_tinh !== true;
  const st = document.getElementById('lg-status');
  if (daChot) { st.className = 'chip'; st.style.cssText='background:#dcfce7;color:#166534'; st.textContent = '✓ Lương đã chốt'; }
  else { st.className = 'chip'; st.style.cssText='background:#fef3c7;color:#92400e'; st.textContent = '⏳ Tạm tính (real-time — chưa chốt)'; }
  document.getElementById('lg-updated').textContent = 'Cập nhật lúc ' + new Date().toLocaleTimeString('vi-VN');

  // Số liệu
  const lcb = p.luong_co_ban || 0;
  const heso = tv ? 0.8 : 1.0;
  const soCong = p.so_cong || 0;
  const chuan = p.so_cong_chuan || 26;
  const ltc = p.luong_theo_cong || 0;
  const bhxh = tv ? 0 : (p.tru_bhxh || 0);
  const lbhxh = p.luong_bhxh || 0;
  // 27/08/2026: hệ KPI CŨ (Doanh số/Chuyên cần/Thái độ chấm tay) đã BỎ khỏi lương thật —
  // khoản thưởng KPI thật giờ CHỈ còn payroll.thuong_kpi (chốt ở trang /kpi, mô hình mức
  // ảnh hưởng). kpi_doanh_so/kpi_chuyen_can/kpi_thai_do/tong_kpi giữ nguyên cho THÁNG CŨ
  // đã lưu trước đó (lịch sử) nhưng KHÔNG còn được tính/hiện làm số chính nữa.
  const tongKpi = tv ? 0 : (p.thuong_kpi || 0);
  const thuongKhac = p.thuong_khac || 0;
  const khoanTru = p.khoan_tru || 0;
  const thucLinh = p.thuc_linh || 0;

  // ── Số liệu tổng hợp cho phần trực quan ──
  const tongCong = ltc + tongKpi + thuongKhac;   // các khoản CỘNG
  const tongTru  = bhxh + khoanTru;                       // các khoản TRỪ
  const pctCong  = chuan > 0 ? Math.min(100, Math.round(soCong / chuan * 100)) : 0;

  // Thanh cơ cấu thu nhập — mỗi khoản cộng một đoạn màu
  const segs = [
    {ten:'Lương theo công', val: ltc,        mau:'#b45309'},
    {ten:'Thưởng KPI',       val: tongKpi,    mau:'#16a34a'},
    {ten:'Thưởng khác',      val: thuongKhac, mau:'#7c3aed'},
  ].filter(s => s.val > 0);
  const segTong = segs.reduce((a,s)=>a+s.val,0) || 1;
  const compBar = segs.map(s =>
    `<div class="comp-seg" style="width:${(s.val/segTong*100).toFixed(1)}%;background:${s.mau}" title="${s.ten}: ${fmtD(s.val)}"></div>`).join('');
  const compLegend = segs.map(s =>
    `<div class="comp-leg"><span class="comp-dot" style="background:${s.mau}"></span>${s.ten}
       <b style="margin-left:auto;color:#111">${fmtD(s.val)}</b></div>`).join('');

  // Vòng tròn chuyên cần (công đi làm / công chuẩn)
  const ringColor = pctCong >= 100 ? '#16a34a' : pctCong >= 80 ? '#d97706' : '#dc2626';
  const ringHtml = `
    <div class="ring" style="background:conic-gradient(${ringColor} ${pctCong*3.6}deg,#e5e7eb 0)">
      <div class="ring-in">
        <div style="font-size:1.15rem;font-weight:900;color:${ringColor};line-height:1">${pctCong}%</div>
        <div style="font-size:.6rem;color:#9ca3af">công</div>
      </div>
    </div>`;

  // 27/08/2026: BỎ khối "3 thanh KPI Doanh số/Chuyên cần/Thái độ" (kpiMax/kbar/dsRows/
  // ccList/tdList) — hệ đó đã retired, `kd`/`cfg.chuyen_can`/`cfg.thai_do` không còn phản
  // ánh tiền thật nữa. Chi tiết KPI thật (mô hình mức ảnh hưởng) xem ở /kpi-cua-toi.

  body.innerHTML = `
    <!-- Thực lĩnh nổi bật -->
    <div class="ios-card p-5 mt-4 text-center" style="background:linear-gradient(135deg,#4a0000,#8b0000);color:#fff;position:relative;overflow:hidden">
      <div class="text-xs font-semibold uppercase tracking-widest" style="color:#fcd9a8">Thực lĩnh tháng ${d.thang}</div>
      <div class="font-black mt-1" style="font-size:clamp(1.5rem,7vw,2.7rem);line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.25)">${fmtD(thucLinh)}</div>
      <div class="inline-flex items-center gap-4 mt-3 text-xs" style="color:#fde9c8">
        <span>▲ Tổng cộng <b class="text-white">${fmtD(tongCong)}</b></span>
        <span style="opacity:.5">|</span>
        <span>▼ Tổng trừ <b class="text-white">${fmtD(tongTru)}</b></span>
      </div>
    </div>

    <!-- Chuyên cần + Cơ cấu thu nhập -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
      <!-- Chuyên cần -->
      <div class="ios-card p-4 flex items-center gap-4">
        ${ringHtml}
        <div class="min-w-0">
          <div class="text-xs font-bold text-gray-400 uppercase">Ngày công tháng này</div>
          <div class="text-2xl font-black text-gray-800 leading-tight mt-0.5">${fmt(soCong)}<span class="text-base text-gray-400 font-bold"> / ${fmt(chuan)} công</span></div>
          <div class="text-xs mt-1" style="color:${ringColor};font-weight:700">
            ${pctCong>=100?'✓ Đủ công chuẩn':pctCong>=80?'Gần đủ công':'Còn thiếu công'}</div>
        </div>
      </div>
      <!-- Cơ cấu thu nhập -->
      <div class="ios-card p-4">
        <div class="text-xs font-bold text-gray-400 uppercase mb-2">Cơ cấu thu nhập</div>
        ${segs.length ? `<div class="comp-bar mb-3">${compBar}</div>
        <div class="space-y-1.5">${compLegend}</div>`
        : '<div class="text-sm text-gray-300 py-4 text-center">Chưa có khoản thu nhập nào trong tháng.</div>'}
      </div>
    </div>

    <!-- Bảng chi tiết các khoản -->
    <div class="ios-card overflow-hidden mt-4">
      <div class="sec-head text-gray-700" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">💰 Chi tiết các khoản</div>

      <div class="pay-row">
        <div class="flex items-center gap-3">
          <div class="pay-ic" style="background:#fef3c7;color:#b45309">🗓️</div>
          <div><div class="pay-label">Lương theo công</div>
            <div class="pay-hint">Cơ bản ${fmtD(lcb)}${tv?' × 0.8 (thử việc)':''} ÷ ${fmt(chuan)} công × ${fmt(soCong)} công đi làm</div></div>
        </div>
        <div class="pay-val pay-plus">+ ${fmtD(ltc)}</div>
      </div>

      <div class="pay-row">
        <div class="flex items-center gap-3">
          <div class="pay-ic" style="background:#dcfce7;color:#16a34a">📊</div>
          <div><div class="pay-label">Thưởng KPI ${tv?'<span class="text-xs text-gray-400">(không áp dụng khi thử việc)</span>':''}</div>
            <div class="pay-hint">Theo mô hình mức ảnh hưởng — xem chi tiết ở <a href="/kpi-cua-toi" class="underline text-blue-600">KPI của tôi</a></div></div>
        </div>
        <div class="pay-val pay-plus">+ ${fmtD(tongKpi)}</div>
      </div>

      <div class="pay-row">
        <div class="flex items-center gap-3">
          <div class="pay-ic" style="background:#ede9fe;color:#7c3aed">🎁</div>
          <div><div class="pay-label">Thưởng khác</div>
            <div class="pay-hint">Do quản lý nhập khi chốt lương (nếu có)</div></div>
        </div>
        <div class="pay-val pay-plus">+ ${fmtD(thuongKhac)}</div>
      </div>

      <div class="pay-row">
        <div class="flex items-center gap-3">
          <div class="pay-ic" style="background:#fee2e2;color:#dc2626">🛡️</div>
          <div><div class="pay-label">Trừ BHXH (10.5%)</div>
            <div class="pay-hint">${tv?'Thử việc chưa trừ BHXH':('Lương đóng BHXH '+fmtD(lbhxh)+' × 10.5%')}</div></div>
        </div>
        <div class="pay-val pay-minus">− ${fmtD(bhxh)}</div>
      </div>

      <div class="pay-row">
        <div class="flex items-center gap-3">
          <div class="pay-ic" style="background:#fee2e2;color:#dc2626">➖</div>
          <div><div class="pay-label">Khoản trừ khác</div>
            <div class="pay-hint">Phạt/tạm ứng… do quản lý nhập khi chốt (nếu có)</div></div>
        </div>
        <div class="pay-val pay-minus">− ${fmtD(khoanTru)}</div>
      </div>

      <div class="pay-row" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <div class="pay-label" style="font-weight:900;font-size:1rem">= THỰC LĨNH</div>
        <div class="pay-val text-amber-700" style="font-size:1.2rem">${fmtD(thucLinh)}</div>
      </div>
    </div>

    ${tv ? '' : `
    <!-- Thưởng KPI (mô hình mức ảnh hưởng, xem đầy đủ ở /kpi-cua-toi) -->
    <a href="/kpi-cua-toi" class="ios-card overflow-hidden mt-4 block hover:brightness-95 transition">
      <div class="sec-head text-green-800 flex items-center justify-between" style="background:linear-gradient(90deg,#f0fdf4,#dcfce7)">
        <span>📊 Thưởng KPI tháng này — ${fmtD(tongKpi)}</span>
        <span class="text-xs font-semibold text-green-700">Xem chi tiết →</span>
      </div>
      <div class="px-3 py-3 text-xs text-gray-500">
        Điểm tháng, từng mặt chấm điểm và mức ảnh hưởng từng món hàng — xem đầy đủ ở trang
        <b class="text-gray-700">KPI của tôi</b>.
      </div>
    </a>`}

    <div class="text-[11px] text-gray-400 mt-3 px-1 leading-relaxed">
      ℹ️ Đây là bảng lương chỉ để <b>xem</b> — bạn không chỉnh sửa được. Khi chưa chốt, số liệu
      cập nhật <b>real-time</b> theo công chấm và doanh số bán thực tế; sau khi quản lý chốt lương,
      số sẽ được cố định. Mọi thắc mắc vui lòng trao đổi với quản lý.
    </div>
  `;
}

// ── Chọn tháng lương: 2 ô Tháng + Năm (giống trang quản lý lương của GĐ/PGĐ) ──
function _lgSyncThang() {
  const m = document.getElementById('lg-thang-m').value;
  const y = document.getElementById('lg-thang-y').value;
  if (m && y) document.getElementById('lg-thang').value = `${y}-${m}`;
}
(function () {
  const now = new Date();
  const selY = document.getElementById('lg-thang-y');
  for (let y = now.getFullYear() - 3; y <= now.getFullYear() + 1; y++) {
    const opt = document.createElement('option');
    opt.value = String(y); opt.textContent = 'Năm ' + y;
    selY.appendChild(opt);
  }
  document.getElementById('lg-thang-m').value = String(now.getMonth() + 1).padStart(2, '0');
  selY.value = String(now.getFullYear());
  _lgSyncThang();
})();
loadMyPayroll();
// làm mới định kỳ + khi quay lại tab
_timer = setInterval(loadMyPayroll, 45000);
document.addEventListener('visibilitychange', () => { if (!document.hidden) loadMyPayroll(); });
</script>
{% endblock %}