@php
    $id        = Auth::user()->id;
    $adminData = App\Models\User::find($id);
    $hour      = now()->hour;
    $greeting  = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
@endphp

<style>
    .navbar-custom {
        background: #425f4b !important;
        border-bottom: 1px solid #bbf7d0;
        box-shadow: 0 1px 8px rgba(15,76,53,.06) !important;
        padding: 0 !important;
    }
    .navbar-custom .container-fluid { min-height: 62px; }

        /* Logo area */
    .logo-box { background: rgba(0,0,0,.15) !important; }

    /* Hamburger */
    .button-menu-mobile { color: rgba(255,255,255,.75) !important; }
    .button-menu-mobile:hover { color: #fff !important; }

    /* Topnav icons */
    .noti-icon { color: rgba(255,255,255,.7) !important; font-size: 1.1rem; }
    .nav-link:hover .noti-icon { color: #fff !important; }

    /* ── Left: hamburger + greeting ── */
    .hdr-greeting {
        display: flex; flex-direction: column; justify-content: center;
        line-height: 1.25; margin-left: 4px;
    }
    .hdr-greeting .greet-text {
        font-size: .72rem; color: #9ca3af; font-weight: 500;
    }
    .hdr-greeting .greet-name {
        font-size: .9rem; font-weight: 700; color: #111827;
    }

    /* ── Date chip ── */
    .hdr-date-chip {
        background: #f0fdf4; color: #065f46;
        border: 1px solid #bbf7d0;
        border-radius: 20px; padding: 4px 14px;
        font-size: .75rem; font-weight: 600;
        display: inline-flex; align-items: center; gap: 5px;
    }

    /* ── Right nav items ── */
    .topnav-menu > li > a.nav-link {
        display: flex !important; align-items: center;
        height: 62px; padding: 0 12px !important;
        color: #4b5563 !important;
        transition: color .15s, background .15s;
    }
    .topnav-menu > li > a.nav-link:hover {
        color: #0f4c35 !important;
        background: #f0fdf4;
    }
    .noti-icon { font-size: 1.15rem !important; }

    /* ── Profile button ── */
    .nav-user {
        display: flex !important; align-items: center;
        gap: 10px; padding: 0 16px 0 10px !important;
        border-left: 1px solid #bbf7d0;
    }
    .nav-user .avatar-wrap {
        width: 36px; height: 36px; border-radius: 50%;
        overflow: hidden; flex-shrink: 0;
        border: 2px solid #bbf7d0;
        box-shadow: 0 0 0 2px #fff;
    }
    .nav-user .avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .nav-user .user-info { line-height: 1.25; }
    .nav-user .user-info .u-name { font-size: .82rem; font-weight: 700; color: #111827; }
    .nav-user .user-info .u-role { font-size: .68rem; color: #9ca3af; }
    .nav-user .mdi-chevron-down { font-size: 1rem; color: #9ca3af; margin-left: 2px; }

    /* ── Profile dropdown ── */
    .profile-dropdown {
        border: none !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
        padding: 6px !important;
        min-width: 210px !important;
        margin-top: 6px !important;
    }
    .profile-dropdown .dropdown-header.noti-title {
        background: linear-gradient(135deg,#0f4c35,#1a7a5e);
        border-radius: 10px; padding: 12px 14px; margin-bottom: 4px;
    }
    .profile-dropdown .dropdown-header.noti-title h6 {
        color: #fff; font-size: .82rem; font-weight: 700;
        margin: 0;
    }
    .profile-dropdown .dropdown-header.noti-title small {
        color: rgba(255,255,255,.7); font-size: .72rem;
    }
    .profile-dropdown .notify-item {
        border-radius: 8px !important; padding: 9px 12px !important;
        display: flex !important; align-items: center; gap: 10px;
        font-size: .85rem; color: #374151 !important;
        transition: background .15s !important;
    }
    .profile-dropdown .notify-item:hover { background: #f0fdf4 !important; color: #0f4c35 !important; }
    .profile-dropdown .notify-item i { font-size: 1rem; width: 18px; text-align: center; color: #6b7280; }
    .profile-dropdown .notify-item:hover i { color: #0f4c35; }
    .profile-dropdown .dropdown-divider { margin: 4px 0 !important; border-color: #f3f4f6 !important; }
    .profile-dropdown .notify-item.text-danger { color: #dc2626 !important; }
    .profile-dropdown .notify-item.text-danger i { color: #dc2626; }
    .profile-dropdown .notify-item.text-danger:hover { background: #fff5f5 !important; }

    /* ── Fullscreen btn ── */
    .fullscreen-btn {
        width: 34px; height: 34px; border-radius: 8px;
        border: 1.5px solid #bbf7d0; background: #f0fdf4;
        display: flex; align-items: center; justify-content: center;
        color: #6b7280; transition: all .15s; cursor: pointer;
        font-size: 1rem;
    }
    .fullscreen-btn:hover { border-color: #1a7a5e; color: #1a7a5e; background: #f0fdf4; }

    /* ── Hamburger ── */
    .button-menu-mobile {
        background: transparent; border: none;
        color: #4b5563; font-size: 1.25rem;
        padding: 0 12px; height: 62px;
        transition: color .15s;
    }
    .button-menu-mobile:hover { color: #0f4c35; }
</style>

<div class="navbar-custom">
    <div class="container-fluid d-flex align-items-center">

        {{-- Logo --}}
        <div class="logo-box">
            <a href="{{ route('dashboard') }}" class="logo logo-dark text-center">
                <span class="logo-sm">
                    <img src="{{ asset('logo/logo.png') }}" alt="" height="22">
                </span>
                <span class="logo-lg">
                    <img src="{{ asset('logo/logo.png') }}" alt="" height="60">
                </span>
            </a>
            <a href="{{ route('dashboard') }}" class="logo logo-light text-center">
                <span class="logo-sm">
                    <img src="{{ asset('logo/logo.png') }}" alt="" height="22">
                </span>
                <span class="logo-lg">
                    <img src="{{ asset('logo/logo.png') }}" alt="" height="60">
                </span>
            </a>
        </div>

        {{-- ── Left: hamburger + greeting ── --}}
        <ul class="list-unstyled topnav-menu topnav-menu-left m-0 d-flex align-items-center">
            <li>
                <button class="button-menu-mobile waves-effect waves-light">
                    <i class="fe-menu"></i>
                </button>
            </li>
            <li class="d-none d-md-flex align-items-center ms-1">
                <div class="hdr-greeting">
                    <span class="greet-text">{{ $greeting }},</span>
                    <span class="greet-name">{{ $adminData->name }}</span>
                </div>
            </li>
        </ul>

        {{-- ── Spacer ── --}}
        <div class="flex-grow-1"></div>

        {{-- ── Date chip (desktop) ── --}}
        <div class="d-none d-lg-flex me-3">
            <span class="hdr-date-chip">
                <i class="bi bi-calendar2-check-fill"></i>
                {{ now()->format('l, d M Y') }}
            </span>
        </div>

        {{-- ── Right nav ── --}}
        <ul class="list-unstyled topnav-menu d-flex align-items-center mb-0">

            {{-- Fullscreen --}}
            <li class="d-none d-lg-flex align-items-center me-1">
                <a href="#" data-toggle="fullscreen" class="nav-link waves-effect waves-light p-0" title="Fullscreen">
                    <div class="fullscreen-btn">
                        <i class="bi bi-fullscreen"></i>
                    </div>
                </a>
            </li>

            {{-- Profile dropdown --}}
            <li class="dropdown notification-list topbar-dropdown">
                <a class="nav-link nav-user dropdown-toggle waves-effect waves-light"
                   data-bs-toggle="dropdown" href="#" role="button"
                   aria-haspopup="false" aria-expanded="false">
                    <div class="avatar-wrap">
                        <img src="{{ !empty($adminData->photo) ? url('upload/admin_image/'.$adminData->photo) : url('upload/no_image.jpg') }}"
                             alt="{{ $adminData->name }}">
                    </div>
                    <div class="user-info d-none d-sm-block">
                        <div class="u-name">{{ $adminData->name }}</div>
                        <div class="u-role">Administrator</div>
                    </div>
                    <i class="mdi mdi-chevron-down d-none d-sm-inline"></i>
                </a>

                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                    <div class="dropdown-header noti-title">
                        <h6>{{ $adminData->name }}</h6>
                        <small>{{ $adminData->email }}</small>
                    </div>

                    <a href="{{ route('admin.profile') }}" class="dropdown-item notify-item">
                        <i class="bi bi-person-fill"></i>
                        <span>My Profile</span>
                    </a>

                    <a href="{{ route('admin.password.change') }}" class="dropdown-item notify-item">
                        <i class="bi bi-shield-lock-fill"></i>
                        <span>Change Password</span>
                    </a>

                    <div class="dropdown-divider"></div>

                    <a href="{{ route('admin.destroy') }}" class="dropdown-item notify-item text-danger">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Sign Out</span>
                    </a>
                </div>
            </li>

        </ul>

    </div>
</div>