{% extends "base.html" %}
{% block title %}Công thức tính giá — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Công thức tính giá{% endblock %}
{% block extra_style %}
.formula-input { font-family: 'Consolas', 'Courier New', monospace; }
{% endblock %}

{% block content %}

  <div class="ios-card p-5 space-y-3" style="border:1.5px solid #fde68a">
    <div class="flex justify-between items-start flex-wrap gap-3">
      <div>
        <h1 class="font-bold text-gray-800 text-lg">🧮 Công thức tính bảng giá vàng</h1>
        <p class="text-sm text-gray-500 mt-1 max-w-3xl">
          Đây là toàn bộ công thức hệ thống dùng để tính ra Giá Mua / Giá Bán / Giá Hội cho từng loại vàng,
          dựa trên 3 số liệu bạn nhập ở trang chủ: <strong>Giá ra</strong>, <strong>Chênh tròn</strong> và <strong>Biên độ</strong>.
          Bạn có thể chỉnh sửa trực tiếp từng công thức bên dưới và lưu lại — hoặc khôi phục về công thức gốc bất cứ lúc nào.
        </p>
      </div>
      <input id="pin-input" type="password" inputmode="numeric" maxlength="10" placeholder="Mã PIN để lưu..."
        class="input-ios text-sm font-bold text-center tracking-widest w-44">
    </div>

    <div id="meta-box" class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm"></div>

    <div class="ios-card p-3 text-xs text-gray-600 space-y-1.5" style="background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fde68a">
      <div><strong>📐 Biến có thể dùng trong công thức:</strong></div>
      <div class="flex flex-wrap gap-1.5">
        <code class="bg-white px-1.5 py-0.5 rounded border">gia_ra</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">chenh_tron</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">bien_do</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">gv</code> <span class="text-gray-400">(= gia_ra − chenh_tron, tức "giá vào")</span>
        <code class="bg-white px-1.5 py-0.5 rounded border">F7</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">E7</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">F13</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">E13</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">F20</code>
        <code class="bg-white px-1.5 py-0.5 rounded border">E20</code>
        <span class="text-gray-400">(các biến trung gian — định nghĩa ở khung dưới)</span>
      </div>
      <div>Phép toán hỗ trợ: <code class="bg-white px-1.5 py-0.5 rounded border">+ − * / ** %</code>, dấu ngoặc <code class="bg-white px-1.5 py-0.5 rounded border">( … )</code>
        và hàm <code class="bg-white px-1.5 py-0.5 rounded border">round(x)</code>. Kết quả Giá Mua / Giá Bán / Giá Hội cuối cùng sẽ luôn được hệ thống <strong>tự động làm tròn đến hàng chục</strong> (giống Excel), nên bạn không cần tự làm tròn trong công thức.</div>
    </div>
    <p id="top-msg" class="text-sm"></p>
  </div>

  <!-- Biến trung gian -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">🔧 Biến trung gian</div>
    <p class="px-5 pt-3 text-xs text-gray-400">Các "giá gốc" trung gian dùng làm nền cho nhiều loại vàng khác nhau — sửa ở đây sẽ ảnh hưởng tới mọi loại vàng tham chiếu tới biến đó.</p>
    <div id="intermediates-box" class="divide-y divide-gray-50 px-1 pb-2"></div>
  </div>

  <!-- Gia mua / ban -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">💰 Công thức Giá Mua / Giá Bán theo loại vàng <a href="/quan-ly-loai-vang" class="text-xs font-semibold text-amber-700 underline ml-2">☰ Thêm / bớt / đổi tên loại vàng</a></div>
    <div id="prices-box" class="divide-y divide-gray-50"></div>
  </div>

  <!-- Gia hoi -->
  <div class="ios-card overflow-hidden">
    <div class="px-5 py-3.5 font-extrabold text-gray-800" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">🏆 Công thức Giá Hội theo loại vàng</div>
    <div id="hoi-box" class="divide-y divide-gray-50"></div>
  </div>

  <!-- Xem truoc -->
  <div class="ios-card p-5 space-y-3">
    <div class="flex justify-between items-center flex-wrap gap-3">
      <div>
        <h2 class="font-bold text-gray-700">🔍 Xem trước kết quả tính</h2>
        <p class="text-xs text-gray-400 mt-0.5">Tính thử bảng giá với các công thức đang hiển thị bên trên (kể cả khi chưa lưu) — dùng số liệu Giá ra / Chênh tròn / Biên độ mới nhất của tiệm.</p>
      </div>
      <button onclick="previewCompute()" class="btn-ios btn-ios-gold px-5 py-2 text-sm whitespace-nowrap">▶️ Tính thử</button>
    </div>
    <div id="preview-box" class="overflow-x-auto"></div>
  </div>

  <div class="ios-card p-5 flex justify-between items-center flex-wrap gap-3" style="border:1.5px solid #fde68a">
    <div class="text-sm text-gray-500">Sau khi <strong>Lưu</strong> công thức, bấm đây để <strong>tính lại và áp dụng ngay</strong> vào bảng giá đang hiển thị (dùng Giá ra / Chênh tròn / Biên độ mới nhất). Nếu không, công thức mới chỉ có hiệu lực ở <strong>lần cập nhật giá tiếp theo</strong> ở trang chủ.</div>
    <button onclick="applyFormulas()" class="btn-ios btn-ios-gold px-6 py-2.5 text-sm whitespace-nowrap">✅ Áp dụng vào bảng giá hiện tại</button>
  </div>

  <div class="ios-card p-5 flex justify-between items-center flex-wrap gap-3">
    <div class="text-sm text-gray-500">Khôi phục <strong>toàn bộ</strong> công thức về mặc định gốc (đã dò ngược từ file Excel "Bảng Giá Vàng" — mọi chỉnh sửa hiện tại sẽ bị xóa).</div>
    <button onclick="resetAll()" class="btn-ios px-5 py-2 text-sm whitespace-nowrap" style="background:#fef2f2;color:#dc2626;border:1.5px solid #fecaca">↩️ Khôi phục toàn bộ về mặc định</button>
  </div>

  <!-- ── KẾT NỐI HÓA ĐƠN ĐIỆN TỬ ── -->
  <div class="ios-card p-5 space-y-3" style="border:1.5px solid #fde68a">
    <div>
      <h2 class="font-bold text-gray-700">🧾 Kết nối hóa đơn điện tử</h2>
      <p class="text-xs text-gray-400 mt-0.5">
        Nhập thông tin tài khoản API do nhà cung cấp hóa đơn điện tử (Viettel S-Invoice, MISA meInvoice, VNPT, MSInvoice...) cấp.
        Thông tin được lưu riêng trên máy chủ của tiệm, chỉ dùng để gửi dữ liệu hóa đơn khi anh bấm "Xuất hóa đơn điện tử" ở các phiếu bán/mua hàng.
        <strong>Anh tự điền — hệ thống không nhập hộ thông tin đăng nhập.</strong>
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Nhà cung cấp</label>
        <input id="ei-provider" type="text" placeholder="VD: MSInvoice / Viettel S-Invoice / MISA meInvoice"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Địa chỉ API (URL)</label>
        <input id="ei-api-url" type="text" placeholder="VD: https://hoadon.msinvoice.vn/api/..."
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Tài khoản / Mã số thuế</label>
        <input id="ei-username" type="text" placeholder="Tên đăng nhập hoặc MST"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Mật khẩu / Mã API (token)</label>
        <input id="ei-password" type="password" placeholder="••••••••" autocomplete="new-password"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Mẫu số hóa đơn</label>
        <input id="ei-invoice-form" type="text" placeholder="VD: 2"
          class="w-full input-ios">
        <p class="text-[11px] text-gray-400 mt-0.5">1 = HĐ GTGT · 2 = HĐ bán hàng · 6 = Phiếu xuất kho</p>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ký hiệu hóa đơn</label>
        <input id="ei-invoice-serial" type="text" placeholder="VD: 2C26MTH"
          class="w-full input-ios">
        <p class="text-[11px] text-gray-400 mt-0.5">
          Định dạng TT78/2021: <strong>[loại][C/K][năm][seller]</strong> — VD: <strong>2C26MTH</strong>
          (2 = bán hàng · C = có mã CQT · 26 = năm 2026 · MTH = 3 chữ đại diện người bán)
        </p>
      </div>
      <div class="sm:col-span-2">
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Số serial chứng thư số (dùng để ký hóa đơn)</label>
        <input id="ei-cert-serial" type="text" placeholder="VD: 01:23:45:67:89:AB:CD:EF (tra cứu trong phần mềm quản lý token)"
          class="w-full input-ios font-mono text-sm">
        <p class="text-[11px] text-gray-400 mt-0.5">Serial của chứng thư số đã đăng ký với IAM Software — anh tự tra cứu trong phần mềm quản lý token (VD: SafeNet Authentication Client, USB Token Manager). <strong>Mật khẩu chứng thư sẽ nhập riêng mỗi lần ký — không lưu tại đây.</strong></p>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Thuế suất mặc định</label>
        <select id="ei-tax-rate" class="w-full input-ios">
          <option value="KCT">KCT — Không chịu thuế</option>
          <option value="0">0%</option>
          <option value="5">5%</option>
          <option value="8">8%</option>
          <option value="10">10%</option>
          <option value="KKKNT">KKKNT — Không kê khai thuế</option>
        </select>
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Hình thức thanh toán mặc định</label>
        <select id="ei-payment-instrument" class="w-full input-ios">
          <option value="PiCash">Tiền mặt</option>
          <option value="PiWireTransfer">Chuyển khoản</option>
          <option value="PiCashOrWireTransfer">Tiền mặt / Chuyển khoản</option>
          <option value="PmtClearingDebt">Đối trừ công nợ</option>
        </select>
      </div>
    </div>
    <div class="flex items-center gap-3 flex-wrap">
      <button onclick="saveEinvoiceConfig()" class="btn-ios btn-ios-gold px-6 py-2.5 text-sm">
        💾 Lưu thông tin kết nối
      </button>
      <button onclick="testEinvoiceConfig()" class="btn-ios btn-ios-secondary text-amber-700 px-5 py-2.5 text-sm">
        🔌 Kiểm tra kết nối
      </button>
      <span id="ei-msg" class="text-sm"></span>
    </div>
    <p class="text-xs text-gray-400">
      💡 Sau khi lưu, nút <strong>"🧾 Xuất hóa đơn điện tử"</strong> sẽ xuất hiện trên các phiếu bán hàng / mua hàng để gửi dữ liệu sang hệ thống hóa đơn điện tử của nhà cung cấp.
      Mỗi nhà cung cấp có chuẩn kết nối riêng — nếu anh chưa rõ địa chỉ API/định dạng dữ liệu, hãy liên hệ bộ phận hỗ trợ kỹ thuật của nhà cung cấp để được cấp đầy đủ thông tin tích hợp.
    </p>

    <!-- ── KIỂM TRA MẪU SỐ / KÝ HIỆU VỚI CƠ QUAN THUẾ ── -->
    <div class="border-t pt-3 mt-1">
      <h3 class="font-semibold text-gray-700 text-sm mb-1">📋 Kiểm tra mẫu số / ký hiệu hóa đơn với cơ quan thuế (CQT)</h3>
      <p class="text-xs text-gray-400 mb-2">
        Tra lịch sử đăng ký/thay đổi thông tin sử dụng hóa đơn điện tử đã gửi CQT qua nhà cung cấp,
        để biết mẫu số/ký hiệu nào đã được CQT chấp nhận và có thể dùng để xuất hóa đơn.
      </p>
      <div class="flex flex-wrap items-end gap-3 mb-2">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Mẫu số</label>
          <input id="ei-check-form" type="text" placeholder="VD: 2" class="input-ios" style="width:5rem">
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Ký hiệu</label>
          <input id="ei-check-serial" type="text" placeholder="VD: 2C26MTH" class="input-ios" style="width:9rem">
        </div>
        <button onclick="checkEinvoiceSerial()" class="btn-ios btn-ios-secondary text-amber-700 px-5 py-2.5 text-sm">
          🔍 Kiểm tra
        </button>
      </div>
      <div id="ei-check-result"></div>
      <div id="ei-registrations-table"></div>
    </div>
  </div>

  <!-- ── TRA CỨU TÊN CHỦ TÀI KHOẢN NGÂN HÀNG (VietQR) ── -->
  <div class="ios-card p-5 space-y-3" style="border:1.5px solid #fde68a">
    <div>
      <h2 class="font-bold text-gray-700">🔎 Tra cứu tên chủ tài khoản ngân hàng (VietQR)</h2>
      <p class="text-xs text-gray-400 mt-0.5">
        Khi nhập số tài khoản ở phiếu mua hàng (hình thức chuyển khoản), hệ thống sẽ tự tra cứu và điền tên chủ tài khoản — không cần gõ tay.
        Cần đăng ký tài khoản <strong>VietQR Pro</strong> miễn phí tại <strong>my.vietqr.io</strong> để lấy Client ID + API Key.
        <strong>Anh tự điền — hệ thống không nhập hộ thông tin đăng nhập.</strong>
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">Client ID</label>
        <input id="bl-client-id" type="text" placeholder="Client ID (my.vietqr.io)"
          class="w-full input-ios">
      </div>
      <div>
        <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">API Key</label>
        <input id="bl-api-key" type="password" placeholder="••••••••" autocomplete="new-password"
          class="w-full input-ios">
      </div>
    </div>
    <div class="flex items-center gap-3 flex-wrap">
      <button onclick="saveBankLookupConfig()" class="btn-ios btn-ios-gold px-6 py-2.5 text-sm">
        💾 Lưu thông tin kết nối
      </button>
      <span id="bl-msg" class="text-sm"></span>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
