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

{% block content %}

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

  <!-- ── BỘ LỌC THỜI GIAN ──
       Điện thoại: 2 ô ngày cạnh nhau · 4 nút chọn nhanh thành lưới · nút xem
       báo cáo chiếm trọn dòng. Trước đây tất cả nhét 1 hàng `flex-wrap` nên
       trên máy hẹp các nút rơi lung tung, nút chính bị đẩy sang mép phải. -->
  <div class="ios-card p-4 sm:p-5">
    <div class="bc-loc">
      <div class="bc-loc-ngay">
        <div style="align-self:end">
          <input id="f-from" type="date" lang="vi" 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 id="f-to" type="date" lang="vi" class="input-ios !py-2 text-sm w-full" placeholder="Đến ngày" aria-label="Đến ngày">
        </div>
      </div>
      <div class="bc-loc-nhanh">
        <button onclick="quickRange(0)"  class="bc-chip">Hôm nay</button>
        <button onclick="quickRange(7)"  class="bc-chip">7 ngày</button>
        <button onclick="quickRange(30)" class="bc-chip">30 ngày</button>
        <button onclick="clearRange()"   class="bc-chip bc-chip-xam">Tất cả</button>
      </div>
    </div>
      {# "Lợi nhuận theo loại hàng" đã là TAB thứ 4 ở trên → bỏ link trùng #}
      <div class="bc-loc-nut">
        <button onclick="loadReport()" class="btn-ios btn-ios-gold px-6 py-2.5 font-bold w-full">
          🔍 Xem báo cáo
        </button>
        <a id="btn-export" href="#" class="bc-lien-ket bc-lien-ket-vang">⬇️ Xuất Excel</a>
      </div>
  </div>

  <!-- ── DASHBOARD: HIỆU QUẢ KINH DOANH ── -->
  <div id="hero-card"></div>

  <!-- ── TỔNG QUAN ── -->
  <div id="summary-grid" class="grid grid-cols-2 sm:grid-cols-4 gap-3"></div>

  <!-- ── SỔ QUỸ TRONG KỲ ── -->
  <div id="cashbook-grid" class="grid grid-cols-1 sm:grid-cols-3 gap-3"></div>

  <!-- ── BIỂU ĐỒ ── -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="ios-card p-5">
      <h2 class="font-extrabold text-gray-800 mb-3">📈 Doanh thu &amp; lãi gộp theo ngày</h2>
      <div id="chart-ngay-empty" class="text-center text-gray-300 py-10 hidden">Không có dữ liệu trong khoảng thời gian này</div>
      <canvas id="chart-theo-ngay" height="220"></canvas>
    </div>
    <div class="ios-card p-5">
      <h2 class="font-extrabold text-gray-800 mb-3">🥇 Doanh thu theo loại vàng</h2>
      <div id="chart-loai-empty" class="text-center text-gray-300 py-10 hidden">Không có dữ liệu trong khoảng thời gian này</div>
      <canvas id="chart-theo-loai" height="220"></canvas>
    </div>
  </div>

  <!-- ── DANH SÁCH GIAO DỊCH ── -->
  <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">📋 Danh sách giao dịch trong khoảng thời gian</span>
      <span id="lbl-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">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="rep-tbody"></tbody>
      </table>
    </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');
// Giá trị từ API là NGHÌN đồng → hiển thị ĐỒNG đầy đủ (×1000) kèm "đ"
const fmtD = n => fmt(Math.round((n||0)*1000)) + 'đ';
const toISO = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;

function quickRange(days) {
  const to = new Date();
  const from = new Date();
  from.setDate(to.getDate() - days);
  fpSet('f-from', toISO(from));
  fpSet('f-to', toISO(to));
  loadReport();
}

function clearRange() {
  fpSet('f-from', '');
  fpSet('f-to', '');
  loadReport();
}

function buildQuery() {
  const from = document.getElementById('f-from').value;
  const to = document.getElementById('f-to').value;
  const params = new URLSearchParams();
  if (from) params.set('from', from);
  if (to) params.set('to', to);
  return params.toString();
}

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-xl font-black ${color} mt-0.5">${value}</div>
    ${sub ? `<div class="text-xs text-gray-400">${sub}</div>` : ''}
  </div>`;
}

function heroCard(d) {
  const total  = (d.doanh_thu_ban || 0) + (d.chi_mua_hang || 0);
  const pctBan = total > 0 ? Math.round((d.doanh_thu_ban || 0) / total * 100) : 0;
  const pctMua = 100 - pctBan;
  const laiColor = (d.lai_gop || 0) >= 0 ? '#15803d' : '#b91c1c';
  return `<div class="ios-card p-5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div>
        <div class="text-xs text-amber-600/80 uppercase font-bold tracking-wide">📈 Lãi gộp trong kỳ</div>
        <div class="text-3xl font-black mt-1" style="color:${laiColor}">${fmtD(d.lai_gop)}</div>
      </div>
      <div class="flex-1 min-w-[220px]">
        <div class="flex justify-between text-xs font-semibold text-gray-500 mb-1.5">
          <span>🟢 Doanh thu bán: ${fmtD(d.doanh_thu_ban)}</span>
          <span>🔴 Chi mua hàng: ${fmtD(d.chi_mua_hang)}</span>
        </div>
        <div class="h-3 w-full rounded-full overflow-hidden flex bg-white/70">
          <div class="h-full bg-green-500" style="width:${pctBan}%"></div>
          <div class="h-full bg-red-400" style="width:${pctMua}%"></div>
        </div>
      </div>
    </div>
  </div>`;
}

let chartTheoNgay = null;
let chartTheoLoai = null;
const LOAI_VANG_COLORS = ['#d4a017','#b8860b','#8b0000','#15803d','#1d4ed8','#7c3aed','#be185d','#0891b2','#ca8a04','#4b5563'];

function renderCharts(d) {
  const theoNgay = d.theo_ngay || [];
  const ctxNgay = document.getElementById('chart-theo-ngay');
  document.getElementById('chart-ngay-empty').classList.toggle('hidden', theoNgay.length > 0);
  ctxNgay.classList.toggle('hidden', theoNgay.length === 0);
  if (chartTheoNgay) { chartTheoNgay.destroy(); chartTheoNgay = null; }
  if (theoNgay.length) {
    chartTheoNgay = new Chart(ctxNgay, {
      type: 'bar',
      data: {
        labels: theoNgay.map(x => x.ngay),
        datasets: [
          { type: 'bar',  label: 'Doanh thu bán (đ)', data: theoNgay.map(x => (x.doanh_thu_ban||0)*1000), backgroundColor: '#fcd34d', order: 2 },
          { type: 'bar',  label: 'Chi mua hàng (đ)',  data: theoNgay.map(x => (x.chi_mua_hang||0)*1000),  backgroundColor: '#fca5a5', order: 2 },
          { type: 'line', label: 'Lãi gộp (đ)',       data: theoNgay.map(x => (x.lai_gop||0)*1000),       borderColor: '#15803d', backgroundColor: '#15803d', tension: 0.3, order: 1 },
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        scales: { y: { ticks: { callback: v => fmt(v) } } },
        plugins: { tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${fmt(ctx.parsed.y)}đ` } } }
      }
    });
  }

  const theoLoai = d.theo_loai_vang || [];
  const ctxLoai = document.getElementById('chart-theo-loai');
  document.getElementById('chart-loai-empty').classList.toggle('hidden', theoLoai.length > 0);
  ctxLoai.classList.toggle('hidden', theoLoai.length === 0);
  if (chartTheoLoai) { chartTheoLoai.destroy(); chartTheoLoai = null; }
  if (theoLoai.length) {
    chartTheoLoai = new Chart(ctxLoai, {
      type: 'doughnut',
      data: {
        labels: theoLoai.map(x => x.loai_vang),
        datasets: [{ data: theoLoai.map(x => x.doanh_thu), backgroundColor: LOAI_VANG_COLORS }]
      },
      options: {
        responsive: true,
        plugins: { tooltip: { callbacks: { label: ctx => `${ctx.label}: ${fmtD(ctx.parsed)}` } } }
      }
    });
  }
}

