{% extends "base.html" %}
{% block title %}Paket Wisata{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🤿 Paket Wisata & Layanan</h1>
    <p class="page-sub">Daftar harga transportasi, sewa alat, dan trip snorkeling</p>
  </div>
</div>

<!-- Info Operasional -->
<div class="info-banner">
  <div class="info-banner__icon">💡</div>
  <div>
    <strong>Info Operasional:</strong>
    Listrik genset menyala <strong>18.00 – 05.00 WIT</strong> ·
    Tarif kamar <strong>Rp 600.000/orang/malam</strong> sudah include makan 3x ·
    Dispenser 24 jam gratis: kopi, teh, air minum ·
    Sinyal Telkomsel tersedia (tidak ada WiFi)
  </div>
</div>

<!-- Jadwal Makan -->
<div class="card" style="margin-bottom:20px">
  <h2 class="card__title">🍽️ Jadwal Makan Tamu (Sudah Include Harga Kamar)</h2>
  <div class="jadwal-makan">
    <div class="jadwal-item">
      <span class="jadwal-icon">🌅</span>
      <div>
        <div class="jadwal-nama">Breakfast (Sarapan)</div>
        <div class="jadwal-waktu">07:00 WIT</div>
      </div>
    </div>
    <div class="jadwal-item">
      <span class="jadwal-icon">☀️</span>
      <div>
        <div class="jadwal-nama">Lunch (Makan Siang)</div>
        <div class="jadwal-waktu">12:20 WIT</div>
      </div>
    </div>
    <div class="jadwal-item">
      <span class="jadwal-icon">🌙</span>
      <div>
        <div class="jadwal-nama">Dinner (Makan Malam)</div>
        <div class="jadwal-waktu">19:20 WIT</div>
      </div>
    </div>
  </div>
</div>

<div class="paket-layout">

  <!-- A. Transportasi Laut -->
  <div class="card">
    <h2 class="card__title">🚤 A. Transportasi Laut</h2>
    <p style="font-size:12px;color:#6B7280;margin-bottom:14px">Per boat, maksimal 4 orang</p>
    <div class="paket-list">
      {% for p in transportasi %}
      <div class="paket-item">
        <div>
          <div class="paket-nama">{{ p.nama_paket }}</div>
          {% if p.keterangan %}
          <div class="paket-ket">{{ p.keterangan }}</div>
          {% endif %}
        </div>
        <div style="display:flex;align-items:center;gap:10px">
          <div class="paket-harga">Rp {{ "{:,.0f}".format(p.harga).replace(',','.') }}</div>
          {% if session.role == 'owner' %}
          <a href="{{ url_for('edit_harga_paket', paket_id=p.id) }}" class="btn btn--sm btn--outline">✏️</a>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- B. Sewa Alat -->
  <div class="card">
    <h2 class="card__title">🥽 B. Sewa Alat Snorkeling</h2>
    <p style="font-size:12px;color:#6B7280;margin-bottom:14px">Per orang, per hari</p>
    <div class="paket-list">
      {% for p in sewa_alat %}
      <div class="paket-item">
        <div>
          <div class="paket-nama">{{ p.nama_paket }}</div>
          {% if p.keterangan %}
          <div class="paket-ket">{{ p.keterangan }}</div>
          {% endif %}
        </div>
        <div class="paket-harga">Rp {{ "{:,.0f}".format(p.harga).replace(',','.') }}</div>
      </div>
      {% endfor %}
    </div>
  </div>

</div>

<!-- C. Trip Snorkeling -->
<div class="card">
  <h2 class="card__title">🌊 C. Trip & Spot Snorkeling</h2>
  <p style="font-size:12px;color:#6B7280;margin-bottom:14px">Per boat, maksimal 4 orang</p>
  <div class="trip-grid">
    {% for p in trip_snorkeling %}
    <div class="trip-card">
      <div class="trip-no">Paket {{ loop.index }}</div>
      <div class="trip-nama">{{ p.nama_paket.split('—')[1].strip() if '—' in p.nama_paket else p.nama_paket }}</div>
      {% if p.keterangan %}
      <div class="trip-ket">{{ p.keterangan }}</div>
      {% endif %}
      <div class="trip-harga">Rp {{ "{:,.0f}".format(p.harga).replace(',','.') }}</div>
      <div class="trip-satuan">per boat · maks 4 orang</div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}