@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Salida de Producto</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Salida de Producto</h1>
        </div>
        <div class="col-md-auto">
            <div class="dropdown">
                <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton-1"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opciones</button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-1">
                    <a class="dropdown-item small" onclick="cargarModalSalidaProducto()">
                        Registrar Salida
                    </a>
                </div>
            </div>

        </div>
        <div class="col-md">
            <form class="d-flex align-items-end justify-content-end form-registro form-enter" method="post"
                id="form-filtro" onsubmit="return buscarMovimientoDeProducto(this)">
                <div class="form-group pr-2 agregar-fecha-dia">
                    <label for="tipo-fecha" class="d-block small mb-0">Mes</label>
                    <input type="month" name="fecha" class="form-control form-control-sm" max="">
                </div>
                <div class="form-group pr-2">
                    <label for="excluir" class="small mb-0">SKU</label>
                    <input type="search" class="form-control form-control-sm" name="sku-producto" id="sku-producto">
                </div>

                <div class="form-group pr-md-0">
                    <input type="hidden" name="offset" value="">
                    <input type="hidden" name="tipo-de-movimiento" value="2">
                    <button type="submit" class="btn btn-primary btn-sm blq-btn" id="btn-filtrar" style=""><i
                            class="fa fa-search"></i> Filtrar</button>
                </div>
            </form>
        </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>Producto</th>
                            <th>Fecha</th>
                            <th>Motivo</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Valor</th>
                            <th class="text-center">Usuario</th>
                        </tr>
                    </thead>
                    <tbody class="tbody-movimiento-producto">
                        <tr>
                            <td class="text-center" colspan="6">No existen registros</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function cargarModalSalidaProducto() {
            // Definir la URL a la que se realizará la solicitud
            const url = '/dashboard/cargar-modal-salida-producto';

            // Definir los datos que se enviarán en la solicitud
            const data = {
                cargarModal: true
            };

            // Crear la configuración de la solicitud, incluyendo el método, los encabezados y el cuerpo
            const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify(data)
            };

            // Realizar la solicitud fetch
            fetch(url, requestOptions)
                .then(response => {
                    // Verificar si la respuesta es exitosa
                    if (!response.ok) {
                        throw new Error('Hubo un error al cargara el modal');
                    }
                    // Convertir la respuesta a texto
                    return response.text();
                })
                .then(data => {

                    // Insertar la respuesta en el elemento con id modal-ajax
                    document.querySelector('#modal-ajax').innerHTML = data;
                    // Mostrar el modal
                    const modal = new bootstrap.Modal(document.querySelector('#modal-subajax'));
                    modal.show();

                    //Se carga las bodegas de las sucursales una vez cargado el modal
                    var sucursalSelect = document.getElementById('sucursal-select');
                    if (sucursalSelect) {
                        cargarBodegasSucursales(sucursalSelect.value);
                    }

                    $(".select2").select2();
                })
                .catch(error => {
                    // Manejar cualquier error que ocurra durante la solicitud
                    console.error('Hubo un error al cargar el modal:', error);
                });
        }

        function cargarBodegasSucursales(sucursalId) {
            // Crear los datos de la solicitud
            var posicionesDiv = document.getElementById('posiciones-div');
            var posicionSelect = document.querySelector('select[name="posiciones"]');

            posicionesDiv.classList.add('d-none');
            posicionSelect.removeAttribute('required');
            posicionSelect.innerHTML = '<option value="">Seleccione la Posicion</option>';
            var stockSinDesglosarInput = document.getElementById('stock-sin-desglosar');
            stockSinDesglosarInput.value = 0;

            var data = new URLSearchParams();
            data.append('sucursalId', sucursalId);

            // Enviar la solicitud fetch
            fetch('/dashboard/cargar-bodegas-sucursal', {
                    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) {
                        // Actualizar el selector de bodegas
                        var bodegaSelect = document.querySelector('select[name="bodega"]');
                        bodegaSelect.innerHTML =
                            '<option value="">Seleccione la Bodega</option>'; // Limpiar las opciones anteriores

                        data.bodegas.forEach(bodega => {
                            var option = document.createElement('option');
                            option.value = bodega.bodega_id;
                            option.textContent = bodega.bodega_nombre;
                            bodegaSelect.appendChild(option);
                        });
                    } else {
                        alert('Error: ' + (data.errors || 'No se pudieron cargar las bodegas.'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al cargar las bodegas. Por favor, inténtelo de nuevo.');
                });
        }

        function modalBuscadorProductoSalida() {
            fetch('/dashboard/modal-buscar-producto-entrada', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        agregar_producto_ajuste_por_sobrante: 'holaa'
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const modalSubAjax2 = document.getElementById('modal-subajax-2');
                        if (modalSubAjax2) {
                            modalSubAjax2.remove();
                        }

                        const modalAjax = document.getElementById('modal-ajax');
                        if (modalAjax) {
                            modalAjax.insertAdjacentHTML('beforeend', data.html);
                        }

                        // Inicializar select2 para los nuevos elementos añadidos
                        const select2Elements = document.querySelectorAll('.select2');
                        select2Elements.forEach(element => {
                            $(element).select2();
                        });

                        // Mostrar el nuevo modal con configuración de backdrop estático
                        const newModalSubAjax2 = document.getElementById('modal-subajax-2');
                        if (newModalSubAjax2) {
                            $('#modal-subajax-2').modal({
                                backdrop: 'static'
                            });
                        }

                        // Eliminar el modal subajax-3 si existe
                        const modalSubAjax3 = document.getElementById('modal-subajax-3');
                        if (modalSubAjax3) {
                            modalSubAjax3.remove();
                        }
                    } else {
                        console.error('Error:', data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        function filtrarModalProductoMovimiento(form, num = '') {
            //var marca = document.querySelector('#' + form + ' #marca-vehiculo').value;
            //var texto = document.querySelector('#' + form + ' #buscar').value;

            // if ((marca === "null" || marca === "undefined" || marca === "") &&
            //     (texto === "null" || texto === "undefined" || texto === "")) {
            //     //alert('Ingrese algún dato al formulario');
            // } else {
                var validar = validarFechaStorage(form, 2000);
                if (validar) {
                    var formData = new FormData(document.getElementById(form));
                    fetch('/dashboard/buscar-productos-entrada', {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': token
                            }
                        })
                        .then(response => response.json()) // Parse the response as JSON
                        .then(data => {
                            if (data.success) {
                                document.querySelector('.table-list-productos tbody').innerHTML = data.html;
                                document.querySelector('.table-list-productos tbody').classList.remove('d-none');

                                var productos = document.querySelectorAll('.table-productos tr').length;
                                if (productos === 1) {
                                    document.querySelector('.table-productos tr:first-child .btn-producto').click();
                                }
                            } else {
                                alert(data.errors); // Show error message in an alert
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            //alert('Ocurrió un error inesperado. Por favor, inténtelo de nuevo más tarde.');
                        });
                }
            //}
            return false;
        }

        function seleccionarProductoMovimiento(productoId) {
            // Crear los datos de la solicitud
            var data = new URLSearchParams();
            data.append('productoId', productoId);

            // Enviar la solicitud fetch
            fetch('/dashboard/seleccionar-producto-entrada', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': token
                    },
                    body: data.toString()
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(error => {
                            if (response.status === 422) {
                                let errorMessage = 'Errores de validación:\n';
                                for (let key in error.errors) {
                                    errorMessage += `${key}: ${error.errors[key].join(', ')}\n`;
                                }
                                throw new Error(errorMessage);
                            } else if (response.status === 404) {
                                throw new Error(error.error || 'Producto no encontrado');
                            } else {
                                throw new Error(error.error || 'Network response was not ok');
                            }
                        });
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {
                    //alert(JSON.stringify(data));
                    if (data.producto_nombre && data.sku && data.producto_id) {
                        // Actualizar el contenido de #form-datos
                        document.getElementById('span-producto').innerHTML = data.producto_nombre +
                            '<br><strong>Sku: </strong>' + data.sku;
                        // Asignar el valor al input #producto
                        document.getElementById('producto').value = data.producto_id;
                        // Llamar a la función para cerrar el submodal
                        cerrarSubModal();
                        // form.reset();
                        // Selecciona el div por su clase
                        var div = document.querySelector('.form-group.col-12.mb-3.list-desglose');
                        // Elimina el contenido del div
                        if (div) {
                            div.innerHTML = '';
                        }

                        document.getElementById("div-lista-desglose-producto").classList.toggle("d-none");
                    } else {
                        alert('Error: Datos del producto no encontrados en la respuesta.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message ||
                        'Ocurrió un error al seleccionar el producto. Por favor, inténtelo de nuevo.');
                });
        }

        function buscarMovimientoDeProducto(form) {
            // Crear objeto FormData con los datos del formulario
            var formData = new FormData(form);

            // Enviar la solicitud por Ajax
            fetch('/dashboard/buscar-movimiento-producto', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || 'Error en la solicitud.');
                        });
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {

                    if (data.success) {
                        // Actualizar el contenido del tbody
                        var tbodyMovimientoProducto = document.querySelector('.tbody-movimiento-producto');
                        tbodyMovimientoProducto.innerHTML = data.view; // Aquí se actualiza con la vista recibida

                        // Puedes realizar otras acciones si es necesario

                    } else {
                        alert('Error: ' + (data.error || 'No se pudieron cargar los datos.'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al procesar la solicitud. Por favor, inténtelo de nuevo.');
                });

            return false; // Evitar envío convencional del formulario
        }

        function registrarSalidaProducto(form) {
            // Validación de campos obligatorios usando HTML5 form.checkValidity()
            if (!form.checkValidity()) {
                alert('Por favor, complete todos los campos obligatorios.');
                return false;
            }

            // Validación de campo producto (input hidden)
            var productoId = document.getElementById('producto').value;
            if (!productoId) {
                alert('Por favor, seleccione un producto antes de continuar.');
                return false;
            }

            // Validación del campo cantidad
            var cantidad = document.querySelector('input[name="cantidad"]').value;
            if (cantidad <= 0) {
                alert('Por favor, ingrese una cantidad mayor a 0.');
                return false;
            }

            // Obtener valores de los checkboxes marcados
            var checkboxes = document.querySelectorAll('.checkboxDesgloseStock:checked');
            var checkboxValues = [];
            checkboxes.forEach(function(checkbox) {
                checkboxValues.push(checkbox.value);
            });

            // Crear objeto FormData con los datos del formulario
            var formData = new FormData(form);

            // Agregar valores de los checkboxes al FormData
            formData.append('desglosesStockUnicosId', checkboxValues.join(',')); // Aquí 'checkboxValues' es el nombre que le asignas en el backend

            // Enviar la solicitud por Ajax
            fetch('/dashboard/registrar-salida-producto', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.error || 'Error en la solicitud.');
                    });
                }
                return response.json(); // Parsear la respuesta JSON
            })
            .then(data => {
                // Manejar la respuesta del servidor
                if (data.success) {
                    simpleAlert(data.success);
                    cerrarSubModal();
                    var tbodyMovimientoProducto = document.querySelector('.tbody-movimiento-producto');
                    tbodyMovimientoProducto.innerHTML = data.view; // Aquí se actualiza con la vista recibida
                    // Aquí puedes realizar cualquier acción adicional necesaria después del registro exitoso
                    form.reset(); // Limpiar el formulario si es necesario
                } else {
                    alert('Error: ' + (data.error || 'No se pudo registrar la salida del producto.'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error al procesar la solicitud. Por favor, inténtelo de nuevo.');
            });

            return false; // Evitar envío convencional del formulario
        }

        function cargarPosicionesBodega(bodegaId) {
            if (!bodegaId) {
                var posicionesDiv = document.getElementById('posiciones-div');
                var posicionSelect = document.querySelector('select[name="posiciones"]');
                var stockSinDesglosarDiv = document.getElementById('stock-sin-desglosar-div');
                var stockSinDesglosarInput = document.getElementById('stock-sin-desglosar');
                stockSinDesglosarInput.value = 0;


                posicionesDiv.classList.add('d-none');
                stockSinDesglosarDiv.classList.add('d-none');
                posicionSelect.removeAttribute('required');
                posicionSelect.innerHTML = '<option value="">Seleccione la Posicion</option>';
                return;
            }

            // Crear los datos de la solicitud
            var data = new URLSearchParams();
            data.append('bodegaId', bodegaId);

            // Enviar la solicitud fetch
            fetch('/dashboard/cargar-posiciones-bodega', {
                    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 => {
                    var posicionSelect = document.querySelector('select[name="posiciones"]');
                    var posicionesDiv = document.getElementById('posiciones-div');
                    var stockSinDesglosarDiv = document.getElementById('stock-sin-desglosar-div');

                    posicionSelect.innerHTML =
                        '<option value="">Seleccione la Posicion</option>'; // Limpiar las opciones anteriores

                    if (data.success && data.posiciones.length > 0) {
                        // data.posiciones.forEach(posicion => {
                        //     var option = document.createElement('option');
                        //     option.value = posicion.bodega_posicion_id;
                        //     option.textContent = posicion.bodega_pasillo_nombre+'-'+posicion.bodega_fila_nombre+'-'+posicion.bodega_altura_nombre;
                        //     posicionSelect.appendChild(option);
                        // });

                        data.posiciones.forEach(posicion => {
                            var option = document.createElement('option');
                            option.value = posicion.bodega_posicion_id;
                            option.textContent = posicion.bodega_pasillo_nombre + '-' + posicion.bodega_fila_nombre + '-' + posicion.bodega_altura_nombre;
                            posicionSelect.appendChild(option);
                        });

                        if (data.posiciones.length > 1) {
                            posicionesDiv.classList.remove('d-none');
                            stockSinDesglosarDiv.classList.remove('d-none');
                            posicionSelect.setAttribute('required', 'required');
                        } else {
                            posicionesDiv.classList.add('d-none');
                            stockSinDesglosarDiv.classList.add('d-none');
                            posicionSelect.removeAttribute('required');
                        }
                    } else {
                        posicionesDiv.classList.add('d-none');
                        stockSinDesglosarDiv.classList.add('d-none');
                        posicionSelect.removeAttribute('required');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    var posicionesDiv = document.getElementById('posiciones-div');
                    var stockSinDesglosarDiv = document.getElementById('stock-sin-desglosar-div');
                    var posicionSelect = document.querySelector('select[name="posiciones"]');

                    posicionesDiv.classList.add('d-none');
                    stockSinDesglosarDiv.classList.add('d-none');
                    posicionSelect.removeAttribute('required');
                    posicionSelect.innerHTML = '<option value="">Seleccione la Posicion</option>';
                });
        }

        function cargarDesglosProductos(bodegaPosicionId){


            var productoId = document.getElementById('producto').value;
            // Crear los datos de la solicitud
            var data = new URLSearchParams();
            data.append('bodegaPosicionId', bodegaPosicionId);
            data.append('productoId', productoId);

            

            // Enviar la solicitud fetch
            fetch('/dashboard/cargar-desglose-productos', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: data.toString()
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); 
                })
                .then(data => {
                
                    if(data.success){
                        var stockSinDesglosarInput = document.getElementById('stock-sin-desglosar');
                        document.getElementById("div-lista-desglose-producto").classList.remove("d-none");
                        var divDesgloseStock = document.querySelector('.list-desglose');
                        divDesgloseStock.innerHTML = data.view; // Aquí se actualiza con la vista recibida
                        
                        // Asigna el valor proporcionado al input
                        stockSinDesglosarInput.value = data.stockSinDesglosar;
                    }else{
                        alert(data.error);
                    }
                
                })
                .catch(error => {
                    console.error('Error:', error);

                });
        }

        function actualizarCantidad() {
            // Obtener todos los checkboxes por su clase
            var checkboxes = document.querySelectorAll('.checkboxDesgloseStock');
            
            // Obtener el campo de cantidad
            var cantidadInput = document.querySelector('input[name="cantidad"]');
            var cantidad = '';

            // Iterar sobre todos los checkboxes para contar los marcados
            checkboxes.forEach(function(checkbox) {
                if (checkbox.checked) {
                    cantidad++;
                }
            });

            // Actualizar el campo de cantidad
            cantidadInput.value = cantidad;

            // Habilitar o deshabilitar el campo según si hay checkboxes seleccionados
            if (cantidad > 0) {
                cantidadInput.readOnly = true;
            } else {
                cantidadInput.readOnly = false;
            }
        }


    </script>
@endsection