@php
    $mobile = $mobile ?? false;
@endphp

<div class="mb-6 flex items-center justify-between gap-3 px-2">
    <a href="{{ $homeRoute }}" class="flex items-center gap-2"
        @if ($mobile) onclick="document.getElementById('app-sidebar-toggle').checked = false" @endif>
        <x-branding.logo
            title-class="text-lg font-semibold text-gray-900 dark:text-white"
            image-class="h-10 w-10"
        />
    </a>

    @if ($mobile)
        <label for="app-sidebar-toggle"
            class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 lg:hidden"
            aria-label="{{ __('Close menu') }}">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
        </label>
    @endif
</div>

<nav class="space-y-5">
    @foreach ($menuGroups as $group)
        <div>
            <p class="px-2 text-xs font-semibold uppercase tracking-wide text-gray-400">{{ $group['title'] }}</p>
            <ul class="mt-2 space-y-1">
                @foreach ($group['items'] as $item)
                    @if (isset($item['subItems']))
                        <li class="px-2 py-2 text-sm font-medium text-gray-700 dark:text-gray-200">{{ $item['name'] }}</li>
                        @foreach ($item['subItems'] as $subItem)
                            @php
                                $active = $currentPath === $subItem['path'];
                            @endphp
                            <li>
                                <a href="{{ $subItem['path'] }}"
                                    @if ($mobile) onclick="document.getElementById('app-sidebar-toggle').checked = false" @endif
                                    class="ml-3 block rounded-lg px-3 py-2 text-sm {{ $active ? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800' }}">
                                    {{ $subItem['name'] }}
                                </a>
                            </li>
                        @endforeach
                        @else
                            @php
                                $active = $currentPath === $item['path'];
                            @endphp
                            <li>
                                <a href="{{ $item['path'] }}"
                                    @if ($mobile) onclick="document.getElementById('app-sidebar-toggle').checked = false" @endif
                                    class="block rounded-lg px-3 py-2 text-sm font-medium {{ $active ? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800' }}">
                                    {{ $item['name'] }}
                                </a>
                        </li>
                    @endif
                @endforeach
            </ul>
        </div>
    @endforeach
</nav>

<div class="mt-8 rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
    <p class="font-semibold text-gray-900 dark:text-white">Dari Stock</p>
    <p class="mt-1">{{ __('Help everyone manage stock, orders, and access from one place.') }}</p>
</div>