<nav class="sb-topnav navbar navbar-expand navbar-dark">
    <!-- Navbar Brand-->
    <a class="navbar-brand ps-3 d-flex align-items-center" href="dashboard.php">
        <i class="fas fa-store me-2"></i>
        <span class="brand-text-truncate">Awesome Mall</span>
    </a>

    <!-- Navbar Search (Hidden on Mobile) -->
    <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0" method="post"
        action="search-orders.php">
        <div class="input-group">
            <input class="form-control" type="text" name="searchinputdata" placeholder="Enter Name or Order No."
                aria-label="Search for..." aria-describedby="btnNavbarSearch" required />
            <button class="btn btn-primary" id="btnNavbarSearch" type="submit" name="search"><i
                    class="fas fa-search"></i></button>
        </div>
    </form>

    <!-- Right Side Actions -->
    <div class="d-flex align-items-center ms-auto ms-md-0 me-3">
        <!-- View Website Button -->
        <a href="../index.php" class="btn btn-outline-light btn-sm me-2" target="_blank" title="View Public Website">
            <i class="fas fa-external-link-alt"></i>
            <span class="d-none d-lg-inline ms-1">View Website</span>
        </a>

        <!-- Notifications -->
        <div class="dropdown me-2">
            <a class="nav-link dropdown-toggle position-relative px-2" id="notificationDropdown" href="#" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-bell fa-fw"></i>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                    id="notification-badge" style="display: none; padding: 0.25em 0.4em;">0</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0" aria-labelledby="notificationDropdown"
                style="width: 320px; max-width: 90vw;">
                <li class="dropdown-header"><strong>Notifications</strong></li>
                <li>
                    <hr class="dropdown-divider" />
                </li>
                <div id="notification-list" style="max-height: 400px; overflow-y: auto;">
                    <li class="text-center py-3 text-muted">
                        <i class="fas fa-spinner fa-spin"></i> Loading...
                    </li>
                </div>
            </ul>
        </div>

        <!-- User Menu -->
        <div class="dropdown me-2">
            <a class="nav-link dropdown-toggle px-2" id="navbarDropdown" href="#" role="button"
                data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="settings.php"><i class="fas fa-cog me-2"></i>Settings</a></li>
                <li><a class="dropdown-item" href="change-password.php"><i class="fas fa-key me-2"></i>Change
                        Password</a></li>
                <li>
                    <hr class="dropdown-divider" />
                </li>
                <li><a class="dropdown-item text-danger" href="logout.php"><i
                            class="fas fa-sign-out-alt me-2"></i>Logout</a></li>
            </ul>
        </div>

        <!-- Sidebar Toggle (Now on far right for mobile consistency) -->
        <button class="btn btn-link btn-sm order-last" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
    </div>

    <!-- Notification Script -->
    <script>
        // Load notifications
        function loadNotifications() {
            fetch('api/notifications.php')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const badge = document.getElementById('notification-badge');
                        const list = document.getElementById('notification-list');

                        if (data.count > 0) {
                            badge.textContent = data.count;
                            badge.style.display = 'inline';

                            let html = '';
                            data.notifications.forEach(notif => {
                                html += `
                                    <li>
                                        <a class="dropdown-item py-3" href="${notif.link}">
                                            <div class="d-flex align-items-start">
                                                <div class="me-3">
                                                    <i class="fas ${notif.icon} text-${notif.color}"></i>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <strong>${notif.title}</strong>
                                                    <p class="mb-0 small text-muted">${notif.message}</p>
                                                    <small class="text-muted">${notif.time}</small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider m-0" /></li>
                                `;
                            });
                            list.innerHTML = html;
                        } else {
                            badge.style.display = 'none';
                            list.innerHTML = `
                                <li class="text-center py-3 text-muted">
                                    <i class="fas fa-check-circle"></i><br>
                                    No new notifications
                                </li>
                            `;
                        }
                    }
                })
                .catch(error => console.error('Error loading notifications:', error));
        }

        // Load on page load
        document.addEventListener('DOMContentLoaded', loadNotifications);

        // Refresh every 30 seconds
        setInterval(loadNotifications, 30000);
    </script>
</nav>