<!DOCTYPE html>
<html lang="id" x-data="{
    darkMode: localStorage.getItem('theme') === 'dark',
    sidebarOpen: true,
    userMenuOpen: false,
    init() {
        if (this.darkMode) {
            document.documentElement.classList.add('dark');
        }
        const savedSidebar = localStorage.getItem('sidebarOpen');
        if (savedSidebar !== null) this.sidebarOpen = savedSidebar === 'true';
    },
    toggleTheme() {
        this.darkMode = !this.darkMode;
        localStorage.setItem('theme', this.darkMode ? 'dark' : 'light');
        if (this.darkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        window.dispatchEvent(new CustomEvent('theme-changed', {
            detail: { theme: this.darkMode ? 'dark' : 'light' }
        }));
    },
    toggleSidebar() {
        this.sidebarOpen = !this.sidebarOpen;
        localStorage.setItem('sidebarOpen', this.sidebarOpen);
    },
    toggleUserMenu() {
        this.userMenuOpen = !this.userMenuOpen;
    },
    closeUserMenu() {
        this.userMenuOpen = false;
    }
}" x-init="init()" x-cloak>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>SIMA Dashboard</title>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        [x-cloak] {
            display: none !important;
        }

        .dark {
            --bg-main: #12121f;
            --bg-card: #1a1a2e;
            --text-main: #ffffff;
        }

        .light {
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --text-main: #1e293b;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(148, 163, 184, 0.1);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.3);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.5);
        }

        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .dark .glass-effect {
            background: rgba(26, 26, 46, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .gradient-text {
            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hover-lift {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .dark .hover-lift:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }

        .sidebar-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .shine-effect {
            position: relative;
            overflow: hidden;
        }

        .shine-effect::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
            transform: rotate(30deg);
            transition: transform 0.6s;
        }

        .shine-effect:hover::after {
            transform: rotate(30deg) translate(20%, 20%);
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            font-size: 10px;
            font-weight: bold;
            min-width: 18px;
            height: 18px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            animation: pulse 2s infinite;
        }

        /* Active Menu Style */
        .nav-link.menu-active {
            background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
            color: rgb(139, 92, 246) !important;
            border: 1px solid rgba(139, 92, 246, 0.2);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        .dark .nav-link.menu-active {
            color: rgb(167, 139, 250) !important;
            border-color: rgba(167, 139, 250, 0.2);
        }

        .nav-link:not(.menu-active):hover {
            background-color: rgba(241, 245, 249, 0.5);
        }

        .dark .nav-link:not(.menu-active):hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
    </style>
</head>

<body class="bg-slate-50 dark:bg-[#12121f] text-slate-900 dark:text-slate-100 transition-colors duration-300 font-sans"
    style="font-family: 'Poppins', sans-serif;">
    <div class="flex h-screen overflow-hidden">

        <!-- Sidebar Backdrop for Mobile -->
        <div x-show="sidebarOpen" @click="sidebarOpen = false"
            class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
            x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak></div>

        <!-- Sidebar -->
        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
            class="sidebar-transition fixed lg:relative inset-y-0 left-0 z-50 w-72 bg-white dark:bg-[#1a1a2e] border-r border-slate-200 dark:border-white/5 flex flex-col shadow-2xl lg:shadow-none">

            <!-- Logo Section -->
            <div class="p-6 border-b border-slate-200 dark:border-white/5">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600 to-indigo-700 flex items-center justify-center shadow-lg">
                            <i data-lucide="school" class="w-5 h-5 text-white"></i>
                        </div>
                        <div>
                            <h2 class="text-xl font-bold tracking-tighter gradient-text">SIMA</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400">Sistem Informasi Mahasiswa</p>
                        </div>
                    </div>
                    <button @click="toggleSidebar"
                        class="lg:hidden p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg">
                        <i data-lucide="x" class="w-5 h-5 text-slate-500 dark:text-slate-400"></i>
                    </button>
                </div>
            </div>

            <!-- Navigation -->
            <div class="flex-1 overflow-y-auto px-4 space-y-6 py-6">
                <!-- Main Menu -->
                <div>
                    <p
                        class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-3 flex items-center gap-2">
                        <i data-lucide="grid-3x3" class="w-3 h-3"></i> Main
                    </p>
                    <a href="<?php echo e(route('dashboard')); ?>"
                        class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('dashboard') ? 'menu-active' : ''); ?>">
                        <div
                            class="w-9 h-9 rounded-lg bg-violet-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                            <i data-lucide="layout-grid" class="w-4 h-4"></i>
                        </div>
                        <span class="font-semibold text-sm">Dashboard</span>
                        <div class="ml-auto">
                            <i data-lucide="chevron-right" class="w-4 h-4 text-violet-400"></i>
                        </div>
                    </a>
                </div>

                <!-- Master Data -->
                <div>
                    <p
                        class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-3 flex items-center gap-2">
                        <i data-lucide="database" class="w-3 h-3"></i> Master Data
                    </p>
                    <div class="space-y-1">
                        <a href="<?php echo e(route('profile.edit')); ?>"
                            class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('profile.edit') ? 'menu-active' : ''); ?>">
                            <div
                                class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="user" class="w-4 h-4 text-blue-500"></i>
                            </div>
                            <span class="text-sm font-medium">Profile</span>
                        </a>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin'])): ?>
                            <a href="<?php echo e(route('roles.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('roles.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="shield" class="w-4 h-4 text-purple-500"></i>
                                </div>
                                <span class="text-sm font-medium">Manajemen Role</span>
                            </a>

                            <a href="<?php echo e(route('users.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('users.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="users" class="w-4 h-4 text-indigo-500"></i>
                                </div>
                                <span class="text-sm font-medium">Manajemen User</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'rnd', 'manager keuangan'])): ?>
                            <a href="<?php echo e(route('kampus.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('kampus.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-green-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="school" class="w-4 h-4 text-green-500"></i>
                                </div>
                                <span class="text-sm font-medium">Kampus</span>
                            </a>

                            <a href="<?php echo e(route('prodi.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('prodi.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="book-open" class="w-4 h-4 text-purple-500"></i>
                                </div>
                                <span class="text-sm font-medium">Program Studi</span>
                            </a>

                            <a href="<?php echo e(route('biaya-master.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('biaya-master.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="wallet" class="w-4 h-4 text-amber-500"></i>
                                </div>
                                <span class="text-sm font-medium">Master Biaya</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin'])): ?>
                            <a href="<?php echo e(route('metode-pembayaran.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('metode-pembayaran.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="credit-card" class="w-4 h-4 text-amber-500"></i>
                                </div>
                                <span class="text-sm font-medium">Metode Pembayaran</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'marketing', 'telemarketing'])): ?>
                            <a href="<?php echo e(route('mahasiswa.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('mahasiswa.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="users" class="w-4 h-4 text-cyan-500"></i>
                                </div>
                                <span class="text-sm font-medium">Mahasiswa</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager penagihan', 'penagihan', 'rnd'])): ?>
                            <a href="<?php echo e(route('tambah-biaya.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('tambah-biaya.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="plus-circle" class="w-4 h-4 text-amber-500"></i>
                                </div>
                                <span class="text-sm font-medium">Tambah Biaya</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager keuangan', 'keuangan'])): ?>
                            <a href="<?php echo e(route('potongan-biaya.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('potongan-biaya.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="percent" class="w-4 h-4 text-amber-500"></i>
                                </div>
                                <span class="text-sm font-medium">Potongan Biaya</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin'])): ?>
                            <a href="<?php echo e(route('pengajuan-status.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('pengajuan-status.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="send" class="w-4 h-4 text-indigo-500"></i>
                                </div>
                                <span class="text-sm font-medium">Status Akademik</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager penagihan', 'penagihan'])): ?>
                            <a href="<?php echo e(route('import.pembayaran-angsuran')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('import.pembayaran-angsuran') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="upload" class="w-4 h-4 text-emerald-500"></i>
                                </div>
                                <span class="text-sm font-medium">Import Pembayaran</span>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- RAP Menu -->
                <?php
                    $isRapActive =
                        request()->routeIs('rap.*') ||
                        request()->routeIs('rap.bonus.*') ||
                        request()->routeIs('rap.data-fee') ||
                        request()->routeIs('rap.data-bonus') ||
                        request()->routeIs('rap.data-approval') ||
                        request()->routeIs('rap.histori-bonus');

                    $userRole = auth()->user()->role->name;
                    // Role yang bisa mengakses semua menu RAP (kecuali Data Approval)
                    $canAccessFullRap = in_array($userRole, ['superadmin', 'admin', 'general affairs']);
                    // Role yang bisa mengakses Data Approval RAP
                    $canAccessApproval = $userRole === 'manager keuangan';
                    // Role yang bisa melihat menu RAP secara keseluruhan
                    $canSeeRapMenu = $canAccessFullRap || $canAccessApproval;
                ?>

                <?php if($canSeeRapMenu): ?>
                    <div x-data="{ rapOpen: <?php echo e($isRapActive ? 'true' : 'false'); ?> }">
                        <button x-on:click="rapOpen = !rapOpen"
                            class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-slate-100 dark:hover:bg-white/5 transition-all group">
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-violet-500/20 to-indigo-500/20 flex items-center justify-center">
                                    <i data-lucide="users" class="w-4 h-4 text-violet-500"></i>
                                </div>
                                <span class="text-sm font-medium">RAP</span>
                            </div>
                            <i x-show="!rapOpen" data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
                            <i x-show="rapOpen" data-lucide="chevron-down" class="w-4 h-4 text-slate-400"
                                x-cloak></i>
                        </button>

                        <div x-show="rapOpen" x-collapse class="space-y-1 pl-11 mt-1">
                            <!-- Menu untuk superadmin, admin, general affairs (semua menu RAP kecuali Data Approval) -->
                            <?php if($canAccessFullRap): ?>
                                <a href="<?php echo e(route('rap.index')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.index') || request()->routeIs('rap.create') || request()->routeIs('rap.edit') || request()->routeIs('rap.show') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-violet-500/20 to-indigo-500/20 flex items-center justify-center">
                                        <i data-lucide="users" class="w-3 h-3 text-violet-500"></i>
                                    </div>
                                    <span class="text-sm">Data RAP</span>
                                </a>

                                <a href="<?php echo e(route('rap.bonus.index')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.bonus.*') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-emerald-500/20 to-teal-500/20 flex items-center justify-center">
                                        <i data-lucide="gift" class="w-3 h-3 text-emerald-500"></i>
                                    </div>
                                    <span class="text-sm">Aturan Bonus RAP</span>
                                </a>

                                <a href="<?php echo e(route('rap.data-fee')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.data-fee') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-amber-500/20 to-orange-500/20 flex items-center justify-center">
                                        <i data-lucide="coins" class="w-3 h-3 text-amber-500"></i>
                                    </div>
                                    <span class="text-sm">Data Fee RAP</span>
                                </a>

                                <a href="<?php echo e(route('rap.data-bonus')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.data-bonus') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-green-500/20 to-emerald-500/20 flex items-center justify-center">
                                        <i data-lucide="gift" class="w-3 h-3 text-green-500"></i>
                                    </div>
                                    <span class="text-sm">Data Bonus RAP</span>
                                </a>

                                <a href="<?php echo e(route('rap.histori-bonus')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.histori-bonus') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-blue-500/20 to-cyan-500/20 flex items-center justify-center">
                                        <i data-lucide="history" class="w-3 h-3 text-blue-500"></i>
                                    </div>
                                    <span class="text-sm">Histori Bonus RAP</span>
                                </a>
                            <?php endif; ?>

                            <!-- Menu Data Approval RAP - HANYA untuk Manager Keuangan -->
                            <?php if($canAccessApproval): ?>
                                <a href="<?php echo e(route('rap.data-approval')); ?>"
                                    class="nav-link flex items-center gap-3 p-2.5 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('rap.data-approval') ? 'menu-active' : ''); ?>">
                                    <div
                                        class="w-6 h-6 rounded-lg bg-gradient-to-r from-blue-500/20 to-indigo-500/20 flex items-center justify-center">
                                        <i data-lucide="check-circle" class="w-3 h-3 text-blue-500"></i>
                                    </div>
                                    <span class="text-sm">Data Approval RAP</span>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Keuangan & Validasi -->
                <div>
                    <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'validator', 'manager wilayah', 'manager keuangan'])): ?>
                        <p
                            class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-3 flex items-center gap-2">
                            <i data-lucide="shield-check" class="w-3 h-3"></i> Keuangan & Validasi
                        </p>
                    <?php endif; ?>
                    <div class="space-y-1">
                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager keuangan'])): ?>
                            <a href="<?php echo e(route('validasi-pengajuan.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi-pengajuan.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="check-circle" class="w-4 h-4 text-purple-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi Status Akademik</span>
                        <?php endif; ?>
                        </a>
                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'validator'])): ?>
                            <a href="<?php echo e(route('validasi.mahasiswa.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi.mahasiswa.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="user-check" class="w-4 h-4 text-emerald-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi Mahasiswa</span>
                            </a>


                            <a href="<?php echo e(route('validasi.rencana.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi.rencana.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="file-text" class="w-4 h-4 text-orange-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi Rencana</span>
                            </a>

                            <a href="<?php echo e(route('validasi.pembayaran.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi.pembayaran.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-rose-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="check-circle" class="w-4 h-4 text-rose-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi Pembayaran</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin'])): ?>
                            <a href="<?php echo e(route('validasi-potongan.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi-potongan.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="check-circle" class="w-4 h-4 text-orange-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi Potongan</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager wilayah', 'asisten manager wilayah'])): ?>
                            <a href="<?php echo e(route('validasi-rap.index')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('validasi-rap.*') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="users" class="w-4 h-4 text-purple-500"></i>
                                </div>
                                <span class="text-sm font-medium">Validasi RAP</span>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Log Aktivitas -->
                <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'audit', 'validator'])): ?>
                    <div>
                        <p
                            class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-3 flex items-center gap-2">
                            <i data-lucide="shield-check" class="w-3 h-3"></i> Log Aktivitas
                        </p>
                        <a href="<?php echo e(route('log-aktivitas.index')); ?>"
                            class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('log-aktivitas.*') ? 'menu-active' : ''); ?>">
                            <div
                                class="w-8 h-8 rounded-lg bg-slate-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="activity" class="w-4 h-4 text-slate-500"></i>
                            </div>
                            <span class="text-sm font-medium">Log Tanggal & Validasi Mahasiswa</span>
                        </a>
                    </div>
                <?php endif; ?>

                <!-- Laporan -->
                <div>
                    <?php if(in_array(auth()->user()->role->name, [
                            'superadmin',
                            'admin',
                            'manager hrd',
                            'hrd',
                            'manager wilayah',
                            'marketing',
                            'manager telemarketing',
                            'telemarketing',
                            'manager keuangan',
                            'keuangan',
                            'general affairs',
                        ])): ?>
                        <p
                            class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-4 mb-3 flex items-center gap-2">
                            <i data-lucide="file-text" class="w-3 h-3"></i> Laporan
                        </p>
                    <?php endif; ?>
                    <div class="space-y-1">
                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'general affairs'])): ?>
                            <a href="<?php echo e(route('laporan.rap')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.rap') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-purple-500/20 to-pink-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="bar-chart-3" class="w-4 h-4 text-purple-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan RAP</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager hrd', 'hrd', 'manager wilayah', 'marketing'])): ?>
                            <a href="<?php echo e(route('laporan.daftar-herregistrasi')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.daftar-herregistrasi') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-emerald-500/20 to-emerald-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="clipboard-list" class="w-4 h-4 text-emerald-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Daftar & Herregistrasi</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, [
                                'superadmin',
                                'admin',
                                'manager hrd',
                                'hrd',
                                // 'manager wilayah',
                                // 'marketing'
                            ])): ?>
                            <a href="<?php echo e(route('laporan.perolehan-marketing')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.perolehan-marketing') || request()->routeIs('laporan.perolehan-marketing.detail') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-blue-500/20 to-blue-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="receipt" class="w-4 h-4 text-blue-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Perolehan Marketing</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, [
                                'superadmin',
                                'admin',
                                'manager hrd',
                                'hrd',
                                // 'manager telemarketing',
                                // 'telemarketing',
                            ])): ?>
                            <a href="<?php echo e(route('laporan.perolehan-telemarketing')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.perolehan-telemarketing') || request()->routeIs('laporan.perolehan-telemarketing.detail') ? 'menu-active' : ''); ?>

