{% extends "base.html" %}
{% block title %}Manajemen Kamar{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🚪 Manajemen Kamar</h1>
    <p class="page-sub">Status ketersediaan kamar secara real-time</p>
  </div>
  <div class="filter-group">
    <button class="btn-filter active" data-filter="all">Semua</button>
    <button class="btn-filter" data-filter="kosong">Kosong</button>
    <button class="btn-filter" data-filter="terisi">Terisi</button>
    <button class="btn-filter" data-filter="perbaikan">Perbaikan</button>
  </div>
</div>

<!-- Grid Kartu Kamar -->
<div class="kamar-grid" id="kamar-grid">
  {% for k in kamar_list %}
  <div class="kamar-card kamar-card--{{ k.status }}" data-status="{{ k.status }}">

    <!-- Header Kamar -->
    <div class="kamar-card__header">
      <div class="kamar-nomor">{{ k.nomor_kamar }}</div>
      <span class="status-badge status-badge--{{ k.status }}">
        {% if k.status == 'kosong' %}✅ Kosong
        {% elif k.status == 'terisi' %}🔴 Terisi
        {% else %}🔧 Perbaikan{% endif %}
      </span>
    </div>

    <!-- Info Kamar -->
    <div class="kamar-card__body">
      <div class="kamar-tipe">{{ k.tipe_kamar | capitalize }}</div>
      <div class="kamar-tarif">
        Rp {{ "{:,.0f}".format(k.tarif_per_malam).replace(',','.') }}<small>/malam</small>
      </div>
      <div class="kamar-kapasitas">👥 Maks. {{ k.kapasitas }} tamu</div>
      {% if k.fasilitas %}
      <div class="kamar-fasilitas">{{ k.fasilitas }}</div>
      {% endif %}

      {% if k.status == 'terisi' and k.nama_tamu %}
      <div class="kamar-tamu-info">
        <div class="kamar-tamu-nama">👤 {{ k.nama_tamu }}</div>
        <div class="kamar-tamu-dates">
          📅 {{ k.check_in.strftime('%d/%m') if k.check_in else '' }}
          → {{ k.check_out.strftime('%d/%m/%Y') if k.check_out else '' }}
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Ubah Status & Edit Harga -->
    <div class="kamar-card__footer">
      <form method="POST" action="{{ url_for('ubah_status_kamar', kamar_id=k.id) }}"
            class="status-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <select name="status" class="form-control form-control--sm">
          <option value="kosong"    {% if k.status == 'kosong'    %}selected{% endif %}>✅ Kosong</option>
          <option value="terisi"    {% if k.status == 'terisi'    %}selected{% endif %}>🔴 Terisi</option>
          <option value="perbaikan" {% if k.status == 'perbaikan' %}selected{% endif %}>🔧 Perbaikan</option>
        </select>
        <button type="submit" class="btn btn--sm btn--outline">Ubah</button>
      </form>
      {% if session.role == 'owner' %}
      <a href="{{ url_for('edit_harga_kamar', kamar_id=k.id) }}"
         class="btn btn--sm btn--outline" style="margin-top:6px;display:block;text-align:center">
        ✏️ Edit Harga
      </a>
      {% endif %}
    </div>

  </div>
  {% endfor %}
</div>

{% if not kamar_list %}
<div class="empty-state">
  <div class="empty-state__icon">🏠</div>
  <div class="empty-state__title">Belum ada data kamar</div>
  <div class="empty-state__desc">Tambahkan data kamar melalui database</div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  // Filter kartu kamar
  document.querySelectorAll('.btn-filter').forEach(btn => {
    btn.addEventListener('click', function() {
      document.querySelectorAll('.btn-filter').forEach(b => b.classList.remove('active'));
      this.classList.add('active');
      const filter = this.dataset.filter;
      document.querySelectorAll('.kamar-card').forEach(card => {
        card.style.display =
          (filter === 'all' || card.dataset.status === filter) ? '' : 'none';
      });
    });
  });
</script>
{% endblock %}