{% extends "base.html" %}
{% block title %}Nhắc lịch — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Nhắc lịch hẹn{% endblock %}

{% block content %}
<div class="space-y-5 px-4 py-4 max-w-2xl mx-auto pb-8">

  <!-- Tổng hợp -->
  <div id="nl-summary" class="ios-card p-4 text-center hidden"></div>

  <!-- ── Cầm đồ quá hạn mức ── -->
  <div id="sec-camdo" class="hidden">
    <div class="flex items-center gap-2 px-1 mb-2">
      <span class="text-sm font-bold text-gray-500 uppercase tracking-wide">🔴 Cầm đồ quá hạn mức</span>
      <span id="cnt-camdo" class="bg-red-500 text-white text-xs font-bold rounded-full px-2 py-0.5"></span>
    </div>
    <div id="lst-camdo" class="space-y-3"></div>
  </div>

  <!-- ── Đặt lấy hàng sắp / quá hạn ── -->
  <div id="sec-donhang" class="hidden">
    <div class="flex items-center gap-2 px-1 mb-2">
      <span class="text-sm font-bold text-gray-500 uppercase tracking-wide">📦 Đặt lấy hàng cần xử lý</span>
      <span id="cnt-donhang" class="bg-amber-500 text-white text-xs font-bold rounded-full px-2 py-0.5"></span>
    </div>
    <div id="lst-donhang" class="space-y-3"></div>
  </div>

  <!-- ── Gia công sắp / quá hạn ── -->
  <div id="sec-giacong" class="hidden">
    <div class="flex items-center gap-2 px-1 mb-2">
      <span class="text-sm font-bold text-gray-500 uppercase tracking-wide">🔨 Đặt gia công cần xử lý</span>
      <span id="cnt-giacong" class="bg-amber-500 text-white text-xs font-bold rounded-full px-2 py-0.5"></span>
    </div>
    <div id="lst-giacong" class="space-y-3"></div>
  </div>

  <!-- Trạng thái tải -->
  <div id="nl-loading" class="ios-card p-10 text-center text-gray-300 text-sm">Đang tải…</div>

  <!-- Không có việc -->
  <div id="nl-empty" class="hidden ios-card p-10 text-center">
    <div class="text-5xl mb-3">✅</div>
    <div class="font-bold text-gray-700 text-lg">Không có việc cần xử lý</div>
    <div class="text-sm text-gray-400 mt-1">Mọi lịch hẹn và phiếu cầm đồ đều đang trong hạn</div>
    <div id="nl-last-update" class="text-xs text-gray-300 mt-3"></div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function _fmtK(x) {
  if (x === null || x === undefined) return '—';
  return new Intl.NumberFormat('vi-VN').format(Math.round(x * 1000)) + ' đ';
}

function _urgBadge(n) {
  if (n === null || n === undefined)
    return '<span class="badge-gray">Chưa có ngày hẹn</span>';
  if (n < 0)
    return `<span class="badge-red">🔴 Quá hạn ${Math.abs(n)} ngày</span>`;
  if (n === 0)
    return '<span class="badge-orange">🟡 Đến hạn hôm nay</span>';
  return `<span class="badge-amber">⏰ Còn ${n} ngày</span>`;
}

function _itemNames(items) {
  if (!items || !items.length) return '—';
  const names = items.map(it => it.ten_hang || it.noi_dung || it.chat_lieu || '').filter(Boolean);
  if (!names.length) return '—';
  return names.slice(0, 3).join(', ') + (names.length > 3 ? ` (+${names.length - 3})` : '');
}

function _telLink(dt) {
  return dt ? `<div class="text-sm text-gray-500">📞 <a href="tel:${dt}" class="underline">${dt}</a></div>` : '';
}

function _card(border, html) {
  return `<div class="ios-card p-4 space-y-2.5" style="border:1.5px solid ${border}">${html}</div>`;
}

function _dateStr(s) {
  return (s || '—').split(' ')[0];
}

