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

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">📝 Daftarkan Tamu Baru</h1>
    <p class="page-sub">Isi identitas tamu yang baru tiba</p>
  </div>
  <a href="{{ url_for('daftar_tamu') }}" class="btn btn--outline">← Kembali</a>
</div>

<div class="form-layout">
  <!-- ── Form Utama ──────────────────────────── -->
  <div class="card">
    <h2 class="card__title">Identitas Tamu</h2>
    <form method="POST" action="{{ url_for('tambah_tamu') }}" id="form-tamu">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <!-- Nama Lengkap -->
      <div class="form-group">
        <label for="nama_tamu">Nama Lengkap <span class="required">*</span></label>
        <input type="text" id="nama_tamu" name="nama_tamu"
               class="form-control" placeholder="Nama sesuai KTP/Paspor" required>
      </div>

      <!-- NIK / Paspor + Kewarganegaraan -->
      <div class="form-row">
        <div class="form-group">
          <label for="kewarganegaraan">Kewarganegaraan <span class="required">*</span></label>
          <select id="kewarganegaraan" name="kewarganegaraan" class="form-control" onchange="updateNikLabel()">
            <option value="WNI">WNI (Warga Negara Indonesia)</option>
            <option value="WNA">WNA (Warga Negara Asing)</option>
          </select>
        </div>
        <div class="form-group">
          <label for="nik_paspor" id="nik-label">NIK KTP <span class="required">*</span></label>
          <input type="text" id="nik_paspor" name="nik_paspor"
                 class="form-control" placeholder="16 digit NIK" maxlength="20" required>
        </div>
      </div>

      <!-- Nomor WhatsApp -->
      <div class="form-group">
        <label for="no_whatsapp">Nomor WhatsApp <span class="required">*</span></label>
        <input type="tel" id="no_whatsapp" name="no_whatsapp"
               class="form-control" placeholder="+628xxxxxxxxxx" required>
      </div>

      <!-- Jumlah Tamu -->
      <div class="form-group">
        <label for="jumlah_tamu">Jumlah Tamu</label>
        <input type="number" id="jumlah_tamu" name="jumlah_tamu"
               class="form-control" value="1" min="1" max="10">
      </div>

      <hr class="form-divider">

      <!-- Pilih Kamar -->
      <h2 class="card__title">Informasi Menginap</h2>

      <div class="form-group">
        <label for="kamar_id">Pilih Kamar <span class="required">*</span></label>
        <select id="kamar_id" name="kamar_id" class="form-control" onchange="hitungOtomatis()" required>
          <option value="">-- Pilih Kamar Tersedia --</option>
          {% for k in kamar_list %}
          <option value="{{ k.id }}" data-tarif="{{ k.tarif_per_malam }}">
            Kamar {{ k.nomor_kamar }} ({{ k.tipe_kamar | capitalize }})
            — Rp {{ "{:,.0f}".format(k.tarif_per_malam).replace(',','.') }}/malam
          </option>
          {% endfor %}
        </select>
        {% if not kamar_list %}
        <p class="form-hint form-hint--warning">⚠️ Tidak ada kamar yang tersedia saat ini.</p>
        {% endif %}
      </div>

      <!-- Tanggal -->
      <div class="form-row">
        <div class="form-group">
          <label for="check_in">Tanggal Check-In <span class="required">*</span></label>
          <input type="date" id="check_in" name="check_in"
                 class="form-control" onchange="hitungOtomatis()" required>
        </div>
        <div class="form-group">
          <label for="check_out">Tanggal Check-Out <span class="required">*</span></label>
          <input type="date" id="check_out" name="check_out"
                 class="form-control" onchange="hitungOtomatis()" required>
        </div>
      </div>

      <!-- Keterangan -->
      <div class="form-group">
        <label for="keterangan">Keterangan (Opsional)</label>
        <textarea id="keterangan" name="keterangan" class="form-control"
                  rows="2" placeholder="Catatan tambahan..."></textarea>
      </div>

      <div class="form-actions">
        <a href="{{ url_for('daftar_tamu') }}" class="btn btn--outline">Batal</a>
        <button type="submit" class="btn btn--primary" {% if not kamar_list %}disabled{% endif %}>
          💾 Simpan & Daftarkan Tamu
        </button>
      </div>
    </form>
  </div>

  <!-- ── Preview Tagihan ─────────────────────── -->
  <div class="calc-panel" id="calc-panel">
    <h2 class="card__title">🧮 Kalkulator Tagihan</h2>
    <div class="calc-panel__body">
      <div class="calc-row">
        <span>Kamar</span>
        <span id="c-kamar">—</span>
      </div>
      <div class="calc-row">
        <span>Tarif / Malam</span>
        <span id="c-tarif">—</span>
      </div>
      <div class="calc-row">
        <span>Check-In</span>
        <span id="c-checkin">—</span>
      </div>
      <div class="calc-row">
        <span>Check-Out</span>
        <span id="c-checkout">—</span>
      </div>
      <div class="calc-row">
        <span>Durasi</span>
        <span id="c-durasi">—</span>
      </div>
      <div class="calc-row calc-row--total">
        <span>TOTAL</span>
        <span id="c-total">—</span>
      </div>
    </div>
    <div id="calc-msg" class="calc-msg"></div>
    <div class="calc-badge">
      <span id="sync-badge" class="badge badge--orange">⚠️ Akan disimpan Luring</span>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Set tanggal check-in minimum = hari ini
  const today = new Date().toISOString().split('T')[0];
  document.getElementById('check_in').min  = today;
  document.getElementById('check_out').min = today;

  function updateNikLabel() {
    const wn  = document.getElementById('kewarganegaraan').value;
    const lbl = document.getElementById('nik-label');
    const inp = document.getElementById('nik_paspor');
    if (wn === 'WNA') {
      lbl.innerHTML = 'Nomor Paspor <span class="required">*</span>';
      inp.placeholder = 'Nomor Paspor';
      inp.maxLength = 20;
    } else {
      lbl.innerHTML = 'NIK KTP <span class="required">*</span>';
      inp.placeholder = '16 digit NIK';
      inp.maxLength = 16;
    }
  }

  function hitungOtomatis() {
    const kamarSel  = document.getElementById('kamar_id');
    const checkIn   = document.getElementById('check_in').value;
    const checkOut  = document.getElementById('check_out').value;
    const kamarId   = kamarSel.value;

    if (!kamarId || !checkIn || !checkOut) return;

    const opt   = kamarSel.options[kamarSel.selectedIndex];
    const tarif = parseInt(opt.dataset.tarif);
    const namaK = opt.text.split('—')[0].trim();

    const ci = new Date(checkIn);
    const co = new Date(checkOut);
    const dur = Math.round((co - ci) / (1000*60*60*24));

    const msg = document.getElementById('calc-msg');
    if (dur <= 0) {
      msg.textContent = '⚠️ Check-out harus setelah check-in';
      msg.className   = 'calc-msg calc-msg--error';
      return;
    }
    msg.textContent = '';

    const total = dur * tarif;
    const fmtRp = n => 'Rp ' + n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');

    document.getElementById('c-kamar').textContent   = namaK;
    document.getElementById('c-tarif').textContent   = fmtRp(tarif);
    document.getElementById('c-checkin').textContent = checkIn;
    document.getElementById('c-checkout').textContent= checkOut;
    document.getElementById('c-durasi').textContent  = dur + ' malam';
    document.getElementById('c-total').textContent   = fmtRp(total);
  }
</script>
{% endblock %}