@php
    $user = Auth::user();
    $profile = $user->profile ?? null;
    $avatarUrl = $profile && $profile->avatar_url ? $profile->avatar_url : null;
    $initial = strtoupper(substr($user->username ?? 'A', 0, 1));
@endphp

<nav class="navbar tf-navbar px-3 px-lg-4" style="z-index: 1030">
    <div class="container-fluid d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <button class="btn d-lg-none border-0" id="menuToggle">
                <span class="material-symbols-outlined"> menu </span>
            </button>
        </div>

        <div class="d-flex align-items-center gap-2 gap-lg-3">

            <!-- ===== NOTIFICATION BELL ===== -->
            <div class="dropdown" id="notifDropdownWrapper">
                <button
                    class="tf-notif-btn btn border-0 p-0 position-relative"
                    id="notifBell"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    data-bs-display="static"
                    aria-expanded="false"
                    title="Notifikasi"
                >
                    <span class="material-symbols-outlined tf-notif-icon">notifications</span>
                    <span class="tf-notif-badge d-none" id="notifBadge">0</span>
                </button>

                <div class="dropdown-menu dropdown-menu-end tf-notif-dropdown shadow-lg border-0 rounded-4 p-0"
                    id="notifDropdown"
                    aria-labelledby="notifBell">

                    <!-- Header -->
                    <div class="tf-notif-header d-flex align-items-center justify-content-between px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <span class="material-symbols-outlined" style="font-size:20px; color:#10b981;">notifications_active</span>
                            <span class="fw-bold" style="font-size:.95rem;">Notifikasi</span>
                        </div>
                        <button class="btn btn-sm border-0 p-0 text-muted" id="markAllReadBtn" title="Tandai semua dibaca" style="font-size:.75rem;">
                            <span class="material-symbols-outlined" style="font-size:16px;">done_all</span>
                        </button>
                    </div>

                    <!-- Permission Banner -->
                    <div id="notifPermBanner" class="d-none px-3 pb-2">
                        <div class="alert alert-warning py-2 px-3 mb-0 rounded-3 d-flex align-items-center gap-2" style="font-size:.8rem;">
                            <span class="material-symbols-outlined" style="font-size:16px;">warning</span>
                            <span>Aktifkan izin notifikasi browser</span>
                            <button class="btn btn-sm btn-warning ms-auto py-0 px-2" id="enableNotifBtn" style="font-size:.75rem;">Aktifkan</button>
                        </div>
                    </div>

                    <!-- Notification List -->
                    <div class="tf-notif-list" id="notifList">
                        <!-- Empty state -->
                        <div class="tf-notif-empty text-center py-5 px-4" id="notifEmpty">
                            <div class="tf-notif-empty-icon mb-3">
                                <span class="material-symbols-outlined" style="font-size:48px; color:#d1d5db;">notifications_none</span>
                            </div>
                            <p class="text-muted mb-0" style="font-size:.85rem;">Tidak ada notifikasi baru</p>
                        </div>

                        <!-- Items will be injected here by JS -->
                        <div id="notifItems"></div>
                    </div>

                    <!-- Footer -->
                    <div class="tf-notif-footer px-3 py-2 text-center border-top">
                        <small class="text-muted" id="notifLastCheck" style="font-size:.72rem;">
                            Belum ada pemeriksaan
                        </small>
                    </div>
                </div>
            </div>
            <!-- ===== END NOTIFICATION BELL ===== -->

            <div class="d-flex align-items-center gap-3">
                <div class="d-none d-sm-block text-end">
                    <h6 class="mb-0 fw-bold">{{ $user->username ?? 'Admin' }}</h6>
                    <small class="text-muted" style="font-size:0.7rem;">{{ ucfirst($user->role ?? 'admin') }}</small>
                </div>

                <!-- Profile Dropdown -->
                <div class="dropdown">
                    <button class="border-0 bg-transparent p-0" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" style="cursor:pointer;">
                        @if($avatarUrl)
                            <img src="{{ $avatarUrl }}"
                                class="rounded-circle border border-2" width="45" height="45"
                                style="object-fit:cover;"
                                alt="Avatar" />
                        @else
                            <div class="rounded-circle border border-2 d-flex align-items-center justify-content-center fw-bold text-white"
                                style="width:45px;height:45px;background:linear-gradient(135deg,#10b981,#059669);font-size:1.1rem;">
                                {{ $initial }}
                            </div>
                        @endif
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0 rounded-3 p-2" style="min-width:200px;">
                        <li class="px-2 py-1">
                            <small class="text-muted fw-semibold">Masuk sebagai</small><br>
                            <span class="fw-bold">{{ $user->username ?? 'Admin' }}</span>
                        </li>
                        <li><hr class="dropdown-divider my-1"></li>
                        <li>
                        <a class="dropdown-item d-flex align-items-center gap-2 rounded-2 py-2" href="{{ route('admin.profile.index', ['code' => session('admin_route_code')]) }}">
                                <span class="material-symbols-outlined" style="font-size:20px;">person</span>
                                Profil Saya
                            </a>
                        </li>
                        <li><hr class="dropdown-divider my-1"></li>
                        <li>
                            <form action="{{ route('admin.logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="dropdown-item d-flex align-items-center gap-2 rounded-2 py-2 text-danger">
                                    <span class="material-symbols-outlined" style="font-size:20px;">logout</span>
                                    Logout
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Hitung lebar scrollbar dan cegah layout shift saat dropdown buka
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');

    // Cegah Bootstrap menambah padding-right ke body saat dropdown terbuka
    // (mencegah konten & navbar bergeser)
    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function(btn) {
        btn.addEventListener('show.bs.dropdown', function () {
            document.body.style.paddingRight = '0px';
            document.body.style.overflow = '';
        });
        btn.addEventListener('hide.bs.dropdown', function () {
            document.body.style.paddingRight = '';
        });
    });
});
</script>