{{-- Productos del cliente creados en Websimex, de importación y de exportación, con búsqueda y descarga a Excel.
     Layout nuevo con el kit ui-ctc (MigracionLayout.MD, L3). Las pestañas son de Alpine; la de exportación se abre
     sola cuando se busca en ella. Las tablas se paginan en la base (Rendimiento.MD R6). Las etiquetas muestran los
     filtros con que se buscó (filtro_impo / filtro_expo), que son los que usan la tabla y la descarga. --}}
@php
    $conClase = $id_importador == '2691';
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $siNo = ['S' => 'Sí', 'N' => 'No'];
    $chipsImpo = [];
    if ($filtro_impo) {
        if ($filtro_impo['buscar'] !== '') { $chipsImpo['buscar'] = ['Buscar', $filtro_impo['buscar']]; }
        if ($filtro_impo['aprobado'] !== '') { $chipsImpo['aprobado'] = ['Aprobado', $siNo[$filtro_impo['aprobado']] ?? $filtro_impo['aprobado']]; }
        if ($filtro_impo['bloqueado'] !== '') { $chipsImpo['bloqueado'] = ['Bloqueado', $siNo[$filtro_impo['bloqueado']] ?? $filtro_impo['bloqueado']]; }
    }
    $chipsExpo = [];
    if ($filtro_expo) {
        if ($filtro_expo['buscar'] !== '') { $chipsExpo['buscar_expo'] = ['Buscar', $filtro_expo['buscar']]; }
        if ($filtro_expo['estado'] !== '') { $chipsExpo['estado_expo'] = ['Activo', $siNo[$filtro_expo['estado']] ?? $filtro_expo['estado']]; }
    }
