@php
    $admin = auth('admin')->user();
    $adminInitial = strtoupper(substr($admin->Name ?? 'A', 0, 1));
@endphp
<nav class="layout-navbar navbar navbar-expand-lg align-items-center nb-topbar sticky-top" id="layout-navbar">
    <div class="layout-sidenav-toggle navbar-nav d-lg-none align-items-center me-auto">
        <a class="nav-item nav-link px-0 nb-top-toggle" href="javascript:">
            <i class="fas fa-bars"></i>
        </a>
    </div>

    <div class="flex-grow-1"></div>

    <button class="navbar-toggler border-0 nb-top-toggle ms-auto" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
        <i class="fas fa-ellipsis-v"></i>
    </button>

    <div class="collapse navbar-collapse justify-content-end flex-grow-0" id="layout-navbar-collapse">
        <ul class="navbar-nav align-items-center">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle nb-top-user" href="#" data-toggle="dropdown">
                    <span class="nb-top-avatar">{{ $adminInitial }}</span>
                    <span class="nb-top-user-text">
                        <strong>{{ $admin->Name ?? 'Admin' }}</strong>
                        <small>Administrator</small>
                    </span>
                    <i class="fas fa-chevron-down nb-top-chevron"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow border-0 nb-top-dropdown">
                    <div class="dropdown-header text-center">
                        <strong>{{ $admin->Name ?? 'Administrator' }}</strong>
                        <div class="small text-muted">{{ $admin->Username ?? '' }}</div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item text-danger fw-semibold">
                            <i class="fas fa-sign-out-alt me-2"></i> Logout
                        </button>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</nav>

<style>
.nb-topbar {
    background: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.65rem 0;
    box-shadow: none;
    font-family: 'Sora', ui-sans-serif, sans-serif;
    min-height: 56px;
}

.nb-top-toggle {
    color: #0d7377 !important;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.nb-top-user {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    color: #111827 !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.15s ease;
}

.nb-top-user:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nb-top-user::after {
    display: none;
}

.nb-top-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #0d7377;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nb-top-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.nb-top-user-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #111827;
}

.nb-top-user-text small {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
}

.nb-top-chevron {
    font-size: 0.6rem;
    color: #9ca3af;
    margin-left: 0.15rem;
}

.nb-top-dropdown {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    min-width: 220px;
    margin-top: 0.4rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
</style>