{% extends "base.html" %}
{% block title %}Giấy đảm bảo — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Giấy đảm bảo vàng — tra cứu, xem, in lại{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
  <div class="ios-card p-4 mb-3" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fde68a">
    <div class="font-bold text-gray-800">🧾 Giấy đảm bảo vàng</div>
    <div class="text-xs text-gray-600 mt-1">
      Giấy đảm bảo được <b>làm tự động</b> cho mỗi hóa đơn bán (lập ở trang <a href="/pos" class="underline font-semibold">Bán hàng</a>).
      Ở đây tìm lại hóa đơn theo <b>mã hóa đơn, tên khách, số điện thoại, CCCD hoặc ngày</b> rồi bấm
      <b>👁️ Xem / In</b> (mở giấy đảm bảo, bấm In trên trang đó) hoặc <b>📠 In tại quầy</b> (in thẳng ra máy in ở quầy).
    </div>
    {% if la_gd %}
    <div class="flex flex-wrap gap-2 mt-3">
      <a href="/mau-giay-dam-bao" class="tkt-act tkt-amber">🎨 Thiết kế mẫu giấy đảm bảo</a>
      <a href="/mau-hoa-don" class="tkt-act tkt-indigo">🧾 Thiết kế mẫu hóa đơn</a>
    </div>
    {% endif %}
  </div>

  <div class="ios-card p-3 mb-3 flex flex-col sm:flex-row gap-2">
    <input id="gdb-q" type="search" class="input-ios flex-1" placeholder="Mã hóa đơn, tên khách, SĐT, CCCD, ngày (dd/mm/yyyy)…"
           onkeydown="if(event.key==='Enter') gdbTim()">
    <button onclick="gdbTim()" class="btn-ios btn-ios-gold px-5 py-2 font-bold">🔍 Tìm</button>
  </div>

  <div id="gdb-msg" class="text-sm text-gray-500 px-1 mb-2"></div>
  <div id="gdb-list" class="space-y-2"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
function _gE(s) {
  return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/`/g, '&#96;');
}
const _GDB_TT = { hoan_thanh: ['Hoàn tất', '#166534', '#dcfce7'], nhap: ['Nháp', '#92400e', '#fef3c7'],
                  hoan_lai: ['Đã hoàn lại', '#991b1b', '#fee2e2'] };
let _gdbItems = [];

async function gdbTim() {
  const q = document.getElementById('gdb-q').value.trim();
  const msg = document.getElementById('gdb-msg');
  msg.textContent = 'Đang tìm…';
  try {
    const r = await fetch('/api/giay-dam-bao/tim?q=' + encodeURIComponent(q), { cache: 'no-store' });
    const d = await r.json();
    if (!d.success) { msg.textContent = d.thong_bao || 'Không tải được danh sách.'; _gdbItems = []; gdbVe(); return; }
    _gdbItems = d.items || [];
    msg.textContent = _gdbItems.length
      ? ('Tìm thấy ' + _gdbItems.length + ' hóa đơn' + (d.con_nua ? ' (chỉ hiện 100 hóa đơn mới nhất — gõ thêm để lọc).' : '.'))
      : (q ? 'Không có hóa đơn bán nào khớp "' + q + '".' : 'Chưa có hóa đơn bán nào.');
    gdbVe();
  } catch (e) {
    msg.textContent = 'Mất kết nối máy chủ — thử lại.';
  }
}

function gdbVe() {
  const box = document.getElementById('gdb-list');
  box.innerHTML = _gdbItems.map((s, i) => {
    const tt = _GDB_TT[s.trang_thai] || [s.trang_thai, '#374151', '#f3f4f6'];
    const tien = Math.round((s.tong_tien || 0) * 1000).toLocaleString('vi-VN') + 'đ';
    const inDuoc = s.trang_thai === 'hoan_thanh';
    return `<div class="ios-card p-3">
      <div class="flex flex-wrap items-center gap-2">
        <div class="flex-1" style="min-width:150px">
          <div class="font-bold text-gray-800 break-words">${_gE(s.khach_hang || '(khách lẻ)')}</div>
          <div class="text-xs text-gray-500">${_gE(s.ma_hd)} · ${_gE(s.ngay)}${s.dien_thoai ? ' · ' + _gE(s.dien_thoai) : ''}${s.chi_nhanh ? ' · ' + _gE(s.chi_nhanh) : ''}</div>
        </div>
        <div class="flex items-center gap-2 ml-auto flex-shrink-0">
          <span class="text-xs text-gray-500">${s.so_mon} món</span>
          <span class="font-bold tabular-nums text-amber-800">${tien}</span>
          <span class="text-[11px] font-bold px-2 py-0.5 rounded-full" style="color:${tt[1]};background:${tt[2]}">${_gE(tt[0])}</span>
        </div>
      </div>
      <div class="flex flex-wrap gap-2 mt-2">
        <a href="/pos/sales/${Number(s.id)}/print" target="_blank" class="tkt-act tkt-amber">👁️ Xem / In giấy đảm bảo</a>
        <button type="button" data-i="${i}" class="tkt-act tkt-blue gdb-in-quay">📠 In tại quầy</button>
        ${inDuoc ? `<a href="/pos/sales/${Number(s.id)}/hoa-don" target="_blank" class="tkt-act tkt-indigo">🧾 In hóa đơn</a>` : ''}
      </div>
    </div>`;
  }).join('');
  box.querySelectorAll('.gdb-in-quay').forEach(b => b.addEventListener('click', function () {
    const s = _gdbItems[Number(this.dataset.i)];
    if (s) printRemote('/pos/sales/' + Number(s.id) + '/print', this);
  }));
}

gdbTim();
</script>
{% endblock %}