{{-- Productos / materiales del cliente (config/product-fr): indicadores por categoría que filtran, búsqueda mientras se
     escribe, alta y edición (productos-procesar), importación desde Excel y plantilla. Kit ui-ctc (MigracionLayout.MD
     L3, pantallas de L2a). --}}
@php
    // categoria_prod.color guarda el nombre de un color de Tailwind; aquí se usa su tono 500 como color del indicador
    // y de la etiqueta (antes se armaban clases con ese nombre, que el Tailwind compilado no incluía).
    $tonos = [
        'slate' => '#64748b', 'gray' => '#6b7280', 'zinc' => '#71717a', 'red' => '#ef4444', 'orange' => '#f97316',
        'amber' => '#f59e0b', 'yellow' => '#eab308', 'lime' => '#84cc16', 'green' => '#22c55e', 'emerald' => '#10b981',
        'teal' => '#14b8a6', 'cyan' => '#06b6d4', 'sky' => '#0ea5e9', 'blue' => '#3b82f6', 'indigo' => '#6366f1',
        'violet' => '#8b5cf6', 'purple' => '#a855f7', 'fuchsia' => '#d946ef', 'pink' => '#ec4899', 'rose' => '#f43f5e',
    ];
    $tono = fn ($nombre) => $tonos[$nombre] ?? null;
    $totalProductos = collect($conteosCategorias)->sum('total');
    $fecha = fn ($f) => !empty($f) && $f != '0000-00-00' ? date('Y-m-d', strtotime($f)) : null;
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<div x-data="{ modalExcel: false }" x-on:keydown.escape.window="modalExcel = false">
<x-pagina>
    <x-icono-simbolos :nombres="['o:pencil-square']" />

    <x-encabezado-pagina ruta="Configuración · Productos" titulo="Productos / materiales">
        <x-slot name="acciones">
            <x-secondary-button wire:click="descargarPlantilla" title="Descargar la plantilla de productos en Excel">
                <x-icono nombre="arrow-down-tray" /> Descargar plantilla
            </x-secondary-button>
            <x-secondary-button x-on:click="modalExcel = true" title="Importar productos desde un archivo Excel">
                <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Importar Excel
            </x-secondary-button>
            <x-enlace-boton variante="primario" href="{{ route('productos-procesar', ['idProducto' => '0']) }}" title="Agregar un nuevo producto">
                <x-icono nombre="plus-circle" /> Nuevo producto
            </x-enlace-boton>
        </x-slot>
    </x-encabezado-pagina>

    {{-- Indicadores por categoría: clic filtra la lista (otro clic quita el filtro). "Sin categoría" y "Todos" quitan el filtro, como antes. --}}
    <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
        @foreach ($conteosCategorias as $cat)
            <x-indicador :titulo="$cat->categoria ?: 'Sin categoría'" :valor="$cat->total" :total="$totalProductos"
                         :porcentaje="$totalProductos ? $cat->total * 100 / $totalProductos : null" :insignia="false"
                         :color="$cat->categoria ? $tono($cat->color) : '#ef4444'" :activo="$cat->categoria && $filtroStatus === $cat->categoria"
                         wire:click="filtrarCategoria({{ \Illuminate\Support\Js::from((string) $cat->categoria) }})" wire:key="cat-{{ $loop->index }}" />
        @endforeach
        <x-indicador titulo="Todos" :valor="$totalProductos" :barra="false" :activo="!$filtroStatus" wire:click="$set('filtroStatus', null)" />
    </div>

    <x-barra-busqueda modelo="search" accion="$refresh" vivo placeholder="Buscar por código, código homologado o nombre" :activos="$filtroStatus ? 1 : 0">
        @if ($filtroStatus)
            <x-slot name="chips">
                <x-chip-filtro etiqueta="Categoría" :valor="$filtroStatus" wire:click="$set('filtroStatus', null)" />
            </x-slot>
        @endif
    </x-barra-busqueda>

    <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)]">{{ number_format($productos->total(), 0, ',', '.') }}</b> productos</span>
            <span wire:loading.delay class="flex items-center gap-1.5 text-[var(--acento-texto)]" role="status"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…</span>
        </div>
        <div class="ctc-tabla-caja">
            <table class="ctc-tabla">
                <thead>
                    <tr>
                        <th class="ctc-fija ctc-fija-ultima" style="left: 0"><span class="sr-only">Editar</span></th>
                        <th>Código</th>
                        <th>Cód. homologado</th>
                        <th>Nombre producto</th>
                        <th>Categoría</th>
                        <th>Centro de costo</th>
                        <th>Solicitud mínimas</th>
                        <th>Mínimas</th>
                        <th>Partida arancelaria</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($productos as $producto)
                        <tr wire:key="producto-{{ $producto->id }}">
                            <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0">
                                <a href="{{ route('productos-procesar', ['idProducto' => $producto->id]) }}" class="ctc-accion" title="Editar producto {{ $producto->codigo }}" aria-label="Editar producto {{ $producto->codigo }}">
                                    <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                </a>
                            </td>
                            <td class="whitespace-nowrap font-semibold">{{ $producto->codigo }}</td>
                            <td class="whitespace-nowrap">{!! $producto->codigo_homologacion ? e($producto->codigo_homologacion) : $vacio !!}</td>
                            <td class="min-w-[220px] text-[12.5px] leading-snug">{{ $producto->nombre }}</td>
                            <td>
                                @if ($producto->categoria)
                                    <x-etiqueta :color="$tono($producto->categoria->color)">{{ $producto->categoria->nombre }}</x-etiqueta>
                                @else
                                    <x-etiqueta>N/A</x-etiqueta>
                                @endif
                            </td>
                            <td class="whitespace-nowrap">{!! $producto->centro_de_costo ? e($producto->centro_de_costo) : $vacio !!}</td>
                            @foreach ([$producto->fecha_solicitud_descripciones_minimas, $producto->fecha_descripciones_minimas, $producto->fecha_creacion_partida_arancelaria] as $f)
                                <td class="whitespace-nowrap">{!! $fecha($f) ? e($fecha($f)) : $vacio !!}</td>
                            @endforeach
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="9" 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">Sin resultados en la consulta.</p></div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($productos->hasPages())
            <div class="border-t border-[var(--borde)] px-5 py-3">{{ $productos->links('vendor.pagination.ctc-livewire') }}</div>
        @endif
    </section>
