{% extends "base.html" %}
{% block title %}Đại lý & Hợp đồng — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Đại lý & Hợp đồng mua bán{% endblock %}

{% block content %}

<div class="ios-card p-4 sm:p-5">
  <div class="font-bold text-gray-800 mb-1">🏭 Thông tin pháp lý đại lý</div>
  <p class="text-xs text-gray-400 mb-3">"Đại lý" ở đây là nhà cung cấp / xưởng gia công lớn (mở rộng từ danh sách
    NSX/NPP sẵn có ở trang Tồn kho) — bổ sung Mã số thuế, người đại diện để in hợp đồng đúng chuẩn.
    Muốn thêm đại lý mới, tạo NSX/NPP mới ở trang Tồn kho trước.</p>
  <div id="dl-list" class="space-y-2"></div>
</div>

<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="font-bold text-gray-800 mb-1">📄 Hợp đồng mua bán</div>
  <p class="text-xs text-gray-400 mb-3">Hợp đồng khung (nguyên tắc) với 1 đại lý — quy định điều khoản chung,
    hiệu lực lâu dài. Mỗi lần nhập/xuất hàng thật vẫn lập Phiếu Mua Hàng như bình thường ở trang Mua hàng.</p>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <div><label class="text-xs font-bold text-gray-500">Đại lý</label>
      <select id="f-manufacturer" class="input-ios w-full"></select></div>
    <div><label class="text-xs font-bold text-gray-500">Vai trò của tiệm</label>
      <select id="f-vaitro" class="input-ios w-full">
        <option value="mua">Tiệm là Bên Mua</option>
        <option value="ban">Tiệm là Bên Bán</option>
        <option value="ca_hai">Cả hai chiều (mua & bán)</option>
      </select></div>
    <div><label class="text-xs font-bold text-gray-500">Ngày ký</label>
      <input id="f-ngayky" type="date" class="input-ios w-full"></div>
    <div><label class="text-xs font-bold text-gray-500">Hiệu lực từ</label>
      <input id="f-hieuluc" type="date" class="input-ios w-full"></div>
    <div><label class="text-xs font-bold text-gray-500">Hết hạn (bỏ trống = vô thời hạn)</label>
      <input id="f-hethan" type="date" class="input-ios w-full"></div>
    <div><label class="text-xs font-bold text-gray-500">Đại diện phía tiệm</label>
      <input id="f-daidien" class="input-ios w-full" placeholder="VD: Nguyễn Gia Chuyên"></div>
    <div><label class="text-xs font-bold text-gray-500">Chức vụ</label>
      <input id="f-chucvu" class="input-ios w-full" placeholder="VD: Giám đốc"></div>
  </div>

  <div class="mt-3">
    <label class="text-xs font-bold text-gray-500">Điều 1 — Đối tượng hợp đồng</label>
    <textarea id="f-doituong" rows="2" class="input-ios w-full" placeholder="VD: Bên Bán cung cấp trang sức vàng theo đơn đặt hàng từng thời điểm; Bên Mua bán nguyên liệu vàng cho Bên Bán khi có nhu cầu."></textarea>
  </div>
  <div class="mt-2">
    <label class="text-xs font-bold text-gray-500">Điều 2 — Giá và phương thức thanh toán</label>
    <textarea id="f-giatt" rows="2" class="input-ios w-full" placeholder="VD: Đơn giá theo bảng giá công bố tại thời điểm giao dịch. Thanh toán bằng tiền mặt hoặc chuyển khoản, chậm trả tính lãi 0,05%/ngày."></textarea>
  </div>
  <div class="mt-2">
    <label class="text-xs font-bold text-gray-500">Điều 4 — Điều khoản khác (không bắt buộc)</label>
    <textarea id="f-khac" rows="3" class="input-ios w-full" placeholder="Chất lượng hàng hóa, giao nhận, quyền nghĩa vụ 2 bên, chấm dứt hợp đồng, bảo mật thông tin..."></textarea>
  </div>
  <div class="mt-2">
    <label class="text-xs font-bold text-gray-500">Ghi chú nội bộ</label>
    <input id="f-ghichu" class="input-ios w-full"></div>

  <div class="flex items-center justify-between mt-4 pt-3 border-t">
    <span id="hd-edit-banner" class="hidden text-xs font-bold text-amber-700">✏️ Đang sửa hợp đồng #<span id="hd-edit-id"></span></span>
    <div class="flex gap-2 ml-auto">
      <button id="hd-cancel-btn" onclick="huyEditHopDong()" class="hidden text-sm font-bold text-gray-500 px-3">Hủy</button>
      <button onclick="luuHopDong()" id="btn-luu-hd" class="btn-ios btn-ios-gold px-6 py-2.5">💾 Lập hợp đồng</button>
    </div>
  </div>
  <p id="hd-msg" class="text-sm mt-2"></p>
