{% extends "customer/base.html" %}
{% block title %}Bảng giá vàng — {{ brand.ten_hien_thi }}{% endblock %}
{% block header_sub %}Xin chào, {{ customer.name.split()[0] }}!{% endblock %}
{% block header_right %}
<div class="header-right">
  <a href="/khach/dang-xuat" style="color:#fff;font-size:13px;opacity:.8;text-decoration:none">Đăng xuất</a>
</div>
{% endblock %}

{% block content %}

<!-- ── Cập nhật ──────────────────────────────────── -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
  <span style="font-size:11px;color:#16a34a;display:flex;align-items:center;gap:4px">
    <span id="live-dot" style="width:7px;height:7px;background:#16a34a;border-radius:50%;display:inline-block"></span>
    Realtime · tự cập nhật
  </span>
  <span style="font-size:11px;color:#9ca3af" id="updated_at"></span>
</div>

<!-- ── Giá nổi bật SJC ─────────────────────────── -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px">
  <div class="price-banner" style="background:linear-gradient(135deg,#166534,#16a34a)">
    <div class="label">Giá mua vào</div>
    <div class="value" id="topMua">—</div>
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div class="unit">nghìn/chỉ</div>
      <div id="topMuaChange" style="font-size:11px;font-weight:700"></div>
    </div>
  </div>
  <div class="price-banner">
    <div class="label">Giá bán ra</div>
    <div class="value" id="topBan">—</div>
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div class="unit">nghìn/chỉ</div>
      <div id="topBanChange" style="font-size:11px;font-weight:700"></div>
    </div>
  </div>
</div>

<!-- ── Bảng giá đầy đủ ─────────────────────────── -->
<div class="card">
  <div class="card-title" style="display:flex;justify-content:space-between;align-items:center">
    <span>📊 Bảng giá vàng hôm nay</span>
    <span style="font-size:10px;color:#9ca3af;font-weight:400;text-transform:none;letter-spacing:0">
      <span id="price-count"></span>
    </span>
  </div>
  <table class="price-table" id="priceTable">
    <thead>
      <tr>
        <th>Loại</th>
        <th style="text-align:right">Mua vào</th>
        <th style="text-align:right">Bán ra</th>
        <th style="text-align:right;font-size:10px;color:#9ca3af">Thay đổi</th>
      </tr>
    </thead>
    <tbody id="priceBody">
      <tr><td colspan="4" style="text-align:center;padding:20px;color:#9ca3af">Đang tải...</td></tr>
    </tbody>
  </table>
</div>

<!-- ── Tính lời lãi ────────────────────────────── -->
<div class="card">
  <div class="card-title">🧮 Tính lời lãi</div>
  <div class="form-group">
    <label class="form-label">Loại vàng</label>
    <select id="calcLoai" class="form-input" onchange="calcProfit()">
      <option value="">-- Chọn loại vàng --</option>
    </select>
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
    <div class="form-group">
      <label class="form-label">Giá mua vào (nghìn)</label>
      <input id="calcGiaMua" type="number" class="form-input" placeholder="0"
             inputmode="decimal" oninput="calcProfit()">
    </div>
    <div class="form-group">
      <label class="form-label">Số lượng (chỉ)</label>
      <input id="calcSoLuong" type="number" class="form-input" placeholder="1"
             inputmode="decimal" min="0.01" step="0.01" oninput="calcProfit()">
    </div>
  </div>
  <div id="calcResult" class="alert alert-info hidden"></div>
</div>

<!-- ── Sản phẩm có sẵn ────────────────────────── -->
<div class="card" id="products-card">
  <div class="card-title" style="display:flex;justify-content:space-between;align-items:center">
    <span>💍 Sản phẩm có sẵn</span>
    <span id="prod-count" style="font-size:10px;color:#9ca3af;font-weight:400;text-transform:none"></span>
  </div>
  <div id="prod-list" style="margin-top:4px">
    <div style="text-align:center;color:#d1d5db;padding:16px;font-size:13px">Đang tải...</div>
  </div>
</div>

<!-- ── Thông tin cửa hàng ─────────────────────── -->
<div class="card" style="background:linear-gradient(135deg,#fef9ee,#fef3c7)">
  <div class="card-title">📍 {{ brand.ten_hien_thi }}</div>
  <div style="display:flex;flex-direction:column;gap:8px;font-size:13px">
    <div style="display:flex;align-items:center;gap:8px">
      <span style="font-size:16px">📞</span>
      <a href="tel:0123456789" style="color:#b45309;font-weight:600;text-decoration:none">0123 456 789</a>
    </div>
    <div style="display:flex;align-items:flex-start;gap:8px">
      <span style="font-size:16px">📌</span>
      <span style="color:#4b5563">123 Đường Vàng, Quận 1, TP.HCM</span>
    </div>
    <div style="display:flex;align-items:center;gap:8px">
      <span style="font-size:16px">🕐</span>
      <span style="color:#4b5563">7:30 – 18:00, T2–T7</span>
    </div>
  </div>
