<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
    <div class="container-fluid">
        {{-- Tombol Sidebar Toggle --}}
        <button class="btn btn-light me-1" type="button" id="sidebarToggle">
            <i class="bi bi-list fs-5"></i>
        </button>

        {{-- Judul Halaman --}}
        <a class="navbar-brand fw-bold me-auto" href="#">
            @yield('page-title', 'Digipus.go')
        </a>

        {{-- Container Ikon Kanan --}}
        <div class="d-flex align-items-center ms-auto gap-1 me-1">

            {{-- DROPDOWN Notifikasi --}}
            <div class="dropdown notification-dropdown">
                <a href="#" class="nav-link" id="notificationDropdown" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="bi bi-bell fs-5 position-relative">
                        @if ($unreadNotificationsCount > 0)
                            <span
                                class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle">
                                <span class="visually-hidden">New alerts</span>
                            </span>
                        @endif
                    </i>
                </a>
                <div class="dropdown-menu dropdown-menu-end border-0 shadow-lg" aria-labelledby="notificationDropdown">
                    <div class="px-3 py-2 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 fw-bold text-dark">Notifikasi</h6>
                        @if ($unreadNotificationsCount > 0)
                            <span
                                class="badge bg-primary-subtle text-primary-emphasis rounded-pill">{{ $unreadNotificationsCount }}
                                Baru</span>
                        @endif
                    </div>
                    <hr class="my-1">
                    <div class="notification-wrapper overflow-auto px-2">
                        @forelse($notifikasi->take(5) as $item)
                            @php
                                $url = '#';

                                if (isset($item['type'])) {
                                    if ($item['type'] === 'riwayat_peminjaman') {
                                        $url = route('riwayat.offline');
                                    } elseif ($item['type'] === 'denda_active') {
                                        $url = route('riwayat.offline'); 
                                    } elseif ($item['type'] === 'rekomendasi' && isset($item['link_id'])) {
                                        $url = route('rekomendasi.show', $item['link_id']);
                                    } elseif ($item['type'] === 'katalog_kategori' && isset($item['link_id'])) {
                                        $url = route('katalog.index', ['kategori' => $item['link_id']]);
                                    }
                                }
                            @endphp

                            <a href="{{ $url }}"
                                class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) unread @endif">
                                <div class="notification-icon bg-{{ $item['color'] }}-subtle">
                                    <i class="bi {{ $item['icon'] }} text-{{ $item['color'] }}-emphasis"></i>
                                </div>
                                <div class="notification-content">
                                    <p class="mb-0 text-truncate">{{ $item['title'] }}</p>
                                    <small>{{ $item['time'] }}</small>
                                </div>
                                @if (!$item['read'])
                                    <div class="unread-dot"></div>
                                @endif
                            </a>
                        @empty
                            <div class="text-center py-5">
                                <i class="bi bi-bell-slash fs-2 text-muted"></i>
                                <p class="text-muted small mt-2 mb-0">Tidak ada notifikasi baru.</p>
                            </div>
                        @endforelse
                    </div>
                    @if (count($notifikasi) > 0)
                        <hr class="mt-1 mb-0">
                        <div class="text-center py-2">
                            <a href="#" class="fw-bold small dropdown-item justify-content-center"
                                data-bs-toggle="modal" data-bs-target="#semuaNotifikasiModal">
                                Lihat Semua
                            </a>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Dropdown Profile --}}
            <div class="dropdown d-none d-lg-flex">
                <a href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ Auth::user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) . '&background=random' }}"
                        alt="Avatar" class="profile-avatar">
                </a>
                <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0" aria-labelledby="userDropdown">
                    <li>
                        <div class="px-3 py-2">
                            <h6 class="mb-0 fw-bold">{{ Auth::user()->name }}</h6>
                            <small class="text-muted">{{ Auth::user()->email }}</small>
                        </div>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('profile.index') }}">
                            <i class="bi bi-person-circle"></i>
                            <span>{{ __('Profil') }}</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('profile.edit') }}">
                            <i class="bi bi-gear"></i>
                            <span>{{ __('Pengaturan') }}</span>
                        </a>
                    </li>
                    <li>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger">
                                <i class="bi bi-box-arrow-right"></i>
                                <span>{{ __('Log Out') }}</span>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