async function loadReport() {
  const qs = buildQuery();
  document.getElementById('btn-export').href = '/api/pos/reports/export' + (qs ? '?' + qs : '');

  const res = await fetch('/api/pos/reports' + (qs ? '?' + qs : ''));
  const d = await res.json();

  document.getElementById('hero-card').innerHTML = heroCard(d);

  document.getElementById('summary-grid').innerHTML =
    card('💵', 'Doanh thu bán hàng', fmtD(d.doanh_thu_ban), 'text-green-700', `${d.so_giao_dich_ban} hóa đơn`) +
    card('🛒', 'Chi mua hàng', fmtD(d.chi_mua_hang), 'text-red-700', `${d.so_giao_dich_mua} hóa đơn`) +
    card('🧾', 'Số hóa đơn bán', fmt(d.so_giao_dich_ban), 'text-gray-800') +
    card('📦', 'Số hóa đơn mua', fmt(d.so_giao_dich_mua), 'text-gray-800');

  document.getElementById('cashbook-grid').innerHTML = `
    <div class="ios-card p-4">
      <div class="text-xs text-gray-400 uppercase font-semibold">🟢 Tổng thu sổ quỹ</div>
      <div class="text-lg font-black tabular-nums text-green-700 mt-0.5">${fmtD(d.thu)}</div>
    </div>
    <div class="ios-card p-4">
      <div class="text-xs text-gray-400 uppercase font-semibold">🔴 Tổng chi sổ quỹ</div>
      <div class="text-lg font-black tabular-nums text-red-700 mt-0.5">${fmtD(d.chi)}</div>
    </div>
    <div class="ios-card p-4" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <div class="text-xs text-amber-600/80 uppercase font-semibold">💰 Chênh lệch quỹ</div>
      <div class="text-lg font-black tabular-nums text-amber-700 mt-0.5">${fmtD(d.chenh_lech_quy)}</div>
    </div>`;

  renderCharts(d);

  document.getElementById('lbl-count').textContent = `${d.sales.length} giao dịch`;
  document.getElementById('rep-tbody').innerHTML = d.sales.map(s => `
    <tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-4 py-2 font-mono dct-title">${s.ma_hd}</td>
      <td class="px-4 py-2" 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 || '—'}</td>
      <td class="px-4 py-2 text-right font-semibold" data-label="Tổng tiền">${fmtD(s.tong_tien)}</td>
    </tr>`).join('') || '<tr><td colspan="5" class="text-center text-gray-300 py-8">Không có giao dịch trong khoảng thời gian này</td></tr>';
}

quickRange(30);
</script>
{% endblock %}