﻿@* Enterprise Top Navigation Bar *@
<nav class="enterprise-navbar">
    <div class="enterprise-navbar-container">
        <!-- Left Section: Logo & Menu Toggle -->
        <div class="enterprise-navbar-left">
            <button class="enterprise-navbar-toggle" id="navbarMobileToggle" aria-label="Toggle mobile menu">
                <i class="fas fa-bars"></i>
            </button>
            <a href="/Home" class="enterprise-navbar-brand d-none d-lg-flex">
                <span class="enterprise-navbar-brand-text">SHIPS WMS</span>
            </a>
        </div>

        <!-- Center Section: Breadcrumb/Title (optional) -->
        <div class="enterprise-navbar-center d-none d-md-flex">
            @* Breadcrumb or page context can go here *@
        </div>

        <!-- Right Section: Icons & User Menu -->
        <div class="enterprise-navbar-right">
            <!-- Search Button (Optional) -->
            <div class="enterprise-navbar-item">
                <button class="enterprise-navbar-icon-btn" title="Search" aria-label="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>

            <!-- Notifications -->
            <div class="enterprise-navbar-item dropdown">
                <button class="enterprise-navbar-icon-btn" id="notificationBell" data-bs-toggle="dropdown" aria-label="Notifications" title="Notifications">
                    <i class="fas fa-bell"></i>
                    <span class="enterprise-notification-badge" id="notificationBadge">3</span>
                </button>

                <div class="enterprise-dropdown-menu" aria-labelledby="notificationBell">
                    <div class="enterprise-dropdown-header">
                        <h6>Notifications</h6>
                        <span class="enterprise-dropdown-badge" id="notificationCount">3</span>
                    </div>
                    <div class="enterprise-dropdown-divider"></div>

                    <div class="enterprise-notification-list">
                        <a href="#" class="enterprise-notification-item">
                            <div class="enterprise-notification-icon bg-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="enterprise-notification-content">
                                <div class="enterprise-notification-title">Low Stock Alert</div>
                                <div class="enterprise-notification-text">Hose Reel Assembly stock is below minimum</div>
                                <small class="enterprise-notification-time">2 minutes ago</small>
                            </div>
                        </a>

                        <a href="#" class="enterprise-notification-item">
                            <div class="enterprise-notification-icon bg-info">
                                <i class="fas fa-truck"></i>
                            </div>
                            <div class="enterprise-notification-content">
                                <div class="enterprise-notification-title">Inbound Shipment</div>
                                <div class="enterprise-notification-text">New shipment TR-001 received and pending putaway</div>
                                <small class="enterprise-notification-time">1 hour ago</small>
                            </div>
                        </a>

                        <a href="#" class="enterprise-notification-item">
                            <div class="enterprise-notification-icon bg-success">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="enterprise-notification-content">
                                <div class="enterprise-notification-title">Approval Needed</div>
                                <div class="enterprise-notification-text">Material request MR-004 waiting for your approval</div>
                                <small class="enterprise-notification-time">4 hours ago</small>
                            </div>
                        </a>
                    </div>

                    <div class="enterprise-dropdown-divider"></div>
                    <a href="#" class="enterprise-dropdown-footer">View All Notifications</a>
                </div>
            </div>

            <!-- Messages (Optional) -->
            <div class="enterprise-navbar-item dropdown d-none d-sm-flex">
                <button class="enterprise-navbar-icon-btn" id="messagesBell" data-bs-toggle="dropdown" aria-label="Messages" title="Messages">
                    <i class="fas fa-envelope"></i>
                    <span class="enterprise-notification-badge" style="display:none;">2</span>
                </button>

                <div class="enterprise-dropdown-menu" aria-labelledby="messagesBell">
                    <div class="enterprise-dropdown-header">
                        <h6>Messages</h6>
                    </div>
                    <div class="enterprise-dropdown-divider"></div>
                    <div class="enterprise-dropdown-footer">No new messages</div>
                </div>
            </div>

            <!-- User Profile Menu -->
            <div class="enterprise-navbar-item dropdown ms-3">
                <button class="enterprise-user-menu-btn" id="userMenuBtn" data-bs-toggle="dropdown" aria-label="User menu">
                    <img src="https://ui-avatars.com/api/?name=Admin+User&background=0052cc&color=fff&size=32" alt="User Avatar" class="enterprise-user-avatar">
                    <span class="enterprise-user-menu-text d-none d-sm-inline">Admin User</span>
                    <i class="fas fa-chevron-down ms-1 d-none d-sm-inline"></i>
                </button>

                <div class="enterprise-dropdown-menu" aria-labelledby="userMenuBtn">
                    <div class="enterprise-dropdown-header d-flex align-items-center">
                        <img src="https://ui-avatars.com/api/?name=Admin+User&background=0052cc&color=fff&size=40" alt="User Avatar" class="enterprise-user-avatar-large me-3">
                        <div>
                            <div class="enterprise-user-name">Admin User</div>
                            <small class="enterprise-user-email">admin@ships-wms.local</small>
                        </div>
                    </div>
                    <div class="enterprise-dropdown-divider"></div>

                    <a href="#" class="enterprise-dropdown-item">
                        <i class="fas fa-user-circle me-2"></i> My Profile
                    </a>
                    <a href="#" class="enterprise-dropdown-item">
                        <i class="fas fa-lock me-2"></i> Change Password
                    </a>
                    <a href="#" class="enterprise-dropdown-item">
                        <i class="fas fa-sliders-h me-2"></i> Settings
                    </a>

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

                    <a href="/Home/Privacy" class="enterprise-dropdown-item text-danger">
                        <i class="fas fa-sign-out-alt me-2"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
