<a href="{{ route('userdash') }}" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
    <h1 class="m-0 text-primary">
        <img src="{{ asset('logo/baru/HC.png') }}" alt="Hospital Icon" class="me-2" style="width:60px; height:auto;">
        HeartChoice
    </h1>
</a>

<button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarCollapse">
    <div class="navbar-nav ms-auto p-4 p-lg-0">
        <a href="{{ route('userdash') }}" class="nav-item nav-link {{ request()->routeIs('userdash') ? 'active' : '' }}">Home</a>
        <a href="{{ route('userabout') }}" class="nav-item nav-link {{ request()->routeIs('userabout') ? 'active' : '' }}">About</a>
        <a href="{{ route('userfeature') }}" class="nav-item nav-link {{ request()->routeIs('userfeature') ? 'active' : '' }}">Features</a>
        <a href="{{ route('userdata') }}" class="nav-item nav-link {{ request()->routeIs('userdata') ? 'active' : '' }}">Data</a>
        <a href="{{ route('userresult') }}" class="nav-item nav-link {{ request()->routeIs('userresult') ? 'active' : '' }}">Result</a>

        <a class="nav-link dropdown-toggle d-flex justify-content justify-content-lg-start align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="ps-2 fw-semibold text-dark">{{ Auth::user()->name }}</span>
        </a>

        <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="navbarDropdown">
            <li class="dropdown-header text-center">
                <h6 class="mb-0">{{ Auth::user()->name }}</h6>
                {{-- <span class="text-muted">{{ Auth::user()->role->name ?? 'User' }}</span><br> --}}
                <small class="text-muted">{{ Auth::user()->email }}</small>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
                    <a class="dropdown-item d-flex align-items-center" href="{{ route('user.profile') }}">
                        <i class="bi bi-person"></i><span>My Profile</span>
                    </a>
                </li>
            <li>
                <form id="logoutForm" method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="button" class="dropdown-item d-flex align-items-center gap-2 text-danger" onclick="confirmLogout()">
                        <i class="bi bi-box-arrow-right" style="font-size: 1.2rem;"></i>
                        <span>Sign Out</span>
                    </button>
                </form>
            </li>
        </ul>
    </div>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Confirmation Dialog Script -->
<script>
    function confirmLogout() {
        Swal.fire({
            title: 'Apakah Anda yakin?',
            text: "Anda akan keluar dari akun ini!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, keluar',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('logoutForm').submit();
            }
        });
    }
</script>