</div>

<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="font-bold text-gray-800 mb-3">📋 Hợp đồng đã lập</div>
  <div id="hd-list" class="space-y-2"></div>
</div>

<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="font-bold text-gray-800 mb-1">🧮 Biên bản xác nhận và cấn trừ công nợ</div>
  <p class="text-xs text-gray-400 mb-3">Đối chiếu công nợ định kỳ (theo bảng kê đại lý gửi + sổ sách của tiệm) —
    app KHÔNG tự tính được số liệu (không có dữ liệu giao dịch với đại lý), chỉ giúp <b>nhập tay đúng chuẩn</b>
    + tự tính Số dư cuối kỳ + tự gợi ý Số dư đầu kỳ từ kỳ trướ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">Đại lý</label>
      <select id="cn-manufacturer" class="input-ios w-full" onchange="cnGoiYSoDu()"></select></div>
    <div></div>
    <div style="align-self:end">
      <input id="cn-tungay" type="date" class="input-ios w-full" onchange="cnGoiYSoDu()" placeholder="Từ ngày" aria-label="Từ ngày"></div>
    <div style="align-self:end">
      <input id="cn-denngay" type="date" class="input-ios w-full" placeholder="Đến hết ngày" aria-label="Đến hết ngày"></div>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full text-xs" id="cn-table">
      <thead>
        <tr class="text-gray-500">
          <th class="text-left py-1 pr-2" style="min-width:170px">Diễn giải</th>
          <th class="py-1 px-1">Số tiền</th>
          <th class="py-1 px-1">Tiền công</th>
          <th class="py-1 px-1">Giá trị vàng</th>
          <th class="py-1 px-1">KL vàng Q10 (phân)</th>
        </tr>
      </thead>
      <tbody id="cn-rows"></tbody>
      <tfoot>
        <tr class="font-bold border-t-2">
          <td class="py-1 pr-2">Số dư cuối kỳ (tự tính)</td>
          <td class="text-center" id="cn-tt-tien">0</td>
          <td class="text-center" id="cn-tt-cong">0</td>
          <td class="text-center" id="cn-tt-vang">0</td>
          <td class="text-center" id="cn-tt-klvang">0</td>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="mt-3">
    <label class="text-xs font-bold text-gray-500">Ghi chú</label>
    <input id="cn-ghichu" class="input-ios w-full"></div>

  <div class="flex items-center justify-between mt-4 pt-3 border-t">
    <span id="cn-edit-banner" class="hidden text-xs font-bold text-amber-700">✏️ Đang sửa biên bản #<span id="cn-edit-id"></span></span>
    <div class="flex gap-2 ml-auto">
      <button id="cn-cancel-btn" onclick="huyEditCongNo()" class="hidden text-sm font-bold text-gray-500 px-3">Hủy</button>
      <button onclick="luuCongNo()" id="btn-luu-cn" class="btn-ios btn-ios-gold px-6 py-2.5">💾 Lập biên bản</button>
    </div>
  </div>
  <p id="cn-msg" class="text-sm mt-2"></p>
