{{-- resources/views/livewire/inventario/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">📦 Inventario · Stock</div>
            <div class="page-sub">Stock por bodega · ajustes manuales · alertas de mínimo</div>
        </div>
        <a href="{{ route('traslados') }}" wire:navigate>
            <button class="btn-plain">🚚 Traslados entre bodegas</button>
        </a>
    </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

    {{-- ── SELECTOR DE BODEGA ──────────────────────── --}}
    <div style="display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;">
        @foreach($bodegas as $bodega)
        <button wire:click="$set('bodega_activa', {{ $bodega->id }})"
                class="{{ $bodega_activa == $bodega->id ? 'btn-blue' : 'btn-plain' }}"
                style="font-size:12px;padding:8px 16px;">
            📦 {{ $bodega->nombre }}
        </button>
        @endforeach
    </div>

    {{-- ── KPIs ────────────────────────────────────── --}}
    @if($totales)
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">Productos en bodega</div>
            <div style="font-size:26px;font-weight:700;">{{ number_format($totales->total_productos) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);
                    {{ ($totales->alertas ?? 0) > 0 ? 'border:1.5px solid rgba(255,149,0,.3);' : '' }}">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">⚠️ Bajo mínimo</div>
            <div style="font-size:26px;font-weight:700;
                        color:{{ ($totales->alertas ?? 0) > 0 ? 'var(--orange)' : 'var(--green2)' }}">
                {{ number_format($totales->alertas ?? 0) }}
            </div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">Valor del inventario</div>
            <div style="font-size:26px;font-weight:700;">
                ₡{{ number_format($totales->valor_inventario ?? 0, 0) }}
            </div>
        </div>
    </div>
    @endif

    {{-- ── FILTROS ──────────────────────────────────── --}}
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:14px 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
            <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;" />

            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;">
                <input type="checkbox"
                       wire:model.live="solo_alertas"
                       style="width:16px;height:16px;accent-color:var(--orange);" />
                Solo bajo mínimo
            </label>
        </div>
    </div>

    {{-- ── TABLA STOCK ──────────────────────────────── --}}
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:800px;">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th>SKU · CABYS</th>
                        <th>IVA</th>
                        <th style="text-align:right;">Stock actual</th>
                        <th style="text-align:right;">Stock mínimo</th>
                        <th style="text-align:right;">Costo promedio</th>
                        <th style="text-align:right;">Valor total</th>
                        <th>Estado</th>
                        <th style="text-align:center;">Ajuste</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($stocks as $stock)
                    @php $producto = $stock->producto; @endphp
                    <tr wire:key="stock-{{ $stock->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?->tarifa_iva }}%</span>
                        </td>
                        <td style="text-align:right;font-size:14px;font-weight:700;
                                   color:{{ $stock->estaBajoMinimo() ? 'var(--red)' : 'var(--label)' }};">
                            {{ number_format($stock->cantidad, 2) }}
                            <span style="font-size:10px;color:var(--label2);font-weight:400;">
                                {{ $producto?->unidad_medida }}
                            </span>
                        </td>
                        <td style="text-align:right;font-size:12px;color:var(--label2);">
                            {{ $stock->stock_minimo > 0 ? number_format($stock->stock_minimo, 2) : '—' }}
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($producto?->costo_promedio ?? 0, 2) }}
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;font-weight:600;">
                            ₡{{ number_format($stock->cantidad * ($producto?->costo_promedio ?? 0), 0) }}
                        </td>
                        <td>
                            @if($stock->estaBajoMinimo())
                                <span class="chip ch-orange">⚠️ Bajo mínimo</span>
                            @elseif($stock->cantidad <= 0)
                                <span class="chip ch-red">Sin stock</span>
                            @else
                                <span class="chip ch-green">✓ Normal</span>
                            @endif
                        </td>
                        <td style="text-align:center;">
                            <button wire:click="abrirAjuste({{ $producto?->id }})"
                                    class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                    title="Ajustar stock manualmente">
                                ✏️ Ajustar
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay productos en esta bodega con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($stocks->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $stocks->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL AJUSTE ─────────────────────────────── --}}
    @if($ajustando_id && $producto_ajustando)
    <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('ajustando_id', null)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:380px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">

            <div style="font-size:17px;font-weight:700;margin-bottom:4px;">✏️ Ajuste de stock</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                {{ $producto_ajustando->nombre }}
            </div>

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

            <div class="field" style="margin-bottom:14px;">
                <label>Nueva cantidad en bodega</label>
                <input type="number"
                       wire:model="cantidad_nueva"
                       step="0.01" min="0"
                       placeholder="0.00"
                       style="font-size:20px;text-align:center;font-weight:700;padding:12px;" />
                <div style="font-size:11px;color:var(--label2);text-align:center;margin-top:4px;">
                    {{ $producto_ajustando->unidad_medida }}
                </div>
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Motivo del ajuste</label>
                <input type="text"
                       wire:model="motivo_ajuste"
                       placeholder="Ej: Conteo físico de inventario, merma, robo…" />
            </div>

            <div class="alert alert-orange" style="margin-bottom:16px;">
                <span style="flex-shrink:0;">ℹ️</span>
                <span style="font-size:11px;">
                    Todo ajuste queda registrado en el historial de movimientos
                    con usuario, fecha y motivo.
                </span>
            </div>

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

</div>