{% extends "base.html" %}
{% block title %}Phiếu Xuất/Nhập Kho — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Phiếu Xuất Kho / Nhập Kho{% endblock %}

{% block content %}

<div class="ios-card p-4 sm:p-5">
  <div class="flex gap-2 mb-4">
    <button id="tab-xuat-btn" onclick="switchTab('xuat')" class="flex-1 py-2.5 rounded-xl font-bold text-sm">📤 Lập Phiếu Xuất Kho</button>
    <button id="tab-nhap-btn" onclick="switchTab('nhap')" class="flex-1 py-2.5 rounded-xl font-bold text-sm">📥 Lập Phiếu Nhập Kho</button>
  </div>

  <p class="text-xs text-gray-400 mb-3">Dùng cho các trường hợp CHƯA có phiếu nào đại diện: chuyển hàng
    giữa chi nhánh, xuất hàng mẫu/biếu tặng, điều chỉnh kiểm kê thừa/thiếu, nhập hàng không qua mua/xưởng...
    Bán/mua/gia công hàng ngày vẫn dùng đúng trang riêng như cũ.</p>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
    <div><label class="text-xs font-bold text-gray-500">Lý do</label>
      <input id="f-lydo" class="input-ios w-full" placeholder="VD: Chuyển hàng sang chi nhánh Cẩm Phả"></div>
    <div><label class="text-xs font-bold text-gray-500">Ghi chú</label>
      <input id="f-ghichu" class="input-ios w-full"></div>
    <div><label class="text-xs font-bold text-gray-500">Người giao</label>
      <input id="f-nguoigiao" class="input-ios w-full"></div>
    <div><label class="text-xs font-bold text-gray-500">Người nhận</label>
      <input id="f-nguoinhan" class="input-ios w-full"></div>
  </div>

  <!-- ── XUẤT KHO: chọn sản phẩm CÓ SẴN trong kho ── -->
  <div id="pane-xuat">
    <div class="flex items-center gap-2 mb-2">
      <input id="xk-scan" class="input-ios flex-1" placeholder="🔫 Quét mã vạch hoặc gõ mã hàng rồi Enter" list="dl-xk-products">
      <datalist id="dl-xk-products"></datalist>
      <span id="xk-count" class="text-xs font-bold text-amber-700 whitespace-nowrap">0 món</span>
    </div>
    <div id="xk-rows" class="space-y-2"></div>
    <button onclick="xkAddEmptyRow()" class="text-xs font-bold text-blue-600 mt-2">➕ Thêm dòng (gõ mã tay)</button>
  </div>

  <!-- ── NHẬP KHO: khai hàng MỚI vào kho ── -->
  <div id="pane-nhap" class="hidden">
    <div id="nk-rows" class="space-y-3"></div>
    <button onclick="nkAddRow()" class="text-xs font-bold text-blue-600 mt-2">➕ Thêm món</button>
  </div>

  <div class="flex items-center justify-between mt-4 pt-3 border-t">
    <div id="f-total" class="text-sm font-bold text-gray-600"></div>
    <button onclick="submitPhieu()" id="btn-submit" class="btn-ios btn-ios-gold px-6 py-2.5">💾 Lập phiếu</button>
  </div>
  <p id="f-msg" class="text-sm mt-2"></p>
</div>

<!-- ── DANH SÁCH GẦN ĐÂY ── -->
<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="flex items-center justify-between mb-3">
    <div class="font-bold text-gray-800">📋 Phiếu gần đây</div>
    <div class="flex gap-1">
      <button onclick="loadDanhSach(null)" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 font-semibold" id="ds-filter-all">Tất cả</button>
      <button onclick="loadDanhSach('xuat')" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 font-semibold" id="ds-filter-xuat">Xuất</button>
      <button onclick="loadDanhSach('nhap')" class="text-xs px-2.5 py-1 rounded-full border border-gray-200 font-semibold" id="ds-filter-nhap">Nhập</button>
    </div>
  </div>
  <div id="ds-list" class="space-y-2"></div>
</div>

