<!-- Topbar Start -->
<div class="navbar-custom">
    <ul class="list-unstyled topnav-menu float-right mb-0">



        <li class="dropdown notification-list">
            <a class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                <img src="{{ asset('/images/user-icon.png') }}" alt="user-image" class="rounded-circle">
                <span class="pro-user-name ml-1">
                    {{ Auth::user()->name ?? 'User' }}  <i class="mdi mdi-chevron-down"></i> 
                </span>
            </a>
            <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                <!-- item-->
                <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                </div>

                <!-- item-->
                <a href="{{ route('profile.edit') }}" class="dropdown-item notify-item">
                    <i class="fe-user"></i>
                    <span>Edit Profil</span>
                </a>

                <!-- item-->
                {{-- <a href="javascript:void(0);" class="dropdown-item notify-item">
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                </a> --}}

                <!-- item-->
                <a href="javascript:void(0);" class="dropdown-item notify-item" onclick="toggleFullScreen()">
                    <i class="fe-maximize"></i>
                    <span>Full Screen</span>
                </a>

                <script>
                    function toggleFullScreen() {
                        if (!document.fullscreenElement) {
                            document.documentElement.requestFullscreen();
                        } else {
                            if (document.exitFullscreen) {
                                document.exitFullscreen();
                            }
                        }
                    }
                </script>

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

                <!-- item-->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="dropdown-item notify-item" style="border: none; background: none; width: 100%; text-align: left;">
                        <i class="fe-log-out"></i>
                        <span>Logout</span>
                    </button>
                </form>

            </div>
        </li>
    </ul>

    <!-- LOGO -->
    <div class="logo-box">
        <a href="/" class="logo text-center">
            <span class="logo-lg">
                <img src="{{ asset('images/logo5.png') }}" alt="" height="75" style="margin-top: 10px;">
                {{-- <span class="logo-lg-text-light">UPTD Laboratorium Lingkungan Pada Dinas Lingkungan Hidup Kota Probolinggo</span> --}}
            </span>
            <span class="logo-sm">
                <span class="logo-sm-text-dark"></span>
                <img src="{{ asset('images/logo4.png') }}" alt="" height="28">
            </span>
        </a>
    </div>

    <ul class="list-unstyled topnav-menu topnav-menu-left m-0">
        <li>
            <button class="button-menu-mobile waves-effect waves-light" title="Toggle menu">
                <i class="fe-menu"></i>
            </button>
        </li>



    </ul>
</div>
<!-- end Topbar --> 