<!-- Top Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom border-secondary scrollStickyNav">
    <div class="container-fluid">
        <!-- Left: Menu Toggle (for mobile/tablet) -->
        <button class="btn btn-link text-dark d-lg-none me-2" id="mobileMenuToggle">
            <i class="fas fa-bars fs-4"></i>
        </button>

        <!-- Brand -->
        <a class="navbar-brand d-flex align-items-center gap-3" href="#">
            <i class="fas fa-bolt text-primary me-2"></i>
            <span class="fw-bold">Daphas Dictionary Dashboard</span>
            <button class="btn btn-primary rounded-circle p-2" style="width: 40px; height: 40px;" id="sidebarToggle">
                <i class="fas fa-chevron-left"></i>
            </button>
        </a>

        <!-- Right Side Content -->
        <div class="d-flex align-items-center ms-auto">
            <!-- Search Bar (Hidden on mobile, visible on medium+) -->
            <div class="input-group d-none d-md-flex me-3" style="width: 55vw;">
                <input type="text" class="form-control bg-light text-dark"
                    placeholder="Search transactions, users..."
                    style="border-color: #6c757d;">
                <span class="input-group-text bg-light border border-2 text-dark">
                    <i class="fas fa-search"></i>
                </span>
            </div> 

            <!-- Notifications -->
            <div class="dropdown me-3">
                <button class="btn btn-link text-dark position-relative"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="fas fa-bell fs-5"></i>
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        5
                        <span class="visually-hidden">unread notifications</span>
                    </span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end p-2" style="width: 300px;">
                    <li class="dropdown-header fw-bold">Notifications</li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center py-2" href="#">
                            <div class="bg-success rounded-circle p-2 me-3">
                                <i class="fas fa-check text-dark"></i>
                            </div>
                            <div>
                                <div class="fw-bold">Payment Received</div>
                                <small class="text-muted">$250 from John Doe</small>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center py-2" href="#">
                            <div class="bg-warning rounded-circle p-2 me-3">
                                <i class="fas fa-exclamation text-dark"></i>
                            </div>
                            <div>
                                <div class="fw-bold">Invoice Due</div>
                                <small class="text-muted">Invoice #INV-0012</small>
                            </div>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li class="text-center">
                        <a href="#" class="text-decoration-none small">View all notifications</a>
                    </li>
                </ul>
            </div>

            <!-- User Profile -->
            <div class="dropdown">
                <button class="btn btn-link text-dark text-decoration-none d-flex align-items-center"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 40px; height: 40px;">
                        <i class="fas fa-user text-dark"></i>
                    </div>
                    <div class="ms-2 d-none d-md-block text-start">
                        <div class="fw-bold small">{{ Auth('username') }}</div>
                    </div>
                    <i class="fas fa-chevron-down ms-2"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="#">
                            <i class="fas fa-user-circle me-2"></i>
                            <span>My Profile</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="#">
                            <i class="fas fa-cog me-2"></i>
                            <span>Account Settings</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center" href="#">
                            <i class="fas fa-wallet me-2"></i>
                            <span>Billing</span>
                        </a>
                    </li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center text-danger" href="/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!-- Mobile Search Button (Visible only on small screens) -->
<div class="d-flex d-md-none justify-content-center p-2 bg-light border-bottom border-secondary">
    <div class="input-group" style="width: 95%;">
        <span class="input-group-text bg-light border-end-0 text-dark">
            <i class="fas fa-search"></i>
        </span>
        <input type="text" class="form-control bg-light text-dark border-start-0"
            placeholder="Search..."
            style="border-color: #6c757d;">
    </div>
</div>

<!-- Mobile Quick Actions (Visible only on small screens) -->
<div class="d-flex d-lg-none justify-content-around p-2 bg-light border-bottom border-secondary">
    <button class="btn btn-outline-light btn-sm">
        <i class="fas fa-plus me-1"></i> Invoice
    </button>
    <button class="btn btn-primary btn-sm">
        <i class="fas fa-paper-plane me-1"></i> Send
    </button>
</div>