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

@section('contenido')
<!-- Librería para leer Excel en el cliente -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

<style>
    .dashboard-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 25px;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    .dashboard-header::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        pointer-events: none;
    }
    
    .card-glass {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
        padding: 25px;
        margin-bottom: 25px;
    }

    .table-custom {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }
    .table-custom tr {
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        transition: transform 0.2s;
    }
    .table-custom tr:hover {
        transform: scale(1.01);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .table-custom th {
        background: transparent;
        border: none;
        color: #777;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        padding: 15px;
    }
    .table-custom td {
        padding: 15px;
        border: none;
        vertical-align: middle;
    }
    .table-custom td:first-child { border-radius: 10px 0 0 10px; }
    .table-custom td:last-child { border-radius: 0 10px 10px 0; }

    .loader-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255,255,255,0.7);
        display: none;
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    .search-input {
        border-radius: 25px;
        padding-left: 20px;
        border: 2px solid #eee;
        transition: border-color 0.3s;
    }
    .search-input:focus {
        border-color: #764ba2;
        box-shadow: none;
    }
</style>

<div class="loader-overlay" id="loaderOverlay">
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
</div>

<div class="container-fluid">
    <div class="dashboard-header d-flex justify-content-between align-items-center">
        <div>
            <h2 class="m-0"><i class="fa fa-exchange"></i> Conversión de Productos</h2>
            <p class="m-0 opacity-75">Traspasa inventario según CodigoOBS y ajusta precios/costos</p>
        </div>
        <div class="d-flex align-items-center">
            <button class="btn btn-outline-light rounded-pill px-4 mr-3" onclick="$('#modalExcel').modal('show')">
                <i class="fa fa-file-excel-o"></i> Vincular por Excel
            </button>
            <a href="{{ url('/inicio') }}" class="btn btn-light rounded-pill px-4" style="position: relative; z-index: 10;" onclick="window.location.href='{{ url('/inicio') }}'; return false;">
                <i class="fa fa-home"></i> Inicio
            </a>
        </div>
    </div>

    <div class="card-glass">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label class="font-weight-bold"><i class="fa fa-building text-primary"></i> Seleccionar Bodega</label>
                    <select id="selectBodega" class="form-control rounded-pill border-2">
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="font-weight-bold"><i class="fa fa-search text-primary"></i> Buscar Producto Origen</label>
                    <input type="text" id="inputBusqueda" class="form-control search-input" placeholder="Nombre o código del producto...">
                </div>
            </div>
            <div class="col-md-2 d-flex align-items-end mb-3">
                <button class="btn btn-primary w-100 rounded-pill shadow-sm" onclick="buscarProductos()">
                    <i class="fa fa-search"></i> Buscar
                </button>
            </div>
        </div>
    </div>

    <div id="containerResultados">
        <div class="text-center py-5 text-muted card-glass">
            <i class="fa fa-search fa-3x mb-3 text-light"></i>
            <p>Selecciona una bodega y busca productos para comenzar.</p>
        </div>
    </div>
</div>

