@php
    $hasActiveSub = collect($submodules)->contains(function ($sub) {
        return collect($sub['items'] ?? [])->contains(function ($item) {
            return isset($item['route']) && Route::is($item['route']);
        });
    });
@endphp


@if(count($submodules) > 0)
    <div x-data="{ open: {{ $hasActiveSub ? 'true' : 'false' }} }" class="space-y-1">
        <button @click="open = !open" class="flex items-center justify-between w-full p-2 rounded hover:bg-gray-200 transition-colors text-sm">
            <span class="flex items-center gap-2">
                <x-dynamic-component :component="$icon" class="w-4 h-4"/>
                {{ $title }}
            </span>
            <span x-html="open ? '&darr;' : '&rarr;'" class="text-gray-500"></span>
        </button>
        <div x-show="open" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 transform -translate-y-2" 
             x-transition:enter-end="opacity-100 transform translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform translate-y-0"
             x-transition:leave-end="opacity-0 transform -translate-y-2"
             class="pl-6 mt-1 space-y-1 text-gray-600 text-sm">
            @foreach($submodules as $sub)
                <x-layout.sidebar.sub-module :title="$sub['title']" :icon="$sub['icon']" :items="$sub['items'] ?? []"/>
            @endforeach
        </div>
    </div>
@else
    <x-layout.sidebar.menu-item :title="$title" :icon="$icon"/>
@endif