{{-- resources/views/livewire/inventario/traslados.blade.php --}}
<div>
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">🚚 Traslados entre bodegas</div>
            <div class="page-sub">Movimientos de inventario con trazabilidad completa</div>
        </div>
        <button wire:click="$set('mostrar_nuevo', true)" class="btn-blue">
            ➕ Nuevo traslado
        </button>
    </div>

    @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

    {{-- Filtro estado --}}
    <div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
        <button wire:click="$set('filtro_estado','')"
                class="{{ $filtro_estado === '' ? 'btn-blue' : 'btn-plain' }}"
                style="font-size:12px;padding:7px 14px;">Todos</button>
        @foreach($estados as $val => $label)
        <button wire:click="$set('filtro_estado','{{ $val }}')"
                class="{{ $filtro_estado === $val ? 'btn-blue' : 'btn-plain' }}"
                style="font-size:12px;padding:7px 14px;">{{ $label }}</button>
        @endforeach
    </div>

    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:800px;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Origen</th>
                        <th>Destino</th>
                        <th>Productos</th>
                        <th>Solicitado por</th>
                        <th>Fecha</th>
                        <th>Estado</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($traslados as $traslado)
                    <tr wire:key="tras-{{ $traslado->id }}">
                        <td class="td-mono" style="font-size:11px;">T-{{ str_pad($traslado->id, 4, '0', STR_PAD_LEFT) }}</td>
                        <td style="font-size:12px;font-weight:500;">{{ $traslado->origen?->nombre }}</td>
                        <td style="font-size:12px;font-weight:500;">{{ $traslado->destino?->nombre }}</td>
                        <td style="font-size:12px;">
                            {{ $traslado->lineas->count() }} producto(s)
                            <div style="font-size:10px;color:var(--label2);">
                                {{ $traslado->lineas->take(2)->map(fn($l) => $l->producto?->nombre)->implode(', ') }}
                                {{ $traslado->lineas->count() > 2 ? '…' : '' }}
                            </div>
                        </td>
                        <td style="font-size:12px;">{{ $traslado->solicitante?->nombre }}</td>
                        <td style="font-size:11px;color:var(--label2);">
                            {{ $traslado->created_at->format('d/m/Y H:i') }}
                        </td>
                        <td>
                            <span class="chip {{ match($traslado->estado) {
                                'recibido'   => 'ch-green',
                                'anulado'    => 'ch-red',
                                'en_transito'=> 'ch-blue',
                                default      => 'ch-orange',
                            } }}">
                                {{ $estados[$traslado->estado] ?? $traslado->estado }}
                            </span>
                        </td>
                        <td style="text-align:center;">
                            @if($traslado->estado === 'solicitado')
                            <button wire:click="recibirTraslado({{ $traslado->id }})"
                                    wire:confirm="¿Confirma la recepción del traslado T-{{ str_pad($traslado->id, 4, '0', STR_PAD_LEFT) }}?"
                                    class="btn-blue" style="font-size:11px;padding:6px 12px;">
                                ✅ Recibir
                            </button>
                            @else
                            <span style="font-size:11px;color:var(--label2);">—</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay traslados registrados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($traslados->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $traslados->links() }}
        </div>
        @endif
    </div>

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

            <div style="font-size:17px;font-weight:700;margin-bottom:20px;">🚚 Nuevo traslado</div>

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

            <div class="form-row" style="margin-bottom:14px;">
                <div class="field">
                    <label>Bodega origen</label>
                    <select wire:model.live="bodega_origen_id">
                        <option value="">Seleccionar…</option>
                        @foreach($bodegas as $b)
                        <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>Bodega destino</label>
                    <select wire:model="bodega_destino_id">
                        <option value="">Seleccionar…</option>
                        @foreach($bodegas as $b)
                        @if($b->id != $bodega_origen_id)
                        <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                        @endif
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Búsqueda de producto --}}
            @if($bodega_origen_id)
            <div style="position:relative;margin-bottom:16px;">
                <div class="field">
                    <label>Buscar producto para agregar</label>
                    <input type="text"
                           wire:model.live.debounce.300ms="busqueda_producto"
                           wire:keyup="buscarProducto"
                           placeholder="Nombre o SKU…" />
                </div>
                @if(count($resultados_producto) > 0)
                <div style="position:absolute;top:100%;left:0;right:0;z-index:50;background:#fff;
                            border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
                            border:1px solid var(--separator);overflow:hidden;">
                    @foreach($resultados_producto as $prod)
                    <div wire:click="seleccionarProductoLinea({{ count($lineas_traslado)-1 }}, {{ $prod['id'] }})"
                         style="padding:9px 14px;cursor:pointer;border-bottom:.5px solid var(--separator);font-size:12px;"
                         onmouseover="this.style.background='#F2F2F7'"
                         onmouseout="this.style.background='#fff'">
                        <strong>{{ $prod['nombre'] }}</strong>
                        <span style="color:var(--label2);margin-left:8px;">{{ $prod['sku'] }}</span>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
            @endif

            {{-- Líneas del traslado --}}
            @foreach($lineas_traslado as $i => $linea)
            <div wire:key="lt-{{ $i }}"
                 style="display:flex;gap:10px;align-items:center;padding:10px 12px;
                        background:var(--bg);border-radius:12px;margin-bottom:8px;">
                <div style="flex:1;font-size:12px;font-weight:500;">
                    {{ $linea['nombre'] ?: 'Seleccionar producto…' }}
                    @if($linea['producto_id'])
                    <div style="font-size:10px;color:var(--label2);">
                        Disponible: {{ $linea['stock_disponible'] }} {{ $linea['unidad_medida'] }}
                    </div>
                    @endif
                </div>
                @if($linea['producto_id'])
                <input type="number"
                       wire:model.live="lineas_traslado.{{ $i }}.cantidad"
                       min="0.01" step="0.01"
                       style="width:80px;text-align:right;font-size:13px;font-weight:600;
                              padding:8px;background:#fff;border:none;border-radius:8px;outline:none;" />
                <span style="font-size:11px;color:var(--label2);">{{ $linea['unidad_medida'] }}</span>
                @endif
                @if(count($lineas_traslado) > 1)
                <span wire:click="eliminarLineaTraslado({{ $i }})"
                      style="cursor:pointer;font-size:14px;color:var(--red);">✕</span>
                @endif
            </div>
            @endforeach

            <button wire:click="agregarLineaTraslado"
                    class="btn-plain" style="width:100%;justify-content:center;margin-bottom:16px;">
                ➕ Agregar otro producto
            </button>

            <div class="field" style="margin-bottom:20px;">
                <label>Notas (opcional)</label>
                <input type="text" wire:model="notas_traslado" placeholder="Observaciones del traslado…" />
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_nuevo', false)"
                        class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="crearTraslado"
                        wire:loading.attr="disabled"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove>🚚 Crear traslado</span>
                    <span wire:loading>Creando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

</div>