const PIN_KEY = 'vang_admin_pin';
const fmt = n => Number(n||0).toLocaleString('vi-VN');
document.getElementById('pin-input').value = localStorage.getItem(PIN_KEY) || '';
document.getElementById('pin-input').addEventListener('input', e => localStorage.setItem(PIN_KEY, e.target.value.trim()));
function getPin() { return document.getElementById('pin-input').value.trim(); }

let currentMeta = null;
let currentFormulas = null;

const INTERMEDIATE_LABELS = {
  F7:  'F7 — giá BÁN gốc của vàng 9999',
  E7:  'E7 — giá MUA gốc của vàng 9999',
  F13: 'F13 — giá BÁN gốc của vàng 750 (18K)',
  E13: 'E13 — giá MUA gốc của vàng 750 (18K)',
  F20: 'F20 — giá BÁN gốc của vàng 10K',
  E20: 'E20 — giá MUA gốc của vàng 10K',
};

function escHtml(s) {
  return String(s == null ? '' : s)
    .replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function rowEl(khoa) {
  return [...document.querySelectorAll('[data-khoa]')].find(el => el.dataset.khoa === khoa);
}

function customBadge(info) {
  return info.is_custom
    ? `<span class="text-[10px] bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full font-semibold whitespace-nowrap">đã chỉnh sửa${info.cap_nhat ? ' · ' + escHtml(info.cap_nhat) : ''}</span>`
    : '';
}

function defaultHint(info) {
  return info.is_custom
    ? `<span class="text-xs text-gray-400">Mặc định: <code class="font-mono">${escHtml(info.mac_dinh)}</code></span>`
    : '';
}

// Hàng dạng "khối" — dùng cho biến trung gian & giá hội (label rộng, input riêng dòng dưới trên màn nhỏ)
function formulaRowBlock(khoa, label, info) {
  return `<div class="px-4 py-3 flex flex-wrap items-start gap-3" data-khoa="${escHtml(khoa)}">
    <div class="w-full sm:w-64 flex-shrink-0">
      <div class="font-semibold text-gray-700 text-sm flex items-center gap-2 flex-wrap">${escHtml(label)} ${customBadge(info)}</div>
      <div class="mt-1">${defaultHint(info)}</div>
    </div>
    <div class="flex-1 min-w-[220px]">
      <input class="formula-input inp-formula input-ios-sm w-full" value="${escHtml(info.bieu_thuc)}" data-khoa="${escHtml(khoa)}">
      <p class="text-xs mt-1 row-msg"></p>
    </div>
    <div class="flex gap-2 flex-shrink-0">
      <button onclick="saveFormula('${escHtml(khoa)}')" class="btn-ios btn-ios-gold text-xs px-3 py-2 whitespace-nowrap">💾 Lưu</button>
      ${info.is_custom ? `<button onclick="resetFormula('${escHtml(khoa)}')" class="btn-ios btn-ios-secondary text-xs px-3 py-2 whitespace-nowrap">↩️ Mặc định</button>` : ''}
    </div>
  </div>`;
}

// Hàng dạng "dòng" — dùng cho Giá Mua / Giá Bán (gọn, 2 dòng / 1 loại vàng)
function formulaRowInline(khoa, label, info) {
  return `<div class="flex flex-wrap items-center gap-2" data-khoa="${escHtml(khoa)}">
    <div class="w-20 flex-shrink-0 text-sm text-gray-500 font-semibold">${escHtml(label)}</div>
    <input class="formula-input inp-formula flex-1 min-w-[200px] input-ios-sm" value="${escHtml(info.bieu_thuc)}" data-khoa="${escHtml(khoa)}">
    <button onclick="saveFormula('${escHtml(khoa)}')" class="btn-ios btn-ios-gold text-xs px-3 py-1.5 whitespace-nowrap">💾 Lưu</button>
    ${info.is_custom ? `<button onclick="resetFormula('${escHtml(khoa)}')" class="btn-ios btn-ios-secondary text-xs px-3 py-1.5 whitespace-nowrap">↩️ Mặc định</button>` : ''}
    ${customBadge(info)} ${defaultHint(info)}
    <p class="text-xs row-msg w-full"></p>
  </div>`;
}

async function loadFormulas() {
  const [resF, resP] = await Promise.all([fetch('/api/formulas'), fetch('/api/prices')]);
  const fdata = await resF.json();
  const pdata = await resP.json();
  currentFormulas = fdata.formulas;
  currentMeta = pdata.meta;

  const meta = pdata.meta;
  document.getElementById('meta-box').innerHTML = meta ? `
    <div class="rounded-2xl px-3 py-2" style="background:#f2f2f7"><div class="text-[11px] text-gray-400 uppercase">Giá ra (gia_ra)</div><div class="font-bold text-gray-700">${fmt(meta.gia_ra)}</div></div>
    <div class="rounded-2xl px-3 py-2" style="background:#f2f2f7"><div class="text-[11px] text-gray-400 uppercase">Chênh tròn (chenh_tron)</div><div class="font-bold text-gray-700">${fmt(meta.chenh_tron)}</div></div>
    <div class="rounded-2xl px-3 py-2" style="background:#f2f2f7"><div class="text-[11px] text-gray-400 uppercase">Biên độ (bien_do)</div><div class="font-bold text-gray-700">${meta.bien_do}</div></div>
    <div class="rounded-2xl px-3 py-2" style="background:#f2f2f7"><div class="text-[11px] text-gray-400 uppercase">Giá vào (gv)</div><div class="font-bold text-gray-700">${fmt(meta.gia_vao)}</div></div>
  ` : '<div class="text-sm text-gray-400 col-span-full">⚠️ Chưa có dữ liệu giá — hãy cập nhật bảng giá ở trang chủ trước để xem trước kết quả tính.</div>';

  const F = currentFormulas;
  document.getElementById('intermediates-box').innerHTML = F.order.map(k =>
    formulaRowBlock(k, INTERMEDIATE_LABELS[k] || k, F.intermediates[k])
  ).join('');

  document.getElementById('prices-box').innerHTML = F.gold_order.map(loai => `
    <div class="px-5 py-3" data-loai="${escHtml(loai)}">
      <div class="font-bold text-gray-700 text-sm mb-2">🔸 ${escHtml((F.ten && F.ten[loai]) || loai)}${F.ten && F.ten[loai] && F.ten[loai] !== loai ? ' <span class="text-xs text-gray-400 font-medium">(mã ' + escHtml(loai) + ')</span>' : ''}</div>
      <div class="space-y-2">
        ${formulaRowInline(`${loai}__mua`, 'Giá Mua', F.prices[loai].mua)}
        ${formulaRowInline(`${loai}__ban`, 'Giá Bán', F.prices[loai].ban)}
      </div>
    </div>`).join('');

  document.getElementById('hoi-box').innerHTML = F.gold_order.map(loai =>
    formulaRowBlock(`${loai}__hoi`, `🔸 ${(F.ten && F.ten[loai]) || loai} — Giá Hội`, F.hoi[loai])
  ).join('');
}

// Áp dụng công thức đã lưu vào bảng giá (tính lại + lưu). Trả về JSON kết quả.
async function _applyToBoard() {
  try {
    const res = await fetch('/api/formulas/apply', {
      method: 'POST', headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ pin: getPin() })
    });
    return await res.json();
  } catch (e) { return { success: false, error: e.message }; }
}

