@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Entrada de Producto</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Entrada 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="cargarModalEntradaProducto()">
                        Registrar Entrada
                    </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="pr-2 form-group pr-md-0">
                    <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="col col-md-auto form-group pr-md-0">
                    <input type="hidden" name="tipo-de-movimiento" value="1">
                    <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 cargarModalEntradaProducto() {
            // Definir la URL a la que se realizará la solicitud
            const url = '/dashboard/cargar-modal-entrada-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 modalBuscadorProductoEntrada() {
            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(formId, num = '') {
            var formElement = document.getElementById(formId);
            // var marca = formElement.querySelector('#marca-vehiculo').value;
            var texto = formElement.querySelector('#buscar').value;

            if (!texto) {
                alert('Ingrese algún dato al formulario');
                return false;
            }

            var validar = validarFechaStorage(formId, 2000);
            if (validar) {
                var formData = new FormData(formElement);
                fetch('/dashboard/buscar-productos-entrada', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .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; // Prevent the default form submission
        }

        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();
                    } 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 cargarBodegasSucursales(sucursalId) {

            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 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 registrarEntradaProducto(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;
            }

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

            // Enviar la solicitud por Ajax
            fetch('/dashboard/registrar-entrada-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 entrada de 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 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 cargarPosicionesBodega(bodegaId) {
            if (!bodegaId) {
                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>';
                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');

                    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);
                        });

                        if (data.posiciones.length > 1) {
                            posicionesDiv.classList.remove('d-none');
                            posicionSelect.setAttribute('required', 'required');
                        } else {
                            posicionesDiv.classList.add('d-none');
                            posicionSelect.removeAttribute('required');
                        }
                    } else {
                        posicionesDiv.classList.add('d-none');
                        posicionSelect.removeAttribute('required');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    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>';
                });
        }
    </script>
@endsection