<?php
/**
 * sidebar.php - Sidebar untuk semua role (wisatawan, supir, admin)
 * Menampilkan menu sesuai dengan role pengguna yang sedang login.
 *
 * Variabel yang digunakan:
 * - $activeMenu  : string (menentukan menu aktif)
 * - $unreadCount : int (jumlah notifikasi, default 0)
 * - $user        : array (data user dari controller, opsional)
 * - $_SESSION   : data session
 */

$activeMenu = $activeMenu ?? 'dashboard';
$unreadCount = $unreadCount ?? 0; // fallback jika tidak dikirim

// ==============================================
// LOGIKA FOTO PROFIL - DENGAN BASE_URL
// ==============================================
$fotoFile = $_SESSION['foto_profil'] ?? null;
if (isset($user) && !empty($user['foto_profil'])) {
    $fotoFile = $user['foto_profil'];
}

// Base URL untuk path gambar
$baseUrl = defined('BASE_URL') ? rtrim(BASE_URL, '/') : '';

$fotoPath = 'uploads/profil/' . $fotoFile;
$fullPath = $_SERVER['DOCUMENT_ROOT'] . '/reservasi-kapal-wisata/' . $fotoPath;
$fotoExists = !empty($fotoFile) && file_exists($fullPath);
$fotoUrl = $fotoExists ? $baseUrl . '/' . $fotoPath : '';
$userName = $_SESSION['nama'] ?? 'Pengguna';

// Ambil role dari session
$role = $_SESSION['role'] ?? '';
?>

<aside class="sidebar">
    <div class="sidebar-header">
        <div class="user-info">
            <div class="user-avatar">
                <?php if($fotoExists): ?>
                    <img src="<?= $fotoUrl ?>" alt="Foto Profil" style="width:44px; height:44px; border-radius:50%; object-fit:cover;">
                <?php else: ?>
                    <?= strtoupper(substr($userName, 0, 2)) ?>
                <?php endif; ?>
            </div>
            <div class="user-detail">
                <div class="user-name"><?= htmlspecialchars($userName) ?></div>
                <div class="user-role">
                    <?php
                    if ($role == 'wisatawan') echo 'Wisatawan';
                    elseif ($role == 'pemilik_kapal') echo 'Supir Kapal';
                    elseif ($role == 'admin') echo 'Admin';
                    else echo 'Pengguna';
                    ?>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== MENU NAVIGASI BERDASARKAN ROLE ===== -->
    <nav class="sidebar-nav">
        <?php if ($role == 'wisatawan'): ?>
            <!-- Menu untuk Wisatawan -->
            <a href="?page=wisatawan&action=dashboard" class="<?= ($activeMenu == 'dashboard') ? 'active' : '' ?>">
                <span class="icon">📊</span> Dashboard
            </a>
            <a href="?page=wisatawan&action=booking" class="<?= ($activeMenu == 'booking') ? 'active' : '' ?>">
                <span class="icon">🛥️</span> Booking Kapal
            </a>
            <a href="?page=wisatawan&action=riwayat" class="<?= ($activeMenu == 'riwayat') ? 'active' : '' ?>">
                <span class="icon">📋</span> Riwayat Pesanan
            </a>
            <a href="?page=wisatawan&action=profil" class="<?= ($activeMenu == 'profil') ? 'active' : '' ?>">
                <span class="icon">👤</span> Profil Saya
            </a>

        <?php elseif ($role == 'pemilik_kapal'): ?>
            <!-- Menu untuk Supir / Pemilik Kapal -->
            <a href="?page=supir&action=dashboard" class="<?= ($activeMenu == 'dashboard') ? 'active' : '' ?>">
                <span class="icon">📊</span> Dashboard
            </a>
            <a href="?page=supir&action=kelolaKapal" class="<?= ($activeMenu == 'kelolaKapal') ? 'active' : '' ?>">
                <span class="icon">⛵</span> Kapal Saya
            </a>
            <!-- Menu Kelola Rute sudah dihapus dari sidebar -->
            <a href="?page=supir&action=jadwal" class="<?= ($activeMenu == 'jadwal') ? 'active' : '' ?>">
                <span class="icon">📅</span> Jadwal
            </a>
            <a href="?page=supir&action=pesananMasuk" class="<?= ($activeMenu == 'pesananMasuk') ? 'active' : '' ?>">
                <span class="icon">📩</span> Pesanan Masuk
            </a>
            <a href="?page=supir&action=sharedTrip" class="<?= ($activeMenu == 'sharedTrip') ? 'active' : '' ?>">
                <span class="icon">🔄</span> Shared Trip
            </a>
            <a href="?page=supir&action=riwayat" class="<?= ($activeMenu == 'riwayat') ? 'active' : '' ?>">
                <span class="icon">📋</span> Riwayat
            </a>
            <a href="?page=supir&action=notifikasi" class="<?= ($activeMenu == 'notifikasi') ? 'active' : '' ?>">
                <span class="icon">🔔</span> Notifikasi
                <?php if($unreadCount > 0): ?>
                    <span class="badge-notif"><?= $unreadCount ?></span>
                <?php endif; ?>
            </a>

        <?php elseif ($role == 'admin'): ?>
            <!-- Menu untuk Admin -->
            <a href="?page=admin&action=dashboard" class="<?= ($activeMenu == 'dashboard') ? 'active' : '' ?>">
                <span class="icon">📊</span> Dashboard
            </a>
            <a href="?page=admin&action=kelolaKapal" class="<?= ($activeMenu == 'kelolaKapal') ? 'active' : '' ?>">
                <span class="icon">⛵</span> Kelola Kapal
            </a>
            <a href="?page=admin&action=verifikasiKapal" class="<?= ($activeMenu == 'verifikasiKapal') ? 'active' : '' ?>">
                <span class="icon">✅</span> Verifikasi Kapal
            </a>
            <a href="?page=admin&action=kelolaPesanan" class="<?= ($activeMenu == 'kelolaPesanan') ? 'active' : '' ?>">
                <span class="icon">📋</span> Kelola Pesanan
            </a>
            <a href="?page=admin&action=kelolaSupir" class="<?= ($activeMenu == 'kelolaSupir') ? 'active' : '' ?>">
                <span class="icon">👤</span> Kelola Supir
            </a>
            <a href="?page=admin&action=kelolaRute" class="<?= ($activeMenu == 'kelolaRute') ? 'active' : '' ?>">
                <span class="icon">🗺️</span> Kelola Rute
            </a>
            <a href="?page=admin&action=laporan" class="<?= ($activeMenu == 'laporan') ? 'active' : '' ?>">
                <span class="icon">📊</span> Laporan
            </a>
            
        <?php endif; ?>
    </nav>

    <div class="sidebar-footer">
        <a href="?page=logout"><span class="icon">🚪</span> Logout</a>
    </div>
