{{--
    Sidebar Group (collapsible nav group)
    Props: $item – nav item array { label, icon?, children[] }, $nested – nested group styling
--}}
@props([
    'item',
    'nested' => false,
])

@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:start-0 before:top-1.5 before:w-1 before:rounded-r before:bg-sidebar-ring before:content-[''] dark:bg-sidebar-active";
$navLabel = $item['label'] ?? '';
$buttonClass = $nested
    ? 'group relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg px-3 py-2 text-left text-[13px] font-medium transition-all duration-200'
    : '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';
@endphp
<div x-data="{ open: {{ $anyActive ? 'true' : 'false' }} }">
    <button
        @click="if (!$store.sidebar.collapsed) open = !open"
        @class([
            $buttonClass,
            'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground' => ! $anyActive,
            $act => $anyActive,
        ])
        type="button"
        :title="$store.sidebar.collapsed ? '{{ __($item['label']) }}' : ''"
        >
        @if(!empty($item['icon']))
        <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>
        @endif
        <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([
            'mt-1 space-y-1 border-l border-sidebar-border ps-4',
            $nested ? 'ms-2' : 'ms-4',
        ])>
        @foreach($item['children'] ?? [] as $child)
            @if(isset($child['children']))
                <x-layouts.admin.sidebar-group :item="$child" :nested="true" />
            @else
                <x-layouts.admin.sidebar-link :item="$child" />
            @endif
        @endforeach
    </div>
</div>