{% extends "base.html" %}
{% block title %}Loại vàng & màn hình TV — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Loại vàng & màn hình TV{% endblock %}
{% block extra_style %}
  .lv-tab { padding:.55rem 1rem; border-radius:999px; font-weight:700; font-size:.9rem; color:#6b7280; background:#f3f4f6; }
  .lv-tab.on { background:#b45309; color:#fff; }
  .lv-row { display:flex; gap:.6rem; align-items:flex-start; padding:.75rem .9rem; border-bottom:1px solid #f3f4f6; }
  .lv-row:last-child { border-bottom:0; }
  .lv-main { flex:1; min-width:0; }
  .lv-ten { font-weight:800; color:#1f2937; font-size:1rem; overflow-wrap:anywhere; }
  .lv-chip { display:inline-block; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; margin:2px 4px 0 0; }
  .lv-gia { font-size:.85rem; color:#374151; margin-top:2px; }
  .lv-acts { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
  .lv-btn { font-size:.78rem; font-weight:700; padding:.32rem .65rem; border-radius:10px; background:#f3f4f6; color:#374151; white-space:nowrap; }
  .lv-btn:hover { background:#e5e7eb; }
  .lv-btn.do { background:#fee2e2; color:#b91c1c; }
  .lv-btn.xanh { background:#dcfce7; color:#15803d; }
  .lv-mui { display:flex; flex-direction:column; gap:.25rem; }
  .lv-mui button { width:2.1rem; height:1.9rem; border-radius:9px; background:#fef3c7; color:#92400e; font-weight:800; }
  .lv-mui button:disabled { opacity:.3; }
  .lv-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55); }
  @media (min-width:640px) { .lv-modal { align-items:center; } }
  .lv-modal > div { background:#fff; width:100%; max-width:34rem; max-height:92vh; overflow-y:auto; padding:1.25rem; border-radius:24px 24px 0 0; }
  @media (min-width:640px) { .lv-modal > div { border-radius:24px; margin:0 1rem; } }
  .lv-lbl { display:block; font-size:.75rem; font-weight:700; color:#6b7280; margin:.7rem 0 .25rem; }
  .lv-hint { font-size:.75rem; color:#6b7280; margin-top:.2rem; }
  .kl-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:800; padding:2px 10px; border-radius:999px; margin:2px 4px 0 0; border:1.5px solid transparent; }
  .kl-vang { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
  .kl-bac  { background:#e2e8f0; color:#334155; border-color:#94a3b8; }
  .kl-khac { background:#ede9fe; color:#5b21b6; border-color:#c4b5fd; }
  .kl-thieu { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
  .kl-chon { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
  .kl-chon label { position:relative; display:flex; align-items:center; justify-content:center; gap:.35rem; padding:.55rem .4rem; border-radius:12px;
                   border:2px solid #e5e7eb; font-weight:800; cursor:pointer; font-size:.9rem; }
  .kl-chon input { position:absolute; opacity:0; pointer-events:none; }
  .kl-chon label:has(input:checked) { border-color:#b45309; background:#fffbeb; box-shadow:0 0 0 3px rgba(180,83,9,.15); }
  .kl-chon label:focus-within { outline:2px solid #b45309; outline-offset:2px; }
  .lv-msg { font-size:.85rem; margin-top:.6rem; }
  .tv-dong { display:grid; grid-template-columns: 2.4rem 1fr; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid #f3f4f6; }
  .tv-dong-f { display:grid; grid-template-columns:1fr; gap:.4rem; }
  .gd-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.6rem; margin-top:.6rem; }
  .gd-o { border:2px solid #e5e7eb; border-radius:16px; padding:.4rem; background:#fff; }
  .gd-o.dang-chon { border-color:#b45309; box-shadow:0 0 0 3px rgba(180,83,9,.15); }
  .gd-xem-truoc { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; width:100%; height:64px;
                  border-radius:12px; padding:.45rem .6rem; border:1px solid rgba(0,0,0,.08); font-size:.8rem; cursor:pointer; }
  .gd-xem-truoc b { font-size:1.05rem; }
  .gd-ten { font-size:.78rem; font-weight:700; color:#374151; margin-top:.35rem; }
  .gd-thu { font-size:.72rem; color:#2563eb; }
  @media (min-width:640px) { .tv-dong-f { grid-template-columns: 1fr 1.3fr auto; align-items:center; } }
{% endblock %}

{% block content %}
  <div class="ios-card p-4 space-y-3" style="border:1.5px solid #fde68a">
    <h1 class="font-extrabold text-gray-800 text-lg" style="display:flex;align-items:center;gap:8px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:24px;height:24px;display:block;flex-shrink:0" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg> Loại vàng &amp; màn hình TV</h1>
    <p class="text-sm text-gray-500">
      Tự thêm, đổi tên, sắp xếp, ẩn hoặc ngừng dùng loại vàng trên bảng giá chính, và chọn nội dung hiện trên màn hình TV.
      Giá luôn lấy từ <strong>một bảng giá duy nhất</strong> — màn hình TV không có giá riêng.
    </p>
    <div class="flex gap-2 flex-wrap">
      <button id="tab-bg" class="lv-tab on" onclick="moTab('bg')">💰 Bảng giá chính</button>
      <button id="tab-tv" class="lv-tab" onclick="moTab('tv')">📺 Màn hình TV</button>
    </div>
    <p id="top-msg" class="lv-msg"></p>
  </div>

  <!-- ── THẺ 1: DANH MỤC LOẠI VÀNG ── -->
  <div id="pane-bg" class="space-y-3">
    <div class="ios-card overflow-hidden">
      <div class="px-4 py-3 flex justify-between items-center gap-2 flex-wrap" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <span class="font-extrabold text-gray-800">Loại vàng đang dùng <span id="gia-luc" class="text-xs font-medium text-gray-400"></span></span>
        <button onclick="moThem()" class="btn-ios btn-ios-gold px-4 py-2 text-sm">➕ Thêm loại vàng</button>
      </div>
      <div class="px-4 pt-2 text-xs text-gray-500">
        Đơn vị giá: nghìn đồng / chỉ. Bấm ▲ ▼ để sắp xếp thứ tự trên bảng giá.
        <strong>Mã khớp hàng</strong> là chữ dùng để tra giá hàng trong kho (giống ô "Loại vàng" của sản phẩm) nên không đổi được; muốn đổi chữ hiện ra thì đổi <strong>tên hiển thị</strong>.
        Mỗi loại ghi rõ <strong>Vàng / Bạc / Khác</strong> và <strong>hàm lượng %</strong> — dùng để quy đổi đúng kim loại ở Xuất Nhập Đổi (bạc quy ra bạc, vàng quy ra vàng ta).
      </div>
      <div id="ds-dung"><div class="p-6 text-center text-gray-300">Đang tải...</div></div>
    </div>
    <div class="ios-card overflow-hidden">
      <button onclick="document.getElementById('ds-ngung').classList.toggle('hidden')" class="w-full text-left px-4 py-3 font-bold text-gray-600">
        ⛔ Đã ngừng dùng <span id="so-ngung" class="text-gray-400 font-medium"></span> <span class="text-xs text-gray-400">(bấm để xem)</span>
      </button>
      <div id="ds-ngung" class="hidden"></div>
    </div>
  </div>

  <!-- ── THẺ 2: MÀN HÌNH TV ── -->
  <div id="pane-tv" class="hidden space-y-3">
    <div class="ios-card overflow-hidden">
      <div class="px-4 py-3 flex justify-between items-center gap-2 flex-wrap" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
        <span class="font-extrabold text-gray-800">Các dòng hiện trên TV</span>
        <a href="/display" target="_blank" class="lv-btn">📺 Mở màn hình TV</a>
      </div>
      <div class="px-4 pt-2 text-xs text-gray-500">
        Mỗi dòng chọn 1 loại vàng (giá lấy đúng theo bảng giá chính). Có thể đặt <strong>tên riêng trên TV</strong> mà không đổi tên ở bảng giá chính; để trống thì dùng tên bảng giá.
        TV đang mở sẽ tự cập nhật trong vài giây sau khi bấm Lưu.
      </div>
      <div id="tv-ds"></div>
      <div class="p-4 flex gap-2 flex-wrap">
        <button onclick="themDongTv()" class="lv-btn xanh">➕ Thêm dòng</button>
      </div>
    </div>
    <div class="ios-card p-4">
      <label class="lv-lbl" style="margin-top:0">Dòng chữ chạy cuối màn hình TV</label>
      <textarea id="tv-ticker" rows="3" maxlength="1000" class="input-ios w-full text-sm"></textarea>
      <div class="flex gap-2 items-center flex-wrap mt-3">
        <button onclick="luuTv()" id="btn-luu-tv" class="btn-ios btn-ios-gold px-6 py-2.5">💾 Lưu màn hình TV</button>
        <span id="tv-msg" class="lv-msg"></span>
      </div>
    </div>
    <!-- 1.8.9: giao diện (theme) CHUNG cho mọi TV + màn hình khách — đổi cần PIN Giám đốc -->
    <div class="ios-card p-4">
      <div class="font-extrabold text-gray-800">🎨 Giao diện màn hình TV</div>
      <div class="lv-hint">Bấm 1 ô để áp cho MỌI TV (cần PIN). “Xem thử” mở TV với giao diện đó mà không lưu.</div>
      <div id="gd-tv" class="gd-luoi"></div>
      <div class="font-extrabold text-gray-800 mt-4">🖥️ Giao diện màn hình khách</div>
      <div id="gd-mhk" class="gd-luoi"></div>
      <span id="gd-msg" class="lv-msg"></span>
    </div>
  </div>

  <!-- ── HỘP THÊM LOẠI VÀNG / SỬA CÔNG THỨC ── -->
  <div id="m-them" class="lv-modal hidden" onclick="if(event.target===this)dongModal('m-them')">
    <div>
      <h3 id="mt-tieu-de" class="font-extrabold text-gray-800 text-lg">➕ Thêm loại vàng</h3>
      <div id="mt-khoi-ma">
        <label class="lv-lbl" for="mt-ma">Mã khớp hàng * <span class="font-normal">(VD: 18K, 9999 SJC, 585)</span></label>
        <input id="mt-ma" maxlength="30" class="input-ios w-full" autocomplete="off" oninput="_mtDoanTuMa()">
        <div class="lv-hint">Gõ giống hệt ô "Loại vàng" của sản phẩm trong kho để hàng tự tra đúng giá. Không đổi được sau khi tạo.</div>
        <label class="lv-lbl" for="mt-ten">Tên hiển thị trên bảng giá <span class="font-normal">(để trống = dùng mã)</span></label>
        <input id="mt-ten" maxlength="60" class="input-ios w-full" autocomplete="off">
        <span class="lv-lbl">Loại kim loại *</span>
        <div class="kl-chon" role="radiogroup" aria-label="Loại kim loại">
          <label><input type="radio" name="mt-nhom" value="vang" checked onchange="_mtNhomDoi()">🟡 Vàng</label>
          <label><input type="radio" name="mt-nhom" value="bac" onchange="_mtNhomDoi()">⚪ Bạc</label>
          <label><input type="radio" name="mt-nhom" value="khac" onchange="_mtNhomDoi()">🟣 Khác</label>
        </div>
        <label class="lv-lbl" for="mt-hl">Hàm lượng <span id="mt-hl-ten">vàng</span> (%)</label>
        <input id="mt-hl" class="input-ios w-full" inputmode="decimal" autocomplete="off" placeholder="VD 75 (vàng 750) · 92,5 (bạc 925)" oninput="this.dataset.tay='1'">
        <div class="lv-hint">Tự điền theo mã (9999 → 100, 750 → 75, 18K → 75, Bạc → 92,5). Sửa lại nếu khác.</div>
      </div>
      <label class="lv-lbl" for="mt-mau">Lấy công thức theo loại có sẵn rồi chỉnh <span class="font-normal">(tùy chọn)</span></label>
      <select id="mt-mau" class="input-ios w-full" onchange="layMau()"></select>
      <label class="lv-lbl" for="mt-mua">Giá mua vào *</label>
      <input id="mt-mua" class="input-ios w-full formula-input" autocomplete="off">
      <label class="lv-lbl" for="mt-ban">Giá bán ra *</label>
      <input id="mt-ban" class="input-ios w-full formula-input" autocomplete="off">
      <label class="lv-lbl" for="mt-hoi">Giá hồi <span class="font-normal">(tùy chọn — để trống nếu không dùng)</span></label>
      <input id="mt-hoi" class="input-ios w-full formula-input" autocomplete="off">
      <div class="lv-hint">
        Nhập <strong>số cố định</strong> (nghìn đồng/chỉ, VD <code>8000</code>) hoặc <strong>công thức theo giá hôm nay</strong>
        giống trang <a href="/cong-thuc" class="text-amber-700 underline">Công thức giá</a>, VD <code>F7 - 200</code> (giá bán 9999 trừ 200),
        <code>gia_ra * 75 / 100</code>. Giá tự làm tròn hàng chục và phải lớn hơn 0.
      </div>
      <div id="mt-goc" class="lv-hint hidden"></div>
      <div id="mt-anh-huong" class="hidden mt-3 rounded-xl p-3 text-sm" style="background:#fff7ed;border:1.5px solid #fdba74"></div>
      <p id="mt-msg" class="lv-msg"></p>
      <div class="flex gap-2 mt-4">
        <button onclick="dongModal('m-them')" class="flex-1 py-2.5 rounded-xl bg-gray-100 text-gray-700 font-semibold">Hủy</button>
        <button id="mt-luu" onclick="luuModal()" class="flex-1 py-2.5 rounded-xl bg-amber-600 text-white font-semibold">💾 Lưu</button>
      </div>
    </div>
  </div>

  <!-- ── HỘP NHÓM KIM LOẠI + HÀM LƯỢNG (1.9.0) ── -->
  <div id="m-kl" class="lv-modal hidden" onclick="if(event.target===this)dongModal('m-kl')">
    <div>
      <h3 class="font-extrabold text-gray-800 text-lg">⚖️ Loại kim loại &amp; hàm lượng</h3>
      <div id="mk-ma" class="lv-hint"></div>
      <span class="lv-lbl">Đây là</span>
      <div class="kl-chon" role="radiogroup" aria-label="Loại kim loại">
        <label><input type="radio" name="mk-nhom" value="vang" onchange="_mkNhomDoi()">🟡 Vàng</label>
        <label><input type="radio" name="mk-nhom" value="bac" onchange="_mkNhomDoi()">⚪ Bạc</label>
        <label><input type="radio" name="mk-nhom" value="khac" onchange="_mkNhomDoi()">🟣 Khác</label>
      </div>
      <label class="lv-lbl" for="mk-hl">Hàm lượng <span id="mk-hl-ten">vàng</span> trong loại này (%)</label>
      <input id="mk-hl" class="input-ios w-full" inputmode="decimal" autocomplete="off" placeholder="VD 75 · 58,33 · 92,5">
      <div class="lv-hint">
        Vàng: 9999 = 100 · 999 = 99,9 · 750 / 18K = 75 · 610 = 61 · 14K = 58,33 · 10K = 41,67.
        Bạc: bạc 925 = 92,5 · bạc 999 = 99,9. Để trống = <strong>chưa rõ</strong> (Xuất Nhập Đổi sẽ nhắc nhập % khi xuất).
      </div>
      <p id="mk-msg" class="lv-msg"></p>
      <div class="flex gap-2 mt-4">
        <button onclick="dongModal('m-kl')" class="flex-1 py-2.5 rounded-xl bg-gray-100 text-gray-700 font-semibold">Hủy</button>
        <button onclick="luuKimLoai()" class="flex-1 py-2.5 rounded-xl bg-amber-600 text-white font-semibold">💾 Lưu</button>
      </div>
    </div>
  </div>

  <!-- ── HỘP ĐỔI TÊN ── -->
  <div id="m-ten" class="lv-modal hidden" onclick="if(event.target===this)dongModal('m-ten')">
    <div>
      <h3 class="font-extrabold text-gray-800 text-lg">✏️ Đổi tên hiển thị</h3>
      <div id="mn-ma" class="lv-hint"></div>
      <label class="lv-lbl" for="mn-ten">Tên mới trên bảng giá chính</label>
      <input id="mn-ten" maxlength="60" class="input-ios w-full" autocomplete="off">
      <div class="lv-hint">Chỉ đổi chữ hiện trên bảng giá. Giá, hàng trong kho, hóa đơn cũ và lịch sử giá không bị ảnh hưởng.</div>
      <p id="mn-msg" class="lv-msg"></p>
      <div class="flex gap-2 mt-4">
        <button onclick="dongModal('m-ten')" class="flex-1 py-2.5 rounded-xl bg-gray-100 text-gray-700 font-semibold">Hủy</button>
        <button onclick="luuTen()" class="flex-1 py-2.5 rounded-xl bg-amber-600 text-white font-semibold">💾 Lưu tên</button>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
const fmt = n => Number(n).toLocaleString('vi-VN');
// Thoát cả dấu nháy — tên do chủ tiệm gõ còn được đặt vào thuộc tính value="..." / placeholder="...".
function esc(s) { const d = document.createElement('div'); d.textContent = s == null ? '' : String(s);
                  return d.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;'); }
let VER = 0, DS = [], TV = { ver: 0, dong: [], tat_ca: [] }, _modal = null, _dangGui = false;

function moTab(t) {
  document.getElementById('pane-bg').classList.toggle('hidden', t !== 'bg');
  document.getElementById('pane-tv').classList.toggle('hidden', t !== 'tv');
  document.getElementById('tab-bg').classList.toggle('on', t === 'bg');
  document.getElementById('tab-tv').classList.toggle('on', t === 'tv');
  try { history.replaceState(null, '', t === 'tv' ? '#tv' : '#'); } catch (e) {}
}
function bao(id, html, loai) {
  const el = document.getElementById(id);
  el.className = 'lv-msg ' + (loai === 'loi' ? 'text-red-600 font-semibold' : loai === 'ok' ? 'text-green-700 font-semibold' : 'text-gray-500');
  el.innerHTML = html;
  // Thông báo chung nằm đầu trang — đang cuộn ở dòng dưới thì đưa thông báo vào tầm mắt.
  if (id === 'top-msg' && html) {
    const r = el.getBoundingClientRect();
    if (r.top < 70 || r.bottom > innerHeight - 90) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}
function dongModal(id) { document.getElementById(id).classList.add('hidden'); }

async function goi(url, method, body) {
  const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' },
                                 body: body ? JSON.stringify(body) : undefined });
  let d = {};
  try { d = await res.json(); } catch (e) {}
  return { res, d };
}

// ── Danh mục ──
async function taiDanhMuc() {
  const { res, d } = await goi('/api/loai-vang', 'GET');
  if (!res.ok || !d.success) { bao('top-msg', '❌ Không tải được danh mục (cần đăng nhập Giám đốc / Phó Giám đốc).', 'loi'); return; }
  VER = d.ver; DS = d.ds;
  document.getElementById('gia-luc').textContent = d.cap_nhat_gia ? '· giá lúc ' + d.cap_nhat_gia : '· chưa có bảng giá';
  veDanhMuc();
}

function dongLoai(r, i, dung) {
  const chips = [];
  chips.push(klChip(r));
  chips.push(`<span class="lv-chip" style="background:#f3f4f6;color:#4b5563">Mã khớp hàng: ${esc(r.ma)}</span>`);
  if (!r.mac_dinh) chips.push('<span class="lv-chip" style="background:#e0e7ff;color:#3730a3">Tự thêm</span>');
  if (dung && !r.hien_bang_gia) chips.push('<span class="lv-chip" style="background:#fef3c7;color:#92400e">Đang ẨN khỏi bảng giá (vẫn tính giá)</span>');
  if (r.da_chinh) chips.push('<span class="lv-chip" style="background:#fce7f3;color:#9d174d">Công thức đã chỉnh</span>');
  const gia = r.mua != null
    ? `Mua <strong class="text-blue-700">${fmt(r.mua)}</strong> · Bán <strong class="text-red-700">${fmt(r.ban)}</strong>` + (r.hoi != null ? ` · Hồi ${fmt(r.hoi)}` : '')
    : (dung ? '<span class="text-amber-700">Chưa có giá — sẽ có ở lần cập nhật giá kế tiếp</span>' : '<span class="text-gray-400">Không tính giá</span>');
  const acts = dung ? `
      <button class="lv-btn" onclick="moTen(${r.id})">✏️ Đổi tên</button>
      <button class="lv-btn" onclick="moKimLoai(${r.id})">⚖️ Vàng/Bạc &amp; hàm lượng</button>
      <button class="lv-btn" onclick="anHien(${r.id}, ${r.hien_bang_gia ? 'false' : 'true'})">${r.hien_bang_gia ? '🙈 Ẩn khỏi bảng giá' : '👁 Hiện lại'}</button>
      <button class="lv-btn" onclick="moCongThuc(${r.id})">🧮 Sửa giá / công thức</button>
      <button class="lv-btn do" onclick="ngung(${r.id})">⛔ Ngừng dùng</button>` : `
      <button class="lv-btn xanh" onclick="dungLai(${r.id}, false)">↩ Dùng lại</button>
      <button class="lv-btn" onclick="moKimLoai(${r.id})">⚖️ Vàng/Bạc &amp; hàm lượng</button>
      <button class="lv-btn do" onclick="xoaHan(${r.id})">🗑 Xóa hẳn</button>`;
  const mui = dung ? `<div class="lv-mui">
      <button onclick="doiCho(${i}, -1)" ${i === 0 ? 'disabled' : ''} aria-label="Lên">▲</button>
      <button onclick="doiCho(${i}, 1)" aria-label="Xuống" data-cuoi="${i}">▼</button></div>` : '';
  return `<div class="lv-row" id="lv-${r.id}">${mui}<div class="lv-main">
      <div class="lv-ten">${esc(r.ten)}</div><div>${chips.join('')}</div>
      <div class="lv-gia">${gia}</div><div class="lv-acts">${acts}</div></div></div>`;
}

// ── Nhóm kim loại + hàm lượng % (1.9.0) ──
const KL_TEN = { vang: 'Vàng', bac: 'Bạc', khac: 'Khác' };
const KL_IC = { vang: '🟡', bac: '⚪', khac: '🟣' };
const fmtHl = v => (v == null || v === '') ? '' : (Math.round(Number(v) * 1000) / 1000).toLocaleString('vi-VN') + '%';
function klChip(r) {
  if (!r) return '';
  const n = r.nhom || 'khac';
  const hl = r.ham_luong != null ? fmtHl(r.ham_luong) : 'chưa rõ %';
  const cls = r.ham_luong == null ? 'kl-thieu' : ('kl-' + n);
  return `<span class="kl-chip ${cls}" title="Loại kim loại và hàm lượng — dùng cho Xuất Nhập Đổi">${KL_IC[n] || ''} ${KL_TEN[n] || esc(n)} · ${hl}</span>`;
}
// Đoán nhóm + % theo mã — MIRROR formula_db.phan_loai_mac_dinh + xuong_db.tuoi_to_pct
function doanKimLoai(ma) {
  const s = String(ma || '').trim(), u = s.toUpperCase();
  const pct = (t) => {
    const x = String(t || '').trim().toUpperCase();
    if (!x) return null;
    for (const tok of (x.match(/\d+(?:[.,]\d+)*/g) || [])) if (tok.replace(/[.,]/g, '') === '9999') return 100;
    let m = x.match(/(\d+(?:[.,]\d+)?)\s*K/);
    if (m) return Math.round(parseFloat(m[1].replace(',', '.')) / 24 * 10000) / 100;
    m = x.match(/(\d+(?:[.,]\d+)?)/);
    if (!m) return null;
    const v = parseFloat(m[1].replace(',', '.'));
    if (v >= 1000) return Math.round(v) / 100;
    if (v > 100) return Math.round(v * 10) / 100;
    return Math.round(v * 100) / 100;
  };
  if (u.includes('BẠC') || u.includes('BAC') || u.startsWith('SILVER')) return { nhom: 'bac', hl: pct(s) || 92.5 };
  if (u.includes('PLATIN') || u.includes('BẠCH KIM') || u.startsWith('PT')) return { nhom: 'khac', hl: 95 };
  const p = pct(s);
  return p ? { nhom: 'vang', hl: p } : { nhom: 'khac', hl: null };
}
const _radio = (name) => (document.querySelector(`input[name="${name}"]:checked`) || {}).value;
const _datRadio = (name, v) => { const el = document.querySelector(`input[name="${name}"][value="${v}"]`); if (el) el.checked = true; };
const _hlTen = n => n === 'bac' ? 'bạc' : (n === 'khac' ? 'kim loại quý' : 'vàng');
function _mtNhomDoi() { document.getElementById('mt-hl-ten').textContent = _hlTen(_radio('mt-nhom')); }
function _mkNhomDoi() { document.getElementById('mk-hl-ten').textContent = _hlTen(_radio('mk-nhom')); }
function _mtDoanTuMa() {
  const hl = document.getElementById('mt-hl');
  if (hl.dataset.tay === '1') return;           // người dùng đã tự gõ % → không đè
  const g = doanKimLoai(document.getElementById('mt-ma').value);
  _datRadio('mt-nhom', g.nhom); _mtNhomDoi();
  hl.value = g.hl != null ? String(g.hl).replace('.', ',') : '';
}
function moKimLoai(id) {
  const r = DS.find(x => x.id === id);
  _modal = { id };
  document.getElementById('mk-ma').textContent = `${r.ten} — mã khớp hàng: ${r.ma}`;
  _datRadio('mk-nhom', r.nhom || 'vang'); _mkNhomDoi();
  document.getElementById('mk-hl').value = r.ham_luong != null ? String(r.ham_luong).replace('.', ',') : '';
  bao('mk-msg', '');
  document.getElementById('m-kl').classList.remove('hidden');
  document.getElementById('mk-hl').focus();
}
async function luuKimLoai() {
  const body = { nhom: _radio('mk-nhom'), ham_luong: document.getElementById('mk-hl').value.trim(), ver: VER };
  const { res, d } = await goi('/api/loai-vang/' + _modal.id, 'PUT', body);
  if (await xuLy(res, d, 'mk-msg', '✅ Đã lưu.')) {
    dongModal('m-kl');
    const r = DS.find(x => x.id === _modal.id);
    bao('top-msg', `✅ ${esc(r ? r.ten : '')}: ${KL_TEN[body.nhom]} · ${body.ham_luong ? esc(body.ham_luong) + '%' : 'chưa rõ %'}`, 'ok');
  }
}

function veDanhMuc() {
  const dung = DS.filter(r => r.dang_dung), ngung = DS.filter(r => !r.dang_dung);
  document.getElementById('ds-dung').innerHTML = dung.map((r, i) => dongLoai(r, i, true)).join('')
    || '<div class="p-6 text-center text-gray-300">Chưa có loại vàng nào</div>';
  const nutCuoi = document.querySelector(`#ds-dung [data-cuoi="${dung.length - 1}"]`);
  if (nutCuoi) nutCuoi.disabled = true;
  document.getElementById('ds-ngung').innerHTML = ngung.map((r, i) => dongLoai(r, i, false)).join('')
    || '<div class="p-4 text-sm text-gray-400">Không có loại nào ngừng dùng.</div>';
  document.getElementById('so-ngung').textContent = `(${ngung.length})`;
}

async function xuLy(res, d, msgId, thanhCong) {
  if (res.ok && d.success) { await taiDanhMuc(); bao(msgId, thanhCong, 'ok'); return true; }
  if (d.error === 'xung_dot') { await taiDanhMuc(); await taiTv(); }
  let html = '❌ ' + esc(d.message || 'Không lưu được, vui lòng thử lại.');
  if (d.error === 'con_hang' && d.chi_tiet) {
    html += '<br>' + d.chi_tiet.map(x => `• "${esc(x.loai_vang)}": ${x.so_mon} món (VD ${esc((x.ma_hang_mau || []).join(', '))})`).join('<br>');
  }
  if (d.error === 'co_giao_dich' && d.chi_tiet) {
    html += '<br><span class="text-gray-500 font-normal">Đang có ở: ' + d.chi_tiet.map(x => `${esc(x.ten_bang || x.bang)} (${x.so_dong} dòng)`).join(', ') + '</span>';
  }
  bao(msgId, html, 'loi');
  return false;
}

async function doiCho(i, huong) {
  if (_dangGui) return;
  const dung = DS.filter(r => r.dang_dung), ngung = DS.filter(r => !r.dang_dung);
  const j = i + huong;
  if (j < 0 || j >= dung.length) return;
  [dung[i], dung[j]] = [dung[j], dung[i]];
  _dangGui = true;
  const { res, d } = await goi('/api/loai-vang/sap-xep', 'PUT', { ids: [...dung, ...ngung].map(r => r.id), ver: VER });
  _dangGui = false;
  await xuLy(res, d, 'top-msg', '✅ Đã đổi thứ tự trên bảng giá.');
}

async function anHien(id, hien) {
  const { res, d } = await goi('/api/loai-vang/' + id, 'PUT', { hien_bang_gia: hien, ver: VER });
  await xuLy(res, d, 'top-msg', hien ? '✅ Đã hiện lại trên bảng giá.' : '✅ Đã ẩn khỏi bảng giá chính (vẫn tính giá cho bán/mua hàng).');
}

async function ngung(id) {
  const r = DS.find(x => x.id === id);
  if (!confirm(`Ngừng dùng loại "${r.ten}"?\n\nLoại này sẽ không còn trên bảng giá và không được tính giá nữa. Lịch sử giá và hóa đơn cũ giữ nguyên. Có thể "Dùng lại" bất cứ lúc nào.`)) return;
  const { res, d } = await goi(`/api/loai-vang/${id}/ngung`, 'POST', { ver: VER });
  await xuLy(res, d, 'top-msg', `✅ Đã ngừng dùng "${esc(r.ten)}".`);
}

async function dungLai(id, xacNhan) {
  const r = DS.find(x => x.id === id);
  const { res, d } = await goi(`/api/loai-vang/${id}/dung-lai`, 'POST', { ver: VER, xac_nhan: xacNhan });
  if (d.error === 'can_xac_nhan') {
    if (confirm(d.message + '\n\n' + d.chi_tiet.map(x => `• "${x.loai_vang}" (${x.so_mon} món): ${x.truoc || 'chưa có giá'} → ${x.sau || 'chưa có giá'}`).join('\n') + '\n\nVẫn dùng lại?')) {
      return dungLai(id, true);
    }
    return;
  }
  await xuLy(res, d, 'top-msg', `✅ Đã dùng lại "${esc(r.ten)}".`);
}

async function xoaHan(id) {
  const r = DS.find(x => x.id === id);
  if (!confirm(`Xóa HẲN loại "${r.ten}" khỏi danh mục?\n\nChỉ xóa được khi loại này chưa từng có hàng hóa hay giao dịch nào. Lịch sử bảng giá cũ vẫn giữ.`)) return;
  const { res, d } = await goi('/api/loai-vang/' + id, 'DELETE', { ver: VER });
  await xuLy(res, d, 'top-msg', `✅ Đã xóa hẳn "${esc(r.ten)}".`);
}

function moTen(id) {
  const r = DS.find(x => x.id === id);
  _modal = { id };
  document.getElementById('mn-ma').textContent = 'Mã khớp hàng: ' + r.ma;
  document.getElementById('mn-ten').value = r.ten;
  bao('mn-msg', '');
  document.getElementById('m-ten').classList.remove('hidden');
  document.getElementById('mn-ten').focus();
}
async function luuTen() {
  const { res, d } = await goi('/api/loai-vang/' + _modal.id, 'PUT', { ten: document.getElementById('mn-ten').value, ver: VER });
  if (await xuLy(res, d, 'mn-msg', '✅ Đã đổi tên.')) { dongModal('m-ten'); bao('top-msg', '✅ Đã đổi tên hiển thị.', 'ok'); }
}

function _datMau(chon) {
  document.getElementById('mt-mau').innerHTML = '<option value="">— Không, tự nhập —</option>' +
    DS.filter(r => r.dang_dung).map(r => `<option value="${r.id}">${esc(r.ten)} (mua ${esc(r.ct_mua)} · bán ${esc(r.ct_ban)})</option>`).join('');
  document.getElementById('mt-mau').value = chon || '';
}
function layMau() {
  const r = DS.find(x => String(x.id) === document.getElementById('mt-mau').value);
  if (!r) return;
  document.getElementById('mt-mua').value = r.ct_mua;
  document.getElementById('mt-ban').value = r.ct_ban;
  document.getElementById('mt-hoi').value = r.ct_hoi || '';
}
function _moHop(tieuDe) {
  document.getElementById('mt-tieu-de').textContent = tieuDe;
  document.getElementById('mt-anh-huong').classList.add('hidden');
  bao('mt-msg', '');
  document.getElementById('m-them').classList.remove('hidden');
}
function moThem() {
  _modal = { kieu: 'them' };
  ['mt-ma', 'mt-ten', 'mt-mua', 'mt-ban', 'mt-hoi', 'mt-hl'].forEach(id => document.getElementById(id).value = '');
  document.getElementById('mt-hl').dataset.tay = '';
  _datRadio('mt-nhom', 'vang'); _mtNhomDoi();
  document.getElementById('mt-khoi-ma').classList.remove('hidden');
  document.getElementById('mt-goc').classList.add('hidden');
  _datMau('');
  _moHop('➕ Thêm loại vàng');
  document.getElementById('mt-ma').focus();
}
function moCongThuc(id) {
  const r = DS.find(x => x.id === id);
  _modal = { kieu: 'cong_thuc', id };
  document.getElementById('mt-khoi-ma').classList.add('hidden');
  document.getElementById('mt-mua').value = r.ct_mua;
  document.getElementById('mt-ban').value = r.ct_ban;
  document.getElementById('mt-hoi').value = r.ct_hoi || '';
  const goc = document.getElementById('mt-goc');
  goc.innerHTML = `Công thức gốc: mua <code>${esc(r.goc_mua)}</code> · bán <code>${esc(r.goc_ban)}</code>` +
    (r.goc_hoi ? ` · hồi <code>${esc(r.goc_hoi)}</code>` : '') +
    ` <button class="lv-btn" onclick="vePhuongAnGoc(${r.id})">↺ Khôi phục gốc</button>`;
  goc.classList.remove('hidden');
  _datMau('');
  _moHop(`🧮 Giá / công thức — ${r.ten}`);
}
function vePhuongAnGoc(id) {
  const r = DS.find(x => x.id === id);
  document.getElementById('mt-mua').value = r.goc_mua;
  document.getElementById('mt-ban').value = r.goc_ban;
  document.getElementById('mt-hoi').value = r.goc_hoi || '';
}

async function luuModal(xacNhan) {
  if (_dangGui) return;
  const body = { ct_mua: document.getElementById('mt-mua').value, ct_ban: document.getElementById('mt-ban').value,
                 ct_hoi: document.getElementById('mt-hoi').value, ver: VER };
  let url = '/api/loai-vang', method = 'POST';
  if (_modal.kieu === 'them') {
    body.ma = document.getElementById('mt-ma').value;
    body.ten = document.getElementById('mt-ten').value;
    body.nhom = _radio('mt-nhom');
    body.ham_luong = document.getElementById('mt-hl').value.trim();
    body.xac_nhan = !!xacNhan;
  } else {
    url = `/api/loai-vang/${_modal.id}/cong-thuc`; method = 'PUT';
  }
  _dangGui = true;
  document.getElementById('mt-luu').disabled = true;
  try {
    const { res, d } = await goi(url, method, body);
    if (d.error === 'can_xac_nhan') {
      const box = document.getElementById('mt-anh-huong');
      box.innerHTML = `<div class="font-bold text-orange-800">⚠️ ${esc(d.message)}</div>` +
        d.chi_tiet.map(x => `<div>• Hàng có loại vàng "<strong>${esc(x.loai_vang)}</strong>" — ${x.so_mon} món (VD ${esc((x.ma_hang_mau || []).join(', '))}): đang tính theo <strong>${esc(x.truoc || 'chưa có giá')}</strong> → sẽ tính theo <strong>${esc(x.sau || 'chưa có giá')}</strong></div>`).join('') +
        `<button class="lv-btn xanh mt-2" onclick="luuModal(true)">✅ Đúng, tôi xác nhận thêm</button>`;
      box.classList.remove('hidden');
      bao('mt-msg', '');
      return;
    }
    const ok = await xuLy(res, d, 'mt-msg', '✅ Đã lưu.');
    if (ok) {
      dongModal('m-them');
      const r = DS.find(x => x.ma === (d.ma || '')) || DS.find(x => x.id === _modal.id);
      bao('top-msg', _modal.kieu === 'them'
        ? `✅ Đã thêm "${esc(d.ten)}"` + (r && r.mua != null ? ` — mua ${fmt(r.mua)} · bán ${fmt(r.ban)}` : ' — giá sẽ có ở lần cập nhật giá kế tiếp')
        : `✅ Đã lưu công thức` + (r && r.mua != null ? ` — mua ${fmt(r.mua)} · bán ${fmt(r.ban)}` : ''), 'ok');
    }
  } finally {
    _dangGui = false;
    document.getElementById('mt-luu').disabled = false;
  }
}

// ── Giao diện màn hình (theme) — 1.8.9 ──
// Màu xem trước: [nền, chữ giá bán, chữ phụ] — khớp biến màu trong display.html / man_hinh_khach.html
const GD_MAU = {
  dark: ['#0d0a04', '#ffe9a8', '#b9a47a'], bokeh: ['#f3b53b', '#fffbe8', '#3a2a08'], tet: ['#4e0b0b', '#ffe9a8', '#e3cfa0'],
  mac_dinh: ['#0c0a05', '#f3d878', '#b8a670'], trang: ['#ffffff', '#7a4e00', '#3a3a3c'],
  champagne: ['#fffdf8', '#7d4f00', '#4a3b22'], bac_ha: ['#fbfffd', '#075e44', '#1f4a3c'],
  hong_phan: ['#fffbfc', '#9b1f47', '#5a2532'], xanh_troi: ['#fbfdff', '#0a4fb8', '#1e3a5f'],
};
let GD = null;
async function taiGiaoDien() {
  const { res, d } = await goi('/api/giao-dien-man-hinh', 'GET');
  if (!res.ok || !d.success) return;
  GD = d;
  veGiaoDien('tv'); veGiaoDien('mhk');
}
function veGiaoDien(loai) {
  const g = GD[loai], dang = g.theme || (loai === 'tv' ? '' : 'mac_dinh');
  const xem = loai === 'tv' ? '/display' : '/man-hinh-khach';
  document.getElementById('gd-' + loai).innerHTML = g.ds.map(t => {
    const m = GD_MAU[t.ma] || ['#fff', '#000', '#444'];
    return `<div class="gd-o${t.ma === dang ? ' dang-chon' : ''}">
      <button type="button" class="gd-xem-truoc" style="background:${m[0]}" onclick="luuGiaoDien('${loai}','${esc(t.ma)}')"
              aria-label="Dùng giao diện ${esc(t.ten)}">
        <span style="color:${m[2]}">Mua 13.050</span><b style="color:${m[1]}">Bán 13.600</b></button>
      <div class="gd-ten">${t.ma === dang ? '✅ ' : ''}${esc(t.ten)}</div>
      <a class="gd-thu" href="${xem}?theme=${encodeURIComponent(t.ma)}" target="_blank">Xem thử</a></div>`;
  }).join('') + (loai === 'tv' && !g.theme
      ? '<div class="lv-hint" style="grid-column:1/-1">Chưa chọn giao diện chung — mỗi TV đang dùng giao diện chọn riêng trên máy đó.</div>' : '');
}
function luuGiaoDien(loai, ma) {
  const ten = (GD[loai].ds.find(t => t.ma === ma) || {}).ten || ma;
  askPin({ title: '🎨 Đổi giao diện', label: (loai === 'tv' ? 'Màn hình TV' : 'Màn hình khách') + ' → ' + ten }, async pin => {
    const { res, d } = await goi('/api/giao-dien-man-hinh', 'PUT', { loai, theme: ma, pin });
    if (res.ok && d.success) { await taiGiaoDien(); bao('gd-msg', '✅ Đã đổi — màn hình đang mở tự đổi trong vài giây.', 'ok'); }
    else bao('gd-msg', '❌ ' + esc(d.message || 'Không lưu được (cần Giám đốc / Phó Giám đốc + đúng PIN).'), 'loi');
  });
}

// ── Màn hình TV ──
async function taiTv() {
  const { res, d } = await goi('/api/tv-settings', 'GET');
  if (!res.ok) return;
  TV = { ver: d.ver, dong: d.dong.map(x => ({ ma: x.ma, ten: x.ten_tv })), tat_ca: d.tat_ca };
  document.getElementById('tv-ticker').value = d.ticker_text || '';
  veTv();
}
function veTv() {
  const gia = Object.fromEntries(DS.map(r => [r.ma, r]));
  const opts = ma => TV.tat_ca.filter(t => t.dang_dung || t.ma === ma)
    .map(t => `<option value="${esc(t.ma)}" ${t.ma === ma ? 'selected' : ''}>${esc(t.ten)}${t.ten !== t.ma ? ' (' + esc(t.ma) + ')' : ''}${t.dang_dung ? '' : ' — đã ngừng'}</option>`).join('');
  document.getElementById('tv-ds').innerHTML = TV.dong.map((x, i) => {
    const g = gia[x.ma];
    const ghi = !g || !g.dang_dung ? '<span class="text-red-600">Loại này đã ngừng dùng — TV sẽ không hiện dòng này</span>'
      : (g.mua != null ? `Mua ${fmt(g.mua)} · Bán ${fmt(g.ban)}` : '<span class="text-amber-700">Chưa có giá — TV chưa hiện dòng này</span>') + ' ' + klChip(g);
    return `<div class="tv-dong"><div class="lv-mui">
        <button onclick="doiTv(${i}, -1)" ${i === 0 ? 'disabled' : ''} aria-label="Lên">▲</button>
        <button onclick="doiTv(${i}, 1)" ${i === TV.dong.length - 1 ? 'disabled' : ''} aria-label="Xuống">▼</button></div>
      <div><div class="tv-dong-f">
        <select class="input-ios text-sm" aria-label="Loại vàng" onchange="TV.dong[${i}].ma=this.value; veTv()">${opts(x.ma)}</select>
        <input class="input-ios text-sm" maxlength="60" aria-label="Tên trên TV" placeholder="Tên trên TV (trống = ${esc(g ? g.ten : x.ma)})"
               value="${esc(x.ten)}" oninput="TV.dong[${i}].ten=this.value">
        <button class="lv-btn do" onclick="TV.dong.splice(${i},1); veTv()">✕ Bỏ dòng</button></div>
        <div class="lv-hint">${ghi}</div></div></div>`;
  }).join('') || '<div class="p-4 text-sm text-gray-400">Chưa có dòng nào — TV sẽ trống. Bấm "Thêm dòng".</div>';
}
function doiTv(i, h) {
  const j = i + h;
  if (j < 0 || j >= TV.dong.length) return;
  [TV.dong[i], TV.dong[j]] = [TV.dong[j], TV.dong[i]];
  veTv();
}
function themDongTv() {
  const dau = TV.tat_ca.find(t => t.dang_dung);
  if (!dau) return;
  TV.dong.push({ ma: dau.ma, ten: '' });
  veTv();
}
async function luuTv() {
  if (_dangGui) return;
  _dangGui = true;
  document.getElementById('btn-luu-tv').disabled = true;
  try {
    const { res, d } = await goi('/api/tv-settings', 'PUT',
      { dong: TV.dong, ver: TV.ver, ticker_text: document.getElementById('tv-ticker').value });
    if (res.ok && d.success) {
      await taiTv();
      bao('tv-msg', '✅ Đã lưu — TV đang mở tự cập nhật trong vài giây.', 'ok');
    } else {
      if (d.error === 'xung_dot') await taiTv();
      bao('tv-msg', '❌ ' + esc(d.message || 'Không lưu được (cần đăng nhập Giám đốc / Phó Giám đốc).'), 'loi');
    }
  } finally {
    _dangGui = false;
    document.getElementById('btn-luu-tv').disabled = false;
  }
}

(async () => {
  await taiDanhMuc();
  await taiTv();
  await taiGiaoDien();
  if (location.hash === '#tv') moTab('tv');
})();
</script>
{% endblock %}