</div>

<div class="ios-card p-4 sm:p-5 mt-4">
  <div class="font-bold text-gray-800 mb-3">📋 Biên bản đã lập</div>
  <div id="cn-list" class="space-y-2"></div>
</div>

<style>
  .dl-row, .hd-row, .cn-row { border:1px solid #eee; border-radius:14px; padding:10px 12px; }
  .hd-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
  .hd-badge.ok { background:#dcfce7; color:#166534; }
  .hd-badge.het { background:#fef3c7; color:#92400e; }
  .hd-badge.huy { background:#fee2e2; color:#991b1b; }
  #cn-table input { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:3px 5px; text-align:right; font-size:12px; }
</style>

<script>
let _dlManufacturers = [];
let _dlEditingId = null;
let _hdEditingId = null;

async function loadManufacturers() {
  const r = await fetch('/api/dai-ly/manufacturers');
  const d = await r.json();
  _dlManufacturers = d.items || [];
  const opts = _dlManufacturers.map(m => `<option value="${m.id}">${_escNk(m.ten)}</option>`).join('');
  document.getElementById('f-manufacturer').innerHTML = opts;
  document.getElementById('cn-manufacturer').innerHTML = opts;
  renderDlList();
}

function renderDlList() {
  const box = document.getElementById('dl-list');
  if (!_dlManufacturers.length) { box.innerHTML = '<p class="text-sm text-gray-400">Chưa có NSX/NPP nào — tạo ở trang Tồn kho trước.</p>'; return; }
  box.innerHTML = _dlManufacturers.map(m => `
    <div class="dl-row flex items-center justify-between gap-2 flex-wrap">
      <div>
        <div class="font-bold text-gray-800">${_escNk(m.ten)}</div>
        <div class="text-xs text-gray-500">${m.mst ? 'MST: ' + _escNk(m.mst) : '<span class="text-amber-600">Chưa có MST</span>'}
          ${m.nguoi_dai_dien ? ' · ĐD: ' + _escNk(m.nguoi_dai_dien) + (m.chuc_vu_dd ? ' (' + _escNk(m.chuc_vu_dd) + ')' : '') : ''}</div>
      </div>
      <button onclick="openEditDaiLy(${m.id})" class="tkt-act tkt-blue">✏️ Sửa thông tin</button>
    </div>`).join('');
}

function openEditDaiLy(id) {
  const m = _dlManufacturers.find(x => x.id === id);
  if (!m) return;
  _dlEditingId = id;
  const ten = prompt('Tên đại lý:', m.ten); if (ten === null) return;
  const dia_chi = prompt('Địa chỉ:', m.dia_chi || '') || '';
  const mst = prompt('Mã số thuế:', m.mst || '') || '';
  const nguoi_dai_dien = prompt('Người đại diện:', m.nguoi_dai_dien || '') || '';
  const chuc_vu_dd = prompt('Chức vụ người đại diện:', m.chuc_vu_dd || '') || '';
  const dien_thoai = prompt('Điện thoại:', m.dien_thoai || '') || '';
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Cập nhật thông tin pháp lý đại lý' }, async pin => {
    const r = await fetch(`/api/dai-ly/manufacturers/${id}`, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ten, dia_chi, mst, nguoi_dai_dien, chuc_vu_dd, dien_thoai, pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? '❌ Chỉ GĐ/PGĐ mới sửa được' : '❌ ' + (d.error || 'Lỗi')); return; }
    await loadManufacturers();
  });
}

function luuHopDong() {
  const manufacturer_id = document.getElementById('f-manufacturer').value;
  if (!manufacturer_id) { document.getElementById('hd-msg').textContent = '⚠️ Chọn đại lý trước.'; return; }
  const payload = {
    manufacturer_id: +manufacturer_id,
    vai_tro_tiem: document.getElementById('f-vaitro').value,
    ngay_ky: document.getElementById('f-ngayky').value,
    ngay_hieu_luc_tu: document.getElementById('f-hieuluc').value,
    ngay_het_han: document.getElementById('f-hethan').value,
    doi_tuong_hop_dong: document.getElementById('f-doituong').value.trim(),
    gia_va_thanh_toan: document.getElementById('f-giatt').value.trim(),
    dieu_khoan_khac: document.getElementById('f-khac').value.trim(),
    dai_dien_tiem: document.getElementById('f-daidien').value.trim(),
    chuc_vu_tiem: document.getElementById('f-chucvu').value.trim(),
    ghi_chu: document.getElementById('f-ghichu').value.trim(),
  };
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: _hdEditingId ? 'Sửa hợp đồng' : 'Lập hợp đồng mới' }, async pin => {
    payload.pin = pin;
    const url = _hdEditingId ? `/api/dai-ly/hop-dong/${_hdEditingId}` : '/api/dai-ly/hop-dong';
    const method = _hdEditingId ? 'PUT' : 'POST';
    const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? '❌ Chỉ GĐ/PGĐ mới thao tác được' : '❌ ' + (d.error || 'Lỗi')); return; }
    document.getElementById('hd-msg').innerHTML = `<span class="text-green-600 font-bold">✅ Đã ${_hdEditingId ? 'cập nhật' : 'lập'} hợp đồng ${d.ma_hop_dong || ''}.
      <a href="/dai-ly/hop-dong/${d.id || _hdEditingId}/print" target="_blank" class="underline">🖨️ In</a></span>`;
    huyEditHopDong();
    loadHopDong();
  });
}