async function nlLoad() {
  try {
    const res = await fetch('/api/nhac-lich');
    const d = await res.json();
    const camDo   = d.cam_do   || [];
    const donHang = d.don_hang || [];
    const giaCong = d.gia_cong || [];
    const total   = camDo.length + donHang.length + giaCong.length;

    document.getElementById('nl-loading').classList.add('hidden');

    // Summary
    const sumEl = document.getElementById('nl-summary');
    if (total > 0) {
      sumEl.innerHTML = `
        <div class="text-3xl font-black text-red-700">${total}</div>
        <div class="text-sm text-gray-500 mt-1">việc cần xử lý</div>
        <div class="flex justify-center gap-4 mt-3 text-xs text-gray-500 flex-wrap">
          ${camDo.length   ? `<span class="bg-red-50 text-red-700 rounded-full px-2 py-0.5 font-semibold">🔴 Cầm đồ: ${camDo.length}</span>` : ''}
          ${donHang.length ? `<span class="bg-amber-50 text-amber-700 rounded-full px-2 py-0.5 font-semibold">📦 Đặt hàng: ${donHang.length}</span>` : ''}
          ${giaCong.length ? `<span class="bg-amber-50 text-amber-700 rounded-full px-2 py-0.5 font-semibold">🔨 Gia công: ${giaCong.length}</span>` : ''}
        </div>`;
      sumEl.className = 'ios-card p-4 text-center';
      sumEl.style.background = 'linear-gradient(135deg,#fef2f2,#fff1f2)';
      sumEl.style.border = '1.5px solid #fecaca';
      sumEl.classList.remove('hidden');
      document.getElementById('nl-empty').classList.add('hidden');
    } else {
      sumEl.classList.add('hidden');
      const lastUpdate = document.getElementById('nl-last-update');
      if (lastUpdate) lastUpdate.textContent = 'Cập nhật lần cuối: ' + new Date().toLocaleTimeString('vi-VN');
      document.getElementById('nl-empty').classList.remove('hidden');
    }

    // ── Cầm đồ ──
    const secCamDo = document.getElementById('sec-camdo');
    if (camDo.length) {
      document.getElementById('cnt-camdo').textContent = camDo.length;
      document.getElementById('lst-camdo').innerHTML = camDo.map(p => _card('#fca5a5', `
        <div class="flex justify-between items-start gap-2 flex-wrap">
          <div>
            <span class="font-mono font-bold text-amber-700">${p.ma_gd}</span>
            <span class="text-xs text-gray-400 ml-2">Ngày cầm: ${_dateStr(p.ngay_cam)}</span>
          </div>
          <span class="badge-red">⚠️ Quá hạn mức</span>
        </div>
        <div class="font-semibold text-gray-800 text-base">${p.khach_hang || '—'}</div>
        ${_telLink(p.dien_thoai)}
        <div class="text-sm text-gray-600">🪙 ${_itemNames(p.items)}</div>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs">
          <div class="bg-gray-50 rounded-xl p-2.5 text-center">
            <div class="text-gray-400 mb-0.5">Đã cầm</div>
            <div class="font-bold text-gray-700">${p.so_ngay_da_cam ?? '—'} ngày</div>
          </div>
          <div class="bg-gray-50 rounded-xl p-2.5 text-center">
            <div class="text-gray-400 mb-0.5">Phải thu</div>
            <div class="font-bold text-gray-700">${_fmtK(p.tong_phai_thu)}</div>
          </div>
          <div class="bg-red-50 rounded-xl p-2.5 text-center">
            <div class="text-gray-400 mb-0.5">Còn lại</div>
            <div class="font-bold text-red-600">${_fmtK(p.gia_tri_con_lai)}</div>
          </div>
        </div>
        <div class="flex justify-end pt-1">
          <a href="/pawn?ma_gd=${encodeURIComponent(p.ma_gd)}" class="btn-ios btn-ios-secondary text-xs px-4 py-1.5">Xem phiếu cầm →</a>
        </div>`
      )).join('');
      secCamDo.classList.remove('hidden');
    } else {
      secCamDo.classList.add('hidden');
    }

    // ── Đặt lấy hàng ──
    const secDonHang = document.getElementById('sec-donhang');
    if (donHang.length) {
      document.getElementById('cnt-donhang').textContent = donHang.length;
      document.getElementById('lst-donhang').innerHTML = donHang.map(o => {
        const overdue = o.canh_bao === 'qua_han';
        return _card(overdue ? '#fca5a5' : '#fcd34d', `
          <div class="flex justify-between items-start gap-2 flex-wrap">
            <div>
              <span class="font-mono font-bold text-amber-700">${o.ma_dh}</span>
              <span class="text-xs text-gray-400 ml-2">Hẹn: ${_dateStr(o.ngay_co_hang)}</span>
            </div>
            ${_urgBadge(o.so_ngay_con_lai)}
          </div>
          <div class="font-semibold text-gray-800 text-base">${o.khach_hang || '—'}</div>
          ${_telLink(o.dien_thoai)}
          <div class="text-sm text-gray-600">📋 ${_itemNames(o.items)}</div>
          <div class="grid grid-cols-2 gap-2 text-xs">
            <div class="bg-gray-50 rounded-xl p-2.5 text-center">
              <div class="text-gray-400 mb-0.5">Tiền đặt cọc</div>
              <div class="font-bold text-gray-700">${_fmtK(o.tong_tien_coc)}</div>
            </div>
            <div class="bg-gray-50 rounded-xl p-2.5 text-center">
              <div class="text-gray-400 mb-0.5">Ngày đặt</div>
              <div class="font-bold text-gray-700">${_dateStr(o.ngay_dat)}</div>
            </div>
          </div>
          <div class="flex justify-end pt-1">
            <a href="/orders?ma_dh=${encodeURIComponent(o.ma_dh)}" class="btn-ios btn-ios-secondary text-xs px-4 py-1.5">Xem đặt hàng →</a>
          </div>`);
      }).join('');
      secDonHang.classList.remove('hidden');
    } else {
      secDonHang.classList.add('hidden');
    }

    // ── Gia công ──
    const secGiaCong = document.getElementById('sec-giacong');
    if (giaCong.length) {
      document.getElementById('cnt-giacong').textContent = giaCong.length;
      document.getElementById('lst-giacong').innerHTML = giaCong.map(g => {
        const overdue = g.canh_bao === 'qua_han';
        return _card(overdue ? '#fca5a5' : '#fcd34d', `
          <div class="flex justify-between items-start gap-2 flex-wrap">
            <div>
              <span class="font-mono font-bold text-amber-700">${g.ma_gc}</span>
              <span class="text-xs text-gray-400 ml-2">Hẹn giao: ${_dateStr(g.ngay_hen_giao)}</span>
            </div>
            ${_urgBadge(g.so_ngay_con_lai)}
          </div>
          <div class="font-semibold text-gray-800 text-base">${g.khach_hang || '—'}</div>
          ${_telLink(g.dien_thoai)}
          <div class="text-sm text-gray-600">🔨 ${_itemNames(g.items)}</div>
          <div class="grid grid-cols-2 gap-2 text-xs">
            <div class="bg-gray-50 rounded-xl p-2.5 text-center">
              <div class="text-gray-400 mb-0.5">Tiền đặt cọc</div>
              <div class="font-bold text-gray-700">${_fmtK(g.tong_tien_coc)}</div>
            </div>
            <div class="bg-gray-50 rounded-xl p-2.5 text-center">
              <div class="text-gray-400 mb-0.5">Ngày đặt</div>
              <div class="font-bold text-gray-700">${_dateStr(g.ngay_dat)}</div>
            </div>
          </div>
          <div class="flex justify-end pt-1">
            <a href="/gia-cong?ma_gc=${encodeURIComponent(g.ma_gc)}" class="btn-ios btn-ios-secondary text-xs px-4 py-1.5">Xem gia công →</a>
          </div>`);
      }).join('');
      secGiaCong.classList.remove('hidden');
    } else {
      secGiaCong.classList.add('hidden');
    }

  } catch(e) {
    document.getElementById('nl-loading').textContent = '❌ Không tải được dữ liệu. Thử lại sau.';
    document.getElementById('nl-loading').classList.remove('hidden');
  }
}

nlLoad();
setInterval(nlLoad, 60000);
</script>
<style>
.badge-red    { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:9999px; background:#fee2e2; color:#b91c1c; }
.badge-orange { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:9999px; background:#ffedd5; color:#c2410c; }
.badge-amber  { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:9999px; background:#fef3c7; color:#92400e; }
.badge-gray   { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:9999px; background:#f3f4f6; color:#6b7280; }
</style>
{% endblock %}