</x-pagina>

    {{-- Importación de productos desde Excel --}}
    <template x-teleport="body">
        <div x-show="modalExcel" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="importar-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="modalExcel = false"></div>
            <div class="relative flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"><x-icono nombre="table-cells" class="h-5 w-5" /></span>
                    <h2 id="importar-titulo" class="flex-1 text-[15px] font-bold text-[var(--texto)]">Subir plantilla Excel de productos</h2>
                    <x-boton-icono etiqueta="Cerrar" x-on:click="modalExcel = false"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <div class="space-y-4 overflow-y-auto px-5 py-4">
                    @if ($errors->any())
                        <x-alerta tipo="error">
                            <p class="font-semibold">Se presentaron los siguientes errores:</p>
                            <ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                        </x-alerta>
                    @endif

                    <div x-data="{ subiendo: false, progreso: 0 }" x-on:livewire-upload-start="subiendo = true" x-on:livewire-upload-finish="subiendo = false"
                         x-on:livewire-upload-error="subiendo = false" x-on:livewire-upload-progress="progreso = $event.detail.progress">
                        <label for="uploadExcelFile" class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-[var(--borde-fuerte)] bg-[var(--superficie-2)] px-4 py-8 text-center text-[13px] font-semibold text-[var(--texto-suave)] hover:border-[var(--acento)]">
                            <x-icono nombre="cloud-arrow-up" class="h-9 w-9 text-[var(--texto-tenue)]" />
                            Arrastre el archivo o haga clic aquí
                            <span class="text-[11.5px] font-normal text-[var(--texto-tenue)]">Solo archivos Excel (.xlsx, .xls)</span>
                            <input wire:model="archivoExcel" type="file" id="uploadExcelFile" accept=".xlsx,.xls" class="hidden" wire:loading.attr="disabled" />
                        </label>
                        <div x-show="subiendo" x-cloak class="mt-2 h-1.5 overflow-hidden rounded bg-[var(--superficie-2)]"><div class="h-full bg-[var(--acento)]" :style="'width:' + progreso + '%'"></div></div>
                        @error('archivoExcel')<p class="mt-1 text-[12px] text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                        @if ($archivoExcel)
                            <p class="mt-2 text-[13px] text-[var(--texto)]">Archivo seleccionado: <span class="font-semibold">{{ $archivoExcel->getClientOriginalName() }}</span></p>
                        @endif
                    </div>

                    <p wire:loading.flex wire:target="importarProductosXls" class="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" /> Importando productos…</p>

                    @if (!empty($noImportados))
                        <div>
                            <p class="mb-2 text-[13px] font-semibold text-red-700 dark:text-red-300">Productos no importados</p>
                            <div class="ctc-tabla-caja rounded-lg border border-[var(--borde)]" style="--alto-tabla: 12rem">
                                <table class="ctc-tabla">
                                    <thead><tr><th>Código</th><th>Motivo</th></tr></thead>
                                    <tbody>
                                        @foreach ($noImportados as $item)
                                            <tr><td class="whitespace-nowrap">{{ $item['codigo'] }}</td><td class="text-[12.5px]">{{ $item['motivo'] }}</td></tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
                <footer class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-button type="button" wire:click="importarProductosXls" wire:loading.attr="disabled" wire:target="importarProductosXls"><x-icono nombre="arrow-up-tray" /> Importar</x-button>
                    <x-secondary-button x-on:click="modalExcel = false">Cerrar</x-secondary-button>
                </footer>
            </div>
        </div>
    </template>
</div>