<!-- Navbar Start -->
<div class="navbar-area style-one bg-transparent position-relative z-2 mt-0" id="navbar">
    <div class="container-fluid">
        <div class="navbar-wrapper d-flex align-items-center">
            <a href="{{ route('home') }}" class="navbar-brand d-flex align-items-center gap-2">
                <div class="logo-wrapper">
                    <img src="{{ asset('user/assets/img/service_logo.png') }}" width="70" alt="Logo" class="logo-light">
                    <img src="{{ asset('user/assets/img/service_logo.png') }}" width="70" alt="Logo" class="logo-dark">
                </div>
                <span class="brand-text fw-bold text-dark" style="font-size: 1.5rem; letter-spacing: -0.5px;">Playerz
                    Sports Park</span>
            </a>
            <div class="menu-area ms-auto">
                <div class="overlay"></div>
                <nav class="menu">
                    <div class="menu-mobile-header">
                        <button type="button" class="menu-mobile-arrow bg-transparent border-0"><i
                                class="ri-arrow-left-s-line"></i></button>
                        <div class="menu-mobile-title"></div>
                        <button type="button" class="menu-mobile-close bg-transparent border-0"><i
                                class="ri-close-line"></i></button>
                    </div>
                    <ul class="menu-section p-0 mb-0 lh-1">
                        <li>
                            <a href="{{ route('home') }}"
                                class="{{ request()->routeIs('home') ? 'active' : '' }}">Home</a>
                        </li>

                        {{-- <li class="menu-item-has-children">
                            <a href="javascript:void(0)">Blog<i class="ri-add-line"></i></a>
                            <ul class="menu-subs menu-column-1">
                                <li class="menu-item-has-children"><a href="javascript:void(0)">Blog Layout<i
                                            class="ri-add-line"></i></a>
                                    <ul class="menu-subs menu-column-1">
                                        <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                        <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                        <li><a href="blog-grid.html">Blog Grid</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="javascript:void(0)">Blog Details
                                        Layout<i class="ri-add-line"></i></a>
                                    <ul class="menu-subs menu-column-1">
                                        <li><a href="blog-details-left-sidebar.html">Blog Details Left Sidebar</a>
                                        </li>
                                        <li><a href="blog-details-right-sidebar.html">Blog Details Right
                                                Sidebar</a></li>
                                        <li><a href="blog-details-no-sidebar.html">Blog Details No Sidebar</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="javascript:void(0)">Others<i
                                            class="ri-add-line"></i></a>
                                    <ul class="menu-subs menu-column-1">
                                        <li><a href="posts-by-author.html">Posts By Author</a></li>
                                        <li><a href="posts-by-date.html">Posts By Date</a></li>
                                        <li><a href="posts-by-category.html">Posts By Category</a></li>
                                        <li><a href="posts-by-tag.html">Posts By Tag</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li> --}}

                        <li class="{{ request()->routeIs('contact') ? 'active' : '' }}">
                            <a href="contact.html">Contact</a>
                        </li>

                        @auth
                            <li
                                class="menu-item-has-children {{ request()->routeIs('my-account.*', 'my-booking.*') ? 'active' : '' }}">
                                <a href="javascript:void(0)">
                                    <i class="ri-user-line"></i> {{ Auth::user()->name ?? 'Profile' }} <i
                                        class="ri-arrow-down-s-line"></i>
                                </a>
                                <ul class="menu-subs menu-column-1">
                                    <li class="{{ request()->routeIs('my-account.show') ? 'active' : '' }}">
                                        <a href="{{ route('my-account.show') }}">My Profile</a>
                                    </li>
                                    <li class="{{ request()->routeIs('my-booking.show') ? 'active' : '' }}">
                                        <a href="{{ route('my-booking.show') }}">My Bookings</a>
                                    </li>
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                            {{ __('Logout') }}
                                        </a>
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @else
                            <li
                                class="menu-item-has-children {{ request()->routeIs('login', 'register') ? 'active' : '' }}">
                                <a href="javascript:void(0)">
                                    <span>
                                        <i class="ri-login-box-line"></i> Login / Register
                                    </span>
                                    <span>
                                        <i class="ri-arrow-down-s-line"></i>
                                    </span>
                                </a>
                                <ul class="menu-subs menu-column-1">
                                    <li class="{{ request()->routeIs('login') ? 'active' : '' }}">
                                        <a href="{{ route('login') }}">Login</a>
                                    </li>
                                    <li class="{{ request()->routeIs('register') ? 'active' : '' }}">
                                        <a href="{{ route('register') }}">Register</a>
                                    </li>
                                </ul>
                            </li>
                        @endauth
                    </ul>
                </nav>
            </div>
            <div class="other-options d-flex flex-wrap align-items-center justify-content-end">
                {{-- <div class="option-item">
                    <button type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar-area"
                        aria-controls="sidebar-area"
                        class="sidebar-btn d-flex flex-column align-items-center justify-content-center rounded-circle">
                        <img src="{{ asset('user/assets/img/icons/sidebar-btn.svg') }}" alt="Icon">
                    </button>
                </div> --}}
                <div class="option-item d-lg-none">
                    <button type="button" class="menu-mobile-trigger">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Navbar End -->