{{--
    Sidebar Group (collapsible nav group)
    Props: $item – nav item array { label, icon, children[] }
--}}
@php
$anyActive = collect($item['children'] ?? [])->contains(function($c) {
$route = $c['route'] ?? '';
$activePattern = $c['active'] ?? (str_ends_with($route, '.index') ? substr($route, 0, -6) . '.*' : $route);
return request()->routeIs($route) || ($activePattern && request()->routeIs($activePattern));
});
$act = "bg-sidebar-primary font-semibold text-sidebar-primary-foreground before:pointer-events-none before:absolute before:bottom-1.5 before:left-0 before:top-1.5 before:w-1 before:rounded-r before:bg-sidebar-ring before:content-[''] dark:bg-sidebar-active";
@endphp
<div x-data="{ open: {{ $anyActive ? 'true' : 'false' }} }">
    <button
        @click="if (!$store.sidebar.collapsed) open = !open"
        @class([ 'group relative flex w-full cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-2.5 text-left text-[13.5px] font-medium transition-all duration-200' , 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'=> !$anyActive,
        $act => $anyActive,
        ])
        type="button"
        :title="$store.sidebar.collapsed ? '{{ $item['label'] }}' : ''"
        >
        <span class="h-5 w-5 flex-shrink-0 opacity-75 group-hover:opacity-100" aria-hidden="true">
            <x-dynamic-component :component="$item['icon']" class="h-5 w-5" />
        </span>
        <span
            data-sidebar-label
            x-show="!$store.sidebar.collapsed"
            class="flex-1 text-left truncate"
            x-transition:enter="transition-opacity duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100">{{ $item['label'] }}</span>
        <svg
            data-sidebar-group-chevron
            x-show="!$store.sidebar.collapsed"
            :class="open ? 'rotate-90' : ''"
            class="w-4 h-4 transition-transform duration-200 flex-shrink-0"
            fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
    </button>

    <div
        data-sidebar-group-children
        x-cloak
        x-show="open && !$store.sidebar.collapsed"
        x-collapse
        class="ml-4 mt-1 space-y-1 border-l border-sidebar-border pl-4">
        @foreach($item['children'] ?? [] as $child)
        <x-layouts.admin.sidebar-link :item="$child" />
        @endforeach
    </div>
</div>