{% extends "base.html" %}
{% block title %}Detail Tamu — {{ tamu.nama_tamu }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">👤 {{ tamu.nama_tamu }}</h1>
    <p class="page-sub">Detail data tamu & transaksi</p>
  </div>
  <a href="{{ url_for('daftar_tamu') }}" class="btn btn--outline">← Kembali</a>
</div>

<div class="detail-layout">
  <!-- Identitas -->
  <div class="card">
    <h2 class="card__title">Identitas Tamu</h2>
    <div class="detail-grid">
      <div class="detail-item">
        <span class="detail-label">Nama Lengkap</span>
        <span class="detail-value">{{ tamu.nama_tamu }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">NIK / Paspor</span>
        <span class="detail-value"><code>{{ tamu.nik_paspor }}</code></span>
      </div>
      <div class="detail-item">
        <span class="detail-label">WhatsApp</span>
        <span class="detail-value">
          <a href="https://wa.me/{{ tamu.no_whatsapp | replace('+','') | replace('-','') | replace(' ','') }}"
             target="_blank" class="link-wa">📱 {{ tamu.no_whatsapp }}</a>
        </span>
      </div>
      <div class="detail-item">
        <span class="detail-label">Kewarganegaraan</span>
        <span class="detail-value">
          <span class="badge {% if tamu.kewarganegaraan == 'WNA' %}badge--orange{% else %}badge--green{% endif %}">
            {{ tamu.kewarganegaraan }}
          </span>
        </span>
      </div>
      <div class="detail-item">
        <span class="detail-label">Jumlah Tamu</span>
        <span class="detail-value">{{ tamu.jumlah_tamu }} orang</span>
      </div>
    </div>
  </div>

  <!-- Informasi Menginap -->
  <div class="card">
    <h2 class="card__title">Informasi Menginap</h2>
    <div class="detail-grid">
      <div class="detail-item">
        <span class="detail-label">Nomor Kamar</span>
        <span class="detail-value">
          <span class="badge badge--blue">{{ tamu.nomor_kamar or '—' }}</span>
          {{ tamu.tipe_kamar | capitalize if tamu.tipe_kamar }}
        </span>
      </div>
      <div class="detail-item">
        <span class="detail-label">Check-In</span>
        <span class="detail-value">{{ tamu.check_in.strftime('%d %B %Y') if tamu.check_in else '—' }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">Check-Out</span>
        <span class="detail-value">{{ tamu.check_out.strftime('%d %B %Y') if tamu.check_out else '—' }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">Durasi Menginap</span>
        <span class="detail-value">{{ tamu.durasi_malam or '—' }} malam</span>
      </div>
    </div>
  </div>

  <!-- Tagihan -->
  <div class="card card--highlight">
    <h2 class="card__title">💰 Tagihan</h2>
    <div class="tagihan-display">
      <div class="tagihan-row">
        <span>Tarif per malam</span>
        <span>Rp {{ "{:,.0f}".format(tamu.tarif_per_malam or 0).replace(',','.') }}</span>
      </div>
      <div class="tagihan-row">
        <span>Durasi</span>
        <span>× {{ tamu.durasi_malam or 0 }} malam</span>
      </div>
      <div class="tagihan-row tagihan-row--total">
        <span>TOTAL TAGIHAN</span>
        <span class="tagihan-total">
          Rp {{ "{:,.0f}".format(tamu.total_tagihan or 0).replace(',','.') }}
        </span>
      </div>
    </div>

    <div class="sync-status">
      {% if tamu.status_sinkronisasi == 'daring' %}
        <span class="badge badge--green">☁️ Tersinkronisasi ke Cloud</span>
      {% else %}
        <span class="badge badge--orange">💾 Tersimpan Lokal (Luring)</span>
      {% endif %}
    </div>
  </div>

  {% if tamu.keterangan %}
  <div class="card">
    <h2 class="card__title">Catatan</h2>
    <p class="keterangan-text">{{ tamu.keterangan }}</p>
  </div>
  {% endif %}
</div>
{% endblock %}