@extends('layouts.app')

@section('content')
    <div class="d-flex justify-content-center align-items-center mt-2" style="min-height: 60vh;">
        <div>
            <h2 class="mb-3">Alta de movimiento</h2>

            <form id="formularioArticuloTrazable" method="POST" action="{{ route('movimientos.store') }}">
                @csrf
                <input type="hidden" id="formDatosModales" name="formDatosModales">
                <div id="error-message" class="alert alert-danger"
                    style="display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9999;">
                </div>
                <div id="error-message2" class="alert alert-danger"
                    style="display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9999;">
                </div>

                <div class="form-group mb-2">
                    <label for="articulo_id">Artículo</label>
                    <select id="articulo_id" name="articulo_id"
                        class="form-select
                        @error('articulo_id') is-invalid @enderror" required>
                        @foreach ($articulos as $articulo)
                            <option value="{{ $articulo->id }}"
                                data-es-trazable="{{ $articulo->trazabilidad == 'Si' ? 'true' : 'false' }}"
                                {{ old('articulo_id') == $articulo->id ? 'selected' : '' }}>
                                {{ $articulo->articulo }}
                            </option>
                        @endforeach
                    </select>
                    @error('articulo_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group mb-2">
                    <label for="tipo_movimiento">Tipo de Movimiento</label>
                    <select id="tipo_movimiento" class="form-select" name="tipo_movimiento" required>
                        <option {{ old('tipo_movimiento') == 'Ingreso' ? 'selected' : '' }} value="Ingreso"
                            data-trazable="Ingreso">Ingreso</option>
                        <option {{ old('tipo_movimiento') == 'Egreso' ? 'selected' : '' }} value="Egreso"
                            data-trazable="Egreso">Egreso</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="cantidad">Cantidad</label>
                    <input class="form-control" id="cantidad" name="cantidad" required>
                    <div id="error-cantidad" style="color: red; display: none;">Por favor, ingrese solo números.</div>
                </div>

                <div class="form-group mb-2">
                    <label for="tipoOpcion_id">Tipo de Opción</label>
                    <select id="tipoOpcion_id" name="tipoOpcion_id"
                        class="form-select
                        @error('tipoOpcion_id') is-invalid @enderror" required>
                        @foreach ($tipoOpciones as $tipoOpcion)
                            <option value="{{ $tipoOpcion->id }}"
                                {{ old('tipoOpcion_id') == $tipoOpcion->id ? 'selected' : '' }}>
                                {{ $tipoOpcion->tipoOpcion }}
                            </option>
                        @endforeach
                    </select>
                    @error('tipoOpcion_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Detalle</label>
                    <input class="form-control" type="text" name="detalle" value="{{ old('detalle') }}">
                </div>

                <div class="form-group mb-2">
                    <label for="fecha_carga">Fecha de Carga</label>
                    <input type="date" name="fecha_carga" id="fecha_carga" class="form-control"
                        value="{{ old('fecha_carga') }}" required>
                </div>

                <!-- Modal para Articulos Trazables -->
                <div class="modal fade" id="articuloTrazableModalIngreso" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Detalles del Artículo Trazable</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div id="seccionesArticulos">

                                    <div class="form-group">
                                        <label for="secuencia">Secuencia</label>
                                        <input type="number" class="form-control" id="secuencia" name="secuencia">
                                    </div>

                                    <div class="form-group" style="display: none;">
                                        <label for="numeroSerie">Número de serie</label>
                                        <input type="text" class="form-control" id="numeroSerie" name="numeroSerie"
                                            value="{{ old('numeroSerie') }}">
                                        @error('numeroSerie')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="observaciones">Observaciones</label>
                                        <textarea class="form-control" id="observaciones" name="observaciones">{{ old('observaciones') }}</textarea>
                                        @error('observaciones')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group" id="prefijoSelect" style="display: none;">
                                        <label for="prefijo_id">Prefijo</label>
                                        <select id="prefijo_id" name="prefijo_id" class="form-control">
                                            <!-- Las opciones se cargan dinamicamente con JS -->
                                        </select>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success guardar-articulo">Confirmar</button>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Modal para Egreso -->
                <div class="modal fade" id="articuloEgresoModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Selección de artículo para egreso</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group mb-2" id="selectEgreso">
                                    <label for="articulo_egreso">Artículo para Egreso</label>
                                    <select id="articulo_egreso" name="articulo_egreso" class="form-select">
                                        <!-- Las opciones se cargan dinamicamente mediante JS -->
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success guardar-egreso">Confirmar</button>
                                <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Campos ocultos para los datos del modal -->
                <input type="hidden" id="secuencia_modal" name="secuencia_modal">
                <input type="hidden" id="numeroSerie_modal" name="numeroSerie_modal">
                <input type="hidden" id="observaciones_modal" name="observaciones_modal">
                <input type="hidden" id="prefijo_id_modal" name="prefijo_id_modal">
                <input type="hidden" id="articulo_id_modal_${identificador}" name="articulo_id_modal"
                    value="{{ $articulo->id }}">
                <input type="hidden" name="articuloTrazable_id" id="articuloTrazable_id"
                    value="{{ $articulosTrazables }}">


                <div class="form-row mt-3">
                    <button type="submit" class="btn btn-success btn-lg" style="padding: 8px 16px; font-size: 14px;"><i
                            class="fa fa-save"></i> Guardar</button>

                    <a href="{{ route('movimientos.index') }}" class="btn btn-dark btn-lg"
                        style="padding: 8px 16px; font-size: 14px;"><i class="fas fa-arrow-alt-circle-left"
                            style="margin-right: 5px;"></i> Regresar</a>
                </div>

                <div class="form-row mt-3">
                    <button type="button" style="padding: 8px 16px; font-size: 14px;" class="btn btn-secondary"
                        id="btnMostrarDatos">
                        <i class="fa fa-list-alt"></i> Verificar detalles ingresados
                    </button>
                </div>

            </form>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        // establece la fecha actual como valor predeterminado
        function setDefaultDate() {
            var today = new Date().toISOString().split('T')[0];
            document.getElementById("fecha_carga").value = today;
        }
        window.onload = setDefaultDate;
    </script>


    {{-- Modal´s --}}
    <script>
        function cargarOpcionesEgreso(articuloId) {
            $.ajax({
                url: "{{ route('articulos.disponibles.egreso') }}?articulo_id=" + articuloId,
                type: 'GET',
                success: function(data) {

                    $('#selectEgreso').empty();
                    var cantidadIngresada = parseInt($('input[name="cantidad"]').val());

                    if (data.length === 0) {
                        $('#selectEgreso').html(
                            '<p class="text-muted">No hay artículos disponibles para egresar en este momento.</p>'
                        );

                    } else {
                        data.forEach(function(item) {

                            var checkbox = `
                             <div class="form-check">
                                  <input id="checkboxEgreso" class="form-check-input" type="checkbox" name="articulos_egreso[]" value="${item.id}" data-numero-serie="${item.numeroSerie}" data-observaciones="${item.observaciones}" data-id="${item.id}" data-prefijo="${item.prefijo.prefijo}>
                                  <label class="form-check-label">
                                     ${item.articulo.articulo} - ${item.numeroSerie} - ${item.prefijo.prefijo} - ${item.secuencia} - ${item.observaciones}
                                </label>
                              </div>
                          `;
                            $('#selectEgreso').append(checkbox);
                        });

                        // Limitar la cantidad de checkboxes seleccionables -- ARREGLAR
                        $('input[name="articulos_egreso[]"]').on('change', function() {
                            var checkboxesSeleccionados = $('input[name="articulos_egreso[]"]:checked')
                                .length;
                            if (checkboxesSeleccionados > cantidadIngresada) {
                                $(this).prop('checked', false);
                                alert('Solo puedes egresar hasta ' + cantidadIngresada + ' artículos.');
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }


        // Funcion para mostrar el modal de egreso solo si se ha ingresado una cantidad y el tipo de movimiento es egreso
        function mostrarModalEgreso() {
            var articuloId = $('#articulo_id').val();
            var cantidad = parseInt($('input[name="cantidad"]').val());
            var tipoMovimiento = $('select[name="tipo_movimiento"]').val();
            var esTrazable = $('#articulo_id').find(':selected').data('es-trazable');

            if (tipoMovimiento === 'Egreso' && esTrazable === true && !isNaN(cantidad) && cantidad > 0) {
                $('#articuloEgresoModal').modal('show');
            } else {
                $('#articuloEgresoModal').modal('hide');
                if (tipoMovimiento === 'Egreso' && esTrazable === true) {
                    alert('Por favor, ingresa una cantidad válida antes de continuar.');
                }
            }
        }

        // Llama a la funcion cargarOpcionesEgreso cuando se complete el campo de cantidad
        $('input[name="cantidad"]').on('keyup', mostrarModalEgreso);


        $(document).ready(function() {
            $('#articulo_id').change(function() {
                var articuloIdSeleccionado = $(this).val();
                cargarOpcionesEgreso(articuloIdSeleccionado);
            });

            // Cargar opciones de egreso al cargar la pag por primera vez
            cargarOpcionesEgreso($('#articulo_id').val());
        });



        // Funcion para mostrar el modal de ingreso
        function mostrarModalIngreso(cantidad) {
            var esTrazable = $('#articulo_id').find(':selected').data('es-trazable');

            if (esTrazable === true && cantidad >= 1) {
                $('#articuloTrazableModalIngreso').modal('show');
                generarSecciones(cantidad);
            } else {
                $('#articuloTrazableModalIngreso').modal('hide');
            }
        }

        $('input[name="cantidad"]').on('keyup', function() {
            var cantidad = parseInt($(this).val());
            var tipoMovimiento = $('select[name="tipo_movimiento"]').val();

            if (tipoMovimiento === 'Ingreso') {
                mostrarModalIngreso(cantidad);
            }
        });
    </script>


    <script>
        $('input[name="cantidad"]').on('keyup', function() {
            var cantidad = parseInt($(this).val());
            generarSecciones(cantidad);
        });


        // Division de secciones segun la cantidad ingresada para ingresos
        function generarSecciones(cantidad) {
            var seccionesArticulos = $('#seccionesArticulos');
            seccionesArticulos.empty();

            // Obtener el ultimo prefijo seleccionado
            var ultimoPrefijo = $('#prefijo_id' + cantidad).val();

            // Obtener la ultima secuencia para el ultimo prefijo
            var ultimaSecuencia = parseInt($('#secuencia_prefijo_' + ultimoPrefijo).val()) || 0;

            for (var i = 0; i < cantidad; i++) {
                var identificador = i + 1;
                var nuevaSecuencia = ultimaSecuencia + 1;

                var seccion = `
            <div class="seccionArticulo" id="articulo${identificador}">
                <input type="hidden" id="articulo_id_modal_${identificador}" name="articulo_id_modal" value="{{ $articulo->id }}">
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Artículo ${identificador} <!-- Texto de artículo -->
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="form-group" style="display: none;">
                                    <label for="secuencia${identificador}">Secuencia</label>
                                    <input type="number" class="form-control" id="secuencia${identificador}" name="secuencia${identificador}" value="${nuevaSecuencia}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="numeroSerie${identificador}">Número de Serie</label>
                                    <input type="text" class="form-control" id="numeroSerie${identificador}" name="numeroSerie${identificador}">
                                </div>
                                <div class="form-group">
                                    <label for="observaciones${identificador}">Observaciones</label>
                                    <textarea class="form-control" id="observaciones${identificador}" name="observaciones${identificador}"></textarea>
                                </div>
                                <div class="form-group" id="prefijoSelect${identificador}" style="display: block;">
                                    <label for="prefijo_id${identificador}">Prefijo</label>
                                    <select id="prefijo_id${identificador}" name="prefijo_id${identificador}" class="form-select">
                                        <!-- Las opciones se cargan dinamicamente con JavaScript -->
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
                seccionesArticulos.append(seccion);

                obtenerPrefijoParaSeccion(identificador, $('#articulo_id').val());
                ultimaSecuencia++;
            }
        }


        function obtenerPrefijoParaSeccion(identificador, articuloId) {
            $.ajax({
                url: "{{ route('obtener.prefijo') }}?articulo_id=" + articuloId,
                type: 'GET',
                success: function(response) {
                    $(`#prefijo_id${identificador}`).empty();
                    $(`#prefijo_id${identificador}`).next('.alert').remove();

                    if (response.length === 0) {
                        $(`#prefijo_id${identificador}`).after(
                            '<div class="alert alert-warning">No hay prefijos disponibles para este artículo. Debe agregar al menos un prefijo antes de continuar.</div>'
                        );
                    } else {
                        response.forEach(function(prefijo) {
                            $(`#prefijo_id${identificador}`).append($('<option>', {
                                value: prefijo.prefijo_id,
                                text: prefijo.prefijo_nombre
                            }));
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }



        // Funcion para guardar los datos de ingreso y egreso
        function guardarDatos(tipoModal, datos) {
            if (tipoModal === 'ingreso') {
                $('#formDatosModales').val(JSON.stringify(datos));
                $('#articuloTrazableModalIngreso').modal('hide');

            } else if (tipoModal === 'egreso') {

                if (datos.length > 0) { // Verifica si hay al menos un articulo para egresar
                    $('#formDatosModales').val(JSON.stringify(datos));
                    $('#articuloEgresoModal').modal('hide');
                } else {
                    alert("Debe seleccionar al menos un artículo para egresar.");
                }
            }
        }


        $('.guardar-egreso').on('click', function() {
            var articulosEgreso = [];

            $('input[name="articulos_egreso[]"]:checked').each(function() {
                var articuloTrazableId = $(this).data('id');
                var numeroSerie = $(this).data('numero-serie');
                var observaciones = $(this).data('observaciones');

                articulosEgreso.push({
                    articuloTrazableId: articuloTrazableId,
                    numeroSerie: numeroSerie,
                    observaciones: observaciones
                });
            });

            guardarDatos('egreso', articulosEgreso);
        });



        // Evento del boton "Confirmar" en el modal de ingreso
        $('.guardar-articulo').on('click', function() {
            var articulosIngreso = [];

            $('.seccionArticulo').each(function(index) {
                var secuencia = $(this).find('#secuencia' + (index + 1)).val();
                var numeroSerie = $(this).find('#numeroSerie' + (index + 1)).val();
                var observaciones = $(this).find('#observaciones' + (index + 1)).val();
                var prefijo_id = $(this).find('#prefijo_id' + (index + 1)).val();

                var datosArticulo = {
                    secuencia: secuencia,
                    numeroSerie: numeroSerie,
                    observaciones: observaciones,
                    prefijo_id: prefijo_id
                };

                articulosIngreso.push(datosArticulo);
            });
            guardarDatos('ingreso', articulosIngreso);
        });



        //funcion para verificar si todos los prefijos estan completos
        $(document).ready(function() {

            $('#formularioArticuloTrazable').submit(function(event) {
                var tipoMovimiento = $('select[name="tipo_movimiento"]').val();
                var esTrazable = $('#articulo_id').find(':selected').data('es-trazable');

                if (tipoMovimiento === 'Ingreso' && esTrazable) {
                    var todosCompletos = true;

                    $('.seccionArticulo').each(function() {
                        var prefijoInput = $(this).find('[name^="prefijo_id"]');
                        var prefijo = prefijoInput.val();

                        if (!prefijo) {
                            todosCompletos = false;

                            prefijoInput.after(
                                '<div class="mensajeError2" style="color: red;"> Por favor, cargue un prefijo para el artículo trazable antes de guardar.</div>'
                            );
                        }
                    });

                    // Si no todas las secciones estan completas, mostrar msjs de error
                    if (!todosCompletos) {
                        $('#error-message2').text(
                            'Por favor, antes de proceder con el guardado, asegúrate de asignar un prefijo al artículo. Recuerda completar esta información antes de continuar con la operación.'
                        ).show();
                        event.preventDefault();

                        setTimeout(function() {
                            $('#error-message2').hide();
                        }, 8000);
                    } else {
                        $('#error-message2').hide();
                    }
                }
            });

            $('#articuloTrazableModalIngreso').on('change', '[name^="prefijo_id"]', function() {
                var seccion = $(this).closest('.seccionArticulo');
                var mensajeError = seccion.find('.mensajeError2');

                if ($(this).val()) {
                    mensajeError.remove();
                }
            });
        });



        //funcion para verificar si todos los numeros de serie estan completos
        $(document).ready(function() {

            $('#formularioArticuloTrazable').submit(function(event) {
                var tipoMovimiento = $('select[name="tipo_movimiento"]').val();
                var esTrazable = $('#articulo_id').find(':selected').data('es-trazable');

                if (tipoMovimiento === 'Ingreso' && esTrazable) {
                    var todasCompletas = true;

                    // Iterar sobre cada seccion
                    $('.seccionArticulo').each(function() {
                        var numeroSerieInput = $(this).find('[id^="numeroSerie"]');
                        var numeroSerie = numeroSerieInput.val();

                        if (!numeroSerie) {
                            todasCompletas = false;

                            numeroSerieInput.after(
                                '<div class="mensajeError" style="color: red;">Por favor, complete este campo.</div>'
                            );
                        }
                    });

                    // Si no todas las secciones estn completas, mostrar msjs de error
                    if (!todasCompletas) {
                        $('#error-message').text(
                            'Por favor, complete todos los números de serie del artículo trazable antes de guardar.'
                        ).show();
                        event.preventDefault();

                        setTimeout(function() {
                            $('#error-message').hide();
                        }, 3000);

                    } else {
                        $('#error-message').hide();
                    }
                }
            });

            $('#articuloTrazableModalIngreso').on('input', '[id^="numeroSerie"]', function() {
                var seccion = $(this).closest('.seccionArticulo');
                var mensajeError = seccion.find('.mensajeError');

                if ($(this).val()) {
                    mensajeError.remove();
                }
            });
        });



        function actualizarVisibilidadBoton() {
            var esTrazable = $('#articulo_id').find(':selected').data('es-trazable');
            var tipoMovimiento = $('#tipo_movimiento').val();

            if (esTrazable === true && tipoMovimiento == 'Ingreso') {
                $('#btnMostrarDatos').show();
            } else {
                $('#btnMostrarDatos').hide();
            }
        }

        $(document).ready(function() {
            $('#btnMostrarDatos').hide();
            actualizarVisibilidadBoton();
        });

        $('#articulo_id, #tipo_movimiento').on('change', function() {
            actualizarVisibilidadBoton();
        });


        function mostrarDatosIngresados() {
            var secuencia = $('#secuencia_modal').val();
            var numeroSerie = $('#numeroSerie_modal').val();
            var observaciones = $('#observaciones_modal').val();
            var prefijo_id = $('#prefijo_id_modal').val();

            $('#secuencia').val(secuencia);
            $('#numeroSerie').val(numeroSerie);
            $('#observaciones').val(observaciones);
            $('#prefijo_id').val(prefijo_id);

            $('#articuloTrazableModalIngreso').modal('show');
        }

        $('#btnMostrarDatos').on('click', function() {
            mostrarDatosIngresados();
        });
    </script>


    <script>
        $('#articulo_id').change(function() {
            var articuloId = $(this).val();
            var esTrazable = $(this).find(':selected').data('es-trazable');

            if (esTrazable) {
                $.ajax({
                    url: "{{ route('obtener.prefijo') }}?articulo_id=" + articuloId,
                    type: 'GET',
                    success: function(response) {
                        $('#prefijo_id').empty();

                        response.forEach(function(prefijo) {
                            $('#prefijo_id').append($('<option>', {
                                value: prefijo.prefijo_id,
                                text: prefijo.prefijo_nombre
                            }));
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }
        });
    </script>


    <script>
        var cantidadInput = document.getElementById('cantidad');
        var errorCantidad = document.getElementById('error-cantidad');

        cantidadInput.addEventListener('input', function(event) {
            var valor = event.target.value;
            if (!/^[0-9]*$/.test(valor)) {
                errorCantidad.style.display = 'block';
            } else {
                errorCantidad.style.display = 'none';
            }
        });
    </script>
@endsection