{{-- resources/views/livewire/inventario/productos.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;">
        <div>
            <div class="page-title">🏷️ Inventario · Productos</div>
            <div class="page-sub">Catálogo de productos y servicios · validación CABYS contra Hacienda</div>
        </div>
        <div style="display:flex;gap:10px;">
            <button wire:click="$set('mostrar_importar', {{ $mostrar_importar ? 'false' : 'true' }})" class="btn-plain">
                📤 Importar Excel
            </button>
            <button wire:click="abrirCrear" class="btn-blue">+ Nuevo producto</button>
        </div>
    </div>

    {{-- ── MENSAJES ─────────────────────────────────── --}}
    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 5000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    {{-- ── IMPORTAR EXCEL ───────────────────────────── --}}
    @if($mostrar_importar)
    <div class="group-label">Importar productos desde Excel</div>
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:16px 20px;">
            @if($importar_error)
            <div class="alert alert-red" style="margin-bottom:12px;">❌ {{ $importar_error }}</div>
            @endif
            @if($importar_resultado)
            <div class="alert alert-green" style="margin-bottom:12px;">✅ {{ $importar_resultado }}</div>
            @endif

            <div style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
                <div class="field" style="flex:2;min-width:240px;">
                    <label>Archivo (.xlsx, .xls o .csv)</label>
                    <input type="file"
                           wire:model="importar_archivo"
                           accept=".xlsx,.xls,.csv"
                           style="background:var(--bg);border:none;border-radius:12px;
                                  padding:8px 12px;font-family:'Ubuntu',sans-serif;" />
                </div>

                <a href="{{ route('inventario.productos.plantilla') }}" class="btn-plain" style="white-space:nowrap;">
                    ⬇️ Plantilla
                </a>

                <button wire:click="importarExcel"
                        wire:loading.attr="disabled"
                        wire:target="importarExcel,importar_archivo"
                        class="btn-blue"
                        style="white-space:nowrap;">
                    <span wire:loading.remove wire:target="importarExcel">📤 Importar</span>
                    <span wire:loading wire:target="importarExcel">Procesando…</span>
                </button>
            </div>
            <div style="font-size:11px;color:var(--label2);margin-top:10px;">
                Columnas esperadas: sku, nombre, descripcion, tipo (producto/servicio), cabys_codigo,
                unidad_medida, precio_venta, costo_promedio. Máximo {{ $importar_max_filas }} filas por archivo.
                Cada código CABYS se valida contra Hacienda — el procesamiento corre en segundo plano
                y el resultado llega por correo.
            </div>
        </div>
    </div>
    @endif

    {{-- ── FILTROS ──────────────────────────────────── --}}
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:14px 18px;">
            <input type="text"
                   wire:model.live.debounce.400ms="filtro_busqueda"
                   placeholder="🔍 Buscar producto, SKU o CABYS…"
                   style="font-size:13px;padding:8px 14px;background:var(--bg);border:none;
                          border-radius:50px;min-width:240px;outline:none;font-family:'Ubuntu',sans-serif;" />
        </div>
    </div>

    {{-- ── TABLA PRODUCTOS ──────────────────────────── --}}
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:900px;">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th>SKU · CABYS</th>
                        <th>Tipo</th>
                        <th>IVA</th>
                        <th style="text-align:right;">Precio venta</th>
                        <th style="text-align:right;">Costo</th>
                        <th>Estado</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($productos as $producto)
                    <tr wire:key="producto-{{ $producto->id }}">
                        <td>
                            <div class="td-bold" style="font-size:12px;">{{ $producto->nombre }}</div>
                            @if($producto->es_medicamento)
                            <div style="font-size:10px;color:var(--blue);margin-top:2px;">
                                💊 {{ $producto->forma_farmaceutica }}
                            </div>
                            @endif
                        </td>
                        <td>
                            <div style="font-size:11px;color:var(--blue);font-weight:600;">
                                {{ $producto->sku }}
                            </div>
                            <div class="td-mono" style="font-size:10px;margin-top:2px;">
                                {{ $producto->cabys_codigo }}
                            </div>
                        </td>
                        <td>
                            <span class="chip ch-gray">{{ $producto->tipo === 'servicio' ? 'Servicio' : 'Producto' }}</span>
                        </td>
                        <td>
                            <span class="chip ch-gray">{{ $producto->tarifa_iva }}%</span>
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;font-weight:600;">
                            ₡{{ number_format($producto->precio_venta, 2) }}
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($producto->costo_promedio, 2) }}
                        </td>
                        <td>
                            @if($producto->activo)
                            <span class="chip ch-green">✓ Activo</span>
                            @else
                            <span class="chip ch-red">Inactivo</span>
                            @endif
                        </td>
                        <td style="text-align:center;">
                            <div style="display:flex;gap:6px;justify-content:center;">
                                <button wire:click="abrirEditar({{ $producto->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;">
                                    ✏️ Editar
                                </button>
                                <button wire:click="toggleActivo({{ $producto->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;">
                                    {{ $producto->activo ? '🚫 Desactivar' : '✅ Activar' }}
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay productos con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($productos->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $productos->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL CREAR/EDITAR ───────────────────────── --}}
    @if($mostrar_form)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_form', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:460px;max-height:88vh;overflow-y:auto;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">

            <div style="font-size:17px;font-weight:700;margin-bottom:18px;">
                {{ $producto_id ? '✏️ Editar producto' : '➕ Nuevo producto' }}
            </div>

            @if($form_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $form_error }}</div>
            @endif

            <div style="display:flex;gap:10px;margin-bottom:12px;">
                <div class="field" style="flex:1;">
                    <label>SKU</label>
                    <input type="text" wire:model="sku" placeholder="Ej: PROD-001" />
                </div>
                <div class="field" style="flex:1;">
                    <label>Tipo</label>
                    <select wire:model="tipo">
                        <option value="producto">Producto</option>
                        <option value="servicio">Servicio</option>
                    </select>
                </div>
            </div>

            <div class="field" style="margin-bottom:12px;">
                <label>Nombre</label>
                <input type="text" wire:model="nombre" placeholder="Nombre del producto o servicio" />
            </div>

            <div class="field" style="margin-bottom:12px;">
                <label>Descripción</label>
                <input type="text" wire:model="descripcion" placeholder="Opcional" />
            </div>

            <div class="field" style="margin-bottom:6px;">
                <label>Código CABYS</label>
                <div style="display:flex;gap:8px;">
                    <input type="text" wire:model="cabys_codigo" maxlength="13"
                           placeholder="13 dígitos" style="flex:1;" />
                    <button wire:click="validarCabys" wire:loading.attr="disabled" wire:target="validarCabys"
                            class="btn-plain" style="white-space:nowrap;">
                        <span wire:loading.remove wire:target="validarCabys">Validar</span>
                        <span wire:loading wire:target="validarCabys">…</span>
                    </button>
                </div>
                @if($cabys_mensaje)
                <div style="font-size:11px;margin-top:6px;color:{{ $cabys_validado ? 'var(--green2)' : 'var(--red)' }};">
                    {{ $cabys_mensaje }}
                </div>
                @endif
            </div>

            <div style="display:flex;gap:10px;margin-bottom:12px;">
                <div class="field" style="flex:1;">
                    <label>Unidad de medida</label>
                    <input type="text" wire:model="unidad_medida" maxlength="5" placeholder="Sp" />
                </div>
                <div class="field" style="flex:1;">
                    <label>Precio de venta</label>
                    <input type="number" wire:model="precio_venta" step="0.01" min="0" />
                </div>
                <div class="field" style="flex:1;">
                    <label>Costo promedio</label>
                    <input type="number" wire:model="costo_promedio" step="0.01" min="0" />
                </div>
            </div>

            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;margin-bottom:12px;">
                <input type="checkbox" wire:model.live="es_medicamento"
                       style="width:16px;height:16px;accent-color:var(--blue);" />
                Es medicamento
            </label>

            @if($es_medicamento)
            <div style="display:flex;gap:10px;margin-bottom:12px;">
                <div class="field" style="flex:1;">
                    <label>Registro sanitario</label>
                    <input type="text" wire:model="registro_sanitario" />
                </div>
                <div class="field" style="flex:1;">
                    <label>Forma farmacéutica</label>
                    <input type="text" wire:model="forma_farmaceutica" />
                </div>
            </div>
            @endif

            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;margin-bottom:20px;">
                <input type="checkbox" wire:model="activo"
                       style="width:16px;height:16px;accent-color:var(--green2);" />
                Activo
            </label>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_form', false)"
                        class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="guardar"
                        wire:loading.attr="disabled"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove>✅ Guardar</span>
                    <span wire:loading>Guardando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

</div>