@endphp
<div x-data="{ pestana: $wire.entangle('pestana') }">
<x-pagina>
    <x-icono-simbolos :nombres="['m:check-circle', 'm:x-circle']" />

    <x-encabezado-pagina ruta="Websimex" titulo="Productos creados en Websimex"
                         descripcion="Productos de importación y de exportación registrados para el cliente.">
        <x-slot name="acciones">
            <x-secondary-button x-show="pestana === 'impo'" wire:click="descargarProductos" wire:loading.attr="disabled">
                <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar
            </x-secondary-button>
            <x-secondary-button x-show="pestana === 'expo'" x-cloak wire:click="descargarProductosExpo" wire:loading.attr="disabled">
                <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar
            </x-secondary-button>
        </x-slot>
    </x-encabezado-pagina>

    {{-- Búsqueda de cada pestaña (Enter o Consultar llaman al mismo método de antes) --}}
    <div x-show="pestana === 'impo'">
        <x-barra-busqueda modelo="buscar" accion="buscarProductos" placeholder="Buscar por código, subpartida, nombre, descripción, referencia o marca" :activos="count($chipsImpo)">
            <x-slot name="filtros">
                <x-campo etiqueta="Aprobado" para="aprobado">
                    <x-select id="aprobado" wire:model="aprobado">
                        <option value="">Cualquiera</option>
                        <option value="S">Sí</option>
                        <option value="N">No</option>
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Bloqueado" para="bloqueado">
                    <x-select id="bloqueado" wire:model="bloqueado">
                        <option value="">Cualquiera</option>
                        <option value="S">Sí</option>
                        <option value="N">No</option>
                    </x-select>
                </x-campo>
            </x-slot>
            @if (count($chipsImpo))
                <x-slot name="chips">
                    @foreach ($chipsImpo as $campo => [$etiqueta, $valor])
                        <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="limpiarFiltro('{{ $campo }}')" />
                    @endforeach
                </x-slot>
            @endif
        </x-barra-busqueda>
    </div>
    <div x-show="pestana === 'expo'" x-cloak>
        <x-barra-busqueda modelo="buscar_expo" accion="buscarProductosExpo" placeholder="Buscar por código, subpartida, descripción o presentación" :activos="count($chipsExpo)">
            <x-slot name="filtros">
                <x-campo etiqueta="Activo" para="estado_expo">
                    <x-select id="estado_expo" wire:model="estado_expo">
                        <option value="">Cualquiera</option>
                        <option value="S">Sí</option>
                        <option value="N">No</option>
                    </x-select>
                </x-campo>
            </x-slot>
            @if (count($chipsExpo))
                <x-slot name="chips">
                    @foreach ($chipsExpo as $campo => [$etiqueta, $valor])
                        <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="limpiarFiltro('{{ $campo }}')" />
                    @endforeach
                </x-slot>
            @endif
        </x-barra-busqueda>
    </div>

    <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-3 border-b border-[var(--borde)] px-5">
            <div role="tablist" class="flex gap-1">
                <x-pestana etiqueta="Importaciones" icono="arrow-down-tray" :conteo="$productos ? $productos->total() : null" alpine="pestana === 'impo'" x-on:click="pestana = 'impo'" />
                <x-pestana etiqueta="Exportaciones" icono="arrow-up-tray" :conteo="$productos_expo ? $productos_expo->total() : null" alpine="pestana === 'expo'" x-on:click="pestana = 'expo'" />
            </div>
            <div class="flex items-center gap-3 py-2 text-[12px] text-[var(--texto-suave)]">
                <span wire:loading.flex class="items-center gap-1.5" role="status"><x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Consultando…</span>
                <span x-show="pestana === 'impo'" class="inline-flex items-center gap-3">
                    <span class="inline-flex items-center gap-1"><span class="font-bold text-[var(--texto)]">A</span> aprobado</span>
                    <span class="inline-flex items-center gap-1"><span class="font-bold text-[var(--texto)]">B</span> bloqueado</span>
                </span>
            </div>
        </div>

        {{-- Importaciones --}}
        <div x-show="pestana === 'impo'" role="tabpanel">
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th title="Aprobado">A</th>
                            <th title="Bloqueado">B</th>
                            <th>Código</th>
                            <th>Subpartida</th>
                            <th>Nombre comercial</th>
                            <th>Descripción</th>
                            <th>Mínima</th>
                            <th>Referencia</th>
                            <th>Marca comercial</th>
                            @if ($conClase)
                                <th>Clase</th>
                                <th>Familia</th>
                            @endif
                            <th>Observaciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($productos ?? [] as $d)
                            <tr wire:key="impo-{{ $d['ID_PRODUCTO'] }}">
                                <td class="text-right text-[var(--texto-tenue)]">{{ $productos->firstItem() + $loop->index }}</td>
                                @foreach (['APROBADO', 'ESTADO'] as $campo)
                                    <td>
                                        @if ($d[$campo] == 'S')
                                            <x-icono nombre="check-circle" variante="m" sprite class="h-[18px] w-[18px] text-emerald-600 dark:text-emerald-400" /><span class="sr-only">Sí</span>
                                        @elseif ($d[$campo] == 'N')
                                            <x-icono nombre="x-circle" variante="m" sprite class="h-[18px] w-[18px] text-rose-600 dark:text-rose-400" /><span class="sr-only">No</span>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                @endforeach
                                <td class="whitespace-nowrap font-mono font-semibold">{{ $d['CODIGO_PRODUCTO'] }}</td>
                                <td class="whitespace-nowrap"><x-etiqueta variante="acento" class="font-mono">{{ $d['CODIGO_POSICION'] }}</x-etiqueta></td>
                                <td class="min-w-[12rem]">{!! $d['NOMBRE_COMERCIAL_PROD'] ? e($d['NOMBRE_COMERCIAL_PROD']) : $vacio !!}</td>
                                <td class="min-w-[28rem] text-[12px] leading-snug">{!! $d['DESCRIPCION'] ? e($d['DESCRIPCION']) : $vacio !!}</td>
                                <td class="min-w-[10rem] text-[12px]">{!! $d['DESCRIPCION_MINIMA'] ? e($d['DESCRIPCION_MINIMA']) : $vacio !!}</td>
                                <td>{!! $d['REFERENCIA'] ? e($d['REFERENCIA']) : $vacio !!}</td>
                                <td>{!! $d['MARCA_COMERCIAL_PROD'] ? e($d['MARCA_COMERCIAL_PROD']) : $vacio !!}</td>
                                @if ($conClase)
                                    <td>{!! $d['CLASE_PRODUCTO'] ? e($d['CLASE_PRODUCTO']) : $vacio !!}</td>
                                    <td>{!! $d['FAMILIA_PRODUCTO'] ? e($d['FAMILIA_PRODUCTO']) : $vacio !!}</td>
                                @endif
                                <td class="min-w-[28rem] text-[12px] leading-snug">{!! $d['OBSERVACIONES'] ? e($d['OBSERVACIONES']) : $vacio !!}</td>
                            </tr>
                        @empty
                            <tr data-sin-hover>
                                <td colspan="{{ $conClase ? 13 : 11 }}" class="!p-0">
                                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                                        <x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                        <p class="mt-2">{{ $productos ? 'No hay productos con estos filtros.' : 'Use la búsqueda para consultar los productos.' }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($productos && $productos->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $productos->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </div>

        {{-- Exportaciones --}}
        <div x-show="pestana === 'expo'" x-cloak role="tabpanel">
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Código</th>
                            <th>Subpartida</th>
                            <th>Descripción</th>
                            <th>Presentación</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($productos_expo ?? [] as $d)
                            <tr wire:key="expo-{{ $d['id'] }}">
                                <td class="text-right text-[var(--texto-tenue)]">{{ $productos_expo->firstItem() + $loop->index }}</td>
                                <td class="whitespace-nowrap font-mono font-semibold">{{ $d['codigo_producto'] }}</td>
                                <td class="whitespace-nowrap"><x-etiqueta variante="acento" class="font-mono">{{ $d['subpartida'] }}</x-etiqueta></td>
                                <td class="min-w-[28rem] text-[12px] leading-snug">{!! $d['descripcion'] ? e($d['descripcion']) : $vacio !!}</td>
                                <td class="text-[12px]">{!! $d['presentacion'] ? e($d['presentacion']) : $vacio !!}</td>
                            </tr>
                        @empty
                            <tr data-sin-hover>
                                <td colspan="5" class="!p-0">
                                    <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                                        <x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                        <p class="mt-2">{{ $productos_expo ? 'No hay productos con estos filtros.' : 'Use la búsqueda para consultar los productos.' }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($productos_expo && $productos_expo->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $productos_expo->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </div>
    </section>
</x-pagina>
</div>