<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 shadow">
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3" style="z-index: 1070 !important;">
        <i class="fa fa-bars text-primary" style="font-size: 1.2rem;"></i>
    </button>

    <h5 class="mb-0 text-primary font-weight-bold d-none d-sm-block ml-3">Sistem Prediksi Gas (PeGas)</h5>

    <ul class="navbar-nav ml-auto align-items-center">
        <li class="nav-item px-3 d-none d-md-block border-right mr-2">
            <div class="text-right">
                <div id="navClock" class="font-weight-bold text-dark mb-0" style="font-size: 1rem; line-height: 1.1;">
                    00:00:00
                </div>
                <div id="navDate" class="text-gray-500 small" style="font-size: 0.7rem;">
                    Memuat...
                </div>
            </div>
        </li>

        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
                <span class="mr-2 d-none d-lg-inline text-gray-600 small font-weight-bold">{{ auth()->user()->name }}</span>
                <i class="fas fa-user-circle fa-lg text-primary"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in">
                <a class="dropdown-item" href="{{ route('user.profile.index') }}">
                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile
                </a>
                <div class="dropdown-divider"></div>
                <button class="dropdown-item text-danger" onclick="confirmLogout()">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-danger"></i> Logout
                </button>
                <form id="logoutForm" method="POST" action="{{ route('logout') }}" class="d-none">@csrf</form>
            </div>
        </li>
    </ul>

    <script>
        function updateClock() {
            const now = new Date();
            const h = String(now.getHours()).padStart(2, '0');
            const m = String(now.getMinutes()).padStart(2, '0');
            const s = String(now.getSeconds()).padStart(2, '0');
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            
            document.getElementById('navClock').innerText = `${h}:${m}:${s}`;
            document.getElementById('navDate').innerText = now.toLocaleDateString('id-ID', options);
        }
        setInterval(updateClock, 1000);
        updateClock();
    </script>
</nav>