{% extends "base.html" %}
{% block title %}Báo cáo lợi nhuận — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Lợi nhuận theo loại hàng{% endblock %}

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

  <!-- ── BỘ LỌC ── -->
  <div class="ios-card p-4 sm:p-5">
    <div class="bc-loc-o">
      <div>
        <label class="bc-lbl">Nhóm theo</label>
        <select id="f-group" class="input-ios !py-2 text-sm w-full">
          <option value="loai_san_pham">Loại sản phẩm (dòng hàng)</option>
          <option value="nha_san_xuat">Nhà sản xuất</option>
          <option value="loai_vang">Loại vàng</option>
          <option value="ten">Tên sản phẩm</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ả —</option></select>
      </div>
      <div>
        <label class="bc-lbl">Loại sản phẩm</label>
        <select id="f-loai-sp" class="input-ios !py-2 text-sm w-full"><option value="">— Tất cả —</option></select>
      </div>
      <div>
        <label class="bc-lbl">Loại vàng</label>
        <select id="f-loai-vang" class="input-ios !py-2 text-sm w-full"><option value="">— Tất cả —</option></select>
      </div>
      <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 class="bc-o-rong">
        <label class="bc-lbl">Tên chứa</label>
        <input id="f-ten" type="text" placeholder="VD: Nhẫn Tròn" class="input-ios !py-2 text-sm w-full"
          onkeydown="if(event.key==='Enter')loadProfit()">
      </div>
    </div>
    <div class="bc-loc-nhanh mt-3">
      <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 class="bc-loc-nut mt-3">
      <button onclick="loadProfit()" 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>

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

  <!-- ── BIỂU ĐỒ ── -->
  <div class="ios-card p-4">
    <h2 class="font-extrabold text-gray-800 mb-2 text-sm">📊 Lợi nhuận theo nhóm</h2>
    <div id="chart-empty" class="text-center text-gray-300 py-6 hidden">Không có dữ liệu</div>
    <div style="position:relative; height:200px">
      <canvas id="chart-profit"></canvas>
    </div>
  </div>

  <!-- ── BẢNG ── -->
  <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">📋 Chi tiết theo nhóm</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">Nhóm</th>
            <th class="text-right px-4 py-2">SL đã bán</th>
            <th class="text-right px-4 py-2">Doanh thu</th>
            <th class="text-right px-4 py-2">Giá vốn</th>
            <th class="text-right px-4 py-2">Lợi nhuận</th>
            <th class="text-right px-4 py-2">Biên lãi</th>
          </tr>
        </thead>
        <tbody id="prof-tbody"></tbody>
        <tfoot id="prof-tfoot" class="bg-amber-50/60 font-extrabold"></tfoot>
      </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');
const fmtD = n => fmt(Math.round((n||0)*1000)) + 'đ';           // API trả NGHÌN → hiện ĐỒNG
const toISO = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
let _optsLoaded = false;
let chartProfit = null;
const COLORS = ['#d4a017','#8b0000','#15803d','#1d4ed8','#7c3aed','#be185d','#0891b2','#ca8a04','#b8860b','#4b5563','#dc2626','#0284c7'];

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

function buildQuery() {
  const p = new URLSearchParams();
  const g = document.getElementById('f-group').value; if (g) p.set('group_by', g);
  const from = document.getElementById('f-from').value; if (from) p.set('from', from);
  const to = document.getElementById('f-to').value; if (to) p.set('to', to);
  const nsx = document.getElementById('f-nsx').value; if (nsx) p.set('nsx', nsx);
  const lsp = document.getElementById('f-loai-sp').value; if (lsp) p.set('loai_sp', lsp);
  const lv = document.getElementById('f-loai-vang').value; if (lv) p.set('loai_vang', lv);
  const ten = document.getElementById('f-ten').value.trim(); if (ten) p.set('ten', ten);
  return p.toString();
}

function fillSelect(id, values) {
  const sel = document.getElementById(id);
  const cur = sel.value;
  sel.innerHTML = '<option value="">— Tất cả —</option>' +
    (values||[]).map(v => `<option value="${String(v).replace(/"/g,'&quot;')}">${v}</option>`).join('');
  sel.value = cur;   // giữ lựa chọn nếu còn
}

