{% extends "base.html" %}
{% block title %}KPI của tôi{% endblock %}
{% block page_subtitle %}KPI của tôi{% endblock %}

{% block extra_style %}
  .kt-vong{position:relative;width:150px;height:150px;margin:0 auto}
  .kt-vong svg{transform:rotate(-90deg)}
  .kt-vong .giua{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center}
  .kt-so{font-size:34px;font-weight:800;line-height:1;color:#4a0000}
  .kt-nhan{font-size:11px;color:#6b7280;margin-top:2px}
  .kt-the{background:#fff;border-radius:16px;padding:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:12px}
  .kt-o{display:flex;justify-content:space-between;align-items:center;
    padding:9px 0;border-bottom:1px dashed #e5e7eb}
  .kt-o:last-child{border-bottom:none}
  .kt-thanh{height:9px;border-radius:5px;background:#f1f5f9;overflow:hidden;margin-top:5px}
  .kt-thanh i{display:block;height:100%;border-radius:5px;
    background:linear-gradient(90deg,#8b0000,#d97706);transition:width .5s}
  .kt-mon{border-left:4px solid #e5e7eb;padding:9px 0 9px 11px;margin-bottom:9px}
  .kt-mon b{font-size:13.5px}
  .kt-ly{font-size:11.5px;color:#64748b;line-height:1.55;margin-top:3px}
  .kt-sao{font-size:13px;font-weight:700;white-space:nowrap}
  .kt-tien{font-size:26px;font-weight:800;color:#059669;line-height:1.15}
  .kt-goi{background:#fffbeb;border:1.5px solid #fde68a;border-radius:12px;
    padding:11px 13px;font-size:12.5px;color:#78350f;line-height:1.6}
  .kt-tab{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
  .kt-tab button{flex-shrink:0;padding:7px 14px;border-radius:999px;font-size:12.5px;
    font-weight:600;border:1.5px solid #e5e7eb;background:#fff;color:#475569}
  .kt-tab button.on{background:#4a0000;color:#fff;border-color:#4a0000}
  @media (max-width:640px){ .kt-so{font-size:30px} .kt-tien{font-size:23px} }
  .kt-bang{width:100%;border-collapse:collapse;font-size:12px}
  .kt-bang th,.kt-bang td{border:1px solid #e5e7eb;padding:6px 8px;white-space:nowrap}
  .kt-bang thead th{background:#4a0000;color:#fff;font-weight:700;font-size:11.5px}
  .kt-bang td:first-child,.kt-bang th:first-child{text-align:left;white-space:normal}
  .kt-bang td:not(:first-child),.kt-bang th:not(:first-child){text-align:center}
  .kt-bang tr.kt-tong td{background:#fef3c7;font-weight:800}
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-3 py-3">

  <div class="kt-tab" id="kt-thang"></div>

  <div id="kt-loi" class="hidden kt-the" style="border:1.5px solid #fecaca;background:#fef2f2">
    <div class="text-red-700 text-sm font-semibold" id="kt-loi-noi"></div>
  </div>

  <div id="kt-than" class="hidden">
    <!-- điểm tháng -->
    <div class="kt-the text-center">
      <div class="kt-vong">
        <svg width="150" height="150">
          <circle cx="75" cy="75" r="63" fill="none" stroke="#f1f5f9" stroke-width="14"/>
          <circle id="kt-cung" cx="75" cy="75" r="63" fill="none" stroke="#8b0000"
                  stroke-width="14" stroke-linecap="round"
                  stroke-dasharray="396" stroke-dashoffset="396"
                  style="transition:stroke-dashoffset .7s"/>
        </svg>
        <div class="giua">
          <div class="kt-so" id="kt-diem">—</div>
          <div class="kt-nhan">điểm tháng</div>
        </div>
      </div>
      <div class="mt-2 text-sm font-bold" id="kt-muc"></div>
      <div class="text-xs text-gray-500 mt-1" id="kt-ketiep"></div>
    </div>

    <!-- điểm tháng DỰ KIẾN — biết SỚM trong tháng, không đợi cuối tháng -->
    <div class="kt-the hidden" id="kt-dukien-box">
      <div class="flex items-center justify-between gap-2">
        <div class="text-sm font-bold" style="color:#4a0000">📅 Tiến độ dự kiến</div>
        <div class="text-xs text-gray-400" id="kt-dk-ngay"></div>
      </div>
      <div class="mt-1.5 text-xs text-gray-500">
        Nếu bạn giữ đúng tốc độ hiện tại tới hết tháng, điểm tháng của bạn sẽ khoảng:
      </div>
      <div class="flex items-center gap-3 mt-2">
        <div class="text-3xl font-black" id="kt-dk-diem" style="color:#4a0000">—</div>
        <div>
          <div class="text-sm font-bold" id="kt-dk-muc"></div>
          <div class="text-xs text-gray-500 mt-0.5" id="kt-dk-ketiep"></div>
        </div>
      </div>
      <div class="kt-thanh mt-2"><i id="kt-dk-thanh" style="width:0%"></i></div>
      <div class="text-xs text-gray-400 mt-2">
        Số DỰ KIẾN dùng chỉ tiêu đã <b>chia theo số ngày đã qua</b> trong tháng (không so với chỉ
        tiêu cả tháng như số chính thức ở trên) — để biết SỚM có đang trên đà đạt mốc 70 điểm hay
        không, kịp điều chỉnh trước khi hết tháng. Số hoa hồng thực nhận vẫn chốt theo số CHÍNH
        THỨC ở khung trên vào cuối tháng.
      </div>
      <div class="mt-3" id="kt-dk-chiso"></div>
    </div>

    <!-- tạm tính -->
    <div class="kt-the text-center">
      <div class="text-gray-500" style="font-size:11.5px">Hoa hồng tạm tính tháng này</div>
      <div class="kt-tien" id="kt-tien">—</div>
      <div class="text-gray-400 mt-1" style="font-size:10.5px">
        Số tạm tính, cập nhật ngay sau mỗi hóa đơn. Số chính thức chốt cuối tháng.
      </div>
      <div id="kt-thuviec" class="hidden mt-2 text-xs text-amber-700 font-semibold">
        Bạn đang thử việc — kết quả vẫn được ghi nhận đầy đủ để xét lên chính thức,
        hoa hồng bắt đầu nhận khi thành nhân viên chính thức.
      </div>
    </div>

    <!-- số của tôi -->
    <div class="kt-the">
      <div class="font-bold text-sm mb-1">📊 Tháng này bạn đã làm được</div>
      <div class="kt-o"><span class="text-gray-600 text-sm">Số hóa đơn</span>
        <b id="kt-sohd">—</b></div>
      <div class="kt-o"><span class="text-gray-600 text-sm">Doanh thu bạn bán</span>
        <b id="kt-dt">—</b></div>
      <div class="kt-o"><span class="text-gray-600 text-sm">Khách lần đầu bạn đón</span>
        <b id="kt-khachmoi">—</b></div>
      <div class="kt-o"><span class="text-gray-600 text-sm">Số món đã bán</span>
        <b id="kt-somon">—</b></div>
    </div>

    <!-- chỉ tiêu -->
    <div class="kt-the">
      <div class="font-bold text-sm mb-2">🎯 So với chỉ tiêu</div>
      <div id="kt-chiso"></div>
    </div>

    <!-- gợi ý -->
    <div id="kt-goibox" class="hidden mb-3">
      <div class="kt-goi" id="kt-goi"></div>
    </div>

    <!-- từng món -->
    <div class="kt-the">
      <div class="font-bold text-sm mb-1">🛍️ Từng món bạn đã bán</div>
      <div class="text-gray-500 mb-3" style="font-size:11.5px">
        Mỗi món được ghi nhận phần công của bạn khác nhau. Nhìn cột bên phải để biết
        cách bán nào được đánh giá cao.
      </div>
      <div id="kt-mon"></div>
    </div>

    <div class="text-center pb-4">
      <a href="/huong-dan#kpi" class="text-sm font-semibold" style="color:#8b0000">
        📖 Đọc chính sách KPI đầy đủ</a>
    </div>
  </div>

  <div id="kt-dangtai" class="text-center text-gray-400 py-10">Đang tải…</div>
</div>
{% endblock %}

{% block scripts %}
<script>
const _f = n => (n||0).toLocaleString('vi-VN') + 'đ';
const _fn = n => (n||0).toLocaleString('vi-VN');
let _thangDang = '';

function thangNay(){
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0');
}
function luiThang(t, n){
  let [y,m] = t.split('-').map(Number);
  m -= n; while (m <= 0){ m += 12; y -= 1; }
  return y + '-' + String(m).padStart(2,'0');
}
function nhanThang(t){
  const [y,m] = t.split('-');
  return 'Tháng ' + Number(m) + '/' + y.slice(2);
}

function veTabThang(){
  const now = thangNay();
  const ds = [0,1,2,3,4,5].map(i => luiThang(now, i));
  document.getElementById('kt-thang').innerHTML = ds.map(t =>
    `<button class="${t===_thangDang?'on':''}" onclick="doiThang('${t}')">
       ${t===now?'Tháng này':nhanThang(t)}</button>`).join('');
}
function doiThang(t){ _thangDang = t; veTabThang(); tai(); }

// 18/08/2026: hiện ĐẦY ĐỦ kết quả thật/chỉ tiêu/trọng số/điểm góp — theo yêu cầu
// chủ tiệm để nhân viên biết CHÍNH XÁC vì sao điểm ra số đó mà phấn đấu đúng chỗ.
function _soDeu(n, chu){ return _fn(Math.round(n||0)) + (chu ? ' ' + chu : ''); }
function _ktSoLieu(c, kq){
  const v = kq ? c.ket_qua : c.chi_tieu;
  if (c.kieu === 'tien') return _f(v);
  if (c.kieu === 'so') return _soDeu(v, 'khách');
  return (Math.round((v||0)*10)/10) + '%';         // kieu === 'pct'
}
function veChiSo(ds){
  let tongTs = 0, tongGop = 0;
  const hang = ds.map(c => {
    if (c.chua_co_chi_tieu){
      return `<tr><td>${c.ten}</td><td colspan="3" class="text-amber-600">chưa có chỉ tiêu tháng này</td>
        <td>${c.trong_so}</td><td>—</td></tr>`;
    }
    tongTs += (c.trong_so || 0);
    tongGop += (c.gop || 0);
    const p = c.dat_pct || 0;
    const mau = p >= 100 ? '#059669' : (p >= 70 ? '#d97706' : '#dc2626');
    return `<tr>
      <td>${c.ten}</td>
      <td>${_ktSoLieu(c, true)}</td>
      <td>${_ktSoLieu(c, false)}</td>
      <td style="color:${mau};font-weight:800">${Math.round(p*10)/10}%</td>
      <td>${c.trong_so}</td>
      <td style="font-weight:700">${(Math.round((c.gop||0)*10)/10)}</td>
    </tr>`;
  }).join('');
  return `<div class="overflow-x-auto"><table class="kt-bang" style="min-width:540px">
    <thead><tr>
      <th>Mặt chấm điểm</th><th>Kết quả thật</th><th>Chỉ tiêu tháng</th>
      <th>Đạt %</th><th>Trọng số</th><th>Góp điểm</th>
    </tr></thead>
    <tbody>${hang}
      <tr class="kt-tong"><td>TỔNG</td><td></td><td></td><td></td>
        <td>${tongTs}</td><td>${Math.round(tongGop*10)/10}</td></tr>
    </tbody></table></div>
    <div class="text-xs text-gray-400 mt-1.5">"Góp điểm" của 5 dòng cộng lại = đúng điểm tháng ở trên.
    Xem cách tính đầy đủ tại <a href="/huong-dan#kpi" style="color:#8b0000;font-weight:600">Hướng dẫn chi tiết</a>.</div>`;
}

function veMon(ds){
  if (!ds.length) return '<div class="text-center text-gray-400 py-4 text-sm">'
    + 'Tháng này chưa có món nào ghi tên bạn.</div>';
  return ds.map(m => `
    <div class="kt-mon" style="border-left-color:${m.muc.mau}">
      <div class="flex justify-between items-start gap-2">
        <div class="flex-1" style="min-width:0">
          <b>${(m.ten||'').slice(0,40)}</b>
          <div class="text-gray-500" style="font-size:11px">
            ${(m.ngay||'').slice(0,10)} · ${_f(m.doanh_thu)}</div>
        </div>
        <div class="text-right shrink-0">
          <div class="kt-sao" style="color:${m.muc.mau}">${m.muc.sao}</div>
          <div style="font-size:10.5px;color:${m.muc.mau}">${m.muc.nhan}</div>
        </div>
      </div>
      <div class="kt-ly">${m.ly_do.join(' · ')}</div>
    </div>`).join('');
}

async function tai(){
  document.getElementById('kt-dangtai').classList.remove('hidden');
  document.getElementById('kt-than').classList.add('hidden');
  document.getElementById('kt-loi').classList.add('hidden');
  const r = await fetch('/api/kpi-cua-toi?thang=' + _thangDang, {cache:'no-store'});
  const d = await r.json();
  document.getElementById('kt-dangtai').classList.add('hidden');
  if (!d.success){
    document.getElementById('kt-loi').classList.remove('hidden');
    document.getElementById('kt-loi-noi').textContent = d.thong_bao || d.error || 'Không tải được.';
    return;
  }
  const x = d.du_lieu;
  document.getElementById('kt-than').classList.remove('hidden');

  document.getElementById('kt-diem').textContent = x.S;
  const p = Math.max(0, Math.min(100, x.S));
  document.getElementById('kt-cung').style.strokeDashoffset = 396 - 396*p/100;
  document.getElementById('kt-muc').textContent = x.muc_huong > 0
    ? 'Đang ở mức hưởng ' + x.muc_huong + '% hoa hồng'
    : 'Chưa đạt mức hưởng hoa hồng';
  document.getElementById('kt-muc').style.color = x.muc_huong > 0 ? '#059669' : '#dc2626';
  document.getElementById('kt-ketiep').textContent = x.bac_ke_tiep
    ? ('Còn ' + x.bac_ke_tiep.con_thieu + ' điểm nữa lên mức ' + x.bac_ke_tiep.nhan + '%')
    : 'Bạn đang ở mức cao nhất';

  const dk = x.du_kien || {};
  const boxDk = document.getElementById('kt-dukien-box');
  if (dk.la_du_kien){
    boxDk.classList.remove('hidden');
    document.getElementById('kt-dk-ngay').textContent =
      'Ngày ' + dk.so_ngay_da_qua + '/' + dk.tong_ngay_thang + ' của tháng';
    document.getElementById('kt-dk-diem').textContent = dk.S;
    document.getElementById('kt-dk-thanh').style.width = Math.max(0, Math.min(100, dk.S)) + '%';
    document.getElementById('kt-dk-muc').textContent = dk.muc_huong > 0
      ? 'Đang trên đà đạt mức ' + dk.muc_huong + '% hoa hồng'
      : 'Đang dưới mốc 70 điểm — chưa trên đà có hoa hồng';
    document.getElementById('kt-dk-muc').style.color = dk.muc_huong > 0 ? '#059669' : '#dc2626';
    document.getElementById('kt-dk-ketiep').textContent = dk.bac_ke_tiep
      ? ('Còn thiếu ' + dk.bac_ke_tiep.con_thieu + ' điểm (theo tốc độ hiện tại) để lên mức '
        + dk.bac_ke_tiep.nhan + '%')
      : 'Đang ở mức cao nhất theo tốc độ hiện tại';
    document.getElementById('kt-dk-chiso').innerHTML = veChiSo(dk.chi_so || []);
  } else {
    boxDk.classList.add('hidden');
  }

  document.getElementById('kt-tien').textContent = _f(x.tam_tinh);
  document.getElementById('kt-thuviec').classList.toggle('hidden', !x.thu_viec);

  document.getElementById('kt-sohd').textContent = _fn(x.so_hd);
  document.getElementById('kt-dt').textContent = _f(x.doanh_thu);
  document.getElementById('kt-khachmoi').textContent = _fn(x.so_khach_moi);
  document.getElementById('kt-somon').textContent = _fn(x.so_mon);

  document.getElementById('kt-chiso').innerHTML = veChiSo(x.chi_so);
  document.getElementById('kt-mon').innerHTML = veMon(x.mon);

  const g = x.goi_y || [];
  document.getElementById('kt-goibox').classList.toggle('hidden', !g.length);
  if (g.length) document.getElementById('kt-goi').innerHTML =
    '<b>💡 Gợi ý cho bạn</b><ul style="margin:6px 0 0 16px;list-style:disc">'
    + g.map(t => '<li style="margin-bottom:3px">' + t + '</li>').join('') + '</ul>';
}

_thangDang = thangNay();
veTabThang();
tai();
// tự làm mới khi quay lại tab (KPI theo thời gian thực)
document.addEventListener('visibilitychange', () => { if (!document.hidden) tai(); });
</script>
{% endblock %}