@php
    $collapseId = 'sidebar-' . Str::studly($item['title']) . '-' . $level . '-' . uniqid();
    $isActive = $item['is_active'] ?? false;
    $hasActiveChild = $item['has_active_child'] ?? false;
@endphp

<li class="nav-item @if($level > 1) nav-item-nested @endif">
    @if(!empty($item['children']))
        <a class="nav-link @if(!$hasActiveChild) collapsed @endif" href="#{{ $collapseId }}"
           data-bs-toggle="collapse" role="button"
           aria-expanded="{{ $hasActiveChild ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
            <i class="{{ $item['icon'] }} menu-icon"></i>
            <span>{{ __($item['title']) }}</span>
        </a>
        <div class="collapse @if($hasActiveChild) show @endif" id="{{ $collapseId }}">
            <ul class="nav flex-column">
                @foreach($item['children'] as $child)
                    @include('livewire.navigation.menu-item', ['item' => $child, 'level' => $level + 1])
                @endforeach
            </ul>
        </div>
    @else
        <span class="nav-link @if($isActive) active @endif" onclick="window.location='{{ $item['uri'] }}'" style="cursor: pointer">
            <i class="{{ $item['icon'] }} menu-icon"></i>
            <span>{{ __($item['title']) }}</span>
        </span>
    @endif

    <style>
        .nav-link.active {
            background-color: rgba(var(--bs-primary-rgb), 0.1);
            color: var(--bs-primary);
            border-left: 3px solid var(--bs-primary);
        }

        .nav-link.active .menu-icon {
            color: var(--bs-primary);
        }

        .nav-link {
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .nav-link:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</li>