{% extends "base.html" %}
{% block title %}Tùy chỉnh — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Tùy chỉnh{% endblock %}

{% block extra_style %}
    /* Trang Tùy chỉnh (23/10/2026) — CSS thuần trong block extra_style (base.html đã bọc <style>). */
    .tc-wrap { max-width: 760px; margin: 0 auto; }
    .tc-gioi-thieu { background: linear-gradient(135deg, #fff7ed, #fffbeb); border: 1px solid #fde68a;
      border-radius: 16px; padding: 14px 16px; color: #78350f; font-size: 14px; line-height: 1.5; }
    .tc-gioi-thieu b { color: #7c2d12; }
    .tc-ds { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .tc-muc { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #e5e7eb;
      border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
    .tc-muc:hover { border-color: #d6b46a; box-shadow: 0 2px 10px rgba(139, 0, 0, .06); }
    .tc-muc.tc-bat { border-color: #d4af37; background: linear-gradient(90deg, #fffdf5, #fff); }
    .tc-muc.tc-doi { box-shadow: 0 0 0 2px #fde68a; }
    .tc-chu { flex: 1; min-width: 0; }
    .tc-ten { font-weight: 800; color: #1f2937; font-size: 15px; line-height: 1.35; }
    .tc-mo-ta { color: #6b7280; font-size: 13px; line-height: 1.45; margin-top: 4px; }
    .tc-trang-thai { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700;
      border-radius: 999px; padding: 2px 9px; background: #f3f4f6; color: #6b7280; }
    .tc-bat .tc-trang-thai { background: #dcfce7; color: #166534; }
    /* Công tắc gạt */
    .tc-cong-tac { position: relative; flex-shrink: 0; width: 50px; height: 30px; margin-top: 2px; }
    .tc-cong-tac input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .tc-ray { position: absolute; inset: 0; border-radius: 999px; background: #d1d5db; transition: background .18s; pointer-events: none; }
    .tc-ray::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
    .tc-cong-tac input:checked + .tc-ray { background: linear-gradient(135deg, #8b0000, #b91c1c); }
    .tc-cong-tac input:checked + .tc-ray::after { transform: translateX(20px); }
    .tc-cong-tac input:focus-visible + .tc-ray { outline: 2px solid #d4af37; outline-offset: 2px; }
    .tc-thanh-luu { position: sticky; bottom: 84px; margin-top: 16px; display: flex; align-items: center;
      justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(255,255,255,.96);
      border: 1px solid #e5e7eb; border-radius: 16px; padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
    .tc-thong-bao { font-size: 13px; color: #6b7280; min-height: 18px; flex: 1 1 200px; }
    .tc-thong-bao.tc-ok { color: #15803d; font-weight: 700; }
    .tc-thong-bao.tc-loi { color: #b91c1c; font-weight: 700; }
    .tc-nut { border: 0; border-radius: 12px; padding: 10px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
      background: linear-gradient(135deg, #8b0000, #4a0000); color: #fff; }
    .tc-nut:disabled { opacity: .45; cursor: not-allowed; }
    .tc-nut-phu { background: #f3f4f6; color: #374151; }
    /* ── 1.9.0: chọn GIAO DIỆN (theme) ── */
    .gd-tieu-de { font-weight: 800; font-size: 17px; margin: 18px 0 4px; display: flex; align-items: center; gap: 8px; }
    .gd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
    .gd-the { border: 2px solid #e5e7eb; border-radius: 18px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
    .gd-the.dang-dung { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
    .gd-mock { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); font-size: 11px; line-height: 1.3; }
    .gd-mock-dau { padding: 7px 9px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
    .gd-mock-dau i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
    .gd-mock-than { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .gd-mock-the { padding: 8px; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(0,0,0,.06); }
    .gd-mock-hang { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
    .gd-mock-nut { text-align: center; padding: 6px; font-weight: 800; }
    .gd-mau { display: flex; gap: 4px; }
    .gd-mau span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
    .gd-ten { font-weight: 800; font-size: 15px; }
    .gd-phu { font-size: 12.5px; color: #6b7280; font-weight: 700; }
    .gd-mo-ta { font-size: 12.5px; color: #4b5563; line-height: 1.45; flex: 1; }
    .gd-nut { border: 0; border-radius: 12px; padding: 10px; font-weight: 800; font-size: 14px; cursor: pointer; min-height: 44px;
      background: linear-gradient(135deg,#92400e,#d97706); color: #fff; }
    .gd-the.dang-dung .gd-nut { background: #dcfce7; color: #166534; cursor: default; }
    .gd-toi-nhan { font-size: 11px; font-weight: 800; background: #1f2937; color: #f9fafb; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
    @media (max-width: 640px) {
      .tc-muc { padding: 12px; gap: 12px; }
      .tc-thanh-luu { bottom: 76px; }
      .tc-nut { flex: 1 1 auto; }
    }
{% endblock %}

{% block content %}
<div class="tc-wrap">
  <!-- ── 1.9.0: GIAO DIỆN (theme) — mọi người dùng, lưu theo máy ── -->
  <section id="giao-dien" aria-labelledby="gd-tieu-de">
    <div class="tc-gioi-thieu">
      <b>🎨 Giao diện</b> — chọn 1 trong 10 phong cách cho <b>máy này</b> (đổi ngay, không cần tải lại trang).
      Chỉ đổi màu sắc / hình khối / kiểu chữ — <b>không đổi</b> số liệu, giá, nút bấm hay cách thao tác.
      Mỗi máy (máy quầy, điện thoại) chọn riêng.
    </div>
    <div class="gd-tieu-de" id="gd-tieu-de">Đang dùng: <span id="gd-dang" style="color:#15803d"></span></div>
    <div class="gd-luoi" id="gd-luoi" role="list"></div>
  </section>

  {% if la_gd %}
  <div class="gd-tieu-de">⚙️ Tính năng thêm</div>
  <div class="tc-gioi-thieu">
    <b>⚙️ Tùy chỉnh</b> — nơi bổ sung một số tính năng thêm. Tính năng nào <b>chưa tích</b> thì app
    giữ nguyên như cũ. Chỉ <b>Giám đốc / Phó Giám đốc</b> đổi được, cần nhập mã PIN khi lưu.
  </div>

  <div class="tc-ds" id="tc-ds">
    {% for t in tuy_chon %}
    <label class="tc-muc{% if t.bat %} tc-bat{% endif %}" data-khoa="{{ t.khoa }}">
      <div class="tc-chu">
        <div class="tc-ten">{{ t.ten }}</div>
        <div class="tc-mo-ta">{{ t.mo_ta }}</div>
        <span class="tc-trang-thai">{% if t.bat %}Đang bật{% else %}Đang tắt{% endif %}</span>
      </div>
      <span class="tc-cong-tac">
        <input type="checkbox" class="tc-o" data-khoa="{{ t.khoa }}" data-goc="{{ '1' if t.bat else '0' }}"
               {% if t.bat %}checked{% endif %} onchange="tcDoi(this)" aria-label="{{ t.ten }}">
        <span class="tc-ray"></span>
      </span>
    </label>
    {% endfor %}
  </div>

  <div class="tc-thanh-luu">
    <div class="tc-thong-bao" id="tc-thong-bao">Chưa có thay đổi.</div>
    <button type="button" class="tc-nut tc-nut-phu" id="tc-hoan" onclick="tcHoanTac()" disabled>↺ Hoàn tác</button>
    <button type="button" class="tc-nut" id="tc-luu" onclick="tcLuu()" disabled>💾 Lưu tùy chỉnh</button>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
// ── Chọn giao diện (1.9.0) — VPGiaoDien nạp sẵn từ _giao_dien_dau.html (defer, chạy trước script này) ──
function gdVe() {
  const dang = VPGiaoDien.lay();
  const t0 = VPGiaoDien.DS.find(t => t.ma === dang) || VPGiaoDien.DS[0];
  document.getElementById('gd-dang').textContent = t0.ten + ' — ' + t0.phu;
  const e = s => String(s).replace(/[&<>"']/g, c => '&#' + c.charCodeAt(0) + ';');
  document.getElementById('gd-luoi').innerHTML = VPGiaoDien.DS.map(t => {
    const [nen, dau, chuDau, mat, chu, phu, nut, chuNut, nhan, bo] = t.xem;
    const on = t.ma === dang;
    return `<div class="gd-the${on ? ' dang-dung' : ''}" role="listitem">
      <div class="gd-mock" style="background:${nen};border-radius:${Math.min(bo, 14)}px" aria-hidden="true">
        <div class="gd-mock-dau" style="background:${dau};color:${chuDau}"><i style="background:${nhan}"></i>Bán hàng</div>
        <div class="gd-mock-than">
          <div class="gd-mock-the" style="background:${mat};color:${chu};border-radius:${Math.max(2, bo - 6)}px">
            <div class="gd-mock-hang"><b>Nhẫn tròn 9999</b><span style="color:${phu}">1 chỉ</span></div>
            <div class="gd-mock-hang"><span style="color:${phu}">Thành tiền</span><b>13.600.000đ</b></div>
            <div class="gd-mock-nut" style="background:${nut};color:${chuNut};border-radius:${Math.max(2, bo - 8)}px">Thanh toán</div>
          </div>
        </div>
      </div>
      <div><div class="gd-ten">${e(t.ten)}${t.toi ? '<span class="gd-toi-nhan">Nền tối</span>' : ''}</div><div class="gd-phu">${e(t.phu)}</div></div>
      <div class="gd-mau" aria-hidden="true">${[dau, mat, nut, nhan].map(c => `<span style="background:${c}"></span>`).join('')}</div>
      <div class="gd-mo-ta">${e(t.mo_ta)}</div>
      <button type="button" class="gd-nut" ${on ? 'disabled aria-disabled="true"' : ''} onclick="gdChon('${t.ma}')"
        aria-label="${on ? 'Đang dùng ' : 'Dùng giao diện '}${e(t.ten)}">${on ? '✓ Đang dùng' : (t.ma ? 'Dùng giao diện này' : '↺ Về mặc định')}</button>
    </div>`;
  }).join('');
}
function gdChon(ma) { VPGiaoDien.dat(ma); gdVe(); }
if (window.VPGiaoDien) gdVe(); else document.addEventListener('DOMContentLoaded', gdVe);

function tcCacO() { return Array.from(document.querySelectorAll('#tc-ds .tc-o')); }

function tcVe() {
  let soDoi = 0;
  tcCacO().forEach(o => {
    const muc = o.closest('.tc-muc');
    const doi = (o.checked ? '1' : '0') !== o.dataset.goc;
    if (doi) soDoi++;
    muc.classList.toggle('tc-bat', o.checked);
    muc.classList.toggle('tc-doi', doi);
    muc.querySelector('.tc-trang-thai').textContent =
      (o.checked ? 'Đang bật' : 'Đang tắt') + (doi ? ' · chưa lưu' : '');
  });
  const tb = document.getElementById('tc-thong-bao');
  tb.className = 'tc-thong-bao';
  tb.textContent = soDoi ? `Có ${soDoi} thay đổi chưa lưu — bấm "Lưu tùy chỉnh".` : 'Chưa có thay đổi.';
  document.getElementById('tc-luu').disabled = !soDoi;
  document.getElementById('tc-hoan').disabled = !soDoi;
}

function tcDoi() { tcVe(); }

function tcHoanTac() {
  tcCacO().forEach(o => { o.checked = o.dataset.goc === '1'; });
  tcVe();
}

function tcLuu() {
  const giaTri = {};
  tcCacO().forEach(o => { giaTri[o.dataset.khoa] = o.checked; });
  askPin({ title: '🔐 Lưu tùy chỉnh', label: 'Nhập mã PIN Giám đốc / Phó Giám đốc' }, async pin => {
    try {
      const r = await fetch('/api/tuy-chinh', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pin, tuy_chinh: giaTri })
      });
      const d = await r.json().catch(() => ({}));
      if (r.status === 403 || !d.success) {
        pinLoi('❌ ' + (d.message || 'Sai mã PIN hoặc không đủ quyền'));
        return 'giu';
      }
      const moi = d.tuy_chinh || {};
      tcCacO().forEach(o => {
        const bat = !!moi[o.dataset.khoa];
        o.checked = bat; o.dataset.goc = bat ? '1' : '0';
      });
      tcVe();
      const tb = document.getElementById('tc-thong-bao');
      tb.className = 'tc-thong-bao tc-ok';
      tb.textContent = '✅ Đã lưu. Các trang đang mở cần tải lại (F5) để áp dụng.';
    } catch (e) {
      const tb = document.getElementById('tc-thong-bao');
      tb.className = 'tc-thong-bao tc-loi';
      tb.textContent = '❌ Lỗi mạng, chưa lưu được: ' + e.message;
    }
  });
}

if (document.getElementById('tc-ds')) tcVe();
</script>
{% endblock %}