<nav class="navbar navbar-expand-lg ">

    <style>

        body{

            background: #302b631a;

        }

        .navbar{

            height: 70px;

            background-color: #302B63;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);

        }

        .changed-time{

            color: #ffffff !important;

            font-weight: 500;

            margin: 0px;

            margin-right: 60px

        }

        button#sidebarCollapse{

            background: transparent !important;

            border: unset;

            color: #ffffff !important;

            padding-left: 0px

        }

        button#sidebarCollapse i{

            font-size: 18px;

            line-height: 32px;

        }

        ul.nav.navbar-nav.ms-auto{

            align-items: center;

        }

        a#nav2 span , a#nav2 i{

            color: #fff;

        }

        div#nav-dropdown-menu{

            box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);

            border: none;

            width: 200px;

            left: -90px;

        }

        div#nav-dropdown-menu li a{

            padding: 10px 20px;

            font-weight: 500;

            line-height: 1.2;

        }

        div#nav-dropdown-menu li a:hover{

            background: #302b631a;

        }

        .dropdown-divider{

            border-top: 1px solid #f9f9f9 !important; 

        }

    </style>

    <button type="button" id="sidebarCollapse" class="btn btn-light">

        <i class="fas fa-bars"></i><span></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="nav navbar-nav ms-auto">

            <div id="datetime" class="current-datetime"></div>

            <li class="nav-item dropdown">

                <div class="nav-dropdown">

                    @if (Auth::check())

                    <a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false">

                        @if (isset(Auth::user()->image) && !empty(Auth::user()->image))

                            <img src="{{ asset(Auth::user()->image) }}" alt="Avatar" class="avatar-image" style="width: 50px;height: 50px;border-radius: 50%;background: #eee;">

                        @else

                            <i class="fas fa-user"></i>

                        @endif

                        <span>{{ Auth::user()->name }}</span>

                        <i style="font-size: .8em;" class="fas fa-caret-down"></i>

                        </a>

                        <div class="dropdown-menu dropdown-menu-end nav-link-menu" id="nav-dropdown-menu">

                            <ul class="nav-list">

                                <li><a href="{{ route('admin.profile') }}" class="dropdown-item"><i

                                            class="fas fa-address-card"></i> Profile</a>

                                </li>

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

                                <li>

                                    <a href="#" type="button" class="btn btn-primary dropdown-item text-danger"

                                        data-bs-toggle="modal" data-bs-target="#exampleModal">

                                        <i class="fas fa-sign-out-alt"></i> Logout

                                    </a>

                                    {{-- <a href="#" data-target=".bs-example-modal-sm" class="dropdown-item" data-toggle="modal">

                                    <i class="fas fa-sign-out-alt"></i> Logout

                                </a> --}}

                                </li>



                                {{-- <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">

                                    @csrf

                                </form> --}}

                            </ul>

                        </div>

                    @endif

                </div>

            </li>

        </ul>

    </div>

</nav>



<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Logout</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                Do you really want to logout?

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>

                <button type="button" class="btn btn-primary" id="logout-button">Logout</button>

            </div>

        </div>

    </div>

</div>



<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">

    @csrf

</form>

