{% extends "base.html" %}
{% block title %}Báo cáo tồn kho — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Báo cáo tồn kho{% endblock %}

{% block content %}

<!-- ── TAB BÁO CÁO (hub chung 4 trang) ── -->
{% include '_tab_bao_cao.html' %}

<!-- ── Thanh lọc ─────────────────────────────────────── -->
<div class="ios-card p-4 sm:p-5 mb-4" style="border:1.5px solid #e9d5ff">
  <div class="bc-loc-o">
    <div style="align-self:end">
      <input type="date" lang="vi" id="f-from" class="input-ios !py-2 text-sm w-full" placeholder="Từ ngày" aria-label="Từ ngày">
    </div>
    <div style="align-self:end">
      <input type="date" lang="vi" id="f-to" class="input-ios !py-2 text-sm w-full" placeholder="Đến ngày" aria-label="Đến ngày">
    </div>
    <div>
      <label class="bc-lbl">Trạng thái</label>
      <select id="f-tt" class="input-ios !py-2 text-sm w-full">
        <option value="">Tất cả</option>
        <option value="con_hang">Còn hàng</option>
        <option value="da_ban">Đã bán</option>
        <option value="that_lac">Thất lạc</option>
      </select>
    </div>
    <div>
      <label class="bc-lbl">Loại vàng</label>
      <select id="f-loai" class="input-ios !py-2 text-sm w-full"><option value="">Tất cả loại</option></select>
    </div>
    <div>
      <label class="bc-lbl">Nhà sản xuất</label>
      <select id="f-nsx" class="input-ios !py-2 text-sm w-full"><option value="">Tất cả NSX</option></select>
    </div>
  </div>
  <div class="bc-loc-nut mt-3">
    <button onclick="loadReport()" class="btn-ios btn-ios-gold px-6 py-2.5 font-bold w-full">🔍 Xem báo cáo</button>
    <button onclick="resetFilters()" class="bc-lien-ket bc-chip-xam">↺ Đặt lại</button>
  </div>
  <div id="report-status" class="text-xs text-gray-400 mt-2 text-center sm:text-right"></div>
</div>

<!-- ── Thẻ tổng quan ──────────────────────────────────── -->
<div id="summary-cards" class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
  <!-- Filled by JS -->
</div>

<!-- ── Bảng trạng thái ───────────────────────────────── -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">

  <!-- By Trạng thái -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#faf5ff,#f5f3ff)">📦 Theo trạng thái</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">Trạng thái</th>
          <th class="text-right px-4 py-2">Số món</th>
          <th class="text-right px-4 py-2">KLV (chỉ)</th>
          <th class="text-right px-4 py-2">Tổng giá vốn</th>
          <th class="text-right px-4 py-2">Tổng giá bán</th>
        </tr>
      </thead>
      <tbody id="tbl-tt"></tbody>
    </table>
    </div>
    <div id="tbl-tt-empty" class="hidden text-center text-gray-300 py-6 text-sm">Không có dữ liệu</div>
  </div>

  <!-- By NSX -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#faf5ff,#f5f3ff)">🏭 Theo nhà sản xuất</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">NSX</th>
          <th class="text-right px-4 py-2">Số món</th>
          <th class="text-right px-4 py-2">Giá vốn</th>
          <th class="text-right px-4 py-2">Giá bán</th>
        </tr>
      </thead>
      <tbody id="tbl-nsx"></tbody>
    </table>
    </div>
    <div id="tbl-nsx-empty" class="hidden text-center text-gray-300 py-6 text-sm">Không có dữ liệu</div>
  </div>

</div>

<!-- ── By Loại vàng ──────────────────────────────────── -->
<div class="ios-card overflow-hidden mb-4">
  <div class="px-5 py-3.5 flex justify-between items-center" style="background:linear-gradient(135deg,#faf5ff,#f5f3ff)">
    <span class="font-extrabold text-gray-800">🥇 Theo loại vàng</span>
    <span id="loai-count" class="text-xs text-gray-400"></span>
  </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">Loại vàng</th>
          <th class="text-right px-4 py-2">Số món</th>
          <th class="text-right px-4 py-2">KL Vàng (chỉ)</th>
          <th class="text-right px-4 py-2">KL Tổng (chỉ)</th>
          <th class="text-right px-4 py-2">Tổng giá vốn</th>
          <th class="text-right px-4 py-2">Tổng giá bán</th>
          <th class="text-right px-4 py-2">Lãi gộp ước tính</th>
        </tr>
      </thead>
      <tbody id="tbl-loai"></tbody>
    </table>
    <div id="tbl-loai-empty" class="hidden text-center text-gray-300 py-6 text-sm">Không có dữ liệu</div>
  </div>