async function saveFormula(khoa) {
  const row = rowEl(khoa);
  const input = row.querySelector('.inp-formula');
  const msg = row.querySelector('.row-msg');
  const bieu_thuc = input.value.trim();
  msg.textContent = ''; msg.className = 'text-xs row-msg';
  const res = await fetch('/api/formulas', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), khoa, bieu_thuc })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ Đã lưu — đang áp dụng vào bảng giá...';
    msg.className = 'text-xs text-green-600 font-semibold row-msg';
    // Tự áp dụng ngay vào bảng giá để công thức có hiệu lực (không cần bấm nút riêng)
    const ap = await _applyToBoard();
    if (ap.success) {
      msg.textContent = '✅ Đã lưu & áp dụng vào bảng giá.';
    } else if (ap.error === 'no_permission') {
      msg.textContent = '✅ Đã lưu công thức. ⚠️ Chưa áp dụng vào bảng giá — cần GĐ/PGĐ hoặc nhập mã PIN quản trị rồi bấm "Áp dụng vào bảng giá hiện tại".';
      msg.className = 'text-xs text-amber-600 font-semibold row-msg';
    } else {
      msg.textContent = '✅ Đã lưu công thức. ⚠️ Áp dụng vào bảng giá lỗi: ' + (ap.error || '');
      msg.className = 'text-xs text-amber-600 font-semibold row-msg';
    }
    setTimeout(loadFormulas, 800);
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-xs text-red-600 font-semibold row-msg';
  }
}

