<?php
/**
 * dashboard.php - Halaman Dashboard Wisatawan
 */
$activeMenu = 'dashboard';
$pageTitle = 'Dashboard - Wisatawan';
include __DIR__ . '/../layouts/header.php';

// Statistik
$totalPesanan = count($pesanan);
$pending = array_filter($pesanan, function($p) { return $p['status_pesanan'] == 'pending'; });
$confirmed = array_filter($pesanan, function($p) { return $p['status_pesanan'] == 'confirmed'; });
$completed = array_filter($pesanan, function($p) { return $p['status_pesanan'] == 'completed'; });
$cancelled = array_filter($pesanan, function($p) { return $p['status_pesanan'] == 'cancelled'; });

// Pesanan terbaru untuk ditampilkan
$stmt = $this->pdo->prepare("
    SELECT p.*, k.nama_kapal, k.foto
    FROM pesanan p 
    JOIN kapal k ON p.kapal_id = k.id 
    WHERE p.user_id = ? 
    ORDER BY p.id DESC 
    LIMIT 3
");
$stmt->execute([$user_id]);
$recentOrders = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Kapal favorit (most booked)
$stmt = $this->pdo->prepare("
    SELECT k.id, k.nama_kapal, k.foto, COUNT(p.id) as total_booking
    FROM pesanan p
    JOIN kapal k ON p.kapal_id = k.id
    WHERE p.user_id = ? AND p.status_pesanan != 'cancelled'
    GROUP BY k.id
    ORDER BY total_booking DESC
    LIMIT 3
");
$stmt->execute([$user_id]);
$favoriteShips = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<div class="dashboard-wrapper">
    <?php include __DIR__ . '/../layouts/sidebar_wisatawan.php'; ?>

    <main class="main-content">
        <div class="content-header">
            <div>
                <h1> Selamat datang, <?= htmlspecialchars($_SESSION['nama'] ?? 'Pengguna') ?>!</h1>
                <p>Kelola pesanan kapal wisata Anda dengan mudah dan nyaman.</p>
            </div>
            <a href="?page=wisatawan&action=booking" class="btn btn-primary btn-lg">
                <span class="icon"></span> Pesan Sekarang
            </a>
        </div>

        <!-- Flash Messages -->
        <?php if(isset($_SESSION['flash_success'])): ?>
            <div class="alert alert-success"><?= $_SESSION['flash_success'] ?></div>
            <?php unset($_SESSION['flash_success']); ?>
        <?php endif; ?>
        <?php if(isset($_SESSION['flash_error'])): ?>
            <div class="alert alert-danger"><?= $_SESSION['flash_error'] ?></div>
            <?php unset($_SESSION['flash_error']); ?>
        <?php endif; ?>

        <!-- Statistik -->
        <div class="stats-grid">
            <div class="stat-card blue">
                <div class="stat-icon"></div>
                <div>
                    <div class="stat-number"><?= $totalPesanan ?></div>
                    <div class="stat-label">Total Pesanan</div>
                </div>
            </div>
            <div class="stat-card yellow">
                <div class="stat-icon"></div>
                <div>
                    <div class="stat-number"><?= count($pending) ?></div>
                    <div class="stat-label">Menunggu Verifikasi</div>
                </div>
            </div>
            <div class="stat-card green">
                <div class="stat-icon"></div>
                <div>
                    <div class="stat-number"><?= count($confirmed) ?></div>
                    <div class="stat-label">Dikonfirmasi</div>
                </div>
            </div>
            <div class="stat-card gray">
                <div class="stat-icon"></div>
                <div>
                    <div class="stat-number"><?= count($completed) ?></div>
                    <div class="stat-label">Selesai</div>
                </div>
            </div>
        </div>

        <!-- Quick Search -->
        <div class="quick-search-section">
            <h3> Cari Kapal Cepat</h3>
            <p>Temukan kapal berdasarkan pelabuhan asal atau destinasi.</p>
            <form method="GET" action="" class="quick-search-form">
                <input type="hidden" name="page" value="wisatawan">
                <input type="hidden" name="action" value="dashboard">
                <div class="search-row">
                    <div class="search-input-wrapper">
                        <span class="search-icon"></span>
                        <input type="text" 
                               name="cari_pelabuhan" 
                               class="search-input" 
                               placeholder="Ketik nama pelabuhan..." 
                               value="<?= isset($_GET['cari_pelabuhan']) ? htmlspecialchars($_GET['cari_pelabuhan']) : '' ?>"
                               list="pelabuhanList">
                        <datalist id="pelabuhanList">
                            <?php foreach($pelabuhanAsal as $pelabuhan): ?>
                                <option value="<?= htmlspecialchars($pelabuhan) ?>">
                            <?php endforeach; ?>
                        </datalist>
                    </div>
                    <button type="submit" class="btn btn-primary"> Cari</button>
                    <?php if(isset($_GET['cari_pelabuhan']) && !empty($_GET['cari_pelabuhan'])): ?>
                        <a href="?page=wisatawan&action=dashboard" class="btn btn-secondary"> Reset</a>
                    <?php endif; ?>
                </div>
            </form>
            <?php if(isset($_GET['cari_pelabuhan']) && !empty($_GET['cari_pelabuhan'])): ?>
                <div class="search-results">
                    <?php if(empty($kapalCepat)): ?>
                        <div class="alert alert-info">Tidak ada kapal dari pelabuhan <strong><?= htmlspecialchars($_GET['cari_pelabuhan']) ?></strong>.</div>
                    <?php else: ?>
                        <div class="kapal-grid">
                            <?php foreach($kapalCepat as $k): ?>
                                <div class="kapal-card-small">
                                    <?php if(!empty($k['foto'])): ?>
                                        <img src="/reservasi-kapal-wisata/uploads/kapal/<?= $k['foto'] ?>" alt="<?= htmlspecialchars($k['nama_kapal']) ?>" class="kapal-thumb">
                                    <?php endif; ?>
                                    <h4><?= htmlspecialchars($k['nama_kapal']) ?></h4>
                                    <p> <?= htmlspecialchars($k['pelabuhan_asal'] ?? 'Parapat') ?> → <?= htmlspecialchars($k['pelabuhan_tujuan'] ?? 'Tuk-Tuk') ?></p>
                                    <p> Kapasitas: <?= $k['kapasitas'] ?? 0 ?> orang</p>
                                    <a href="?page=wisatawan&action=booking&kapal_id=<?= $k['id'] ?>" class="btn btn-sm btn-success">Pesan Sekarang</a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Dua Kolom: Pesanan Terbaru & Kapal Favorit -->
        <div class="two-columns">
            <!-- Pesanan Terbaru -->
            <div class="column">
                <div class="section-header">
                    <h3> Pesanan Terbaru</h3>
                    <a href="?page=wisatawan&action=riwayat" class="link-view-all">Lihat Semua →</a>
                </div>
                <?php if(empty($recentOrders)): ?>
                    <div class="empty-state">
                        <p>Belum ada pesanan. Yuk, pesan kapal sekarang! 🛥️</p>
                        <a href="?page=wisatawan&action=booking" class="btn btn-primary btn-sm">Pesan Sekarang</a>
                    </div>
                <?php else: ?>
                    <div class="recent-orders">
                        <?php foreach($recentOrders as $order): ?>
                            <div class="order-item">
                                <div class="order-info">
                                    <div class="order-code"> <?= htmlspecialchars($order['kode_pesanan']) ?></div>
                                    <div class="order-ship"> <?= htmlspecialchars($order['nama_kapal']) ?></div>
                                    <div class="order-date"> <?= date('d/m/Y', strtotime($order['tanggal_berangkat'])) ?></div>
                                </div>
                                <div class="order-status">
                                    <span class="status-badge status-<?= $order['status_pesanan'] ?>">
                                        <?php
                                        $statusLabels = [
                                            'pending' => ' Menunggu',
                                            'confirmed' => ' Dikonfirmasi',
                                            'completed' => ' Selesai',
                                            'cancelled' => ' Dibatalkan'
                                        ];
                                        echo $statusLabels[$order['status_pesanan']] ?? $order['status_pesanan'];
                                        ?>
                                    </span>
                                    <a href="?page=wisatawan&action=status&id=<?= $order['id'] ?>" class="btn btn-sm btn-outline">Detail</a>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Kapal Favorit -->
            <div class="column">
                <div class="section-header">
                    <h3> Kapal Favorit Anda</h3>
                    <a href="?page=wisatawan&action=booking" class="link-view-all">Pesan Lagi →</a>
                </div>
                <?php if(empty($favoriteShips)): ?>
                    <div class="empty-state">
                        <p>Belum ada kapal favorit. Mulai pesan sekarang! 🛥️</p>
                    </div>
                <?php else: ?>
                    <div class="favorite-ships">
                        <?php foreach($favoriteShips as $ship): ?>
                            <div class="ship-item">
                                <?php if(!empty($ship['foto'])): ?>
                                    <img src="/reservasi-kapal-wisata/uploads/kapal/<?= $ship['foto'] ?>" alt="<?= htmlspecialchars($ship['nama_kapal']) ?>" class="ship-thumb">
                                <?php endif; ?>
                                <div class="ship-info">
                                    <div class="ship-name"><?= htmlspecialchars($ship['nama_kapal']) ?></div>
                                    <div class="ship-count"> Dipesan <?= $ship['total_booking'] ?> kali</div>
                                </div>
                                <a href="?page=wisatawan&action=booking&kapal_id=<?= $ship['id'] ?>" class="btn btn-sm btn-outline">Pesan</a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Tips Perjalanan -->
        <div class="tips-section">
            <h3> Tips Perjalanan</h3>
            <div class="tips-grid">
                <div class="tip-card">
                    <span class="tip-icon"></span>
                    <div>
                        <h4>Datang 30 Menit Sebelumnya</h4>
                        <p>Tiba di pelabuhan lebih awal untuk persiapan boarding.</p>
                    </div>
                </div>
                <div class="tip-card">
                    <span class="tip-icon"></span>
                    <div>
                        <h4>Aktifkan Notifikasi WA</h4>
                        <p>Pastikan nomor HP aktif untuk menerima notifikasi penting.</p>
                    </div>
                </div>
                <div class="tip-card">
                    <span class="tip-icon"></span>
                    <div>
                        <h4>Cek Cuaca</h4>
                        <p>Periksa cuaca sebelum berlayar untuk keselamatan.</p>
                    </div>
                </div>
                <div class="tip-card">
                    <span class="tip-icon"></span>
                    <div>
                        <h4>Siapkan Perlengkapan</h4>
                        <p>Bawa jaket, topi, dan kamera untuk momen tak terlupakan.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<style>
    .dashboard-wrapper {
        display: flex;
        gap: 24px;
        max-width: 1200px;
        margin: 1.5rem auto 0;
        padding: 0 20px;
        width: 100%;
        flex: 1;
        align-items: flex-start;
    }
    .main-content {
        flex: 1;
        min-width: 0;
        background: #fff;
        border-radius: 14px;
        padding: 1.8rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--gray-200);
    }
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .content-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.2rem;
    }
    .content-header p {
        color: var(--gray-500);
        font-size: 0.95rem;
    }
    .btn-lg {
        padding: 0.7rem 1.8rem;
        font-size: 1rem;
    }
    .btn-lg .icon {
        margin-right: 0.5rem;
    }
    .btn-primary {
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .btn-primary:hover {
        background: var(--primary-light);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15,59,94,0.3);
    }
    .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
        padding: 0.5rem 1.2rem;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.85rem;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        display: inline-block;
    }
    .btn-secondary:hover {
        background: var(--gray-300);
        color: var(--gray-800);
    }
    .btn-success {
        background: var(--success);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        display: inline-block;
        font-size: 0.85rem;
    }
    .btn-success:hover {
        background: #059669;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-outline {
        background: transparent;
        color: var(--primary);
        border: 1.5px solid var(--primary);
        border-radius: 6px;
        padding: 0.3rem 0.8rem;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        display: inline-block;
    }
    .btn-outline:hover {
        background: var(--primary);
        color: #fff;
    }
    .btn-sm {
        padding: 0.3rem 0.8rem;
        font-size: 0.75rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background: #fff;
        padding: 1rem 1.2rem;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
        gap: 1rem;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    }
    .stat-card .stat-icon {
        font-size: 1.6rem;
        opacity: 0.6;
    }
    .stat-card .stat-number {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.2;
    }
    .stat-card .stat-label {
        color: var(--gray-500);
        font-size: 0.75rem;
        font-weight: 500;
    }
    .stat-card.blue { border-left: 4px solid var(--primary); }
    .stat-card.yellow { border-left: 4px solid var(--secondary); }
    .stat-card.green { border-left: 4px solid var(--success); }
    .stat-card.gray { border-left: 4px solid var(--gray-400); }
    
    /* Quick Search */
    .quick-search-section {
        background: var(--gray-50);
        border-radius: 14px;
        padding: 1.2rem 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--gray-200);
    }
    .quick-search-section h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 0.2rem;
    }
    .quick-search-section p {
        color: var(--gray-500);
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }
    .quick-search-form .search-row {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
        align-items: center;
    }
    .search-input-wrapper {
        flex: 1;
        min-width: 220px;
        position: relative;
    }
    .search-input-wrapper .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.5;
    }
    .search-input-wrapper .search-input {
        width: 100%;
        padding: 0.6rem 1rem 0.6rem 2.4rem;
        border: 1.5px solid var(--gray-200);
        border-radius: 10px;
        font-size: 0.9rem;
        background: #fff;
        transition: var(--transition);
    }
    .search-input-wrapper .search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(15,59,94,0.08);
        outline: none;
    }
    .kapal-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    .kapal-card-small {
        background: #fff;
        border-radius: 10px;
        padding: 1rem;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }
    .kapal-card-small:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }
    .kapal-card-small .kapal-thumb {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    .kapal-card-small h4 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.2rem;
    }
    .kapal-card-small p {
        margin: 0.2rem 0;
        font-size: 0.85rem;
        color: var(--gray-600);
    }
    
    /* Two Columns */
    .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .column {
        background: var(--gray-50);
        border-radius: 14px;
        padding: 1.2rem;
        border: 1px solid var(--gray-200);
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .section-header h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-800);
        margin: 0;
    }
    .link-view-all {
        font-size: 0.8rem;
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
    }
    .link-view-all:hover {
        text-decoration: underline;
    }
    
    /* Recent Orders */
    .recent-orders {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .order-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.8rem;
        background: #fff;
        border-radius: 8px;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }
    .order-item:hover {
        border-color: var(--primary);
    }
    .order-info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .order-code {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--gray-800);
    }
    .order-ship {
        font-size: 0.8rem;
        color: var(--gray-600);
    }
    .order-date {
        font-size: 0.7rem;
        color: var(--gray-400);
    }
    .order-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .status-badge {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
        white-space: nowrap;
    }
    .status-pending {
        background: #fef3c7;
        color: #92400e;
    }
    .status-confirmed {
        background: #d1fae5;
        color: #065f46;
    }
    .status-completed {
        background: #dbeafe;
        color: #1e40af;
    }
    .status-cancelled {
        background: #fee2e2;
        color: #991b1b;
    }
    
    /* Favorite Ships */
    .favorite-ships {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .ship-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.5rem 0.8rem;
        background: #fff;
        border-radius: 8px;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }
    .ship-item:hover {
        border-color: var(--primary);
    }
    .ship-item .ship-thumb {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }
    .ship-item .ship-info {
        flex: 1;
    }
    .ship-item .ship-name {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--gray-800);
    }
    .ship-item .ship-count {
        font-size: 0.7rem;
        color: var(--gray-500);
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 1.5rem 0.5rem;
        color: var(--gray-500);
    }
    .empty-state p {
        margin-bottom: 0.8rem;
    }
    
    /* Tips */
    .tips-section {
        background: var(--gray-50);
        border-radius: 14px;
        padding: 1.2rem 1.5rem;
        border: 1px solid var(--gray-200);
    }
    .tips-section h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 1rem;
    }
    .tips-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.8rem;
    }
    .tip-card {
        display: flex;
        gap: 0.8rem;
        padding: 0.6rem 0.8rem;
        background: #fff;
        border-radius: 10px;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }
    .tip-card:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }
    .tip-card .tip-icon {
        font-size: 1.3rem;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .tip-card h4 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 0.1rem;
    }
    .tip-card p {
        font-size: 0.8rem;
        color: var(--gray-500);
        margin: 0;
    }
    
    /* Alerts */
    .alert {
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        margin-bottom: 1rem;
        font-weight: 500;
    }
    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid var(--success);
    }
    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid var(--danger);
    }
    .alert-info {
        background: #dbeafe;
        color: #1e40af;
        border-left: 4px solid var(--primary);
    }
    
    /* Responsive */
    @media (max-width: 992px) {
        .two-columns {
            grid-template-columns: 1fr;
        }
        .tips-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (max-width: 768px) {
        .dashboard-wrapper {
            flex-direction: column;
            padding: 0 12px;
            margin-top: 1rem;
        }
        .main-content { padding: 1rem; }
        .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
        .quick-search-form .search-row { flex-direction: column; align-items: stretch; }
        .kapal-grid { grid-template-columns: 1fr; }
        .content-header { flex-direction: column; align-items: stretch; }
        .content-header .btn-lg { text-align: center; }
    }
    @media (max-width: 480px) {
        .stats-grid { grid-template-columns: 1fr; }
        .main-content { padding: 0.8rem; }
        .tips-grid { grid-template-columns: 1fr; }
        .order-item { flex-direction: column; gap: 0.4rem; align-items: stretch; }
        .order-status { justify-content: space-between; }
    }
</style>

<?php include __DIR__ . '/../layouts/footer.php'; ?>