@props(['item', 'mobile' => false])

@if($item->children->isEmpty())
    <a href="{{ $item->getUrl() }}"
       class="{{ $mobile 
              ? 'flex items-center py-2 pl-1 text-sm text-gray-700 rounded-lg hover:bg-red-50 group ' . ($item->isActive() ? 'text-red-600' : '')
              : 'block px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-red-600 ' . ($item->isActive() ? 'bg-red-50 text-red-600' : '') }}">
        {{ $item->getName() }}
    </a>
@else
    <div x-data="{ open: false }" class="{{ $mobile ? 'my-1' : '' }}">
        @if($mobile)
            <button @click="open = !open"
                    class="flex items-center justify-between w-full py-2 pl-1 text-sm text-gray-700 rounded-lg hover:bg-red-50 {{ ($item->isActive() || $item->hasActiveChild()) ? 'text-red-600' : '' }}">
                <span>{{ $item->getName() }}</span>
                <svg class="w-3 h-3 transition-transform" :class="{'rotate-180': open}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                </svg>
            </button>
            <div x-show="open" 
                 x-transition:enter="transition-all ease-in-out duration-200"
                 x-transition:enter-start="opacity-0 max-h-0"
                 x-transition:enter-end="opacity-100 max-h-64"
                 x-transition:leave="transition-all ease-in-out duration-200"
                 x-transition:leave-start="opacity-100 max-h-64"
                 x-transition:leave-end="opacity-0 max-h-0"
                 class="pl-3 mt-1 overflow-hidden">
                @foreach($item->children->sortBy('order') as $child)
                    <x-recursive-menu-item :item="$child" :mobile="true" />
                @endforeach
            </div>
        @else
            <button @click="open = !open"
                    class="flex items-center justify-between w-full px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-red-600 {{ ($item->isActive() || $item->hasActiveChild()) ? 'bg-red-50 text-red-600' : '' }}">
                <span>{{ $item->getName() }}</span>
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div x-show="open" class="pl-2">
                @foreach($item->children->sortBy('order') as $child)
                    <x-recursive-menu-item :item="$child" />
                @endforeach
            </div>
        @endif
    </div>
@endif