{{-- Árbol de menús (App\Http\Livewire\Menues, ruta /menues). Kit ui-ctc: módulos (nivel 1) y grupos (nivel 2)
     plegables, como antes; cada pantalla (nivel 3) con su casilla, que llama a menuAdd(módulo, grupo, pantalla). Es
     administración global: lista los menús activos de todos los clientes. --}}
<div>
    <x-pagina>
        <x-encabezado-pagina ruta="Administración · Gestión de menús" titulo="Menús" />

        <x-tarjeta titulo="Menús activos" class="max-w-3xl" :relleno="false">
            <ul class="divide-y divide-[var(--borde)]" role="tree">
                @foreach ($menu_perfil as $item)
                    @if ($item->nivel == 1)
                        <li x-data="{ open: false }" role="treeitem" x-bind:aria-expanded="open ? 'true' : 'false'" wire:key="menu-{{ $item->id }}">
                            <button type="button" x-on:click="open = !open"
                                    class="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--acento)]">
                                <span class="flex h-7 w-7 items-center justify-center rounded-md bg-[var(--acento-suave)] text-[var(--acento-texto)]">
                                    <x-icono nombre="squares-2x2" class="h-4 w-4" />
                                </span>
                                <span class="flex-1 text-[14px] font-semibold text-[var(--texto)]" id="item_{{ $item->id }}_item">{{ $item->nombre }}</span>
                                <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 text-[var(--texto-tenue)] transition-transform" x-bind:class="open && 'rotate-180'" />
                            </button>
                            <ul x-show="open" x-cloak class="space-y-1 pb-3 pl-8 pr-4" role="group">
                                @foreach ($menu_perfil as $item2)
                                    @if ($item2->nivel == 2 && $item2->depende == $item->id)
                                        <li x-data="{ open: false }" role="treeitem" x-bind:aria-expanded="open ? 'true' : 'false'">
                                            <button type="button" x-on:click="open = !open"
                                                    class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                                                <span aria-hidden="true" class="flex h-5 w-5 items-center justify-center text-[var(--texto-suave)] [&_svg]:h-4 [&_svg]:w-4">{!! $item2->svg !!}</span>
                                                <span class="flex-1 text-[13px] font-medium text-[var(--texto)]" id="item_{{ $item2->id }}_item">{{ $item2->nombre }}</span>
                                                <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 text-[var(--texto-tenue)] transition-transform" x-bind:class="open && 'rotate-180'" />
                                            </button>
                                            <ul x-show="open" x-cloak class="space-y-0.5 py-1 pl-9" role="group">
                                                @foreach ($menu_perfil as $item3)
                                                    @if ($item3->nivel == 3 && $item3->depende == $item2->id)
                                                        <li class="text-[13px]" id="child_{{ $item3->id }}">
                                                            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 text-[var(--texto-suave)] hover:bg-[var(--nav-hover)] hover:text-[var(--texto)]">
                                                                <x-checkbox wire:click="menuAdd({{ (int) $item->id }},{{ (int) $item2->id }},{{ (int) $item3->id }})" aria-labelledby="link_{{ $item3->id }}" />
                                                                <span id="link_{{ $item3->id }}">{{ $item3->nombre }}</span>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                    @endif
                @endforeach
            </ul>
        </x-tarjeta>
    </x-pagina>
</div>