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

@section('contenido') 
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
        <div>
            <h1 class="mb-0">Importar Precios/Inventarios</h1>
            <small class="text-muted">Actualice precios o importe nuevos productos masivamente</small>
        </div>
        <div class="mt-2 mt-md-0 d-flex align-items-center flex-wrap">
            <button type="button" class="btn btn-success font-weight-bold shadow-sm mr-2 mb-1" data-toggle="modal" data-bs-toggle="modal" data-target="#modalCrearProductosMasivo" data-bs-target="#modalCrearProductosMasivo">
                <i class="fa fa-plus-circle mr-1"></i> Crear Productos Nuevos (Excel)
            </button>
            <button type="button" class="btn btn-primary font-weight-bold shadow-sm mr-2 mb-1" data-toggle="modal" data-bs-toggle="modal" data-target="#modalActualizarBarras" data-bs-target="#modalActualizarBarras">
                <i class="fa fa-barcode mr-1"></i> Actualizar Códigos de Barras (Excel)
            </button>
            <button type="button" class="btn btn-warning font-weight-bold shadow-sm mr-2 mb-1 text-dark" data-toggle="modal" data-bs-toggle="modal" data-target="#modalActualizarCostoCaja" data-bs-target="#modalActualizarCostoCaja">
                <i class="fa fa-calculator mr-1"></i> Actualizar Costo de Caja (Excel)
            </button>
            <button type="button" class="btn btn-info font-weight-bold shadow-sm mr-2 mb-1 text-white" data-toggle="modal" data-bs-toggle="modal" data-target="#modalActualizarPreciosVenta" data-bs-target="#modalActualizarPreciosVenta">
                <i class="fa fa-tags mr-1"></i> Actualizar Precios de Venta (Excel)
            </button>
            <a href="{{ url('/vistaActualizarPreciosVenta') }}" class="btn btn-outline-primary font-weight-bold shadow-sm mb-1 mr-2" title="Abrir Precios de Venta en pantalla completa">
                <i class="fa fa-external-link mr-1"></i> Vista Precios Venta
            </a>
            <a href="{{ url('/vistaCrearProductosExcel') }}" class="btn btn-outline-info font-weight-bold shadow-sm mb-1" title="Abrir en pantalla completa">
                <i class="fa fa-external-link mr-1"></i> Vista Crear Productos
            </a>
        </div>
    </div>

    <div class="card p-4">
        <div class="row">
            <div class="col-md-12 mb-3">
                 @include('../menu.bodegas') 
          
                 @include('../menu.botonRegresar')
            </div>
            
            <div class="col-md-12 mb-3">
                <label class="text-muted small"><i class="fa fa-info-circle"></i> Columnas requeridas en el Excel (1ª fila): <span class="text-danger font-weight-bold ml-2">(Solo se actualizarán las columnas con valores. Celdas vacías o '0' se omiten).</span></label>
                <div class="d-flex flex-row overflow-auto border rounded bg-light py-2">
                    <div class="px-2 border-right font-weight-bold text-nowrap">code</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">costoCaja</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">costofrcc</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventacaja</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventafrcc</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventablistre</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventacaja2</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventafrcc2</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventacaja3</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">ventafrcc3</div>
                    <div class="px-2 border-right font-weight-bold text-nowrap">InventarioCaja</div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group">
                    <label for="excelFile">Seleccionar Archivo Excel (.xlsx, .xls)</label>
                    <input type="file" id="excelFile" class="form-control" accept=".xlsx, .xls">
                </div>
            </div>
        </div>
        
       
    </div>
    
    <div id="loading" class="text-center mt-3" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Cargando...</span>
        </div>
        <p>Procesando archivo...</p>
    </div>

    <!-- Resultados -->
    <div id="resultados" style="display: none;" class="mt-4">
        
        <!-- Productos Coincidentes -->
        <h3>Productos Coincidentes <span class="badge badge-success" id="count-found">0</span></h3>
        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
            <table class="table table-bordered table-striped" id="table-found">
                <thead class="thead-dark">
                    <tr>
                        <th>Código</th>
                        <th>Nombre Producto</th>
                        <th>Costo Caja</th>
                        <th>Costo Fraccion</th>
                        <th>Venta Caja</th>
                        <th>Venta Fraccion</th>
                        <th>Venta Blister</th>
                        <th>Venta Caja 2</th>
                        <th>Venta Fraccion 2</th>
                        <th>Venta Caja 3</th>
                        <th>Venta Fraccion 3</th>
                        <th>Inventario Caja</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        
        <div class="mt-3 mb-5">
             <button class="btn btn-primary btn-lg" id="btn-actualizar">Actualizar Productos Coincidentes</button>
        </div>

        <!-- Productos NO Coincidentes -->
        <h3 class="text-danger">Productos NO Coincidentes <span class="badge badge-danger" id="count-not-found">0</span></h3>
         <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
            <table class="table table-bordered table-striped" id="table-not-found">
                <thead class="thead-light">
                    <tr>
                        <th>Código (Excel)</th>
                        <th>Costo Caja</th>
                        <th>Venta Caja</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        
    </div>

</div>

<!-- Scripts -->
<!-- SheetJS CDN -->
<!-- <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> -->
  <script src="{{ asset('js/xlsx.full.min.js') }}"></script>

