@extends('layouts.dashboard')

@section('dashboard')

    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Desglose de Stock</strong></li>
    </ul>
    <div class="row align-items-center mb-4 overflow-hidden">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Desglose de Stock</h1>
        </div>
        <div class="col-md-auto form-registro">
            <select name="categoria" class="form-control form-control-sm select2" onchange="cargarProductosUnicosCategoria(this.value)">
                <option value="">-- Seleccione Categoria --</option>
                @foreach($categorias as $categoria)
                    <option value="{{ $categoria->categoria_id }}">{{ ucwords(mb_strtolower($categoria->categoria_nombre)) }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="list-productos-desglose-stock">
                    <thead>
                        <tr>
                            <th>SKU</th>
                            <th>Titulo</th>
                            <th class="text-center">Stock Real</th>
                            <th class="text-center">Stock Desglosado</th>
                            <th class="text-right">Opciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center" colspan="5">Productos Únicos</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        function handleBodegaChange(value, productoId, num) {
            var bodegaInput = document.querySelector('input[name="bodega-' + num + '"]');
            var bodegaSeleccionada = bodegaInput.value;
           

            // Obtener el bodega_id correspondiente del datalist
            var bodegaOption = document.querySelector('#bodega-list-' + num + ' option[value="' + bodegaSeleccionada + '"]');
            var bodegaId = bodegaOption ? bodegaOption.getAttribute('data-bodega-id') : null;
            
            if (bodegaId) {
                document.querySelector('#bodega-id-' + num).value = bodegaId;
                cargarPosicionesProducto(bodegaId, productoId, num);
            } else {
                console.error('No se encontró la bodega seleccionada en el datalist.');
            }
        }


        function cargarPosicionesProducto(bodegaId, productoId, idTr) {
            var data = new URLSearchParams();
            data.append('bodegaId', bodegaId);
            data.append('productoId', productoId);

            fetch('/dashboard/cargar-posiciones-producto', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Añade el token CSRF para la protección contra ataques CSRF
                },
                body: data.toString()
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // Parsear la respuesta JSON
            })
            .then(data => {
                if (data.success) {
                    var posicionDatalist = document.getElementById('posicion-list-' + idTr);
                    posicionDatalist.innerHTML = '<option value="">Seleccione la Posición</option>'; // Limpiar las opciones anteriores

                    data.posiciones.forEach(posicion => {
                        var option = document.createElement('option');
                        option.value = posicion.bodega_pasillo_nombre + '-' + posicion.bodega_fila_nombre + '-' + posicion.bodega_altura_nombre;
                        option.setAttribute('data-bodega-posicion-id', posicion.bodega_posicion_id);
                        posicionDatalist.appendChild(option);
                    });

                    var posicionDestinoDatalist = document.getElementById('posicion-destino-list-' + idTr);
                    posicionDestinoDatalist.innerHTML = '<option value="">Seleccione la Posición</option>'; // Limpiar las opciones anteriores

                    data.posicionesDestino.forEach(posicionDestino => {
                        var option = document.createElement('option');
                        option.value = posicionDestino.bodega_pasillo_nombre + '-' + posicionDestino.bodega_fila_nombre + '-' + posicionDestino.bodega_altura_nombre;
                        option.setAttribute('data-bodega-posicion-id', posicionDestino.bodega_posicion_id);
                        posicionDestinoDatalist.appendChild(option);
                    });
                }
            })
            .catch(error => {
                console.error('Error', error);
                var posicionDatalist = document.getElementById('posicion-list-' + idTr);
                posicionDatalist.innerHTML = '<option value="">Seleccione la Posición</option>';

                var posicionDestinoDatalist = document.getElementById('posicion-destino-list-' + idTr);
                posicionDestinoDatalist.innerHTML = '<option value="">Seleccione la Posición</option>';
            });
        }

        

        function guardarDesgloceStock(num) {
            // Verificar campos requeridos
            var camposRequeridos = document.querySelectorAll("#producto-unico-" + num + " [required]");
            var camposRequeridosVacios = Array.from(camposRequeridos).filter(function (campo) {
                return campo.value.trim() === ''; // Filtrar campos vacíos
            });

            if (camposRequeridosVacios.length > 0) {
                // Mostrar mensaje de error si hay campos requeridos vacíos
                alert('Por favor completa todos los campos requeridos.');
                return false; // Detener la ejecución de la función
            }

            var productoIdElement = document.querySelector("input[name='producto-" + num + "']");
            var producto_id = productoIdElement ? productoIdElement.value : '';

            var atributo_stock_unico_id_elements = document.querySelectorAll("input[name='atributo_stock_unico_id_" + num + "[]']");
            var atributo_stock_unico_id = Array.from(atributo_stock_unico_id_elements).map(function (element) {
                return element.value;
            });

            var atributo_valor_unico_id_elements = document.querySelectorAll("input[name='atributo-valor-unico_" + num + "[]']");
            var atributo_valor_unico_id = Array.from(atributo_valor_unico_id_elements).map(function (element) {
                return element.value;
            });

            var bodegaInput = document.querySelector('input[name="bodega-' + num + '"]');
            var bodegaSeleccionada = bodegaInput.value;

            var bodegaOption = document.querySelector('#bodega-list-' + num + ' option[value="' + bodegaSeleccionada + '"]');
            var bodegaId = bodegaOption ? bodegaOption.getAttribute('data-bodega-id') : '';

            var posicionInput = document.querySelector('input[name="posiciones-' + num + '"]');
            var posicionSeleccionada = posicionInput.value;

            var posicionOption = document.querySelector('#posicion-list-' + num + ' option[value="' + posicionSeleccionada + '"]');
            var posicionId = posicionOption ? posicionOption.getAttribute('data-bodega-posicion-id') : '';

            var posicionDestinoInput = document.querySelector('input[name="posicion-destino-' + num + '"]');
            var posicionDestinoSeleccionada = posicionDestinoInput.value;

            var posicionDestinoOption = document.querySelector('#posicion-destino-list-' + num + ' option[value="' + posicionDestinoSeleccionada + '"]');
            var posicionDestinoId = posicionDestinoOption ? posicionDestinoOption.getAttribute('data-bodega-posicion-id') : '';

            confirmAlert('¿Desea crear el desglose de stock?', function () {
                modalCargando();

                var data = new URLSearchParams();
                data.append('producto_id', producto_id);
                data.append('bodegaId', bodegaId);
                data.append('bodegaPosicionId', posicionId);
                data.append('bodegaPosicionIdDestino', posicionDestinoId);
                data.append('atributo_stock_unico_id', JSON.stringify(atributo_stock_unico_id));
                data.append('atributo_valor_unico_id', JSON.stringify(atributo_valor_unico_id));

                fetch('/dashboard/crear-desglose-stock', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Ajusta esto según sea necesario
                    },
                    body: data.toString()
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {
                    if (data.success) {
                        simpleAlert('El desglose de stock fue guardado correctamente');
                        cerrarCargando();
                        
                        // Desactivar todos los campos dentro de #producto-unico-num
                        var trElement = document.getElementById('producto-unico-' + num);
                        if (trElement) {
                            var campos = trElement.querySelectorAll('input, select');
                            campos.forEach(function(campo) {
                                campo.disabled = true;
                            });

                            // Desactivar el botón dentro del tr
                            var boton = trElement.querySelector('button');
                            if (boton) {
                                boton.disabled = true;
                            }
                        }
                    } else {
                        alert(data.error);
                        cerrarCargando();
                    }
                })
                .catch(error => {
                    console.error('Error', error);
                    alert('Hubo un error al guardar el desglose de stock.');
                    cerrarCargando();
                });
            });

            return false;
        }



        function modalEditarDesgloceStock(producto_id, categoria_id) {
            var url = "/dashboard/cargar-modal-editar-desglose-stock";
            var params = {
                producto_id: producto_id,
                categoria_id: categoria_id
            };

            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": token // asegúrate de tener la variable 'token' definida y accesible
                },
                body: JSON.stringify(params)
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById("modal-ajax").innerHTML = data;
                var modalSubajax = document.getElementById("modal-subajax");
                if (modalSubajax) {
                    $(modalSubajax).modal({ backdrop: "static" }); // Utilizando jQuery para activar el modal de Bootstrap
                } else {
                    console.error("Elemento 'modal-subajax' no encontrado en el DOM.");
                }
            })
            .catch(error => console.error('Error:', error));
        }

        function editarDesgloseStock(id, conPosicion) {
            // Verificar campos requeridos
            var camposRequeridos = document.querySelectorAll("#producto-unico-" + id + " [required]");
            var camposRequeridosVacios = Array.from(camposRequeridos).filter(campo => campo.value.trim() === '');

            if (camposRequeridosVacios.length > 0) {
                alert('Por favor completa todos los campos requeridos.');
                return false; // Detener la ejecución de la función
            }

            // Obtener valores de atributos
            var obtenerValores = (nombre) => Array.from(document.querySelectorAll(`input[name='${nombre}_${id}[]']`)).map(input => input.value);

            var atributo_stock_valores = obtenerValores('atributo-valor-unico');
            var atributo_stock_unico_id = obtenerValores('atributo_stock_unico_id');
            var desglose_stock_unico_id = obtenerValores('desglose_stock_unico_id');

            var obtenerValorInput = (nombre) => document.querySelector(`input[name='${nombre}-${id}']`);
            var obtenerValorOption = (input, listaId) => document.querySelector(`#${listaId} option[value='${input.value}']`);

            var productoIdElement = obtenerValorInput('producto');
            var producto_id = productoIdElement ? productoIdElement.value : '';

            var bodegaInput = obtenerValorInput('bodega');
            var bodegaOption = obtenerValorOption(bodegaInput, `bodega-list-${id}`);
            var bodegaId = bodegaOption ? bodegaOption.getAttribute('data-bodega-id') : '';

            var posicionInput = obtenerValorInput('posiciones');
            var posicionOption = obtenerValorOption(posicionInput, `posicion-list-${id}`);
            var posicionId = posicionOption ? posicionOption.getAttribute('data-bodega-posicion-id') : '';

            var posicionDestinoInput = obtenerValorInput('posicion-destino');
            var posicionDestinoOption = obtenerValorOption(posicionDestinoInput, `posicion-destino-list-${id}`);
            var posicionDestinoId = posicionDestinoOption ? posicionDestinoOption.getAttribute('data-bodega-posicion-id') : '';

            // Validar que posicionDestinoId no sea requerido si conPosicion existe
            if (!conPosicion && !posicionDestinoId) {
                alert('Por favor completa todos los campos requeridos.');
                return false;
            }

            // Confirmar acción con el usuario
            confirmAlert("¿Está seguro de actualizar el desglose de stock?", function () {
                modalCargando(); // Mostrar modal de carga

                // Realizar la petición AJAX
                fetch("/dashboard/editar-desglose-stock", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": token // Asegúrate de tener la variable 'token' definida y accesible
                    },
                    body: JSON.stringify({
                        atributo_stock_unico_id,
                        atributo_stock_valores,
                        desglose_stock_unico_id,
                        bodegaId,
                        productoId: producto_id,
                        bodegaPosicionId: posicionId,
                        bodegaPosicionIdDestino: posicionDestinoId,
                        conPosicion: conPosicion
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Network response was not ok");
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        var trElement = document.getElementById('producto-unico-' + id);
                        if (trElement) {
                            var campos = trElement.querySelectorAll('input, select');
                            campos.forEach(campo => campo.disabled = true);

                            // Desactivar el botón dentro del tr
                            var boton = trElement.querySelector('button');
                            if (boton) {
                                boton.disabled = true;
                            }
                        }
                        simpleAlert("Desglose de stock actualizado correctamente");
                    } else {
                        throw new Error(data.error || "Error desconocido al actualizar el desglose de stock");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("Hubo un error al actualizar el desglose de stock. Por favor, inténtelo de nuevo más tarde.");
                })
                .finally(() => {
                    cerrarCargando(); // Cerrar modal de carga sin importar el resultado
                });
            });

            return false;
        }




    </script>
@endsection