@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;
        }

        .header-card::after {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .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;
        }

        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px -4px rgba(0,0,0,0.08);
        }

        [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-card.card-cyan {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(34, 211, 238, 0.1) 100%);
            border-color: rgba(6, 182, 212, 0.2);
        }

        .metric-val {
            font-size: 2rem;
            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, #2563eb 0%, #1d4ed8 100%);
            color: #ffffff;
            font-weight: 700;
            padding: 12px 24px;
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
            transition: all 0.2s ease;
        }

        .btn-modern-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 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;
        }

        .btn-modern-outline:hover {
            background: #f8fafc;
            color: #1e293b;
            border-color: #94a3b8;
        }

        [data-theme='dark'] .btn-modern-outline {
            color: #cbd5e1;
            border-color: #475569;
        }
        [data-theme='dark'] .btn-modern-outline:hover {
            background: #334155;
            color: #f8fafc;
        }
    </style>

    <div class="result-wrapper">
        <!-- Header Principal -->
        <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-calculator text-primary"></i>
                        Comprobación de Inventario
                    </h2>
                    <p>Auditoría y cálculo comparativo de saldos físicos vs inventario teórico del sistema.</p>
                </div>
                <div>
                    @if($estado == 'ok')
                        <span class="status-badge-success">
                            <i class="fa-solid fa-circle-check"></i> Comprobación Exitosa
                        </span>
                    @else
                        <span class="status-badge-warning">
                            <i class="fa-solid fa-triangle-exclamation"></i> Proceso Cancelado
                        </span>
                    @endif
                </div>
            </div>

            <!-- Fila de Metadatos -->
            <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> Código: <strong>{{ $codigoInventario }}</strong>
                </span>
                <span class="pill-badge">
                    <i class="fa-solid fa-tag text-info"></i> Nombre: <strong>{{ $nombreInventario }}</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-success"></i> Modo: <strong>{{ $tipoComprovacio }}</strong>
                </span>
                <span class="pill-badge">
                    <i class="fa-solid fa-calendar text-secondary"></i> Fecha: <strong>{{ $fecha }}</strong>
                </span>
            </div>
        </div>

        @if($estado == 'ok')
            <!-- Panel de Métricas -->
            <div class="card-panel">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h4 class="mb-0 fw-bold" style="font-size: 1.15rem;">
                        <i class="fa-solid fa-chart-pie me-2 text-primary"></i>
                        Resumen de Resultados de la Comprobación
                    </h4>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-bold">
                        Total Evaluados: {{ $totalEscaneados + $totalNoEscaneados }}
                    </span>
                </div>

                <div class="row g-3 mb-4">
                    <!-- Escaneados -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="metric-card card-blue">
                            <div class="d-flex justify-content-between align-items-start">
                                <span class="metric-label">Escaneados</span>
                                <i class="fa-solid fa-barcode text-primary fs-5"></i>
                            </div>
                            <div class="metric-val text-primary">{{ $totalEscaneados }}</div>
                            <small class="text-muted">Referencias contadas</small>
                        </div>
                    </div>

                    <!-- Faltantes -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="metric-card card-red">
                            <div class="d-flex justify-content-between align-items-start">
                                <span class="metric-label">Faltantes</span>
                                <i class="fa-solid fa-arrow-trend-down text-danger fs-5"></i>
                            </div>
                            <div class="metric-val text-danger">{{ $faltantes }}</div>
                            <small class="text-muted">Físico menor al teórico</small>
                        </div>
                    </div>

                    <!-- Sobrantes -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="metric-card card-green">
                            <div class="d-flex justify-content-between align-items-start">
                                <span class="metric-label">Sobrantes</span>
                                <i class="fa-solid fa-arrow-trend-up text-success fs-5"></i>
                            </div>
                            <div class="metric-val text-success">{{ $sobrantes }}</div>
                            <small class="text-muted">Físico mayor al teórico</small>
                        </div>
                    </div>

                    <!-- Coincidentes -->
                    <div class="col-sm-6 col-lg-3">
                        <div class="metric-card card-cyan">
                            <div class="d-flex justify-content-between align-items-start">
                                <span class="metric-label">Exactos</span>
                                <i class="fa-solid fa-check-double text-info fs-5"></i>
                            </div>
                            <div class="metric-val text-info">{{ $coincidentes }}</div>
                            <small class="text-muted">Sin diferencia</small>
                        </div>
                    </div>
                </div>

                @if($tipoComprovacio == 'General' && $totalNoEscaneados > 0)
                    <div class="alert alert-info d-flex align-items-center mb-4 rounded-3 border-0 bg-info bg-opacity-10 text-dark">
                        <i class="fa-solid fa-circle-info text-info fs-4 me-3"></i>
                        <div>
                            <strong>Modo General Activo:</strong> Se incluyeron <strong>{{ $totalNoEscaneados }}</strong> productos del catálogo con inventario que no fueron escaneados en esta captura y se marcaron con saldo faltante para posterior ajuste a cero.
                        </div>
                    </div>
                @endif

                <!-- Mensaje de confirmación -->
                <div class="p-3 bg-light rounded-3 border d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fa-solid fa-shield-halved text-success fs-5"></i>
                        <span class="fw-semibold text-secondary">
                            Las diferencias de inventario han sido calculadas y guardadas correctamente.
                        </span>
                    </div>
                    <div class="d-flex gap-2">
                        <button onclick="cerrarYRegresar()" class="btn btn-modern-primary">
                            <i class="fa-solid fa-xmark me-2"></i> Cerrar y Ver Diferencias
                        </button>
                    </div>
                </div>
            </div>
        @else
            <!-- Panel de Error / Cancelación -->
            <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.focus();
                } catch(e) {}
            }
            window.close();
        }
    </script>
@endsection