<script>
    document.getElementById('excelFile').addEventListener('change', function(e) {
        var file = e.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        
        reader.onload = function(e) {
            var data = new Uint8Array(e.target.result);
            var workbook = XLSX.read(data, {type: 'array'});
            
            // Asumimos que la data está en la primera hoja
            var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
            
            // Convertir a JSON
            var jsonData = XLSX.utils.sheet_to_json(firstSheet);
            
            console.log("Datos leídos del Excel:", jsonData);
            
            if (jsonData.length === 0) {
                alert("El archivo parece estar vacío o no tiene un formato válido.");
                return;
            }

            procesarDatos(jsonData);
        };
        
        reader.readAsArrayBuffer(file);
    });

    function procesarDatos(datos) {
        // Mostrar loading
        document.getElementById('loading').style.display = 'block';
        document.getElementById('resultados').style.display = 'none';

        // Enviar a backend via AJAX (usando jQuery dado que está en padre.blade.php)
        $.ajax({
            url: '{{ url("/procesar-importacion-precios") }}',
            type: 'POST',
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: JSON.stringify({
                productos: datos
            }),
            success: function(response) {
                document.getElementById('loading').style.display = 'none';
                mostrarResultados(response);
            },
            error: function(xhr, status, error) {
                document.getElementById('loading').style.display = 'none';
                console.error(error);
                alert("Hubo un error al procesar la información: " + error);
            }
        });
    }

    function mostrarResultados(data) {
        document.getElementById('resultados').style.display = 'block';
        
        // Llenar tabla encontrados (Limitado a 100 para no congelar el navegador)
        var foundBody = document.querySelector('#table-found tbody');
        foundBody.innerHTML = '';
        var countFound = data.encontrados ? data.encontrados.length : 0;
        
        if (countFound > 0) {
            // Renderizar solo los primeros 100
            var limit = 100;
            var displayData = data.encontrados.slice(0, limit);

            displayData.forEach(function(item) {
                var row = `<tr>
                    <td>${item.code || ''}</td>
                    <td>${item.nombre || ''}</td>
                    <td>${item.costoCaja || ''}</td>
                    <td>${item.costofrcc || ''}</td>
                    <td>${item.ventacaja || ''}</td>
                    <td>${item.ventafrcc || ''}</td>
                    <td>${item.ventablistre || ''}</td>
                    <td>${item.ventacaja2 || ''}</td>
                    <td>${item.ventafrcc2 || ''}</td>
                    <td>${item.ventacaja3 || ''}</td>
                    <td>${item.ventafrcc3 || ''}</td>
                     <td>${item.InventarioCaja || ''}</td>
                </tr>`;
                foundBody.innerHTML += row;
            });

            if (countFound > limit) {
                var rowInfo = `<tr><td colspan="12" class="text-center text-muted font-italic">... y ${countFound - limit} registros más (ocultos por rendimiento) ...</td></tr>`;
                foundBody.innerHTML += rowInfo;
            }
        }

        document.getElementById('count-found').innerText = countFound;

        // Llenar tabla NO encontrados
        var notFoundBody = document.querySelector('#table-not-found tbody');
        notFoundBody.innerHTML = '';
        var countNotFound = data.noEncontrados ? data.noEncontrados.length : 0;

        if (countNotFound > 0) {
             // Renderizar solo los primeros 100
             var limit = 100;
             var displayData = data.noEncontrados.slice(0, limit);

            displayData.forEach(function(item) {
                 var row = `<tr>
                    <td>${item.code || 'Sin Código'}</td>
                    <td>${item.costoCaja || ''}</td>
                    <td>${item.ventacaja || ''}</td>
                </tr>`;
                notFoundBody.innerHTML += row;
            });

            if (countNotFound > limit) {
                var rowInfo = `<tr><td colspan="3" class="text-center text-muted font-italic">... y ${countNotFound - limit} registros más ...</td></tr>`;
                notFoundBody.innerHTML += rowInfo;
            }
        }
        
        document.getElementById('count-not-found').innerText = countNotFound;
        
        // Manejar botón de actualizar (por ahora alerta)
        // Manejar botón de actualizar
        document.getElementById('btn-actualizar').onclick = function() {
            var bodegaId = document.getElementById('idbodegas').value;
            
            if (!bodegaId) {
                alert("Por favor seleccione una bodega.");
                return;
            }

            if (!data.encontrados || data.encontrados.length === 0) {
                alert("No hay productos coincidentes para actualizar.");
                return;
            }

            if (!confirm("¿Está seguro de actualizar " + data.encontrados.length + " productos en la bodega seleccionada?")) {
                return;
            }

            // Mostrar loading
            document.getElementById('loading').style.display = 'block';
            document.getElementById('resultados').style.display = 'none';

            $.ajax({
                url: '{{ url("/actualizar-importacion-precios") }}',
                type: 'POST',
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: JSON.stringify({
                    productos: data.encontrados,
                    bodega: bodegaId
                }),
                success: function(response) {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('resultados').style.display = 'block'; // Volver a mostrar tabla o limpiar
                    alert(response.message || "Proceso finalizado.");
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    document.getElementById('loading').style.display = 'none';
                     document.getElementById('resultados').style.display = 'block';
                    console.error(error);
                    alert("Hubo un error al actualizar: " + error);
                }
            });
        };
    }
</script>

<script src="{{ asset('js/sweetalert2@11.js') }}"></script>
@include('../menu.modalCrearProductos')
@include('../menu.modalActualizarBarras')
@include('../menu.modalActualizarCostoCaja')
@include('../menu.modalActualizarPreciosVenta')

@endsection