{% extends "base.html" %}
{% block title %}Buku Tamu{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">📋 Buku Tamu Digital</h1>
    <p class="page-sub">Logbook identitas dan riwayat tamu</p>
  </div>
  <a href="{{ url_for('tambah_tamu') }}" class="btn btn--primary">+ Tambah Tamu</a>
</div>

<div class="card">
  <div class="card__search">
    <input type="text" id="searchInput" class="form-control"
           placeholder="🔍 Cari nama tamu, NIK/paspor, atau nomor kamar...">
  </div>

  {% if daftar %}
  <div class="table-wrapper">
    <table class="table" id="tamu-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Nama Tamu</th>
          <th>NIK / Paspor</th>
          <th>WhatsApp</th>
          <th>Kamar</th>
          <th>Check-In</th>
          <th>Check-Out</th>
          <th>WN</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        {% for t in daftar %}
        <tr>
          <td>{{ loop.index }}</td>
          <td class="td-bold">{{ t.nama_tamu }}</td>
          <td><code>{{ t.nik_paspor }}</code></td>
          <td>
            <a href="https://wa.me/{{ t.no_whatsapp | replace('+','') | replace('-','') | replace(' ','') }}"
               target="_blank" class="link-wa">📱 {{ t.no_whatsapp }}</a>
          </td>
          <td>
            {% if t.nomor_kamar %}
              <span class="badge badge--blue">{{ t.nomor_kamar }}</span>
              <small>{{ t.tipe_kamar }}</small>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td>{{ t.check_in.strftime('%d/%m/%Y') if t.check_in else '—' }}</td>
          <td>{{ t.check_out.strftime('%d/%m/%Y') if t.check_out else '—' }}</td>
          <td>
            <span class="badge {% if t.kewarganegaraan == 'WNA' %}badge--orange{% else %}badge--green{% endif %}">
              {{ t.kewarganegaraan }}
            </span>
          </td>
          <td>
            <a href="{{ url_for('detail_tamu', tamu_id=t.id) }}" class="btn btn--sm btn--outline">
              Detail
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-state__icon">📋</div>
    <div class="empty-state__title">Belum ada tamu terdaftar</div>
    <div class="empty-state__desc">Tambahkan tamu baru untuk memulai logbook</div>
    <a href="{{ url_for('tambah_tamu') }}" class="btn btn--primary">+ Tambah Tamu Pertama</a>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Pencarian tabel real-time
  document.getElementById('searchInput').addEventListener('input', function() {
    const q   = this.value.toLowerCase();
    const rows = document.querySelectorAll('#tamu-table tbody tr');
    rows.forEach(r => {
      r.style.display = r.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  });
</script>
{% endblock %}