<?php
include __DIR__ . '/../layouts/header.php';
?>
<div class="container">
    <!-- PAGE HEADER -->
    <div class="page-header">
        <h1>⛵ Daftar Kapal Wisata</h1>
        <p>Temukan kapal favorit Anda untuk menjelajahi keindahan Danau Toba.</p>
        <?php if(!isset($_SESSION['user_id'])): ?>
            <p style="margin-top:0.5rem;">
                <a href="?page=login" class="btn btn-sm">Login untuk Memesan</a>
                <a href="?page=register" class="btn btn-sm btn-success" style="margin-left:0.5rem;">Daftar Sekarang</a>
            </p>
        <?php endif; ?>
    </div>

    <!-- FILTER (opsional) -->
    <div style="display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; background:#fff; padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow);">
        <div style="flex:1; min-width:150px;">
            <label style="font-weight:600; font-size:0.85rem;">Cari Kapal</label>
            <input type="text" id="searchKapal" placeholder="Nama kapal..." style="width:100%; padding:0.5rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm);">
        </div>
        <div style="min-width:150px;">
            <label style="font-weight:600; font-size:0.85rem;">Jenis Kapal</label>
            <select id="filterJenis" style="width:100%; padding:0.5rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm);">
                <option value="">Semua</option>
                <option value="speedboat">Speedboat</option>
                <option value="kapal_kayu">Kapal Kayu</option>
                <option value="ferry">Ferry</option>
            </select>
        </div>
        <div style="min-width:150px;">
            <label style="font-weight:600; font-size:0.85rem;">Sortir</label>
            <select id="sortir" style="width:100%; padding:0.5rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm);">
                <option value="terbaru">Terbaru</option>
                <option value="termurah">Termurah</option>
                <option value="termahal">Termahal</option>
            </select>
        </div>
    </div>

    <!-- DAFTAR KAPAL -->
    <?php if(empty($kapalList)): ?>
        <div class="alert alert-warning">Belum ada kapal terverifikasi. Silakan cek kembali nanti.</div>
    <?php else: ?>
        <div class="grid" id="kapalGrid">
            <?php foreach($kapalList as $kapal): ?>
                <div class="card" data-nama="<?= strtolower($kapal['nama_kapal']) ?>" data-jenis="<?= $kapal['jenis'] ?>" data-harga="<?= $kapal['harga_per_tiket'] ?>">
                    <!-- Header Card -->
                    <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem;">
                        <h3 class="card-title"><?= htmlspecialchars($kapal['nama_kapal']) ?></h3>
                        <span style="background:#d1fae5; color:#065f46; padding:0.1rem 0.6rem; border-radius:12px; font-size:0.6rem; font-weight:600; text-transform:uppercase;">✓ Verified</span>
                    </div>
                    
                    <!-- Detail Kapal -->
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.3rem; margin-bottom:0.5rem;">
                        <p style="margin:0; color:var(--gray-600); font-size:0.85rem;">
                            <strong>Jenis:</strong> <?= ucfirst($kapal['jenis']) ?>
                        </p>
                        <p style="margin:0; color:var(--gray-600); font-size:0.85rem;">
                            <strong>Kapasitas:</strong> <?= $kapal['kapasitas'] ?> orang
                        </p>
                        <p style="margin:0; color:var(--gray-600); font-size:0.85rem; grid-column: span 2;">
                            <strong>Rute:</strong> <?= htmlspecialchars($kapal['pelabuhan_asal'] ?? 'Parapat') ?> 
                            ➜ <?= htmlspecialchars($kapal['pelabuhan_tujuan'] ?? 'Tuk-Tuk') ?>
                        </p>
                    </div>
                    
                    <!-- Fasilitas -->
                    <?php if(!empty($kapal['fasilitas'])): ?>
                        <p style="margin:0.3rem 0; color:var(--gray-500); font-size:0.8rem;">
                            <strong>Fasilitas:</strong> <?= htmlspecialchars($kapal['fasilitas']) ?>
                        </p>
                    <?php endif; ?>
                    
                    <!-- Harga -->
                    <div class="card-price">Rp <?= number_format($kapal['harga_per_tiket'], 0, ',', '.') ?></div>
                    
                    <!-- Tombol Aksi -->
                    <div class="card-footer">
                        <?php if(isset($_SESSION['user_id']) && $_SESSION['role'] == 'wisatawan'): ?>
                            <a href="?page=wisatawan&action=booking&kapal_id=<?= $kapal['id'] ?>" class="btn btn-sm btn-block">Pesan Sekarang</a>
                        <?php elseif(isset($_SESSION['user_id']) && $_SESSION['role'] != 'wisatawan'): ?>
                            <span class="btn btn-sm btn-secondary btn-block" style="cursor:not-allowed; opacity:0.7;">Login sebagai Wisatawan</span>
                        <?php else: ?>
                            <a href="?page=login" class="btn btn-sm btn-secondary btn-block">Login untuk Pesan</a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- Total Kapal -->
        <div style="text-align:center; margin-top:1.5rem; color:var(--gray-500);">
            Total <strong id="totalKapal"><?= count($kapalList) ?></strong> kapal tersedia
        </div>
    <?php endif; ?>
</div>

<!-- Script Filter & Search (Client Side) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchKapal');
    const filterJenis = document.getElementById('filterJenis');
    const sortir = document.getElementById('sortir');
    const kapalGrid = document.getElementById('kapalGrid');
    const totalKapal = document.getElementById('totalKapal');
    let cards = kapalGrid ? Array.from(kapalGrid.querySelectorAll('.card')) : [];

    function filterAndSort() {
        const search = searchInput.value.toLowerCase();
        const jenis = filterJenis.value;
        const sort = sortir.value;

        // Filter
        let filtered = cards.filter(card => {
            const nama = card.dataset.nama || '';
            const cardJenis = card.dataset.jenis || '';
            const matchNama = nama.includes(search);
            const matchJenis = !jenis || cardJenis === jenis;
            return matchNama && matchJenis;
        });

        // Sort
        if (sort === 'termurah') {
            filtered.sort((a, b) => parseFloat(a.dataset.harga) - parseFloat(b.dataset.harga));
        } else if (sort === 'termahal') {
            filtered.sort((a, b) => parseFloat(b.dataset.harga) - parseFloat(a.dataset.harga));
        } // 'terbaru' default, tetap urutan asli

        // Tampilkan ulang
        filtered.forEach(card => card.style.display = '');
        cards.forEach(card => {
            if (!filtered.includes(card)) {
                card.style.display = 'none';
            }
        });

        // Update total
        if (totalKapal) {
            totalKapal.textContent = filtered.length;
        }
    }

    // Event listener
    if (searchInput) searchInput.addEventListener('input', filterAndSort);
    if (filterJenis) filterJenis.addEventListener('change', filterAndSort);
    if (sortir) sortir.addEventListener('change', filterAndSort);
});
</script>
<?php include __DIR__ . '/../layouts/footer.php'; ?>