@props(['href', 'icon' => null, 'text' => null, 'active' => false, 'logout' => false, 'children' => [], 'groupLabel' => null])

@php
    $hasActiveChild = collect($children)->contains(fn($child) => request()->fullUrlIs($child['href']));
    $isActive = $active || $hasActiveChild;
    $slug = Str::slug($text ?? $slot);
@endphp

@if ($groupLabel)
    <li class="nav-item">
        <p class="navbar-vertical-label">{{ $groupLabel }}</p>
        <hr class="navbar-vertical-line" />
    </li>
@endif

<li class="nav-item">
    @if ($logout)
        <div class="nav-item-wrapper">
            <form method="POST" action="{{ $href }}" id="logout-form-sidebar">
                @csrf
                <a class="nav-link label-1 {{ $isActive ? 'active' : '' }}" 
                   href="{{ $href }}" 
                   onclick="event.preventDefault(); document.getElementById('logout-form-sidebar').submit();"
                   role="button"
                   title="{{ $text ?? $slot }}">
                    <div class="d-flex align-items-center">
                        <span class="nav-link-icon">
                            <span data-feather="{{ $icon }}"></span>
                        </span>
                        <span class="nav-link-text">{{ $text ?? $slot }}</span>
                    </div>
                </a>
            </form>
        </div>
    @elseif (count($children) > 0)
        <div class="nav-item-wrapper">
            <a class="nav-link dropdown-indicator label-1 {{ $isActive ? 'active' : '' }}"
               href="#{{ $slug }}"
               role="button"
               data-bs-toggle="collapse"
               aria-expanded="{{ $isActive ? 'true' : 'false' }}"
               aria-controls="{{ $slug }}"
               title="{{ $text ?? $slot }}">
                <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="{{ $icon }}"></span>
                    </span>
                    <span class="nav-link-text">{{ $text ?? $slot }}</span>
                </div>
            </a>
            <div class="parent-wrapper label-1">
                <ul class="nav collapse parent {{ $isActive ? 'show' : '' }}" id="{{ $slug }}">
                    @foreach ($children as $child)
                        <li class="nav-item">
                            <a class="nav-link {{ request()->fullUrlIs($child['href']) ? 'active' : '' }}"
                               href="{{ $child['href'] }}">
                                <div class="d-flex align-items-center">
                                    <span class="nav-link-text">{{ $child['text'] }}</span>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @else
        <div class="nav-item-wrapper">
            <a class="nav-link label-1 {{ $isActive ? 'active' : '' }}" 
               href="{{ $href }}" 
               role="button"
               title="{{ $text ?? $slot }}">
                <div class="d-flex align-items-center">
                    <span class="nav-link-icon">
                        <span data-feather="{{ $icon }}"></span>
                    </span>
                    <span class="nav-link-text">{{ $text ?? $slot }}</span>
                </div>
            </a>
        </div>
    @endif
</li>