@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>
    <script src="{{ asset('js/sweetalert2@11.js') }}"></script>

    <style>
        .view-wrapper {
            font-family: inherit;
            color: #1e293b;
        }
        .header-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 14px;
            padding: 22px 28px;
            color: #ffffff;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
            margin-bottom: 24px;
        }
        .header-card h2 {
            font-size: 1.55rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin: 0;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .header-card p {
            font-size: 0.88rem;
            color: #94a3b8;
            margin: 6px 0 0 0;
        }
        .badge-integrity {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #34d399;
            padding: 8px 16px;
            border-radius: 9999px;
            font-size: 0.82rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .card-panel {
            background: #ffffff;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            padding: 24px;
            margin-bottom: 24px;
            transition: box-shadow 0.2s ease;
        }
        .card-panel:hover {
            box-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.08);
        }
        .search-chip {
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.78rem;
            font-weight: 600;
            color: #475569;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .search-input-group {
            position: relative;
            display: flex;
            align-items: stretch;
            width: 100%;
        }
        .search-input-control {
            border: 2px solid #cbd5e1;
            border-radius: 10px 0 0 10px !important;
            padding: 14px 18px 14px 45px;
            font-size: 1.05rem;
            font-weight: 600;
            color: #0f172a;
            transition: all 0.2s ease;
            width: 100%;
        }
        .search-input-control:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
            outline: none;
        }
        .search-icon-left {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            font-size: 1.15rem;
            z-index: 5;
            pointer-events: none;
        }
        .search-clear-btn {
            position: absolute;
            right: 140px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #94a3b8;
            font-size: 1.1rem;
            cursor: pointer;
            z-index: 5;
            padding: 4px 8px;
        }
        .search-clear-btn:hover {
            color: #0f172a;
        }
        .btn-search-main {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: #ffffff;
            border: none;
            border-radius: 0 10px 10px 0;
            font-weight: 700;
            font-size: 0.95rem;
            padding: 0 28px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        }
        .btn-search-main:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
            color: #ffffff;
            transform: translateY(-1px);
        }
        /* Results Table */
        .results-box {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px -3px rgba(0, 0, 0, 0.08);
            margin-top: 16px;
        }
        .results-box-header {
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            padding: 12px 20px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #475569;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sku-badge {
            background: #e0f2fe !important;
            border: 1px solid #bae6fd !important;
            color: #0369a1 !important;
            font-weight: 800 !important;
            font-size: 0.85rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            letter-spacing: 0.3px;
        }
        .barcode-badge {
            background: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #334155 !important;
            font-weight: 600 !important;
            font-size: 0.82rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            letter-spacing: 0.3px;
        }
        .pill-sku-old {
            background-color: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #334155 !important;
            font-weight: 700 !important;
            font-size: 0.85rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
        }
        .pill-sku-new {
            background-color: #dbeafe !important;
            border: 1px solid #93c5fd !important;
            color: #1e40af !important;
            font-weight: 800 !important;
            font-size: 0.88rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
        }
        .pill-status-success {
            background-color: #dcfce7 !important;
            border: 1px solid #86efac !important;
            color: #166534 !important;
            font-weight: 700 !important;
            font-size: 0.82rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
        }
        .pill-stock-success {
            background-color: #ecfdf5 !important;
            border: 1px solid #a7f3d0 !important;
            color: #065f46 !important;
            font-weight: 700 !important;
            font-size: 0.85rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
        }
        .pill-stock-empty {
            background-color: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            color: #94a3b8 !important;
            font-size: 0.85rem !important;
            padding: 4px 10px !important;
            border-radius: 6px !important;
            display: inline-block !important;
        }
        .btn-select-product {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.85rem;
            padding: 8px 16px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
            cursor: pointer;
        }
        .btn-select-product:hover {
            background: #2563eb;
            color: #ffffff;
            border-color: #2563eb;
            transform: translateX(2px);
        }
        /* KPI Cards */
        .kpi-stat-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            height: 100%;
            transition: transform 0.2s ease, background 0.2s ease;
        }
        .kpi-stat-card:hover {
            transform: translateY(-2px);
            background: #ffffff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        }
        .kpi-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
        .kpi-title {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #64748b;
            margin: 0;
        }
        .kpi-value-text {
            font-size: 1.15rem;
            font-weight: 800;
            color: #0f172a;
            margin: 2px 0 0 0;
            line-height: 1.2;
        }
        /* Diff Pill */
        .diff-container {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 6px;
        }
        .alert-safe-callout {
            background-color: #eff6ff;
            border-left: 4px solid #3b82f6;
            border-radius: 8px;
            padding: 14px 18px;
            color: #1e40af;
            font-size: 0.88rem;
        }
        .table-custom-history th {
            background-color: #f8fafc;
            color: #475569;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 10px 14px;
            border-bottom: 2px solid #e2e8f0;
        }
        .table-custom-history td {
            font-size: 0.88rem;
            padding: 10px 14px;
            vertical-align: middle;
        }
    </style>

    <div class="container-fluid px-3 py-3" style="max-width: 1400px; margin: 0 auto;">
        @livewire('cambiar-codigo')
    </div>

    <!-- SCRIPT DE INTEGRACIÓN CON SWEETALERT2 -->
    <script>
        function notificarSwal(tipo, data) {
            const payload = (data && data.detail) 
                ? (Array.isArray(data.detail) ? data.detail[0] : data.detail) 
                : (Array.isArray(data) ? data[0] : (data || {}));

            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: tipo,
                    title: payload.titulo || (tipo === 'success' ? '¡Éxito!' : 'Atención'),
                    text: payload.mensaje || '',
                    confirmButtonColor: (tipo === 'success' ? '#0f172a' : '#dc2626')
                });
            } else {
                alert((payload.titulo ? payload.titulo + ': ' : '') + (payload.mensaje || ''));
            }
        }

        // Compatibilidad con eventos Livewire 3 y Livewire 2
        document.addEventListener('livewire:init', function () {
            if (typeof Livewire !== 'undefined') {
                Livewire.on('swalSuccess', (data) => notificarSwal('success', data));
                Livewire.on('swalError', (data) => notificarSwal('error', data));
            }
        });

        document.addEventListener('livewire:load', function () {
            if (typeof Livewire !== 'undefined') {
                Livewire.on('swalSuccess', (data) => notificarSwal('success', data));
                Livewire.on('swalError', (data) => notificarSwal('error', data));
            }
        });

        // Eventos nativos disparados por Livewire ($this->dispatch)
        window.addEventListener('swalSuccess', (e) => notificarSwal('success', e));
        window.addEventListener('swalError', (e) => notificarSwal('error', e));

        function confirmarCambio() {
            const inputCodigo = document.getElementById('inputNuevoCodigo');
            const inputBarras = document.getElementById('inputNuevasBarras');

            const nuevoCod = inputCodigo ? inputCodigo.value.trim() : '';
            const nuevasBarras = inputBarras ? inputBarras.value.trim() : '';

            if (!nuevoCod) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campo Requerido',
                        text: 'El nuevo código SKU no puede estar vacío.'
                    });
                } else {
                    alert('El nuevo código SKU no puede estar vacío.');
                }
                return;
            }

            const dispararActualizacion = () => {
                if (typeof Livewire !== 'undefined') {
                    Livewire.dispatch('ejecutarActualizacionCodigo');
                    return;
                }
                const compEl = document.querySelector('[wire\\:id]');
                if (compEl && typeof Livewire !== 'undefined') {
                    const comp = Livewire.find(compEl.getAttribute('wire:id'));
                    if (comp && typeof comp.actualizarCodigo === 'function') {
                        comp.actualizarCodigo();
                    }
                }
            };

            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: '¿Confirmar Cambio de Código?',
                    html: `
                        <div class="text-left small" style="background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0;">
                            <p class="mb-2">Se actualizará el código primario del producto a: <strong class="text-primary font-weight-bold">${nuevoCod}</strong></p>
                            ${nuevasBarras ? `<p class="mb-2">Código de barras principal: <strong class="text-dark font-weight-bold">${nuevasBarras}</strong></p>` : ''}
                            <div class="alert alert-warning py-2 px-3 mb-0 mt-2" style="font-size: 0.8rem; border-radius: 6px;">
                                <i class="fa-solid fa-triangle-exclamation mr-1"></i> Esta acción actualizará en cascada los registros vinculados en inventarios, ventas, compras y kardex.
                            </div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#f59e0b',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: '<i class="fa-solid fa-check"></i> Sí, cambiar código',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        dispararActualizacion();
                    }
                });
            } else {
                if (confirm(`¿Está seguro de cambiar el código SKU a ${nuevoCod}?`)) {
                    dispararActualizacion();
                }
            }
        }
    </script>
@endsection