@extends('../padre.padre')

@section('contenido')
<div class="container-fluid px-3 py-2">
    
    @php
        // Helper para conservar filtros actuales al navegar entre pestañas de estado
        $queryPestañas = function($nuevoEstado) use ($bodegaFiltro, $motivoFiltro, $buscar, $fechaDesde, $fechaHasta, $tipoFecha, $porPagina) {
            $params = [
                'estado'      => $nuevoEstado,
                'bodega'      => $bodegaFiltro,
                'motivo'      => $motivoFiltro,
                'buscar'      => $buscar,
                'por_pagina'  => $porPagina,
            ];
            if (!empty($fechaDesde)) $params['fecha_desde'] = $fechaDesde;
            if (!empty($fechaHasta)) $params['fecha_hasta'] = $fechaHasta;
            if ($tipoFecha !== 'auto') $params['tipo_fecha'] = $tipoFecha;
            return http_build_query($params);
        };
    @endphp

    <!-- 1. Encabezado Compacto -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 gap-2">
        <div class="d-flex align-items-center gap-2">
            <h5 class="fw-bold mb-0 text-dark">📦 Bodega Virtual / Cuarentena</h5>
            <span class="text-muted small d-none d-md-inline">| Control de averías, vencimientos y bajas contables</span>
        </div>
        <div class="d-flex gap-1 align-items-center">
            <button type="button" class="btn btn-primary btn-sm fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalIngresarCuarentena" title="Aislar y mover productos a cuarentena">
                <i class="fas fa-plus-circle me-1"></i> Aislar a Cuarentena
            </button>
            <a href="{{ url('/cuarentena/exportar') }}?{{ http_build_query(request()->query()) }}" class="btn btn-success btn-sm fw-bold shadow-sm" title="Descargar reporte en Excel con los filtros aplicados">
                <i class="fas fa-file-excel me-1"></i> Excel
            </a>
            @include('menu.botonRegresar')
        </div>
    </div>

    <!-- 2. Pestañas de Estado + Métricas / KPIs Integradas en una sola barra horizontal -->
    <div class="card shadow-sm border-0 mb-2 bg-white">
        <div class="card-body p-1 px-2 d-flex flex-wrap justify-content-between align-items-center gap-2">
            
            <!-- Pestañas a la izquierda -->
            <ul class="nav nav-pills p-0 m-0 gap-1 flex-nowrap overflow-auto" style="scrollbar-width: none;">
                <li class="nav-item">
                    <a class="nav-link py-1 px-2 small fw-bold {{ $estadoFiltro === 'retenido' ? 'active bg-danger text-white' : 'text-dark bg-light' }}" 
                       href="{{ url('/cuarentena') }}?{{ $queryPestañas('retenido') }}" style="border-radius: 6px;">
                        🔒 Retenidos 
                        <span class="badge {{ $estadoFiltro === 'retenido' ? 'bg-white text-danger' : 'bg-danger text-white' }} ms-1">
                            {{ number_format($counts['retenido'] ?? 0) }}
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 px-2 small fw-bold {{ $estadoFiltro === 'baja_merma' ? 'active bg-dark text-white' : 'text-dark bg-light' }}" 
                       href="{{ url('/cuarentena') }}?{{ $queryPestañas('baja_merma') }}" style="border-radius: 6px;">
                        🗑️ Historial Bajas 
                        <span class="badge {{ $estadoFiltro === 'baja_merma' ? 'bg-white text-dark' : 'bg-dark text-white' }} ms-1">
                            {{ number_format($counts['baja_merma'] ?? 0) }}
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 px-2 small fw-bold {{ $estadoFiltro === 'devuelto_proveedor' ? 'active bg-info text-dark' : 'text-dark bg-light' }}" 
                       href="{{ url('/cuarentena') }}?{{ $queryPestañas('devuelto_proveedor') }}" style="border-radius: 6px;">
                        🚚 Dev. Proveedor 
                        <span class="badge {{ $estadoFiltro === 'devuelto_proveedor' ? 'bg-dark text-white' : 'bg-info text-dark' }} ms-1">
                            {{ number_format($counts['devuelto_proveedor'] ?? 0) }}
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 px-2 small fw-bold {{ $estadoFiltro === 'reintegrado' ? 'active bg-success text-white' : 'text-dark bg-light' }}" 
                       href="{{ url('/cuarentena') }}?{{ $queryPestañas('reintegrado') }}" style="border-radius: 6px;">
                        ✅ Reintegrados 
                        <span class="badge {{ $estadoFiltro === 'reintegrado' ? 'bg-white text-success' : 'bg-success text-white' }} ms-1">
                            {{ number_format($counts['reintegrado'] ?? 0) }}
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-1 px-2 small fw-bold {{ $estadoFiltro === 'todos' ? 'active bg-secondary text-white' : 'text-dark bg-light' }}" 
                       href="{{ url('/cuarentena') }}?{{ $queryPestañas('todos') }}" style="border-radius: 6px;">
                        📋 Todos 
                        <span class="badge {{ $estadoFiltro === 'todos' ? 'bg-white text-secondary' : 'bg-secondary text-white' }} ms-1">
                            {{ number_format($counts['todos'] ?? 0) }}
                        </span>
                    </a>
                </li>
            </ul>

            <!-- Micro-KPIs a la derecha (Ultra compacto, sin ocupar filas extra) -->
            <div class="d-flex align-items-center gap-2 flex-wrap ms-auto text-nowrap small py-1">
                <span class="badge bg-light text-dark border py-1 px-2" title="Cantidad de registros en la vista">
                    📦 Ítems: <strong class="text-primary">{{ number_format($metricas->total_items ?? 0) }}</strong>
                </span>

                <span class="badge bg-light text-dark border py-1 px-2" title="Unidades totales">
                    🔢 Unidades: <strong>
                        @if(($metricas->total_frcc ?? 0) > 0 && ($metricas->total_cajas ?? 0) > 0)
                            {{ number_format($metricas->total_cajas ?? 0, 0) }} Cj + {{ number_format($metricas->total_frcc ?? 0, 0) }} Fr
                        @elseif(($metricas->total_frcc ?? 0) > 0)
                            {{ number_format($metricas->total_frcc ?? 0, 0) }} Fr
                        @else
                            {{ number_format($metricas->total_cajas ?? 0, 0) }} Cj
                        @endif
                    </strong>
                </span>

                <span class="badge bg-light text-dark border py-1 px-2" title="Valor económico total">
                    @if($estadoFiltro === 'baja_merma')
                        📉 Pérdida Merma: <strong class="text-danger">${{ number_format($metricas->total_costo ?? 0, 0, ',', '.') }}</strong>
                    @else
                        💰 Valor: <strong class="text-success">${{ number_format($metricas->total_costo ?? 0, 0, ',', '.') }}</strong>
                    @endif
                </span>

                @if($estadoFiltro === 'baja_merma')
                    <span class="badge bg-dark text-white py-1 px-2" title="Cuenta contable de causación">
                        📑 Cta: 531095
                    </span>
                @elseif($estadoFiltro === 'retenido' || $estadoFiltro === 'todos')
                    @if(($proximosVencer ?? 0) > 0)
                        <span class="badge bg-warning text-dark py-1 px-2" title="Próximos a vencer en menos de 30 días">
                            ⏳ Próx. Vencer: <strong>{{ number_format($proximosVencer ?? 0) }}</strong>
                        </span>
                    @endif
                @endif
            </div>

        </div>
    </div>

    <!-- 3. Aviso Contextual Compacto (1 sola línea) -->
    @if($estadoFiltro === 'baja_merma')
    <div class="alert alert-dark border-0 py-1 px-3 mb-2 small d-flex justify-content-between align-items-center shadow-sm" style="background-color: #1e293b; color: #f8fafc; border-radius: 6px;">
        <div>
            <strong class="text-danger">🗑️ Historial de Bajas / Mermas:</strong>
            <span class="text-light ms-1 opacity-90">Comprobantes oficiales <strong>BAJA-X</strong> registrados en la cuenta contable <strong>531095</strong> (Salida de Merma).</span>
        </div>
        <span class="badge bg-danger py-1 px-2">Gasto Cuenta 531095</span>
    </div>
    @elseif($estadoFiltro === 'devuelto_proveedor')
    <div class="alert alert-info border-0 py-1 px-3 mb-2 small d-flex justify-content-between align-items-center shadow-sm" style="border-radius: 6px;">
        <div>
            <strong class="text-primary">🚚 Devoluciones a Proveedor:</strong>
            <span class="text-dark ms-1">Productos retirados para trámite de reposición o nota crédito bajo comprobante <strong>DEV-PROV-X</strong>.</span>
        </div>
        <span class="badge bg-info text-dark py-1 px-2">Pendiente NC</span>
    </div>
    @elseif($estadoFiltro === 'reintegrado')
    <div class="alert alert-success border-0 py-1 px-3 mb-2 small d-flex justify-content-between align-items-center shadow-sm" style="border-radius: 6px;">
        <div>
            <strong class="text-success">✅ Reintegrados a Venta:</strong>
            <span class="text-dark ms-1">Productos reincorporados al inventario comercial del POS bajo comprobante <strong>REINT-X</strong> y sumados a Kardex.</span>
        </div>
        <span class="badge bg-success py-1 px-2">En Kardex</span>
    </div>
    @endif

    <!-- 4. Barra de Filtros Compacta -->
    <div class="card shadow-sm border-0 mb-2">
        <div class="card-body p-2">
            <form action="{{ url('/cuarentena') }}" method="GET" id="formFiltrosCuarentena" class="row g-2 align-items-end">
                <input type="hidden" name="estado" value="{{ $estadoFiltro }}">
                <input type="hidden" name="por_pagina" value="{{ $porPagina }}">

                <!-- Bodega -->
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-bold text-muted mb-1">Bodega</label>
                    <select name="bodega" class="form-select form-select-sm">
                        @if(($esAdminTotal ?? false) || count($bodegas) > 1)
                            <option value="0" {{ $bodegaFiltro == 0 ? 'selected' : '' }}>Todas las Bodegas</option>
                        @endif
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}" {{ $bodegaFiltro == $b->id ? 'selected' : '' }}>
                                {{ $b->nombreBodega }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Fecha Desde -->
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-bold text-muted mb-1">Fecha Desde</label>
                    <input type="date" name="fecha_desde" class="form-control form-control-sm" value="{{ $fechaDesde }}">
                </div>

                <!-- Fecha Hasta -->
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-bold text-muted mb-1">Fecha Hasta</label>
                    <input type="date" name="fecha_hasta" class="form-control form-control-sm" value="{{ $fechaHasta }}">
                </div>

                <!-- Motivo -->
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-bold text-muted mb-1">Motivo</label>
                    <select name="motivo" class="form-select form-select-sm">
                        <option value="todos" {{ $motivoFiltro == 'todos' ? 'selected' : '' }}>Todos los Motivos</option>
                        <option value="averia" {{ $motivoFiltro == 'averia' ? 'selected' : '' }}>Averiado / Roto</option>
                        <option value="proximo_vencer" {{ $motivoFiltro == 'proximo_vencer' ? 'selected' : '' }}>Próximo a Vencer</option>
                        <option value="cuarentena" {{ $motivoFiltro == 'cuarentena' ? 'selected' : '' }}>Cuarentena</option>
                        <option value="devolucion_proveedor" {{ $motivoFiltro == 'devolucion_proveedor' ? 'selected' : '' }}>Devolución Prov.</option>
                    </select>
                </div>

                <!-- Buscar -->
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-bold text-muted mb-1">Buscar Producto o #</label>
                    <input type="text" name="buscar" class="form-control form-control-sm" placeholder="Nombre, SKU, lote, #..." value="{{ $buscar }}">
                </div>

                <!-- Botones Claros con Texto Visible -->
                <div class="col-md-2 col-sm-12 d-flex gap-1">
                    <button type="submit" class="btn btn-primary btn-sm fw-bold flex-grow-1" title="Aplicar filtros de búsqueda">
                        Filtrar
                    </button>
                    <a href="{{ url('/cuarentena') }}?estado={{ $estadoFiltro }}" class="btn btn-outline-secondary btn-sm px-3" title="Limpiar todos los filtros">
                        Limpiar
                    </a>
                </div>

            </form>
        </div>
    </div>

    <!-- Barra Flotante / Acciones Masivas (para productos retenidos) -->
    <div id="barraAccionesMasivas" class="card shadow border-0 mb-2 bg-white" style="display: none; border-left: 5px solid #0d6efd !important; border-radius: 8px;">
        <div class="card-body py-1 px-3 d-flex flex-wrap justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-primary fs-7 px-2 py-1" id="lblContadorSeleccionados">0 seleccionados</span>
                <span class="text-dark fw-bold small">Acciones en lote:</span>
            </div>
            <div class="d-flex gap-1 mt-1 mt-md-0 flex-wrap">
                <button type="button" class="btn btn-success btn-sm fw-bold px-2 py-1 shadow-sm" id="btnReintegrarMasivo">
                    🔄 Reintegrar a Venta
                </button>
                <button type="button" class="btn btn-danger btn-sm fw-bold px-2 py-1 shadow-sm" id="btnBajaMasiva">
                    💥 Dar de Baja (531095)
                </button>
                <button type="button" class="btn btn-info btn-sm fw-bold px-2 py-1 shadow-sm text-dark" id="btnDevolverMasivo">
                    🚚 Devolver a Prov.
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" id="btnDeseleccionarTodo">
                    ✕ Desmarcar
                </button>
            </div>
        </div>
    </div>

    <!-- 5. Tabla Principal de Productos (Alta densidad visual y espacio óptimo) -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0" style="font-size: 12px;">
                    <thead class="table-dark">
                        <tr style="font-size: 12px;">
                            <th style="width: 35px;" class="text-center py-2">
                                <input type="checkbox" id="checkAllCuarentena" class="form-check-input" title="Seleccionar todos los retenidos de esta página">
                            </th>
                            <th class="py-2">Ingreso</th>
                            <th class="py-2">Bodega</th>
                            <th class="py-2">Producto</th>
                            <th class="text-center py-2">Cant. Caja</th>
                            <th class="text-center py-2">Cant. Frcc</th>
                            <th class="py-2">Lote</th>
                            <th class="py-2">Vencimiento</th>
                            <th class="text-end py-2">Costo Total</th>
                            <th class="py-2">Motivo</th>
                            <th class="py-2">Estado</th>
                            <th class="text-center py-2" style="min-width: 150px;">
                                {{ $estadoFiltro === 'retenido' ? 'Acciones' : 'Resolución' }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($items as $item)
                        @php
                            $factorProd = ($item->factor && $item->factor > 1) ? floatval($item->factor) : 1;
                            $costoTotalItem = (floatval($item->cantidad_caja) * floatval($item->costo_unitario)) + 
                                              (floatval($item->cantidad_frcc) * (floatval($item->costo_unitario) / $factorProd));
                        @endphp
                        <tr>
                            <td class="text-center py-1">
                                @if($item->estado === 'retenido')
                                    <input type="checkbox" class="form-check-input checkItemCuarentena" value="{{ $item->id }}" data-costo="{{ $costoTotalItem }}">
                                @else
                                    <input type="checkbox" class="form-check-input" disabled title="Este registro ya fue resuelto">
                                @endif
                            </td>
                            <td class="py-1">
                                <span class="badge bg-light text-primary border fw-bold">{{ $item->numero_movimiento ?? ('CUAR-' . $item->id) }}</span><br>
                                <small class="text-muted" style="font-size: 11px;">{{ substr($item->fecha_ingreso, 0, 10) }} {{ substr($item->fecha_ingreso, 11, 5) }}</small>
                            </td>
                            <td class="py-1">
                                <span class="badge bg-light text-dark border">{{ $item->nombreBodega ?? 'Bodega ' . $item->idbodega }}</span>
                            </td>
                            <td class="py-1">
                                <strong class="text-dark">{{ $item->nombre_producto }}</strong><br>
                                <small class="text-muted" style="font-size: 11px;">Cód: {{ $item->codigoProd }} | Barras: {{ $item->barras ?: 'S/N' }}</small>
                                @if(!empty($item->observaciones))
                                    <div class="text-danger italic" style="font-size: 11px;">📝 {{ $item->observaciones }}</div>
                                @endif
                            </td>
                            <td class="text-center fw-bold text-danger py-1">{{ number_format($item->cantidad_caja, 2) }}</td>
                            <td class="text-center py-1">{{ number_format($item->cantidad_frcc, 2) }}</td>
                            <td class="py-1">
                                @if(!empty($item->lote))
                                    <span class="badge bg-secondary text-white">{{ $item->lote }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="py-1">
                                @if(!empty($item->fechaVencimiento) && $item->fechaVencimiento !== '0000-00-00')
                                    @php
                                        $diasVenc = (strtotime($item->fechaVencimiento) - strtotime(date('Y-m-d'))) / 86400;
                                    @endphp
                                    <span class="badge {{ $diasVenc <= 0 ? 'bg-danger' : ($diasVenc <= 30 ? 'bg-warning text-dark' : 'bg-info') }}">
                                        {{ $item->fechaVencimiento }} ({{ intval($diasVenc) }}d)
                                    </span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-end fw-bold text-dark py-1">
                                ${{ number_format($costoTotalItem, 0, ',', '.') }}
                            </td>
                            <td class="py-1">
                                @php
                                    $motivosMap = [
                                        'averia' => ['bg-danger', 'Averiado'],
                                        'proximo_vencer' => ['bg-warning text-dark', 'Próx. Vencer'],
                                        'cuarentena' => ['bg-info text-white', 'Cuarentena'],
                                        'devolucion_proveedor' => ['bg-primary text-white', 'Dev. Prov.']
                                    ];
                                    $badge = $motivosMap[$item->motivo] ?? ['bg-secondary', $item->motivo];
                                @endphp
                                <span class="badge {{ $badge[0] }}">{{ $badge[1] }}</span>
                            </td>
                            <td class="py-1">
                                @if($item->estado === 'retenido')
                                    <span class="badge bg-danger text-white">🔒 Retenido</span>
                                @elseif($item->estado === 'reintegrado')
                                    <span class="badge bg-success text-white">✅ Reintegrado</span>
                                @elseif($item->estado === 'baja_merma')
                                    <span class="badge bg-dark text-white">🗑️ Baja</span>
                                @elseif($item->estado === 'devuelto_proveedor')
                                    <span class="badge bg-info text-dark">🚚 Devuelto</span>
                                @endif
                            </td>
                            <td class="text-center py-1">
                                @if($item->estado === 'retenido')
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-success btn-sm py-0 px-1" title="Reintegrar a la Venta" onclick="accionCuarentena({{ $item->id }}, 'reintegrar', '{{ addslashes($item->nombre_producto) }}')">
                                            ✅ Reint.
                                        </button>
                                        <button type="button" class="btn btn-outline-danger btn-sm py-0 px-1" title="Dar de Baja Definitiva (Merma 531095)" onclick="accionCuarentena({{ $item->id }}, 'baja', '{{ addslashes($item->nombre_producto) }}')">
                                            🗑️ Baja
                                        </button>
                                        <button type="button" class="btn btn-outline-info btn-sm text-dark py-0 px-1" title="Devolver a Proveedor" onclick="accionCuarentena({{ $item->id }}, 'devolver', '{{ addslashes($item->nombre_producto) }}')">
                                            🚚 Dev.
                                        </button>
                                    </div>
                                @elseif($item->estado === 'baja_merma')
                                    <div>
                                        <span class="badge bg-danger fw-bold">{{ $item->numero_resolucion ?? 'BAJA' }}</span>
                                        <div class="text-muted" style="font-size: 11px;">👤 {{ $item->usuario_resolucion ?? 'admin' }} | 📅 {{ substr($item->fecha_resolucion, 0, 10) }}</div>
                                        @if(!empty($item->motivo_resolucion))
                                            <div class="text-secondary fst-italic" style="font-size: 11px;" title="{{ $item->motivo_resolucion }}">📝 {{ \Illuminate\Support\Str::limit($item->motivo_resolucion, 25) }}</div>
                                        @endif
                                        <span class="badge bg-light text-dark border">Cta. 531095</span>
                                    </div>
                                @elseif($item->estado === 'reintegrado')
                                    <div>
                                        <span class="badge bg-success fw-bold">{{ $item->numero_resolucion ?? 'REINT' }}</span>
                                        <div class="text-muted" style="font-size: 11px;">👤 {{ $item->usuario_resolucion ?? 'admin' }} | 📅 {{ substr($item->fecha_resolucion, 0, 10) }}</div>
                                        @if(!empty($item->motivo_resolucion))
                                            <div class="text-secondary fst-italic" style="font-size: 11px;" title="{{ $item->motivo_resolucion }}">📝 {{ \Illuminate\Support\Str::limit($item->motivo_resolucion, 25) }}</div>
                                        @endif
                                        <span class="badge bg-light text-success border">Kardex</span>
                                    </div>
                                @elseif($item->estado === 'devuelto_proveedor')
                                    <div>
                                        <span class="badge bg-info text-dark fw-bold">{{ $item->numero_resolucion ?? 'DEV-PROV' }}</span>
                                        <div class="text-muted" style="font-size: 11px;">👤 {{ $item->usuario_resolucion ?? 'admin' }} | 📅 {{ substr($item->fecha_resolucion, 0, 10) }}</div>
                                        @if(!empty($item->motivo_resolucion))
                                            <div class="text-secondary fst-italic" style="font-size: 11px;" title="{{ $item->motivo_resolucion }}">📝 {{ \Illuminate\Support\Str::limit($item->motivo_resolucion, 25) }}</div>
                                        @endif
                                        <span class="badge bg-light text-dark border">Proveedor</span>
                                    </div>
                                @else
                                    @if(!empty($item->numero_resolucion))
                                        <span class="badge bg-light text-success border fw-bold">{{ $item->numero_resolucion }}</span><br>
                                    @endif
                                    <small class="text-muted">{{ $item->motivo_resolucion ?: 'Resuelto' }}</small>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="12" class="text-center py-4 text-muted">
                                <div class="fs-2 mb-1">📭</div>
                                <strong class="small">No se encontraron registros con los filtros seleccionados</strong>
                                <p class="small text-secondary mb-0">Puedes cambiar de pestaña arriba, ajustar fechas o limpiar filtros.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 6. Paginador Compacto -->
        <div class="card-footer bg-white border-0 py-2">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div class="text-muted small">
                    @if($items->total() > 0)
                        Mostrando <strong>{{ $items->firstItem() }}</strong> - <strong>{{ $items->lastItem() }}</strong> de <strong>{{ number_format($items->total()) }}</strong> registros
                    @else
                        0 registros
                    @endif
                </div>

                <div>
                    {{ $items->appends(request()->query())->links() }}
                </div>

                <div class="d-flex align-items-center gap-1">
                    <span class="small text-muted">Filas:</span>
                    <select class="form-select form-select-sm py-0" style="width: 65px; height: 28px;" onchange="cambiarPorPagina(this.value)">
                        <option value="10" {{ $porPagina == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ $porPagina == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ $porPagina == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ $porPagina == 100 ? 'selected' : '' }}>100</option>
                        <option value="200" {{ $porPagina == 200 ? 'selected' : '' }}>200</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Modal para Aislar / Ingresar Producto a Cuarentena -->
<div class="modal fade" id="modalIngresarCuarentena" tabindex="-1" aria-labelledby="modalIngresarCuarentenaLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-dark text-white py-2">
                <h6 class="modal-title fw-bold" id="modalIngresarCuarentenaLabel">
                    <i class="fas fa-boxes me-2 text-warning"></i> Aislar Producto / Ingresar a Cuarentena
                </h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <form id="formIngresarCuarentena" autocomplete="off">
                <div class="modal-body p-3">
                    <div class="alert alert-light border small text-muted mb-2 py-1 px-2">
                        <i class="fas fa-info-circle text-primary me-1"></i> 
                        El producto será descontado del inventario vendible en la bodega y quedará <strong>Retenido</strong> bajo documento <strong>CUAR-X</strong>.
                    </div>

                    <div class="row g-2">
                        <!-- Bodega -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Bodega Origen <span class="text-danger">*</span></label>
                            <select id="modalBodega" name="idbodega" class="form-select form-select-sm" required>
                                @foreach($bodegas as $b)
                                    <option value="{{ $b->id }}" {{ $bodegaFiltro == $b->id ? 'selected' : '' }}>
                                        {{ $b->nombreBodega }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Motivo -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Motivo de Aislamiento <span class="text-danger">*</span></label>
                            <select id="modalMotivo" name="motivo" class="form-select form-select-sm" required>
                                <option value="averia">Averiado / Roto / Dañado</option>
                                <option value="proximo_vencer">Próximo a Vencer</option>
                                <option value="cuarentena">Cuarentena / En Revisión Técnica</option>
                                <option value="devolucion_proveedor">Para Devolución a Proveedor</option>
                            </select>
                        </div>

                        <!-- Buscador en vivo de producto -->
                        <div class="col-12 position-relative">
                            <label class="form-label fw-bold small text-muted mb-1">Buscar Producto <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-search"></i></span>
                                <input type="text" id="modalInputBuscarProd" class="form-control form-control-sm" placeholder="Escriba código de barras, SKU o nombre del producto..." autocomplete="off">
                            </div>
                            <!-- Dropdown con resultados flotantes -->
                            <div id="modalListaResultadosProd" class="list-group position-absolute w-100 shadow mt-1" style="max-height: 220px; overflow-y: auto; z-index: 1055; display: none;"></div>
                            <input type="hidden" id="modalCodigoProd" name="codigoProd" required>
                        </div>

                        <!-- Tarjeta con resumen del producto seleccionado -->
                        <div class="col-12" id="modalTarjetaProdSeleccionado" style="display: none;">
                            <div class="p-2 bg-light rounded-2 border border-primary border-opacity-25 d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark small" id="txtProdNombre"></div>
                                    <div class="small text-muted" style="font-size: 11px;">
                                        Código: <strong id="txtProdCodigo"></strong> | 
                                        Barras: <span id="txtProdBarras"></span> | 
                                        Factor: <span id="txtProdFactor"></span>
                                    </div>
                                    <div class="small mt-1 text-primary fw-bold" style="font-size: 11px;">
                                        Stock en bodega: <span id="txtProdStock">0</span> Cj | Costo: $<span id="txtProdCosto">0</span>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2" id="btnQuitarProdSeleccionado" title="Cambiar producto">
                                    <i class="fas fa-times"></i> Cambiar
                                </button>
                            </div>
                        </div>

                        <!-- Cantidad Cajas y Fracciones -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Cantidad a Retener (Cajas)</label>
                            <input type="number" step="0.01" min="0" id="modalCantCaja" name="cantidad_caja" class="form-control form-control-sm" value="0">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Cantidad a Retener (Fracciones)</label>
                            <input type="number" step="0.01" min="0" id="modalCantFrcc" name="cantidad_frcc" class="form-control form-control-sm" value="0">
                        </div>

                        <!-- Lote y Vencimiento -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Número de Lote (Opcional)</label>
                            <input type="text" id="modalLote" name="lote" class="form-control form-control-sm" placeholder="Ej: LOTE-1234">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted mb-1">Fecha de Vencimiento (Opcional)</label>
                            <input type="date" id="modalFechaVenc" name="fechaVencimiento" class="form-control form-control-sm">
                        </div>

                        <!-- Observaciones -->
                        <div class="col-12">
                            <label class="form-label fw-bold small text-muted mb-1">Observaciones</label>
                            <input type="text" id="modalObservaciones" name="observaciones" class="form-control form-control-sm" placeholder="Describa el motivo, estado físico, etc...">
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary btn-sm fw-bold px-3" id="btnGuardarIngresoCuarentena">
                        <i class="fas fa-shield-alt me-1"></i> Confirmar Aislamiento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Script interactivo -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkAll = document.getElementById('checkAllCuarentena');
    const checks = document.querySelectorAll('.checkItemCuarentena');
    const barra = document.getElementById('barraAccionesMasivas');
    const lblContador = document.getElementById('lblContadorSeleccionados');

    function actualizarSeleccion() {
        let cant = 0;
        checks.forEach(cb => { if (cb.checked) cant++; });
        if (cant > 0) {
            barra.style.display = 'block';
            lblContador.innerText = `${cant} producto(s) seleccionado(s)`;
        } else {
            barra.style.display = 'none';
        }
        if (checkAll && checks.length > 0) {
            checkAll.checked = (cant === checks.length);
        }
    }

    if (checkAll) {
        checkAll.addEventListener('change', function() {
            checks.forEach(cb => { cb.checked = this.checked; });
            actualizarSeleccion();
        });
    }

    checks.forEach(cb => {
        cb.addEventListener('change', actualizarSeleccion);
    });

    document.getElementById('btnDeseleccionarTodo')?.addEventListener('click', function() {
        if (checkAll) checkAll.checked = false;
        checks.forEach(cb => { cb.checked = false; });
        actualizarSeleccion();
    });

    document.getElementById('btnReintegrarMasivo')?.addEventListener('click', function() {
        accionCuarentenaMasiva('reintegrar');
    });

    document.getElementById('btnBajaMasiva')?.addEventListener('click', function() {
        accionCuarentenaMasiva('baja');
    });

    document.getElementById('btnDevolverMasivo')?.addEventListener('click', function() {
        accionCuarentenaMasiva('devolver');
    });

    // ==========================================
    // LÓGICA DE BÚSQUEDA Y MODAL DE INGRESO
    // ==========================================
    const inputBuscarProd = document.getElementById('modalInputBuscarProd');
    const listaResultados = document.getElementById('modalListaResultadosProd');
    const tarjetaProd = document.getElementById('modalTarjetaProdSeleccionado');
    const hiddenCodigoProd = document.getElementById('modalCodigoProd');
    const selectBodega = document.getElementById('modalBodega');
    let timerBusqueda = null;

    if (inputBuscarProd) {
        inputBuscarProd.addEventListener('input', function() {
            clearTimeout(timerBusqueda);
            const query = this.value.trim();
            if (query.length < 2) {
                listaResultados.style.display = 'none';
                listaResultados.innerHTML = '';
                return;
            }

            timerBusqueda = setTimeout(() => {
                const bodegaId = selectBodega.value;
                fetch(`{{ url('/cuarentena/buscar-producto') }}?q=${encodeURIComponent(query)}&bodega=${bodegaId}`)
                    .then(r => r.json())
                    .then(prods => {
                        listaResultados.innerHTML = '';
                        if (!prods || prods.length === 0) {
                            listaResultados.innerHTML = `<div class="list-group-item text-muted small py-2">No se encontraron productos coincidentes.</div>`;
                            listaResultados.style.display = 'block';
                            return;
                        }

                        prods.forEach(p => {
                            const item = document.createElement('a');
                            item.href = '#';
                            item.className = 'list-group-item list-group-item-action py-1 px-2';
                            item.innerHTML = `
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong class="text-dark small">${p.nombre}</strong>
                                    <span class="badge bg-light text-primary border">Stock: ${p.inventario} Cj</span>
                                </div>
                                <div class="small text-muted" style="font-size: 11px;">
                                    Cód: ${p.codigo} | Barras: ${p.barras || 'S/N'} | Costo: $${Number(p.costocaja || 0).toLocaleString()}
                                </div>
                            `;
                            item.addEventListener('click', function(e) {
                                e.preventDefault();
                                seleccionarProductoModal(p);
                            });
                            listaResultados.appendChild(item);
                        });
                        listaResultados.style.display = 'block';
                    })
                    .catch(err => console.error(err));
            }, 300);
        });

        document.addEventListener('click', function(e) {
            if (!inputBuscarProd.contains(e.target) && !listaResultados.contains(e.target)) {
                listaResultados.style.display = 'none';
            }
        });
    }

    function seleccionarProductoModal(p) {
        hiddenCodigoProd.value = p.codigo;
        document.getElementById('txtProdNombre').innerText = p.nombre;
        document.getElementById('txtProdCodigo').innerText = p.codigo;
        document.getElementById('txtProdBarras').innerText = p.barras || 'S/N';
        document.getElementById('txtProdFactor').innerText = p.factor || '1';
        document.getElementById('txtProdStock').innerText = p.inventario || '0';
        document.getElementById('txtProdCosto').innerText = Number(p.costocaja || 0).toLocaleString();

        tarjetaProd.style.display = 'block';
        listaResultados.style.display = 'none';
        inputBuscarProd.value = '';
    }

    document.getElementById('btnQuitarProdSeleccionado')?.addEventListener('click', function() {
        hiddenCodigoProd.value = '';
        tarjetaProd.style.display = 'none';
        inputBuscarProd.focus();
    });

    const formIngresar = document.getElementById('formIngresarCuarentena');
    if (formIngresar) {
        formIngresar.addEventListener('submit', function(e) {
            e.preventDefault();
            const codProd = hiddenCodigoProd.value;
            if (!codProd) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire('Atención', 'Por favor busca y selecciona un producto.', 'warning');
                } else {
                    alert('Por favor busca y selecciona un producto.');
                }
                return;
            }

            const cantCaja = parseFloat(document.getElementById('modalCantCaja').value || 0);
            const cantFrcc = parseFloat(document.getElementById('modalCantFrcc').value || 0);
            if (cantCaja <= 0 && cantFrcc <= 0) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire('Atención', 'Debe indicar una cantidad mayor a cero en cajas o fracciones.', 'warning');
                } else {
                    alert('Debe indicar una cantidad mayor a cero en cajas o fracciones.');
                }
                return;
            }

            const payload = {
                idbodega: selectBodega.value,
                codigoProd: codProd,
                cantidad_caja: cantCaja,
                cantidad_frcc: cantFrcc,
                lote: document.getElementById('modalLote').value,
                fechaVencimiento: document.getElementById('modalFechaVenc').value,
                motivo: document.getElementById('modalMotivo').value,
                observaciones: document.getElementById('modalObservaciones').value
            };

            ejecutarAccion('{{ url("/cuarentena/ingresar") }}', payload);
        });
    }
});