</div>

<!-- ── Nút hành động ──────────────────────────── -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;margin-bottom:8px">
  <a href="/khach/dat-lenh?type=mua" class="btn btn-green" style="background:linear-gradient(135deg,#15803d,#16a34a)">
    🛒 Đặt mua vàng
  </a>
  <a href="/khach/dat-lenh?type=ban" class="btn btn-red" style="background:linear-gradient(135deg,#b91c1c,#dc2626)">
    💰 Đặt bán vàng
  </a>
</div>

{% endblock %}

{% block bottom_nav %}
<nav class="bottom-nav">
  <a href="/khach/trang-chu" class="nav-item active">
    <span class="icon">📊</span>Giá vàng
  </a>
  <a href="/khach/dat-lenh?type=mua" class="nav-item">
    <span class="icon">🛒</span>Mua
  </a>
  <a href="/khach/dat-lenh?type=ban" class="nav-item">
    <span class="icon">💰</span>Bán
  </a>
  <a href="/khach/don-hang" class="nav-item">
    <span class="icon">📋</span>Đơn hàng
  </a>
</nav>
{% endblock %}

{% block scripts %}
<style>
  .prod-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid #fde68a;
  }
  .prod-item:last-child { border-bottom:none; }
  .prod-name { font-size:13px; font-weight:600; color:#1c1917; }
  .prod-meta { font-size:11px; color:#9ca3af; margin-top:2px; }
  .prod-price { font-size:14px; font-weight:700; color:#b45309; white-space:nowrap; }
  .change-up   { color:#dc2626; }
  .change-down { color:#16a34a; }
  .change-flat { color:#9ca3af; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .pulse { animation:pulse 2s infinite; }
</style>
<script>
let prices = [];

// ─── Giá vàng ────────────────────────────────────────
async function loadPrices() {
  try {
    const r = await fetch('/api/prices');
    const d = await r.json();
    if (!d.prices || !d.prices.length) return;

    // Theo danh mục loại vàng: bỏ loại chủ tiệm ẩn, sắp theo thứ tự + tên trên bảng giá chính.
    prices = d.prices.filter(p => p.hien !== false).sort((a, b) => (a.thu_tu ?? 0) - (b.thu_tu ?? 0));
    renderTable(prices);
    updateTopPrices(prices);
    updateCalcSelect(prices);

    const meta = d.meta || d.prices[0];
    const upd  = meta?.updated_at || (prices.length > 0 ? 'Vừa cập nhật' : '');
    if (upd) document.getElementById('updated_at').textContent = upd;
    document.getElementById('price-count').textContent = `${prices.length} loại`;
  } catch(e) { console.error(e); }
}

function fmt(val) {
  if (!val) return '—';
  return (val / 1000).toLocaleString('vi-VN', { maximumFractionDigits: 0 });
}

function fmtChange(change) {
  if (!change && change !== 0) return '';
  const v = Math.round(change / 1000);
  if (v === 0)  return '<span class="change-flat">—</span>';
  if (v > 0)    return `<span class="change-up">▲ +${v.toLocaleString('vi-VN')}</span>`;
  return `<span class="change-down">▼ ${v.toLocaleString('vi-VN')}</span>`;
}

function renderTable(prices) {
  const tbody = document.getElementById('priceBody');
  tbody.innerHTML = prices.map(p => `
    <tr>
      <td style="font-weight:600">${escGia(p.ten || p.loai)}</td>
      <td style="text-align:right;color:#16a34a">${fmt(p.mua)}</td>
      <td style="text-align:right;color:#b45309;font-weight:700">${fmt(p.ban)}</td>
      <td style="text-align:right;font-size:11px">${fmtChange(p.change_ban)}</td>
    </tr>
  `).join('');
}

function updateTopPrices(prices) {
  const sjc = prices.find(p => (p.loai||'').toLowerCase().includes('sjc'))
           || prices.find(p => (p.loai||'').includes('9999'))
           || prices[0];
  if (!sjc) return;
  document.getElementById('topMua').textContent = fmt(sjc.mua);
  document.getElementById('topBan').textContent = fmt(sjc.ban);

  const muaChg = document.getElementById('topMuaChange');
  const banChg = document.getElementById('topBanChange');
  if (sjc.change_mua != null) {
    const v = Math.round((sjc.change_mua||0)/1000);
    muaChg.innerHTML = v > 0 ? `<span style="color:#86efac">▲ +${v}</span>`
                     : v < 0 ? `<span style="color:#fca5a5">▼ ${v}</span>` : '';
  }
  if (sjc.change_ban != null) {
    const v = Math.round((sjc.change_ban||0)/1000);
    banChg.innerHTML = v > 0 ? `<span style="color:#fde68a">▲ +${v}</span>`
                     : v < 0 ? `<span style="color:#fca5a5">▼ ${v}</span>` : '';
  }
}

function updateCalcSelect(prices) {
  const sel = document.getElementById('calcLoai');
  sel.innerHTML = '<option value="">-- Chọn loại vàng --</option>' +
    prices.map(p =>
      `<option value="${escGia(p.loai)}" data-mua="${p.mua}" data-ban="${p.ban}">${escGia(p.ten || p.loai)}</option>`
    ).join('');
}
function escGia(s) { const d = document.createElement('div'); d.textContent = s == null ? '' : String(s); return d.innerHTML.replace(/"/g, '&quot;'); }

function calcProfit() {
  const loaiSel = document.getElementById('calcLoai');
  const giaMua  = parseFloat(document.getElementById('calcGiaMua').value) * 1000 || 0;
  const sl      = parseFloat(document.getElementById('calcSoLuong').value) || 0;
  const result  = document.getElementById('calcResult');

  if (!loaiSel.value || !giaMua || !sl) {
    result.className = 'alert alert-info hidden'; return;
  }

  const opt    = loaiSel.selectedOptions[0];
  const giaBan = parseFloat(opt.dataset.ban) || 0;
  const loi    = (giaBan - giaMua) * sl;
  const tyLe   = giaMua > 0 ? ((giaBan - giaMua) / giaMua * 100).toFixed(2) : 0;

  const icon  = loi >= 0 ? '📈' : '📉';
  const color = loi >= 0 ? 'var(--green)' : 'var(--red)';
  const label = loi >= 0 ? 'Lãi' : 'Lỗ';

  result.className = 'alert alert-info';
  result.innerHTML = `
    <div style="display:flex;justify-content:space-between;align-items:center">
      <span>${icon} ${label} ước tính</span>
      <strong style="color:${color};font-size:16px">${Math.abs(loi).toLocaleString('vi-VN')} đ</strong>
    </div>
    <div style="font-size:12px;color:#6b7280;margin-top:4px">
      Giá bán hiện tại: ${(giaBan/1000).toLocaleString('vi-VN')} nghìn/chỉ
      · Tỷ lệ: ${loi >= 0 ? '+' : ''}${tyLe}%
    </div>`;
}

// ─── Sản phẩm có sẵn ─────────────────────────────────
async function loadProducts() {
  try {
    const r = await fetch('/api/pos/products?status=con_hang');
    const d = await r.json();
    const prods = (d.products || []).slice(0, 10); // Top 10

    const list  = document.getElementById('prod-list');
    const count = document.getElementById('prod-count');
    count.textContent = d.products?.length ? `${d.products.length} sản phẩm` : '';

    if (!prods.length) {
      list.innerHTML = '<div style="text-align:center;color:#d1d5db;padding:16px;font-size:13px">Chưa có sản phẩm</div>';
      return;
    }

    list.innerHTML = prods.map(p => {
      const loai = p.loai_vang ? ` · ${p.loai_vang}` : '';
      const tl   = p.trong_luong ? ` · ${Number(p.trong_luong).toLocaleString('vi-VN',{maximumFractionDigits:3})}chỉ` : '';
      return `<div class="prod-item">
        <div>
          <div class="prod-name">${p.ten}</div>
          <div class="prod-meta">${p.ma_hang||'—'}${loai}${tl}</div>
        </div>
        <div class="prod-price">${p.gia_ban ? (p.gia_ban/1000).toLocaleString('vi-VN',{maximumFractionDigits:0})+'tr' : '—'}</div>
      </div>`;
    }).join('');

    if ((d.products||[]).length > 10) {
      list.innerHTML += `<div style="text-align:center;font-size:12px;color:#b45309;padding:8px 0;font-weight:600">
        + ${d.products.length - 10} sản phẩm khác · <a href="/khach/dat-lenh?type=mua" style="color:#b45309;text-decoration:underline">Xem tất cả</a>
      </div>`;
    }
  } catch(e) { console.error(e); }
}

// ─── Live dot animation ───────────────────────────────
function pulseDot() {
  const dot = document.getElementById('live-dot');
  dot.classList.add('pulse');
  setTimeout(() => dot.classList.remove('pulse'), 2000);
}

// ─── Khởi động & auto-refresh ────────────────────────
async function init() {
  await loadPrices();
  loadProducts();
  pulseDot();
}

init();
setInterval(async () => {
  await loadPrices();
  pulseDot();
}, 30000);

setInterval(loadProducts, 120000); // Reload sản phẩm mỗi 2 phút
</script>
{% endblock %}