{% extends "base.html" %}
{% block title %}Tổng quan — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Trang quản trị tổng hợp{% endblock %}

{% block content %}

<div id="access-denied" class="hidden ios-card p-6 text-center text-gray-500">
  🔒 Bạn không có quyền xem trang này.
</div>

<div id="dashboard-content" class="space-y-4">

  <!-- ── HÔM NAY ── -->
  <div class="ios-card p-5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
    <h2 class="font-extrabold text-gray-800 mb-3">📅 Hôm nay</h2>
    <div id="grid-hom-nay" class="grid grid-cols-2 sm:grid-cols-4 gap-3"></div>
  </div>

  <!-- ── THÁNG NÀY ── -->
  <div class="ios-card p-5">
    <h2 class="font-extrabold text-gray-800 mb-3">🗓️ Tháng này</h2>
    <div id="grid-thang-nay" class="grid grid-cols-2 sm:grid-cols-4 gap-3"></div>
  </div>

  <!-- ── XU HƯỚNG 30 NGÀY (27/08/2026) ── -->
  <div class="ios-card p-5">
    <div class="flex items-center justify-between mb-3">
      <h2 class="font-extrabold text-gray-800">📈 Xu hướng 30 ngày gần đây</h2>
      <span class="text-xs text-gray-400">Doanh thu bán · Lãi gộp</span>
    </div>
    <div style="position:relative; height:220px">
      <canvas id="chart-xu-huong"></canvas>
    </div>
  </div>

  <!-- ── TÌNH HÌNH TÀI CHÍNH ── -->
  <div class="ios-card p-5">
    <div class="flex items-center justify-between mb-3">
      <h2 class="font-extrabold text-gray-800">💼 Tình hình tài chính</h2>
      <a href="/bao-cao-tai-chinh" class="text-xs font-semibold text-amber-600">Xem báo cáo tình hình tài chính →</a>
    </div>
    <div id="grid-tai-chinh" class="grid grid-cols-1 sm:grid-cols-3 gap-3"></div>
  </div>

  <!-- ── KHO ── -->
  <div class="ios-card p-5">
    <h2 class="font-extrabold text-gray-800 mb-3">📦 Tồn kho</h2>
    <div id="grid-kho" class="grid grid-cols-2 sm:grid-cols-4 gap-3"></div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

    <!-- ── CẦM ĐỒ ── -->
    <div class="ios-card p-5">
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-extrabold text-gray-800">💰 Cầm đồ</h2>
        <a href="/pawn" class="text-xs font-semibold text-amber-600">Xem chi tiết →</a>
      </div>
      <div id="grid-cam-do" class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-2"></div>
      <div id="alerts-cam-do" class="space-y-1.5"></div>
    </div>

    <!-- ── ĐẶT LẤY HÀNG ── -->
    <div class="ios-card p-5">
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-extrabold text-gray-800">🛍️ Đặt lấy hàng</h2>
        <a href="/orders" class="text-xs font-semibold text-amber-600">Xem chi tiết →</a>
      </div>
      <div id="grid-don-hang" class="grid grid-cols-1 gap-3 mb-2"></div>
      <div id="alerts-don-hang" class="space-y-1.5"></div>
    </div>

    <!-- ── GIA CÔNG ── -->
    <div class="ios-card p-5">
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-extrabold text-gray-800">🔧 Gia công</h2>
        <a href="/gia-cong" class="text-xs font-semibold text-amber-600">Xem chi tiết →</a>
      </div>
      <div id="grid-gia-cong" class="grid grid-cols-1 gap-3 mb-2"></div>
      <div id="alerts-gia-cong" class="space-y-1.5"></div>
    </div>

    <!-- ── NHÂN SỰ ── -->
    <div class="ios-card p-5">
      <div class="flex items-center justify-between mb-3">
        <h2 class="font-extrabold text-gray-800">👥 Nhân sự</h2>
        <a href="/quan-ly-nguoi-dung" class="text-xs font-semibold text-amber-600">Xem chi tiết →</a>
      </div>
      <div id="grid-nhan-su" class="grid grid-cols-2 gap-3"></div>
    </div>

  </div>

  <!-- ── GIAO DỊCH GẦN ĐÂY ── -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <span class="font-extrabold text-gray-800">🧾 Giao dịch gần đây</span>
      <a href="/reports" class="text-xs font-semibold text-amber-600">Xem báo cáo →</a>
    </div>
    <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">Mã HĐ</th>
            <th class="text-left px-4 py-2">Thời gian</th>
            <th class="text-left px-4 py-2">Loại</th>
            <th class="text-left px-4 py-2">Khách hàng</th>
            <th class="text-right px-4 py-2">Tổng tiền</th>
          </tr>
        </thead>
        <tbody id="gd-tbody"></tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="/static/vendor/chart-4.umd.min.js"></script>
