script.js

/* =============================================
   Perpustakaan Nusantara — script.js
   ============================================= */
'use strict';

const STORAGE_KEY  = 'perpus_data';
const ABS_KEY      = 'perpus_absensi';
const SESSION_KEY  = 'perpus_admin';
const ABS_SESSION  = 'perpus_absen_today'; // {nama, tanggal, id} set after absen
const ADMIN_USER   = 'admin';
const ADMIN_PASS   = 'admin123';

const $        = id => document.getElementById(id);
const getData  = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
const saveData = d  => localStorage.setItem(STORAGE_KEY, JSON.stringify(d));
const getAbs   = () => JSON.parse(localStorage.getItem(ABS_KEY) || '[]');
const saveAbs  = d  => localStorage.setItem(ABS_KEY, JSON.stringify(d));
const isLoggedIn = () => sessionStorage.getItem(SESSION_KEY) === 'true';
const todayStr   = () => new Date().toISOString().slice(0, 10);
const nowPage    = () => location.pathname.split('/').pop() || 'absensi.html';

function genId()    { return Date.now().toString(36) + Math.random().toString(36).slice(2, 7); }
function fmtDate(d) { if (!d) return '—'; const [y,m,day] = d.split('-'); return `${day}/${m}/${y}`; }
function esc(s)     { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

/* Cek apakah user sudah absen hari ini (dari sessionStorage) */
function getAbsToday() {
  try {
    const s = JSON.parse(sessionStorage.getItem(ABS_SESSION) || 'null');
    if (s && s.tanggal === todayStr()) return s;
  } catch(e) {}
  return null;
}
function setAbsToday(nama, id) {
  sessionStorage.setItem(ABS_SESSION, JSON.stringify({ nama, id, tanggal: todayStr() }));
}

/* Kumpulkan semua nama unik dari absensi + peminjaman untuk autocomplete */
function getAllNames() {
  const names = new Set();
  getAbs().forEach(r => { if (r.nama) names.add(r.nama.trim()); });
  getData().forEach(r => { if (r.nama) names.add(r.nama.trim()); });
  return [...names].sort((a, b) => a.localeCompare(b, 'id'));
}

/* ── Autocomplete helper ── */
function initAutocomplete(inputId, listId, getNames) {
  const input = $(inputId), list = $(listId);
  if (!input || !list) return;

  function render(q) {
    const matches = getNames().filter(n => n.toLowerCase().startsWith(q.toLowerCase()) && n.toLowerCase() !== q.toLowerCase());
    list.innerHTML = '';
    if (!q || !matches.length) { list.classList.remove('open'); return; }
    matches.slice(0, 6).forEach(name => {
      const li = document.createElement('li');
      li.className = 'autocomplete-item';
      li.textContent = name;
      li.addEventListener('mousedown', e => {
        e.preventDefault();
        input.value = name;
        list.classList.remove('open');
        input.dispatchEvent(new Event('input'));
      });
      list.appendChild(li);
    });
    list.classList.add('open');
  }

  input.addEventListener('input',  () => render(input.value));
  input.addEventListener('focus',  () => render(input.value));
  input.addEventListener('blur',   () => setTimeout(() => list.classList.remove('open'), 150));
  input.addEventListener('keydown', e => {
    const items = list.querySelectorAll('.autocomplete-item');
    const active = list.querySelector('.autocomplete-item.ac-active');
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      const next = active ? (active.nextElementSibling || items[0]) : items[0];
      if (active) active.classList.remove('ac-active');
      if (next) next.classList.add('ac-active');
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      const prev = active ? (active.previousElementSibling || items[items.length-1]) : items[items.length-1];
      if (active) active.classList.remove('ac-active');
      if (prev) prev.classList.add('ac-active');
    } else if (e.key === 'Enter' && active) {
      e.preventDefault();
      input.value = active.textContent;
      list.classList.remove('open');
      input.dispatchEvent(new Event('input'));
    } else if (e.key === 'Escape') {
      list.classList.remove('open');
    }
  });
}

function showToast(id, msg, type = 'success') {
  const t = $(id); if (!t) return;
  if (id === 'dashToast') {
    $('dashToastMsg').textContent  = msg;
    $('dashToastIcon').textContent = type === 'success' ? '✓' : '✕';
  }
  t.className = 'toast' + (type === 'error' ? ' error' : '');
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 3200);
}

