{# ══ Ô NHẬP MÃ PIN DÙNG CHUNG TOÀN APP ══════════════════════════════════════
   Trước 28/07/2026 app có 3 kiểu nhập PIN khác nhau:
     · askPin()        — modal ô mật khẩu (16 trang)
     · showPinConfirm()— modal RIÊNG của pos.html, TRÙNG id với modal của base
                         → askPin trên trang Bán hàng mở nhầm modal (lỗi thật, đã đo)
     · prompt()        — hộp trần của trình duyệt, HIỆN RÕ SỐ PIN (5 trang in)
   Nay gộp về MỘT kiểu: bàn phím số ngay trong app.

   Vì sao bàn phím trong app tiện hơn ô nhập thường:
     · iPhone KHÔNG bật bàn phím hệ thống (ô ẩn) → không che màn hình, không giật
     · nút to (58px) dễ bấm bằng ngón cái, tay đeo găng vẫn trúng
     · gõ đủ số là TỰ xác nhận, không phải với tay bấm nút
     · sai PIN thì rung + xoá, gõ lại ngay tại chỗ (không phải mở lại từ đầu)
     · máy tính vẫn gõ bằng bàn phím vật lý được (số, Backspace, Enter, Esc)

   CÁCH DÙNG
     askPin('Xóa hóa đơn HD123', pin => {...})                  ← kiểu cũ, vẫn chạy
     askPin({title:'🗑️ Xóa hóa đơn', message:'Không hoàn tác',
             okLabel:'Xóa'}, async pin => {...})                ← kiểu đầy đủ
     pinLoi('❌ Sai mã PIN')   → báo lỗi, GIỮ modal để gõ lại
     dongPin()                → đóng
#}
<div id="pin-confirm-modal" class="hidden fixed inset-0 z-[300] flex items-end sm:items-center justify-center"
     style="background:rgba(0,0,0,.55)" onclick="if(event.target===this)_pinConfirmCancel()">
  <div id="pin-box" class="bg-white w-full sm:mx-4 p-5 pb-6" data-pin-box
       style="border-radius:24px 24px 0 0">
    <h3 id="pcm-title" class="font-extrabold text-gray-800 text-center text-lg">🔐 Xác nhận mã PIN</h3>
    <p id="pin-confirm-label" class="text-sm text-gray-500 text-center mt-1"></p>
    <p id="pcm-message" class="text-sm text-gray-500 text-center mt-1"></p>

    {# Ô ẩn: giữ giá trị thật + tương thích code cũ đọc #pin-confirm-input / #pcm-pin #}
    <input id="pin-confirm-input" type="password" class="sr-only" tabindex="-1" autocomplete="off">
    <input id="pcm-pin" type="hidden">

    <div id="pin-dots" class="flex justify-center gap-2.5 my-4" style="min-height:18px"></div>
    <p id="pin-confirm-error" class="text-red-600 text-xs text-center min-h-[1.1em] font-semibold"></p>
    {# #pcm-err: CẦU NỐI cho code cũ (pos.html ghi lỗi vào đây). ẨN hẳn — nội dung
       được chép sang dòng lỗi ở trên, nếu để hiện sẽ ra HAI dòng "Sai mã PIN". #}
    <p id="pcm-err" style="display:none"></p>

    <div class="grid grid-cols-3 gap-2.5 mt-2" id="pin-keys"></div>
  </div>
</div>

<style>
  /* thay cho sm:max-w-[330px] — class arbitrary nay KHONG co trong
     tailwind-built.css dung san (do template sinh sau lan build) */
  @media (min-width:640px){ #pin-box{ max-width:330px } }
  #pin-box { box-shadow: 0 -8px 40px rgba(0,0,0,.25); }
  @media (min-width: 640px) { #pin-box { border-radius: 24px !important; } }
  .pin-key {
    height: 58px; border-radius: 16px; border: 1px solid #e5e7eb; background: #fff;
    font-size: 24px; font-weight: 700; color: #1f2937; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation; user-select: none; transition: transform .06s, background .12s;
  }
  .pin-key:active { transform: scale(.94); background: #fef3c7; }
  .pin-key.pin-act { font-size: 19px; background: #f9fafb; color: #6b7280; }
  .pin-key.pin-ok  { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; border: 0; }
  .pin-dot {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d1d5db; background: #fff;
    transition: transform .12s, background .12s;
  }
  .pin-dot.on { background: #d97706; border-color: #d97706; transform: scale(1.15); }
  @keyframes pinShake {
    0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)}
  }
  .pin-shake { animation: pinShake .38s ease; }
</style>

<script>
window._pinCb = null;
let _pinVal = '';
let _pinLen = parseInt(localStorage.getItem('pin_do_dai') || '0') || 0;   // học từ lần nhập đúng

// Hỏi máy chủ ĐỘ DÀI mã PIN (chỉ độ dài, không phải mã) → gõ đủ số là tự xác nhận
// ngay từ lần đầu. Người đã đăng nhập mới hỏi được.
(function _hoiDoDaiPin() {
  // Độ dài PIN gần như không đổi → đã hỏi rồi thì dùng lại số đã lưu, mỗi ngày hỏi
  // lại 1 lần. Trước đây hỏi máy chủ MỖI LẦN mở trang, tốn 1 lượt mạng vô ích.
  try {
    const cu = localStorage.getItem('pin_do_dai');
    const luc = +(localStorage.getItem('pin_do_dai_luc') || 0);
    if (cu) {
      _pinLen = +cu;
      if (Date.now() - luc < 86400000) return;   // còn hạn trong ngày → khỏi hỏi
    }
  } catch (e) {}
  fetch('/api/pin-do-dai', { cache: 'no-store' })
    .then(r => r.ok ? r.json() : null)
    .then(d => { if (d && d.do_dai > 0) { _pinLen = d.do_dai;
        localStorage.setItem('pin_do_dai', d.do_dai);
        localStorage.setItem('pin_do_dai_luc', Date.now()); } })
    .catch(() => {});
})();

function _pinVe() {
  const box = document.getElementById('pin-dots');
  const n = Math.max(_pinLen || 0, _pinVal.length, 4);
  let h = '';
  for (let i = 0; i < n; i++) h += `<span class="pin-dot${i < _pinVal.length ? ' on' : ''}"></span>`;
  box.innerHTML = h;
  document.getElementById('pin-confirm-input').value = _pinVal;
  document.getElementById('pcm-pin').value = _pinVal;
}

function _pinGo(k) {
  if (k === 'xoa') { _pinVal = _pinVal.slice(0, -1); _pinVe(); return; }
  if (k === 'huy') { _pinConfirmCancel(); return; }
  if (k === 'ok')  { _pinConfirmOk(); return; }
  if (_pinVal.length >= 12) return;
  _pinVal += k;
  _pinVe();
  // đủ số → tự xác nhận, khỏi phải với tay bấm nút
  if (_pinLen && _pinVal.length === _pinLen) setTimeout(_pinConfirmOk, 130);
}

function _pinDungPhim(e) {
  if (document.getElementById('pin-confirm-modal').classList.contains('hidden')) return;
  if (e.key >= '0' && e.key <= '9') { _pinGo(e.key); e.preventDefault(); }
  else if (e.key === 'Backspace') { _pinGo('xoa'); e.preventDefault(); }
  else if (e.key === 'Enter') { _pinConfirmOk(); e.preventDefault(); }
  else if (e.key === 'Escape') { _pinConfirmCancel(); e.preventDefault(); }
}
document.addEventListener('keydown', _pinDungPhim);

/**
 * Hỏi mã PIN.
 *   askPin('Việc gì đó', pin => {...})
 *   askPin({title, message, okLabel}, pin => {...})
 */
function askPin(opt, callback) {
  if (typeof opt === 'function') { callback = opt; opt = {}; }
  if (typeof opt === 'string') opt = { label: opt };
  opt = opt || {};
  window._pinCb = callback;
  _pinVal = '';
  document.getElementById('pcm-title').textContent = opt.title || '🔐 Xác nhận mã PIN';
  document.getElementById('pin-confirm-label').textContent = opt.label || '';
  document.getElementById('pcm-message').textContent = opt.message || '';
  document.getElementById('pin-confirm-error').textContent = '';
  document.getElementById('pcm-err').textContent = '';

  const keys = [['1','1'],['2','2'],['3','3'],['4','4'],['5','5'],['6','6'],
                ['7','7'],['8','8'],['9','9'],
                ['huy','✕'],['0','0'],['xoa','⌫']];
  document.getElementById('pin-keys').innerHTML = keys.map(([k, nhan]) =>
    `<button type="button" class="pin-key${(k === 'huy' || k === 'xoa') ? ' pin-act' : ''}"
       onclick="_pinGo('${k}')">${nhan}</button>`).join('') +
    `<button type="button" class="pin-key pin-ok" style="grid-column:1/-1;height:50px;font-size:16px"
       onclick="_pinGo('ok')">${opt.okLabel || '✓ Xác nhận'}</button>`;
  _pinVe();
  document.getElementById('pin-confirm-modal').classList.remove('hidden');
}

function _pinConfirmOk() {
  if (!_pinVal) { pinLoi('Vui lòng nhập mã PIN'); return; }
  if (_pinLen && _pinVal.length === _pinLen) localStorage.setItem('pin_do_dai', _pinLen);
  const pin = _pinVal;
  const cb = window._pinCb;
  // KHÔNG đóng ngay: hàm gọi có thể báo sai PIN bằng pinLoi() để gõ lại tại chỗ.
  // Hàm nào xong việc thì tự gọi dongPin() — hoặc trả về giá trị khác 'giu' thì đóng.
  Promise.resolve(cb ? cb(pin) : null).then(kq => { if (kq !== 'giu') dongPin(); })
    .catch(() => dongPin());
}

/** Báo sai PIN — GIỮ modal, rung nhẹ, xoá số để gõ lại ngay. */
function pinLoi(msg) {
  const box = document.getElementById('pin-box');
  document.getElementById('pin-confirm-error').textContent = msg || '❌ Sai mã PIN';
  document.getElementById('pcm-err').textContent = '';
  _pinVal = ''; _pinVe();
  box.classList.remove('pin-shake'); void box.offsetWidth; box.classList.add('pin-shake');
  if (navigator.vibrate) { try { navigator.vibrate(60); } catch (e) {} }
}

function dongPin() {
  document.getElementById('pin-confirm-modal').classList.add('hidden');
  window._pinCb = null; _pinVal = '';
}
function _pinConfirmCancel() {
  const huy = window._pinHuy; window._pinHuy = null;
  dongPin();
  if (huy) huy();
}

// ── Ô PIN CỐ ĐỊNH trên trang (id="pin-input", 11 trang có) ──────────────────
// Chạm vào ô là mở BÀN PHÍM SỐ của app thay vì bàn phím hệ thống → cùng một
// kiểu nhập trên toàn app, và trên iPhone không bị bàn phím che nửa màn hình.
// Vẫn giữ tiện lợi cũ: gõ 1 lần, mọi thao tác trên trang đó dùng lại.
(function _noiOPinCoDinh() {
  function gan() {
    document.querySelectorAll('#pin-input, .pin-field').forEach(el => {
      if (el.dataset.pinBanPhim) return;
      el.dataset.pinBanPhim = '1';
      el.readOnly = true;                 // chặn bàn phím hệ thống
      el.style.cursor = 'pointer';
      el.addEventListener('focus', e => e.target.blur());
      el.addEventListener('click', () => {
        askPin({ title: '🔐 Nhập mã PIN', label: el.dataset.pinLabel || 'Dùng cho các thao tác trên trang này' },
          pin => {
            el.value = pin;
            el.dispatchEvent(new Event('input', { bubbles: true }));
            el.dispatchEvent(new Event('change', { bubbles: true }));
          });
      });
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', gan);
  else gan();
  // ô sinh ra sau (modal, dòng thêm động) cũng được nối
  try { new MutationObserver(gan).observe(document.documentElement, { childList: true, subtree: true }); }
  catch (e) {}
})();

/**
 * Dạng chờ được (thay cho prompt() của trình duyệt vốn HIỆN RÕ SỐ PIN):
 *     const pin = getPin() || await hoiPin('Xuất hóa đơn điện tử');
 *     if (!pin) return;                     // người dùng bấm Hủy
 */
function hoiPin(label) {
  return new Promise(resolve => {
    window._pinHuy = () => resolve(null);
    askPin({ label: label || '' }, pin => {
      window._pinHuy = null;
      resolve(pin);
    });
  });
}
function closePinConfirm() { dongPin(); }   // tên cũ của pos.html

/** Tương thích pos.html: showPinConfirm(tiêu đề, mô tả, nhãn nút, hàm xử lý). */
function showPinConfirm(title, message, okLabel, onConfirm) {
  askPin({ title: title, message: message, okLabel: okLabel || '✓ Xác nhận' }, async pin => {
    await onConfirm(pin);
    // Hàm cũ báo lỗi bằng cách ghi vào #pcm-err → còn chữ nghĩa là CHƯA xong, giữ modal
    const oCu = document.getElementById('pcm-err');
    const e = oCu.textContent.trim();
    if (e) {
      oCu.textContent = '';                    // xoá ngay, tránh lần sau còn sót
      pinLoi(e);                               // hiện ĐÚNG MỘT dòng + rung + xoá số
      return 'giu';
    }
  });
}
</script>