function setFechasRapidas(tipo) {
    const fDesde = document.querySelector('input[name="fecha_desde"]');
    const fHasta = document.querySelector('input[name="fecha_hasta"]');
    const hoy = new Date();
    const pad = n => n < 10 ? '0' + n : n;
    const format = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;

    if (tipo === 'hoy') {
        const str = format(hoy);
        if (fDesde) fDesde.value = str;
        if (fHasta) fHasta.value = str;
    } else if (tipo === 'mes') {
        const primerDia = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
        if (fDesde) fDesde.value = format(primerDia);
        if (fHasta) fHasta.value = format(hoy);
    }
    document.getElementById('formFiltrosCuarentena')?.submit();
}

function cambiarPorPagina(val) {
    const url = new URL(window.location.href);
    url.searchParams.set('por_pagina', val);
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

function accionCuarentena(id, tipo, nombre) {
    let titulo = '';
    let texto = '';
    let confirmText = '';
    let confirmColor = '';
    let url = '';

    if (tipo === 'reintegrar') {
        titulo = '¿Reintegrar a la Venta?';
        texto = `Se sumará la existencia nuevamente al inventario vendible de ${nombre}.`;
        confirmText = 'Sí, Reintegrar';
        confirmColor = '#198754';
        url = '{{ url("/cuarentena/reintegrar") }}';
    } else if (tipo === 'baja') {
        titulo = '¿Dar de Baja Definitiva (Merma)?';
        texto = `Se registrará la pérdida contable de ${nombre} a la cuenta 531095 (Gastos Vencimientos/Mermas).`;
        confirmText = 'Sí, Dar de Baja';
        confirmColor = '#dc3545';
        url = '{{ url("/cuarentena/baja") }}';
    } else if (tipo === 'devolver') {
        titulo = '¿Devolver a Proveedor?';
        texto = `Se marcará ${nombre} como devuelto al proveedor para nota crédito o reposición.`;
        confirmText = 'Sí, Devolver a Proveedor';
        confirmColor = '#0dcaf0';
        url = '{{ url("/cuarentena/devolver") }}';
    }

    if (typeof Swal !== 'undefined') {
        Swal.fire({
            title: titulo,
            text: texto,
            icon: tipo === 'baja' ? 'warning' : 'question',
            input: 'text',
            inputPlaceholder: 'Observación o justificación (opcional)...',
            showCancelButton: true,
            confirmButtonColor: confirmColor,
            confirmButtonText: confirmText,
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                ejecutarAccion(url, { id: id, motivo_resolucion: result.value || '' });
            }
        });
    } else {
        let motivo = prompt(texto + "\nIngrese observación (opcional):");
        if (motivo !== null) {
            ejecutarAccion(url, { id: id, motivo_resolucion: motivo });
        }
    }
}

