{{-- Seguimiento CTC (seguimiento/ctc): uso de los menús por usuario, para ASERCOL (perfil 1). Elegir la compañía muestra
     sus usuarios; elegir un usuario muestra sus menús, primero los que usa. Kit ui-ctc (MigracionLayout.MD L3, L2a). --}}
@php
    $enUso = fn ($m) => isset($m->estado_uso) && ($m->estado_uso === 'en uso' || $m->estado_uso == 1 || $m->estado_uso === true);
    $menusOrdenados = collect($menus)->sortByDesc(fn ($m) => $enUso($m) ? 1 : 0);
@endphp
<div>
<x-pagina>
    <x-encabezado-pagina ruta="Administración · Seguimiento" titulo="Seguimiento CTC" descripcion="Uso de los menús de la aplicación por usuario." />

    <x-tarjeta titulo="Filtros">
        <div class="grid gap-4 sm:grid-cols-3">
            <x-campo etiqueta="Compañía" para="companiaSeleccionada">
                <x-select id="companiaSeleccionada" wire:model.live="companiaSeleccionada">
                    <option value="">Seleccione una compañía</option>
                    @foreach ($companias as $c)<option value="{{ $c->id }}">{{ $c->razon_social }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Usuario" para="usuarioSeleccionado" class="sm:col-span-2">
                <x-select id="usuarioSeleccionado" wire:model.live="usuarioSeleccionado" :disabled="!$companiaSeleccionada || count($usuarios) === 0">
                    <option value="">Seleccione un usuario</option>
                    @foreach ($usuarios as $u)<option value="{{ $u->id }}">{{ $u->name }} — {{ $u->email }}</option>@endforeach
                </x-select>
            </x-campo>
        </div>
        <p wire:loading.flex wire:target="companiaSeleccionada, usuarioSeleccionado" class="mt-3 items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status">
            <x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Consultando…
        </p>
    </x-tarjeta>

    @if ($companiaSeleccionada && !$usuarioSeleccionado)
        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="border-b border-[var(--borde)] px-5 py-3 text-[12px] text-[var(--texto-suave)]"><b class="font-bold text-[var(--texto)]">{{ count($usuarios) }}</b> usuarios de la compañía</div>
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead><tr><th class="!text-right">ID</th><th>Nombre</th><th>Correo</th><th class="!text-right">Perfil</th></tr></thead>
                    <tbody>
                        @forelse ($usuarios as $u)
                            <tr wire:key="usuario-{{ $u->id }}" class="cursor-pointer" wire:click="$set('usuarioSeleccionado', {{ (int) $u->id }})" title="Ver los menús de {{ $u->name }}">
                                <td class="text-right text-[var(--texto-suave)]">{{ $u->id }}</td>
                                <td class="font-semibold">{{ $u->name }}</td>
                                <td class="text-[var(--texto-suave)]">{{ $u->email }}</td>
                                <td class="text-right">{{ $u->perfil }}</td>
                            </tr>
                        @empty
                            <tr data-sin-hover><td colspan="4" class="!p-0"><p class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay usuarios para esta compañía.</p></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif

    @if ($usuarioSeleccionado)
        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3 text-[12px] text-[var(--texto-suave)]">
                <span><b class="font-bold text-[var(--texto)]">{{ count($menus) }}</b> menús del usuario · {{ $menusOrdenados->filter($enUso)->count() }} en uso</span>
                <x-secondary-button wire:click="$set('usuarioSeleccionado', null)"><x-icono nombre="arrow-left" /> Cambiar usuario</x-secondary-button>
            </div>
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead><tr><th class="!text-right">ID</th><th>Menú</th><th>Régimen</th><th>Uso</th><th>Último uso</th></tr></thead>
                    <tbody>
                        @forelse ($menusOrdenados as $menu)
                            <tr wire:key="menu-{{ $menu->id_menu }}">
                                <td class="text-right text-[var(--texto-suave)]">{{ $menu->id_menu }}</td>
                                <td class="font-semibold">{{ $menu->menu }}</td>
                                <td>{{ $menu->regimen }}</td>
                                <td><x-etiqueta :variante="$enUso($menu) ? 'exito' : 'neutro'">{{ $enUso($menu) ? 'en uso' : 'no se usa' }}</x-etiqueta></td>
                                <td class="whitespace-nowrap">{!! $menu->ultimo_uso ? e($menu->ultimo_uso) : '<span class="text-[var(--texto-tenue)]">—</span>' !!}</td>
                            </tr>
                        @empty
                            <tr data-sin-hover><td colspan="5" class="!p-0"><p class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay menús para este usuario.</p></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</x-pagina>
</div>