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

@section('contenido')
    <!-- Fuentes de iconos y librerías modernas -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .result-wrapper {
            max-width: 900px;
            margin: 20px auto;
            font-family: inherit;
        }

        .header-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 16px;
            padding: 28px 32px;
            color: #ffffff;
            box-shadow: 0 12px 30px -5px rgba(15, 23, 42, 0.3);
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }

        .status-badge-success {
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.4);
            color: #34d399;
            padding: 8px 18px;
            border-radius: 9999px;
            font-size: 0.88rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .status-badge-warning {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.4);
            color: #fbbf24;
            padding: 8px 18px;
            border-radius: 9999px;
            font-size: 0.88rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .card-panel {
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            padding: 28px;
            margin-bottom: 24px;
        }

        [data-theme='dark'] .card-panel {
            background: #1e293b;
            border-color: #334155;
            color: #f1f5f9;
        }

        .metric-card {
            border-radius: 14px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        [data-theme='dark'] .metric-card {
            border-color: #334155;
            background: rgba(30, 41, 59, 0.7);
        }

        .metric-card.card-blue {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
            border-color: rgba(59, 130, 246, 0.2);
        }
        .metric-card.card-red {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(248, 113, 113, 0.1) 100%);
            border-color: rgba(239, 68, 68, 0.2);
        }
        .metric-card.card-green {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.1) 100%);
            border-color: rgba(16, 185, 129, 0.2);
        }

        .metric-val {
            font-size: 1.85rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 4px;
        }

        .metric-label {
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #64748b;
        }

        [data-theme='dark'] .metric-label {
            color: #94a3b8;
        }

        .pill-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            background: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
        }

        [data-theme='dark'] .pill-badge {
            background: #334155;
            color: #e2e8f0;
            border-color: #475569;
        }

        .btn-modern-primary {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
            font-weight: 700;
            padding: 12px 24px;
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
            transition: all 0.2s ease;
        }

        .btn-modern-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
            color: #ffffff;
        }

        .btn-modern-outline {
            background: transparent;
            color: #475569;
            font-weight: 600;
            padding: 12px 22px;
            border-radius: 10px;
            border: 1px solid #cbd5e1;
            transition: all 0.2s ease;
        }
    </style>

    <div class="result-wrapper">
        <div class="header-card">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h2>
                        <i class="fa-solid fa-boxes-packing text-success"></i>
                        Ajuste de Inventario Finalizado
                    </h2>
                    <p>Actualización física de saldos y generación automática de movimientos en Kardex.</p>
                </div>
                <div>
                    @if($estado == 'ok')
                        <span class="status-badge-success">
                            <i class="fa-solid fa-circle-check"></i> Inventario Cerrado y Ajustado
                        </span>
                    @else
                        <span class="status-badge-warning">
                            <i class="fa-solid fa-triangle-exclamation"></i> Proceso Cancelado
                        </span>
                    @endif
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-3 pt-3 border-top border-secondary border-opacity-25">
                <span class="pill-badge">
                    <i class="fa-solid fa-hashtag text-primary"></i> Inventario: <strong>{{ $codigoInventario }}</strong>
                </span>
                <span class="pill-badge">
                    <i class="fa-solid fa-warehouse text-warning"></i> Bodega: <strong>#{{ $bodega }}</strong>
                </span>
                <span class="pill-badge">
                    <i class="fa-solid fa-layer-group text-info"></i> Modalidad: <strong>{{ $tipoComprovacio }}</strong>
                </span>
            </div>
        </div>

        @if($estado == 'ok')
            <div class="card-panel">
                <h4 class="mb-4 fw-bold" style="font-size: 1.15rem;">
                    <i class="fa-solid fa-file-invoice text-success me-2"></i>
                    Resumen de Movimientos Generados en Kardex
                </h4>

                <div class="row g-3 mb-4">
                    <div class="col-sm-4">
                        <div class="metric-card card-blue">
                            <span class="metric-label">Productos Ajustados</span>
                            <div class="metric-val text-primary">{{ $totalAjustados }}</div>
                            <small class="text-muted">Total referencias actualizadas</small>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="metric-card card-green">
                            <span class="metric-label">Costo Entradas (Sobrantes)</span>
                            <div class="metric-val text-success">${{ number_format($totalEntrada, 2, ',', '.') }}</div>
                            <small class="text-muted">Valorización ingresada</small>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="metric-card card-red">
                            <span class="metric-label">Costo Salidas (Faltantes)</span>
                            <div class="metric-val text-danger">${{ number_format($totalSalidad, 2, ',', '.') }}</div>
                            <small class="text-muted">Valorización descargada</small>
                        </div>
                    </div>
                </div>

                <div class="alert alert-success d-flex align-items-center mb-4 rounded-3 border-0 bg-success bg-opacity-10 text-dark">
                    <i class="fa-solid fa-circle-check text-success fs-4 me-3"></i>
                    <div>
                        <strong>Operación Completada:</strong> Se han actualizado los saldos actuales en la tabla de inventarios, se han registrado todas las entradas y salidas en el Kardex y el estado de la captura pasó a <strong>C (Cerrado)</strong>.
                    </div>
                </div>

                <div class="p-3 bg-light rounded-3 border d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <span class="fw-semibold text-secondary">
                        Puedes cerrar esta ventana para continuar trabajando en el sistema.
                    </span>
                    <button onclick="cerrarYRegresar()" class="btn btn-modern-primary">
                        <i class="fa-solid fa-check me-2"></i> Finalizar y Cerrar
                    </button>
                </div>
            </div>
        @else
            <div class="card-panel text-center py-5">
                <i class="fa-solid fa-triangle-exclamation text-warning mb-3" style="font-size: 3.5rem;"></i>
                <h4 class="fw-bold mb-2">Proceso Cancelado</h4>
                <p class="text-muted mb-4 max-w-md mx-auto">
                    {{ $mensaje }}
                </p>
                <button onclick="window.close()" class="btn btn-modern-outline">
                    <i class="fa-solid fa-arrow-left me-2"></i> Cerrar Ventana
                </button>
            </div>
        @endif
    </div>

    <script>
        function cerrarYRegresar() {
            if (window.opener && !window.opener.closed) {
                try {
                    window.opener.location.reload();
                } catch(e) {}
            }
            window.close();
        }
    </script>
@endsection