{% extends 'base.html' %}
{%- set HD = (che_do == 'hoa_don') -%}
{% block title %}{{ 'Mẫu hóa đơn' if HD else 'Mẫu giấy đảm bảo' }} — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}{{ 'Mẫu hóa đơn bán hàng của cửa hàng' if HD else 'Mẫu giấy đảm bảo của cửa hàng' }}{% endblock %}

{% block extra_style %}
  .mg-the { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:14px 16px; }
  .mg-tieu { font-weight:800; color:#1f2937; margin-bottom:6px; }
  .mg-goi { font-size:12px; color:#6b7280; }
  .mg-nut { font-weight:700; font-size:14px; padding:9px 14px; border-radius:12px; border:1px solid #d1d5db;
            background:#f9fafb; color:#111827; cursor:pointer; }
  .mg-nut:disabled { opacity:.5; cursor:not-allowed; }
  .mg-nut-chinh { background:#8b0000; border-color:#8b0000; color:#fff; }
  .mg-nut-vang { background:linear-gradient(135deg,#d4af37,#f5d76e); border-color:#c9a227; color:#3b2f00; }
  .mg-nut-do { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
  .mg-o-nhap { font-size:16px; padding:7px 10px; border:1px solid #d1d5db; border-radius:10px; background:#fff; }
  .mg-luoi { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  .mg-luoi > div { min-width:0; }
  .mg-the select, .mg-the input { max-width:100%; }
  @media (min-width: 1024px) { .mg-luoi { grid-template-columns: 340px minmax(0,1fr); } }
  #mg-xem-ngoai { position:relative; width:100%; overflow:hidden; background:#e5e7eb; border-radius:12px; }
  #mg-xem { position:absolute; left:0; top:0; transform-origin:0 0; }
  #mg-xem .mg-trang { box-shadow:0 2px 10px rgba(0,0,0,.25); }
  #mg-xem .mg-o { cursor:move; outline:1px dashed rgba(37,99,235,.55); touch-action:none; min-height:1em; }
  #mg-xem .mg-o.mg-chon { outline:2px solid #2563eb; background:rgba(37,99,235,.08); }
  #mg-xem .mg-o.mg-loi { outline:2px solid #dc2626; }
  .mg-nhan-o { position:absolute; left:-1px; bottom:100%; font:700 9px/1.4 system-ui,Arial,sans-serif;
               background:#2563eb; color:#fff; padding:0 4px; border-radius:3px 3px 0 0; white-space:nowrap;
               pointer-events:none; }
  .mg-tay { position:absolute; right:-6px; top:50%; width:12px; height:22px; margin-top:-11px;
            background:#2563eb; border-radius:4px; cursor:ew-resize; touch-action:none; }
  .mg-ds-truong button { display:flex; width:100%; justify-content:space-between; align-items:center;
            text-align:left; padding:7px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
            font-size:14px; cursor:pointer; margin-bottom:4px; }
  .mg-ds-truong button.dang-chon { border-color:#2563eb; background:#eff6ff; font-weight:700; }
  .mg-dong-ct { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; font-size:14px; }
  .mg-dong-ct label { min-width:92px; color:#4b5563; font-size:13px; }
  .mg-msg-ok { color:#047857; font-weight:700; }
  .mg-msg-loi { color:#b91c1c; font-weight:700; }
  .mg-tay-vung { position:absolute; left:50%; bottom:-7px; width:46px; height:14px; margin-left:-23px;
                 background:#dc2626; border-radius:6px; cursor:ns-resize; touch-action:none; }
  .mg-tay-vung::after { content:'⇕ đáy vùng hàng'; position:absolute; left:52px; top:-2px; white-space:nowrap;
                 font:700 10px/1.6 system-ui,Arial,sans-serif; color:#dc2626; }
  #mg-ban-in { display:none; }
  body.mg-dang-in > *:not(#mg-ban-in) { display:none !important; }
  body.mg-dang-in #mg-ban-in { display:block !important; }
  body.mg-dang-in { padding:0 !important; margin:0 !important; background:#fff !important; }
{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-3 sm:px-4 py-3 space-y-3">

  <div class="mg-the">
    {% if HD %}
    <div class="mg-tieu">🧾 Mẫu hóa đơn bán hàng bằng ảnh của cửa hàng</div>
    <div class="mg-goi">
      Chọn ảnh hóa đơn của tiệm (PNG/JPG) → thêm thông tin + các <b>cột hàng</b> → <b>kéo</b> từng ô tới đúng chỗ →
      đặt <b>vùng hàng</b> (khung đỏ) → In thử → Lưu → <b>✅ Dùng mẫu này</b>. Nhiều món hơn vùng hàng thì
      hóa đơn <b>tự sang trang 2, 3…</b> (không thu nhỏ chữ). Đây là hóa đơn bán hàng của tiệm — không phải hóa đơn điện tử.
      Chưa chọn mẫu nào thì vẫn in hóa đơn kiểu cũ như trước.
    </div>
    {% else %}
    <div class="mg-tieu">🧾 Mẫu giấy đảm bảo riêng của cửa hàng</div>
    <div class="mg-goi">
      Chọn ảnh giấy đảm bảo của tiệm (PNG/JPG) → thêm thông tin cần in → <b>kéo</b> từng ô tới đúng chỗ →
      In thử → Lưu. Từ đó nút <b>🖨️ In</b> giấy đảm bảo của mỗi hóa đơn bán sẽ in theo mẫu này.
      Chưa có mẫu thì vẫn in giấy đảm bảo cũ như trước.
    </div>
    {% endif %}
    <div class="mg-dong-ct" style="margin-top:10px">
      {% if stores|length > 1 %}
      <label for="mg-ch">Chi nhánh</label>
      <select id="mg-ch" class="mg-o-nhap" onchange="mgDoiChiNhanh()">
        {% for st in stores %}<option value="{{ st.id }}" {{ 'selected' if st.id == cua_hang_mac_dinh }}>{{ st.ten }}</option>{% endfor %}
      </select>
      {% else %}
      <input type="hidden" id="mg-ch" value="{{ stores[0].id if stores else cua_hang_mac_dinh }}">
      {% endif %}
      {% if HD or not che_do %}
      <label for="mg-mau">Mẫu</label>
      <select id="mg-mau" class="mg-o-nhap" onchange="mgDoiMau()"></select>
      <input id="mg-ten" class="mg-o-nhap" maxlength="80" placeholder="{{ 'Tên mẫu (VD: Hóa đơn A5)' if HD else 'Tên mẫu (VD: Bảo hành vàng 9999)' }}" oninput="mgDanhDauDoi()">
      {% endif %}
      <span id="mg-trang-thai" class="mg-goi"></span>
      <button id="mg-bat-tat" class="mg-nut" style="display:none" onclick="mgBatTat()"></button>
      <button id="mg-xoa" class="mg-nut mg-nut-do" style="display:none" onclick="mgXoa()">🗑️ Xóa mẫu</button>
    </div>
  </div>

  <div class="mg-luoi">
    <!-- ── Cột điều khiển ── -->
    <div class="space-y-3">
      <div class="mg-the">
        <div class="mg-tieu">① Ảnh mẫu & khổ giấy</div>
        <input id="mg-file" type="file" accept="image/png,image/jpeg,.png,.jpg,.jpeg" class="mg-o-nhap" style="width:100%" onchange="mgChonAnh(this)">
        <div id="mg-anh-tt" class="mg-goi" style="margin-top:4px"></div>
        <div class="mg-dong-ct">
          <label for="mg-kho">Khổ giấy</label>
          <select id="mg-kho" class="mg-o-nhap" onchange="mgDoiTrang()">
            {% for k, wh in kho_giay.items() %}<option value="{{ k }}">{{ k }} — {{ '%g'|format(wh[0]) }} × {{ '%g'|format(wh[1]) }} mm</option>{% endfor %}
            {% if HD %}<option value="tuy_chinh">Tùy chỉnh</option>{% endif %}
          </select>
          <select id="mg-huong" class="mg-o-nhap" onchange="mgDoiTrang()">
            <option value="doc">Khổ dọc</option><option value="ngang">Khổ ngang</option>
          </select>
        </div>
        {% if HD %}
        <div class="mg-dong-ct" id="mg-tuy-chinh">
          <label>Kích thước</label>
          <input id="mg-rong-mm" type="number" min="50" max="500" step="1" class="mg-o-nhap" style="width:80px" onchange="mgDoiTrang()">×
          <input id="mg-cao-mm" type="number" min="50" max="500" step="1" class="mg-o-nhap" style="width:80px" onchange="mgDoiTrang()">
          <span class="mg-goi">mm (rộng × cao, khổ dọc)</span>
        </div>
        <div class="mg-dong-ct">
          <label>Lề in (mm)</label>
          <span class="mg-goi">Trên</span><input id="mg-le-tren" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:64px" onchange="mgDoiTrang()">
          <span class="mg-goi">Dưới</span><input id="mg-le-duoi" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:64px" onchange="mgDoiTrang()">
          <span class="mg-goi">Trái</span><input id="mg-le-trai" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:64px" onchange="mgDoiTrang()">
          <span class="mg-goi">Phải</span><input id="mg-le-phai" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:64px" onchange="mgDoiTrang()">
        </div>
        <div class="mg-dong-ct">
          <label for="mg-nen-sau">Trang 2 trở đi</label>
          <select id="mg-nen-sau" class="mg-o-nhap" onchange="mgDoiTrang()">
            <option value="anh">Cùng ảnh nền như trang 1</option><option value="trong">Trang trắng (chỉ chữ)</option>
          </select>
        </div>
        {% endif %}
        <label class="mg-dong-ct" style="cursor:pointer">
          <input id="mg-nen" type="checkbox" checked onchange="mgDoiTrang()">
          <span>In cả ảnh nền <span class="mg-goi">(bỏ tick nếu in lên giấy đã in sẵn — chỉ in chữ)</span></span>
        </label>
      </div>

      <div class="mg-the">
        <div class="mg-tieu">② Thông tin cần in</div>
        <div class="mg-dong-ct" style="margin-top:0">
          <select id="mg-them" class="mg-o-nhap" style="flex:1;min-width:0">
            {% for key, nhan, cot in truong %}<option value="{{ key }}">{{ nhan }}</option>{% endfor %}
          </select>
          <button class="mg-nut mg-nut-vang" onclick="mgThem()">➕ Thêm</button>
        </div>
        {% if HD %}
        <div class="mg-goi" style="margin:6px 0">"Cột ..." là các cột của <b>bảng hàng</b>: mỗi món một dòng, nằm trong vùng hàng (khung đỏ).
          Kéo một cột lên/xuống = dời cả bảng. Ô thường có phạm vi: trang đầu / mọi trang / trang cuối.</div>
        {% else %}
        <div class="mg-goi" style="margin:6px 0">"Cột ..." in mỗi món hàng một dòng — để khớp vào bảng kẻ sẵn trên giấy.</div>
        {% endif %}
        <div id="mg-ds" class="mg-ds-truong"></div>
      </div>

      <div class="mg-the" id="mg-ct" style="display:none">
        <div class="mg-tieu">③ Ô đang chọn: <span id="mg-ct-ten"></span></div>
        <div class="mg-dong-ct">
          <label>Cỡ chữ</label>
          <button class="mg-nut" onclick="mgCo(-1)">−</button>
          <input id="mg-co" type="number" min="5" max="48" step="0.5" class="mg-o-nhap" style="width:80px" onchange="mgSua('co_chu', +this.value)">
          <button class="mg-nut" onclick="mgCo(1)">+</button><span class="mg-goi">pt</span>
        </div>
        <div class="mg-dong-ct" id="mg-noi-dung-policy" style="display:none">
          <label for="mg-noi-dung">Chính sách in trên mẫu</label>
          <textarea id="mg-noi-dung" class="mg-o-nhap" maxlength="500" rows="3" style="flex:1;min-width:0" oninput="mgSua('noi_dung', this.value)"></textarea>
        </div>
        <div class="mg-dong-ct">
          <label>Kiểu chữ</label>
          <label style="min-width:0;cursor:pointer"><input id="mg-dam" type="checkbox" onchange="mgSua('dam', this.checked)"> <b>Đậm</b></label>
          {% if HD %}<label style="min-width:0;cursor:pointer"><input id="mg-nghieng" type="checkbox" onchange="mgSua('nghieng', this.checked)"> <i>Nghiêng</i></label>
          <select id="mg-font" class="mg-o-nhap" onchange="mgSua('font', this.value)">
            <option value="times">Times New Roman</option><option value="arial">Arial</option>
          </select>{% endif %}
          <select id="mg-canle" class="mg-o-nhap" onchange="mgSua('can_le', this.value)">
            <option value="trai">Căn trái</option><option value="giua">Căn giữa</option><option value="phai">Căn phải</option>
          </select>
        </div>
        {% if HD %}
        <div class="mg-dong-ct" id="mg-pham-vi-hang">
          <label for="mg-pham-vi">In ở</label>
          <select id="mg-pham-vi" class="mg-o-nhap" onchange="mgSua('pham_vi', this.value)">
            <option value="dau">Chỉ trang đầu</option><option value="moi_trang">Mọi trang (lặp lại)</option>
            <option value="cuoi">Chỉ trang cuối (tổng tiền, ký nhận…)</option>
          </select>
        </div>
        <div class="mg-dong-ct" id="mg-tieu-de-hang">
          <label for="mg-tieu-de">Tiêu đề cột</label>
          <input id="mg-tieu-de" class="mg-o-nhap" maxlength="40" style="flex:1;min-width:0" oninput="mgSua('tieu_de', this.value)">
        </div>
        {% endif %}
        <div class="mg-dong-ct">
          <label>Bề rộng ô</label>
          <input id="mg-rong" type="range" min="2" max="100" step="1" style="flex:1" oninput="mgSua('w', this.value/100)">
          <span id="mg-rong-so" class="mg-goi"></span>
        </div>
        <div class="mg-dong-ct" id="mg-gian-hang"{% if HD %} hidden{% endif %}>
          <label>Cách dòng</label>
          <input id="mg-gian" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:80px" onchange="mgSua('gian_dong', +this.value)">
          <span class="mg-goi">mm giữa 2 món (0 = tự động) — chỉnh cho khớp dòng kẻ trên giấy</span>
        </div>
        <div class="mg-dong-ct">
          <label>Nhích vị trí</label>
          <button class="mg-nut" onclick="mgNhich(-1,0)">←</button>
          <button class="mg-nut" onclick="mgNhich(0,-1)">↑</button>
          <button class="mg-nut" onclick="mgNhich(0,1)">↓</button>
          <button class="mg-nut" onclick="mgNhich(1,0)">→</button>
          <button class="mg-nut mg-nut-do" onclick="mgBo()">✕ Bỏ ô</button>
        </div>
        <div class="mg-goi" style="margin-top:6px">Kéo ô trên mẫu để di chuyển · kéo tay nắm xanh bên phải để đổi bề rộng · phím mũi tên để nhích (giữ Shift nhích nhiều).</div>
      </div>
      {% if HD %}
      <div class="mg-the">
        <div class="mg-tieu">④ Bảng hàng — tự sang trang khi nhiều món</div>
        <div class="mg-dong-ct">
          <label>Vùng hàng</label>
          <span class="mg-goi">từ</span><input id="mg-b-dau" type="number" min="0" max="95" step="0.5" class="mg-o-nhap" style="width:72px" onchange="mgSuaBang('y_dau', this.value/100)">
          <span class="mg-goi">% tới</span><input id="mg-b-cuoi" type="number" min="3" max="100" step="0.5" class="mg-o-nhap" style="width:72px" onchange="mgSuaBang('y_cuoi', this.value/100)">
          <span class="mg-goi">% chiều cao ảnh (kéo tay nắm đỏ ở đáy khung đỏ)</span>
        </div>
        <div class="mg-dong-ct">
          <label>Cao mỗi dòng</label>
          <input id="mg-b-gian" type="number" min="0" max="40" step="0.5" class="mg-o-nhap" style="width:72px" onchange="mgSuaBang('gian_dong', +this.value)">
          <span class="mg-goi">mm (0 = theo chữ; điền khoảng cách dòng kẻ in sẵn để chữ khớp dòng)</span>
        </div>
        <label class="mg-dong-ct" style="cursor:pointer"><input id="mg-b-td" type="checkbox" onchange="mgSuaBang('in_tieu_de', this.checked)">
          <span>In tiêu đề cột ở đầu bảng mỗi trang</span></label>
        <label class="mg-dong-ct" style="cursor:pointer"><input id="mg-b-ke" type="checkbox" onchange="mgSuaBang('ke_dong', this.checked)">
          <span>Kẻ đường dưới mỗi dòng (giấy trắng chưa có bảng kẻ)</span></label>
        <div class="mg-dong-ct">
          <label for="mg-b-tong">Tổng tiền, ký nhận</label>
          <select id="mg-b-tong" class="mg-o-nhap" onchange="mgSuaBang('tong', this.value)">
            <option value="co_dinh">Đúng vị trí đã kéo, ở trang cuối</option>
            <option value="noi_tiep">Nối tiếp ngay sau món cuối (hết chỗ thì sang trang mới)</option>
          </select>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- ── Xem trước ── -->
    <div class="space-y-3">
      <div class="mg-the">
        <div class="mg-dong-ct" style="margin-top:0">
          <label for="mg-dl">Xem với</label>
          <select id="mg-dl" class="mg-o-nhap" style="flex:1;min-width:0" onchange="mgTaiDuLieu()">
            <option value="">Dữ liệu mẫu (giả, không phải hóa đơn thật)</option>
            {% if HD %}{% for n in (12, 30, 60) %}<option value="mau:{{ n }}">Dữ liệu mẫu {{ n }} món (thử sang trang)</option>{% endfor %}{% endif %}
          </select>
        </div>
        {% if HD %}
        <div class="mg-dong-ct">
          <label>Xem trang</label>
          <button class="mg-nut" onclick="mgTrang(-1)">◀</button>
          <span id="mg-trang-so" style="font-weight:700;min-width:90px;text-align:center"></span>
          <button class="mg-nut" onclick="mgTrang(1)">▶</button>
        </div>
        {% endif %}
        <div class="mg-dong-ct">
          <button class="mg-nut" onclick="mgInThu()">🖨️ In thử</button>
          <button id="mg-luu" class="mg-nut mg-nut-chinh" onclick="mgLuu()">💾 Lưu mẫu</button>
          <span id="mg-msg" style="flex:1;font-size:14px"></span>
        </div>
        <div id="mg-canh-bao" class="mg-msg-loi" style="font-size:13px;margin-top:6px"></div>
      </div>
      <div id="mg-xem-ngoai"><div id="mg-xem"></div></div>
      <div id="mg-trong" class="mg-goi" style="text-align:center;display:none">Chưa có ảnh mẫu — hãy chọn ảnh ở bước ①.</div>
    </div>
  </div>
</div>

{% include '_mau_giay_ve.html' %}
{% if HD %}{% include '_mau_hoa_don_ve.html' %}{% endif %}
{% endblock %}

{% block scripts %}
<script>
const MG_TRUONG = {{ truong | tojson }};
const MG_NHAN = {}; const MG_COT = {};
MG_TRUONG.forEach(function (t) { MG_NHAN[t[0]] = t[1]; MG_COT[t[0]] = !!t[2]; });
const MG_MAX_BYTES = 15 * 1024 * 1024;
// Chế độ MẪU HÓA ĐƠN (cùng trình kéo thả, thêm bảng hàng tự sang trang) — xem mau_hoa_don_routes.py
const HD = {{ 'true' if HD else 'false' }};
const MULTI = {{ 'true' if not che_do else 'false' }};
const MG_PV = {{ (pham_vi_mac_dinh if HD else {}) | tojson }};
const MG_TD = {{ (tieu_de_cot if HD else {}) | tojson }};
const MG_API = HD ? '/api/mau-hoa-don' : '/api/mau-giay';

const ST = { sid: null, cau_hinh: null, anh_src: null, anh_rong: 0, anh_cao: 0, file: null,
             du_lieu: null, chon: -1, doi: false, co_mau: false, dang_dung: false, kq: null,
             mau_id: null, ds: [], trang: 0, so_trang: 1 };

function mgMacDinh() {
  if (HD) return { kho_giay: 'A4', huong: 'doc', rong_mm: 210, cao_mm: 297, in_anh_nen: true, nen_trang_sau: 'anh',
                   le: { tren: 5, phai: 5, duoi: 5, trai: 5 }, truong: [],
                   bang: { y_dau: 0.35, y_cuoi: 0.75, gian_dong: 0, in_tieu_de: true, ke_dong: false,
                           tong: 'co_dinh', khoang_tong: 2 } };
  return { kho_giay: 'A4', huong: 'doc', in_anh_nen: true, truong: [] };
}
function mgMsg(s, loi) { const e = document.getElementById('mg-msg'); e.textContent = s || ''; e.className = loi ? 'mg-msg-loi' : 'mg-msg-ok'; }
function mgDanhDauDoi() { ST.doi = true; mgMsg('● Có thay đổi CHƯA LƯU', true); }
window.addEventListener('beforeunload', function (e) { if (ST.doi) { e.preventDefault(); e.returnValue = ''; } });

async function mgGoi(url, opt) {
  try {
    const r = await fetch(url, Object.assign({ cache: 'no-store' }, opt || {}));
    let d = null; try { d = await r.json(); } catch (_) {}
    if (!d) d = { success: false, thong_bao: 'Máy chủ trả lỗi (' + r.status + '). Vui lòng thử lại.' };
    return d;
  } catch (e) {
    return { success: false, thong_bao: 'Mất kết nối tới máy chủ. Kiểm tra mạng rồi thử lại.' };
  }
}

async function mgTaiMau() {
  ST.sid = document.getElementById('mg-ch').value;
  if (HD || MULTI) return mgTaiDsMau();
  const d = await mgGoi('/api/mau-giay?cua_hang_id=' + encodeURIComponent(ST.sid));
  ST.file = null; ST.chon = -1; ST.doi = false;
  document.getElementById('mg-file').value = '';
  const tt = document.getElementById('mg-trang-thai');
  if (!d.success) { tt.textContent = d.thong_bao || 'Không tải được mẫu.'; return; }
  const m = d.mau;
  ST.co_mau = !!m; ST.dang_dung = !!(m && m.dang_dung);
  ST.cau_hinh = (m && m.cau_hinh) ? m.cau_hinh : mgMacDinh();
  ST.anh_src = (m && m.anh_data_uri) || null;
  ST.anh_rong = m ? m.anh_rong : 0; ST.anh_cao = m ? m.anh_cao : 0;
  let s;
  if (!m) s = 'Chưa có mẫu — đang in giấy đảm bảo cũ.';
  else if (m.anh_hong) s = '⚠️ Ảnh mẫu đã lưu bị hỏng — đang in giấy đảm bảo cũ. Hãy chọn lại ảnh rồi Lưu.';
  else if (m.cau_hinh_loi) s = '⚠️ Cấu hình vị trí bị lỗi — đang in giấy đảm bảo cũ. Hãy đặt lại các ô rồi Lưu.';
  else if (m.dang_dung) s = '✅ Đang dùng mẫu này khi in giấy đảm bảo (lưu lúc ' + (m.cap_nhat_luc || '') + ').';
  else s = '⏸️ Mẫu đang TẮT — đang in giấy đảm bảo cũ.';
  tt.textContent = s;
  const bt = document.getElementById('mg-bat-tat');
  bt.style.display = m ? '' : 'none'; bt.textContent = ST.dang_dung ? '⏸️ Tắt mẫu' : '▶️ Bật mẫu';
  document.getElementById('mg-xoa').style.display = m ? '' : 'none';
  document.getElementById('mg-anh-tt').textContent = m && !m.anh_hong
    ? ('Ảnh đang lưu: ' + (m.ten_file_goc || 'ảnh mẫu') + ' — ' + m.anh_rong + '×' + m.anh_cao) : '';
  mgDongBoONhap(); mgDs(); mgVe(); mgMsg('');
  mgTaiDsHoaDon();
}

// ── Mẫu hóa đơn: nhiều mẫu mỗi chi nhánh, chọn 1 mẫu đang dùng ──
async function mgTaiDsMau(chonId) {
  const d = await mgGoi(MG_API + '/ds?cua_hang_id=' + encodeURIComponent(ST.sid));
  const tt = document.getElementById('mg-trang-thai');
  if (!d.success) { tt.textContent = d.thong_bao || 'Không tải được danh sách mẫu.'; return; }
  ST.ds = d.ds || [];
  const sel = document.getElementById('mg-mau');
  sel.innerHTML = '';
  ST.ds.forEach(function (m) {
    const o = document.createElement('option');
    o.value = m.id;
    o.textContent = (m.dang_dung ? '✅ ' : '') + m.ten + ((m.anh_hong || m.cau_hinh_loi) ? ' (hỏng)' : '');
    sel.appendChild(o);
  });
  const moi = document.createElement('option'); moi.value = ''; moi.textContent = '➕ Mẫu mới…'; sel.appendChild(moi);
  let id = chonId;
  if (id === undefined) {
    const dd = ST.ds.find(function (m) { return m.dang_dung; });
    id = dd ? dd.id : (ST.ds[0] ? ST.ds[0].id : '');
  }
  sel.value = id || '';
  await mgTaiMotMau(id || null);
  mgTaiDsHoaDon();
}

async function mgTaiMotMau(id) {
  ST.file = null; ST.chon = -1; ST.doi = false; ST.trang = 0;
  document.getElementById('mg-file').value = '';
  let m = null;
  if (id) {
    const d = await mgGoi(MG_API + '/' + encodeURIComponent(id) + '?cua_hang_id=' + encodeURIComponent(ST.sid));
    if (!d.success) { mgMsg(d.thong_bao || 'Không tải được mẫu.', true); return; }
    m = d.mau;
  }
  ST.mau_id = m ? m.id : null;
  ST.co_mau = !!m; ST.dang_dung = !!(m && m.dang_dung);
  ST.cau_hinh = (m && m.cau_hinh) ? m.cau_hinh : mgMacDinh();
  ST.anh_src = (m && m.anh_data_uri) || null;
  ST.anh_rong = m ? m.anh_rong : 0; ST.anh_cao = m ? m.anh_cao : 0;
  document.getElementById('mg-ten').value = m ? m.ten : '';
  const dangDung = ST.ds.find(function (x) { return x.dang_dung; });
  let s;
  if (!m) s = dangDung ? ('Đang tạo mẫu MỚI. Mẫu đang dùng: "' + dangDung.ten + '".') : 'Đang tạo mẫu mới — chưa chọn mẫu nào, đang in hóa đơn kiểu cũ.';
  else if (m.anh_hong) s = '⚠️ Ảnh mẫu đã lưu bị hỏng — mẫu này không dùng được. Hãy chọn lại ảnh rồi Lưu.';
  else if (m.cau_hinh_loi) s = '⚠️ Cấu hình vị trí bị lỗi — hãy đặt lại các ô rồi Lưu.';
  else if (m.dang_dung) s = '✅ Đang dùng mẫu này khi in hóa đơn (lưu lúc ' + (m.cap_nhat_luc || '') + ').';
  else s = dangDung ? ('Mẫu này chưa dùng. Mẫu đang dùng: "' + dangDung.ten + '".') : 'Mẫu này chưa dùng — đang in hóa đơn kiểu cũ.';
  document.getElementById('mg-trang-thai').textContent = s;
  const bt = document.getElementById('mg-bat-tat');
  bt.style.display = m ? '' : 'none'; bt.textContent = ST.dang_dung ? '⏸️ Thôi dùng (in kiểu cũ)' : '✅ Dùng mẫu này';
  document.getElementById('mg-xoa').style.display = m ? '' : 'none';
  document.getElementById('mg-anh-tt').textContent = m && !m.anh_hong
    ? ('Ảnh đang lưu: ' + (m.ten_file_goc || 'ảnh mẫu') + ' — ' + m.anh_rong + '×' + m.anh_cao) : '';
  mgDongBoONhap(); mgDs(); mgVe(); mgMsg('');
}

function mgDoiMau() {
  const sel = document.getElementById('mg-mau');
  if (ST.doi && !confirm('Mẫu đang có thay đổi CHƯA LƯU. Chuyển mẫu khác sẽ bỏ các thay đổi đó?')) {
    sel.value = ST.mau_id || ''; return;
  }
  mgTaiMotMau(sel.value || null);
}

function mgKepBang() {
  const b = ST.cau_hinh.bang;
  b.y_dau = Math.max(0, Math.min(0.95, +b.y_dau || 0));
  b.y_cuoi = Math.max(b.y_dau + 0.03, Math.min(1, +b.y_cuoi || 0));
  b.gian_dong = Math.max(0, Math.min(40, +b.gian_dong || 0));
  ST.cau_hinh.truong.forEach(function (t) { if (MG_COT[t.key]) t.y = b.y_dau; });
}

function mgSuaBang(k, v) {
  ST.cau_hinh.bang[k] = v; mgKepBang(); mgDongBoONhap(); mgDanhDauDoi(); mgVe();
}

function mgTrang(d) {
  ST.trang = Math.max(0, Math.min(ST.so_trang - 1, ST.trang + d)); mgVe();
}

async function mgTaiDsHoaDon() {
  const sel = document.getElementById('mg-dl');
  sel.length = HD ? 4 : 1;      // giữ các lựa chọn dữ liệu mẫu
  const d = await mgGoi('/api/mau-giay/hoa-don-gan-day?cua_hang_id=' + encodeURIComponent(ST.sid));
  (d.items || []).forEach(function (h) {
    const o = document.createElement('option');
    o.value = h.id; o.textContent = h.ma_hd + ' · ' + (h.ngay || '').slice(0, 10) + ' · ' + (h.khach_hang || 'khách lẻ');
    sel.appendChild(o);
  });
  mgTaiDuLieu();
}

async function mgTaiDuLieu() {
  const v = document.getElementById('mg-dl').value;
  const q = v.indexOf('mau:') === 0 ? '&so_dong=' + encodeURIComponent(v.slice(4)) : (v ? '&sale_id=' + encodeURIComponent(v) : '');
  const d = await mgGoi(MG_API + '/du-lieu?cua_hang_id=' + encodeURIComponent(ST.sid) + q);
  if (!d.success) { mgMsg(d.thong_bao || 'Không tải được dữ liệu xem trước.', true); return; }
  ST.du_lieu = d.du_lieu; ST.trang = 0; mgVe();
}

function mgDoiChiNhanh() {
  if (ST.doi && !confirm('Mẫu đang có thay đổi CHƯA LƯU. Chuyển chi nhánh sẽ bỏ các thay đổi đó?')) {
    document.getElementById('mg-ch').value = ST.sid; return;
  }
  ST.doi = false; mgTaiMau();
}

function mgDongBoONhap() {
  document.getElementById('mg-kho').value = ST.cau_hinh.kho_giay;
  document.getElementById('mg-huong').value = ST.cau_hinh.huong;
  document.getElementById('mg-nen').checked = ST.cau_hinh.in_anh_nen !== false;
  if (!HD) return;
  const ch = ST.cau_hinh, b = ch.bang;
  document.getElementById('mg-tuy-chinh').style.display = ch.kho_giay === 'tuy_chinh' ? '' : 'none';
  document.getElementById('mg-rong-mm').value = ch.rong_mm;
  document.getElementById('mg-cao-mm').value = ch.cao_mm;
  ['tren', 'duoi', 'trai', 'phai'].forEach(function (k) { document.getElementById('mg-le-' + k).value = ch.le[k]; });
  document.getElementById('mg-nen-sau').value = ch.nen_trang_sau;
  document.getElementById('mg-b-dau').value = Math.round(b.y_dau * 1000) / 10;
  document.getElementById('mg-b-cuoi').value = Math.round(b.y_cuoi * 1000) / 10;
  document.getElementById('mg-b-gian').value = b.gian_dong;
  document.getElementById('mg-b-td').checked = !!b.in_tieu_de;
  document.getElementById('mg-b-ke').checked = !!b.ke_dong;
  document.getElementById('mg-b-tong').value = b.tong;
}

function mgDoiTrang() {
  ST.cau_hinh.kho_giay = document.getElementById('mg-kho').value;
  ST.cau_hinh.huong = document.getElementById('mg-huong').value;
  ST.cau_hinh.in_anh_nen = document.getElementById('mg-nen').checked;
  if (HD) {
    const ch = ST.cau_hinh;
    ch.rong_mm = Math.max(50, Math.min(500, +document.getElementById('mg-rong-mm').value || 210));
    ch.cao_mm = Math.max(50, Math.min(500, +document.getElementById('mg-cao-mm').value || 297));
    ['tren', 'duoi', 'trai', 'phai'].forEach(function (k) {
      ch.le[k] = Math.max(0, Math.min(40, +document.getElementById('mg-le-' + k).value || 0)); });
    ch.nen_trang_sau = document.getElementById('mg-nen-sau').value;
    mgDongBoONhap();
  }
  mgDanhDauDoi(); mgVe();
}

function mgChonAnh(inp) {
  const f = inp.files && inp.files[0];
  if (!f) return;
  const ok = /^image\/(png|jpeg)$/.test(f.type) || /\.(png|jpe?g)$/i.test(f.name);
  if (!ok) { mgMsg('Chỉ nhận ảnh PNG hoặc JPG.', true); inp.value = ''; return; }
  if (f.size > MG_MAX_BYTES) { mgMsg('Ảnh quá lớn (tối đa 15MB). Hãy chụp/xuất ảnh nhỏ hơn.', true); inp.value = ''; return; }
  const url = URL.createObjectURL(f);
  const img = new Image();
  img.onload = function () {
    if (Math.min(img.naturalWidth, img.naturalHeight) < 200) {
      mgMsg('Ảnh quá nhỏ (' + img.naturalWidth + '×' + img.naturalHeight + '). Cần tối thiểu 200 điểm ảnh mỗi cạnh.', true);
      inp.value = ''; return;
    }
    ST.file = f; ST.anh_src = url; ST.anh_rong = img.naturalWidth; ST.anh_cao = img.naturalHeight;
    // Gợi ý hướng giấy theo tỷ lệ ảnh (lần đầu chưa có ô nào)
    if (!ST.cau_hinh.truong.length) {
      ST.cau_hinh.huong = img.naturalWidth > img.naturalHeight ? 'ngang' : 'doc';
      mgDongBoONhap();
    }
    document.getElementById('mg-anh-tt').textContent = 'Ảnh mới (chưa lưu): ' + f.name + ' — ' + img.naturalWidth + '×' + img.naturalHeight;
    mgDanhDauDoi(); mgVe();
  };
  img.onerror = function () { mgMsg('Không đọc được ảnh — tệp bị hỏng hoặc không phải ảnh.', true); inp.value = ''; };
  img.src = url;
}

function mgThem() {
  const key = document.getElementById('mg-them').value;
  const n = ST.cau_hinh.truong.length;
  const cot = MG_COT[key];
  if (HD) {
    let x = 0.05;
    if (cot) ST.cau_hinh.truong.forEach(function (t) { if (MG_COT[t.key]) x = Math.max(x, t.x + t.w); });
    const t = { key: key, x: Math.min(0.9, x), y: cot ? ST.cau_hinh.bang.y_dau : Math.min(0.9, 0.08 + (n % 12) * 0.06),
                w: cot ? (key === 'cot_ten' ? 0.3 : 0.11) : 0.42, co_chu: cot ? 10 : 11, dam: false, nghieng: false,
                font: 'times', can_le: (cot && key !== 'cot_ten' && key !== 'cot_ma_hang') ? (key === 'cot_stt' ? 'giua' : 'phai') : 'trai' };
    if (cot) t.tieu_de = MG_TD[key] || ''; else t.pham_vi = MG_PV[key] || 'dau';
    mgKep(t);
    ST.cau_hinh.truong.push(t);
    ST.chon = n; mgDanhDauDoi(); mgDs(); mgVe();
    return;
  }
  ST.cau_hinh.truong.push({ key: key, x: 0.08 + (n % 3) * 0.05, y: Math.min(0.9, 0.08 + (n % 12) * 0.06),
    w: cot ? 0.18 : 0.42, co_chu: 11, dam: false, can_le: 'trai', gian_dong: cot ? 7 : 0 });
  ST.chon = n; mgDanhDauDoi(); mgDs(); mgVe();
}

function mgBo() {
  if (ST.chon < 0) return;
  ST.cau_hinh.truong.splice(ST.chon, 1); ST.chon = -1; mgDanhDauDoi(); mgDs(); mgVe();
}

function mgChon(i) { ST.chon = i; mgDs(); mgVe(); }

function mgDs() {
  const el = document.getElementById('mg-ds');
  el.innerHTML = '';
  ST.cau_hinh.truong.forEach(function (t, i) {
    const b = document.createElement('button');
    b.type = 'button';
    b.className = i === ST.chon ? 'dang-chon' : '';
    b.innerHTML = '<span></span><span class="mg-goi"></span>';
    b.children[0].textContent = (i + 1) + '. ' + (MG_NHAN[t.key] || t.key);
    b.children[1].textContent = t.co_chu + 'pt';
    b.onclick = function () { mgChon(i); };
    el.appendChild(b);
  });
  if (!ST.cau_hinh.truong.length) el.innerHTML = '<div class="mg-goi">Chưa có ô nào — chọn thông tin rồi bấm ➕ Thêm.</div>';
  const t = ST.cau_hinh.truong[ST.chon];
  document.getElementById('mg-ct').style.display = t ? '' : 'none';
  if (t) {
    document.getElementById('mg-ct-ten').textContent = MG_NHAN[t.key] || t.key;
    document.getElementById('mg-co').value = t.co_chu;
    document.getElementById('mg-dam').checked = !!t.dam;
    document.getElementById('mg-canle').value = t.can_le || 'trai';
    document.getElementById('mg-rong').value = Math.round(t.w * 100);
    document.getElementById('mg-rong-so').textContent = Math.round(t.w * 100) + '% khổ ảnh';
    document.getElementById('mg-gian').value = t.gian_dong || 0;
    document.getElementById('mg-gian-hang').style.display = (MG_COT[t.key] && !HD) ? '' : 'none';
    const policy = document.getElementById('mg-noi-dung-policy');
    policy.style.display = t.key === 'chinh_sach' ? '' : 'none';
    document.getElementById('mg-noi-dung').value = t.noi_dung || '';
    if (HD) {
      document.getElementById('mg-nghieng').checked = !!t.nghieng;
      document.getElementById('mg-font').value = t.font || 'times';
      document.getElementById('mg-pham-vi-hang').style.display = MG_COT[t.key] ? 'none' : '';
      document.getElementById('mg-tieu-de-hang').style.display = MG_COT[t.key] ? '' : 'none';
      document.getElementById('mg-pham-vi').value = t.pham_vi || 'dau';
      if (document.activeElement !== document.getElementById('mg-tieu-de'))
        document.getElementById('mg-tieu-de').value = t.tieu_de || '';
    }
  }
}

function mgKep(t) {
  t.w = Math.max(0.02, Math.min(1, t.w));
  t.x = Math.max(0, Math.min(1 - Math.min(t.w, 0.98), t.x));
  t.y = Math.max(0, Math.min(0.99, t.y));
  if (t.x + t.w > 1) t.w = Math.max(0.02, 1 - t.x);
  t.co_chu = Math.max(5, Math.min(48, Math.round(t.co_chu * 2) / 2 || 11));
  t.gian_dong = Math.max(0, Math.min(40, t.gian_dong || 0));
  if (HD) { delete t.gian_dong; if (MG_COT[t.key] && ST.cau_hinh.bang) t.y = ST.cau_hinh.bang.y_dau; }
}

function mgSua(k, v) {
  const t = ST.cau_hinh.truong[ST.chon]; if (!t) return;
  t[k] = v; mgKep(t); mgDanhDauDoi(); mgDs(); mgVe();
}
function mgCo(d) { const t = ST.cau_hinh.truong[ST.chon]; if (t) mgSua('co_chu', t.co_chu + d * 0.5); }
function mgNhich(dx, dy, buoc) {
  const t = ST.cau_hinh.truong[ST.chon]; if (!t) return;
  const b = buoc || 0.002;
  if (HD && MG_COT[t.key]) {
    const bg = ST.cau_hinh.bang, cao = bg.y_cuoi - bg.y_dau;
    t.x += dx * b;
    bg.y_dau = Math.max(0, Math.min(1 - cao, bg.y_dau + dy * b)); bg.y_cuoi = bg.y_dau + cao;
    mgKepBang(); mgKep(t); mgDongBoONhap(); mgDanhDauDoi(); mgVe();
    return;
  }
  t.x += dx * b; t.y += dy * b; mgKep(t); mgDanhDauDoi(); mgVe();
}
document.addEventListener('keydown', function (e) {
  if (ST.chon < 0 || /^(INPUT|SELECT|TEXTAREA)$/.test((document.activeElement || {}).tagName || '')) return;
  const m = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
  if (!m) return;
  e.preventDefault(); mgNhich(m[0], m[1], e.shiftKey ? 0.01 : 0.002);
});

function mgVe() {
  const ngoai = document.getElementById('mg-xem-ngoai');
  const xem = document.getElementById('mg-xem');
  document.getElementById('mg-trong').style.display = ST.anh_src ? 'none' : '';
  if (!ST.anh_src) { xem.innerHTML = ''; ngoai.style.height = '0px'; ST.kq = null; mgCanhBao([]); return; }
  const O = { cau_hinh: ST.cau_hinh, anh_src: ST.anh_src, anh_rong: ST.anh_rong, anh_cao: ST.anh_cao,
              du_lieu: ST.du_lieu, sua: true, nhan: MG_NHAN };
  xem.style.transform = 'none';
  let kq, cbHd = [];
  if (HD) {
    if (!ST.du_lieu) { xem.innerHTML = ''; return; }
    const r = MHD.ve(xem, Object.assign({ chi_trang: ST.trang }, O));
    ST.so_trang = r.so_trang;
    if (ST.trang >= r.so_trang) { ST.trang = r.so_trang - 1; return mgVe(); }
    document.getElementById('mg-trang-so').textContent = 'Trang ' + (ST.trang + 1) + ' / ' + r.so_trang;
    kq = r.trang[0].kq;
    cbHd = r.canh_bao.map(function (x) { return { i: -1, ly_do: x }; });
    if (kq.vung) {
      const tay = document.createElement('div'); tay.className = 'mg-tay-vung mg-chi-sua';
      kq.vung.style.pointerEvents = 'none';
      tay.style.pointerEvents = 'auto';
      kq.vung.appendChild(tay);
      tay.addEventListener('pointerdown', function (e) { mgBatDauKeo(e, -1, 'vung'); });
    }
  } else {
    kq = MG.ve(xem, O);
  }
  ST.kq = kq;
  const k = ngoai.clientWidth / kq.trang.offsetWidth;
  xem.style.transform = 'scale(' + k + ')';
  ngoai.style.height = (kq.trang.offsetHeight * k) + 'px';
  kq.khung.querySelectorAll('.mg-o').forEach(function (d) {
    const i = +d.dataset.i;
    if (i === ST.chon) {
      d.classList.add('mg-chon');
      const tay = document.createElement('div'); tay.className = 'mg-tay mg-chi-sua';
      d.appendChild(tay);
      tay.addEventListener('pointerdown', function (e) { mgBatDauKeo(e, i, 'rong'); });
    }
    const nh = document.createElement('div'); nh.className = 'mg-nhan-o mg-chi-sua';
    nh.textContent = MG_NHAN[ST.cau_hinh.truong[i].key] || '';
    d.appendChild(nh);
    d.addEventListener('pointerdown', function (e) { mgBatDauKeo(e, i, 'dich'); });
  });
  const cb = MG.canChinh(kq, O);
  cb.forEach(function (c) { const d = kq.khung.querySelector('.mg-o[data-i="' + c.i + '"]'); if (d) d.classList.add('mg-loi'); });
  mgCanhBao(cbHd.concat(cb));
}

function mgCanhBao(cb) {
  document.getElementById('mg-canh-bao').innerHTML = cb.map(function (c) {
    const s = document.createElement('div'); s.textContent = '⚠️ ' + c.ly_do; return s.outerHTML; }).join('');
}

let _keo = null;
function mgBatDauKeo(e, i, kieu) {
  e.preventDefault(); e.stopPropagation();
  if (kieu === 'vung') {
    const r = ST.kq.khung.getBoundingClientRect();
    _keo = { i: -1, kieu: kieu, x0: e.clientX, y0: e.clientY, yc: ST.cau_hinh.bang.y_cuoi, rw: r.width, rh: r.height, da: false };
    window.addEventListener('pointermove', mgKeo);
    window.addEventListener('pointerup', mgThaKeo, { once: true });
    window.addEventListener('pointercancel', mgThaKeo, { once: true });
    return;
  }
  if (ST.chon !== i) { ST.chon = i; mgDs(); mgVe(); }
  const t = ST.cau_hinh.truong[i];
  const r = ST.kq.khung.getBoundingClientRect();
  _keo = { i: i, kieu: kieu, x0: e.clientX, y0: e.clientY, tx: t.x, ty: t.y, tw: t.w, rw: r.width, rh: r.height, da: false,
           bd: HD ? ST.cau_hinh.bang.y_dau : 0, bc: HD ? ST.cau_hinh.bang.y_cuoi : 0 };
  window.addEventListener('pointermove', mgKeo);
  window.addEventListener('pointerup', mgThaKeo, { once: true });
  window.addEventListener('pointercancel', mgThaKeo, { once: true });
}
function mgKeo(e) {
  if (!_keo) return;
  const dx = (e.clientX - _keo.x0) / _keo.rw, dy = (e.clientY - _keo.y0) / _keo.rh;
  if (Math.abs(e.clientX - _keo.x0) + Math.abs(e.clientY - _keo.y0) > 2) _keo.da = true;
  if (_keo.kieu === 'vung') {
    ST.cau_hinh.bang.y_cuoi = _keo.yc + dy; mgKepBang();
    if (ST.kq.vung) ST.kq.vung.style.height = ((ST.cau_hinh.bang.y_cuoi - ST.cau_hinh.bang.y_dau) * 100) + '%';
    return;
  }
  const t = ST.cau_hinh.truong[_keo.i];
  if (HD && MG_COT[t.key] && _keo.kieu === 'dich') {
    // cột thuộc bảng: kéo ngang = dời cột; kéo dọc = dời CẢ bảng (giữ chiều cao vùng hàng)
    const b = ST.cau_hinh.bang, cao = _keo.bc - _keo.bd;
    t.x = _keo.tx + dx;
    b.y_dau = Math.max(0, Math.min(1 - cao, _keo.bd + dy)); b.y_cuoi = b.y_dau + cao;
    mgKepBang();
  } else if (_keo.kieu === 'dich') { t.x = _keo.tx + dx; t.y = _keo.ty + dy; }
  else { t.w = _keo.tw + dx; }
  mgKep(t);
  const d = ST.kq.khung.querySelector('.mg-o[data-i="' + _keo.i + '"]');
  if (d) { d.style.left = (t.x * 100) + '%'; d.style.top = (t.y * 100) + '%'; d.style.width = (t.w * 100) + '%'; }
}
function mgThaKeo() {
  window.removeEventListener('pointermove', mgKeo);
  const da = _keo && _keo.da; _keo = null;
  if (da) { if (HD) mgDongBoONhap(); mgDanhDauDoi(); mgDs(); mgVe(); }
}
// Khung xem trước đổi bề rộng (xoay máy, thu/phóng cửa sổ, đổi bố cục) → vẽ lại theo tỷ lệ mới
let _rongCu = 0;
new ResizeObserver(function () {
  const w = document.getElementById('mg-xem-ngoai').clientWidth;
  if (w && Math.abs(w - _rongCu) > 1 && !_keo) { _rongCu = w; mgVe(); }
}).observe(document.getElementById('mg-xem-ngoai'));

async function mgInThu() {
  if (!ST.anh_src) { mgMsg('Chưa có ảnh mẫu — hãy chọn ảnh trước.', true); return; }
  let ban = document.getElementById('mg-ban-in');
  if (!ban) { ban = document.createElement('div'); ban.id = 'mg-ban-in'; document.body.appendChild(ban); }
  const O = { cau_hinh: ST.cau_hinh, anh_src: ST.anh_src, anh_rong: ST.anh_rong, anh_cao: ST.anh_cao,
              du_lieu: ST.du_lieu, sua: false };
  const t = MG.trang(ST.cau_hinh);
  let sty = document.getElementById('mg-page-style');
  if (!sty) { sty = document.createElement('style'); sty.id = 'mg-page-style'; document.head.appendChild(sty); }
  sty.textContent = '@page { size: ' + t.w + 'mm ' + t.h + 'mm; margin: 0; }';
  document.body.classList.add('mg-dang-in');
  if (HD) {
    const r = MHD.ve(ban, O);
    for (const tr of r.trang) {
      const im = tr.kq.khung.querySelector('img');
      if (im && im.decode) { try { await im.decode(); } catch (_) {} }
      MG.canChinh(tr.kq, O);
    }
  } else {
  const kq = MG.ve(ban, O);
  const img = kq.khung.querySelector('img');
  if (img && img.decode) { try { await img.decode(); } catch (_) {} }
  MG.canChinh(kq, O);
  }
  const don = function () { document.body.classList.remove('mg-dang-in'); ban.innerHTML = ''; window.removeEventListener('afterprint', don); };
  window.addEventListener('afterprint', don);
  window.print();
  setTimeout(function () { if (document.body.classList.contains('mg-dang-in') && !window.matchMedia('print').matches) don(); }, 1500);
}

function mgLuu() {
  if (!ST.anh_src) { mgMsg('Chưa có ảnh mẫu — hãy chọn ảnh trước.', true); return; }
  if (!ST.cau_hinh.truong.length) { mgMsg('Chưa có ô thông tin nào — hãy thêm ít nhất 1 ô.', true); return; }
  if ((HD || MULTI) && !document.getElementById('mg-ten').value.trim()) { mgMsg('Hãy đặt tên cho mẫu trước khi lưu.', true); return; }
  askPin({ title: HD ? '💾 Lưu mẫu hóa đơn' : '💾 Lưu mẫu giấy đảm bảo', label: 'Nhập PIN quản lý' }, async function (pin) {
    const fd = new FormData();
    fd.append('cua_hang_id', ST.sid);
    fd.append('cau_hinh', JSON.stringify(ST.cau_hinh));
    fd.append('pin', pin);
      if (HD || MULTI) {
      fd.append('ten', document.getElementById('mg-ten').value);
      if (ST.mau_id) fd.append('mau_id', ST.mau_id);
    }
    if (ST.file) fd.append('file', ST.file, ST.file.name);
    const nut = document.getElementById('mg-luu'); nut.disabled = true; mgMsg('Đang lưu...');
    const d = await mgGoi(MG_API, { method: 'POST', body: fd });
    nut.disabled = false;
    if (!d.success) { mgMsg(d.thong_bao || 'Không lưu được mẫu.', true); return; }
    ST.doi = false;
    const m = d.mau;
    if (HD || MULTI) {
      const c = ST.chon, tr = ST.trang;
      await mgTaiDsMau(m.id); ST.chon = c; ST.trang = tr; mgDs(); mgVe();
      mgMsg('✅ Đã lưu mẫu "' + m.ten + '".' + (m.dang_dung ? ' Đang được dùng để in.' : ' Chọn bật mẫu để in theo mẫu này.'));
      return;
    }
    ST.file = null; document.getElementById('mg-file').value = '';
    ST.anh_src = m.anh_data_uri; ST.anh_rong = m.anh_rong; ST.anh_cao = m.anh_cao; ST.cau_hinh = m.cau_hinh;
    ST.co_mau = true;
    await mgTaiMauGiuChon();
    mgMsg('✅ Đã lưu mẫu. Từ giờ in giấy đảm bảo sẽ dùng mẫu này' + (m.dang_dung ? '.' : ' (khi bật mẫu).'));
  });
}
async function mgTaiMauGiuChon() { const c = ST.chon; await mgTaiMau(); ST.chon = c; mgDs(); mgVe(); }

function mgBatTat() {
  const bat = !ST.dang_dung;
  if (HD || MULTI) {
    if (ST.doi) { mgMsg('Hãy 💾 Lưu mẫu trước khi chọn dùng.', true); return; }
    askPin({ title: bat ? '✅ Dùng mẫu này' : '⏸️ Thôi dùng mẫu', label: bat ? 'In chứng từ của chi nhánh theo mẫu này' : 'Quay lại mẫu in cũ' }, async function (pin) {
      const d = await mgGoi(MG_API + '/' + encodeURIComponent(ST.mau_id) + '/dung', { method: 'POST',
        headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cua_hang_id: ST.sid, bat: bat, pin: pin }) });
      if (!d.success) { mgMsg(d.thong_bao || 'Không thực hiện được.', true); return; }
      await mgTaiDsMau(ST.mau_id);
      mgMsg(bat ? '✅ Đã chọn mẫu này để in.' : '⏸️ Đã tắt mẫu này.');
    });
    return;
  }
  askPin({ title: bat ? '▶️ Bật mẫu' : '⏸️ Tắt mẫu', label: bat ? 'In giấy đảm bảo theo mẫu này' : 'Quay lại in giấy đảm bảo cũ' }, async function (pin) {
    const d = await mgGoi('/api/mau-giay/bat-tat', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cua_hang_id: ST.sid, bat: bat, pin: pin }) });
    if (!d.success) { mgMsg(d.thong_bao || 'Không thực hiện được.', true); return; }
    await mgTaiMauGiuChon(); mgMsg(bat ? '✅ Đã bật mẫu.' : '⏸️ Đã tắt mẫu — in giấy đảm bảo cũ.');
  });
}

function mgXoa() {
  if (HD || MULTI) {
    askPin({ title: '🗑️ Xóa mẫu', message: 'Xóa hẳn mẫu "' + (document.getElementById('mg-ten').value || '') + '". Nếu đang dùng, chứng từ in sẽ quay về mẫu cũ.' }, async function (pin) {
      const d = await mgGoi(MG_API + '/' + encodeURIComponent(ST.mau_id), { method: 'DELETE', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cua_hang_id: ST.sid, pin: pin }) });
      if (!d.success) { mgMsg(d.thong_bao || 'Không xóa được.', true); return; }
      ST.doi = false; await mgTaiDsMau(); mgMsg('Đã xóa mẫu.');
    });
    return;
  }
  askPin({ title: '🗑️ Xóa mẫu giấy đảm bảo', message: 'Xóa hẳn ảnh và vị trí chữ đã lưu của chi nhánh này. In sẽ quay về giấy đảm bảo cũ.' }, async function (pin) {
    const d = await mgGoi('/api/mau-giay', { method: 'DELETE', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cua_hang_id: ST.sid, pin: pin }) });
    if (!d.success) { mgMsg(d.thong_bao || 'Không xóa được.', true); return; }
    await mgTaiMau(); mgMsg('Đã xóa mẫu — in giấy đảm bảo cũ.');
  });
}

mgTaiMau();
</script>
{% endblock %}