@php
    use Illuminate\Support\Str;

    $hasChildren = isset($item->children) && $item->children->count();
    $isMega = Str::lower(trim($item->title)) === 'programas';

    $link = '#';
    if (!empty($item->route)) {
        try {
            $params = $item->parameters ? json_decode($item->parameters, true) : [];
            $link = route($item->route, $params ?? []);
        } catch (\Throwable $e) {
            $link = !empty($item->url) ? url($item->url) : '#';
        }
    } else {
        $link = !empty($item->url) ? url($item->url) : '#';
    }

    $isActive = url()->current() === rtrim($link, '/')
        || request()->fullUrlIs(rtrim($link, '/') . '*');

    $icon = $item->icon_class ?: 'voyager-angle-right';
@endphp

@if($desktop)

    <li class="relative group">
        <a href="{{ $link }}"
           class="inline-flex items-center gap-1.5 px-4 py-3 rounded-xl font-medium text-[15px] transition
                  {{ $isActive ? 'bg-[#eef2ff] text-[#1f2d5a]' : 'text-[#1f2d5a] hover:bg-[#f5f7ff] hover:text-[#1f2d5a]' }}">
            <span>{{ $item->title }}</span>

            @if($hasChildren)
                <i class="voyager-angle-down text-[12px] mt-[1px]"></i>
            @endif
        </a>

        @if($hasChildren && !$isMega)
            <div class="absolute left-0 top-full pt-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-200">
                <div class="w-[280px] bg-[#f8f8f9] rounded-2xl shadow-[0_20px_50px_rgba(15,23,42,0.15)] p-3 border border-slate-100">
                    <ul class="space-y-1">
                        @foreach($item->children as $child)
                            @php
                                $childLink = '#';
                                if (!empty($child->route)) {
                                    try {
                                        $childParams = $child->parameters ? json_decode($child->parameters, true) : [];
                                        $childLink = route($child->route, $childParams ?? []);
                                    } catch (\Throwable $e) {
                                        $childLink = !empty($child->url) ? url($child->url) : '#';
                                    }
                                } else {
                                    $childLink = !empty($child->url) ? url($child->url) : '#';
                                }

                                $childIcon = $child->icon_class ?: 'voyager-angle-right';
                            @endphp

                            <li>
                                <a href="{{ $childLink }}"
                                   class="flex items-center gap-3 px-4 py-3 rounded-xl text-[15px] text-slate-600 hover:bg-white hover:text-[#4f46e5] transition">
                                    <i class="{{ $childIcon }} text-[#4f46e5] text-[16px] w-4 text-center"></i>
                                    <span>{{ $child->title }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        @if($hasChildren && $isMega)
            <div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-200">
                <div class="w-[720px] bg-[#f8f8f9] rounded-2xl shadow-[0_20px_50px_rgba(15,23,42,0.18)] p-5 border border-slate-100">
                    <div class="grid grid-cols-2 gap-x-6 gap-y-2">
                        @foreach($item->children as $child)
                            @php
                                $childLink = '#';
                                if (!empty($child->route)) {
                                    try {
                                        $childParams = $child->parameters ? json_decode($child->parameters, true) : [];
                                        $childLink = route($child->route, $childParams ?? []);
                                    } catch (\Throwable $e) {
                                        $childLink = !empty($child->url) ? url($child->url) : '#';
                                    }
                                } else {
                                    $childLink = !empty($child->url) ? url($child->url) : '#';
                                }

                                $childIcon = $child->icon_class ?: 'voyager-categories';
                            @endphp

                            <a href="{{ $childLink }}"
                               class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-600 hover:bg-white hover:text-[#4f46e5] transition">
                                <i class="{{ $childIcon }} text-[#4f46e5] text-[17px] w-5 text-center"></i>
                                <span class="text-[15px] leading-snug">{{ $child->title }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </li>

@else

    <li x-data="{ open: false }" class="border border-slate-100 rounded-xl overflow-hidden">
        <div class="flex items-center justify-between bg-white">
            <a href="{{ $link }}"
               class="flex-1 px-4 py-3 text-[#1f2d5a] font-medium">
                {{ $item->title }}
            </a>

            @if($hasChildren)
                <button @click="open = !open"
                        class="px-4 py-3 text-[#1f2d5a] border-l border-slate-100">
                    <i class="voyager-angle-down" x-show="!open"></i>
                    <i class="voyager-angle-up" x-show="open"></i>
                </button>
            @endif
        </div>

        @if($hasChildren)
            <div x-show="open" x-transition class="bg-[#f8f8f9] border-t border-slate-100">
                <ul class="p-2 space-y-1">
                    @foreach($item->children as $child)
                        @php
                            $childLink = '#';
                            if (!empty($child->route)) {
                                try {
                                    $childParams = $child->parameters ? json_decode($child->parameters, true) : [];
                                    $childLink = route($child->route, $childParams ?? []);
                                } catch (\Throwable $e) {
                                    $childLink = !empty($child->url) ? url($child->url) : '#';
                                }
                            } else {
                                $childLink = !empty($child->url) ? url($child->url) : '#';
                            }

                            $childIcon = $child->icon_class ?: 'voyager-angle-right';
                        @endphp

                        <li>
                            <a href="{{ $childLink }}"
                               class="flex items-center gap-3 px-3 py-3 rounded-lg text-slate-600 hover:bg-white hover:text-[#4f46e5] transition">
                                <i class="{{ $childIcon }} text-[#4f46e5] w-4 text-center"></i>
                                <span>{{ $child->title }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </li>

@endif