@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)
@section('plugins.MomentJs', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Movimiento De Salidas')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">

            <div class="col-lg-12">
                <div class="card card-aspen card-tabs">
                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Datos Generales</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Reposición Del Artículo</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label>Código Artículo</label>
                                        <div class="input-group">
                                            <input value="{{ $reposicionDeArticulo->articulo->codigo_articulo }}" type="text" class="form-control" name="codigo_articulo" id="codigoArticulo" readonly="true">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Nombre Artículo</label>
                                        <input type="text" class="form-control" name="nombre_articulo" id="nombreArticulo" value="{{ $reposicionDeArticulo->articulo->descripcion }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label>Cuenta De Gasto</label>
                                        <input type="text" class="form-control" name="cuenta_gasto" id="cuentaGasto" value="{{ $reposicionDeArticulo->articulo->cuentaDeGasto->cuenta_gasto }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label>Fecha Registro</label>
                                        <input type="date" class="form-control" name="fecha_registro" id="fechaRegistro" value="{{ fechaConFormatoDeUSA($reposicionDeArticulo->created_at) }}" readonly="true">
                                    </div>

                                    @if (isset($reposicionDeArticulo->usuario))
                                        <div class="form-group">
                                            <label>Encargado De Bodega (Usuario Que Genero La Reposicion)</label>
                                            <input type="text" class="form-control" name="encargado_bodega" id="encargadoBodega" value="{{ $reposicionDeArticulo->usuario->name }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label>Encargado De Bodega (Usuario Que Genero La Reposicion)</label>
                                            <input type="text" class="form-control" name="encargado_bodega" id="encargadoBodega" readonly="true">
                                        </div>
                                    @endif

                                    @if (isset($reposicionDeArticulo->usuarioReposicion))
                                        <div class="form-group">
                                            <label>Encargado De Bodega (Usuario Que Repuso El Total Del Artículo)</label>
                                            <input type="text" class="form-control" name="encargado_bodega_reposicion" id="fechaRegistroReposicion" value="{{ $reposicionDeArticulo->usuarioReposicion->name }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label>Encargado De Bodega (Usuario Que Repuso El Total Del Artículo)</label>
                                            <input type="text" class="form-control" name="encargado_bodega_reposicion" id="fechaRegistroReposicion" readonly="true">
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        <label>Bodega</label>
                                        <input type="text" class="form-control" name="bodega" id="bodega" value="{{ $reposicionDeArticulo->movimientoEntradaStock->bodega->bodega }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label>Cantidad A Reponer</label>
                                        <input type="text" class="form-control" name="cantidad_reponer" id="cantidadReponer" value="{{ $reposicionDeArticulo->cantidad }}" readonly="true">
                                    </div>

                                    @php
                                        $cantidadRepuesto = 0;
                                        foreach ($reposicionDeArticulo->cantidadesArticulosRepuesta as $can) {
                                            $cantidadRepuesto = $cantidadRepuesto + $can->cantidad;
                                        }
                                    @endphp

                                    <div class="form-group">
                                        <label>Cantidad Ya Repuesta</label>
                                        <input type="text" class="form-control" id="cantidadArticuloRepuesta" value="{{ $cantidadRepuesto }}" readonly="true">
                                    </div>

                                    @php
                                        $descripcionArticuloRq="";
                                        $cantidadRq="";
                                        $cantidadOc="";
                                        $centroCosto="";
                                        $numeroRq="";
                                        $numeroOc="";

                                        if(isset($reposicionDeArticulo->movimientoEntradaTransito)){
                                            if(isset($reposicionDeArticulo->movimientoEntradaTransito->articuloRequisicion)){
                                                $descripcionArticuloRq=$reposicionDeArticulo->movimientoEntradaTransito->articuloRequisicion->descripcion;
                                                $cantidadRq=$reposicionDeArticulo->movimientoEntradaTransito->articuloRequisicion->cantidad;
                                                $numeroRq=$reposicionDeArticulo->movimientoEntradaTransito->articuloRequisicion->requisicion->numero_rq;
                                                $centroCosto=$reposicionDeArticulo->movimientoEntradaTransito->articuloRequisicion->requisicion->centroCosto->centro_costo;
                                            }

                                            if(isset($reposicionDeArticulo->movimientoEntradaTransito->articuloOrdenDeCompra)){
                                                $cantidadOc=$reposicionDeArticulo->movimientoEntradaTransito->articuloOrdenDeCompra->cantidad;
                                                $numeroOc=$reposicionDeArticulo->movimientoEntradaTransito->articuloOrdenDeCompra->ordenDeCompra->numero_oc;
                                            }
                                        }
                                    @endphp

                                    <input type="hidden" id="inputDescripcionArticuloRq" value="{{$descripcionArticuloRq}}">
                                    <input type="hidden" id="inputCantidadRq" value="{{$cantidadRq}}">
                                    <input type="hidden" id="inputCantidadOc" value="{{$cantidadOc}}">
                                    <input type="hidden" id="inputCentroCosto" value="{{$centroCosto}}">
                                    <input type="hidden" id="inputNumeroRq" value="{{$numeroRq}}">
                                    <input type="hidden" id="inputNumeroOc" value="{{$numeroOc}}">

                                </div>
                            </div>

                            <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="alert alert-danger" role="alert" style="display: none;" id="errorListadoArticulo">
                                    La orden de compra debe tener asociado al menos un artículo/servicio para su creación
                                </div>

                                <div class="dt-responsive table-responsive">
                                    <table id="tablaConExportacionConFiltrado" class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                                        <thead>
                                            <tr>
                                                <th colspan="7" class="text-center">Reposición Artículo Bodega Stock</th>
                                                <th colspan="7" class="text-center">Movimiento Bodega Tránsito</th>
                                            </tr>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Código Artículo</th>
                                                <th>Nombre Artículo</th>
                                                <th>Cuenta Gasto</th>
                                                <th>Contable</th>
                                                <th>Cantidad De Reposición</th>
                                                <th>Observación</th>

                                                <th>Descripción artículo Rq</th>
                                                <th>Cantidad Rq</th>
                                                <th>Cantidad Oc</th>
                                                <th>Cc</th>
                                                <th>Rq</th>
                                                <th>Oc</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tablaBodyConExportacionConFiltrado">

                                        </tbody>
                                    </table>
                                </div>

                                <button type="button" class="btn btn-aspen mt-1" onclick="agregarMovimientoReposicion()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Añadir Reposición Del Artículo</button>
                            </div>
                        </div>
                    </div>

                    <div class=" card-footer">
                        <button type="button" class="btn btn-aspen" id="botonDeCreacion" onclick="reponerCantidadDelArticulo()"><i class="fas fa-save" style="margin-right: 2px;"></i> Guardar Reposición</button>
                        <a href="{{ route('reposicion-articulo.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="modalCampoObservacion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloCampoObservacionObservacion">Editar Cantidad De Entrada</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="observacion">Observación</label>
                            <textarea class="form-control" id="observacion" name="observacion" rows="3"></textarea>
                            <div class="invalid-feedback" id="valicacionCampoObservacion">

                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" id="botonCampoEditarObservacion" onclick="editarColumnaObservacionConModal()">Editar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="modalSelecionarContable" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title">Contable</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="cuadro-modificar-reembolsable-si" onclick="seleccionarImputContable(this)" style="cursor: pointer;">
                            <div class="custom-control custom-radio">
                                <input type="radio" value="Si" id="contableSi" name="contable" class="custom-control-input" style="cursor: pointer;">
                                <label class="custom-control-label" for="contableSi" style="cursor: pointer;">Si</label>
                            </div>
                        </div>

                        <div class="cuadro-modificar-reembolsable-no" onclick="seleccionarImputContable(this)" style="cursor: pointer;">
                            <div class="custom-control custom-radio">
                                <input value="No" type="radio" id="contableNo" name="contable" class="custom-control-input" style="cursor: pointer;">
                                <label class="custom-control-label" for="contableNo" style="cursor: pointer;">No</label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" id="botonSeleccionarContable">Seleccionar </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2023 <a href="https://aspenspa.cl/">aspenspa.cl</a></strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        .hide_column {
            display: none;
        }

        .kv-file-upload {
            display: none;
        }

        .contenedorParaVisualizarImagenDelArchivo {
            background-color: rgba(0, 0, 0, .8);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10000;
            display: grid;
            grid-template-rows: 10vh 90vh;
            color: white;

        }

        .contenedorVolver {
            padding-left: 10px;
            padding-right: 10px;
            display: grid;
            grid-template-columns: 90% 10%;
        }

        .contenedorDeImagenes {
            display: grid;
            grid-template-columns: 100%;
        }

        .tamanoImagen {
            max-width: 80%;
        }

        .tamanoIframe {
            width: 80%;
            height: 700px;
        }

        .tamanoIframeTxt {
            width: 80%;
            height: 700px;
            background-color: white;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        var columnaActiva = false;
        var tipoColumnaActiva = ""
        var contadorTabla = 0;
        var filaActual;

        function permitirCarateresParaIngresarCantidadEntrada(event, cantidad) {
            if (event.key === "Enter") {
                cantidad.removeAttribute("onblur");
                tipoColumnaActiva = "sin_campo";
                var elementoPadreFilaActual = cantidad.parentElement.parentElement;
                var valorCantidad = cantidad.value;

                if (valorCantidad != "") {
                    var campoCantidadEntradaNumero = parseInt(valorCantidad);
                    if (campoCantidadEntradaNumero > 0) {
                        var cantidadAReponer = parseInt(document.getElementById("cantidadReponer").value);
                        var cantidadDelArticuloYaRepuesto = parseInt(document.getElementById("cantidadArticuloRepuesta").value);
                        var filas = document.getElementById('tablaConExportacionConFiltrado').tBodies[0].querySelectorAll("tr");
                        var cantidad = 0;
                        var cantidadMensajeError = 0;

                        filas.forEach(elementoPadre => {
                            var cantidadFilaRepuesta = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").innerHTML;
                            if (elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida")) {
                                var campoCantidadRepuestaInput = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value;
                                if (campoCantidadRepuestaInput.trim() != "") {
                                    cantidad += parseInt(campoCantidadRepuestaInput.trim());
                                    cantidadMensajeError += parseInt(campoCantidadRepuestaInput.trim());
                                } else {
                                    cantidad++;
                                    cantidadMensajeError++;
                                }
                            } else {
                                if (cantidadFilaRepuesta.trim() != "") {
                                    cantidad += parseInt(cantidadFilaRepuesta.trim());
                                    cantidadMensajeError += parseInt(cantidadFilaRepuesta.trim());
                                } else {
                                    cantidad++;
                                    cantidadMensajeError++;
                                }
                            }
                        });

                        if (filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value != "") {
                            cantidad -= parseInt(filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value);
                            cantidadMensajeError -= parseInt(filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value);
                            if (cantidad < 0) {
                                cantidad = 0;
                            }
                        } else {
                            cantidad--;
                            cantidadMensajeError--;
                            if (cantidad < 0) {
                                cantidad = 0;
                            }
                        }
                        cantidad = cantidad + parseInt(valorCantidad);
                        cantidad = cantidad + parseInt(cantidadDelArticuloYaRepuesto);
                        cantidadMensajeError = cantidadMensajeError + parseInt(cantidadDelArticuloYaRepuesto);

                        if (cantidad > cantidadAReponer) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 14000,
                                width: '1000px'
                            });

                            cantidadMensajeError = cantidadAReponer - cantidadMensajeError;
                            elementoPadreFilaActual.innerHTML = "";
                            columnaActiva = false;
                            var mensajeDeError =
                                "El campo cantidad de reposición de la fila no debe superar el numero " + cantidadMensajeError + " que es la cantidad maxima que se puede registrar en esta fila." +
                                "<br/><br/>Nota: La cantidad maxima a registrar es la suma total del campo cantidad de reposición" +
                                "la cantidad ya repuesta del articulo, en caso que el campo cantidad de reposición no tenga datos su valor sera 1.";

                            Toast.fire({
                                icon: 'error',
                                title: mensajeDeError
                            })
                        } else {
                            elementoPadreFilaActual.innerHTML = valorCantidad;
                            columnaActiva = false;
                        }
                    } else {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 5000
                        });
                        elementoPadreFilaActual.innerHTML = "";
                        columnaActiva = false;
                        Toast.fire({
                            icon: 'error',
                            title: "El campo cantidad de reposición debe ser mayor que cero"
                        })
                    }
                } else {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 5000
                    });
                    elementoPadreFilaActual.innerHTML = valorCantidad;
                    columnaActiva = false;
                    Toast.fire({
                        icon: 'error',
                        title: "El campo cantidad de reposición es obligatorio"
                    })
                }
            } else {
                if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event.key != 6 && event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0) {
                    return false;
                } else {
                    return true;
                }
            }

        }

        function setCaretPosition(ctrl, pos) {

            if (ctrl.setSelectionRange) {
                ctrl.focus();
                ctrl.setSelectionRange(pos, pos);
            } else if (ctrl.createTextRange) {
                var range = ctrl.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }

        }

        function abrirModalEditarCantidadDeReposicion(cantidad) {
            var habilitarImput = false;
            if (tipoColumnaActiva != "cantidad_reposicion") {
                habilitarImput = true;
            }

            if (habilitarImput == true) {
                filaActual = cantidad.parentElement;
                columnaActiva = true;
                tipoColumnaActiva = "cantidad_reposicion";
                var valorCantidad = cantidad.innerHTML;
                var campoFormulario =
                    '<div class="form-group">' +
                    '<input type="text" class="form-control" id="campoEditarCantidadSalida" value="' + valorCantidad + '"  onblur="editarColumnaCantidadDeReposicionConModal(this)" onkeypress="return permitirCarateresParaIngresarCantidadEntrada(event,this)">' +
                    '</div>';

                cantidad.innerHTML = campoFormulario;
                var input = cantidad.querySelector("input");
                setCaretPosition(input, input.value.length);
                deshabilitarBotonesConfirmarEliminacionArticulo()
            }
        }

        function editarColumnaCantidadDeReposicionConModal(cantidad) {
            tipoColumnaActiva = "sin_campo";
            var elementoPadreFilaActual = cantidad.parentElement.parentElement;
            var valorCantidad = cantidad.value.trim();

            if (valorCantidad != "") {
                var campoCantidadEntradaNumero = parseInt(valorCantidad);
                if (campoCantidadEntradaNumero > 0) {
                    var cantidadAReponer = parseInt(document.getElementById("cantidadReponer").value);
                    var cantidadDelArticuloYaRepuesto = parseInt(document.getElementById("cantidadArticuloRepuesta").value);
                    var filas = document.getElementById('tablaConExportacionConFiltrado').tBodies[0].querySelectorAll("tr");
                    var cantidad = 0;
                    var cantidadMensajeError = 0;

                    filas.forEach(elementoPadre => {
                        var cantidadFilaRepuesta = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").innerHTML;
                        if (elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida")) {
                            var campoCantidadRepuestaInput = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value;
                            if (campoCantidadRepuestaInput.trim() != "") {
                                cantidad += parseInt(campoCantidadRepuestaInput.trim());
                                cantidadMensajeError += parseInt(campoCantidadRepuestaInput.trim());
                            } else {
                                cantidad++;
                                cantidadMensajeError++;
                            }
                        } else {
                            if (cantidadFilaRepuesta.trim() != "") {
                                cantidad += parseInt(cantidadFilaRepuesta.trim());
                                cantidadMensajeError += parseInt(cantidadFilaRepuesta.trim());
                            } else {
                                cantidad++;
                                cantidadMensajeError++;
                            }
                        }
                    });

                    if (filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value != "") {
                        cantidad -= parseInt(filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value);
                        cantidadMensajeError -= parseInt(filaActual.querySelector(".tabla-cantidad-reposicion-articulo").querySelector("#campoEditarCantidadSalida").value);
                        if (cantidad < 0) {
                            cantidad = 0;
                        }
                    } else {
                        cantidad--;
                        cantidadMensajeError--;
                        if (cantidad < 0) {
                            cantidad = 0;
                        }
                    }
                    cantidad = cantidad + parseInt(valorCantidad);
                    cantidad = cantidad + parseInt(cantidadDelArticuloYaRepuesto);
                    cantidadMensajeError = cantidadMensajeError + parseInt(cantidadDelArticuloYaRepuesto);

                    if (cantidad > cantidadAReponer) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 14000,
                            width: '1000px'
                        });

                        cantidadMensajeError = cantidadAReponer - cantidadMensajeError;
                        elementoPadreFilaActual.innerHTML = "";
                        columnaActiva = false;
                        var mensajeDeError =
                            "El campo cantidad de reposición de la fila no debe superar el numero " + cantidadMensajeError + " que es la cantidad maxima que se puede registrar en esta fila." +
                            "<br/><br/>Nota: La cantidad maxima a registrar es la suma total del campo cantidad de reposición" +
                            "la cantidad ya repuesta del articulo, en caso que el campo cantidad de reposición no tenga datos su valor sera 1.";

                        Toast.fire({
                            icon: 'error',
                            title: mensajeDeError
                        })
                    } else {
                        elementoPadreFilaActual.innerHTML = valorCantidad;
                        columnaActiva = false;
                    }
                } else {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 5000
                    });
                    elementoPadreFilaActual.innerHTML = "";
                    columnaActiva = false;
                    Toast.fire({
                        icon: 'error',
                        title: "El campo cantidad de reposición debe ser mayor que cero"
                    })
                }
            } else {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000
                });
                elementoPadreFilaActual.innerHTML = valorCantidad;
                columnaActiva = false;
                Toast.fire({
                    icon: 'error',
                    title: "El campo cantidad de reposición es obligatorio"
                })
            }
        }

        function abrirModalEditarObservacion(fila) {
            filaActual = fila;
            tipoColumnaActiva = "observacion";
            document.getElementById("observacion").setAttribute("class", "form-control");
            document.getElementById("valicacionCampoObservacion").innerHTML = "";
            document.getElementById("observacion").value = filaActual.querySelector(".tabla-observacion-reposicion-articulo").innerHTML;
            $("#modalCampoObservacion").modal("show");
            deshabilitarBotonesConfirmarEliminacionArticulo()
        }

        function editarColumnaObservacionConModal() {
            if (document.getElementById("observacion").value.trim() != "") {
                filaActual.querySelector(".tabla-observacion-reposicion-articulo").innerHTML = document.getElementById("observacion").value.trim();
                $("#modalCampoObservacion").modal("hide");
            } else {
                document.getElementById("observacion").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoObservacion").innerHTML = "El campo observación es obligatorio";
            }
        }

        function seleccionarImputContable(campo) {
            campo.querySelector("input").checked = true
        }

        function abrirModalDeEdicionContable(fila) {
            filaActual = fila;
            tipoColumnaActiva = "contable";
            document.getElementById("botonSeleccionarContable").addEventListener("click", editarColumnaContable);

            $("#contableSi").prop('checked', false);
            $("#contableNo").prop('checked', false);

            $("#modalSelecionarContable").modal("show");
            deshabilitarBotonesConfirmarEliminacionArticulo()
        }

        function editarColumnaContable() {
            if ($("#contableSi").is(':checked') || $("#contableNo").is(':checked')) {
                var valorReembolsable = $('input:radio[name=contable]:checked').val();
                filaActual.querySelector(".tabla-contable-reposicion-articulo").innerHTML = valorReembolsable;
                $('#modalSelecionarContable').modal('hide');
            }
        }

        function deshabilitarBotonesConfirmarEliminacionArticulo() {
            var botones = document.querySelectorAll(".boton-confirmar-articulo");
            botones.forEach(elemento => {
                elemento.style.display = 'none';
            });
        }

        function habilitarBotonConfirmarEliminacionArticulo(boton) {

            if (boton.nextElementSibling.style.display == 'none') {
                deshabilitarBotonesConfirmarEliminacionArticulo();
                boton.nextElementSibling.style.display = 'inline-block';
            } else {
                if (boton.nextElementSibling.style.display == 'inline-block') {
                    deshabilitarBotonesConfirmarEliminacionArticulo();
                }
            }

        }

        function eliminarFila(boton) {
            var elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            contadorTabla = 0;
            var filas = document.getElementById('tablaConExportacionConFiltrado').tBodies[0].querySelectorAll("tr");
            filas.forEach(elemento => {
                contadorTabla++;
                elemento.querySelector(".tabla-contador-articulo-entrada").innerHTML = contadorTabla;
            });
        }
    </script>

    <script>
        function uuidv4() {
            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        function agregarMovimientoReposicion() {
            contadorTabla++;
            var codigoUnico = uuidv4();
            var codigoArticulo = document.getElementById("codigoArticulo").value;
            var nombreArticulo = document.getElementById("nombreArticulo").value;
            var cuentaGastoArticulo = document.getElementById("cuentaGasto").value;

            var filas = document.getElementById('tablaConExportacionConFiltrado').tBodies[0].querySelectorAll("tr");
            var cuentaReponer = document.getElementById("cantidadReponer").value;
            var cantidadDelArticuloYaRepuesto = document.getElementById("cantidadArticuloRepuesta").value;
            var cantidadTotal = 0;
            filas.forEach(elementoPadre => {
                var cantidadFilaRepuesta = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").innerHTML;
                if (cantidadFilaRepuesta.trim() != "") {
                    cantidadTotal += parseInt(cantidadFilaRepuesta.trim());
                } else {
                    cantidadTotal++;
                }
            });
            cantidadTotal = cantidadTotal + parseInt(cantidadDelArticuloYaRepuesto);
            if (cantidadTotal >= cuentaReponer) {
                Swal.fire({
                    icon: 'error',
                    title: '¡No se puede añadir la reposición!',
                    text: 'No es posible añadir más reposiciones del artículo, ya que todas las cantidades del artículo se encuentra repuesta o se encuentran en tabla para ser repuesto.',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })
            } else {
                document.getElementById("tablaBodyConExportacionConFiltrado").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td style="display: none;" class="tabla-id-unico-reposicion-articulo">' + codigoUnico + '</td>' +
                    '<td class="tabla-contador-reposicion-articulo">' + contadorTabla + '</td>' +
                    '<td class="tabla-codigo-articulo-reposicion-articulo">' + codigoArticulo + '</td>' +
                    '<td class="tabla-nombre-articulo-reposicion-articulo">' + nombreArticulo + '</td>' +
                    '<td class="tabla-cuenta-gasto-reposicion-articulo">' + cuentaGastoArticulo + '</td>' +
                    '<td class="tabla-contable-reposicion-articulo" onclick="abrirModalDeEdicionContable(this.parentElement)">Si</td>' +
                    '<td class="tabla-cantidad-reposicion-articulo" onclick="abrirModalEditarCantidadDeReposicion(this)"></td>' +
                    '<td class="tabla-observacion-reposicion-articulo" onclick="abrirModalEditarObservacion(this.parentElement)"></td>' +
                
                    '<td class="tabla-descripcion-articulo-rq-articulo">'+document.getElementById("inputDescripcionArticuloRq").value+'</td>' +
                    '<td class="tabla-cantidad-rq-articulo">'+document.getElementById("inputCantidadRq").value+'</td>' +
                    '<td class="tabla-cantidad-oc-articulo">'+document.getElementById("inputCantidadOc").value+'</td>' +
                    '<td class="tabla-centro-costo-articulo">'+document.getElementById("inputCentroCosto").value+'</td>' +
                    '<td class="tabla-numero-rq-articulo">'+document.getElementById("inputNumeroRq").value+'</td>' +
                    '<td class="tabla-numero-oc-articulo">'+document.getElementById("inputNumeroOc").value+'</td>' +
                    '<td class="tabla-accion-reposicion-articulo">' +
                    '<button onclick="habilitarBotonConfirmarEliminacionArticulo(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFila(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';
            }
        }
    </script>

    <script>
        function reponerCantidadDelArticulo() {
            generarLoading('{{ asset('img/logo.png') }}')
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            var filas = document.getElementById('tablaConExportacionConFiltrado').tBodies[0].querySelectorAll("tr");
            var listadoDeArticulo = [];
            var filasConCamposVacios = false;
            var tablaArticuloconRegistro = false;
            var faltaDatosDeRequisicion=false;
            var faltaDatosDeOrdenDeCompra=false;
            filas.forEach(elementoPadre => {
                tablaArticuloconRegistro = true;
                var contable = elementoPadre.querySelector(".tabla-contable-reposicion-articulo").innerHTML;
                var cantidadReposicion = elementoPadre.querySelector(".tabla-cantidad-reposicion-articulo").innerHTML;
                var observacion = elementoPadre.querySelector(".tabla-observacion-reposicion-articulo").innerHTML;
                var descripcionArticuloRq = elementoPadre.querySelector(".tabla-descripcion-articulo-rq-articulo").innerHTML;
                var cantidadRq = elementoPadre.querySelector(".tabla-cantidad-rq-articulo").innerHTML;
                var cantidadOc = elementoPadre.querySelector(".tabla-cantidad-oc-articulo").innerHTML;
                var centroCosto = elementoPadre.querySelector(".tabla-centro-costo-articulo").innerHTML;
                var numeroRq = elementoPadre.querySelector(".tabla-numero-rq-articulo").innerHTML;
                var numeroOc = elementoPadre.querySelector(".tabla-numero-oc-articulo").innerHTML;

                if (contable.trim().length == "") {
                    filasConCamposVacios = true;
                }

                if (cantidadReposicion.trim().length == "") {
                    filasConCamposVacios = true;
                }

                if (descripcionArticuloRq.trim().length == "") {
                    filasConCamposVacios = true;
                    faltaDatosDeRequisicion=true;
                }

                if (cantidadRq.trim().length == "") {
                    filasConCamposVacios = true;
                    faltaDatosDeRequisicion=true;
                }

                if (cantidadOc.trim().length == "") {
                    filasConCamposVacios = true;
                    faltaDatosDeOrdenDeCompra=true;
                }

                if (numeroRq.trim().length == "") {
                    filasConCamposVacios = true;
                    faltaDatosDeRequisicion=true;
                }

                if (numeroOc.trim().length == "") {
                    filasConCamposVacios = true;
                    faltaDatosDeOrdenDeCompra=true;
                }

                var articulo = {
                    contable: contable,
                    cantidadReposicion: cantidadReposicion,
                    observacion: observacion
                }
                listadoDeArticulo.push(articulo);
            });
            listadoDeArticulo = JSON.stringify(listadoDeArticulo);

            if (tablaArticuloconRegistro == false) {
                document.getElementById("errorListadoArticulo").innerHTML = "<p>No es posible realizar reposición del artículo, no se ha añadido ninguna cantidad a reponer.</p>";
                document.getElementById("errorListadoArticulo").style.display = "block";
                listadoDeArticulo = "";
            }

            if (filasConCamposVacios == true) {
                if(faltaDatosDeRequisicion==false && faltaDatosDeOrdenDeCompra==false){
                    document.getElementById("errorListadoArticulo").innerHTML = 
                    "<p style='margin:0;'>No es posible realizar reposición del artículo, algunos cantidad a reponer le faltan datos.</p>";
                }else if(faltaDatosDeRequisicion==true && faltaDatosDeOrdenDeCompra==true){
                    document.getElementById("errorListadoArticulo").innerHTML = 
                    "<p style='margin:0;'>No es posible realizar reposición del artículo, algunos cantidad a reponer le faltan datos</p>"+
                    "<p style='margin:0;'>-Falta los datos de la requisición del movimiento de la bodega de tránsito.</p>"+
                    "<p style='margin:0;'>-Falta los datos de la orden de compra del movimiento de la bodega de tránsito.</p>";
                }else if(faltaDatosDeRequisicion==false && faltaDatosDeOrdenDeCompra==true){
                    document.getElementById("errorListadoArticulo").innerHTML = 
                    "<p style='margin:0;'>No es posible realizar reposición del artículo, algunos cantidad a reponer le faltan datos.</p>"+
                    "<p style='margin:0;'>-Falta los datos de la orden de compra del movimiento de la bodega de tránsito.</p>";
                }else if(faltaDatosDeRequisicion==true && faltaDatosDeOrdenDeCompra==false){
                    document.getElementById("errorListadoArticulo").innerHTML = 
                    "<p style='margin:0;'>No es posible realizar reposición del artículo, algunos cantidad a reponer le faltan datos.</p>"+
                    "<p style='margin:0;'>-Falta los datos de la requisición del movimiento de la bodega de tránsito.</p>";
                }
                document.getElementById("errorListadoArticulo").style.display = "block";
                listadoDeArticulo = "";
            }

            if (tablaArticuloconRegistro == true && filasConCamposVacios == false) {
                var formData = new FormData();
                formData.append('listadoDeArticulos', listadoDeArticulo);
                var csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('reposicion-articulo.store-reposicion-articulo', $reposicionDeArticulo) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                                icon: 'success',
                                title: '¡Exito!',
                                text: 'La reposición del artículo se realizó con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.href = "{{ route('reposicion-articulo.show', $reposicionDeArticulo) }}";
                            })
                            .catch((error) => {
                                location.href = "{{ route('reposicion-articulo.show', $reposicionDeArticulo) }}";
                            });
                    },
                    error: function(data) {
                        console.log(data)
                        document.getElementById("botonDeCreacion").removeAttribute("disabled");
                        eliminarLoading()
                    }
                })
            } else {
                document.getElementById("custom-tabs-one-profile-tab").click();
                eliminarLoading()
                document.getElementById("botonDeCreacion").removeAttribute("disabled");
            }
        }
    </script>
@stop