<style>
  #tab-xuat-btn, #tab-nhap-btn { background:#f3f4f6; color:#6b7280; }
  #tab-xuat-btn.active { background:linear-gradient(135deg,#4a0000,#8b0000); color:#fff; }
  #tab-nhap-btn.active { background:linear-gradient(135deg,#4a0000,#8b0000); color:#fff; }
  .kp-row { border:1px solid #eee; border-radius:14px; padding:10px; }
  .kp-lbl { font-size:10px; font-weight:700; color:#9ca3af; text-transform:uppercase; }
</style>

<script>
let _tab = 'xuat';
let _xkProducts = {};   // ma_hang(UPPER) -> product
let _xkItems = [];      // [{product_id, ma_hang, ten, tuoi, loai_vang, don_vi, trong_luong, ghi_chu}]
let _nkRowN = 0;

function switchTab(t) {
  _tab = t;
  document.getElementById('tab-xuat-btn').classList.toggle('active', t === 'xuat');
  document.getElementById('tab-nhap-btn').classList.toggle('active', t === 'nhap');
  document.getElementById('pane-xuat').classList.toggle('hidden', t !== 'xuat');
  document.getElementById('pane-nhap').classList.toggle('hidden', t !== 'nhap');
  document.getElementById('btn-submit').textContent = t === 'xuat' ? '💾 Lập Phiếu Xuất Kho' : '💾 Lập Phiếu Nhập Kho';
}

// ═══ XUẤT KHO ═══
async function loadXkProducts() {
  try {
    const d = await (await fetch('/api/pos/products?status=con_hang')).json();
    _xkProducts = {};
    (d.products || []).forEach(p => { if (p.ma_hang) _xkProducts[p.ma_hang.trim().toUpperCase()] = p; });
    const dl = document.getElementById('dl-xk-products');
    dl.innerHTML = (d.products || []).map(p =>
      `<option value="${(p.ma_hang || '').replace(/"/g, '&quot;')}">${(p.ten || '').replace(/"/g, '&quot;')} · ${p.trong_luong || 0} chỉ</option>`).join('');
  } catch (e) {}
}
function xkRender() {
  document.getElementById('xk-rows').innerHTML = _xkItems.map((it, i) => `
    <div class="kp-row flex items-center gap-3 flex-wrap">
      <div class="flex-1 min-w-[10rem]">
        <div class="font-mono font-bold text-sm">${_escNk(it.ma_hang)}</div>
        <div class="text-xs text-gray-500">${_escNk(it.ten)} · ${_escNk(it.tuoi || it.loai_vang || '')} · ${it.trong_luong || 0} ${it.don_vi || 'chỉ'}</div>
      </div>
      <button onclick="xkRemove(${i})" class="text-red-500 text-xs font-bold">✕ Bỏ</button>
    </div>`).join('') || '<div class="text-center text-gray-300 py-6 text-sm">Chưa có món nào — quét mã hoặc gõ mã hàng ở ô trên</div>';
  document.getElementById('xk-count').textContent = _xkItems.length + ' món';
}
function xkAddByCode(code) {
  code = (code || '').trim().toUpperCase();
  if (!code) return;
  const p = _xkProducts[code];
  if (!p) { alert('⚠️ Không tìm thấy mã "' + code + '" trong Tồn kho (còn hàng).'); return; }
  if (_xkItems.some(it => it.product_id === p.id)) { alert('⚠️ Món này đã có trong danh sách.'); return; }
  _xkItems.push({ product_id: p.id, ma_hang: p.ma_hang, ten: p.ten, tuoi: p.tuoi, loai_vang: p.loai_vang,
    don_vi: p.don_vi, trong_luong: p.trong_luong });
  xkRender();
}
function xkRemove(i) { _xkItems.splice(i, 1); xkRender(); }
function xkAddEmptyRow() {
  const code = prompt('Nhập mã hàng có trong Tồn kho:');
  if (code) xkAddByCode(code);
}
if (typeof bindBarcodeScanInput === 'function') {
  document.addEventListener('DOMContentLoaded', () => {
    bindBarcodeScanInput('xk-scan', code => { xkAddByCode(code); document.getElementById('xk-scan').value = ''; });
  });
}

// ═══ NHẬP KHO ═══
function nkAddRow() {
  _nkRowN++;
  const id = 'nk' + _nkRowN;
  const div = document.createElement('div');
  div.className = 'kp-row';
  div.id = id;
  div.innerHTML = `
    <div class="flex justify-between items-center mb-2">
      <span class="text-xs font-bold text-gray-400">Món #${_nkRowN}</span>
      <button onclick="document.getElementById('${id}').remove()" class="text-red-500 text-xs font-bold">✕ Bỏ</button>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
      <div class="col-span-2"><span class="kp-lbl">Tên hàng *</span><input class="input-ios w-full nk-ten"></div>
      <div><span class="kp-lbl">Loại vàng</span><input class="input-ios w-full nk-loaivang"></div>
      <div><span class="kp-lbl">Tuổi (HLV)</span><input class="input-ios w-full nk-tuoi"></div>
      <div><span class="kp-lbl">Trọng lượng</span><input type="number" step="0.001" class="input-ios w-full nk-tl"></div>
      <div><span class="kp-lbl">KL đá</span><input type="number" step="0.001" class="input-ios w-full nk-klda" value="0"></div>
      <div><span class="kp-lbl">Đơn vị</span><input class="input-ios w-full nk-donvi" value="Chỉ"></div>
      <div><span class="kp-lbl">Giá vốn (đ) *</span><input type="number" class="input-ios w-full nk-giavon"></div>
      <div><span class="kp-lbl">Tiền công (đ)</span><input type="number" class="input-ios w-full nk-tiencong" value="0"></div>
      <div><span class="kp-lbl">Tiền đá (đ)</span><input type="number" class="input-ios w-full nk-tienda" value="0"></div>
    </div>`;
  document.getElementById('nk-rows').appendChild(div);
}

// ═══ LẬP PHIẾU ═══
async function submitPhieu() {
  const msg = document.getElementById('f-msg');
  const payload = {
    ly_do: document.getElementById('f-lydo').value.trim(),
    nguoi_giao: document.getElementById('f-nguoigiao').value.trim(),
    nguoi_nhan: document.getElementById('f-nguoinhan').value.trim(),
    ghi_chu: document.getElementById('f-ghichu').value.trim(),
  };
  let url;
  if (_tab === 'xuat') {
    if (!_xkItems.length) { msg.textContent = '⚠️ Chưa có món nào.'; msg.className = 'text-sm text-amber-600'; return; }
    payload.items = _xkItems.map(it => ({ product_id: it.product_id }));
    url = '/api/kho-phieu/xuat';
  } else {
    const rows = [...document.querySelectorAll('#nk-rows .kp-row')];
    if (!rows.length) { msg.textContent = '⚠️ Chưa có món nào.'; msg.className = 'text-sm text-amber-600'; return; }
    const items = [];
    for (const r of rows) {
      const ten = r.querySelector('.nk-ten').value.trim();
      const giaVon = parseFloat(r.querySelector('.nk-giavon').value) || 0;
      if (!ten) { msg.textContent = '⚠️ Có dòng chưa nhập Tên hàng.'; msg.className = 'text-sm text-amber-600'; return; }
      if (giaVon <= 0) { msg.textContent = `⚠️ "${ten}" chưa có Giá vốn (bắt buộc).`; msg.className = 'text-sm text-amber-600'; return; }
      items.push({
        ten_hang: ten, loai_vang: r.querySelector('.nk-loaivang').value.trim(),
        tuoi: r.querySelector('.nk-tuoi').value.trim(),
        trong_luong: parseFloat(r.querySelector('.nk-tl').value) || 0,
        kl_da: parseFloat(r.querySelector('.nk-klda').value) || 0,
        don_vi: r.querySelector('.nk-donvi').value.trim() || 'Chỉ',
        gia_von: giaVon,
        tien_cong: parseFloat(r.querySelector('.nk-tiencong').value) || 0,
        tien_da: parseFloat(r.querySelector('.nk-tienda').value) || 0,
      });
    }
    payload.items = items;
    url = '/api/kho-phieu/nhap';
  }
  msg.textContent = '⏳ Đang lưu...'; msg.className = 'text-sm text-gray-500';
  const doSubmit = async (pin) => {
    try {
      const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin, ...payload }) });
      const data = await res.json();
      if (data.success) {
        msg.innerHTML = `✅ Đã lập phiếu <strong>${data.ma_phieu}</strong>.<br>
          <span class="inline-flex flex-wrap items-center gap-2 mt-1">
            <a href="/kho-phieu/${data.id}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In phiếu</a>
            <button onclick="printRemote('/kho-phieu/${data.id}/print', this)" class="tkt-act tkt-amber" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>
          </span>`;
        msg.className = 'text-sm text-green-700';
        _xkItems = []; xkRender();
        document.getElementById('nk-rows').innerHTML = '';
        ['f-lydo', 'f-nguoigiao', 'f-nguoinhan', 'f-ghichu'].forEach(id => document.getElementById(id).value = '');
        loadDanhSach(null); loadXkProducts();
      } else if (data.error === 'forbidden_role') {
        askPin('Xác nhận lập phiếu kho', p2 => doSubmit(p2));
      } else {
        msg.textContent = '❌ ' + (data.error === 'vi_pham_quy_dinh' && data.message ? data.message : _khoErrLabel(data.error)); msg.className = 'text-sm text-red-600 font-semibold';
      }
    } catch (e) { msg.textContent = '❌ Lỗi: ' + e.message; msg.className = 'text-sm text-red-600'; }
  };
  doSubmit(null);
}
function _khoErrLabel(err) {
  if (!err) return 'Lỗi không rõ';
  if (err === 'thieu_gia_von') return 'Có món chưa nhập Giá vốn (bắt buộc).';
  if (err === 'thieu_ten_hang') return 'Có món chưa nhập Tên hàng.';
  if (err === 'thieu_hang') return 'Chưa có món nào.';
  if (err.startsWith('san_pham_khong_con_hang:')) return 'Mã "' + err.split(':')[1] + '" không còn trong kho (đã xuất/bán).';
  return err;
}