/* ══════════════════════════════════════════
   ABSENSI PAGE — absensi.html  (halaman utama publik)
══════════════════════════════════════════ */
function initAbsensiPage() {
  const form = $('absensiForm');
  if (!form) return;

  /* Live clock */
  function updateClock() {
    const now    = new Date();
    const days   = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
    const months = ['Januari','Februari','Maret','April','Mei','Juni','Juli',
                    'Agustus','September','Oktober','November','Desember'];
    const cl = $('liveClock'), cd = $('liveDate');
    if (cl) cl.textContent = now.toTimeString().slice(0,8);
    if (cd) cd.textContent = `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
  }
  updateClock();
  setInterval(updateClock, 1000);

  /* Default tanggal & jam */
  $('absTanggal').value  = todayStr();
  $('absJamMasuk').value = new Date().toTimeString().slice(0,5);

  renderRecentPanel();

  /* Autocomplete nama dari semua riwayat */
  initAutocomplete('absNama', 'absNamaList', getAllNames);

  /* Kalau sudah absen hari ini, pre-fill nama & beri info */
  const already = getAbsToday();
  if (already) {
    $('absNama').value = already.nama;
    const banner = document.createElement('div');
    banner.className = 'abs-info-banner';
    banner.innerHTML = `✓ Kamu sudah absen hari ini sebagai <strong>${esc(already.nama)}</strong>. Kamu bisa <a href="index.html">langsung ke peminjaman</a>.`;
    form.parentNode.insertBefore(banner, form);
  }

  form.addEventListener('submit', e => {
    e.preventDefault();
    if (!validateAbsensi()) return;

    const nama = $('absNama').value.trim();
    const record = {
      id:         genId(),
      nama,
      tujuan:     $('absTujuan').value,
      jamMasuk:   $('absJamMasuk').value,
      jamKeluar:  '',
      tanggal:    $('absTanggal').value,
      keterangan: $('absKeterangan').value.trim(),
      kategori:   'Umum',
      createdAt:  new Date().toISOString()
    };

    const abs = getAbs();
    abs.unshift(record);
    saveAbs(abs);

    /* Simpan ke session agar halaman peminjaman tahu */
    setAbsToday(nama, record.id);

    renderRecentPanel();

    /* Toast lalu redirect ke peminjaman setelah 1.5 detik */
    const t = $('absToast');
    t.classList.add('show');
    setTimeout(() => { location.href = 'index.html'; }, 1800);
  });

  /* Clear err on input */
  ['absNama','absTujuan','absJamMasuk','absTanggal'].forEach(id => {
    const el = $(id);
    if (el) el.addEventListener('input', () => clearAbsErr(id));
  });
}

function validateAbsensi() {
  let ok = true;
  [
    ['absNama',     'Nama wajib diisi'],
    ['absTujuan',   'Pilih tujuan kunjungan'],
    ['absJamMasuk', 'Jam masuk wajib diisi'],
    ['absTanggal',  'Tanggal wajib diisi']
  ].forEach(([id, msg]) => {
    const el = $(id);
    if (!el) return;
    if (!el.value.trim()) { showAbsErr(id, msg); ok = false; }
    else                  { clearAbsErr(id); }
  });
  return ok;
}
function showAbsErr(id, msg) {
  const el = $(id); if (el) el.classList.add('invalid');
  const e  = $('err-'+id); if (e) e.textContent = msg;
}
function clearAbsErr(id) {
  const el = $(id); if (el) el.classList.remove('invalid');
  const e  = $('err-'+id); if (e) e.textContent = '';
}

function renderRecentPanel() {
  const list = $('recentList'), cnt = $('recentCount');
  if (!list) return;
  const todayAbs = getAbs().filter(r => r.tanggal === todayStr());
  if (cnt) cnt.textContent = todayAbs.length + ' pengunjung';
  if (!todayAbs.length) {
    list.innerHTML = '<div class="recent-empty">Belum ada absensi hari ini.</div>';
    return;
  }
  list.innerHTML = todayAbs.map(r => `
    <div class="recent-item">
      <div class="recent-avatar">${esc(r.nama.charAt(0).toUpperCase())}</div>
      <div class="recent-info">
        <div class="recent-name">${esc(r.nama)}</div>
        <div class="recent-meta">${esc(r.tujuan)}</div>
      </div>
      <div class="recent-time">${esc(r.jamMasuk)}</div>
    </div>`).join('');
}

/* ══════════════════════════════════════════
   PEMINJAMAN PAGE — index.html
══════════════════════════════════════════ */
function initPublicPage() {
  const gate     = $('absGate');
  const formWrap = $('formWrap');
  if (!gate || !formWrap) return;

  const absToday = getAbsToday();

  if (!absToday) {
    /* Belum absen: tampilkan gate, sembunyikan form */
    gate.classList.remove('hidden');
    formWrap.classList.add('hidden');
    return;
  }

  /* Sudah absen: tampilkan form */
  gate.classList.add('hidden');
  formWrap.classList.remove('hidden');

  /* Banner info sudah absen */
  const banner = $('absInfoBanner');
  if (banner) {
    banner.innerHTML = `✓ Absen tercatat atas nama <strong>${esc(absToday.nama)}</strong> — ${fmtDate(absToday.tanggal)}`;
    banner.className = 'abs-info-banner visible';
  }

  /* Tanggal pinjam otomatis & readonly */
  const today = todayStr();
  const twoWeeks = new Date(Date.now() + 14*864e5).toISOString().slice(0,10);
  const tglPinjamEl = $('tglPinjam');
  if (tglPinjamEl) {
    tglPinjamEl.value = fmtDate(today); // tampilkan dd/mm/yyyy
    tglPinjamEl.dataset.rawDate = today; // simpan ISO untuk record
  }
  const tglKembaliEl = $('tglKembali');
  if (tglKembaliEl) tglKembaliEl.value = twoWeeks;

  /* Autocomplete nama dari semua riwayat — pre-fill nama dari absensi */
  initAutocomplete('nama', 'namaList', getAllNames);
  const namaEl = $('nama');
  if (namaEl) namaEl.value = absToday.nama;

  const form = $('borrowForm');
  if (!form) return;

  form.addEventListener('submit', e => {
    e.preventDefault();
    if (!validateBorrow()) return;

    const record = {
      id:        genId(),
      nama:      $('nama').value.trim(),
      kelas:     $('kelas').value.trim(),
      idBuku:    $('idBuku').value.trim(),
      kategori:  $('kategori').value,
      tglPinjam: $('tglPinjam').dataset.rawDate || today,
      tglKembali:$('tglKembali').value,
      catatan:   $('catatan').value.trim(),
      status:    'menunggu',
      absId:     absToday.id,
      createdAt: new Date().toISOString()
    };

    const data = getData();
    data.unshift(record);
    saveData(data);

    const t = $('toast');
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 3500);

    /* Reset form tapi pertahankan nama & tanggal otomatis */
    form.reset();
    if (namaEl) namaEl.value = absToday.nama;
    if (tglPinjamEl) { tglPinjamEl.value = fmtDate(today); tglPinjamEl.dataset.rawDate = today; }
    if (tglKembaliEl) tglKembaliEl.value = twoWeeks;
  });

  ['nama','kelas','idBuku','kategori','tglKembali'].forEach(id => {
    const el = $(id);
    if (el) el.addEventListener('input', () => clearErr(id));
  });
}

function validateBorrow() {
  let ok = true;
  [
    ['nama',       'Nama wajib diisi'],
    ['kelas',      'Kelas wajib diisi'],
    ['idBuku',     'ID Buku wajib diisi'],
    ['kategori',   'Pilih kategori buku'],
    ['tglKembali', 'Tanggal kembali wajib diisi']
  ].forEach(([id, msg]) => {
    const el = $(id);
    if (!el) return;
    if (!el.value.trim()) { showErr(id, msg); ok = false; }
    else                  { clearErr(id); }
  });
  /* Validasi tglKembali harus setelah hari ini */
  const raw = $('tglPinjam') ? ($('tglPinjam').dataset.rawDate || todayStr()) : todayStr();
  const k = ($('tglKembali')||{}).value || '';
  if (k && k <= raw) { showErr('tglKembali','Tanggal kembali harus setelah tanggal pinjam'); ok = false; }
  return ok;
}
function showErr(id, msg) {
  const el = $(id); if (el) el.classList.add('invalid');
  const e  = $('err-'+id); if (e) e.textContent = msg;
}
function clearErr(id) {
  const el = $(id); if (el) el.classList.remove('invalid');
  const e  = $('err-'+id); if (e) e.textContent = '';
}

/* ══════════════════════════════════════════
   LOGIN PAGE — login.html
══════════════════════════════════════════ */
function initLoginPage() {
  const btn = $('loginBtn');
  if (!btn) return;
  if (isLoggedIn()) { location.href = 'dashboard.html'; return; }

  const passToggle = $('passToggle'), passInput = $('loginPass');
  if (passToggle) {
    passToggle.addEventListener('click', () => {
      const show = passInput.type === 'password';
      passInput.type = show ? 'text' : 'password';
      passToggle.textContent = show ? '🙈' : '👁';
    });
  }

  function doLogin() {
    const user = $('loginUser').value.trim();
    const pass = $('loginPass').value;
    if (user === ADMIN_USER && pass === ADMIN_PASS) {
      sessionStorage.setItem(SESSION_KEY, 'true');
      btn.textContent = 'Masuk...';
      setTimeout(() => { location.href = 'dashboard.html'; }, 600);
    } else {
      $('loginError').classList.remove('hidden');
      $('loginPass').value = '';
      $('loginPass').focus();
    }
  }

  btn.addEventListener('click', doLogin);
  $('loginPass').addEventListener('keydown', e => { if (e.key === 'Enter') doLogin(); });
  $('loginUser').addEventListener('keydown', e => { if (e.key === 'Enter') $('loginPass').focus(); });
}

/* ══════════════════════════════════════════
   DASHBOARD — dashboard.html
══════════════════════════════════════════ */
let currentSection = 'peminjaman';
let currentFilter  = 'semua';
let absFilter      = 'absensi-hari-ini';
let deleteTargetId = null;
let absDeleteId    = null;

function initDashboard() {
  if (!$('dataTable')) return;
  if (!isLoggedIn()) { location.href = 'login.html'; return; }

  /* Logout — sidebar & header */
  function doLogout() {
    sessionStorage.removeItem(SESSION_KEY);
    location.href = 'login.html';
  }
  if ($('logoutBtn'))       $('logoutBtn').addEventListener('click', doLogout);
  if ($('logoutBtnHeader')) $('logoutBtnHeader').addEventListener('click', doLogout);

  /* Sidebar toggle mobile */
  const sidebar = document.querySelector('.sidebar');
  $('sidebarToggle').addEventListener('click', () => sidebar.classList.toggle('open'));
  document.addEventListener('click', e => {
    if (sidebar.classList.contains('open') &&
        !sidebar.contains(e.target) &&
        e.target !== $('sidebarToggle')) sidebar.classList.remove('open');
  });

  /* Nav items */
  document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
      item.classList.add('active');

      const page    = item.dataset.page    || 'peminjaman';
      const section = item.dataset.section || 'semua';
      currentSection = page;

      const titles = {
        'semua':            'Semua Data Peminjaman',
        'menunggu':         'Menunggu Konfirmasi',
        'dipinjam':         'Sedang Dipinjam',
        'dikembalikan':     'Sudah Dikembalikan',
        'absensi-hari-ini': 'Absensi Hari Ini',
        'absensi-semua':    'Semua Data Absensi'
      };
      $('sectionTitle').textContent = titles[section] || 'Data';

      if (page === 'peminjaman') {
        currentFilter = section;
        showPeminjamanSection();
        renderTable();
      } else {
        absFilter = section;
        showAbsensiSection();
        renderAbsTable();
      }
    });
  });

  /* Stat card clicks → filter peminjaman */
  document.querySelectorAll('.stat-card').forEach(card => {
    card.addEventListener('click', () => {
      const f = card.dataset.filter;
      currentFilter = f; currentSection = 'peminjaman';
      document.querySelectorAll('.nav-item').forEach(n => {
        n.classList.toggle('active', n.dataset.section === f && n.dataset.page === 'peminjaman');
      });
      showPeminjamanSection();
      renderTable();
    });
  });

  $('searchInput').addEventListener('input', () => {
    if (currentSection === 'peminjaman') renderTable();
    else renderAbsTable();
  });

  $('exportBtn').addEventListener('click', exportCSV);

  /* Peminjaman edit modal */
  $('modalClose').addEventListener('click',  closeEditModal);
  $('cancelEdit').addEventListener('click',  closeEditModal);
  $('saveEdit').addEventListener('click',    saveEdit);
  $('modalOverlay').addEventListener('click', e => { if (e.target === $('modalOverlay')) closeEditModal(); });

  /* Peminjaman delete modal */
  $('deleteClose').addEventListener('click',    closeDeleteModal);
  $('cancelDelete').addEventListener('click',   closeDeleteModal);
  $('deleteOverlay').addEventListener('click',  e => { if (e.target === $('deleteOverlay')) closeDeleteModal(); });
  $('confirmDelete').addEventListener('click',  confirmDelete);

  /* Absensi edit modal */
  $('absEditClose').addEventListener('click',   closeAbsEditModal);
  $('absEditCancel').addEventListener('click',  closeAbsEditModal);
  $('absEditSave').addEventListener('click',    saveAbsEdit);
  $('absEditOverlay').addEventListener('click', e => { if (e.target === $('absEditOverlay')) closeAbsEditModal(); });

  /* Absensi delete modal */
  $('absDeleteClose').addEventListener('click',   closeAbsDeleteModal);
  $('absDeleteCancel').addEventListener('click',  closeAbsDeleteModal);
  $('absDeleteOverlay').addEventListener('click', e => { if (e.target === $('absDeleteOverlay')) closeAbsDeleteModal(); });
  $('absDeleteConfirm').addEventListener('click', confirmAbsDelete);

  /* Absensi date filter */
  $('absFilterDate').addEventListener('change', () => {
    $('absFilterClear').style.display = $('absFilterDate').value ? '' : 'none';
    renderAbsTable();
  });
  $('absFilterClear').addEventListener('click', () => {
    $('absFilterDate').value = '';
    $('absFilterClear').style.display = 'none';
    renderAbsTable();
  });

  $('exportAbsBtn').addEventListener('click', exportAbsCSV);

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
      closeEditModal(); closeDeleteModal();
      closeAbsEditModal(); closeAbsDeleteModal();
    }
  });

  updateStats();
  renderTable();
}

function showPeminjamanSection() {
  document.querySelector('.stats-row').classList.remove('hidden');
  document.querySelector('.table-section:not(.abs-section)').classList.remove('hidden');
  const absEl = $('absensiSection');
  if (absEl) absEl.classList.remove('visible');
  $('searchInput').placeholder = 'Cari nama / ID buku...';
}

function showAbsensiSection() {
  document.querySelector('.stats-row').classList.add('hidden');
  document.querySelector('.table-section:not(.abs-section)').classList.add('hidden');
  const absEl = $('absensiSection');
  if (absEl) absEl.classList.add('visible');
  $('searchInput').placeholder = 'Cari nama pengunjung...';
}

/* ── Peminjaman table ── */
function renderTable() {
  const search = ($('searchInput')||{}).value || '';
  let data = getData();
  if (currentFilter !== 'semua') data = data.filter(r => r.status === currentFilter);
  if (search) {
    const q = search.toLowerCase();
    data = data.filter(r =>
      r.nama.toLowerCase().includes(q) ||
      (r.idBuku||'').toLowerCase().includes(q) ||
      r.kelas.toLowerCase().includes(q)
    );
  }

  updateStats();
  const tbody = $('tableBody'), empty = $('emptyState');
  $('tableCount').textContent = data.length + ' data';

  if (!data.length) { tbody.innerHTML = ''; empty.classList.add('visible'); return; }
  empty.classList.remove('visible');

  const sLabel = { menunggu:'⏳ Menunggu', dipinjam:'📖 Dipinjam', dikembalikan:'✅ Dikembalikan' };
  const sCls   = { menunggu:'badge-menunggu', dipinjam:'badge-dipinjam', dikembalikan:'badge-dikembalikan' };

  tbody.innerHTML = data.map((r,i) => `
    <tr>
      <td>${i+1}</td>
      <td>${esc(r.nama)}</td>
      <td>${esc(r.kelas)}</td>
      <td>${esc(r.idBuku||'—')}</td>
      <td>${esc(r.kategori)}</td>
      <td>${fmtDate(r.tglPinjam)}</td>
      <td>${fmtDate(r.tglKembali)}</td>
      <td><span class="badge ${sCls[r.status]||''}">${sLabel[r.status]||r.status}</span></td>
      <td>
        <button class="btn-edit" onclick="openEdit('${r.id}')">✏ Edit</button>
        <button class="btn-del"  onclick="openDelete('${r.id}','${esc(r.nama)}')">🗑 Hapus</button>
      </td>
    </tr>`).join('');
}

function updateStats() {
  const data = getData();
  $('statTotal').textContent        = data.length;
  $('statMenunggu').textContent     = data.filter(r => r.status === 'menunggu').length;
  $('statDipinjam').textContent     = data.filter(r => r.status === 'dipinjam').length;
  $('statDikembalikan').textContent = data.filter(r => r.status === 'dikembalikan').length;
}

function openEdit(id) {
  const r = getData().find(r => r.id === id); if (!r) return;
  $('editId').value         = id;
  $('editNama').value       = r.nama;
  $('editKelas').value      = r.kelas;
  $('editIdBuku').value     = r.idBuku || '';
  $('editKategori').value   = r.kategori;
  $('editTglPinjam').value  = r.tglPinjam;
  $('editTglKembali').value = r.tglKembali;
  $('editStatus').value     = r.status;
  $('editCatatan').value    = r.catatan || '';
  $('modalOverlay').classList.add('open');
}
function closeEditModal() { $('modalOverlay').classList.remove('open'); }
function saveEdit() {
  const id   = $('editId').value;
  const data = getData();
  const idx  = data.findIndex(r => r.id === id);
  if (idx === -1) return;
  data[idx] = {
    ...data[idx],
    nama:       $('editNama').value.trim(),
    kelas:      $('editKelas').value.trim(),
    idBuku:     $('editIdBuku').value.trim(),
    kategori:   $('editKategori').value,
    tglPinjam:  $('editTglPinjam').value,
    tglKembali: $('editTglKembali').value,
    status:     $('editStatus').value,
    catatan:    $('editCatatan').value.trim(),
    updatedAt:  new Date().toISOString()
  };
  saveData(data); closeEditModal(); renderTable();
  showToast('dashToast','Data peminjaman diperbarui!');
}

function openDelete(id, nama) { deleteTargetId = id; $('deleteNama').textContent = nama; $('deleteOverlay').classList.add('open'); }
function closeDeleteModal()   { deleteTargetId = null; $('deleteOverlay').classList.remove('open'); }
function confirmDelete()      { if (!deleteTargetId) return; saveData(getData().filter(r => r.id !== deleteTargetId)); closeDeleteModal(); renderTable(); showToast('dashToast','Data dihapus.','error'); }

/* ── Absensi table ── */
function renderAbsTable() {
  const search     = ($('searchInput')||{}).value || '';
  const dateFilter = ($('absFilterDate')||{}).value || '';
  let abs = getAbs();

  if (absFilter === 'absensi-hari-ini' && !dateFilter) abs = abs.filter(r => r.tanggal === todayStr());
  if (dateFilter) abs = abs.filter(r => r.tanggal === dateFilter);
  if (search) {
    const q = search.toLowerCase();
    abs = abs.filter(r => r.nama.toLowerCase().includes(q) || r.tujuan.toLowerCase().includes(q));
  }

  const todayAll = getAbs().filter(r => r.tanggal === todayStr());
  $('absTotalHariIni').textContent = todayAll.length;
  $('absTotalAll').textContent     = getAbs().length;
  $('absTotalSiswa').textContent   = todayAll.filter(r => r.kategori === 'Siswa').length;
  $('absTotalGuru').textContent    = todayAll.filter(r => r.kategori === 'Guru' || r.kategori === 'Staff').length;

  $('absTableCount').textContent = abs.length + ' data';
  const tbody = $('absTableBody'), empty = $('absEmptyState');

  if (!abs.length) { tbody.innerHTML = ''; empty.classList.add('visible'); return; }
  empty.classList.remove('visible');

  tbody.innerHTML = abs.map((r,i) => `
    <tr>
      <td>${i+1}</td>
      <td><strong>${esc(r.nama)}</strong></td>
      <td>${esc(r.tujuan)}</td>
      <td>${fmtDate(r.tanggal)}</td>
      <td>${esc(r.jamMasuk||'—')}</td>
      <td>${r.jamKeluar ? esc(r.jamKeluar) : `<button class="btn-keluar" onclick="setJamKeluar('${r.id}')">⏱ Catat Keluar</button>`}</td>
      <td>
        <button class="btn-edit" onclick="openAbsEdit('${r.id}')">✏ Edit</button>
        <button class="btn-del"  onclick="openAbsDelete('${r.id}','${esc(r.nama)}')">🗑 Hapus</button>
      </td>
    </tr>`).join('');
}

function setJamKeluar(id) {
  const abs = getAbs(), idx = abs.findIndex(r => r.id === id); if (idx === -1) return;
  abs[idx].jamKeluar = new Date().toTimeString().slice(0,5);
  saveAbs(abs); renderAbsTable(); showToast('dashToast','Jam keluar dicatat!');
}

function openAbsEdit(id) {
  const r = getAbs().find(r => r.id === id); if (!r) return;
  $('absEditId').value        = id;
  $('absEditNama').value      = r.nama;
  $('absEditNis').value       = r.nis || '';
  $('absEditKelas').value     = r.kelas || '';
  $('absEditKategori').value  = r.kategori || 'Umum';
  $('absEditTujuan').value    = r.tujuan;
  $('absEditTgl').value       = r.tanggal;
  $('absEditJamMasuk').value  = r.jamMasuk || '';
  $('absEditJamKeluar').value = r.jamKeluar || '';
  $('absEditCatatan').value   = r.keterangan || '';
  $('absEditOverlay').classList.add('open');
}
function closeAbsEditModal() { $('absEditOverlay').classList.remove('open'); }
function saveAbsEdit() {
  const id  = $('absEditId').value;
  const abs = getAbs();
  const idx = abs.findIndex(r => r.id === id);
  if (idx === -1) return;
  abs[idx] = {
    ...abs[idx],
    nama:       $('absEditNama').value.trim(),
    nis:        $('absEditNis').value.trim(),
    kelas:      $('absEditKelas').value.trim(),
    kategori:   $('absEditKategori').value,
    tujuan:     $('absEditTujuan').value,
    tanggal:    $('absEditTgl').value,
    jamMasuk:   $('absEditJamMasuk').value,
    jamKeluar:  $('absEditJamKeluar').value,
    keterangan: $('absEditCatatan').value.trim()
  };
  saveAbs(abs); closeAbsEditModal(); renderAbsTable();
  showToast('dashToast','Data absensi diperbarui!');
}

function openAbsDelete(id, nama) { absDeleteId = id; $('absDeleteNama').textContent = nama; $('absDeleteOverlay').classList.add('open'); }
function closeAbsDeleteModal()   { absDeleteId = null; $('absDeleteOverlay').classList.remove('open'); }
function confirmAbsDelete()      { if (!absDeleteId) return; saveAbs(getAbs().filter(r => r.id !== absDeleteId)); closeAbsDeleteModal(); renderAbsTable(); showToast('dashToast','Data absensi dihapus.','error'); }

/* ── CSV Export ── */
function exportCSV() {
  const data = getData();
  if (!data.length) { showToast('dashToast','Tidak ada data.','error'); return; }
  const h    = ['No','Nama','Kelas','ID Buku','Kategori','Tgl Pinjam','Tgl Kembali','Status','Catatan'];
  const rows = data.map((r,i) =>
    [i+1, r.nama, r.kelas, r.idBuku||'', r.kategori, r.tglPinjam, r.tglKembali, r.status, r.catatan||'']
    .map(v => `"${String(v).replace(/"/g,'""')}"`).join(',')
  );
  dlCSV([h.join(','),...rows].join('\n'), 'peminjaman');
}
function exportAbsCSV() {
  const abs = getAbs();
  if (!abs.length) { showToast('dashToast','Tidak ada data.','error'); return; }
  const h    = ['No','Nama','Tujuan','Tanggal','Jam Masuk','Jam Keluar','Keterangan'];
  const rows = abs.map((r,i) =>
    [i+1, r.nama, r.tujuan, r.tanggal, r.jamMasuk||'', r.jamKeluar||'', r.keterangan||'']
    .map(v => `"${String(v).replace(/"/g,'""')}"`).join(',')
  );
  dlCSV([h.join(','),...rows].join('\n'), 'absensi');
}
function dlCSV(csv, name) {
  const blob = new Blob([csv], { type:'text/csv;charset=utf-8;' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `data_${name}_${todayStr()}.csv`;
  a.click();
}

/* ── Router ── */
window.addEventListener('DOMContentLoaded', () => {
  const page = nowPage();
  if      (page === 'absensi.html' || page === '' || page === '/') initAbsensiPage();
  else if (page === 'index.html')       initPublicPage();
  else if (page === 'login.html')       initLoginPage();
  else if (page === 'dashboard.html')   initDashboard();

  window.openEdit      = openEdit;
  window.openDelete    = openDelete;
  window.openAbsEdit   = openAbsEdit;
  window.openAbsDelete = openAbsDelete;
  window.setJamKeluar  = setJamKeluar;
});