{{-- State Left Navigation - Phoenix v1.22.0 Compatible --}}

<!-- Vertical Navbar -->
<nav class="navbar navbar-vertical navbar-expand-lg">
    <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
        <div class="navbar-vertical-content">
            <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                <!-- Dashboard Section -->
                <li class="nav-item">
                    <div class="nav-item-wrapper">
                        <a class="nav-link label-1 {{ request()->routeIs('state.dashboard') ? 'active' : '' }}"
                           href="{{ route('state.dashboard') }}">
                            <div class="d-flex align-items-center">
                                <span class="nav-link-icon"><span data-feather="pie-chart"></span></span>
                                <span class="nav-link-text">Dashboard</span>
                            </div>
                        </a>
                    </div>
                </li>

                <!-- Management Section -->
                <li class="nav-item">
                    <p class="navbar-vertical-label">Management</p>
                    <hr class="navbar-vertical-line" />
                    <!-- Users & Members -->

                  
                  
                    <!-- Events -->
                    <div class="nav-item-wrapper">
                        <a class="nav-link dropdown-indicator label-1" href="#nv-events" role="button"
                            data-bs-toggle="collapse" aria-expanded="{{ request()->routeIs('state.events.*') ? 'true' : 'false' }}" aria-controls="nv-events">
                            <div class="d-flex align-items-center">
                                <div class="dropdown-indicator-icon-wrapper">
                                    <span class="fas fa-caret-right dropdown-indicator-icon"></span>
                                </div>
                                <span class="nav-link-icon"><span data-feather="calendar"></span></span>
                                <span class="nav-link-text">Events</span>
                            </div>
                        </a>
                        <div class="parent-wrapper label-1">
                            <ul class="nav collapse parent {{ request()->routeIs('state.events.*') ? 'show' : '' }}" data-bs-parent="#navbarVerticalCollapse" id="nv-events">
                                <li class="collapsed-nav-item-title d-none">Events</li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('state.events.index') ? 'active' : '' }}"
                                        href="{{ route('state.events.index') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">All Events</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('state.events.register_event_users') || request()->routeIs('state.events.open_events.*') ? 'active' : '' }}"
                                        href="{{ route('state.events.open_events.index') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Open Events</span>
                                        </div>
                                    </a>
                                </li>
                                <!-- <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('state.events.create_event') ? 'active' : '' }}"
                                        href="{{ route('state.events.create_event') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Create Event</span>
                                        </div>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </li>

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

    <!-- Footer with Collapse Toggle - Synced with Footer Height -->
    <div class="navbar-vertical-footer">
        <button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center"
            data-navbar-vertical-toggle="">
            <span class="uil uil-left-arrow-to-left fs-8"></span>
            <span class="uil uil-arrow-from-right fs-8"></span>
            <span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
        </button>
    </div>
</nav>