">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-blue-500/20 to-blue-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="receipt" class="w-4 h-4 text-blue-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Perolehan Telemarketing</span>
                            </a>
                        <?php endif; ?>

                        <?php if(in_array(auth()->user()->role->name, ['superadmin', 'admin', 'manager keuangan', 'keuangan'])): ?>
                            <a href="<?php echo e(route('laporan.alokasi-pendaftaran')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.alokasi-pendaftaran') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-rose-500/20 to-rose-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="pie-chart" class="w-4 h-4 text-rose-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Alokasi Pendaftaran</span>
                            </a>

                            <a href="<?php echo e(route('laporan.alokasi-herregistrasi')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.alokasi-herregistrasi') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-emerald-500/20 to-teal-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="file-text" class="w-4 h-4 text-emerald-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Alokasi Herregistrasi</span>
                            </a>

                            <a href="<?php echo e(route('laporan.alokasi-angsuran')); ?>"
                                class="nav-link flex items-center gap-3 p-3 rounded-xl transition-all hover-lift group <?php echo e(request()->routeIs('laporan.alokasi-angsuran') ? 'menu-active' : ''); ?>">
                                <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-r from-cyan-500/20 to-cyan-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <i data-lucide="trending-up" class="w-4 h-4 text-cyan-500"></i>
                                </div>
                                <span class="text-sm font-medium">Laporan Alokasi Angsuran</span>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- User Profile -->
            <div class="p-4 border-t border-slate-200 dark:border-white/5 bg-white dark:bg-[#1a1a2e] z-10">
                <div class="relative">
                    <button @click="toggleUserMenu" @click.away="closeUserMenu"
                        class="w-full flex items-center gap-3 p-3 bg-slate-50 dark:bg-white/5 rounded-2xl hover-lift group">
                        <img src="https://ui-avatars.com/api/?name=<?php echo e(auth()->user()->name); ?>&background=8b5cf6&color=fff&bold=true"
                            class="w-10 h-10 rounded-xl ring-2 ring-white dark:ring-gray-700 shadow-sm">
                        <div class="flex-1 min-w-0 text-left">
                            <p class="text-sm font-bold truncate"><?php echo e(auth()->user()->name); ?></p>
                            <p class="text-[10px] text-violet-500 font-bold uppercase">
                                <?php echo e(auth()->user()->role->name); ?></p>
                        </div>
                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 transition-transform"
                            :class="{ 'rotate-180': userMenuOpen }"></i>
                    </button>
                    <div x-show="userMenuOpen" x-transition
                        class="absolute bottom-full left-0 mb-2 w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-slate-200 dark:border-white/10 py-1 z-50"
                        @click.stop>
                        <a href="<?php echo e(route('profile.edit')); ?>"
                            class="flex items-center gap-2 px-4 py-2 hover:bg-slate-100 dark:hover:bg-white/5 text-sm rounded-t-xl">
                            <i data-lucide="user" class="w-4 h-4"></i> Profile
                        </a>
                        <form method="POST" action="<?php echo e(route('logout')); ?>" class="block">
                            <?php echo csrf_field(); ?>
                            <button type="submit"
                                class="w-full text-left flex items-center gap-2 px-4 py-2 hover:bg-slate-100 dark:hover:bg-white/5 text-sm text-red-500 rounded-b-xl">
                                <i data-lucide="log-out" class="w-4 h-4"></i> Logout
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col overflow-hidden">
            <!-- Header -->
            <header
                class="h-16 border-b border-slate-200 dark:border-white/5 bg-white/80 dark:bg-[#12121f]/80 backdrop-blur-lg px-6 lg:px-8 flex items-center justify-between sticky top-0 z-30">
                <div class="flex items-center gap-4">
                    <button @click="toggleSidebar"
                        class="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition lg:hidden">
                        <i data-lucide="menu" class="w-5 h-5 text-slate-600 dark:text-slate-400"></i>
                    </button>
                    <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 text-sm">
                        <span>/</span>
                        <span
                            class="text-slate-900 dark:text-white font-medium capitalize"><?php echo e(Request::segment(1) ?? 'Dashboard'); ?></span>
                        <?php if(Request::segment(2)): ?>
                            <span>/</span>
                            <span class="font-medium"><?php echo e(ucfirst(Request::segment(2))); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button @click="toggleTheme()"
                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-white/5 text-violet-600 transition-all hover:scale-110 group relative overflow-hidden">
                        <div
                            class="absolute inset-0 bg-gradient-to-r from-violet-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>
                        <i x-show="!darkMode" data-lucide="sun" class="w-5 h-5 relative z-10"></i>
                        <i x-show="darkMode" data-lucide="moon" class="w-5 h-5 relative z-10" x-cloak></i>
                    </button>
                    <button
                        class="p-2.5 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-700 text-white hover:shadow-lg hover:shadow-violet-500/25 transition-all">
                        <i data-lucide="plus" class="w-5 h-5"></i>
                    </button>
                </div>
            </header>

            <!-- Content Area -->
            <div class="flex-1 overflow-y-auto p-6 lg:p-8">
                <div class="max-w-7xl mx-auto">
                    <?php echo e($slot); ?>

                </div>
            </div>

            <!-- Footer -->
            <footer
                class="border-t border-slate-200 dark:border-white/5 px-6 lg:px-8 py-4 bg-white/50 dark:bg-[#12121f]/50 backdrop-blur-md">
                <div
                    class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
                    <div>&copy; <?php echo e(date('Y')); ?> SIMA. All rights reserved.</div>
                    <div>Powered By Rama</div>
                </div>
            </footer>
        </main>
    </div>

    <script>
        // Simpan posisi scroll sidebar
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.querySelector('aside .overflow-y-auto');
            if (sidebar) {
                const savedScrollTop = sessionStorage.getItem('sidebarScrollPosition');
                if (savedScrollTop) {
                    sidebar.scrollTop = parseInt(savedScrollTop);
                }
            }
        });

        // Simpan posisi scroll sidebar sebelum meninggalkan halaman
        window.addEventListener('beforeunload', function() {
            const sidebar = document.querySelector('aside .overflow-y-auto');
            if (sidebar) {
                sessionStorage.setItem('sidebarScrollPosition', sidebar.scrollTop);
            }
        });

        function initIcons() {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }
        document.addEventListener('DOMContentLoaded', initIcons);
        window.addEventListener('theme-changed', () => setTimeout(initIcons, 100));
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>

</html>
<?php /**PATH C:\Users\User\Documents\K2-PROJECTS\k2-sipema\resources\views/layouts/app.blade.php ENDPATH**/ ?>