<script>
const fmt = n => Number(n||0).toLocaleString('vi-VN');
// Số từ API là NGHÌN đồng → hiển thị ĐỒNG đầy đủ (×1000)
const fmtD = n => fmt(Math.round((n||0)*1000)) + 'đ';

function card(icon, label, value, color, sub) {
  return `<div class="ios-card p-4">
    <div class="text-xs text-gray-400 uppercase font-semibold">${icon} ${label}</div>
    <div class="text-lg font-black tabular-nums ${color} mt-0.5">${value}</div>
    ${sub ? `<div class="text-xs text-gray-400 mt-0.5">${sub}</div>` : ''}
  </div>`;
}

// 27/08/2026 — huy hieu so sanh ky truoc (hom qua / thang truoc), phuc vu dashboard
// theo doi tinh hinh doanh nghiep. prev<=0 khong tinh % (chia 0 vo nghia) -> chi hien so.
function pctBadge(cur, prev, label) {
  cur = cur || 0; prev = prev || 0;
  if (!prev) return `<span class="text-gray-300">so ${label}: chưa có dữ liệu</span>`;
  const diff = cur - prev, pct = (diff / Math.abs(prev) * 100);
  const len = pct >= 0 ? '▲' : '▼';
  const cls = pct >= 0 ? 'text-green-600' : 'text-red-500';
  return `<span class="${cls} font-semibold">${len} ${Math.abs(pct).toFixed(1)}%</span> so ${label}`;
}

const CANH_BAO_LABEL = {
  qua_han: 'Quá hạn',
  sap_den_han: 'Sắp đến hạn',
  qua_han_muc: 'Quá hạn mức',
};

function alertItem(text, level, href) {
  const color = level === 'qua_han' || level === 'qua_han_muc' ? '#fee2e2' : '#fef3c7';
  const tcolor = level === 'qua_han' || level === 'qua_han_muc' ? '#b91c1c' : '#b45309';
  const tag = href ? 'a' : 'div';
  const hrefAttr = href ? `href="${href}"` : '';
  return `<${tag} ${hrefAttr} class="text-xs rounded-lg px-3 py-1.5 flex items-center justify-between gap-2 no-underline hover:opacity-80 transition cursor-pointer" style="background:${color};color:${tcolor}">
    <span>${text}</span>${href ? '<span class="flex-shrink-0">→</span>' : ''}
  </${tag}>`;
}

function renderEmptyAlert(containerId, msg) {
  document.getElementById(containerId).innerHTML =
    `<div class="text-xs text-gray-400 italic">${msg}</div>`;
}