</aside>

<style>
    /* ===== SIDEBAR STYLE (sama seperti sebelumnya) ===== */
    .sidebar {
        width: 240px;
        flex-shrink: 0;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        padding: 1.5rem 0;
        position: sticky;
        top: 80px;
        border: 1px solid rgba(0,0,0,0.04);
    }
    .sidebar-header {
        padding: 0 1.2rem 1.2rem;
        border-bottom: 1px solid var(--gray-100);
    }
    .sidebar-header .user-info {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .sidebar-header .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
        overflow: hidden;
    }
    .sidebar-header .user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sidebar-header .user-name {
        font-weight: 600;
        color: var(--gray-900);
        font-size: 0.95rem;
    }
    .sidebar-header .user-role {
        font-size: 0.75rem;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .sidebar-nav { padding: 0.5rem 0; }
    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1.2rem;
        color: var(--gray-600);
        font-weight: 500;
        font-size: 0.9rem;
        transition: var(--transition);
        border-left: 3px solid transparent;
        text-decoration: none;
    }
    .sidebar-nav a:hover {
        background: var(--gray-50);
        color: var(--gray-900);
        text-decoration: none;
    }
    .sidebar-nav a.active {
        background: var(--gray-50);
        color: var(--primary);
        border-left-color: var(--primary);
        font-weight: 600;
    }
    .sidebar-nav a .icon {
        font-size: 1.2rem;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }
    .badge-notif {
        background: #ef4444;
        color: #fff;
        border-radius: 50%;
        padding: 0.1rem 0.4rem;
        font-size: 0.6rem;
        font-weight: 700;
        margin-left: auto;
        min-width: 18px;
        text-align: center;
        display: inline-block;
        line-height: 1.4;
    }
    .sidebar-footer {
        padding: 0.8rem 1.2rem 0;
        border-top: 1px solid var(--gray-100);
        margin-top: 0.5rem;
    }
    .sidebar-footer a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--danger);
        font-weight: 500;
        font-size: 0.85rem;
        padding: 0.4rem 0;
        transition: var(--transition);
        text-decoration: none;
    }
    .sidebar-footer a:hover {
        color: #dc2626;
        text-decoration: none;
    }
    .sidebar-footer a .icon {
        font-size: 1.1rem;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .sidebar {
            width: 100%;
            position: static;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.3rem;
            border: none;
            box-shadow: none;
            background: transparent;
            padding: 0;
        }
        .sidebar-header { display: none; }
        .sidebar-nav { display: contents; }
        .sidebar-nav a {
            background: #fff;
            border-radius: 10px;
            padding: 0.5rem 0.6rem;
            border-left: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            font-size: 0.75rem;
            justify-content: center;
            text-align: center;
            border: 1px solid var(--gray-200);
        }
        .sidebar-nav a.active {
            border-left: none;
            border-bottom: 3px solid var(--primary);
        }
        .sidebar-nav a .icon { width: auto; font-size: 1rem; }
        .sidebar-footer { display: none; }
    }
</style>