<?php
$current_user = getCurrentUser();
$current_page = basename($_SERVER['PHP_SELF']);
$current_module = basename(dirname($_SERVER['PHP_SELF']));

/**
 * Fungsi untuk menghitung base URL berdasarkan kedalaman folder
 * @param string $path - Path dari script yang sedang diakses
 * @return string - Base URL dengan jumlah '../' yang tepat
 */
function getBaseUrl($path) {
    // Hapus root folder dari path (misalnya /e-bkcare/)
    // Asumsi struktur: http://localhost:8888/e-bkcare/modules/siswa/index.php
    // Maka kita hitung dari setelah domain
    
    // Pisahkan path berdasarkan '/'
    $path_parts = explode('/', trim($path, '/'));
    
    // Hapus bagian pertama jika itu adalah folder root (e-bkcare)
    // Karena kita ingin path relatif dari root aplikasi
    if (isset($path_parts[0]) && $path_parts[0] == 'e-bkcare') {
        array_shift($path_parts);
    }
    
    // Hitung jumlah folder (depth) - kurangi 1 karena file terakhir
    $depth = count($path_parts) - 1;
    
    // Buat string '../' sebanyak depth
    if ($depth <= 0) {
        return ''; // Berada di root
    } else {
        return str_repeat('../', $depth);
    }
}

// Tentukan base URL
$base_url = getBaseUrl($_SERVER['SCRIPT_NAME']);

// Debugging (hapus di production)
// echo "<!-- Path: " . $_SERVER['SCRIPT_NAME'] . ", Depth: " . (substr_count($base_url, '../')) . ", Base URL: " . $base_url . " -->";
?>

