{% extends "base.html" %}
{% block title %}Thiết kế tem — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Thiết kế tem sản phẩm{% endblock %}

{% block extra_style %}
.tk-wide{position:relative;width:min(1440px,calc(100vw - 24px));left:50%;transform:translateX(-50%)}
.tk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:linear-gradient(135deg,#4a0000,#7a0f0f);
  border-radius:18px;padding:12px 14px;color:#fde68a;box-shadow:0 8px 24px -12px rgba(74,0,0,.55)}
.tk-bar h1{font-weight:800;font-size:17px;color:#fff7d6;margin-right:6px;letter-spacing:.2px}
.tk-sel{background:#fff8e7;color:#4a0000;border:1px solid #d4af37;border-radius:10px;padding:7px 10px;font-weight:700;font-size:14px;max-width:260px}
.tk-btn{display:inline-flex;align-items:center;gap:6px;border-radius:11px;padding:8px 13px;font-weight:700;font-size:13.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .08s, box-shadow .15s, background .15s;white-space:nowrap;user-select:none}
.tk-btn:active{transform:scale(.97)}
.tk-gold{background:linear-gradient(135deg,#f5d479,#d4a017);color:#3b0000;box-shadow:0 2px 8px -2px rgba(212,160,23,.6)}
.tk-gold:hover{filter:brightness(1.05)}
.tk-ghost{background:rgba(255,255,255,.1);color:#fde68a;border-color:rgba(253,230,138,.35)}
.tk-ghost:hover{background:rgba(255,255,255,.18)}
.tk-light{background:#fff;color:#4a0000;border-color:#e7d3a8}
.tk-light:hover{background:#fffaf0}
.tk-red{background:#fff;color:#b91c1c;border-color:#fecaca}
.tk-red:hover{background:#fef2f2}
.tk-sp{flex:1}
.tk-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.tk-full{grid-column:1/-1;order:-1}
@media(max-width:1000px){.tk-grid{grid-template-columns:1fr}}
.tk-card{background:#fff;border-radius:16px;border:1px solid #efe4cf;box-shadow:0 4px 16px -10px rgba(74,0,0,.25);padding:12px}
.tk-h{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8a5a00;margin:2px 2px 8px}
.tk-add{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tk-add button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:12px;background:#fffaf0;
  border:1px dashed #e0c98f;color:#5b1a00;font-weight:700;font-size:12.5px;cursor:pointer}
.tk-add button:hover{background:#fff1cc;border-style:solid}
.tk-add button span{font-size:19px}
.tk-layers{max-height:360px;overflow:auto;margin-top:6px;display:flex;flex-direction:column;gap:3px}
.tk-layer{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;cursor:pointer;font-size:12.5px;color:#374151;border:1px solid transparent}
.tk-layer:hover{background:#faf5ea}
.tk-layer.on{background:#fff4d6;border-color:#e8c870;color:#4a0000;font-weight:700}
.tk-layer .ic{width:20px;text-align:center;opacity:.85}
.tk-layer .tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-layer .warn{color:#dc2626;font-weight:800}
.tk-stage{background:
  repeating-conic-gradient(#f3efe6 0% 25%, #faf7f0 0% 50%) 50%/18px 18px;border-radius:14px;border:1px solid #eadcbd;
  padding:26px 18px 18px 30px;overflow:auto;position:relative;min-height:220px}
.tk-ruler-x{position:absolute;left:30px;top:4px;height:18px;pointer-events:none}
.tk-ruler-y{position:absolute;left:6px;top:26px;width:20px;pointer-events:none}
.tk-tick{position:absolute;background:#b08a3e}
.tk-tlbl{position:absolute;font-size:9.5px;color:#8a6a2a;font-weight:700}
.tk-paper{position:relative;background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.35),0 0 0 1px #d8c9a3;border-radius:3px}
.tk-paper img{display:block;image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.tk-box{position:absolute;border:1px dashed rgba(59,130,246,.45);cursor:move;border-radius:2px}
.tk-box:hover{border-color:rgba(59,130,246,.9);background:rgba(59,130,246,.05)}
.tk-box.on{border:1.5px solid #2563eb;background:rgba(37,99,235,.07);z-index:5}
.tk-box.tran{border-color:#dc2626 !important;background:rgba(220,38,38,.07)}
.tk-box .h{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #2563eb;border-radius:2px;display:none}
.tk-box.on .h{display:block}
.tk-box .h.e{right:-5px;top:50%;margin-top:-5px;cursor:ew-resize}
.tk-box .h.s{bottom:-5px;left:50%;margin-left:-5px;cursor:ns-resize}
.tk-box .h.se{right:-5px;bottom:-5px;cursor:nwse-resize}
.tk-box .tag{position:absolute;left:-1px;top:-17px;font-size:10px;background:#2563eb;color:#fff;padding:1px 5px;border-radius:4px 4px 0 0;white-space:nowrap;display:none;font-weight:700}
.tk-box.on .tag{display:block}
.tk-hideboxes .tk-box:not(.on){border-color:transparent}
.tk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.tk-zoom{display:flex;align-items:center;gap:6px;background:#fffaf0;border:1px solid #eadcbd;border-radius:10px;padding:4px 8px;font-size:12.5px;color:#5b1a00;font-weight:700}
.tk-chip{font-size:12px;border-radius:999px;padding:4px 10px;background:#f5f0e6;color:#5b1a00;border:1px solid #e6d7b5;cursor:pointer;font-weight:600}
.tk-chip:hover{background:#fff1cc}
.tk-field{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.tk-field label{font-size:11.5px;font-weight:700;color:#6b4a14}
.tk-in{width:100%;border:1px solid #e3d5b5;border-radius:9px;padding:7px 9px;font-size:14px;background:#fffdf8;color:#1f2937}
.tk-in:focus{outline:none;border-color:#d4a017;box-shadow:0 0 0 3px rgba(212,160,23,.18)}
textarea.tk-in{min-height:58px;resize:vertical;font-family:inherit}
.tk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.tk-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tk-seg{display:flex;border:1px solid #e3d5b5;border-radius:10px;overflow:hidden}
.tk-seg button{flex:1;padding:7px 0;font-size:13px;font-weight:800;background:#fffdf8;color:#6b4a14;border-right:1px solid #eee2c6;cursor:pointer}
.tk-seg button:last-child{border-right:none}
.tk-seg button.on{background:#4a0000;color:#fde68a}
.tk-step{display:flex;align-items:center;border:1px solid #e3d5b5;border-radius:10px;overflow:hidden;background:#fffdf8}
.tk-step button{width:28px;flex:0 0 28px;height:34px;font-weight:900;color:#4a0000;background:#fbf4e3;cursor:pointer;font-size:16px}
.tk-step input{flex:1;min-width:0;border:none;text-align:center;font-weight:800;font-size:14px;background:transparent;padding:0}
.tk-step input:focus{outline:none}
.tk-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;padding:4px 0;cursor:pointer}
.tk-check input{width:17px;height:17px;accent-color:#7a0f0f}
.tk-empty{text-align:center;color:#9ca3af;font-size:13px;padding:24px 8px;line-height:1.6}
.tk-warn{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:8px 10px;font-size:12.5px;margin-top:8px}
.tk-note{font-size:12px;color:#6b7280;line-height:1.55}
.tk-mode{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.18);border-radius:12px;padding:4px}
.tk-mode button{border-radius:9px;padding:6px 11px;font-weight:800;font-size:12.5px;color:#fde68a;cursor:pointer}
.tk-mode button.on{background:#fde68a;color:#4a0000}
.tk-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:#1f2937;color:#fff;padding:10px 16px;border-radius:12px;
  font-size:14px;font-weight:600;z-index:9999;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);display:none;max-width:90vw}
.tk-sprow{display:flex;gap:6px;align-items:center;position:relative}
.tk-spdrop{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #e3d5b5;border-radius:10px;z-index:30;max-height:260px;overflow:auto;box-shadow:0 12px 30px -12px rgba(0,0,0,.35);display:none}
.tk-spdrop div{padding:7px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid #f5efe0}
.tk-spdrop div:hover{background:#fff7e0}
.tk-kbd{font-size:11px;color:#8a6a2a;background:#fff7e0;border:1px solid #eadcbd;border-radius:6px;padding:1px 5px;font-weight:700}
{% endblock %}

{% block content %}
<div class="tk-wide">
  <div class="tk-bar">
    <h1>🏷️ Thiết kế tem</h1>
    <select id="tk-mau" class="tk-sel" onchange="tkMoMau(this.value)"></select>
    <button class="tk-btn tk-ghost" onclick="tkMauMoi()" title="Tạo mẫu mới từ mẫu đang mở">＋ Nhân bản mẫu</button>
    <span style="position:relative">
      <button class="tk-btn tk-ghost" onclick="tkMoMauCoSan()" title="Thêm 1 mẫu tem dựng sẵn (tem vàng đuôi dài, tem RFID)">📦 Mẫu có sẵn</button>
      <div id="tk-cosan" class="tk-spdrop" style="min-width:250px"></div>
    </span>
    <button class="tk-btn tk-ghost" onclick="tkDatMacDinh()" title="Nút in tem ở Tồn kho dùng mẫu này">⭐ Đặt mặc định</button>
    <button class="tk-btn tk-ghost" onclick="tkXoaMau()">🗑️ Xóa mẫu</button>
    <span class="tk-sp"></span>
    <div class="tk-mode" title="Cách in tem cho cả tiệm">
      <button id="tk-cd-app" onclick="tkDoiCheDo('app')">In bằng app</button>
      <button id="tk-cd-bt" onclick="tkDoiCheDo('bartender')">BarTender</button>
    </div>
    <button class="tk-btn tk-gold" onclick="tkLuu()">💾 Lưu mẫu</button>
  </div>

  <div class="tk-grid">
    <!-- CỘT TRÁI: thêm ô + danh sách ô -->
    <div class="tk-card">
      <div class="tk-h">Thêm vào tem</div>
      <div class="tk-add">
        <button onclick="tkThem('truong')"><span>🔤</span>Trường dữ liệu</button>
        <button onclick="tkThem('chu')"><span>✍️</span>Chữ cố định</button>
        <button onclick="tkThem('qr')"><span>▦</span>Mã QR</button>
        <button onclick="tkThem('duong')"><span>➖</span>Đường kẻ</button>
        <button onclick="tkThem('khung')" style="grid-column:span 2"><span>▭</span>Khung viền</button>
      </div>
      <div class="tk-h" style="margin-top:14px">Các ô trên tem <span id="tk-dem" style="color:#b08a3e"></span></div>
      <div id="tk-layers" class="tk-layers"></div>
    </div>

    <!-- TRÊN CÙNG: vùng thiết kế (tem dài và thấp nên chiếm trọn chiều ngang) -->
    <div class="tk-card tk-full" style="padding:12px 12px 14px">
      <div class="tk-tools">
        <div class="tk-zoom">🔍
          <button class="tk-chip" onclick="tkZoom(-0.25)">−</button>
          <span id="tk-zoom-lbl">100%</span>
          <button class="tk-chip" onclick="tkZoom(0.25)">＋</button>
          <button class="tk-chip" onclick="tkZoomVua()">Vừa khung</button>
        </div>
        <label class="tk-check" style="padding:0"><input type="checkbox" id="tk-hienkhung" checked onchange="tkVeKhung()"> Hiện khung ô</label>
        <button class="tk-chip" onclick="tkHoanTac()" title="Ctrl+Z">↶ Hoàn tác</button>
        <button class="tk-chip" onclick="tkLamLai()" title="Ctrl+Y">↷ Làm lại</button>
        <span class="tk-sp"></span>
        <div class="tk-sprow" style="min-width:250px">
          <input id="tk-sp-q" class="tk-in" style="padding:6px 9px;font-size:13px" placeholder="🔎 Xem với sản phẩm (mã/tên)…"
                 oninput="tkTimSp()" onfocus="tkTimSp()" onblur="setTimeout(()=>tkSpDrop(false),200)">
          <div id="tk-sp-drop" class="tk-spdrop"></div>
        </div>
      </div>
      <div id="tk-stage" class="tk-stage">
        <div id="tk-rx" class="tk-ruler-x"></div>
        <div id="tk-ry" class="tk-ruler-y"></div>
        <div id="tk-paper" class="tk-paper">
          <img id="tk-img" alt="Xem trước tem">
          <div id="tk-boxes" style="position:absolute;inset:0"></div>
        </div>
      </div>
      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px">
        <div class="tk-note" id="tk-sp-lbl">—</div>
        <span class="tk-sp"></span>
        <button class="tk-btn tk-light" onclick="tkInThu()">🖨️ In thử 1 tem</button>
      </div>
      <div class="tk-note" style="margin-top:8px">
        Ảnh trên là <b>đúng từng chấm</b> sẽ ra giấy (203 chấm/inch). Kéo ô để di chuyển, kéo ô vuông nhỏ để đổi cỡ.
        Bàn phím: <span class="tk-kbd">← ↑ → ↓</span> nhích 1 chấm, <span class="tk-kbd">Shift</span> + mũi tên nhích 1mm,
        <span class="tk-kbd">Delete</span> xóa ô, <span class="tk-kbd">Ctrl+D</span> nhân bản ô, <span class="tk-kbd">Ctrl+Z</span> hoàn tác.
      </div>
      <div id="tk-canhbao"></div>
    </div>

    <!-- thuộc tính ô + khổ tem -->
      <div class="tk-card" id="tk-props"></div>
      <div class="tk-card">
        <div class="tk-h">Khổ tem &amp; căn giấy</div>
        <div class="tk-field"><label>Tên mẫu</label><input id="tk-ten" class="tk-in" oninput="tkDoiTem('ten',this.value,true)"></div>
        <div class="tk-row3">
          <div class="tk-field"><label>Rộng (mm)</label><input id="tk-rong" type="number" step="0.5" class="tk-in" onchange="tkDoiTem('rong_mm',+this.value)"></div>
          <div class="tk-field"><label>Cao (mm)</label><input id="tk-cao" type="number" step="0.5" class="tk-in" onchange="tkDoiTem('cao_mm',+this.value)"></div>
          <div class="tk-field"><label>Khe (mm)</label><input id="tk-khe" type="number" step="0.5" class="tk-in" onchange="tkDoiTem('khe_mm',+this.value)"></div>
        </div>
        <div class="tk-row">
          <div class="tk-field"><label>Lệch ngang (chấm)</label>
            <div class="tk-step"><button onclick="tkNhichTem('lech_x',-1)">−</button><input id="tk-lx" onchange="tkDoiTem('lech_x',parseInt(this.value)||0)"><button onclick="tkNhichTem('lech_x',1)">＋</button></div></div>
          <div class="tk-field"><label>Lệch dọc (chấm)</label>
            <div class="tk-step"><button onclick="tkNhichTem('lech_y',-1)">−</button><input id="tk-ly" onchange="tkDoiTem('lech_y',parseInt(this.value)||0)"><button onclick="tkNhichTem('lech_y',1)">＋</button></div></div>
        </div>
        <div class="tk-row">
          <div class="tk-field"><label>Độ đậm (0–19)</label><input id="tk-dam" type="number" min="0" max="19" placeholder="theo máy in" class="tk-in" onchange="tkDoiTem('do_dam',this.value===''?null:+this.value)"></div>
          <div class="tk-field"><label>Tốc độ (1–8)</label><input id="tk-tocdo" type="number" min="1" max="8" placeholder="theo máy in" class="tk-in" onchange="tkDoiTem('toc_do',this.value===''?null:+this.value)"></div>
        </div>
        <div class="tk-note">Tem in lệch so với giấy thì chỉnh "Lệch" rồi bấm <b>In thử</b> — 8 chấm ≈ 1mm. Máy in: <b id="tk-mayin">—</b></div>
      </div>
  </div>
</div>
<div id="tk-toast" class="tk-toast"></div>
{% endblock %}

{% block scripts %}
<script>
const TK = { mau: null, mauId: null, ds: [], truong: [], font: [], chon: null, zoom: 1.5, spId: null,
             khung: {}, canhBao: [], lichSu: [], tuongLai: [], cheDo: 'app', dpm: 7.992 };
const $ = id => document.getElementById(id);
const ICON = { chu: '✍️', qr: '▦', duong: '➖', khung: '▭' };

function tkToast(t, ms) {
  const el = $('tk-toast'); el.textContent = t; el.style.display = 'block';
  clearTimeout(el._t); el._t = setTimeout(() => el.style.display = 'none', ms || 2400);
}
async function tkApi(url, body, method) {
  const r = await fetch(url, body === undefined ? {} : {method: method || 'POST',
    headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)});
  let d = {}; try { d = await r.json(); } catch (e) {}
  if (!r.ok && !d.message) d.message = d.error || ('Lỗi ' + r.status);
  return d;
}
const mmTxt = v => (v / TK.dpm).toFixed(1).replace('.', ',');
function tenO(e) {
  if (e.loai === 'qr') return 'Mã QR · ' + (e.noi_dung || '');
  if (e.loai === 'duong') return 'Đường kẻ';
  if (e.loai === 'khung') return 'Khung viền';
  let s = (e.noi_dung || '').replace(/\{([a-z_]+)\}/g, (m, k) => { const t = TK.truong.find(x => x.khoa === k); return '‹' + (t ? t.ten : k) + '›'; });
  return s || '(ô chữ trống)';
}

// ── Lịch sử (hoàn tác) ──
function tkGhiLichSu() {
  TK.lichSu.push(JSON.stringify(TK.mau)); if (TK.lichSu.length > 80) TK.lichSu.shift(); TK.tuongLai = [];
}
function tkHoanTac() { if (!TK.lichSu.length) return; TK.tuongLai.push(JSON.stringify(TK.mau)); TK.mau = JSON.parse(TK.lichSu.pop()); tkDongBo(); }
function tkLamLai() { if (!TK.tuongLai.length) return; TK.lichSu.push(JSON.stringify(TK.mau)); TK.mau = JSON.parse(TK.tuongLai.pop()); tkDongBo(); }

// ── Tải dữ liệu ──
// Thoát HTML cho dữ liệu người dùng nhập (tên/mã sản phẩm, tên mẫu) trước khi ghép vào innerHTML (15/10/2026).
function _tkx(s) { return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'); }
async function tkKhoiTao() {
  const d = await tkApi('/api/tem/khoi-tao');
  if (!d.success) { $('tk-props').innerHTML = '<div class="tk-empty">' + _tkx(d.message || 'Không tải được') + '</div>'; return; }
  TK.ds = d.mau; TK.truong = d.truong; TK.font = d.font; TK.cheDo = d.che_do; TK.dpm = d.cham_moi_mm;
  $('tk-mayin').textContent = d.may_in || '—';
  tkVeCheDo(); tkVeDsMau();
  const md = TK.ds.find(m => m.mac_dinh) || TK.ds[0];
  if (md) await tkMoMau(md.id);
}
function tkVeDsMau() {
  $('tk-mau').innerHTML = TK.ds.map(m => `<option value="${m.id}" ${m.id == TK.mauId ? 'selected' : ''}>${m.mac_dinh ? '⭐ ' : ''}${_tkx(m.ten)}</option>`).join('');
}
function tkVeCheDo() {
  $('tk-cd-app').classList.toggle('on', TK.cheDo === 'app');
  $('tk-cd-bt').classList.toggle('on', TK.cheDo === 'bartender');
}
async function tkMoMau(id) {
  const d = await tkApi('/api/tem/mau/' + id);
  if (!d.success) return tkToast(d.message || 'Không mở được mẫu');
  TK.mauId = +id; TK.mau = d.mau; TK.chon = null; TK.lichSu = []; TK.tuongLai = [];
  tkVeDsMau(); TK._canVua = true; tkDongBo();
}

// ── Đồng bộ giao diện với TK.mau ──
function tkDongBo() {
  const m = TK.mau;
  $('tk-ten').value = m.ten || ''; $('tk-rong').value = m.rong_mm; $('tk-cao').value = m.cao_mm; $('tk-khe').value = m.khe_mm;
  $('tk-lx').value = m.lech_x || 0; $('tk-ly').value = m.lech_y || 0;
  $('tk-dam').value = m.do_dam ?? ''; $('tk-tocdo').value = m.toc_do ?? '';
  tkVeLayers(); tkVeProps(); tkXemTruoc();
}
function tkVeLayers() {
  const tran = new Set(TK.canhBao.map(c => c.id));
  $('tk-dem').textContent = '(' + TK.mau.phan_tu.length + ')';
  $('tk-layers').innerHTML = TK.mau.phan_tu.map((e, i) =>
    `<div class="tk-layer ${TK.chon === i ? 'on' : ''}" onclick="tkChon(${i})"><span class="ic">${ICON[e.loai] || '✍️'}</span>
       <span class="tx">${tenO(e).replace(/</g, '&lt;')}</span>${tran.has(e.id) ? '<span class="warn" title="Chữ tràn khung">!</span>' : ''}</div>`).join('')
    || '<div class="tk-empty">Tem chưa có ô nào.<br>Bấm nút phía trên để thêm.</div>';
}
function tkChon(i) { TK.chon = i; tkVeLayers(); tkVeProps(); tkVeKhung(); }

// ── Xem trước (máy chủ vẽ đúng ảnh sẽ in) ──
let _xtT = null, _xtSo = 0;
function tkXemTruoc(ngay) {
  clearTimeout(_xtT);
  _xtT = setTimeout(async () => {
    const so = ++_xtSo;
    const d = await tkApi('/api/tem/xem-truoc', {mau: TK.mau, product_id: TK.spId});
    if (so !== _xtSo || !d.success) return;
    $('tk-img').src = 'data:image/png;base64,' + d.png;
    TK.w = d.rong; TK.h = d.cao; TK.khung = d.khung || {}; TK.canhBao = d.canh_bao || [];
    TK.spId = d.san_pham.id;
    $('tk-sp-lbl').innerHTML = 'Đang xem với: <b>' + _tkx(d.san_pham.ma_hang) + '</b> · ' + _tkx(d.san_pham.ten);
    if (TK._canVua) { TK._canVua = false; tkZoomVua(); }
    tkCo(); tkVeKhung(); tkVeLayers();
    $('tk-canhbao').innerHTML = TK.canhBao.length
      ? `<div class="tk-warn">⚠️ ${TK.canhBao.length} ô bị <b>tràn chữ</b> với sản phẩm này (viền đỏ). Nới khung, bật "Tự thu nhỏ" hoặc giảm cỡ chữ.</div>` : '';
  }, ngay ? 0 : 110);
}
function tkCo() {
  const p = $('tk-paper'); p.style.width = (TK.w * TK.zoom) + 'px'; p.style.height = (TK.h * TK.zoom) + 'px';
  $('tk-zoom-lbl').textContent = Math.round(TK.zoom * 100) + '%';
  tkVeThuoc();
}
function tkZoom(d) { TK.zoom = Math.max(0.5, Math.min(8, Math.round((TK.zoom + d) * 4) / 4)); tkCo(); tkVeKhung(); }
function tkZoomVua() {
  if (!TK.w) return;
  const st = $('tk-stage').clientWidth - 60;
  TK.zoom = Math.max(0.5, Math.min(8, Math.floor(st / TK.w * 4) / 4)); tkCo(); tkVeKhung();
}
function tkVeThuoc() {
  const z = TK.zoom, mmW = TK.mau.rong_mm, mmH = TK.mau.cao_mm;
  let hx = '', hy = '';
  for (let m = 0; m <= mmW; m++) {
    const x = m * TK.dpm * z, dai = m % 10 === 0 ? 12 : (m % 5 === 0 ? 8 : 4);
    if (z * TK.dpm < 3 && m % 5) continue;
    hx += `<div class="tk-tick" style="left:${x}px;top:${18 - dai}px;width:1px;height:${dai}px"></div>`;
    if (m % 10 === 0) hx += `<div class="tk-tlbl" style="left:${x + 2}px;top:-1px">${m}</div>`;
  }
  for (let m = 0; m <= mmH; m++) {
    const y = m * TK.dpm * z, dai = m % 5 === 0 ? 10 : 5;
    hy += `<div class="tk-tick" style="top:${y}px;left:${20 - dai}px;height:1px;width:${dai}px"></div>`;
    if (m % 5 === 0) hy += `<div class="tk-tlbl" style="top:${y - 12}px;left:0">${m}</div>`;
  }
  $('tk-rx').innerHTML = hx; $('tk-ry').innerHTML = hy;
}

// ── Khung chọn / kéo thả ──
function tkVeKhung() {
  const z = TK.zoom, lx = TK.mau.lech_x || 0, ly = TK.mau.lech_y || 0;
  $('tk-paper').classList.toggle('tk-hideboxes', !$('tk-hienkhung').checked);
  const tran = new Set(TK.canhBao.map(c => c.id));
  $('tk-boxes').innerHTML = TK.mau.phan_tu.map((e, i) => {
    let b = TK.khung[e.id];
    if (!b) b = [e.x + lx, e.y + ly, e.x + lx + (e.w || 30), e.y + ly + (e.h || 12)];
    const coW = e.loai !== 'qr';
    return `<div class="tk-box ${TK.chon === i ? 'on' : ''} ${tran.has(e.id) ? 'tran' : ''}" data-i="${i}"
      style="left:${b[0] * z}px;top:${b[1] * z}px;width:${(b[2] - b[0]) * z}px;height:${(b[3] - b[1]) * z}px">
      <div class="tag">${tenO(e).replace(/</g, '&lt;').slice(0, 40)} · ${mmTxt(e.x)}×${mmTxt(e.y)}mm</div>
      ${coW ? '<div class="h e" data-h="e"></div><div class="h s" data-h="s"></div><div class="h se" data-h="se"></div>' : ''}
    </div>`;
  }).join('');
}
let _keo = null;
$('tk-boxes').addEventListener('pointerdown', ev => {
  const box = ev.target.closest('.tk-box'); if (!box) { TK.chon = null; tkVeLayers(); tkVeProps(); tkVeKhung(); return; }
  const i = +box.dataset.i, e = TK.mau.phan_tu[i];
  if (TK.chon !== i) { TK.chon = i; tkVeLayers(); tkVeProps(); tkVeKhung(); }
  const b = TK.khung[e.id] || [e.x, e.y, e.x + (e.w || 30), e.y + (e.h || 12)];
  _keo = { i, h: ev.target.dataset.h || null, sx: ev.clientX, sy: ev.clientY, x: e.x, y: e.y,
           w: e.w || (b[2] - b[0]), hh: e.h || (b[3] - b[1]), da: false };
  ev.preventDefault();
  document.querySelector(`.tk-box[data-i="${i}"]`)?.setPointerCapture?.(ev.pointerId);
});
window.addEventListener('pointermove', ev => {
  if (!_keo) return;
  const dx = Math.round((ev.clientX - _keo.sx) / TK.zoom), dy = Math.round((ev.clientY - _keo.sy) / TK.zoom);
  if (!_keo.da && Math.abs(dx) + Math.abs(dy) < 1) return;
  if (!_keo.da) { tkGhiLichSu(); _keo.da = true; }
  const e = TK.mau.phan_tu[_keo.i];
  if (!_keo.h) { e.x = _keo.x + dx; e.y = _keo.y + dy; }
  else {
    if (_keo.h.includes('e')) e.w = Math.max(4, _keo.w + dx);
    if (_keo.h.includes('s')) e.h = Math.max(2, _keo.hh + dy);
  }
  // Di chuyển khung ngay (mượt), ảnh thật vẽ lại theo nhịp
  const z = TK.zoom, lx = TK.mau.lech_x || 0, ly = TK.mau.lech_y || 0, el = document.querySelector(`.tk-box[data-i="${_keo.i}"]`);
  if (el) {
    el.style.left = (e.x + lx) * z + 'px'; el.style.top = (e.y + ly) * z + 'px';
    if (_keo.h) { if (e.w) el.style.width = e.w * z + 'px'; if (e.h) el.style.height = e.h * z + 'px'; }
    const tag = el.querySelector('.tag'); if (tag) tag.textContent = tenO(e).slice(0, 40) + ' · ' + mmTxt(e.x) + '×' + mmTxt(e.y) + 'mm';
  }
  tkXemTruoc();
});
window.addEventListener('pointerup', () => { if (_keo && _keo.da) { tkVeProps(); tkXemTruoc(true); } _keo = null; });

document.addEventListener('keydown', ev => {
  const tag = (document.activeElement && document.activeElement.tagName) || '';
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)) return;
  if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'z') { ev.preventDefault(); return tkHoanTac(); }
  if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'y') { ev.preventDefault(); return tkLamLai(); }
  if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 's') { ev.preventDefault(); return tkLuu(); }
  if (TK.chon === null) return;
  const e = TK.mau.phan_tu[TK.chon];
  const buoc = ev.shiftKey ? 8 : 1;
  const mv = {ArrowLeft: [-buoc, 0], ArrowRight: [buoc, 0], ArrowUp: [0, -buoc], ArrowDown: [0, buoc]}[ev.key];
  if (mv) { ev.preventDefault(); tkGhiLichSu(); e.x += mv[0]; e.y += mv[1]; tkVeProps(); tkXemTruoc(); tkVeKhung(); return; }
  if (ev.key === 'Delete' || ev.key === 'Backspace') { ev.preventDefault(); tkXoaO(); }
  if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'd') { ev.preventDefault(); tkNhanBanO(); }
});

// ── Thêm / xóa ô ──
function tkIdMoi(g) { let n = 1; while (TK.mau.phan_tu.some(e => e.id === g + n)) n++; return g + n; }
function tkThem(loai) {
  tkGhiLichSu();
  const cx = Math.round((TK.w || 860) / 2 - 40), cy = 10;
  let e;
  if (loai === 'truong') e = {id: tkIdMoi('o'), loai: 'chu', x: cx, y: cy, noi_dung: '{ten}', font: 'times', co: 3.9, w: 150, h: 12, xuong_dong: true, tu_co: true};
  else if (loai === 'chu') e = {id: tkIdMoi('chu'), loai: 'chu', x: cx, y: cy, noi_dung: 'Chữ mới', font: 'times', co: 3.9};
  else if (loai === 'qr') e = {id: tkIdMoi('qr'), loai: 'qr', x: cx, y: 5, noi_dung: '{ma_hang}', mo_dun: 3};
  else if (loai === 'duong') e = {id: tkIdMoi('duong'), loai: 'duong', x: cx, y: 40, w: 120, h: 1};
  else e = {id: tkIdMoi('khung'), loai: 'khung', x: cx, y: 4, w: 120, h: 60, net: 1};
  TK.mau.phan_tu.push(e); TK.chon = TK.mau.phan_tu.length - 1;
  tkVeLayers(); tkVeProps(); tkXemTruoc(true);
  if (loai === 'truong') setTimeout(() => $('tk-p-truong')?.focus(), 50);
}
function tkXoaO() {
  if (TK.chon === null) return; tkGhiLichSu();
  TK.mau.phan_tu.splice(TK.chon, 1); TK.chon = null; tkVeLayers(); tkVeProps(); tkXemTruoc(true);
}
function tkNhanBanO() {
  if (TK.chon === null) return; tkGhiLichSu();
  const e = JSON.parse(JSON.stringify(TK.mau.phan_tu[TK.chon])); e.id = tkIdMoi(e.loai === 'chu' ? 'o' : e.loai); e.x += 8; e.y += 8;
  TK.mau.phan_tu.push(e); TK.chon = TK.mau.phan_tu.length - 1; tkVeLayers(); tkVeProps(); tkXemTruoc(true);
}
function tkDoiThuTu(d) {
  const i = TK.chon, j = i + d; if (i === null || j < 0 || j >= TK.mau.phan_tu.length) return;
  tkGhiLichSu(); const a = TK.mau.phan_tu; [a[i], a[j]] = [a[j], a[i]]; TK.chon = j; tkVeLayers(); tkXemTruoc(true);
}

// ── Bảng thuộc tính ──
function tkDoi(k, v, khongGhi) {
  const e = TK.mau.phan_tu[TK.chon]; if (!e) return;
  if (!khongGhi) tkGhiLichSu();
  if (v === null || v === '' || v === false) delete e[k]; else e[k] = v;
  tkVeLayers(); tkXemTruoc();
}
function tkBuoc(k, d, mac, lo, hi, so) {
  const e = TK.mau.phan_tu[TK.chon]; if (!e) return;
  let v = +(e[k] ?? mac) + d; v = Math.max(lo, Math.min(hi, +v.toFixed(so ?? 2)));
  tkDoi(k, v); const ip = $('tk-p-' + k); if (ip) ip.value = k === 'co' ? v.toString().replace('.', ',') : v;
}
function tkDoiTem(k, v, khongVeLai) { tkGhiLichSu(); TK.mau[k] = v; if (k === 'ten') return; tkXemTruoc(); if (k.startsWith('lech')) tkVeKhung(); }
function tkNhichTem(k, d) { tkGhiLichSu(); TK.mau[k] = (TK.mau[k] || 0) + d; $(k === 'lech_x' ? 'tk-lx' : 'tk-ly').value = TK.mau[k]; tkXemTruoc(); }
function tkChenTruong(k) {
  const ta = $('tk-p-nd'); if (!ta) return;
  const s = ta.selectionStart ?? ta.value.length, t = ta.value;
  ta.value = t.slice(0, s) + '{' + k + '}' + t.slice(ta.selectionEnd ?? s);
  tkDoi('noi_dung', ta.value); ta.focus();
}
function tkVeProps() {
  const e = TK.mau && TK.mau.phan_tu[TK.chon];
  const P = $('tk-props');
  if (!e) { P.innerHTML = '<div class="tk-h">Thuộc tính</div><div class="tk-empty">👆 Bấm vào một ô trên tem<br>để chỉnh nội dung, cỡ chữ, vị trí.</div>'; return; }
  const soO = (lbl, k, mac, lo, hi, buoc) => `<div class="tk-field"><label>${lbl}</label><div class="tk-step">
      <button onclick="tkBuoc('${k}',-${buoc},${mac},${lo},${hi})">−</button>
      <input id="tk-p-${k}" value="${e[k] ?? mac}" onchange="tkDoi('${k}', Math.max(${lo},Math.min(${hi},+this.value||0)))">
      <button onclick="tkBuoc('${k}',${buoc},${mac},${lo},${hi})">＋</button></div></div>`;
  const viTri = `<div class="tk-row">${soO('X (chấm)', 'x', 0, -200, 2400, 1)}${soO('Y (chấm)', 'y', 0, -200, 2400, 1)}</div>
    <div class="tk-note" style="margin:-4px 0 8px">= ${mmTxt(e.x)} × ${mmTxt(e.y)} mm tính từ góc trên trái</div>`;
  let h = `<div class="tk-h" style="display:flex;align-items:center;gap:6px">${ICON[e.loai] || '✍️'} Thuộc tính ô
      <span class="tk-sp"></span>
      <button class="tk-chip" title="Đưa ra trước" onclick="tkDoiThuTu(1)">⬆</button>
      <button class="tk-chip" title="Đưa ra sau" onclick="tkDoiThuTu(-1)">⬇</button></div>`;
  if (e.loai === 'chu') {
    const trg = TK.truong.map(t => `<option value="${t.khoa}">${t.ten}</option>`).join('');
    h += `<div class="tk-field"><label>Nội dung — chữ cố định và/hoặc trường dữ liệu</label>
        <textarea id="tk-p-nd" class="tk-in" oninput="tkDoi('noi_dung',this.value,true)" onfocus="tkGhiLichSu()">${(e.noi_dung || '').replace(/</g, '&lt;')}</textarea></div>
      <div class="tk-field"><label>Chèn trường dữ liệu</label>
        <select id="tk-p-truong" class="tk-in" onchange="if(this.value){tkChenTruong(this.value);this.value=''}"><option value="">＋ Chọn trường để chèn…</option>${trg}</select></div>
      <div class="tk-row">
        <div class="tk-field"><label>Phông chữ</label><select class="tk-in" onchange="tkDoi('font',this.value)">
          ${TK.font.map(f => `<option value="${f.khoa}" ${(e.font || 'times') === f.khoa ? 'selected' : ''}>${f.ten}</option>`).join('')}</select></div>
        <div class="tk-field"><label>Cỡ chữ (pt)</label><div class="tk-step">
          <button onclick="tkBuoc('co',-0.1,3.9,1,72)">−</button>
          <input id="tk-p-co" value="${String(e.co ?? 3.9).replace('.', ',')}" onchange="tkDoi('co', Math.max(1,+this.value.replace(',','.')||3.9))">
          <button onclick="tkBuoc('co',0.1,3.9,1,72)">＋</button></div></div>
      </div>
      <div class="tk-field"><label>Kiểu chữ &amp; căn lề</label>
        <div style="display:flex;gap:6px">
          <div class="tk-seg" style="flex:0 0 96px">
            <button class="${e.dam ? 'on' : ''}" onclick="tkDoi('dam',!${!!e.dam});tkVeProps()"><b>B</b></button>
            <button class="${e.nghieng ? 'on' : ''}" onclick="tkDoi('nghieng',!${!!e.nghieng});tkVeProps()"><i>I</i></button></div>
          <div class="tk-seg" style="flex:1">
            ${[['trai', '⇤'], ['giua', '↔'], ['phai', '⇥']].map(([k, t]) => `<button class="${(e.can || 'trai') === k ? 'on' : ''}" onclick="tkDoi('can','${k}');tkVeProps()">${t}</button>`).join('')}</div>
        </div></div>
      <label class="tk-check"><input type="checkbox" ${e.xuong_dong ? 'checked' : ''} onchange="tkDoi('xuong_dong',this.checked);if(this.checked&&!TK.mau.phan_tu[TK.chon].w){tkDoi('w',150,true)}tkVeProps()"> Tự xuống dòng trong khung</label>
      <label class="tk-check"><input type="checkbox" ${e.tu_co ? 'checked' : ''} onchange="tkDoi('tu_co',this.checked);if(this.checked&&!TK.mau.phan_tu[TK.chon].w){tkDoi('w',150,true)}tkVeProps()"> Tự thu nhỏ chữ cho vừa khung</label>
      <label class="tk-check"><input type="checkbox" ${e.an_neu_trong ? 'checked' : ''} onchange="tkDoi('an_neu_trong',this.checked)"> Ẩn ô khi dữ liệu trống</label>
      ${viTri}
      <div class="tk-row">${soO('Rộng khung', 'w', 0, 0, 2400, 1)}${soO('Cao khung', 'h', 0, 0, 2400, 1)}</div>
      ${e.xuong_dong ? `<div class="tk-row">${soO('Thụt dòng 2+', 'thut_dong', 0, -200, 400, 1)}${soO('Giãn dòng', 'gian_dong', 1, 0.6, 3, 0.05)}</div>` : ''}`;
  } else if (e.loai === 'qr') {
    h += `<div class="tk-field"><label>Nội dung mã QR</label>
        <input class="tk-in" value="${(e.noi_dung || '').replace(/"/g, '&quot;')}" onchange="tkDoi('noi_dung',this.value)"></div>
      <div class="tk-note" style="margin:-4px 0 8px">Thường để <b>{ma_hang}</b> — máy quét kiểm kho đọc mã này.</div>
      ${soO('Cỡ ô QR (chấm)', 'mo_dun', 3, 1, 12, 1)}
      <div class="tk-note" style="margin:-4px 0 8px">Mỗi ô vuông của mã QR = số chấm này. 3 chấm là vừa cho tem 12mm; nhỏ hơn máy quét khó đọc.</div>
      ${viTri}`;
  } else {
    h += `${viTri}<div class="tk-row">${soO('Rộng', 'w', 1, 1, 2400, 1)}${soO('Cao', 'h', 1, 1, 2400, 1)}</div>
      ${e.loai === 'khung' ? soO('Độ dày viền', 'net', 1, 1, 10, 1) : ''}`;
  }
  h += `<div style="display:flex;gap:6px;margin-top:6px">
      <button class="tk-btn tk-light" style="flex:1;justify-content:center" onclick="tkNhanBanO()">⧉ Nhân bản ô</button>
      <button class="tk-btn tk-red" style="flex:1;justify-content:center" onclick="tkXoaO()">🗑️ Xóa ô</button></div>`;
  P.innerHTML = h;
}

// ── Sản phẩm xem thử ──
let _spT = null;
function tkSpDrop(on) { $('tk-sp-drop').style.display = on ? 'block' : 'none'; }
function tkTimSp() {
  clearTimeout(_spT);
  _spT = setTimeout(async () => {
    const d = await tkApi('/api/tem/tim-sp?q=' + encodeURIComponent($('tk-sp-q').value.trim()));
    if (!d.success) return;
    $('tk-sp-drop').innerHTML = d.ds.map(p => `<div onmousedown="tkChonSp(${p.id})"><b>${_tkx(p.ma_hang)}</b> · ${_tkx(p.ten)} <span style="color:#9ca3af">${_tkx(p.loai_vang)}</span></div>`).join('')
      || '<div style="color:#9ca3af">Không tìm thấy</div>';
    tkSpDrop(true);
  }, 180);
}
function tkChonSp(id) { TK.spId = id; tkSpDrop(false); $('tk-sp-q').value = ''; tkXemTruoc(true); }

// ── Lưu / mẫu ──
async function tkLuu() {
  const d = await tkApi('/api/tem/mau', {id: TK.mauId, mau: TK.mau});
  if (!d.success) return tkToast('❌ ' + (d.message || 'Không lưu được'));
  TK.ds = d.mau; TK.mauId = d.id; tkVeDsMau(); tkToast('✅ Đã lưu mẫu "' + TK.mau.ten + '"');
}
async function tkMauMoi() {
  const ten = prompt('Tên mẫu mới:', (TK.mau.ten || 'Mẫu tem') + ' (bản sao)'); if (!ten) return;
  const m = JSON.parse(JSON.stringify(TK.mau)); m.ten = ten;
  const d = await tkApi('/api/tem/mau', {mau: m});
  if (!d.success) return tkToast('❌ ' + (d.message || 'Không tạo được'));
  TK.ds = d.mau; await tkMoMau(d.id); tkToast('✅ Đã tạo mẫu "' + ten + '"');
}
async function tkMoMauCoSan() {
  const box = $('tk-cosan');
  if (box.style.display === 'block') { box.style.display = 'none'; return; }
  const d = await tkApi('/api/tem/mau-co-san');
  if (!d.success) return tkToast('❌ ' + (d.message || 'Không tải được mẫu có sẵn'));
  box.innerHTML = d.ds.map(m => `<div onclick="tkThemMauCoSan(${m.stt})">➕ ${_tkx(m.ten)}</div>`).join('');
  box.style.display = 'block';
}
async function tkThemMauCoSan(stt) {
  $('tk-cosan').style.display = 'none';
  const d = await tkApi('/api/tem/mau-co-san', {stt});
  if (!d.success) return tkToast('❌ ' + (d.message || 'Không thêm được'));
  TK.ds = d.mau; await tkMoMau(d.id); tkToast('✅ Đã thêm mẫu "' + TK.mau.ten + '" — sửa xong nhớ 💾 Lưu mẫu');
}
async function tkDatMacDinh() {
  const d = await tkApi('/api/tem/mau/' + TK.mauId + '/mac-dinh', {});
  if (!d.success) return tkToast('❌ ' + (d.message || 'Lỗi'));
  TK.ds = d.mau; tkVeDsMau(); tkToast('⭐ Nút "In tem" ở Tồn kho sẽ dùng mẫu này');
}
async function tkXoaMau() {
  if (!confirm('Xóa mẫu "' + TK.mau.ten + '"? Không hoàn tác được.')) return;
  const d = await tkApi('/api/tem/mau/' + TK.mauId, {}, 'DELETE');
  if (!d.success) return tkToast('❌ ' + (d.message || 'Không xóa được'));
  TK.ds = d.mau; await tkMoMau((TK.ds.find(m => m.mac_dinh) || TK.ds[0]).id); tkToast('Đã xóa mẫu');
}
async function tkInThu() {
  // In thử là in tem thật → cùng chính sách các đường in tem khác: có quyền In tem hợp lệ thì in thẳng, KHÔNG PIN
  // (chủ sở hữu chốt 15/10/2026). Máy chủ vẫn kiểm vai trò + quyền In tem từ CSDL trước khi gửi lệnh.
  tkToast('Đang gửi lệnh in thử…', 6000);
  const d = await tkApi('/api/tem/in-thu', {mau: TK.mau, product_id: TK.spId});
  tkToast(d.success ? '🖨️ Đã gửi 1 tem thử tới ' + (d.printer || 'máy in') : '❌ ' + (d.message || d.error || 'Lỗi in'), 4500);
}
function tkDoiCheDo(v) {
  if (v === TK.cheDo) return;
  const hoi = v === 'app' ? 'Chuyển cả tiệm sang IN TEM BẰNG APP (không cần BarTender)?\nNút In tem ở Tồn kho sẽ dùng mẫu ⭐ mặc định. Nhập PIN Giám đốc:'
                          : 'Quay về in tem bằng BarTender? Nhập PIN Giám đốc:';
  askPin(hoi, async pin => {
    const d = await tkApi('/api/tem/che-do', {che_do: v, pin});
    if (!d.success) return tkToast('❌ ' + (d.error === 'forbidden_role' ? 'Sai PIN hoặc không đủ quyền' : (d.message || d.error)));
    TK.cheDo = v; tkVeCheDo(); tkToast(v === 'app' ? '✅ Đã chuyển sang in tem bằng app' : 'Đã quay về BarTender');
  });
}
window.addEventListener('resize', () => { tkVeKhung(); });
tkKhoiTao();
</script>
{% endblock %}