{% extends "base.html" %}
{% block title %}Nhật ký hoạt động{% endblock %}
{% block page_subtitle %}Nhật ký hoạt động{% endblock %}

{% block extra_style %}
<style>
  /* ── Thanh lọc ────────────────────────────────────────────────────────── */
  .nk-loc      { display:flex; flex-direction:column; gap:12px; }
  .nk-lbl      { display:block; font-size:11px; font-weight:700; color:#8a8a8e;
                 text-transform:uppercase; letter-spacing:.02em; margin-bottom:5px; }
  .nk-chips    { display:flex; flex-wrap:wrap; gap:6px; }
  .nk-chip     { display:inline-flex; align-items:center; gap:5px; padding:7px 11px;
                 border-radius:999px; border:1px solid #e5e7eb; background:#fff;
                 font-size:12.5px; font-weight:600; color:#4b5563; white-space:nowrap;
                 transition:transform .07s, background .12s, border-color .12s; }
  .nk-chip:active { transform:scale(.95); }
  .nk-chip.on  { background:linear-gradient(135deg,#4a0000,#8b0000); color:#fff;
                 border-color:transparent; box-shadow:0 3px 10px rgba(74,0,0,.25); }
  .nk-o        { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }

  /* ── Dòng sự kiện ─────────────────────────────────────────────────────── */
  .nk-dong     { display:grid; grid-template-columns:44px 1fr auto; gap:11px;
                 align-items:start; padding:11px 13px; background:#fff;
                 border:1px solid #ececf1; border-left:4px solid var(--nk-mau,#9ca3af);
                 border-radius:13px; margin-bottom:8px; cursor:pointer;
                 transition:box-shadow .15s, transform .07s, border-color .15s; }
  .nk-dong:hover  { box-shadow:0 4px 14px rgba(0,0,0,.07); border-color:#e0d3b4; }
  .nk-dong:active { transform:scale(.995); }
  .nk-dong.mo     { box-shadow:0 5px 18px rgba(0,0,0,.09); }
  .nk-dong.moi    { animation:nkMoi 2.4s ease-out; }
  @keyframes nkMoi { 0%{background:#fffbeb; border-color:#f0c674} 100%{background:#fff} }

  .nk-ic       { width:44px; height:44px; border-radius:12px; display:flex;
                 align-items:center; justify-content:center; font-size:19px;
                 background:var(--nk-nen,#f3f4f6); flex:0 0 auto; }
  .nk-than     { min-width:0; }
  .nk-hang1    { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:3px; }
  .nk-tag      { font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
                 background:var(--nk-nen,#f3f4f6); color:var(--nk-mau,#4b5563); }
  .nk-dt       { font-size:11.5px; color:#9aa0aa; font-weight:600; }
  .nk-nd       { font-size:13.5px; color:#1f2937; line-height:1.45; word-break:break-word; }
  .nk-hang3    { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                 margin-top:5px; font-size:11.5px; color:#9aa0aa; }
  .nk-nguoi    { font-weight:700; color:#4b5563; }
  .nk-phai     { text-align:right; font-size:11.5px; color:#9aa0aa; white-space:nowrap;
                 display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  .nk-gio      { font-weight:800; font-size:13px; color:#374151; }
  .nk-mo-dong  { font-size:11px; font-weight:800; color:#b45309; background:#fffbeb;
                 border:1px solid #f3e3bf; border-radius:999px; padding:2px 9px; }

  /* Màu theo loại hành động */
  .m-xanh { --nk-mau:#16a34a; --nk-nen:#dcfce7; }
  .m-lam  { --nk-mau:#2563eb; --nk-nen:#dbeafe; }
  .m-do   { --nk-mau:#dc2626; --nk-nen:#fee2e2; }
  .m-cam  { --nk-mau:#ea580c; --nk-nen:#ffedd5; }
  .m-tim  { --nk-mau:#7c3aed; --nk-nen:#ede9fe; }
  .m-luc  { --nk-mau:#0d9488; --nk-nen:#ccfbf1; }
  .m-xam  { --nk-mau:#6b7280; --nk-nen:#f3f4f6; }

  /* ── Khối chi tiết (bung ra khi bấm) ──────────────────────────────────── */
  .nk-ct       { background:#fbfbfd; border:1px solid #ececf1; border-radius:13px;
                 padding:13px 15px; margin:-4px 0 10px; }
  .nk-ct-luoi  { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; }
  .nk-ct-o     { background:#fff; border:1px solid #f0f0f4; border-radius:10px; padding:8px 11px; }
  .nk-ct-k     { font-size:10.5px; font-weight:700; color:#9aa0aa; text-transform:uppercase; }
  .nk-ct-v     { font-size:13px; font-weight:600; color:#1f2937; word-break:break-all; margin-top:2px; }
  .nk-td       { width:100%; border-collapse:collapse; margin-top:11px; font-size:12.5px; }
  .nk-td th    { text-align:left; padding:6px 9px; background:#f6f6f9; color:#6b7280;
                 font-size:10.5px; text-transform:uppercase; font-weight:800; }
  .nk-td td    { padding:6px 9px; border-top:1px solid #f0f0f4; vertical-align:top;
                 word-break:break-word; }
  .nk-cu       { color:#b91c1c; text-decoration:line-through; }
  .nk-moi      { color:#15803d; font-weight:700; }

  @media (max-width:640px) {
    .nk-dong  { grid-template-columns:38px 1fr; padding:10px 11px; }
    .nk-ic    { width:38px; height:38px; font-size:17px; }
    .nk-phai  { grid-column:1/-1; flex-direction:row; align-items:center; gap:9px;
                text-align:left; margin-top:2px; padding-left:49px; }
    .nk-td, .nk-td thead, .nk-td tbody, .nk-td tr, .nk-td th, .nk-td td { display:block; }
    .nk-td thead { display:none; }
    .nk-td tr { border:1px solid #f0f0f4; border-radius:10px; padding:6px 4px;
                margin-bottom:6px; background:#fff; }
    .nk-td td:before { content:attr(data-label); display:block; font-size:10px;
                       color:#9aa0aa; font-weight:700; text-transform:uppercase; }
  }
</style>
{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-3 pb-24">

  <!-- Bộ lọc -->
  <div class="ios-card p-4 mb-4">
    <div class="nk-loc">
      <div>
        <span class="nk-lbl">🔎 Tìm trong nhật ký</span>
        <input id="nk-tim" class="input-ios w-full" placeholder="Mã hàng, mã hóa đơn, tên khách, nội dung…">
      </div>

      <button onclick="nkBatLoc()" id="nk-nut-loc"
              class="w-full flex items-center justify-between px-4 py-2.5 rounded-xl border border-gray-200 bg-white text-sm font-bold text-gray-700">
        <span>⚙️ Bộ lọc <span id="nk-so-loc" class="text-xs font-semibold text-amber-700"></span></span>
        <span id="nk-mui-ten" class="text-gray-400">▾</span>
      </button>

      <div id="nk-loc-chi-tiet" class="hidden flex flex-col gap-3">
      <div>
        <span class="nk-lbl">Nghiệp vụ</span>
        <div class="nk-chips" id="nk-nhom">
          {% for n in nhom %}
          <button class="nk-chip" data-nhom="{{ n.key }}">{{ n.hinh }} {{ n.ten }}</button>
          {% endfor %}
        </div>
      </div>

      <div>
        <span class="nk-lbl">Loại thao tác</span>
        <div class="nk-chips" id="nk-hd">
          {% for h in hanh_dong %}
          <button class="nk-chip" data-hd="{{ h.key }}">{{ h.hinh }} {{ h.ten }}</button>
          {% endfor %}
        </div>
      </div>

      <div class="nk-o">
        <div>
          <span class="nk-lbl">Người thực hiện</span>
          <select id="nk-nguoi" class="input-ios w-full">
            <option value="">Tất cả</option>
            {% for u in nguoi_dung %}
            <option value="{{ u.ten }}">{{ u.ten }} ({{ u.so_lan }})</option>
            {% endfor %}
          </select>
        </div>
        <div style="align-self:end">
          <input type="date" id="nk-tu" class="input-ios w-full" placeholder="Từ ngày" aria-label="Từ ngày">
        </div>
        <div style="align-self:end">
          <input type="date" id="nk-den" class="input-ios w-full" placeholder="Đến ngày" aria-label="Đến ngày">
        </div>
      </div>
      </div><!-- /nk-loc-chi-tiet -->

      <div class="flex items-center gap-3 flex-wrap">
        <button onclick="nkXoaLoc()" class="btn-ios px-4 text-sm" style="background:#f3f4f6;color:#4b5563">↺ Bỏ lọc</button>
        <label class="flex items-center gap-2 text-sm text-gray-600 font-semibold">
          <input type="checkbox" id="nk-live" checked class="w-4 h-4"> 🔴 Theo dõi trực tiếp
        </label>
        <span id="nk-dem" class="text-xs text-gray-400 ml-auto"></span>
      </div>
    </div>
  </div>

  <!-- Ghi chú: đang ẩn các dòng điểm danh kiểm kho -->
  <div id="nk-an-box" class="hidden mb-3 rounded-xl px-4 py-2.5 text-xs bg-amber-50 text-amber-800 border border-amber-200">
    <span id="nk-an-txt"></span>
    <button onclick="nkDoiDiemDanh()" id="nk-an-nut" class="underline font-bold ml-1">hiện tất cả</button>
  </div>

  <div class="mb-3 rounded-xl px-4 py-2.5 text-xs bg-sky-50 text-sky-800 border border-sky-200">
    ℹ️ App bắt đầu ghi <b>địa chỉ IP thật, loại máy và mã máy</b> từ <b>29/07/2026</b>.
    Hoạt động trước mốc đó vẫn tra được <b>giờ · người làm · nội dung · trước–sau</b>,
    nhưng phần thiết bị để trống — hồi đó máy vào qua đường tunnel nên app chỉ thấy
    địa chỉ nội bộ 127.0.0.1.
  </div>

  <div id="nk-ds"></div>

  <div id="nk-them-box" class="text-center py-4 hidden">
    <button onclick="nkTaiThem()" id="nk-them" class="btn-ios btn-ios-gold px-6 text-sm">Tải thêm</button>
  </div>
  <div id="nk-rong" class="hidden text-center py-14 text-gray-400">
    <div class="text-4xl mb-2">🗒️</div>
    <div class="font-semibold">Không có hoạt động nào khớp bộ lọc</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ══ NHẬT KÝ HOẠT ĐỘNG ══════════════════════════════════════════════════════
// Dòng tổng quan hiện thứ CẦN THẤY NGAY (giờ, ai, làm gì, nội dung ngắn).
// Bấm vào dòng mới gọi API chi tiết → hiện đủ IP / thiết bị / mã máy / ảnh chụp
// dữ liệu trước-sau. Không tải chi tiết sẵn để danh sách luôn nhẹ.
let _nkNhom = new Set(), _nkHd = new Set();
let _nkBoQua = 0, _nkHet = false, _nkDangTai = false;
let _nkHienDiemDanh = false;
let _nkMocA = 0, _nkMocE = 0, _nkHen = null;
const _nkMoDS = new Set();     // các dòng đang mở chi tiết

const nkEsc = s => String(s == null ? '' : s)
  .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
const nkTien = n => (Number(n) * 1000).toLocaleString('vi-VN') + 'đ';

function nkThamSo(themTrang) {
  const p = new URLSearchParams();
  if (_nkNhom.size) p.set('nhom', [..._nkNhom].join(','));
  if (_nkHd.size)   p.set('hanh_dong', [..._nkHd].join(','));
  const nguoi = document.getElementById('nk-nguoi').value;
  const tim   = document.getElementById('nk-tim').value.trim();
  const tu    = document.getElementById('nk-tu').value;
  const den   = document.getElementById('nk-den').value;
  if (nguoi) p.set('nguoi', nguoi);
  if (tim)   p.set('tim', tim);
  if (tu)    p.set('tu', tu);
  if (den)   p.set('den', den);
  if (_nkHienDiemDanh) p.set('hien_diem_danh', '1');
  if (themTrang) p.set('bo_qua', _nkBoQua);
  return p;
}

async function nkTai(noiTiep) {
  if (_nkDangTai) return;
  _nkDangTai = true;
  if (!noiTiep) { _nkBoQua = 0; _nkHet = false; _nkMoDS.clear(); }
  const p = nkThamSo(noiTiep);
  p.set('gioi_han', '60');
  let d;
  try { d = await (await fetch('/api/nhat-ky?' + p.toString(), {cache:'no-store'})).json(); }
  catch (e) { _nkDangTai = false; return; }

  const ds = document.getElementById('nk-ds');
  const html = (d.su_kien || []).map(nkDongHTML).join('');
  if (noiTiep) ds.insertAdjacentHTML('beforeend', html); else ds.innerHTML = html;

  _nkBoQua += (d.su_kien || []).length;
  _nkHet = _nkBoQua >= (d.tong || 0);
  _nkMocA = d.moc_audit; _nkMocE = d.moc_edit;

  document.getElementById('nk-dem').textContent =
    'Hiện ' + _nkBoQua.toLocaleString('vi-VN') + ' / ' + (d.tong || 0).toLocaleString('vi-VN') + ' hoạt động';
  document.getElementById('nk-them-box').classList.toggle('hidden', _nkHet);
  document.getElementById('nk-rong').classList.toggle('hidden', (d.tong || 0) > 0);

  // Nói rõ đang ẩn bao nhiêu dòng — không âm thầm cắt bớt. Bật/tắt được cả 2 chiều
  // (bấm "hiện tất cả" rồi phải thu lại được, kẻo 30.000 dòng điểm danh lấp hết).
  const anBox = document.getElementById('nk-an-box');
  const anNut = document.getElementById('nk-an-nut');
  if (_nkHienDiemDanh) {
    document.getElementById('nk-an-txt').textContent =
      '🔍 Đang hiện CẢ các dòng điểm danh từng món khi kiểm kho (rất nhiều) —';
    anNut.textContent = '↩ thu gọn lại';
    anBox.classList.remove('hidden');
  } else if (d.dang_an_diem_danh > 0) {
    document.getElementById('nk-an-txt').textContent =
      '🔍 Đang thu gọn ' + d.dang_an_diem_danh.toLocaleString('vi-VN') +
      ' dòng điểm danh từng món khi kiểm kho (mỗi lần quét 1 món là 1 dòng) —';
    anNut.textContent = 'hiện tất cả';
    anBox.classList.remove('hidden');
  } else anBox.classList.add('hidden');

  _nkDangTai = false;
}

function nkDongHTML(s, laMoi) {
  const key = s.nguon + ':' + s.id;
  return `
  <div class="nk-dong m-${s.mau}${laMoi ? ' moi' : ''}" id="nkd-${key}"
       onclick="nkMo('${s.nguon}', ${s.id})">
    <div class="nk-ic">${s.hinh_hanh_dong}</div>
    <div class="nk-than">
      <div class="nk-hang1">
        <span class="nk-tag">${nkEsc(s.nhan_hanh_dong)}</span>
        <span class="nk-dt">${s.hinh_nhom} ${nkEsc(s.ten_doi_tuong)}</span>
        ${s.doi_tuong_ma ? `<span class="nk-dt font-mono">${nkEsc(s.doi_tuong_ma)}</span>` : ''}
        ${s.co_anh_chup ? '<span class="nk-dt">📎 có ảnh chụp dữ liệu</span>' : ''}
      </div>
      <div class="nk-nd">${nkEsc(s.noi_dung) || '<i class="text-gray-400">(không có mô tả)</i>'}</div>
      <div class="nk-hang3">
        <span class="nk-nguoi">👤 ${nkEsc(s.nguoi_dung)}</span>
        ${s.ip ? `<span>🌐 ${nkEsc(s.ip)}</span>` : ''}
        ${s.thiet_bi ? `<span>📱 ${nkEsc(s.thiet_bi)}</span>` : ''}
      </div>
    </div>
    <div class="nk-phai">
      <span class="nk-gio">${nkEsc((s.thoi_gian || '').slice(11, 19))}</span>
      <span>${nkEsc((s.thoi_gian || '').slice(0, 10))}</span>
      <span class="nk-mo-dong" id="nkmt-${key}">▾ xem</span>
    </div>
  </div>
  <div id="nkct-${key}"></div>`;
}

async function nkMo(nguon, id) {
  const key = nguon + ':' + id;
  const hop = document.getElementById('nkct-' + key);
  const dong = document.getElementById('nkd-' + key);
  const mt = document.getElementById('nkmt-' + key);
  if (_nkMoDS.has(key)) {                 // đang mở → đóng lại
    _nkMoDS.delete(key); hop.innerHTML = ''; dong.classList.remove('mo');
    if (mt) mt.textContent = '▾ xem';
    return;
  }
  _nkMoDS.add(key); dong.classList.add('mo');
  if (mt) mt.textContent = '▴ đóng';
  hop.innerHTML = '<div class="nk-ct text-sm text-gray-400">Đang tải chi tiết…</div>';
  let d;
  try { d = await (await fetch(`/api/nhat-ky/${nguon}/${id}`, {cache:'no-store'})).json(); }
  catch (e) { hop.innerHTML = '<div class="nk-ct text-sm text-red-500">Không tải được chi tiết.</div>'; return; }
  if (d.error) { hop.innerHTML = '<div class="nk-ct text-sm text-red-500">Không tìm thấy bản ghi.</div>'; return; }

  const o = (k, v, mo) => v
    ? `<div class="nk-ct-o"><div class="nk-ct-k">${k}</div><div class="nk-ct-v"${mo ? ' style="color:#9aa0aa;font-weight:500;font-size:12px"' : ''}>${nkEsc(v)}</div></div>`
    : '';
  // Lý do ô Thiết bị / Mã máy trống do SERVER quyết (so với bản ghi ĐẦU TIÊN có thiết bị,
  // không so theo ngày — app bắt đầu ghi lúc 11:20 ngày 29/07 nên các thao tác sáng hôm
  // đó vẫn thiếu, nếu so theo ngày sẽ ghi nhầm thành "tác vụ chạy nền").
  const thieu = d.ly_do_thieu || 'không ghi nhận';
  const CU = !!d.ly_do_thieu && d.ly_do_thieu.indexOf('chưa ghi') >= 0;
  const ipHien = !d.ip ? thieu
    : (d.ip === '127.0.0.1' && CU
        ? '127.0.0.1 — bản ghi cũ: máy vào qua đường tunnel nên app khi đó chỉ thấy địa chỉ nội bộ'
        : d.ip);
  let html = `<div class="nk-ct">
    <div class="nk-ct-luoi">
      ${o('🕒 Thời điểm', d.thoi_gian)}
      ${o('👤 Người thực hiện', d.nguoi_dung)}
      ${o('⚡ Thao tác', d.nhan_hanh_dong)}
      ${o('📂 Đối tượng', d.ten_doi_tuong + (d.doi_tuong_ma ? ' · ' + d.doi_tuong_ma : ''))}
      ${o('🌐 Địa chỉ IP', ipHien, !d.ip || (d.ip === '127.0.0.1' && CU))}
      ${o('📱 Thiết bị', d.thiet_bi || thieu, !d.thiet_bi)}
      ${o('🔑 Mã máy', d.ma_thiet_bi || thieu, !d.ma_thiet_bi)}
      ${o('🔖 Mã bản ghi', d.nguon + ' #' + d.id)}
    </div>`;

  if (d.noi_dung) html += `<div class="mt-3 text-sm text-gray-700"><b>Nội dung:</b> ${nkEsc(d.noi_dung)}</div>`;

  if ((d.thay_doi || []).length) {
    const xoa = d.hanh_dong === 'delete';
    html += `<table class="nk-td"><thead><tr>
        <th>Nội dung</th><th>${xoa ? 'Giá trị đã bị xóa' : 'Trước'}</th>${xoa ? '' : '<th>Sau</th>'}
      </tr></thead><tbody>` +
      d.thay_doi.map(t => {
        const tr = t.la_tien && t.truoc != null ? nkTien(t.truoc) : nkEsc(t.truoc);
        const sa = t.la_tien && t.sau   != null ? nkTien(t.sau)   : nkEsc(t.sau);
        return `<tr>
          <td data-label="Nội dung"><b>${nkEsc(t.nhan)}</b></td>
          <td data-label="Trước"><span class="${xoa ? '' : 'nk-cu'}">${tr || '—'}</span></td>
          ${xoa ? '' : `<td data-label="Sau"><span class="nk-moi">${sa || '—'}</span></td>`}
        </tr>`;
      }).join('') + '</tbody></table>';
  } else if (d.co_anh_chup) {
    html += '<div class="mt-3 text-sm text-gray-400">Không có trường nào thay đổi giá trị.</div>';
  }

  if (d.user_agent) html += `<div class="mt-3 text-[11px] text-gray-400 break-all">${nkEsc(d.user_agent)}</div>`;
  html += `<button onclick="nkMo('${nguon}', ${id})"
             class="mt-3 w-full py-2 rounded-xl border border-gray-200 bg-white text-xs font-bold text-gray-500">
             ▴ Đóng chi tiết</button>`;
  html += '</div>';
  hop.innerHTML = html;
}

// ── Theo dõi trực tiếp: 5s hỏi xem có dòng nào MỚI hơn mốc đang hiển thị ──
async function nkKiemTraMoi() {
  if (!document.getElementById('nk-live').checked) return;
  if (document.visibilityState !== 'visible' || _nkDangTai) return;
  const p = nkThamSo(false);
  p.set('gioi_han', '30');
  p.set('moi_hon_audit', _nkMocA);
  p.set('moi_hon_edit', _nkMocE);
  let d;
  try { d = await (await fetch('/api/nhat-ky?' + p.toString(), {cache:'no-store'})).json(); }
  catch (e) { return; }
  const moi = d.su_kien || [];
  _nkMocA = d.moc_audit; _nkMocE = d.moc_edit;
  if (!moi.length) return;
  document.getElementById('nk-ds').insertAdjacentHTML(
    'afterbegin', moi.map(s => nkDongHTML(s, true)).join(''));
  _nkBoQua += moi.length;
  document.getElementById('nk-rong').classList.add('hidden');
}

// Bộ lọc gấp gọn — mặc định đóng để danh sách hiện lên ngay, không phải cuộn dài
function nkBatLoc() {
  const h = document.getElementById('nk-loc-chi-tiet');
  const mo = h.classList.toggle('hidden');
  document.getElementById('nk-mui-ten').textContent = mo ? '▾' : '▴';
}

function nkDemLoc() {
  const n = _nkNhom.size + _nkHd.size
          + (document.getElementById('nk-nguoi').value ? 1 : 0)
          + (document.getElementById('nk-tu').value ? 1 : 0)
          + (document.getElementById('nk-den').value ? 1 : 0);
  document.getElementById('nk-so-loc').textContent = n ? '· đang bật ' + n : '';
  document.getElementById('nk-nut-loc').style.borderColor = n ? '#f0c674' : '#e5e7eb';
}

function nkXoaLoc() {
  _nkNhom.clear(); _nkHd.clear(); _nkHienDiemDanh = false;
  document.querySelectorAll('#nk-nhom .nk-chip, #nk-hd .nk-chip').forEach(b => b.classList.remove('on'));
  document.getElementById('nk-nguoi').value = '';
  document.getElementById('nk-tim').value = '';
  fpSet('nk-tu', ''); fpSet('nk-den', '');
  nkDemLoc(); nkTai(false);
}

function nkDoiDiemDanh() { _nkHienDiemDanh = !_nkHienDiemDanh; nkTai(false); }
function nkTaiThem() { if (!_nkHet) nkTai(true); }

document.querySelectorAll('#nk-nhom .nk-chip').forEach(b => b.onclick = () => {
  const k = b.dataset.nhom;
  if (_nkNhom.has(k)) { _nkNhom.delete(k); b.classList.remove('on'); }
  else { _nkNhom.add(k); b.classList.add('on'); }
  nkDemLoc(); nkTai(false);
});
document.querySelectorAll('#nk-hd .nk-chip').forEach(b => b.onclick = () => {
  const k = b.dataset.hd;
  if (_nkHd.has(k)) { _nkHd.delete(k); b.classList.remove('on'); }
  else { _nkHd.add(k); b.classList.add('on'); }
  nkDemLoc(); nkTai(false);
});
document.getElementById('nk-nguoi').onchange = () => { nkDemLoc(); nkTai(false); };
document.getElementById('nk-tu').onchange    = () => { nkDemLoc(); nkTai(false); };
document.getElementById('nk-den').onchange   = () => { nkDemLoc(); nkTai(false); };
let _nkGoTim = null;
document.getElementById('nk-tim').oninput = () => {
  clearTimeout(_nkGoTim); _nkGoTim = setTimeout(() => nkTai(false), 380);
};

nkTai(false);
_nkHen = setInterval(nkKiemTraMoi, 5000);
</script>
{% endblock %}