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

    <!-- Judul Aplikasi di Navigasi Atas -->
    <h5 class="mb-0 font-weight-bold d-none d-sm-block ml-3" style="color: #7bb31a;">Sistem Prediksi LPG (PeGas) - Admin</h5>

    <ul class="navbar-nav ml-auto align-items-center">
        <!-- Jam dan Tanggal Realtime (Bahasa Indonesia) -->
        <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 Tanggal...
                </div>
            </div>
        </li>

        <!-- Menu Profil Admin -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="adminDropdown" 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-shield fa-lg" style="color: #7bb31a;"></i>
            </a>

            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in">
                <button class="dropdown-item" onclick="openPasswordModal()">
                    <i class="fas fa-key fa-sm fa-fw mr-2 text-gray-400"></i> Ubah Password
                </button>
                <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> Keluar Aplikasi
                </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>

<!-- Modal Ubah Password -->
<div class="modal fade" id="passwordModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Ubah Password</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form id="adminPasswordForm" method="POST" action="{{ route('admin.profile.password') }}">
                @csrf
                <div class="modal-body">
                    <input id="admin_password" type="password" name="password" placeholder="Password Baru"
                        class="form-control mb-2" required>

                    <button type="button" onclick="toggleAdminPassword()" class="btn btn-sm btn-light mb-3">
                        👁 Tampilkan / Sembunyikan
                    </button>

                    <div class="text-xs">
                        <p id="admin-length" class="text-danger">✖ Minimal 8 karakter</p>
                        <p id="admin-uppercase" class="text-danger">✖ Minimal 1 huruf kapital</p>
                        <p id="admin-number" class="text-danger">✖ Minimal 1 angka</p>
                        <p id="admin-symbol" class="text-danger">✖ Minimal 1 simbol</p>
                    </div>

                    <input id="admin_password_confirmation" type="password" name="password_confirmation"
                        placeholder="Konfirmasi Password" class="form-control mb-3" required>

                    <div class="text-xs">
                        <p id="admin-match" class="text-danger">✖ Password tidak sama</p>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" style="background-color: #7bb31a; border-color: #7bb31a;">Update Password</button>
                </div>
            </form>

        </div>
    </div>
</div>