<?php
require_once '../includes/db.php';
$page_title = 'Booking Layanan';
$db = getDB();
$success = '';
$error = '';
$kode = '';

$harga = [
    'pendakian' => 50000,
    'open_trip'  => 350000,
    'ojek'       => 25000,
    'guide'      => 200000,
    'porter'     => 150000,
];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nama = trim($_POST['nama'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $telepon = trim($_POST['telepon'] ?? '');
    $layanan = $_POST['layanan'] ?? '';
    $tanggal = $_POST['tanggal'] ?? '';
    $jumlah = (int)($_POST['jumlah_orang'] ?? 1);
    $jalur = trim($_POST['jalur'] ?? '');
    $catatan = trim($_POST['catatan'] ?? '');
    $valid_layanan = ['pendakian','open_trip','ojek','guide','porter'];
    if ($nama && $email && $telepon && in_array($layanan, $valid_layanan) && $tanggal) {
        $kode_booking = 'MRB-' . strtoupper(substr($layanan,0,3)) . '-' . date('Ymd') . '-' . rand(100,999);
        $total = ($harga[$layanan] ?? 0) * $jumlah;
        try {
            $db->prepare("INSERT INTO booking (kode_booking,nama,email,telepon,layanan,tanggal,jumlah_orang,jalur,catatan,total_harga) VALUES (?,?,?,?,?,?,?,?,?,?)")
               ->execute([$kode_booking,$nama,$email,$telepon,$layanan,$tanggal,$jumlah,$jalur,$catatan,$total]);
            $success = $kode_booking;
            $kode = $kode_booking;
        } catch(Exception $e) { $error = 'Gagal menyimpan booking. Coba lagi.'; }
    } else { $error = 'Lengkapi semua field yang wajib diisi.'; }
}
include '../includes/header.php';
?>
<section class="page-hero">
    <div class="page-hero-bg" style="background-image:url('../assets/images/hero-bg.jpg');"></div>
    <div class="page-hero-overlay"></div>
    <div class="container page-hero-content text-center">
        <span class="section-label">RESERVASI ONLINE</span>
        <h1 class="section-title">Booking Layanan</h1>
        <p style="color:rgba(255,255,255,0.7);margin-top:1rem;">Pendakian · Open Trip · Ojek · Guide · Porter</p>
    </div>
</section>

<section class="content-section">
<div class="container">

<?php if ($success): ?>
<div style="background:rgba(46,213,115,0.1);border:1px solid rgba(46,213,115,0.4);border-radius:16px;padding:2.5rem;text-align:center;margin-bottom:2rem;">
    <div style="font-size:3rem;margin-bottom:1rem;">✅</div>
    <h4 style="color:#2ed573;font-family:'Cinzel',serif;margin-bottom:0.5rem;">Booking Berhasil!</h4>
    <p style="color:rgba(255,255,255,0.7);">Kode booking Anda:</p>
    <div style="font-family:'Cinzel',serif;font-size:1.8rem;color:var(--gold);letter-spacing:3px;margin:1rem 0;"><?= $kode ?></div>
    <p style="color:rgba(255,255,255,0.6);font-size:0.9rem;">Simpan kode ini. Tim kami akan menghubungi Anda untuk konfirmasi.</p>
    <a href="booking.php" class="btn-gold mt-3" style="display:inline-flex;">Booking Lagi</a>
</div>
<?php endif; ?>

<?php if ($error): ?>
<div style="background:rgba(255,71,87,0.1);border:1px solid rgba(255,71,87,0.4);border-radius:8px;padding:1rem;color:#ff4757;margin-bottom:1.5rem;"><?= $error ?></div>
<?php endif; ?>

<!-- Layanan Cards -->
<div class="row g-3 mb-5">
    <?php
    $layanan_info = [
        ['pendakian','bi-flag','Tiket Pendakian','Rp 50.000/orang','Akses resmi pendakian Gunung Merbabu termasuk asuransi.','#2ed573'],
        ['open_trip','bi-people','Open Trip','Rp 350.000/orang','Paket lengkap include guide, porter, logistik & dokumentasi.','#c9a227'],
        ['ojek','bi-bicycle','Jasa Ojek','Rp 25.000/orang','Antar jemput dari basecamp ke titik awal pendakian.','#54a0ff'],
        ['guide','bi-person-check','Jasa Guide','Rp 200.000/trip','Pemandu berpengalaman yang hafal semua jalur Merbabu.','#ff6b6b'],
        ['porter','bi-bag','Jasa Porter','Rp 150.000/trip','Bantu bawa perlengkapan agar pendakian lebih nyaman.','#a29bfe'],
    ];
    foreach ($layanan_info as $l):
    ?>
    <div class="col-md-4 col-6">
        <div onclick="pilihLayanan('<?= $l[0] ?>')" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:1.25rem;cursor:pointer;transition:all 0.3s;height:100%;" class="layanan-card" id="card-<?= $l[0] ?>">
            <div style="width:48px;height:48px;background:<?= $l[5] ?>22;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:<?= $l[5] ?>;margin-bottom:0.75rem;">
                <i class="bi <?= $l[1] ?>"></i>
            </div>
            <div style="font-family:'Cinzel',serif;font-size:0.9rem;color:#fff;margin-bottom:4px;"><?= $l[2] ?></div>
            <div style="color:var(--gold);font-weight:700;font-size:0.85rem;margin-bottom:6px;"><?= $l[3] ?></div>
            <div style="color:rgba(255,255,255,0.5);font-size:0.78rem;line-height:1.5;"><?= $l[4] ?></div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- Form Booking -->
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="glass-card">
    <h5 style="font-family:'Cinzel',serif;color:var(--gold);margin-bottom:1.5rem;letter-spacing:1px;">FORM BOOKING</h5>
    <form method="POST">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">NAMA LENGKAP *</label>
                <input type="text" name="nama" class="form-control" placeholder="Masukkan nama lengkap" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">NO. TELEPON / WA *</label>
                <input type="text" name="telepon" class="form-control" placeholder="08xxxxxxxxxx" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">EMAIL *</label>
                <input type="email" name="email" class="form-control" placeholder="email@example.com" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">TANGGAL *</label>
                <input type="date" name="tanggal" class="form-control" min="<?= date('Y-m-d', strtotime('+1 day')) ?>" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">LAYANAN *</label>
                <select name="layanan" id="select-layanan" class="form-select" required onchange="updateHarga(this.value)">
                    <option value="">-- Pilih Layanan --</option>
                    <option value="pendakian">Tiket Pendakian - Rp 50.000</option>
                    <option value="open_trip">Open Trip - Rp 350.000</option>
                    <option value="ojek">Jasa Ojek - Rp 25.000</option>
                    <option value="guide">Jasa Guide - Rp 200.000</option>
                    <option value="porter">Jasa Porter - Rp 150.000</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">JUMLAH ORANG *</label>
                <input type="number" name="jumlah_orang" id="jumlah" class="form-control" value="1" min="1" max="20" onchange="updateHarga(document.getElementById('select-layanan').value)">
            </div>
            <div class="col-12" id="jalur-wrapper">
                <label class="form-label">JALUR PENDAKIAN</label>
                <select name="jalur" class="form-select">
                    <option value="">-- Pilih Jalur --</option>
                    <option value="Selo">Jalur Selo (Boyolali)</option>
                    <option value="Wekas">Jalur Wekas (Magelang)</option>
                    <option value="Cuntel">Jalur Cuntel (Salatiga)</option>
                    <option value="Thekelan">Jalur Thekelan (Kopeng)</option>
                    <option value="Suwanting">Jalur Suwanting (Magelang)</option>
                </select>
            </div>
            <div class="col-12">
                <label class="form-label">CATATAN TAMBAHAN</label>
                <textarea name="catatan" class="form-control" rows="3" placeholder="Informasi tambahan, permintaan khusus, dll."></textarea>
            </div>
            <!-- Total Harga -->
            <div class="col-12">
                <div style="background:rgba(201,162,39,0.1);border:1px solid rgba(201,162,39,0.3);border-radius:10px;padding:1rem;display:flex;justify-content:space-between;align-items:center;">
                    <span style="color:rgba(255,255,255,0.7);font-size:0.85rem;">ESTIMASI TOTAL</span>
                    <span id="total-harga" style="font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold);font-weight:700;">Rp 0</span>
                </div>
            </div>
            <div class="col-12">
                <button type="submit" class="btn-gold w-100" style="justify-content:center;padding:14px;">
                    <i class="bi bi-calendar-check me-2"></i> KONFIRMASI BOOKING
                </button>
            </div>
        </div>
    </form>
</div>
</div>
</div>

</div>
</section>

<script>
const harga = {pendakian:50000,open_trip:350000,ojek:25000,guide:200000,porter:150000};
function updateHarga(val) {
    const jumlah = parseInt(document.getElementById('jumlah').value) || 1;
    const total = (harga[val] || 0) * jumlah;
    document.getElementById('total-harga').textContent = 'Rp ' + total.toLocaleString('id-ID');
}
function pilihLayanan(val) {
    document.getElementById('select-layanan').value = val;
    updateHarga(val);
    document.querySelectorAll('.layanan-card').forEach(c => {
        c.style.border = '1px solid rgba(255,255,255,0.08)';
        c.style.background = 'rgba(255,255,255,0.04)';
    });
    const card = document.getElementById('card-' + val);
    if (card) { card.style.border = '1px solid var(--gold)'; card.style.background = 'rgba(201,162,39,0.08)'; }
    document.querySelector('[name="tanggal"]').scrollIntoView({behavior:'smooth',block:'center'});
}
</script>
<?php include '../includes/footer.php'; ?>
