{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Dashboard</h1>
    <p class="page-sub">Selamat datang, {{ session.nama }} 👋</p>
  </div>
  <div class="page-actions">
    <a href="{{ url_for('tambah_tamu') }}" class="btn btn--primary">+ Tamu Baru</a>
  </div>
</div>

<!-- ── Kartu Statistik Cepat ─────────────────────────── -->
<div class="stats-grid">
  <div class="stat-card stat-card--blue">
    <div class="stat-card__icon">🚪</div>
    <div class="stat-card__value">{{ kamar_summary.get('kosong', 0) }}</div>
    <div class="stat-card__label">Kamar Kosong</div>
  </div>
  <div class="stat-card stat-card--green">
    <div class="stat-card__icon">✅</div>
    <div class="stat-card__value">{{ kamar_summary.get('terisi', 0) }}</div>
    <div class="stat-card__label">Kamar Terisi</div>
  </div>
  <div class="stat-card stat-card--orange">
    <div class="stat-card__icon">🔧</div>
    <div class="stat-card__value">{{ kamar_summary.get('perbaikan', 0) }}</div>
    <div class="stat-card__label">Kamar Perbaikan</div>
  </div>
  <div class="stat-card stat-card--teal">
    <div class="stat-card__icon">👤</div>
    <div class="stat-card__value">{{ tamu_hari_ini }}</div>
    <div class="stat-card__label">Tamu Hari Ini</div>
  </div>
  {% if session.role == 'owner' %}
  <div class="stat-card stat-card--purple">
    <div class="stat-card__icon">💰</div>
    <div class="stat-card__value">Rp {{ "{:,.0f}".format(pendapatan_bulan).replace(',','.') }}</div>
    <div class="stat-card__label">Pendapatan Bulan Ini</div>
  </div>
  <div class="stat-card {% if data_pending > 0 %}stat-card--red{% else %}stat-card--green{% endif %}">
    <div class="stat-card__icon">{{ '⚠️' if data_pending > 0 else '☁️' }}</div>
    <div class="stat-card__value">{{ data_pending }}</div>
    <div class="stat-card__label">Data Belum Sinkron</div>
  </div>
  {% endif %}
</div>

<!-- ── Navigasi Cepat ────────────────────────────────── -->
<div class="quick-nav">
  <h2 class="section-title">Akses Cepat</h2>
  <div class="quick-nav__grid">
    <a href="{{ url_for('tambah_tamu') }}" class="quick-card">
      <div class="quick-card__icon">📝</div>
      <div class="quick-card__label">Daftarkan Tamu</div>
      <div class="quick-card__desc">Isi formulir buku tamu digital</div>
    </a>
    <a href="{{ url_for('daftar_kamar') }}" class="quick-card">
      <div class="quick-card__icon">🏠</div>
      <div class="quick-card__label">Status Kamar</div>
      <div class="quick-card__desc">Pantau ketersediaan kamar</div>
    </a>
    <a href="{{ url_for('daftar_tamu') }}" class="quick-card">
      <div class="quick-card__icon">📋</div>
      <div class="quick-card__label">Daftar Tamu</div>
      <div class="quick-card__desc">Lihat semua riwayat tamu</div>
    </a>
    {% if session.role == 'owner' %}
    <a href="{{ url_for('laporan') }}" class="quick-card">
      <div class="quick-card__icon">📈</div>
      <div class="quick-card__label">Laporan Finansial</div>
      <div class="quick-card__desc">Grafik pendapatan bulanan</div>
    </a>
    <a href="{{ url_for('halaman_sinkronisasi') }}" class="quick-card">
      <div class="quick-card__icon">🔄</div>
      <div class="quick-card__label">Sinkronisasi Data</div>
      <div class="quick-card__desc">Upload data ke cloud</div>
    </a>
    {% endif %}
  </div>
</div>

<!-- ── Indikator Koneksi ─────────────────────────────── -->
<div class="connection-bar">
  <div id="conn-indicator" class="conn-dot"></div>
  <span id="conn-label">Memeriksa koneksi...</span>
  {% if data_pending > 0 %}
  <span class="conn-warning">⚠️ {{ data_pending }} data belum tersinkronisasi ke cloud</span>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Cek koneksi sederhana
  function cekKoneksi() {
    const dot   = document.getElementById('conn-indicator');
    const label = document.getElementById('conn-label');
    if (navigator.onLine) {
      dot.classList.add('conn-dot--online');
      dot.classList.remove('conn-dot--offline');
      label.textContent = 'Online — Data tersinkronisasi';
    } else {
      dot.classList.add('conn-dot--offline');
      dot.classList.remove('conn-dot--online');
      label.textContent = 'Offline — Data tersimpan lokal';
    }
  }
  cekKoneksi();
  window.addEventListener('online',  cekKoneksi);
  window.addEventListener('offline', cekKoneksi);
</script>
{% endblock %}