<!-- Navbar -->
<nav class="gradient-bg text-white sticky top-0 z-50 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-3">
            <!-- Logo -->
            <div class="flex items-center space-x-3">
                <div class="bg-white/20 backdrop-blur-lg p-2 rounded-xl">
                    <i class="fas fa-heart text-2xl text-white"></i>
                </div>
                <a href="<?= $base_url ?>modules/dashboard.php" class="text-xl font-semibold tracking-tight hover:text-white/90 transition">
                    BKCare <small class="text-sm text-white/80">| SMAN 1 Bantaran</small>
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <button class="md:hidden text-white focus:outline-none" onclick="toggleMobileMenu()">
                <i class="fas fa-bars text-2xl"></i>
            </button>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center space-x-6">
                <!-- Navigation Links -->
                <div class="flex space-x-4">
                    <a href="<?= $base_url ?>modules/dashboard.php" 
                       class="px-3 py-2 rounded-lg hover:bg-white/20 transition <?= basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'bg-white/20' : '' ?>">
                        <i class="fas fa-home mr-1"></i>Dashboard
                    </a>

                    <?php if ($current_user['role'] == 'admin' || $current_user['role'] == 'guru_bk'): ?>
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-lg hover:bg-white/20 transition flex items-center">
                            <i class="fas fa-database mr-1"></i>Master Data
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <div class="py-2">
                                <a href="<?= $base_url ?>modules/tahun_ajaran/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-calendar mr-2 w-5 text-purple-600"></i>Tahun Ajaran
                                </a>
                                <a href="<?= $base_url ?>modules/users/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-users mr-2 w-5 text-purple-600"></i>Pengguna
                                </a>
                                <a href="<?= $base_url ?>modules/kelas/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-school mr-2 w-5 text-purple-600"></i>Kelas
                                </a>
                                <a href="<?= $base_url ?>modules/guru/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-school mr-2 w-5 text-purple-600"></i>Guru
                                </a>
                                <a href="<?= $base_url ?>modules/siswa/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-user-graduate mr-2 w-5 text-purple-600"></i>Siswa
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="relative group">
                        <button class="px-3 py-2 rounded-lg hover:bg-white/20 transition flex items-center">
                            <i class="fas fa-clipboard-list mr-1"></i>Konseling
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <div class="py-2">
                                <a href="<?= $base_url ?>modules/laporan/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-exclamation-triangle mr-2 w-5 text-purple-600"></i>Laporan Masalah
                                </a>
                                <a href="<?= $base_url ?>modules/jadwal/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-calendar-check mr-2 w-5 text-purple-600"></i>Jadwal Konseling
                                </a>
                                <a href="<?= $base_url ?>modules/konseling/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-hand-holding-heart mr-2 w-5 text-purple-600"></i>Sesi Konseling
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <button class="px-3 py-2 rounded-lg hover:bg-white/20 transition flex items-center">
                            <i class="fas fa-chart-line mr-1"></i>Monitoring
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <div class="py-2">
                                <a href="<?= $base_url ?>modules/perkembangan/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-chart-bar mr-2 w-5 text-purple-600"></i>Perkembangan Siswa
                                </a>
                                <a href="<?= $base_url ?>modules/pelanggaran/" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-ban mr-2 w-5 text-purple-600"></i>Pelanggaran
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notification & Profile -->
                <div class="flex items-center space-x-3 border-l border-white/30 pl-4">
                    <!-- Notification -->
                    <div class="relative group">
                        <button class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 transition flex items-center justify-center relative">
                            <i class="fas fa-bell"></i>
                            <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs flex items-center justify-center text-white" id="notifCount">0</span>
                        </button>
                        <div class="absolute top-full right-0 mt-2 w-80 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <div class="p-3 border-b border-gray-100">
                                <h6 class="font-semibold text-gray-800">Notifikasi</h6>
                            </div>
                            <div class="max-h-96 overflow-y-auto">
                                <div class="p-4 text-center text-gray-500">
                                    <i class="fas fa-bell-slash text-3xl mb-2 text-gray-300"></i>
                                    <p class="text-sm">Tidak ada notifikasi</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Profile -->
                    <div class="relative group">
                        <button class="flex items-center space-x-2 bg-white/20 hover:bg-white/30 transition rounded-full pl-3 pr-2 py-1">
                            <i class="fas fa-user-circle"></i>
                            <span class="max-w-[120px] truncate"><?= htmlspecialchars($current_user['nama']) ?></span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div class="absolute top-full right-0 mt-2 w-48 bg-white rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-user mr-2 w-5 text-purple-600"></i>Profil
                                </a>
                                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50 hover:text-purple-600 transition">
                                    <i class="fas fa-key mr-2 w-5 text-purple-600"></i>Ubah Password
                                </a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="<?= $base_url ?>auth/logout.php" class="block px-4 py-2 text-red-600 hover:bg-red-50 transition">
                                    <i class="fas fa-sign-out-alt mr-2 w-5"></i>Logout
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobileMenu" class="hidden md:hidden absolute top-full left-0 right-0 gradient-bg shadow-xl">
                <div class="container mx-auto px-4 py-3">
                    <a href="<?= $base_url ?>modules/dashboard.php" class="block py-2 hover:bg-white/20 rounded-lg px-3">
                        <i class="fas fa-home mr-2"></i>Dashboard
                    </a>
                    
                    <?php if ($current_user['role'] == 'admin' || $current_user['role'] == 'guru_bk'): ?>
                    <div class="py-2">
                        <div class="font-medium px-3 py-1 text-white/70">Master Data</div>
                        <a href="<?= $base_url ?>modules/tahun_ajaran/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Tahun Ajaran</a>
                        <a href="<?= $base_url ?>modules/users/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Pengguna</a>
                        <a href="<?= $base_url ?>modules/kelas/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Kelas</a>
                        <a href="<?= $base_url ?>modules/siswa/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Siswa</a>
                    </div>
                    <?php endif; ?>
                    
                    <div class="py-2">
                        <div class="font-medium px-3 py-1 text-white/70">Konseling</div>
                        <a href="<?= $base_url ?>modules/laporan/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Laporan Masalah</a>
                        <a href="<?= $base_url ?>modules/jadwal/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Jadwal Konseling</a>
                        <a href="<?= $base_url ?>modules/konseling/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Sesi Konseling</a>
                    </div>
                    
                    <div class="py-2">
                        <div class="font-medium px-3 py-1 text-white/70">Monitoring</div>
                        <a href="<?= $base_url ?>modules/perkembangan/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Perkembangan Siswa</a>
                        <a href="<?= $base_url ?>modules/pelanggaran/" class="block py-2 pl-8 hover:bg-white/20 rounded-lg">Pelanggaran</a>
                    </div>
                    
                    <div class="border-t border-white/20 my-2"></div>
                    
                    <div class="py-2">
                        <a href="<?= $base_url ?>auth/logout.php" class="block py-2 px-3 text-red-300 hover:bg-white/20 rounded-lg">
                            <i class="fas fa-sign-out-alt mr-2"></i>Logout
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
function toggleMobileMenu() {
    const menu = document.getElementById('mobileMenu');
    menu.classList.toggle('hidden');
}

// Close mobile menu when clicking outside
document.addEventListener('click', function(event) {
    const menu = document.getElementById('mobileMenu');
    const menuButton = document.querySelector('[onclick="toggleMobileMenu()"]');
    
    if (menu && !menu.contains(event.target) && !menuButton.contains(event.target)) {
        menu.classList.add('hidden');
    }
});
</script>