let chartXuHuong = null;
function renderXuHuong(rows) {
  const labels = rows.map(r => r.ngay.slice(0, 5));   // dd/mm
  // Số từ API là NGHÌN đồng → nhân 1000 để trục/tooltip hiện ĐỒNG đầy đủ (khớp mọi số khác
  // trên trang này, tránh 2 đơn vị lẫn lộn trên cùng 1 trang).
  const dt = rows.map(r => (r.doanh_thu_ban || 0) * 1000);
  const lg = rows.map(r => (r.lai_gop || 0) * 1000);
  if (chartXuHuong) chartXuHuong.destroy();
  chartXuHuong = new Chart(document.getElementById('chart-xu-huong'), {
    type: 'bar',
    data: {
      labels,
      datasets: [
        { label: 'Doanh thu bán', data: dt, backgroundColor: '#fbbf24', order: 2 },
        { label: 'Lãi gộp', data: lg, type: 'line', borderColor: '#16a34a',
          backgroundColor: '#16a34a', tension: 0.3, pointRadius: 2, order: 1 },
      ],
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: {
        x: { ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 10 } },
        y: { ticks: { callback: v => fmt(v) + 'đ' } },
      },
      plugins: {
        legend: { position: 'top', labels: { boxWidth: 12, font: { size: 11 } } },
        tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${fmt(ctx.parsed.y)}đ` } },
      },
    },
  });
}

async function load() {
  // Gọi song song 2 API (quyền + số liệu) — gọi tuần tự làm trang chờ gấp đôi
  // thời gian mạng trên điện thoại; server vẫn tự kiểm tra quyền ở /api/tong-quan.
  let perms, d;
  try {
    const [permsRes, dRes] = await Promise.all([
      fetch('/api/my-perms'), fetch('/api/tong-quan'),
    ]);
    perms = await permsRes.json();
    d = await dRes.json();
  } catch (e) {
    perms = { perms: {} };
  }
  if (!(perms.perms && perms.perms.reports)) {
    document.getElementById('access-denied').classList.remove('hidden');
    document.getElementById('dashboard-content').classList.add('hidden');
    return;
  }

  // ── Hôm nay (so sánh hôm qua, 27/08/2026) ──
  const hn = d.hom_nay, ss = d.so_sanh || {};
  document.getElementById('grid-hom-nay').innerHTML =
    card('💵', 'Doanh thu', fmtD(hn.doanh_thu_hom_nay), 'text-amber-700', pctBadge(hn.doanh_thu_hom_nay, ss.doanh_thu_hom_qua, 'hôm qua')) +
    card('📈', 'Lãi gộp', fmtD(hn.lai_gop_hom_nay), (hn.lai_gop_hom_nay || 0) >= 0 ? 'text-green-600' : 'text-red-600', pctBadge(hn.lai_gop_hom_nay, ss.lai_gop_hom_qua, 'hôm qua')) +
    card('🧾', 'Số giao dịch', hn.so_giao_dich_hom_nay, 'text-gray-700') +
    card('🏦', 'Tồn quỹ', fmtD(hn.ton_quy), 'text-blue-600');

  // ── Tháng này (so sánh tháng trước) ──
  const tn = d.thang_nay;
  document.getElementById('grid-thang-nay').innerHTML =
    card('💵', 'Doanh thu bán', fmtD(tn.doanh_thu_ban), 'text-amber-700', pctBadge(tn.doanh_thu_ban, ss.doanh_thu_thang_truoc, 'tháng trước')) +
    card('🛒', 'Chi mua hàng', fmtD(tn.chi_mua_hang), 'text-orange-600', tn.so_giao_dich_mua + ' giao dịch') +
    card('📈', 'Lãi gộp', fmtD(tn.lai_gop), (tn.lai_gop || 0) >= 0 ? 'text-green-600' : 'text-red-600', pctBadge(tn.lai_gop, ss.lai_gop_thang_truoc, 'tháng trước')) +
    card('💰', 'Thu − Chi quỹ', fmtD(tn.thu - tn.chi), 'text-blue-600', `Thu ${fmtD(tn.thu)} · Chi ${fmtD(tn.chi)}`);

  // ── Xu hướng 30 ngày ──
  renderXuHuong(d.xu_huong_30_ngay || []);

  // ── Tình hình tài chính ──
  const tc = d.tai_chinh || {};
  document.getElementById('grid-tai-chinh').innerHTML =
    card('💰', 'Tổng tài sản', fmtD(tc.tong_tai_san), 'text-amber-700') +
    card('📉', 'Nợ phải trả', fmtD(tc.no_phai_tra), 'text-red-500') +
    card('📊', 'Vốn chủ sở hữu', fmtD(tc.von_chu_so_huu), 'text-green-700');

  // ── Kho ──
  document.getElementById('grid-kho').innerHTML =
    card('📦', 'Số lượng còn hàng', fmt(hn.ton_kho_so_luong), 'text-gray-700') +
    card('💎', 'Giá trị tồn kho', fmtD(hn.ton_kho_gia_tri), 'text-amber-700');

  // ── Cầm đồ ──
  const cd = d.cam_do;
  document.getElementById('grid-cam-do').innerHTML =
    card('📋', 'Đang cầm', cd.so_phieu_dang_cam, 'text-gray-700') +
    card('💵', 'Đã cho mượn', fmtD(cd.tong_tien_muon), 'text-amber-700') +
    card('📈', 'Lãi hiện tại', fmtD(cd.tong_lai_hien_tai), 'text-green-600');
  if (cd.canh_bao && cd.canh_bao.length) {
    document.getElementById('alerts-cam-do').innerHTML = cd.canh_bao
      .map(p => alertItem(`⚠️ ${p.ma_gd} — ${p.khach_hang}: ${CANH_BAO_LABEL[p.canh_bao] || p.canh_bao}`, p.canh_bao,
        `/pawn?ma_gd=${encodeURIComponent(p.ma_gd)}`))
      .join('');
  } else {
    renderEmptyAlert('alerts-cam-do', 'Không có phiếu cầm quá hạn mức.');
  }

  // ── Đặt lấy hàng ──
  const dh = d.don_hang;
  document.getElementById('grid-don-hang').innerHTML =
    card('🛍️', 'Đơn chờ lấy hàng', dh.so_don_cho_lay, 'text-gray-700');
  if (dh.canh_bao && dh.canh_bao.length) {
    document.getElementById('alerts-don-hang').innerHTML = dh.canh_bao
      .map(o => {
        const ngay = o.so_ngay_con_lai != null
          ? (o.so_ngay_con_lai < 0 ? `quá hạn ${Math.abs(o.so_ngay_con_lai)} ngày` : `còn ${o.so_ngay_con_lai} ngày`)
          : '';
        return alertItem(`⚠️ ${o.ma_don} — ${o.khach_hang}: ${CANH_BAO_LABEL[o.canh_bao] || o.canh_bao} (${ngay})`, o.canh_bao,
          `/orders?ma_dh=${encodeURIComponent(o.ma_don)}`);
      })
      .join('');
  } else {
    renderEmptyAlert('alerts-don-hang', 'Không có đơn sắp đến hạn hoặc quá hạn.');
  }

  // ── Gia công ──
  const gc = d.gia_cong;
  document.getElementById('grid-gia-cong').innerHTML =
    card('🔧', 'Đơn đang làm', gc.so_don_dang_lam, 'text-gray-700');
  if (gc.canh_bao && gc.canh_bao.length) {
    document.getElementById('alerts-gia-cong').innerHTML = gc.canh_bao
      .map(g => {
        const ngay = g.so_ngay_con_lai != null
          ? (g.so_ngay_con_lai < 0 ? `quá hạn ${Math.abs(g.so_ngay_con_lai)} ngày` : `còn ${g.so_ngay_con_lai} ngày`)
          : '';
        return alertItem(`⚠️ ${g.ma_don} — ${g.khach_hang}: ${CANH_BAO_LABEL[g.canh_bao] || g.canh_bao} (${ngay})`, g.canh_bao,
          `/gia-cong?ma_gc=${encodeURIComponent(g.ma_don)}`);
      })
      .join('');
  } else {
    renderEmptyAlert('alerts-gia-cong', 'Không có đơn gia công sắp đến hạn hoặc quá hạn.');
  }

  // ── Nhân sự ──
  const ns = d.nhan_su;
  let nsHtml = card('👥', 'Tổng số nhân viên', ns.tong_so, 'text-gray-700');
  ns.theo_vai_tro.forEach(r => {
    nsHtml += card('🧑‍💼', r.role_label, r.so_luong, 'text-amber-700');
  });
  document.getElementById('grid-nhan-su').innerHTML = nsHtml;

  // ── Giao dịch gần đây ──
  const tbody = document.getElementById('gd-tbody');
  if (d.giao_dich_gan_day && d.giao_dich_gan_day.length) {
    tbody.innerHTML = d.giao_dich_gan_day.map(s => `
      <tr class="border-t">
        <td class="px-4 py-2 dct-title">${s.ma_hd || ''}</td>
        <td class="px-4 py-2 whitespace-nowrap" data-label="Thời gian">${s.ngay || ''}</td>
        <td class="px-4 py-2" data-label="Loại">${s.loai === 'ban' ? 'Bán' : 'Mua'}</td>
        <td class="px-4 py-2" data-label="Khách hàng">${s.khach_hang || ''}<div class="text-xs text-gray-400">${s.dien_thoai_khach||''}</div></td>
        <td class="px-4 py-2 text-right font-semibold" data-label="Tổng tiền">${fmtD(s.tong_tien)}</td>
      </tr>
    `).join('');
  } else {
    tbody.innerHTML = '<tr><td colspan="5" class="text-center py-6 text-gray-400">Chưa có giao dịch nào.</td></tr>';
  }
}

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