{% extends "base.html" %}
{% block title %}Laporan Finansial{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">📈 Laporan Finansial</h1>
    <p class="page-sub">Ringkasan pendapatan dan statistik kunjungan tamu</p>
  </div>
</div>

<!-- Kartu Ringkasan -->
<div class="stats-grid">
  <div class="stat-card stat-card--purple">
    <div class="stat-card__icon">💰</div>
    <div class="stat-card__value">Rp {{ "{:,.0f}".format(total_pendapatan).replace(',','.') }}</div>
    <div class="stat-card__label">Total Pendapatan</div>
  </div>
  <div class="stat-card stat-card--blue">
    <div class="stat-card__icon">👥</div>
    <div class="stat-card__value">{{ total_tamu }}</div>
    <div class="stat-card__label">Total Tamu</div>
  </div>
  <div class="stat-card stat-card--orange">
    <div class="stat-card__icon">⚠️</div>
    <div class="stat-card__value">{{ data_belum_sync }}</div>
    <div class="stat-card__label">Data Belum Sinkron</div>
  </div>
</div>

<!-- Grafik Pendapatan Bulanan -->
<div class="card">
  <h2 class="card__title">Pendapatan Bulanan (12 Bulan Terakhir)</h2>
  <canvas id="chartPendapatan" height="100"></canvas>
</div>

<!-- Top Kamar -->
{% if top_kamar %}
<div class="card">
  <h2 class="card__title">🏆 Kamar Terlaris</h2>
  <div class="table-wrapper">
    <table class="table">
      <thead>
        <tr>
          <th>Peringkat</th>
          <th>Nomor Kamar</th>
          <th>Tipe</th>
          <th>Jumlah Booking</th>
          <th>Total Pendapatan</th>
        </tr>
      </thead>
      <tbody>
        {% for k in top_kamar %}
        <tr>
          <td>
            {% if loop.index == 1 %}🥇
            {% elif loop.index == 2 %}🥈
            {% elif loop.index == 3 %}🥉
            {% else %}#{{ loop.index }}{% endif %}
          </td>
          <td><span class="badge badge--blue">{{ k.nomor_kamar }}</span></td>
          <td>{{ k.tipe_kamar | capitalize }}</td>
          <td>{{ k.jumlah_booking }}x</td>
          <td>Rp {{ "{:,.0f}".format(k.total_pendapatan or 0).replace(',','.') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<!-- Tabel Data Bulanan -->
{% if data_bulanan %}
<div class="card">
  <h2 class="card__title">Rincian Per Bulan</h2>
  <div class="table-wrapper">
    <table class="table">
      <thead>
        <tr>
          <th>Bulan</th>
          <th>Jumlah Transaksi</th>
          <th>Total Pendapatan</th>
        </tr>
      </thead>
      <tbody>
        {% for d in data_bulanan | reverse %}
        <tr>
          <td>{{ d.label }}</td>
          <td>{{ d.jumlah_transaksi }}x</td>
          <td>Rp {{ "{:,.0f}".format(d.total or 0).replace(',','.') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
  const labels = {{ data_bulanan | map(attribute='label') | list | tojson }};
  const values = {{ data_bulanan | map(attribute='total') | list | tojson }};

  new Chart(document.getElementById('chartPendapatan'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Pendapatan (Rp)',
        data: values,
        backgroundColor: 'rgba(20, 184, 166, 0.7)',
        borderColor:     'rgba(20, 184, 166, 1)',
        borderWidth: 2,
        borderRadius: 6,
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => 'Rp ' + ctx.raw.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            callback: v => 'Rp ' + (v/1000000).toFixed(0) + 'jt'
          }
        }
      }
    }
  });
</script>
{% endblock %}