function accionCuarentenaMasiva(tipo) {
    const seleccionados = [];
    document.querySelectorAll('.checkItemCuarentena:checked').forEach(cb => {
        seleccionados.push(cb.value);
    });

    if (seleccionados.length === 0) {
        if (typeof Swal !== 'undefined') {
            Swal.fire('Atención', 'Por favor selecciona al menos un producto con la casilla de verificación.', 'warning');
        } else {
            alert('Por favor selecciona al menos un producto.');
        }
        return;
    }

    let cant = seleccionados.length;
    let titulo = '';
    let texto = '';
    let confirmText = '';
    let confirmColor = '';
    let url = '';

    if (tipo === 'reintegrar') {
        titulo = `¿Reintegrar ${cant} producto(s) a la Venta?`;
        texto = `Se sumará la existencia de los ${cant} productos nuevamente al inventario vendible en el POS.`;
        confirmText = `Sí, Reintegrar (${cant})`;
        confirmColor = '#198754';
        url = '{{ url("/cuarentena/reintegrar") }}';
    } else if (tipo === 'baja') {
        titulo = `¿Dar de Baja Definitiva a ${cant} producto(s)?`;
        texto = `Se registrará la pérdida contable de los ${cant} productos a la cuenta 531095 (Gastos Vencimientos/Mermas).`;
        confirmText = `Sí, Dar de Baja (${cant})`;
        confirmColor = '#dc3545';
        url = '{{ url("/cuarentena/baja") }}';
    } else if (tipo === 'devolver') {
        titulo = `¿Devolver ${cant} producto(s) al Proveedor?`;
        texto = `Se marcarán los ${cant} productos como devueltos al proveedor para trámite de nota crédito.`;
        confirmText = `Sí, Devolver (${cant})`;
        confirmColor = '#0dcaf0';
        url = '{{ url("/cuarentena/devolver") }}';
    }

    if (typeof Swal !== 'undefined') {
        Swal.fire({
            title: titulo,
            text: texto,
            icon: tipo === 'baja' ? 'warning' : 'question',
            input: 'text',
            inputPlaceholder: 'Observación o motivo para el lote (opcional)...',
            showCancelButton: true,
            confirmButtonColor: confirmColor,
            confirmButtonText: confirmText,
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                ejecutarAccion(url, { ids: seleccionados, motivo_resolucion: result.value || '' });
            }
        });
    } else {
        let motivo = prompt(texto + "\nIngrese observación (opcional):");
        if (motivo !== null) {
            ejecutarAccion(url, { ids: seleccionados, motivo_resolucion: motivo });
        }
    }
}

function ejecutarAccion(url, payload) {
    if (typeof Swal !== 'undefined') {
        Swal.fire({
            title: 'Procesando...',
            text: 'Por favor espere un momento.',
            allowOutsideClick: false,
            didOpen: () => { Swal.showLoading(); }
        });
    }

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(payload)
    })
    .then(r => r.json())
    .then(res => {
        if (res.status === 'ok') {
            if (typeof Swal !== 'undefined') {
                Swal.fire('¡Éxito!', res.mensaje, 'success').then(() => location.reload());
            } else {
                alert(res.mensaje);
                location.reload();
            }
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire('Error', res.mensaje || 'Ocurrió un error', 'error');
            } else {
                alert(res.mensaje || 'Ocurrió un error');
            }
        }
    })
    .catch(err => {
        console.error(err);
        if (typeof Swal !== 'undefined') {
            Swal.fire('Error', 'Error de comunicación con el servidor', 'error');
        } else {
            alert('Error de comunicación con el servidor');
        }
    });
}
</script>
@endsection