// ═══ DANH SÁCH GẦN ĐÂY ═══
async function loadDanhSach(loai) {
  ['all', 'xuat', 'nhap'].forEach(k => document.getElementById('ds-filter-' + k).classList.toggle('bg-amber-100', (loai || 'all') === k));
  const url = loai ? '/api/kho-phieu?loai=' + loai : '/api/kho-phieu';
  const d = await (await fetch(url)).json();
  const rows = d.phieus || [];
  document.getElementById('ds-list').innerHTML = rows.map(p => {
    const badge = p.loai === 'xuat' ? '<span class="text-[11px] font-bold px-2 py-0.5 rounded-full" style="background:#fee2e2;color:#b91c1c">XUẤT</span>'
                                     : '<span class="text-[11px] font-bold px-2 py-0.5 rounded-full" style="background:#dcfce7;color:#166534">NHẬP</span>';
    return `<div class="rounded-xl border border-gray-100 p-3">
      <div class="flex items-center gap-2 flex-wrap">
        ${badge}
        <span class="font-mono font-bold text-sm">${p.ma_phieu}</span>
        <span class="text-xs text-gray-400">${(p.ngay || '').split(' ')[0]}</span>
        <span class="text-xs text-gray-500 flex-1 min-w-[8rem]">${p.ly_do || ''}</span>
        <span class="text-xs font-semibold">${p.so_mon} món · ${p.tong_vang100} chỉ vàng ta</span>
      </div>
      <div class="flex items-center gap-2 flex-wrap mt-2">
        <a href="/kho-phieu/${p.id}/print" target="_blank" class="tkt-act tkt-amber">🖨️ In</a>
        <button onclick="printRemote('/kho-phieu/${p.id}/print', this)" class="tkt-act tkt-amber" title="Gửi in thẳng ra máy in ở quầy — dùng được từ điện thoại">📠 In tại quầy</button>
        <button onclick="xoaPhieuKho(${p.id}, '${p.ma_phieu}')" class="tkt-act tkt-red">🗑️ Xóa</button>
      </div>
    </div>`;
  }).join('') || '<div class="text-center text-gray-300 py-6 text-sm">Chưa có phiếu nào</div>';
}
function xoaPhieuKho(id, ma) {
  askPin({ title: '🗑️ Xóa phiếu ' + ma, message: 'Chỉ Giám đốc/Phó GĐ. Hoàn tồn kho nếu là phiếu xuất; xóa hẳn sản phẩm nếu là phiếu nhập chưa dùng.' }, async pin => {
    const res = await fetch('/api/kho-phieu/' + id, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin }) });
    const d = await res.json();
    if (d.success) { dongPin(); loadDanhSach(null); loadXkProducts(); }
    else pinLoi(_khoErrLabel(d.error) || '❌ Xóa thất bại');
  });
}

switchTab('xuat');
loadXkProducts();
loadDanhSach(null);
</script>
{% endblock %}