async function resetFormula(khoa) {
  const row = rowEl(khoa);
  const msg = row.querySelector('.row-msg');
  const res = await fetch('/api/formulas/reset', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), khoa })
  });
  const data = await res.json();
  if (data.success) {
    await _applyToBoard();
    loadFormulas();
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-xs text-red-600 font-semibold row-msg';
  }
}

async function resetAll() {
  if (!confirm('Khôi phục TOÀN BỘ công thức về mặc định gốc? Mọi chỉnh sửa hiện tại sẽ bị xóa.')) return;
  const msg = document.getElementById('top-msg');
  const res = await fetch('/api/formulas/reset', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin() })
  });
  const data = await res.json();
  if (data.success) {
    await _applyToBoard();
    msg.textContent = '✅ Đã khôi phục toàn bộ công thức về mặc định gốc và áp dụng vào bảng giá.';
    msg.className = 'text-sm text-green-600 font-semibold';
    loadFormulas();
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${data.error}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function applyFormulas() {
  if (!currentMeta) {
    document.getElementById('top-msg').textContent = '⚠️ Chưa có dữ liệu giá — hãy cập nhật bảng giá ở trang chủ trước.';
    document.getElementById('top-msg').className = 'text-sm text-amber-600';
    return;
  }
  if (!confirm('Áp dụng toàn bộ công thức ĐÃ LƯU vào bảng giá?\nBảng giá sẽ được tính lại theo Giá ra / Chênh tròn / Biên độ mới nhất.\n(Nhớ bấm Lưu ở từng công thức trước khi áp dụng.)')) return;
  const msg = document.getElementById('top-msg');
  msg.textContent = '⏳ Đang áp dụng...'; msg.className = 'text-sm text-gray-500';
  const res = await fetch('/api/formulas/apply', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin() })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ Đã áp dụng công thức vào bảng giá. Mở trang chủ / màn hình TV để xem giá mới.';
    msg.className = 'text-sm text-green-600 font-semibold';
  } else {
    msg.textContent = data.error === 'no_permission'
      ? '❌ Không có quyền cập nhật bảng giá (cần GĐ/PGĐ hoặc mã PIN quản trị).'
      : `❌ Lỗi: ${escHtml(data.error || 'Không áp dụng được')}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function previewCompute() {
  const box = document.getElementById('preview-box');
  if (!currentMeta) {
    box.innerHTML = '<p class="text-sm text-amber-600">⚠️ Chưa có dữ liệu Giá ra / Chênh tròn / Biên độ — hãy cập nhật bảng giá ở trang chủ trước.</p>';
    return;
  }
  const overrides = {};
  document.querySelectorAll('.inp-formula').forEach(inp => { overrides[inp.dataset.khoa] = inp.value.trim(); });

  box.innerHTML = '<p class="text-sm text-gray-400 py-3">⏳ Đang tính...</p>';
  const res = await fetch('/api/formulas/preview', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ gia_ra: currentMeta.gia_ra, chenh_tron: currentMeta.chenh_tron, bien_do: currentMeta.bien_do, overrides })
  });
  const data = await res.json();
  if (!data.success) {
    box.innerHTML = `<p class="text-sm text-red-600 font-semibold py-2">❌ Lỗi: ${escHtml(data.error)}</p>`;
    return;
  }
  box.innerHTML = `<table class="w-full text-sm">
    <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
      <tr><th class="text-left px-3 py-2">Loại vàng</th><th class="text-right px-3 py-2">Giá Mua</th><th class="text-right px-3 py-2">Giá Bán</th><th class="text-right px-3 py-2">Giá Hội</th></tr>
    </thead>
    <tbody>
      ${data.prices.map(p => `<tr class="border-b border-gray-50 hover:bg-amber-50">
        <td class="px-3 py-2 font-semibold">${escHtml(p.loai)}</td>
        <td class="px-3 py-2 text-right">${fmt(p.mua)}</td>
        <td class="px-3 py-2 text-right">${fmt(p.ban)}</td>
        <td class="px-3 py-2 text-right text-gray-500">${data.hoi[p.loai] != null ? fmt(data.hoi[p.loai]) : '—'}</td>
      </tr>`).join('')}
    </tbody>
  </table>
  <p class="text-xs text-gray-400 px-3 pb-2 pt-1">Tính theo Giá ra = ${fmt(currentMeta.gia_ra)} · Chênh tròn = ${fmt(currentMeta.chenh_tron)} · Biên độ = ${currentMeta.bien_do} (số liệu mới nhất ở trang chủ).</p>`;
}

// ── Kết nối hóa đơn điện tử ──
async function loadEinvoiceConfig() {
  try {
    const res = await fetch('/api/einvoice/config?pin=' + encodeURIComponent(getPin()));
    const data = await res.json();
    if (data.success && data.config) {
      document.getElementById('ei-provider').value = data.config.provider || '';
      document.getElementById('ei-api-url').value = data.config.api_url || '';
      document.getElementById('ei-username').value = data.config.username || '';
      document.getElementById('ei-invoice-form').value = data.config.invoice_form || '';
      document.getElementById('ei-invoice-serial').value = data.config.invoice_serial || '';
      document.getElementById('ei-cert-serial').value = data.config.cert_serial || '';
      if (data.config.default_tax_rate) document.getElementById('ei-tax-rate').value = data.config.default_tax_rate;
      if (data.config.default_payment_instrument) document.getElementById('ei-payment-instrument').value = data.config.default_payment_instrument;
      // Mật khẩu/token không trả về từ server vì lý do bảo mật — để trống, chỉ ghi đè khi anh nhập lại.
    }
  } catch (e) { /* im lặng nếu chưa cấu hình */ }
}

async function saveEinvoiceConfig() {
  const msg = document.getElementById('ei-msg');
  const provider = document.getElementById('ei-provider').value.trim();
  const api_url = document.getElementById('ei-api-url').value.trim();
  const username = document.getElementById('ei-username').value.trim();
  const password = document.getElementById('ei-password').value;
  const invoice_form = document.getElementById('ei-invoice-form').value.trim();
  const invoice_serial = document.getElementById('ei-invoice-serial').value.trim();
  const cert_serial = document.getElementById('ei-cert-serial').value.trim();
  const default_tax_rate = document.getElementById('ei-tax-rate').value;
  const default_payment_instrument = document.getElementById('ei-payment-instrument').value;
  if (!provider || !api_url) {
    msg.textContent = '⚠️ Vui lòng nhập tên nhà cung cấp và địa chỉ API.';
    msg.className = 'text-sm text-amber-600';
    return;
  }
  msg.textContent = '⏳ Đang lưu...';
  msg.className = 'text-sm text-gray-400';
  const res = await fetch('/api/einvoice/config', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), provider, api_url, username, password,
                            invoice_form, invoice_serial, cert_serial,
                            default_tax_rate, default_payment_instrument })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ Đã lưu thông tin kết nối hóa đơn điện tử.';
    msg.className = 'text-sm text-green-700 font-semibold';
    document.getElementById('ei-password').value = '';
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${escHtml(data.error)}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function testEinvoiceConfig() {
  const msg = document.getElementById('ei-msg');
  msg.textContent = '⏳ Đang kiểm tra kết nối...';
  msg.className = 'text-sm text-gray-400';
  const res = await fetch('/api/einvoice/test', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin() })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ ' + (data.message || 'Đã gửi yêu cầu kiểm tra kết nối.');
    msg.className = 'text-sm text-green-700 font-semibold';
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN'
      : data.error === 'not_configured' ? '⚠️ Chưa lưu thông tin kết nối — vui lòng nhập và lưu trước.'
      : `❌ ${escHtml(data.error || data.message || 'Không thể kết nối')}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

async function checkEinvoiceSerial() {
  const form = document.getElementById('ei-check-form').value.trim();
  const serial = document.getElementById('ei-check-serial').value.trim();
  const resultEl = document.getElementById('ei-check-result');
  const tableEl = document.getElementById('ei-registrations-table');
  if (!serial) {
    resultEl.innerHTML = '<div class="text-sm text-amber-600 mt-1">⚠️ Vui lòng nhập ký hiệu hóa đơn (VD: C26MTH).</div>';
    tableEl.innerHTML = '';
    return;
  }
  resultEl.innerHTML = '<div class="text-sm text-gray-400 mt-1">⏳ Đang kiểm tra...</div>';
  tableEl.innerHTML = '';
  let data;
  try {
    const res = await fetch(`/api/einvoice/check-serial?pin=${encodeURIComponent(getPin())}&invoice_form=${encodeURIComponent(form)}&invoice_serial=${encodeURIComponent(serial)}`);
    data = await res.json();
  } catch (e) {
    resultEl.innerHTML = `<div class="text-sm text-red-600 font-semibold mt-1">❌ Lỗi: ${escHtml(e.message)}</div>`;
    return;
  }
  if (!data.success) {
    resultEl.innerHTML = data.error === 'wrong_pin' ? '<div class="text-sm text-red-600 font-semibold mt-1">❌ Sai mã PIN</div>'
      : data.error === 'not_configured' ? '<div class="text-sm text-amber-600 mt-1">⚠️ Chưa lưu thông tin kết nối — vui lòng nhập và lưu trước.</div>'
      : `<div class="text-sm text-red-600 font-semibold mt-1">❌ ${escHtml(data.error || data.message || 'Không thể kiểm tra')}</div>`;
    return;
  }
  const color = data.verdict === 'ok' ? 'text-green-700' : data.verdict === 'failed' ? 'text-red-600' : 'text-amber-600';
  const icon = data.verdict === 'ok' ? '✅' : data.verdict === 'failed' ? '❌' : '⚠️';
  resultEl.innerHTML = `<div class="text-sm font-semibold ${color} mt-1">${icon} ${escHtml(data.message)}</div>`;

  if (data.records && data.records.length) {
    tableEl.innerHTML = `
      <div class="overflow-x-auto mt-2 rounded-xl border border-gray-100">
      <table class="w-full text-xs">
        <thead class="bg-gray-50 text-gray-400 uppercase">
          <tr>
            <th class="text-left px-2 py-1.5">Lần</th>
            <th class="text-left px-2 py-1.5">Ngày gửi CQT</th>
            <th class="text-left px-2 py-1.5">Loại</th>
            <th class="text-left px-2 py-1.5">Hình thức</th>
            <th class="text-left px-2 py-1.5">Trạng thái</th>
          </tr>
        </thead>
        <tbody>
          ${data.records.map(r => `
            <tr class="border-t">
              <td class="px-2 py-1.5">${escHtml(r.agreementNo || '')}</td>
              <td class="px-2 py-1.5 whitespace-nowrap">${escHtml(r.agreementDateFmt || '')}</td>
              <td class="px-2 py-1.5">${escHtml(r.typeLabel || '')}</td>
              <td class="px-2 py-1.5">${escHtml(r.formsLabel || '')}</td>
              <td class="px-2 py-1.5 font-semibold ${r.statusId === 'EiurTaxAuthAccepted' ? 'text-green-700' : 'text-red-600'}">${escHtml(r.statusLabel || '')}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      </div>`;
  }
}

// ── Tra cứu tên chủ tài khoản ngân hàng (VietQR) ──
async function loadBankLookupConfig() {
  try {
    const res = await fetch('/api/bank-lookup/config');
    const data = await res.json();
    if (data.success && data.config) {
      document.getElementById('bl-client-id').value = data.config.client_id || '';
      // API Key không trả về từ server vì lý do bảo mật — để trống, chỉ ghi đè khi anh nhập lại.
    }
  } catch (e) { /* im lặng nếu chưa cấu hình */ }
}

async function saveBankLookupConfig() {
  const msg = document.getElementById('bl-msg');
  const client_id = document.getElementById('bl-client-id').value.trim();
  const api_key = document.getElementById('bl-api-key').value.trim();
  if (!client_id) {
    msg.textContent = '⚠️ Vui lòng nhập Client ID.';
    msg.className = 'text-sm text-amber-600';
    return;
  }
  msg.textContent = '⏳ Đang lưu...';
  msg.className = 'text-sm text-gray-400';
  const res = await fetch('/api/bank-lookup/config', {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ pin: getPin(), client_id, api_key })
  });
  const data = await res.json();
  if (data.success) {
    msg.textContent = '✅ Đã lưu thông tin tra cứu ngân hàng.';
    msg.className = 'text-sm text-green-700 font-semibold';
    document.getElementById('bl-api-key').value = '';
  } else {
    msg.textContent = data.error === 'wrong_pin' ? '❌ Sai mã PIN' : `❌ Lỗi: ${escHtml(data.error)}`;
    msg.className = 'text-sm text-red-600 font-semibold';
  }
}

loadEinvoiceConfig();
loadBankLookupConfig();
loadFormulas();
</script>
{% endblock %}