function huyEditHopDong() {
  _hdEditingId = null;
  ['f-doituong','f-giatt','f-khac','f-ghichu','f-daidien','f-chucvu','f-ngayky','f-hieuluc','f-hethan'].forEach(id => document.getElementById(id).value = '');
  document.getElementById('f-vaitro').value = 'mua';
  document.getElementById('hd-edit-banner').classList.add('hidden');
  document.getElementById('hd-cancel-btn').classList.add('hidden');
  document.getElementById('btn-luu-hd').textContent = '💾 Lập hợp đồng';
}

async function loadHopDong() {
  const r = await fetch('/api/dai-ly/hop-dong');
  const d = await r.json();
  const items = d.items || [];
  const box = document.getElementById('hd-list');
  if (!items.length) { box.innerHTML = '<p class="text-sm text-gray-400">Chưa có hợp đồng nào.</p>'; return; }
  box.innerHTML = items.map(h => {
    let badge = '<span class="hd-badge ok">Hiệu lực</span>';
    if (h.trang_thai === 'huy') badge = '<span class="hd-badge huy">Đã hủy</span>';
    else if (h.da_het_han) badge = '<span class="hd-badge het">Đã hết hạn</span>';
    return `<div class="hd-row">
      <div class="flex items-center justify-between flex-wrap gap-1">
        <div><span class="font-mono font-bold">${h.ma_hop_dong}</span> — ${h.ten_dai_ly} ${badge}</div>
        <div class="text-xs text-gray-400">${h.ngay_ky || ''}</div>
      </div>
      <div class="text-xs text-gray-500 mt-1">${(h.doi_tuong_hop_dong || '').slice(0, 120)}</div>
      <div class="flex gap-2 mt-2 flex-wrap">
        <a href="/dai-ly/hop-dong/${h.id}/print" target="_blank" class="tkt-act tkt-blue">🖨️ In</a>
        <button onclick="printRemote('/dai-ly/hop-dong/${h.id}/print', this)" class="tkt-act tkt-indigo">📠 In tại quầy</button>
        <button onclick="editHopDong(${h.id})" class="tkt-act tkt-amber">✏️ Sửa</button>
        ${h.trang_thai !== 'huy' ? `<button onclick="huyBoHopDong(${h.id})" class="tkt-act tkt-orange">🚫 Hủy hợp đồng</button>` : ''}
        <button onclick="xoaHopDong(${h.id})" class="tkt-act tkt-red">🗑️ Xóa</button>
      </div>
    </div>`;
  }).join('');
  window._hdCache = items;
}

