{{-- Compradores internos del cliente (tarea 4.4). Kit ui-ctc: pestañas por estado, búsqueda y tabla; el In House aprueba
     los nuevos completando el correo, o los rechaza. El catálogo vive en Central. Colores: tokens del layout. --}}
@php
    use App\Http\Livewire\Importaciones\CompradoresCliente;
    $variantes = ['POR_APROBAR' => ['aviso', 'Por aprobar'], 'ACTIVO' => ['exito', 'Activo'], 'INACTIVO' => ['neutro', 'Inactivo']];
    $origenes = ['MANUAL' => 'Central', 'PLANTILLA' => 'Plantilla Excel', 'IA' => 'Documento con IA', 'CTC' => 'Formulario', 'MIGRACION' => 'Histórico'];
@endphp
<div>
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Órdenes de compra · Compradores" titulo="Compradores internos"
                             descripcion="Los compradores de tus compañías que aparecen en la orden de compra. Los nuevos quedan por aprobar hasta que completes su correo.">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/impo/order-v2') }}">
                    <x-icono nombre="arrow-left" variante="m" class="h-4 w-4" /> Órdenes de compra
                </x-enlace-boton>
            </x-slot>
        </x-encabezado-pagina>

        @if ($error)
            <x-alerta tipo="aviso">No fue posible consultar el catálogo de compradores en Central. Intenta de nuevo en unos minutos.</x-alerta>
        @endif
        @if (!$edita)
            <x-alerta tipo="info">Tu usuario tiene acceso de consulta: puedes ver el catálogo pero no aprobar compradores.</x-alerta>
        @endif

        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--borde)] px-5">
                <div class="flex gap-1 overflow-x-auto" role="tablist">
                    @foreach (CompradoresCliente::PESTANAS as $clave => [$etiqueta, $estados])
                        <x-pestana :etiqueta="$etiqueta" :conteo="$conteos[$clave]" :activa="$pestana === $clave" wire:click="cambiarPestana('{{ $clave }}')" wire:key="pestana-{{ $clave }}" />
                    @endforeach
                </div>
                <div class="relative w-full py-2 sm:w-80">
                    <label for="buscar-comprador" class="sr-only">Buscar comprador</label>
                    <x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--texto-tenue)]" />
                    <x-input id="buscar-comprador" type="search" class="w-full pl-9" placeholder="Nombre, correo, área o compañía" wire:model.live.debounce.400ms="buscar" />
                </div>
            </div>

            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead><tr><th>Comprador</th><th>Compañía</th><th>Área</th><th>Origen</th><th>Estado</th><th>Aprobación</th></tr></thead>
                    <tbody>
                        @forelse ($filas as $c)
                            <tr wire:key="comprador-{{ $c->id }}">
                                <td>
                                    <span class="block font-semibold">{{ $c->nombre }}</span>
                                    <span class="block text-[12px] {{ $c->correo ? 'text-[var(--texto-suave)]' : 'text-amber-700 dark:text-amber-300' }}">{{ $c->correo ?: 'Sin correo' }}</span>
                                </td>
                                <td class="max-w-[240px]"><span class="block truncate">{{ $companias[$c->id_importador] ?? $c->id_importador }}</span></td>
                                <td>{{ $c->area ?: '—' }}</td>
                                <td class="whitespace-nowrap text-[var(--texto-suave)]">{{ $origenes[$c->origen] ?? $c->origen }}</td>
                                <td class="whitespace-nowrap"><x-etiqueta :variante="$variantes[$c->estado][0] ?? 'neutro'">{{ $variantes[$c->estado][1] ?? $c->estado }}</x-etiqueta></td>
                                <td class="min-w-[320px]">
                                    @if ($c->estado === 'POR_APROBAR' && $edita)
                                        <div class="flex items-start gap-2">
                                            <div class="min-w-0 flex-1">
                                                <x-input type="email" wire:model="correos.{{ $c->id }}" placeholder="{{ $c->correo ?: 'Correo del comprador' }}"
                                                         aria-label="Correo para aprobar a {{ $c->nombre }}" class="w-full" />
                                                <x-input-error :for="'correos.' . $c->id" />
                                            </div>
                                            <x-button type="button" wire:click="aprobar({{ $c->id }})" wire:loading.attr="disabled" class="!px-3">Aprobar</x-button>
                                            <x-boton-icono :etiqueta="'Rechazar a ' . $c->nombre" wire:click="rechazar({{ $c->id }})" wire:confirm="¿Rechazar a {{ $c->nombre }}?">
                                                <x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
                                            </x-boton-icono>
                                        </div>
                                    @elseif ($c->fecha_aprueba)
                                        <span class="text-[12px] text-[var(--texto-suave)]">{{ \Carbon\Carbon::parse($c->fecha_aprueba)->format('d/m/Y') }}</span>
                                    @else
                                        <span class="text-[var(--texto-tenue)]">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr data-sin-hover><td colspan="6" class="!p-0">
                                <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                                    <x-icono nombre="users" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                    <p class="mt-2">{{ trim($buscar) !== '' ? 'No hay compradores con esa búsqueda.' : 'No hay compradores en esta pestaña.' }}</p>
                                </div>
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </x-pagina>
</div>