</div>

<!-- ── Timeline nhập/xuất ────────────────────────────── -->
<div class="ios-card p-5 mb-4">
  <div class="font-bold text-gray-700 mb-3">📅 Lịch sử nhập / xuất theo ngày</div>
  <div id="timeline-wrap">
    <div id="timeline-empty" class="text-center text-gray-300 py-6 text-sm">Không có dữ liệu</div>
    <div id="timeline-chart" class="hidden min-h-[120px] flex items-end gap-1.5 pb-6 relative"></div>
  </div>
</div>

<!-- ── Back link ─────────────────────────────────────── -->
<div class="text-center py-2">
  <a href="/inventory" class="text-amber-700 text-sm font-semibold hover:underline">← Quay lại tồn kho</a>
</div>

{% endblock %}

{% block scripts %}
<style>
  .sum-card { background:#fff; border-radius: var(--r-lg); padding:16px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.05); }
  .sum-label { font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; }
  .sum-val   { font-size:22px; font-weight:900; color:#1f2937; margin:4px 0 2px; }
  .sum-sub   { font-size:11px; color:#6b7280; }
  /* Cột TỰ CO theo bề ngang màn hình — trước đây rộng cố định 14px nên 30 ngày
     thành 1010px, trên điện thoại 326px phải vuốt ngang mới xem hết. */
  .bar-col { display:flex; flex-direction:column; align-items:center; gap:2px;
             flex:1 1 0; min-width:0; }
  .bar-nhap { background:#8b5cf6; border-radius:3px 3px 0 0; min-height:2px;
              flex:1 1 0; min-width:2px; max-width:14px; }
  .bar-xuat { background:#f59e0b; border-radius:3px 3px 0 0; min-height:2px;
              flex:1 1 0; min-width:2px; max-width:14px; }
  .bar-label.an { display:none; }   /* chật quá thì giấu bớt nhãn ngày cho đỡ chồng */
  .bar-label { font-size:10px; color:#6b7280; white-space:nowrap; transform:rotate(-45deg);
               transform-origin:top right; display:block; margin-top:4px; }
  .tbl-row-hover:hover { background:#faf5ff; }
  /* Bảng trong cột hẹp của trang này: siết đệm cho vừa, khỏi phải kéo ngang
     (đo được 501px trong khung 488px trên máy tính). */
  @media (min-width: 641px) {
    .ios-card table th, .ios-card table td { padding-left:9px !important; padding-right:9px !important; }
  }
</style>
<script>
const fmt  = n => Number(n||0).toLocaleString('vi-VN');
const fmtR = n => n == null ? '—' : Number(n).toFixed(3).replace(/\.?0+$/, '');

let _filterOpts = { loai_vang: [], nha_san_xuat: [] };

// ── Điền select filter từ DB ────────────────────────
async function loadFilterOptions() {
  const r = await fetch('/api/pos/inventory/report');
  const d = await r.json();
  _filterOpts = d.filter_options || {};
  const loaiSel = document.getElementById('f-loai');
  loaiSel.innerHTML = '<option value="">Tất cả loại</option>' +
    (_filterOpts.loai_vang || []).map(l => `<option value="${l}">${l}</option>`).join('');
  const nsxSel = document.getElementById('f-nsx');
  nsxSel.innerHTML = '<option value="">Tất cả NSX</option>' +
    (_filterOpts.nha_san_xuat || []).map(n => `<option value="${n}">${n}</option>`).join('');
  renderReport(d);
}

// ── Tải báo cáo với filter hiện tại ─────────────────
async function loadReport() {
  const from  = document.getElementById('f-from').value;
  const to    = document.getElementById('f-to').value;
  const tt    = document.getElementById('f-tt').value;
  const loai  = document.getElementById('f-loai').value;
  const nsx   = document.getElementById('f-nsx').value;

  const params = new URLSearchParams();
  if (from)  params.set('from', from);
  if (to)    params.set('to',   to);
  if (tt)    params.set('trang_thai', tt);
  if (loai)  params.set('loai', loai);
  if (nsx)   params.set('nsx', nsx);

  const st = document.getElementById('report-status');
  st.textContent = '⏳ Đang tải...';
  try {
    const r = await fetch('/api/pos/inventory/report?' + params);
    const d = await r.json();
    renderReport(d);
    st.textContent = `Cập nhật lúc ${new Date().toLocaleTimeString('vi-VN')}`;
  } catch(e) {
    st.textContent = '❌ Lỗi kết nối';
  }
}

function resetFilters() {
  fpSet('f-from', '');
  fpSet('f-to', '');
  document.getElementById('f-tt').value   = '';
  document.getElementById('f-loai').value = '';
  document.getElementById('f-nsx').value  = '';
  loadReport();
}

// ── Render toàn bộ báo cáo ──────────────────────────
function renderReport(d) {
  renderSummaryCards(d);
  renderByStatus(d.by_status || []);
  renderByLoai(d.by_loai || []);
  renderByNsx(d.by_nsx || []);
  renderTimeline(d.timeline || []);
}

function renderSummaryCards(d) {
  const cards = document.getElementById('summary-cards');
  const _cl = c => `<div class="sum-card border-t-4 border-${c}">`;
  cards.innerHTML = `
    ${_cl('purple-400')}
      <div class="sum-label">Tổng sản phẩm</div>
      <div class="sum-val" style="color:#7c3aed">${fmt(d.total)}</div>
      <div class="sum-sub">món trong bộ lọc</div>
    </div>
    ${_cl('amber-400')}
      <div class="sum-label">Tổng giá vốn</div>
      <div class="sum-val" style="color:#b45309">${fmt(Math.round((d.total_gia_von || 0) * 1000))}</div>
      <div class="sum-sub">đồng</div>
    </div>
    ${_cl('green-400')}
      <div class="sum-label">Tổng giá bán</div>
      <div class="sum-val" style="color:#15803d">${fmt(Math.round((d.total_gia_ban || 0) * 1000))}</div>
      <div class="sum-sub">đồng</div>
    </div>
    ${_cl('blue-400')}
      <div class="sum-label">Lãi gộp ước tính</div>
      <div class="sum-val" style="color:#1d4ed8">${fmt(Math.round(((d.total_gia_ban || 0) - (d.total_gia_von || 0)) * 1000))}</div>
      <div class="sum-sub">giá bán – giá vốn (đồng)</div>
    </div>`;
}

function renderByStatus(rows) {
  const tt_label = {'con_hang':'Còn hàng','da_ban':'Đã bán','that_lac':'Thất lạc'};
  const tt_icon  = {'con_hang':'🟢','da_ban':'⚫','that_lac':'🟠'};
  const tbody = document.getElementById('tbl-tt');
  const empty = document.getElementById('tbl-tt-empty');
  if (!rows.length) { tbody.innerHTML=''; empty.classList.remove('hidden'); return; }
  empty.classList.add('hidden');
  tbody.innerHTML = rows.map(r => `
    <tr class="border-b border-gray-50 tbl-row-hover">
      <td class="px-4 py-2.5 font-semibold dct-title">${tt_icon[r.tt]||'•'} ${r.label||r.tt}</td>
      <td class="px-4 py-2.5 text-right font-bold text-gray-800" data-label="Số món">${fmt(r.count)}</td>
      <td class="px-4 py-2.5 text-right text-gray-600" data-label="KLV (chỉ)">${r.kl_vang ? fmtR(r.kl_vang) : '—'}</td>
      <td class="px-4 py-2.5 text-right text-amber-700" data-label="Tổng giá vốn">${fmt(Math.round((r.gia_von || 0) * 1000))}đ</td>
      <td class="px-4 py-2.5 text-right text-green-700 font-semibold" data-label="Tổng giá bán">${fmt(Math.round((r.gia_ban || 0) * 1000))}đ</td>
    </tr>`).join('');
}

function renderByLoai(rows) {
  const tbody = document.getElementById('tbl-loai');
  const empty = document.getElementById('tbl-loai-empty');
  document.getElementById('loai-count').textContent = rows.length ? `${rows.length} loại` : '';
  if (!rows.length) { tbody.innerHTML=''; empty.classList.remove('hidden'); return; }
  empty.classList.add('hidden');
  tbody.innerHTML = rows.map(r => {
    const lai = Math.round((r.gia_ban||0) - (r.gia_von||0));
    const laiCls = lai >= 0 ? 'text-green-700 font-semibold' : 'text-red-600 font-semibold';
    return `<tr class="border-b border-gray-50 tbl-row-hover">
      <td class="px-4 py-2.5 font-semibold text-purple-800 dct-title">${r.loai}</td>
      <td class="px-4 py-2.5 text-right font-bold" data-label="Số món">${fmt(r.count)}</td>
      <td class="px-4 py-2.5 text-right text-gray-600" data-label="KL Vàng (chỉ)">${r.kl_vang ? fmtR(r.kl_vang) : '—'}</td>
      <td class="px-4 py-2.5 text-right text-gray-500" data-label="KL Tổng (chỉ)">${r.kl_tong ? fmtR(r.kl_tong) : '—'}</td>
      <td class="px-4 py-2.5 text-right text-amber-700" data-label="Tổng giá vốn">${fmt(Math.round((r.gia_von || 0) * 1000))}đ</td>
      <td class="px-4 py-2.5 text-right text-green-700" data-label="Tổng giá bán">${fmt(Math.round((r.gia_ban || 0) * 1000))}đ</td>
      <td class="px-4 py-2.5 text-right ${laiCls}" data-label="Lãi gộp ước tính">${lai >= 0 ? '+' : ''}${fmt(lai * 1000)}đ</td>
    </tr>`;
  }).join('');
}

function renderByNsx(rows) {
  const tbody = document.getElementById('tbl-nsx');
  const empty = document.getElementById('tbl-nsx-empty');
  if (!rows.length) { tbody.innerHTML=''; empty.classList.remove('hidden'); return; }
  empty.classList.add('hidden');
  tbody.innerHTML = rows.map(r => `
    <tr class="border-b border-gray-50 tbl-row-hover">
      <td class="px-4 py-2.5 text-sm dct-title">${r.nsx}</td>
      <td class="px-4 py-2.5 text-right font-bold" data-label="Số món">${fmt(r.count)}</td>
      <td class="px-4 py-2.5 text-right text-amber-700" data-label="Giá vốn">${fmt(Math.round((r.gia_von || 0) * 1000))}đ</td>
      <td class="px-4 py-2.5 text-right text-green-700" data-label="Giá bán">${fmt(Math.round((r.gia_ban || 0) * 1000))}đ</td>
    </tr>`).join('');
}

function renderTimeline(rows) {
  const wrap  = document.getElementById('timeline-chart');
  const empty = document.getElementById('timeline-empty');
  if (!rows.length) {
    wrap.classList.add('hidden');
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');
  wrap.classList.remove('hidden');

  // Find max for scaling
  const maxVal = Math.max(1, ...rows.map(r => Math.max(r.nhap||0, r.xuat||0)));
  const maxH   = 90; // px

  wrap.innerHTML = rows.map(r => {
    const hNhap = Math.round(((r.nhap||0) / maxVal) * maxH);
    const hXuat = Math.round(((r.xuat||0) / maxVal) * maxH);
    return `<div class="bar-col" title="${r.ngay}: Nhập ${r.nhap||0}, Xuất ${r.xuat||0}">
      <div style="display:flex;gap:2px;align-items:flex-end;height:${maxH}px;width:100%">
        <div class="bar-nhap" style="height:${hNhap}px" title="Nhập: ${r.nhap||0}"></div>
        ${(r.xuat||0) > 0 ? `<div class="bar-xuat" style="height:${hXuat}px" title="Xuất: ${r.xuat||0}"></div>` : ''}
      </div>
      <div class="bar-label">${r.ngay}</div>
    </div>`;
  }).join('');

  // Màn hình hẹp mà nhiều ngày → nhãn chồng nhau. Giấu bớt, chỉ để lại ~6 mốc
  // (điện thoại) / ~15 mốc (máy tính); vẫn xem được từng ngày bằng cách chạm cột.
  const toiDa = window.innerWidth < 640 ? 6 : 15;
  const buoc  = Math.ceil(rows.length / toiDa);
  if (buoc > 1) {
    wrap.querySelectorAll('.bar-label').forEach((el, i) => {
      if (i % buoc !== 0 && i !== rows.length - 1) el.classList.add('an');
    });
  }

  // Legend
  wrap.innerHTML += `<div style="position:absolute;top:0;right:0;font-size:10px;display:flex;gap:8px;color:#6b7280">
    <span><span style="display:inline-block;width:10px;height:10px;background:#8b5cf6;border-radius:2px;vertical-align:middle"></span> Nhập</span>
    <span><span style="display:inline-block;width:10px;height:10px;background:#f59e0b;border-radius:2px;vertical-align:middle"></span> Xuất</span>
  </div>`;
}

// ── Auto-refresh mỗi 60 giây ─────────────────────────
let _autoRefresh = null;
function startAutoRefresh() {
  clearInterval(_autoRefresh);
  _autoRefresh = setInterval(loadReport, 60000);
}

// ── Reload khi thay đổi filter ──────────────────────
['f-from','f-to','f-tt','f-loai','f-nsx'].forEach(id => {
  document.getElementById(id).addEventListener('change', loadReport);
});

// ── Khởi động ──────────────────────────────────────
loadFilterOptions();
startAutoRefresh();
</script>
{% endblock %}