function editHopDong(id) {
  const h = (window._hdCache || []).find(x => x.id === id);
  if (!h) return;
  _hdEditingId = id;
  document.getElementById('f-manufacturer').value = h.manufacturer_id;
  document.getElementById('f-vaitro').value = h.vai_tro_tiem;
  fpSet('f-ngayky', h.ngay_ky || '');
  fpSet('f-hieuluc', h.ngay_hieu_luc_tu || '');
  fpSet('f-hethan', h.ngay_het_han || '');
  document.getElementById('f-doituong').value = h.doi_tuong_hop_dong || '';
  document.getElementById('f-giatt').value = h.gia_va_thanh_toan || '';
  document.getElementById('f-khac').value = h.dieu_khoan_khac || '';
  document.getElementById('f-daidien').value = h.dai_dien_tiem || '';
  document.getElementById('f-chucvu').value = h.chuc_vu_tiem || '';
  document.getElementById('f-ghichu').value = h.ghi_chu || '';
  document.getElementById('hd-edit-banner').classList.remove('hidden');
  document.getElementById('hd-edit-id').textContent = id;
  document.getElementById('hd-cancel-btn').classList.remove('hidden');
  document.getElementById('btn-luu-hd').textContent = '💾 Cập nhật hợp đồng';
  document.querySelector('.ios-card:nth-child(2)').scrollIntoView({ behavior: 'smooth' });
}

function huyBoHopDong(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Đánh dấu HỦY hợp đồng' }, async pin => {
    const r = await fetch(`/api/dai-ly/hop-dong/${id}`, {
      method: 'PUT', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ trang_thai: 'huy', pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadHopDong();
  });
}

function xoaHopDong(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Xóa hợp đồng — không hoàn tác' }, async pin => {
    const r = await fetch(`/api/dai-ly/hop-dong/${id}`, {
      method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadHopDong();
  });
}

// ── Biên bản xác nhận và cấn trừ công nợ ──
const CN_ROWS = [
  ['so_du_dau_ky', 'Số dư đầu kỳ'],
  ['ban_hang', 'Phát sinh bán hàng trong kỳ'],
  ['tra_lai', 'Nhập hàng trả lại trong kỳ'],
  ['nhan_tt', 'Nhận tiền thanh toán trong kỳ'],
  ['mua_hang', 'Phát sinh mua hàng trong kỳ'],
  ['tra_tt', 'Thanh toán hàng mua trong kỳ'],
  ['tra_hang_mua', 'Trả hàng mua trong kỳ'],
  ['chenh_lech', 'Chênh lệch thanh toán'],
];
const CN_DAU = { so_du_dau_ky: 1, ban_hang: 1, tra_lai: -1, nhan_tt: -1, mua_hang: -1, tra_tt: 1, tra_hang_mua: 1, chenh_lech: -1 };
let _cnEditingId = null;

function renderCnRows() {
  document.getElementById('cn-rows').innerHTML = CN_ROWS.map(([key, label]) => `
    <tr class="border-t">
      <td class="py-1 pr-2">${label}</td>
      <td class="py-1 px-0.5"><input data-row="${key}" data-f="tien" oninput="cnRecalc()" value="0"></td>
      <td class="py-1 px-0.5"><input data-row="${key}" data-f="cong" oninput="cnRecalc()" value="0"></td>
      <td class="py-1 px-0.5"><input data-row="${key}" data-f="vang" oninput="cnRecalc()" value="0"></td>
      <td class="py-1 px-0.5"><input data-row="${key}" data-f="klvang" oninput="cnRecalc()" value="0"></td>
    </tr>`).join('');
}

