{% extends "base.html" %}
{% block title %}Duyệt yêu cầu sửa{% endblock %}
{% block content %}
<style>
  .badge-cho  { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
  .badge-duyet{ background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
  .badge-tu   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
  .loai-tag   { background:#ede9fe; color:#5b21b6; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
  .diff-key   { color:#6b7280; font-size:11px; }
  .diff-new   { color:#065f46; font-weight:600; }
  .card       { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05); }
  .pcard      { border-left: 4px solid #f59e0b; transition: box-shadow .15s; }
  .pcard:hover{ box-shadow: 0 4px 24px rgba(0,0,0,.1); }
  .section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
</style>

<div class="max-w-4xl mx-auto px-4 py-6">

  <!-- ── HEADER ── -->
  <div class="flex items-center justify-between mb-6 flex-wrap gap-3">
    <div class="flex items-center gap-3">
      <!-- Icon SVG đẹp -->
      <div class="w-14 h-14 rounded-2xl flex items-center justify-center flex-shrink-0"
           style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 12l2 2 4-4"/>
          <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.5 0 2.91.37 4.14 1.02"/>
          <path d="M17 3l4 4-4 4"/>
          <path d="M21 7H13"/>
        </svg>
      </div>
      <div>
        <h1 class="text-2xl font-black text-gray-900">Duyệt yêu cầu sửa</h1>
        <p class="text-sm text-gray-400 mt-0.5">Chỉ Giám đốc / Phó Giám đốc được truy cập trang này</p>
      </div>
    </div>
    {% if pending %}
    <div class="flex items-center gap-2.5 px-5 py-3 rounded-2xl"
         style="background:linear-gradient(135deg,#7f1d1d,#dc2626)">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
        <circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><circle cx="12" cy="16" r="1" fill="white"/>
      </svg>
      <div>
        <span class="text-2xl font-black text-white leading-none">{{ pending|length }}</span>
        <span class="text-sm text-red-100 font-medium ml-1">chờ duyệt</span>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- ── ĐANG CHỜ DUYỆT ── -->
  <div class="flex items-center gap-2 mb-3">
    <span class="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block animate-pulse"></span>
    <h2 class="font-bold text-gray-700 section-label">Đang chờ duyệt ({{ pending|length }})</h2>
  </div>

  {% if not pending %}
  <!-- Empty state đẹp -->
  <div class="card mb-8 overflow-hidden">
    <div class="py-12 px-6 flex flex-col items-center gap-4 text-center"
         style="background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%)">
      <svg width="96" height="96" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="56" fill="#d1fae5" stroke="#6ee7b7" stroke-width="2"/>
        <circle cx="60" cy="60" r="40" fill="#a7f3d0"/>
        <!-- Checkmark -->
        <path d="M38 60 L53 75 L82 46" stroke="#065f46" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        <!-- Stars decoration -->
        <circle cx="24" cy="30" r="4" fill="#fbbf24" opacity=".7"/>
        <circle cx="96" cy="28" r="3" fill="#fbbf24" opacity=".5"/>
        <circle cx="100" cy="85" r="5" fill="#6ee7b7" opacity=".6"/>
        <circle cx="18" cy="88" r="3.5" fill="#6ee7b7" opacity=".5"/>
      </svg>
      <div>
        <div class="text-xl font-black text-green-800 mb-1">Tất cả đã được xử lý!</div>
        <div class="text-sm text-green-600">Không có yêu cầu nào đang chờ duyệt</div>
      </div>
    </div>
  </div>
  {% else %}
  <div class="space-y-3 mb-8">
    {% for c in pending %}
    <div class="card pcard p-4" id="card-{{ c.id }}">
      <!-- Top row: loại + mã + người gửi -->
      <div class="flex items-center gap-2 flex-wrap mb-2">
        <span class="loai-tag">{{ loai_labels.get(c.loai, c.loai) }}</span>
        <span class="font-mono font-bold text-gray-800 text-sm">{{ c.ma_phieu }}</span>
        <span class="text-gray-300">•</span>
        <span class="text-xs text-gray-500">
          <svg class="inline w-3 h-3 text-gray-400 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.58-7 8-7s8 3 8 7"/></svg>
          <b>{{ c.nguoi_gui }}</b>
        </span>
        <span class="text-gray-300">•</span>
        <span class="text-xs text-gray-400">
          <svg class="inline w-3 h-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          {{ c.ngay_gui }}
        </span>
      </div>

      {% if c.mo_ta %}
      <div class="text-sm text-gray-700 mb-2 flex items-start gap-1.5">
        <svg class="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        {{ c.mo_ta }}
      </div>
      {% endif %}

      <!-- Nội dung thay đổi — LUÔN HIỆN SẴN, không cần bấm mở, phần MỚI được highlight nổi bật -->
      {% set payload = c.payload | from_json %}

      <!-- 📌 TÌNH TRẠNG PHIẾU LÚC GỬI (chụp lại khi nhân viên bấm gửi duyệt) -->
      {% if payload is mapping and payload.get('_boi_canh') %}
      <div class="mb-2 rounded-xl px-3 py-2" style="background:#f8fafc;border:1px solid #e2e8f0">
        <div class="font-semibold text-gray-500 mb-1 text-[10px] uppercase tracking-wide">📌 Phiếu hiện tại (trước khi sửa)</div>
        <div class="flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-gray-600">
          {% for b in payload['_boi_canh'] %}
          <span><span class="text-gray-400">{{ b.label }}:</span> <b class="text-gray-800">{{ b.value }}</b></span>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      <div class="mb-3">
        {% if payload is mapping and payload.get('_changes') %}
          <div class="font-semibold text-gray-500 mb-1.5 text-[10px] uppercase tracking-wide">🔍 Nội dung thay đổi ({{ payload['_changes']|length }})</div>
          <div class="space-y-1.5">
            {% for ch in payload['_changes'] %}
            <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs bg-amber-50/70 rounded-lg px-2.5 py-2 border border-amber-100">
              <span class="font-bold text-gray-700 whitespace-nowrap">{{ ch.label }}:</span>
              <span class="text-red-500 line-through decoration-red-300">{{ ch.old }}</span>
              <span class="text-amber-500 font-bold">→</span>
              <span class="text-white font-extrabold px-2 py-0.5 rounded-md" style="background:#059669">{{ ch.new }}</span>
            </div>
            {% endfor %}
          </div>
          {% if payload.get('items') %}
          <div class="mt-2 text-gray-400 text-[10px]">
            📦 Kèm theo {{ payload['items']|length }} món hàng — bấm 🖨️ In phiếu để xem chi tiết
          </div>
          {% endif %}
        {% elif payload is mapping and payload.get('_delta') %}
          <div class="font-semibold text-gray-500 mb-1.5 text-[10px] uppercase tracking-wide">🔍 Nội dung thay đổi</div>
          <div class="space-y-1">
            {% for line in payload['_delta'] %}
            <div class="text-xs bg-blue-50 rounded-lg px-2.5 py-1.5 border border-blue-100 text-blue-800 font-medium">› {{ line }}</div>
            {% endfor %}
          </div>
        {% else %}
          <div class="flex items-center gap-2 text-gray-400 text-xs bg-gray-50 rounded-lg px-2.5 py-2 border border-gray-100">
            <svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg>
            Yêu cầu cũ — chưa ghi lại thông tin thay đổi cụ thể. Bấm <strong>🖨️ In phiếu</strong> để xem toàn bộ dữ liệu.
          </div>
        {% endif %}
      </div>

      <!-- Action buttons — hàng ngang 3 cột trên điện thoại, dễ bấm bằng ngón tay cái -->
      <div class="grid grid-cols-3 gap-2">
        <button onclick="doApprove({{ c.id }})"
          class="btn-ios text-white text-sm px-3 py-2.5 rounded-xl font-bold"
          style="background:linear-gradient(135deg,#065f46,#059669)">
          ✅ Duyệt
        </button>
        <button onclick="doReject({{ c.id }})"
          class="btn-ios text-white text-sm px-3 py-2.5 rounded-xl font-bold"
          style="background:linear-gradient(135deg,#991b1b,#dc2626)">
          ❌ Từ chối
        </button>
        <a href="/approval/{{ c.id }}/print" target="_blank"
          class="btn-ios text-xs px-3 py-2.5 rounded-xl font-semibold text-center"
          style="background:#f1f5f9; color:#475569; border:1px solid #e2e8f0">
          🖨️ In phiếu
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- ── LỊCH SỬ ── -->
  <div class="flex items-center gap-2 mb-3">
    <span class="w-2.5 h-2.5 rounded-full bg-gray-300 inline-block"></span>
    <h2 class="font-bold text-gray-700 section-label">Lịch sử ({{ history|length }} gần nhất)</h2>
    <span id="ls-dem" class="text-xs font-normal text-gray-400"></span>
  </div>

  {% if history %}
  <!-- 27/08/2026: Tìm kiếm + lọc lịch sử duyệt (lọc phía CLIENT trên {{ history|length }} dòng
       đã tải sẵn — không cần route mới cho phần liệt kê, chỉ thêm route xem CHI TIẾT 1 dòng). -->
  <div class="card p-3 mb-3 grid grid-cols-1 sm:grid-cols-4 gap-2">
    <input id="ls-tim" class="border border-gray-200 rounded-lg px-3 py-2 text-sm sm:col-span-2"
           placeholder="🔎 Tìm mã phiếu / người gửi / người duyệt..." oninput="locLichSu()">
    <select id="ls-loai" class="border border-gray-200 rounded-lg px-3 py-2 text-sm" onchange="locLichSu()">
      <option value="">Mọi loại phiếu</option>
      {% for k, v in loai_labels.items() %}<option value="{{ k }}">{{ v }}</option>{% endfor %}
    </select>
    <select id="ls-ket-qua" class="border border-gray-200 rounded-lg px-3 py-2 text-sm" onchange="locLichSu()">
      <option value="">Mọi kết quả</option>
      <option value="da_duyet">✅ Đã duyệt</option>
      <option value="tu_choi">❌ Từ chối</option>
    </select>
  </div>
  {% endif %}

  {% if not history %}
  <div class="card p-10 flex flex-col items-center gap-3 text-center">
    <svg width="56" height="56" viewBox="0 0 64 64" fill="none">
      <circle cx="32" cy="32" r="28" fill="#f3f4f6" stroke="#e5e7eb" stroke-width="2"/>
      <path d="M32 20v12l8 4" stroke="#9ca3af" stroke-width="3" stroke-linecap="round"/>
      <circle cx="32" cy="32" r="16" stroke="#d1d5db" stroke-width="2" fill="none"/>
    </svg>
    <div class="text-gray-400 font-semibold">Chưa có lịch sử duyệt</div>
  </div>
  {% else %}
  <div class="card overflow-hidden">
    <div class="overflow-x-auto">
    <table class="w-full text-sm data-card-table">
      <thead>
        <tr style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Phiếu</th>
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Người gửi</th>
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Ngày gửi</th>
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Kết quả</th>
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Người duyệt</th>
          <th class="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wide">Lý do</th>
          <th class="px-4 py-3 text-center text-xs font-bold text-white uppercase tracking-wide">In</th>
        </tr>
      </thead>
      <tbody id="ls-tbody">
        {% for c in history %}
        <tr class="border-b border-gray-50 hover:bg-blue-50 transition cursor-pointer" onclick="xemChiTietLichSu({{ c.id }})"
            data-loai="{{ c.loai }}" data-ket-qua="{{ c.trang_thai }}"
            data-tim="{{ (c.ma_phieu or '')|lower }} {{ (c.nguoi_gui or '')|lower }} {{ (c.nguoi_duyet or '')|lower }}">
          <td class="px-4 py-2.5 dct-title">
            <span class="loai-tag">{{ loai_labels.get(c.loai, c.loai) }}</span>
            <span class="font-mono text-xs ml-1 text-gray-700">{{ c.ma_phieu }}</span>
          </td>
          <td class="px-4 py-2.5 text-gray-700 font-medium" data-label="Người gửi">{{ c.nguoi_gui }}</td>
          <td class="px-4 py-2.5 text-gray-400 text-xs" data-label="Ngày gửi">{{ c.ngay_gui }}</td>
          <td class="px-4 py-2.5" data-label="Kết quả">
            {% if c.trang_thai == 'da_duyet' %}
            <span class="badge-duyet px-2 py-0.5 rounded-full text-xs font-bold">✅ Đã duyệt</span>
            {% else %}
            <span class="badge-tu px-2 py-0.5 rounded-full text-xs font-bold">❌ Từ chối</span>
            {% endif %}
          </td>
          <td class="px-4 py-2.5 text-gray-500 text-xs" data-label="Người duyệt">
            {{ c.nguoi_duyet or '—' }}<br>
            <span class="text-gray-300">{{ c.ngay_duyet or '' }}</span>
          </td>
          <td class="px-4 py-2.5 text-red-600 text-xs" data-label="Lý do">{{ c.ly_do_tu_choi or '' }}</td>
          <td class="px-4 py-2.5 text-center dct-act" onclick="event.stopPropagation()">
            <a href="/approval/{{ c.id }}/print" target="_blank"
               class="text-blue-500 hover:text-blue-700 text-xs font-semibold">🖨️</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
  </div>
  {% endif %}

</div>

<!-- ── Modal từ chối ── -->
<div id="reject-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,.55)" onclick="if(event.target===this)closeRejectModal()">
  <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4">
    <div class="flex items-center gap-3 mb-4">
      <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
           style="background:linear-gradient(135deg,#991b1b,#dc2626)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </div>
      <div>
        <h3 class="font-bold text-lg text-red-700">Từ chối yêu cầu</h3>
        <p class="text-xs text-gray-400" id="reject-modal-sub"></p>
      </div>
    </div>
    <label class="block text-sm font-semibold text-gray-600 mb-1">
      Lý do từ chối <span class="text-red-500">*</span>
    </label>
    <textarea id="reject-reason" class="input-ios w-full mb-3" rows="3"
      placeholder="Nhập lý do từ chối cụ thể..."></textarea>
    <label class="block text-sm font-semibold text-gray-600 mb-1">
      Mã PIN xác nhận <span class="text-red-500">*</span>
    </label>
    <input id="reject-pin" type="password" inputmode="numeric" maxlength="10"
      class="input-ios w-full mb-4 text-center font-mono text-lg tracking-widest" placeholder="••••••"
      onkeydown="if(event.key==='Enter')confirmReject()">
    <div class="flex justify-end gap-2">
      <button onclick="closeRejectModal()"
        class="btn-ios btn-ios-secondary px-5 py-2.5">Hủy</button>
      <button onclick="confirmReject()"
        id="btn-confirm-reject"
        class="btn-ios text-white px-6 py-2.5 font-bold rounded-xl"
        style="background:linear-gradient(135deg,#991b1b,#dc2626)">
        Xác nhận từ chối
      </button>
    </div>
  </div>
</div>

<!-- 27/08/2026: Modal xem CHI TIẾT ĐẦY ĐỦ 1 dòng lịch sử (đã duyệt/từ chối) -->
<div id="ls-detail-modal" class="hidden fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4"
     style="background:rgba(0,0,0,.55)" onclick="if(event.target===this)document.getElementById('ls-detail-modal').classList.add('hidden')">
  <div class="bg-white w-full sm:max-w-lg rounded-t-2xl sm:rounded-2xl flex flex-col" style="max-height:90vh">
    <div class="p-4 text-white rounded-t-2xl flex items-center justify-between"
         style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
      <div>
        <div class="font-bold" id="ls-d-tieu-de">Chi tiết yêu cầu</div>
        <div class="text-xs opacity-80" id="ls-d-phu">—</div>
      </div>
      <button onclick="document.getElementById('ls-detail-modal').classList.add('hidden')"
              class="text-white text-2xl leading-none px-2">×</button>
    </div>
    <div class="p-4 overflow-y-auto flex-1" id="ls-d-than">Đang tải...</div>
  </div>
</div>

<script>
// 27/08/2026: Tìm kiếm + lọc "Lịch sử" (client-side trên các dòng đã tải sẵn) + xem chi tiết
// đầy đủ 1 dòng lịch sử qua GET /api/approval/<id> (mới thêm — approval_db.get_change() vốn
// đã trả đủ payload, chỉ chưa có API JSON cho lịch sử trước đây).
function locLichSu() {
  const tim = (document.getElementById('ls-tim')?.value || '').trim().toLowerCase();
  const loai = document.getElementById('ls-loai')?.value || '';
  const kq = document.getElementById('ls-ket-qua')?.value || '';
  let hien = 0, tong = 0;
  document.querySelectorAll('#ls-tbody tr').forEach(tr => {
    tong++;
    const okTim = !tim || (tr.dataset.tim || '').includes(tim);
    const okLoai = !loai || tr.dataset.loai === loai;
    const okKq = !kq || tr.dataset.ketQua === kq;
    const show = okTim && okLoai && okKq;
    tr.style.display = show ? '' : 'none';
    if (show) hien++;
  });
  const dem = document.getElementById('ls-dem');
  if (dem) dem.textContent = (tim || loai || kq) ? `(khớp ${hien}/${tong})` : '';
}

// Nội dung yêu cầu (mô tả, tên khách, giá trị trước/sau...) do người dùng nhập → luôn là CHỮ (14/10/2026: nút
// "Xin xóa" ở Bán hàng đưa tên khách vào đây — tên chứa <img onerror> từng chạy mã trong phiên Giám đốc).
const _lsE = v => String(v == null ? '' : v).replace(/&/g, '&amp;').replace(/</g, '&lt;')
  .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');

async function xemChiTietLichSu(id) {
  const modal = document.getElementById('ls-detail-modal');
  const than = document.getElementById('ls-d-than');
  than.innerHTML = '<div class="text-center text-gray-400 py-6">Đang tải…</div>';
  modal.classList.remove('hidden');
  try {
    const r = await fetch('/api/approval/' + id);
    const d = await r.json();
    if (!d.success) { than.innerHTML = '<div class="text-red-600 text-center py-4">' + _lsE(d.error || 'Lỗi') + '</div>'; return; }
    const c = d.change;
    const payload = c.payload || {};
    document.getElementById('ls-d-tieu-de').textContent = c.loai_label + ' — ' + (c.ma_phieu || '');
    document.getElementById('ls-d-phu').textContent = 'Gửi bởi ' + (c.nguoi_gui || '—') + ' · ' + (c.ngay_gui || '');

    let html = '';
    if (c.mo_ta) html += `<div class="text-sm text-gray-700 mb-3">${_lsE(c.mo_ta)}</div>`;

    const ketQuaBadge = c.trang_thai === 'da_duyet'
      ? '<span class="badge-duyet px-2 py-0.5 rounded-full text-xs font-bold">✅ Đã duyệt</span>'
      : '<span class="badge-tu px-2 py-0.5 rounded-full text-xs font-bold">❌ Từ chối</span>';
    html += `<div class="flex flex-wrap items-center gap-2 mb-3 text-xs text-gray-500">
      ${ketQuaBadge}
      <span>bởi <b class="text-gray-700">${_lsE(c.nguoi_duyet || '—')}</b></span>
      <span class="text-gray-300">·</span><span>${_lsE(c.ngay_duyet || '')}</span>
    </div>`;
    if (c.trang_thai === 'tu_choi' && c.ly_do_tu_choi) {
      html += `<div class="text-sm text-red-700 bg-red-50 border border-red-100 rounded-lg px-3 py-2 mb-3">
        <b>Lý do từ chối:</b> ${_lsE(c.ly_do_tu_choi)}</div>`;
    }

    if (Array.isArray(payload._boi_canh) && payload._boi_canh.length) {
      html += `<div class="mb-3 rounded-xl px-3 py-2" style="background:#f8fafc;border:1px solid #e2e8f0">
        <div class="font-semibold text-gray-500 mb-1 text-[10px] uppercase tracking-wide">📌 Phiếu hiện tại lúc gửi</div>
        <div class="flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-gray-600">
          ${payload._boi_canh.map(b => `<span><span class="text-gray-400">${_lsE(b.label)}:</span> <b class="text-gray-800">${_lsE(b.value)}</b></span>`).join('')}
        </div></div>`;
    }
    if (Array.isArray(payload._changes) && payload._changes.length) {
      html += `<div class="font-semibold text-gray-500 mb-1.5 text-[10px] uppercase tracking-wide">🔍 Nội dung thay đổi (${payload._changes.length})</div>
        <div class="space-y-1.5 mb-3">
        ${payload._changes.map(ch => `<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs bg-amber-50/70 rounded-lg px-2.5 py-2 border border-amber-100">
          <span class="font-bold text-gray-700 whitespace-nowrap">${_lsE(ch.label)}:</span>
          <span class="text-red-500 line-through decoration-red-300">${_lsE(ch.old)}</span>
          <span class="text-amber-500 font-bold">→</span>
          <span class="text-white font-extrabold px-2 py-0.5 rounded-md" style="background:#059669">${_lsE(ch.new)}</span>
        </div>`).join('')}</div>`;
    } else if (Array.isArray(payload._delta) && payload._delta.length) {
      html += `<div class="font-semibold text-gray-500 mb-1.5 text-[10px] uppercase tracking-wide">🔍 Nội dung thay đổi</div>
        <div class="space-y-1 mb-3">
        ${payload._delta.map(line => `<div class="text-xs bg-blue-50 rounded-lg px-2.5 py-1.5 border border-blue-100 text-blue-800 font-medium">› ${_lsE(line)}</div>`).join('')}</div>`;
    } else {
      html += `<div class="text-gray-400 text-xs bg-gray-50 rounded-lg px-2.5 py-2 border border-gray-100 mb-3">
        Yêu cầu cũ — chưa ghi lại thông tin thay đổi cụ thể.</div>`;
    }
    if (Array.isArray(payload.items) && payload.items.length) {
      html += `<div class="text-gray-400 text-[11px] mb-3">📦 Kèm theo ${payload.items.length} món hàng — bấm 🖨️ In phiếu để xem chi tiết.</div>`;
    }
    html += `<a href="/approval/${+c.id}/print" target="_blank"
      class="btn-ios text-xs px-3 py-2.5 rounded-xl font-semibold text-center block"
      style="background:#f1f5f9; color:#475569; border:1px solid #e2e8f0">🖨️ In phiếu</a>`;
    than.innerHTML = html;
  } catch (e) {
    than.innerHTML = '<div class="text-red-600 text-center py-4">Lỗi kết nối.</div>';
  }
}

let _pendingRejectId = null;

// ── DUYỆT NHANH: nhập PIN 1 LẦN cho cả phiên trang — các lần duyệt sau chỉ 1 chạm.
// PIN chỉ giữ trong biến của trang (đóng trang là mất); PIN sai thì xóa để hỏi lại.
let _pinDaNho = '';

function _capNhatDemChoDuyet() {
  // Giảm số "chờ duyệt" trên tiêu đề tại chỗ (không reload)
  document.querySelectorAll('.section-label').forEach(el => {
    const m = el.textContent.match(/Đang chờ duyệt \((\d+)\)/);
    if (m) el.textContent = `Đang chờ duyệt (${Math.max(0, +m[1] - 1)})`;
  });
}

function _hoanTatThe(id, ok) {
  const card = document.getElementById('card-' + id);
  if (!card) return;
  card.style.transition = 'all .35s';
  card.style.opacity = '.45';
  card.style.borderLeftColor = ok ? '#059669' : '#dc2626';
  card.querySelectorAll('button').forEach(b => b.disabled = true);
  card.insertAdjacentHTML('afterbegin', ok
    ? '<div style="background:#d1fae5;color:#065f46;font-weight:700;font-size:13px;padding:6px 12px;border-radius:8px;margin-bottom:8px">✅ Đã duyệt</div>'
    : '<div style="background:#fee2e2;color:#991b1b;font-weight:700;font-size:13px;padding:6px 12px;border-radius:8px;margin-bottom:8px">❌ Đã từ chối</div>');
  setTimeout(() => { card.style.maxHeight = '0'; card.style.overflow = 'hidden';
                     card.style.marginBottom = '0'; card.style.padding = '0'; }, 1600);
  _capNhatDemChoDuyet();
}

async function _guiDuyet(id, pin, btn) {
  btn.disabled = true; btn.textContent = '⏳ Đang xử lý...';
  try {
    const res = await fetch(`/api/approval/${id}/approve`, {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({pin})
    });
    const d = await res.json();
    if (d.success) {
      _pinDaNho = pin;            // nhớ PIN cho các lần duyệt sau trong trang này
      _hoanTatThe(id, true);
    } else {
      if ((d.error || '') === 'forbidden') _pinDaNho = '';   // PIN sai → hỏi lại lần sau
      btn.disabled = false; btn.textContent = '✅ Duyệt';
      alert('❌ ' + (d.message || d.error || 'Thất bại — kiểm tra lại mã PIN'));
    }
  } catch(e) {
    btn.disabled = false; btn.textContent = '✅ Duyệt';
    alert('❌ Lỗi kết nối: ' + e.message);
  }
}

function doApprove(id) {
  const btn = event.currentTarget;
  if (_pinDaNho) { _guiDuyet(id, _pinDaNho, btn); return; }   // đã nhập PIN → duyệt 1 chạm
  askPin('Nhập mã PIN để DUYỆT (chỉ hỏi 1 lần cho cả trang)', (pin) => _guiDuyet(id, pin, btn));
}

function doReject(id) {
  _pendingRejectId = id;
  const card = document.getElementById('card-' + id);
  const sub = card ? card.querySelector('.loai-tag, .font-mono') : null;
  document.getElementById('reject-modal-sub').textContent = sub ? sub.textContent : ('Yêu cầu #' + id);
  document.getElementById('reject-reason').value = '';
  document.getElementById('reject-pin').value = _pinDaNho;   // đã nhớ PIN → chỉ cần gõ lý do
  document.getElementById('reject-modal').classList.remove('hidden');
  setTimeout(() => document.getElementById('reject-reason').focus(), 120);
}

function closeRejectModal() {
  document.getElementById('reject-modal').classList.add('hidden');
  _pendingRejectId = null;
}

async function confirmReject() {
  const ly_do = document.getElementById('reject-reason').value.trim();
  if (!ly_do) {
    alert('⚠️ Vui lòng nhập lý do từ chối.');
    document.getElementById('reject-reason').focus();
    return;
  }
  const pin = document.getElementById('reject-pin').value.trim();
  if (!pin) {
    alert('⚠️ Vui lòng nhập mã PIN xác nhận.');
    document.getElementById('reject-pin').focus();
    return;
  }
  const btn = document.getElementById('btn-confirm-reject');
  btn.disabled = true; btn.textContent = '⏳ Đang xử lý...';
  try {
    const res = await fetch(`/api/approval/${_pendingRejectId}/reject`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({pin, ly_do})
    });
    const d = await res.json();
    if (d.success) {
      _pinDaNho = pin;                 // nhớ PIN cho các lần xử lý sau trong trang
      const id = _pendingRejectId;
      closeRejectModal();
      _hoanTatThe(id, false);
      btn.disabled = false; btn.textContent = 'Xác nhận từ chối';
    } else {
      if ((d.error || '') === 'forbidden') _pinDaNho = '';
      btn.disabled = false; btn.textContent = 'Xác nhận từ chối';
      alert('❌ ' + (d.message || d.error || 'Thất bại — kiểm tra lại mã PIN'));
    }
  } catch(e) {
    btn.disabled = false; btn.textContent = 'Xác nhận từ chối';
    alert('❌ Lỗi kết nối: ' + e.message);
  }
}

// ── Phát chuông TỨC THÌ khi có yêu cầu mới (polling, không chờ web push) ──────
let _lastSeenApprovalId = null;
async function _pollApproval() {
  try {
    const r = await fetch('/api/approval/count', { cache: 'no-store' });
    const d = await r.json();
    const latest = d.latest_id || 0;
    if (_lastSeenApprovalId === null) { _lastSeenApprovalId = latest; return; }
    if (latest > _lastSeenApprovalId) {
      _lastSeenApprovalId = latest;
      if (typeof playPushChime === 'function') playPushChime();   // chuông ngay lập tức
      // Hiện băng báo + tự tải lại để thấy yêu cầu mới
      let bn = document.getElementById('new-req-banner');
      if (!bn) {
        bn = document.createElement('div');
        bn.id = 'new-req-banner';
        bn.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:200;background:linear-gradient(90deg,#991b1b,#dc2626);color:#fff;text-align:center;padding:10px;font-weight:700;font-size:14px;box-shadow:0 2px 12px rgba(0,0,0,.25);cursor:pointer';
        bn.textContent = '🔔 Có yêu cầu duyệt mới! Đang tải lại...';
        bn.onclick = () => location.reload();
        document.body.appendChild(bn);
      }
      setTimeout(() => location.reload(), 1400);
    }
  } catch(e) {}
}
setInterval(_pollApproval, 2000);
_pollApproval();
</script>
{% endblock %}