<nav class="navbar">
    <div class="container-fluid px-0 align-items-stretch">
        <!-- Logo Area -->
        <div class="navbar-header">
            <a href="{{ route('admin.dashboard') }}" class="navbar-brand">
                <img height="50px" class="logo-expand" alt="" src="{{ asset('backend/assets/img/kyamclogo.png') }}">
                <img height="50px" class="logo-collapse" alt="" src="{{ asset('backend/assets/img/kyamclogo.png') }}">
                <!-- <p>BonVue</p> -->
            </a>
        </div>
        <!-- /.navbar-header -->
        <!-- Left Menu & Sidebar Toggle -->
        <ul class="nav navbar-nav">
            <li class="sidebar-toggle dropdown"><a href="javascript:void(0)" class="ripple"><i
                        class="feather feather-menu list-icon fs-20"></i></a>
            </li>
        </ul>
        <!-- /.navbar-left -->
        <!-- Search Form -->

        <!-- /.navbar-search -->
        <div class="spacer"></div>
        <!-- Right Menu -->

        <!-- /.navbar-right -->
        <!-- User Image with Dropdown -->
        <ul class="nav navbar-nav">
            <li class="dropdown"><a href="javascript:void(0);" class="dropdown-toggle dropdown-toggle-user ripple"
                    data-toggle="dropdown"><span class="avatar thumb-xs2">@php
                        $user = auth()->user();
                        $userImage = ($user && $user->user_image && file_exists(public_path('uploads/users/' . $user->user_image)))
                            ? asset('uploads/users/' . $user->user_image)
                            : asset('assets/demo/users/user1.jpg');
                    @endphp

                        <img src="{{ $userImage }}" class="rounded-circle" alt="{{ $user->first_name ?? 'User' }}"> <i
                            class="feather feather-chevron-down list-icon"></i></span></a>
                <div
                    class="dropdown-menu dropdown-left dropdown-card dropdown-card-dark dropdown-card-profile animated flipInY">
                    <div class="card">
                        <header class="card-header d-flex mb-0">

                            <!-- Profile Edit Button -->
                            <a href="javascript:void(0);" onclick="editMyProfile()" class="col-md-6 text-center"
                                title="Edit My Profile">
                                <i class="feather feather-user align-middle"></i>
                            </a>

                            <!-- Logout Button -->
                            <a href="javascript:void(0);" class="col-md-6 text-center" title="Logout"
                                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                <i class="feather feather-power align-middle"></i>
                            </a>

                            <!-- The hidden form -->
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </header>

                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.dropdown-card-profile -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-nav -->
    </div>
    <!-- /.container-fluid -->
</nav>