<header class="topbar d-flex justify-content-between align-items-center">
    <div class="d-flex align-items-center">
        @yield('breadcrumbs')
    </div>
    
    <div class="d-flex align-items-center">
        <div class="text-secondary me-4" style="font-size: 0.9rem;">
            <i class="bi bi-clock me-1"></i> <span id="current-time">--:--:--</span>
        </div>
        
        <div class="position-relative me-4">
            <i class="bi bi-bell fs-5 text-secondary"></i>
        </div>

        <!-- ADDED: Bootstrap Dropdown Wrapper -->
        <div class="dropdown">
            <!-- ADDED: dropdown-toggle class, data-bs-toggle attribute, and cursor style -->
            <div class="d-flex align-items-center dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="cursor: pointer;">
                <div class="rounded-circle bg-light d-flex justify-content-center align-items-center me-2 border text-dark fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem;">
                    {{ substr(auth()->user()->name ?? 'Admin', 0, 1) }}
                </div>
                <span class="fw-bold" style="font-size: 0.9rem;">{{ auth()->user()->name ?? 'Admin User' }}</span>
            </div>
            
            <!-- ADDED: Dropdown Menu -->
            <ul class="dropdown-menu dropdown-menu-end shadow border-light-subtle mt-2">
                <!-- Profile Link -->
                <li>
                    <a class="dropdown-item d-flex align-items-center py-2" href="{{ url('/profile') }}">
                        <i class="bi bi-person text-secondary me-2 fs-5"></i> My Profile
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <!-- Logout Form -->
                <li>
                    <form action="{{ route('logout') }}" method="POST" class="m-0 p-0">
                        @csrf
                        <button type="submit" class="dropdown-item d-flex align-items-center py-2 text-danger">
                            <i class="bi bi-box-arrow-right me-2 fs-5"></i> Logout
                        </button>
                    </form>
                </li>
            </ul>
        </div>
        
    </div>
</header>