function cnGetChiTiet() {
  const out = {};
  CN_ROWS.forEach(([key]) => {
    out[key] = {};
    ['tien', 'cong', 'vang', 'klvang'].forEach(f => {
      const el = document.querySelector(`#cn-rows input[data-row="${key}"][data-f="${f}"]`);
      out[key][f] = parseFloat((el && el.value) || 0) || 0;
    });
  });
  return out;
}

function cnSetChiTiet(chiTiet) {
  CN_ROWS.forEach(([key]) => {
    ['tien', 'cong', 'vang', 'klvang'].forEach(f => {
      const el = document.querySelector(`#cn-rows input[data-row="${key}"][data-f="${f}"]`);
      if (el) el.value = (chiTiet[key] && chiTiet[key][f]) || 0;
    });
  });
  cnRecalc();
}

function cnRecalc() {
  const ct = cnGetChiTiet();
  const tt = { tien: 0, cong: 0, vang: 0, klvang: 0 };
  CN_ROWS.forEach(([key]) => {
    const dau = CN_DAU[key];
    ['tien', 'cong', 'vang', 'klvang'].forEach(f => { tt[f] += dau * (ct[key][f] || 0); });
  });
  document.getElementById('cn-tt-tien').textContent = tt.tien.toLocaleString('vi-VN');
  document.getElementById('cn-tt-cong').textContent = tt.cong.toLocaleString('vi-VN');
  document.getElementById('cn-tt-vang').textContent = tt.vang.toLocaleString('vi-VN');
  document.getElementById('cn-tt-klvang').textContent = tt.klvang.toLocaleString('vi-VN', { maximumFractionDigits: 3 });
}

async function cnGoiYSoDu() {
  if (_cnEditingId) return;   // đang sửa biên bản cũ thì giữ nguyên số đã lưu, không ghi đè
  const mfId = document.getElementById('cn-manufacturer').value;
  const tuNgay = document.getElementById('cn-tungay').value;
  if (!mfId || !tuNgay) return;
  const r = await fetch(`/api/dai-ly/cong-no/goi-y?manufacturer_id=${mfId}&truoc_ngay=${tuNgay}`);
  const d = await r.json();
  const so_du = d.so_du || { tien: 0, cong: 0, vang: 0, klvang: 0 };
  ['tien', 'cong', 'vang', 'klvang'].forEach(f => {
    const el = document.querySelector(`#cn-rows input[data-row="so_du_dau_ky"][data-f="${f}"]`);
    if (el) el.value = so_du[f] || 0;
  });
  cnRecalc();
}

function luuCongNo() {
  const manufacturer_id = document.getElementById('cn-manufacturer').value;
  const tu_ngay = document.getElementById('cn-tungay').value;
  const den_ngay = document.getElementById('cn-denngay').value;
  if (!manufacturer_id || !tu_ngay || !den_ngay) { document.getElementById('cn-msg').textContent = '⚠️ Chọn đại lý và đủ 2 mốc ngày.'; return; }
  const payload = { manufacturer_id: +manufacturer_id, tu_ngay, den_ngay, chi_tiet: cnGetChiTiet(),
                     ghi_chu: document.getElementById('cn-ghichu').value.trim() };
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: _cnEditingId ? 'Sửa biên bản' : 'Lập biên bản mới' }, async pin => {
    payload.pin = pin;
    const url = _cnEditingId ? `/api/dai-ly/cong-no/${_cnEditingId}` : '/api/dai-ly/cong-no';
    const method = _cnEditingId ? 'PUT' : 'POST';
    const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    const d = await r.json();
    if (!d.success) { pinLoi(d.error === 'forbidden_role' ? '❌ Chỉ GĐ/PGĐ mới thao tác được' : '❌ ' + (d.error || 'Lỗi')); return; }
    document.getElementById('cn-msg').innerHTML = `<span class="text-green-600 font-bold">✅ Đã ${_cnEditingId ? 'cập nhật' : 'lập'} biên bản ${d.ma_bien_ban || ''}.
      <a href="/dai-ly/cong-no/${d.id || _cnEditingId}/print" target="_blank" class="underline">🖨️ In</a></span>`;
    huyEditCongNo();
    loadCongNo();
  });
}

