{% extends "base.html" %}
{% block title %}Sinkronisasi Data{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🔄 Sinkronisasi Data</h1>
    <p class="page-sub">Kelola status data Luring (offline) → Daring (cloud)</p>
  </div>
  {% set luring_count = transaksi_list | selectattr('status_sinkronisasi','eq','luring') | list | length %}
  {% if luring_count > 0 %}
  <form method="POST" action="{{ url_for('sinkronisasi_batch') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <button type="submit" class="btn btn--primary"
            onclick="return confirm('Sinkronkan semua {{ luring_count }} data ke cloud?')">
      ☁️ Sinkronkan Semua ({{ luring_count }})
    </button>
  </form>
  {% endif %}
</div>

<!-- Penjelasan Fitur -->
<div class="info-banner">
  <div class="info-banner__icon">🌊</div>
  <div>
    <strong>Offline-First untuk Raja Ampat</strong> — Data selalu tersimpan lokal
    terlebih dahulu (<em>Luring</em>). Ketika koneksi internet tersedia,
    tandai data sebagai <em>Daring</em> untuk mensinkronkan ke cloud.
  </div>
</div>

<!-- Tabel Status Sinkronisasi -->
<div class="card">
  <div class="table-wrapper">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Tamu</th>
          <th>Kamar</th>
          <th>Total Tagihan</th>
          <th>Dibuat</th>
          <th>Status</th>
          <th>Sync At</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        {% for tr in transaksi_list %}
        <tr class="{% if tr.status_sinkronisasi == 'luring' %}row--warning{% endif %}">
          <td>{{ loop.index }}</td>
          <td class="td-bold">{{ tr.nama_tamu }}</td>
          <td><span class="badge badge--blue">{{ tr.nomor_kamar }}</span></td>
          <td>Rp {{ "{:,.0f}".format(tr.total_tagihan).replace(',','.') }}</td>
          <td>{{ tr.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
          <td>
            {% if tr.status_sinkronisasi == 'daring' %}
              <span class="badge badge--green">☁️ Daring</span>
            {% else %}
              <span class="badge badge--orange">💾 Luring</span>
            {% endif %}
          </td>
          <td>
            {{ tr.synced_at.strftime('%d/%m %H:%M') if tr.synced_at else '—' }}
          </td>
          <td>
            {% if tr.status_sinkronisasi == 'luring' %}
            <form method="POST" action="{{ url_for('tandai_daring', transaksi_id=tr.id) }}"
                  style="display:inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn--sm btn--primary">Tandai Daring</button>
            </form>
            {% else %}
              <span class="text-muted">✓ Selesai</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="8" class="text-center text-muted">Belum ada transaksi</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}