<!-- Modal para Vincular por Excel -->
<div class="modal fade" id="modalExcel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px;">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold">Vincular Productos (Excel)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fa fa-file-excel-o text-success mb-3" style="font-size: 3rem;"></i>
                <p>Sube un archivo Excel con dos columnas:<br>
                <b>Columna A:</b> Código Producto OBS (Origen)<br>
                <b>Columna B:</b> Código Producto Regular (Destino)</p>
                <div class="px-4">
                    <div class="custom-file mb-3">
                        <input type="file" class="custom-file-input" id="inputExcel" accept=".xlsx, .xls">
                        <label class="custom-file-label" for="inputExcel">Seleccionar archivo...</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" onclick="procesarExcel()">Vincular Ahora</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Mostrar nombre del archivo seleccionado
    $(document).on('change', '#inputExcel', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });

    function buscarProductos() {
        let bodega = $('#selectBodega').val();
        let busqueda = $('#inputBusqueda').val();

        $('#loaderOverlay').css('display', 'flex');

        $.ajax({
            url: "{{ url('buscarProductosConversion') }}",
            data: { bodega: bodega, busqueda: busqueda },
            success: function(data) {
                $('#loaderOverlay').hide();
                renderTable(data);
            },
            error: function() {
                $('#loaderOverlay').hide();
                Swal.fire('Error', 'No se pudieron cargar los productos.', 'error');
            }
        });
    }

    function renderTable(data) {
        let container = $('#containerResultados');
        if (data.length === 0) {
            container.html('<div class="card-glass text-center py-5 text-muted"><p>No se encontraron productos con CodigoOBS e inventario.</p></div>');
            return;
        }

        let html = `
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="font-weight-bold">Resultados (${data.length})</h5>
                <button class="btn btn-success shadow-sm rounded-pill px-4" onclick="ejecutarMasivo()">
                    <i class="fa fa-flash"></i> Ejecutar Conversiones Seleccionadas
                </button>
            </div>
            <div class="table-responsive">
                <table class="table-custom">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll" onclick="toggleAll(this)"></th>
                            <th>Origen</th>
                            <th>Destino (OBS)</th>
                            <th width="80">Cant. Cj</th>
                            <th width="80">Bonif.</th>
                            <th width="120">N. Costo Cj</th>
                            <th width="120">N. Precio Cj</th>
                            <th width="120">N. Costo Fr</th>
                            <th width="120">N. Precio Fr</th>
                        </tr>
                    </thead>
                    <tbody>`;

        data.forEach((item, index) => {
            html += `<tr class="row-conversion">
                <td>
                    <input type="checkbox" class="check-item" checked>
                    <input type="hidden" class="val-origen" value="${item.codigoProd}">
                    <input type="hidden" class="val-destino" value="${item.CodigoOBS}">
                    <input type="hidden" class="val-costo-base" value="${item.costoDestino || 0}">
                    <input type="hidden" class="val-costo-fr-base" value="${item.costofrccDestino || 0}">
                    <input type="hidden" class="val-factor" value="${item.factor || 1}">
                </td>
                <td>
                    <div class="text-truncate font-weight-bold" style="max-width: 150px;" title="${item.nombre}">${item.nombre}</div>
                    <small class="text-muted">${item.codigoProd}</small>
                </td>
                <td>
                    <div class="text-truncate text-primary font-weight-bold" style="max-width: 150px;" title="${item.nombreDestino}">${item.nombreDestino || 'N/A'}</div>
                    <small class="text-muted">${item.CodigoOBS}</small>
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-qty-caja" value="${item.inventario}" min="0" oninput="recalcularCosto(this)">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-bonif" value="0" min="0" oninput="recalcularCosto(this)">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-costo" value="${item.costoDestino || 0}" step="0.01">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-venta" value="${item.ventaDestino || 0}" step="0.01">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-costo-fr" value="${item.costofrccDestino || 0}" step="0.01">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm val-venta-fr" value="${item.ventaFrccDestino || 0}" step="0.01">
                </td>
            </tr>`;
        });

        html += '</tbody></table></div>';
        container.html(html);
        $('#checkAll').prop('checked', true);
    }

    function recalcularCosto(el) {
        let row = $(el).closest('tr');
        let qty = parseFloat(row.find('.val-qty-caja').val()) || 0;
        let bonif = parseFloat(row.find('.val-bonif').val()) || 0;
        let costoBase = parseFloat(row.find('.val-costo-base').val()) || 0;
        let costoFrBase = parseFloat(row.find('.val-costo-fr-base').val()) || 0;
        let factor = parseFloat(row.find('.val-factor').val()) || 1;

        if (qty > 0 && bonif > 0) {
            let nuevoCosto = (costoBase * qty) / (qty + bonif);
            row.find('.val-costo').val(nuevoCosto.toFixed(2));
            if (factor > 1) {
                row.find('.val-costo-fr').val((nuevoCosto / factor).toFixed(2));
            }
        } else {
            row.find('.val-costo').val(costoBase);
            row.find('.val-costo-fr').val(costoFrBase);
        }
    }

    function toggleAll(source) {
        $('.check-item').prop('checked', $(source).prop('checked'));
    }

    function ejecutarMasivo() {
        let items = [];
        $('.row-conversion').each(function() {
            let row = $(this);
            if (row.find('.check-item').is(':checked')) {
                let qtyC = parseFloat(row.find('.val-qty-caja').val()) || 0;
                if (qtyC > 0) {
                    items.push({
                        codigoOrigen: row.find('.val-origen').val(),
                        codigoDestino: row.find('.val-destino').val(),
                        cantidadCaja: qtyC,
                        cantidadFrcc: 0,
                        nuevoCostoCajaDestino: row.find('.val-costo').val(),
                        nuevoPrecioCajaDestino: row.find('.val-venta').val(),
                        nuevoCostoFrccDestino: row.find('.val-costo-fr').val(), 
                        nuevoPrecioFrccDestino: row.find('.val-venta-fr').val()
                    });
                }
            }
        });

        if (items.length === 0) {
            Swal.fire('Atención', 'Selecciona productos con cantidad mayor a 0.', 'warning');
            return;
        }

        Swal.fire({
            title: '¿Confirmar conversiones?',
            text: `Se procesarán ${items.length} productos.`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, procesar todo'
        }).then((result) => {
            if (result.isConfirmed) {
                $('#loaderOverlay').css('display', 'flex');
                $.ajax({
                    url: "{{ url('procesarConversionMasiva') }}",
                    method: 'POST',
                    data: JSON.stringify({ 
                        items: items, 
                        bodega: $('#selectBodega').val() 
                    }),
                    contentType: 'application/json',
                    headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                    success: function(resp) {
                        $('#loaderOverlay').hide();
                        if (resp.estado == 'ok') {
                            Swal.fire('¡Éxito!', resp.mensaje, 'success');
                            buscarProductos();
                        } else {
                            Swal.fire('Error', resp.mensaje, 'error');
                        }
                    },
                    error: function() {
                        $('#loaderOverlay').hide();
                        Swal.fire('Error', 'Fallo en el servidor.', 'error');
                    }
                });
            }
        });
    }

    function procesarExcel() {
        let fileInput = document.getElementById('inputExcel');
        if (!fileInput.files.length) {
            Swal.fire('Atención', 'Selecciona un archivo Excel.', 'warning');
            return;
        }

        let file = fileInput.files[0];
        let reader = new FileReader();
        $('#loaderOverlay').css('display', 'flex');
        $('#modalExcel').modal('hide');

        reader.onload = function(e) {
            let data = new Uint8Array(e.target.result);
            let workbook = XLSX.read(data, {type: 'array'});
            let firstSheet = workbook.Sheets[workbook.SheetNames[0]];
            let rows = XLSX.utils.sheet_to_json(firstSheet, {header: 1});

            let vinculaciones = [];
            rows.forEach((row, index) => {
                if (index === 0 && isNaN(row[0])) return;
                if (row[0] && row[1]) {
                    vinculaciones.push({
                        regular: String(row[0]).trim(),
                        obs: String(row[1]).trim()
                    });
                }
            });

            if (vinculaciones.length === 0) {
                $('#loaderOverlay').hide();
                Swal.fire('Error', 'Excel vacío o inválido.', 'error');
                return;
            }

            $.ajax({
                url: "{{ url('vincularProductosExcel') }}",
                method: 'POST',
                data: JSON.stringify({ vinculaciones: vinculaciones }),
                contentType: 'application/json',
                headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                success: function(resp) {
                    $('#loaderOverlay').hide();
                    if (resp.estado == 'ok') {
                        Swal.fire('¡Éxito!', resp.mensaje, 'success');
                        fileInput.value = '';
                    } else {
                        Swal.fire('Error', resp.mensaje, 'error');
                    }
                },
                error: function() {
                    $('#loaderOverlay').hide();
                    Swal.fire('Error', 'Fallo al procesar.', 'error');
                }
            });
        };
        reader.readAsArrayBuffer(file);
    }

    $('#inputBusqueda').on('keypress', function(e) {
        if(e.which == 13) buscarProductos();
    });
</script>
@endsection