function card(icon, label, value, color) {
  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 break-words">${value}</div>
  </div>`;
}

function renderChart(groups) {
  const ctx = document.getElementById('chart-profit');
  document.getElementById('chart-empty').classList.toggle('hidden', groups.length > 0);
  ctx.classList.toggle('hidden', groups.length === 0);
  if (chartProfit) { chartProfit.destroy(); chartProfit = null; }
  if (!groups.length) return;
  const top = groups.slice(0, 15);
  chartProfit = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: top.map(g => g.nhom),
      datasets: [
        { label: 'Doanh thu (đ)', data: top.map(g => (g.doanh_thu||0)*1000), backgroundColor: '#fcd34d' },
        { label: 'Lợi nhuận (đ)', data: top.map(g => (g.loi_nhuan||0)*1000), backgroundColor: '#15803d' },
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,   // tôn trọng chiều cao khung cố định (200px) — không phồng to
      scales: { y: { ticks: { callback: v => fmt(v) } } },
      plugins: { tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${fmt(ctx.parsed.y)}đ` } } }
    }
  });
}

async function loadProfit() {
  const qs = buildQuery();
  document.getElementById('btn-export').href = '/api/pos/reports/profit/export' + (qs ? '?' + qs : '');
  const res = await fetch('/api/pos/reports/profit' + (qs ? '?' + qs : ''));
  if (res.status === 403) {
    document.getElementById('sum-grid').innerHTML = '<div class="col-span-4 text-center text-red-400 py-6">Bạn không có quyền xem báo cáo.</div>';
    return;
  }
  const d = await res.json();

  // Dropdown lọc (populate 1 lần từ options)
  if (!_optsLoaded && d.options) {
    fillSelect('f-nsx', d.options.nha_san_xuat);
    fillSelect('f-loai-sp', d.options.loai_san_pham);
    fillSelect('f-loai-vang', d.options.loai_vang);
    _optsLoaded = true;
  }

  const t = d.tong || {};
  const laiColor = (t.loi_nhuan||0) >= 0 ? 'text-green-700' : 'text-red-700';
  const tongGom = d.tong_loi_nhuan_gom_cam_do || 0;
  document.getElementById('sum-grid').innerHTML =
    card('💵', 'Doanh thu hàng', fmtD(t.doanh_thu), 'text-amber-700') +
    card('📈', 'Lợi nhuận hàng', fmtD(t.loi_nhuan) + ' · ' + (t.bien_lai||0) + '%', laiColor) +
    card('💍', 'Lãi cầm đồ', fmtD(d.lai_cam_do), 'text-purple-700') +
    card('🏆', 'TỔNG lợi nhuận', fmtD(tongGom), (tongGom>=0?'text-green-700':'text-red-700')) +
    card('🧾', 'SL đã bán', fmt(t.so_luong) + ' món', 'text-gray-700');

  const groups = d.groups || [];
  renderChart(groups);

  document.getElementById('lbl-count').textContent = `${groups.length} nhóm`;
  document.getElementById('prof-tbody').innerHTML = groups.map(g => {
    const laiCls = (g.loi_nhuan||0) >= 0 ? 'text-green-700' : 'text-red-700';
    return `<tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-4 py-2 font-semibold text-gray-700 dct-title">${g.nhom}</td>
      <td class="px-4 py-2 text-right" data-label="SL đã bán">${fmt(g.so_luong)}</td>
      <td class="px-4 py-2 text-right text-amber-700" data-label="Doanh thu">${fmtD(g.doanh_thu)}</td>
      <td class="px-4 py-2 text-right text-orange-600" data-label="Giá vốn">${fmtD(g.gia_von)}</td>
      <td class="px-4 py-2 text-right font-semibold ${laiCls}" data-label="Lợi nhuận">${fmtD(g.loi_nhuan)}</td>
      <td class="px-4 py-2 text-right ${laiCls}" data-label="Biên lãi">${g.bien_lai}%</td>
    </tr>`;
  }).join('') || '<tr><td colspan="6" class="text-center text-gray-300 py-8">Không có hàng đã bán khớp bộ lọc</td></tr>';

  document.getElementById('prof-tfoot').innerHTML = groups.length ? `<tr>
    <td class="px-4 py-2.5">TỔNG</td>
    <td class="px-4 py-2.5 text-right" data-label="SL">${fmt(t.so_luong)}</td>
    <td class="px-4 py-2.5 text-right text-amber-800" data-label="Doanh thu">${fmtD(t.doanh_thu)}</td>
    <td class="px-4 py-2.5 text-right text-orange-700" data-label="Giá vốn">${fmtD(t.gia_von)}</td>
    <td class="px-4 py-2.5 text-right ${laiColor}" data-label="Lợi nhuận">${fmtD(t.loi_nhuan)}</td>
    <td class="px-4 py-2.5 text-right ${laiColor}" data-label="Biên lãi">${t.bien_lai}%</td></tr>` : '';
}

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