{% extends "base.html" %}
{% block title %}Pesan Paket Wisata — {{ tamu.nama_tamu }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🤿 Tambah Paket Wisata</h1>
    <p class="page-sub">Tamu: <strong>{{ tamu.nama_tamu }}</strong></p>
  </div>
  <a href="{{ url_for('detail_tamu', tamu_id=tamu.id) }}" class="btn btn--outline">← Kembali</a>
</div>

<form method="POST">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="paket-layout">

    {% set categories = [
      ('transportasi',    '🚤 Transportasi Laut',      'Per boat, maks 4 orang'),
      ('sewa_alat',       '🥽 Sewa Alat Snorkeling',   'Per orang, per hari'),
      ('trip_snorkeling', '🌊 Trip Snorkeling',         'Per boat, maks 4 orang'),
    ] %}

    {% for kat, judul, sub in categories %}
    <div class="card">
      <h2 class="card__title">{{ judul }}</h2>
      <p style="font-size:12px;color:#6B7280;margin-bottom:14px">{{ sub }}</p>
      {% for p in paket_list if p.kategori == kat %}
      <div class="paket-order-item">
        <div class="paket-order-info">
          <div class="paket-nama">{{ p.nama_paket }}</div>
          <div class="paket-harga-sm">Rp {{ "{:,.0f}".format(p.harga).replace(',','.') }} / {{ p.satuan }}</div>
        </div>
        <div class="paket-order-qty">
          <input type="hidden" name="paket_id" value="{{ p.id }}">
          <input type="number" name="jumlah" value="0" min="0" max="30"
                 class="form-control form-control--sm qty-input"
                 style="width:70px"
                 onchange="hitungTotal(this, {{ p.harga }})">
          <span class="qty-subtotal" id="sub-{{ p.id }}">Rp 0</span>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endfor %}

  </div>

  <!-- Total -->
  <div class="card card--highlight">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <div style="font-weight:700;font-size:16px">Total Biaya Paket Wisata</div>
        <div style="font-size:12px;color:#6B7280">Hanya item dengan jumlah > 0 yang akan disimpan</div>
      </div>
      <div id="grand-total" style="font-size:22px;font-weight:800;color:#0D9488">Rp 0</div>
    </div>
    <div class="form-actions" style="margin-top:16px">
      <a href="{{ url_for('detail_tamu', tamu_id=tamu.id) }}" class="btn btn--outline">Batal</a>
      <button type="submit" class="btn btn--primary">💾 Simpan Paket Wisata</button>
    </div>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
  function hitungTotal(input, harga) {
    const paketId = input.previousElementSibling.value;
    const jumlah  = parseInt(input.value) || 0;
    const sub     = jumlah * harga;
    const fmt     = n => 'Rp ' + n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');

    document.getElementById('sub-' + paketId).textContent = fmt(sub);

    // Hitung grand total
    let grand = 0;
    document.querySelectorAll('.qty-input').forEach(inp => {
      const h = parseInt(inp.dataset.harga || 0);
      grand += (parseInt(inp.value) || 0) * h;
    });

    // Set data-harga supaya grand total bisa dihitung ulang
    input.dataset.harga = harga;
    grand = 0;
    document.querySelectorAll('.qty-input').forEach(inp => {
      grand += (parseInt(inp.value) || 0) * (parseInt(inp.dataset.harga) || 0);
    });
    document.getElementById('grand-total').textContent = fmt(grand);
  }

  // Set data-harga dari semua input
  document.querySelectorAll('.qty-input').forEach(inp => {
    const prev = inp.previousElementSibling;
    if (prev && prev.name === 'paket_id') {
      // harga akan diset saat onchange
    }
  });
</script>
{% endblock %}