<?php
require_once __DIR__ . '/includes/db.php';

$namaEvent = getSetting('NAMA_EVENT', 'Tiket Event');
$mode = strtolower(getSetting('MODE', 'sandbox'));
$clientKey = getSetting('CLIENT_KEY', '');
$snapJsUrl = $mode === 'production'
    ? 'https://app.midtrans.com/snap/snap.js'
    : 'https://app.sandbox.midtrans.com/snap/snap.js';
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($namaEvent) ?> - Pembelian Tiket Online</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <div class="stage">
    <div class="eyebrow">Tiket Digital &middot; Pembayaran Aman</div>

    <div class="card">

      <!-- LAYAR 1: FORM -->
      <div id="formBox">
        <h1>Formulir Pembelian Tiket</h1>

        <label>Jenis Identitas</label>
        <select id="jenisIdentitas">
          <option value="KTP">KTP</option>
          <option value="PASPOR">Paspor</option>
          <option value="SIM">SIM</option>
          <option value="KARTU PELAJAR">Kartu Pelajar</option>
          <option value="LAINNYA">Lainnya</option>
        </select>

        <label>Nomor Identitas</label>
        <input type="text" id="nomorIdentitas" placeholder="Sesuai kartu identitas" required>

        <label>Nama Lengkap</label>
        <input type="text" id="nama" required>

        <label>Alamat</label>
        <input type="text" id="alamat" required>

        <label>Tanggal Lahir</label>
        <input type="date" id="tglLahir" required>

        <label>Nomor WhatsApp</label>
        <input type="text" id="whatsapp" placeholder="08xxxxxxxxxx" required>

        <label>Email</label>
        <input type="email" id="email" required>

        <label>Jenis Tiket</label>
        <select id="jenisTiket"></select>

        <button id="btnSubmit" onclick="submitForm()">Lanjut ke Pembayaran</button>
        <div class="error" id="errorMsg"></div>
      </div>

      <!-- LAYAR 2: MENUNGGU PEMBAYARAN -->
      <div class="hidden" id="pendingBox">
        <div class="pulse-wrap">
          <div class="pulse-ring"></div>
          <div class="pulse-ring"></div>
          <div class="pulse-ring"></div>
          <div class="pulse-core">⏳</div>
        </div>
        <h1>Menunggu Pembayaran</h1>
        <p class="kecil" style="margin-top:0;">Selesaikan pembayaran sesuai instruksi yang diberikan. Tiket akan otomatis muncul di sini setelah pembayaran kami terima.</p>
        <div class="order-code">KODE ORDER<br><span id="pOrderId"></span></div>
        <p class="checking-line"><span class="spinner"></span>Memeriksa status pembayaran…</p>
        <div class="tombol-aksi">
          <button onclick="cekStatusManual()">Cek Status Sekarang</button>
        </div>
        <button class="secondary" onclick="location.reload()">Buat Pesanan Baru</button>
      </div>

      <!-- LAYAR 3: TIKET (hanya tampil kalau LUNAS) -->
      <div class="hidden" id="hasilBox">
        <div id="ticketWrapper">
          <div class="ticket" id="ticketNode">
            <div class="ribbon">ADMIT ONE</div>
            <div class="ticket-header">
              <div class="badge">✦ E-Tiket Resmi</div>
              <h2><?= htmlspecialchars($namaEvent) ?></h2>
              <div class="sub">Tunjukkan QR ini saat check-in</div>
            </div>
            <div class="ticket-body">
              <div class="ticket-row"><span class="label">Nama</span><span class="value" id="tNama"></span></div>
              <div class="ticket-row"><span class="label">Jenis Tiket</span><span class="value" id="tJenis"></span></div>
              <div class="ticket-row"><span class="label">Total Bayar</span><span class="value" id="tHarga"></span></div>
              <div class="ticket-row">
                <span class="label">Status</span>
                <span class="value"><span class="status-pill">✓ LUNAS</span></span>
              </div>
            </div>
            <div class="perforation">
              <div class="notch left"></div>
              <div class="line"></div>
              <div class="notch right"></div>
            </div>
            <div class="ticket-qr">
              <img id="tQr" src="" alt="QR Tiket">
              <div class="caption">Kode Order</div>
              <div class="kode" id="tOrderId"></div>
            </div>
            <div class="barcode" id="barcodeStrip"></div>
          </div>
        </div>

        <p class="kecil">Pembayaran berhasil. E-tiket ini juga sudah dikirim ke email Anda.</p>

        <div class="tombol-aksi">
          <button onclick="downloadTiket()">⬇ Download PDF</button>
          <button class="secondary" onclick="location.reload()">Pesanan Baru</button>
        </div>
      </div>

    </div>
  </div>

  <script src="<?= htmlspecialchars($snapJsUrl) ?>" data-client-key="<?= htmlspecialchars($clientKey) ?>"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="assets/js/app.js"></script>
</body>
</html>