function huyEditCongNo() {
  _cnEditingId = null;
  document.getElementById('cn-tungay').value = '';
  document.getElementById('cn-denngay').value = '';
  document.getElementById('cn-ghichu').value = '';
  renderCnRows(); cnRecalc();
  document.getElementById('cn-edit-banner').classList.add('hidden');
  document.getElementById('cn-cancel-btn').classList.add('hidden');
  document.getElementById('btn-luu-cn').textContent = '💾 Lập biên bản';
}

async function loadCongNo() {
  const r = await fetch('/api/dai-ly/cong-no');
  const d = await r.json();
  const items = d.items || [];
  window._cnCache = items;
  const box = document.getElementById('cn-list');
  if (!items.length) { box.innerHTML = '<p class="text-sm text-gray-400">Chưa có biên bản nào.</p>'; return; }
  box.innerHTML = items.map(n => {
    const cong = n.so_du_cuoi_ky.cong, vang = n.so_du_cuoi_ky.vang;
    const ketLuan = (cong >= 0 ? 'Bên A thu Bên B' : 'Bên B thu Bên A') + ' công ' + Math.abs(cong).toLocaleString('vi-VN') +
                    'đ · ' + (vang >= 0 ? 'Bên A thu Bên B' : 'Bên B thu Bên A') + ' vàng ' + Math.abs(vang).toLocaleString('vi-VN') + 'đ';
    return `<div class="cn-row">
      <div class="flex items-center justify-between flex-wrap gap-1">
        <div><span class="font-mono font-bold">${n.ma_bien_ban}</span> — ${n.ten_dai_ly}</div>
        <div class="text-xs text-gray-400">${n.tu_ngay} → ${n.den_ngay}</div>
      </div>
      <div class="text-xs text-gray-500 mt-1">${ketLuan}</div>
      <div class="flex gap-2 mt-2 flex-wrap">
        <a href="/dai-ly/cong-no/${n.id}/print" target="_blank" class="tkt-act tkt-blue">🖨️ In</a>
        <button onclick="printRemote('/dai-ly/cong-no/${n.id}/print', this)" class="tkt-act tkt-indigo">📠 In tại quầy</button>
        <button onclick="editCongNo(${n.id})" class="tkt-act tkt-amber">✏️ Sửa</button>
        <button onclick="xoaCongNo(${n.id})" class="tkt-act tkt-red">🗑️ Xóa</button>
      </div>
    </div>`;
  }).join('');
}

function editCongNo(id) {
  const n = (window._cnCache || []).find(x => x.id === id);
  if (!n) return;
  _cnEditingId = id;
  document.getElementById('cn-manufacturer').value = n.manufacturer_id;
  fpSet('cn-tungay', n.tu_ngay || '');
  fpSet('cn-denngay', n.den_ngay || '');
  document.getElementById('cn-ghichu').value = n.ghi_chu || '';
  renderCnRows();
  cnSetChiTiet(n.chi_tiet);
  document.getElementById('cn-edit-banner').classList.remove('hidden');
  document.getElementById('cn-edit-id').textContent = id;
  document.getElementById('cn-cancel-btn').classList.remove('hidden');
  document.getElementById('btn-luu-cn').textContent = '💾 Cập nhật biên bản';
  document.getElementById('cn-table').scrollIntoView({ behavior: 'smooth' });
}

function xoaCongNo(id) {
  askPin({ title: '🔐 Xác nhận GĐ/PGĐ', label: 'Xóa biên bản — không hoàn tác' }, async pin => {
    const r = await fetch(`/api/dai-ly/cong-no/${id}`, {
      method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pin })
    });
    const d = await r.json();
    if (!d.success) { pinLoi('❌ ' + (d.error || 'Lỗi')); return; }
    loadCongNo();
  });
}

renderCnRows();
loadManufacturers();
loadHopDong();
loadCongNo();
</script>
{% endblock %}