@extends('adminlte::page')

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

@section('title', 'Intranet | Editar Consumible TI')

@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-8">

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Editar Consumible TI</h3>
                </div>

                <form id="formularioDeConsumibleTi">
                    @csrf
                    @method('put')

                    <div class="card-body">
                        <div class="contenedorDosCamposPorFilaEnLosFormulario">
                            <div class="form-group">
                                <label for="campoCorrelativo">Correlativo</label>
                                <input type="text" class="form-control" id="campoCorrelativo" readonly="true" value="{{old('correlativo',$asignacionConsumibleTi->correlativo)}}">
                                <div class="invalid-feedback" id="validacionCampoCorrelativo">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Consumible</label>
                                <select class="form-control listaDespegableConBuscador" id="campoConsumible" name="id_consumible_ti" data-live-search="true" onchange="obtenerTodosLosDatosDelConsumibleSeleccionado(this)">
                                    <option value="">--Seleccionar Consumible--</option>
                                    @foreach ($consumibles as $consumible)
                                        @if (old('id_consumible_ti',$asignacionConsumibleTi->id_consumible_ti) == $consumible->id)
                                            <option selected value="{{ $consumible->id }}">{{ $consumible->consumible}}</option>
                                        @else
                                            <option value="{{ $consumible->id }}">{{ $consumible->consumible }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoConsumible">

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="campoTipoIdentificador">Stock del Consumible</label>
                                <input type="text" class="form-control" id="campoStockActualConsumible" readonly="true" value="{{old('stock',($asignacionConsumibleTi->consumibleTi->cantidad+$asignacionConsumibleTi->cantidad))}}">
                                <div class="invalid-feedback" id="validacionCampoStockActualConsumible">

                                </div>
                            </div>

                            <div class="form-group">
                                <label for="campoTipoIdentificador">Centro de Costo</label>
                                <input type="text" class="form-control" id="campoCentroCosto" name="centro_costo" value="{{old('centro_costo',$asignacionConsumibleTi->centroDeCosto->centro_costo) }}" readonly="true">
                                <div class="invalid-feedback" id="validacionCampoCentroCosto">

                                </div>
                            </div>
                            <input type="hidden" name="id_centro_costo" id="campoIdCentroCosto" value="{{old('id_centro_costo',$asignacionConsumibleTi->centroDeCosto->id) }}">

                            <div class="form-group">
                                <label for="campoTipoIdentificador">Cantidad</label>
                                <input type="text" class="form-control" id="campoCantidad" name="cantidad" value="{{old('cantidad',$asignacionConsumibleTi->cantidad) }}" onkeypress="return permitirSoloCarateresNumericos(event,this)">
                                <div class="invalid-feedback" id="validacionCampoCantidad">

                                </div>
                            </div>
    
                            <div class="form-group">
                                <label>Tipo de Asignación de Trabajadores</label>
                                <select class="form-control listaDespegableConBuscador" id="campoTipoAsignacionTrabajador" name="tipo_asignacion_trabajador" data-live-search="true">
                                    <option value="">--Seleccionar Tipo de Asignación de Trabajadores--</option>
                                    @foreach ($tiposDeAsignacionesDeTrabajadores as $tipoAsignacion)
                                        @if (old('tipo_asignacion_trabajador') == $tipoAsignacion)
                                            <option selected value="{{ $tipoAsignacion }}">{{ $tipoAsignacion }}</option>
                                        @else
                                            <option value="{{ $tipoAsignacion }}">{{ $tipoAsignacion }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="validacionCampoTipoAsignacionTrabajador">
    
                                </div>
                            </div>
                        </div>

                        <div class="dt-responsive table-responsive">
                            <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-usuario-asignado">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="text-center">Trabajador Asignado</th>
                                    </tr>
                                    <tr role="row">
                                        <th>Nombre</th>
                                        <th>Rut</th>
                                        <th>Centro de Costo</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="registrosDeUsuarioAsignado">
                                    @if (isset($datosUsuarioAsignado) && !empty($datosUsuarioAsignado))
                                            <tr role="row">
                                            <td style="display: none;" class="tabla-tipo-asignacion-trabajador-asignado">{{$datosUsuarioAsignado["tipo_asignacion"]}}</td>
                                            <td style="display: none;" class="tabla-id-trabajador-asignado">{{$datosUsuarioAsignado["id_trabajador"]}}</td>
                                            <td style="display: none;" class="tabla-id-centro-costo-trabajador-asignado">{{$datosUsuarioAsignado["id_centro_costo"]}}</td>
                                            <td class="tabla-nombre-trabajador-asignado">{{$datosUsuarioAsignado["nombre"]}}</td>
                                            <td class="tabla-rut-trabajador-asignado">{{$datosUsuarioAsignado["rut"]}}</td>
                                            <td class="tabla-centro-costo-trabajador-asignado">{{$datosUsuarioAsignado["centro_costo"]}}</td>
                                            <td class="tabla-accion-trabajador-asignado">
                                            <button onclick="habilitarBotonesDeConfirmacionDeEliminacionDeTrabajador(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>
                                            <button onclick="eliminarFilaTrabajadorAsignado(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-item mr-1">Confirmar</button>
                                            </td>
                                            </tr>
                                        @else
                                            <tr id="usuarioAsignadoNoDisponibleEnLaTabla">
                                                <td colspan="4" class="text-center">No hay trabajadores disponibles en la tabla</td>
                                            </tr>
                                        @endif
                                </tbody>
                            </table>
                        </div>

                        <div class="form-group">
                            <label for="campoDetalleGeneral">Detalle General <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                            <textarea class="form-control" id="campoDetalleGeneral" name="detalle_general" rows="3">{{old('detalle_general',$asignacionConsumibleTi->detalle_general) }}</textarea>
                            <div class="invalid-feedback" id="validacionCampoDetalleGeneral">

                            </div>
                        </div>

                        <button type="button" class="btn btn-info mt-1" onclick="abrirModalParaAsignarTrabajador()"><i class="fas fa-user-check" style="margin-right: 2px;"></i> Asignar Trabajador</button>
                    </div>

                    <div class=" card-footer">
                        <button type="button" class="btn btn-primary" id="botonDeEdicion" onclick="editarConsumible()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Consumible </button>
                        <a href="{{ route('consumible-ti.index-asignaciones') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                    </div>
                </form>
            </div>

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

<div class="modal fade" id="modalAsignarTrabajador" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form>
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #007bff; color:white;">
                    <h5 class="modal-title">Listado de Trabajadores</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="table-responsive">
                        <table class="table" id="datatable-trabajadores" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Id Trabajador</th>
                                    <th>Id Centro de Costo</th>
                                    <th>Nombre</th>
                                    <th>Rut</th>
                                    <th>Correo</th>
                                    <th>Centro de Costo</th>
                                </tr>
                            </thead>
                            <tbody>

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

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="botonAsignarTrabajador" style="display:none;" onclick="editarAsignarcionDeTrabajador()">Asignar Trabajador</button>
                    <button type="button" class="btn btn-primary" id="botonAsignarTrabajadorContraturno" style="display:none;" onclick="editarAsignarcionDeTrabajadorContraturno()">Asignar Trabajador Contraturno</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="modalAsignarTrabajadorManual" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #007bff; color:white;">
                    <h5 class="modal-title">Completa los Datos Del Trabajador</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="campoDiscoDuro">Nombre Trabajador</label>
                        <input type="text" class="form-control" id="campoNombreTrabajadorManual">
                        <div class="invalid-feedback" id="validacionCampoNombreTrabajadorManual">

                        </div>
                    </div>

                    <div class="form-group" >
                        <label for="campoDiscoDuro">Rut Trabajador</label>
                        <input type="text" class="form-control" id="campoRutTrabajadorManual">
                        <div class="invalid-feedback" id="validacionCampoRutTrabajadorManual">

                        </div>
                    </div>

                    <div class="form-group">
                        <label>Centro de Costo</label>
                        <select class="form-control listaDespegableConBuscador" id="campoCentroCostoManual" data-live-search="true">
                            <option value="">--Seleccionar Centro de Costo--</option>
                            @foreach ($centrosCostos as $cc)
                                <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="validacionCampoCentroCostoManual">

                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="botonAsignarTrabajadorManual" style="display:none;" onclick="editarAsignarcionDeTrabajadorManual()">Asignar Trabajador</button>
                    <button type="button" class="btn btn-primary" id="botonAsignarTrabajadorContraturnoManual" style="display:none;" onclick="editarAsignarcionDeTrabajadorContraturnoManual()">Asignar Trabajador Contraturno</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        table th {
            background-color: #007bff;
            color: white;
        }

        table>tbody>tr>td {
            vertical-align: middle !important;
        }

        .mh .dropdown-menu {
            max-height: 120px;
        }

        .hide_column {
            display: none;
        }

    </style>
@stop

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

    <script>
        $('#campoConsumible').selectpicker({
            dropupAuto: false
        });
        $('#campoTipoAsignacionTrabajador').selectpicker({
            dropupAuto: false
        });
        $('#campoRutTrabajadorManual').inputmask({
            mask: '9{1,2}.9{3}.9{3}-(K|k|9)',
            casing: 'upper',
            clearIncomplete: false,
            numericInput: false
        });
    </script>

    <script>
        var datatableTrabajadores = $("#datatable-trabajadores").DataTable({
            columnDefs: [{
                "targets": [0,1],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('inventario-ti.obtener-registros-trabajadores-talana-datatable') }}',
                dataType: "json",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }} "
                },
            },
            columns: [{
                    "data": "id_trabajador",
                    "name": "id_trabajador"
                },
                {
                    "data": "id_centro_costo",
                    "name": "id_centro_costo"
                },
                {
                    "data": "nombre",
                    "name": "nombre"
                },
                {
                    "data": "rut",
                    "name": "rut"
                },
                {
                    "data": "correo",
                    "name": "correo"
                },
                {
                    "data": "centro_costo",
                    "name": "centro_costo"
                }
            ],
            select: {
                style: 'single'
            },
            orderCellsTop: true,
            //fixedHeader: true,
            lengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Cargando Registros...",
                search: "Buscar",
                lengthMenu: "Mostrar_MENU_ Registros",
                info: "Mostrar desde _START_ hasta _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros.",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 d-flex justify-content-center' ><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>"
        });

        $("#datatable-trabajadores thead tr").clone(true).appendTo("#datatable-trabajadores thead");

        $("#datatable-trabajadores thead tr:eq(1) th").each(function(i) {
            var title = $(this).text(); //es el nombre de la columna
            if (title != "Acción" && title != "Selección") {
                $(this).html(
                    '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                );
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
                $(this).unbind();
                $(this).parent().attr('id', 'searchColumns');

                $("input", this).on("keyup change", function() {
                    if (datatableTrabajadores.column(i).search() !== this.value) {
                        datatableTrabajadores.column(i).search(this.value).draw();
                    }
                });
            } else {
                $(this).html("<div></div>");
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
            }
        });
    </script>

    <script>
        let numeroCorrelativo={{$asignacionConsumibleTi->numero_correlativo}};
        let nombreConsumible=document.getElementById("campoConsumible").options[document.getElementById("campoConsumible").selectedIndex].text;
        nombreConsumible=nombreConsumible.replaceAll(' ', '-');
        let idConsumible={{$asignacionConsumibleTi->id_consumible_ti}}
        let cantidadAsignacionConsumible={{$asignacionConsumibleTi->cantidad}}

        function permitirSoloCarateresNumericos(event, cantidad) {
            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 obtenerTodosLosDatosDelConsumibleSeleccionado(consumible){
            if(consumible.value.trim().length>0){
                generarLoading('{{ asset('img/logo.png') }}')
                let formData = new FormData();
                formData.append('id_consumible', consumible.value);
                let csrf = '{{ csrf_token() }}';
                $.ajax({
                    url: '{{ route('consumible-ti.obtener-registro') }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        if(data.id==idConsumible){
                            document.getElementById("campoStockActualConsumible").value=(data.cantidad+cantidadAsignacionConsumible);
                        }else{
                            document.getElementById("campoStockActualConsumible").value=data.cantidad;
                        }

                        nombreConsumible=data.consumible.replaceAll(' ', '-');
                        if(document.getElementById("campoCentroCosto").value.trim().length>0){
                            let numeroUnicoCorrelativo="";
                            if(numeroCorrelativo.toString().trim().length==1){
                                numeroUnicoCorrelativo="00000"+numeroCorrelativo.toString().trim();
                            }else if(numeroCorrelativo.toString().trim().length==2){
                                numeroUnicoCorrelativo="0000"+numeroCorrelativo.toString().trim();
                            }else if(numeroCorrelativo.toString().trim().length==3){
                                numeroUnicoCorrelativo="000"+numeroCorrelativo.toString().trim();
                            }else if(numeroCorrelativo.toString().trim().length==4){
                                numeroUnicoCorrelativo="00"+numeroCorrelativo.toString().trim();
                            }else if(numeroCorrelativo.toString().trim().length==5){
                                numeroUnicoCorrelativo="0"+numeroCorrelativo.toString().trim();
                            }else{
                                numeroUnicoCorrelativo=numeroCorrelativo.toString().trim();
                            }
                            document.getElementById("campoCorrelativo").value="GI-"+document.getElementById("campoCentroCosto").value.trim()+"-"+nombreConsumible+"-"+numeroUnicoCorrelativo;
                        }
                    },
                    error: function(data) {
                        console.log(data)
                        eliminarLoading()
                    }
                })
            }else{
                document.getElementById("campoStockActualConsumible").value="";
                document.getElementById("campoCorrelativo").value="";
            }
        }

        function abrirModalParaAsignarTrabajador(){
            let tipoAsignacion=document.getElementById("campoTipoAsignacionTrabajador").value.trim();
            if(tipoAsignacion.length>0){
                if(tipoAsignacion=="Asignación Manual"){
                    document.getElementById("campoNombreTrabajadorManual").value = "";
                    document.getElementById("validacionCampoNombreTrabajadorManual").innerHTML = "";
                    document.getElementById("campoNombreTrabajadorManual").setAttribute("class", "form-control");

                    document.getElementById("campoRutTrabajadorManual").value = "";
                    document.getElementById("validacionCampoRutTrabajadorManual").innerHTML = "";
                    document.getElementById("campoRutTrabajadorManual").setAttribute("class", "form-control");

                    $('#campoCentroCostoManual').selectpicker('val', "");
                    document.getElementById("validacionCampoCentroCostoManual").innerHTML = "";
                    document.getElementById("campoCentroCostoManual").classList.remove('input-success-icon');
                    document.getElementById("campoCentroCostoManual").classList.remove('input-error-icon');
                    document.getElementById("validacionCampoCentroCostoManual").style.display = "none";

                    $("#modalAsignarTrabajadorManual").modal("show");
                    document.getElementById("botonAsignarTrabajadorManual").style.display="block";
                    document.getElementById("botonAsignarTrabajadorContraturnoManual").style.display="none";
                }else if(tipoAsignacion=="Asignación Talana"){
                    datatableTrabajadores.rows().deselect();
                    datatableTrabajadores.search("").draw();
                    datatableTrabajadores.search("").columns().search("").draw();
                    $("#modalAsignarTrabajador").modal("show");
                    document.getElementById("botonAsignarTrabajador").style.display="block";
                    document.getElementById("botonAsignarTrabajadorContraturno").style.display="none";
                }
            }else{
                Swal.fire({
                    icon: 'error',
                    title: '¡Complete el Campo!',
                    text: 'Debe seleccionar un tipo de asignación de trabajadores para continuar con la asignación',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })
            }
        }

        function editarAsignarcionDeTrabajador() {
            if (datatableTrabajadores.$('tr.selected').hasClass('selected')) {
                let data = datatableTrabajadores.rows({
                    selected: true
                }).data();

                let tipoAsignacion=document.getElementById("campoTipoAsignacionTrabajador").value.trim();
            
                document.getElementById("registrosDeUsuarioAsignado").innerHTML =
                    '<tr role="row">' +
                    '<td style="display: none;" class="tabla-tipo-asignacion-trabajador-asignado">'+tipoAsignacion+'</td>' +
                    '<td style="display: none;" class="tabla-id-trabajador-asignado">'+data[0]['id_trabajador']+'</td>' +
                    '<td style="display: none;" class="tabla-id-centro-costo-trabajador-asignado">'+data[0]['id_centro_costo']+'</td>' +
                    '<td class="tabla-nombre-trabajador-asignado">'+data[0]['nombre']+'</td>' +
                    '<td class="tabla-rut-trabajador-asignado">'+data[0]['rut']+'</td>' +
                    '<td class="tabla-centro-costo-trabajador-asignado">'+data[0]['centro_costo']+'</td>' +
                    '<td class="tabla-accion-trabajador-asignado">' +
                    '<button onclick="habilitarBotonesDeConfirmacionDeEliminacionDeTrabajador(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaTrabajadorAsignado(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-item mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';

                document.getElementById("campoCentroCosto").value=data[0]['centro_costo'];
                document.getElementById("campoIdCentroCosto").value=data[0]['id_centro_costo'];
                
                if(nombreConsumible.trim().length>0){
                    let numeroUnicoCorrelativo="";
                    if(numeroCorrelativo.toString().trim().length==1){
                        numeroUnicoCorrelativo="00000"+numeroCorrelativo.toString().trim();
                    }else if(numeroCorrelativo.toString().trim().length==2){
                        numeroUnicoCorrelativo="0000"+numeroCorrelativo.toString().trim();
                    }else if(numeroCorrelativo.toString().trim().length==3){
                        numeroUnicoCorrelativo="000"+numeroCorrelativo.toString().trim();
                    }else if(numeroCorrelativo.toString().trim().length==4){
                        numeroUnicoCorrelativo="00"+numeroCorrelativo.toString().trim();
                    }else if(numeroCorrelativo.toString().trim().length==5){
                        numeroUnicoCorrelativo="0"+numeroCorrelativo.toString().trim();
                    }else{
                        numeroUnicoCorrelativo=numeroCorrelativo.toString().trim();
                    }
                    document.getElementById("campoCorrelativo").value="GI-"+data[0]['centro_costo']+"-"+nombreConsumible+"-"+numeroUnicoCorrelativo;
                }

                $('#modalAsignarTrabajador').modal('hide');    
            }
        }

        function validarCamposDeAsignacionDeTrabajadorManual() {
            let campoNombreTrabajadorManual=document.getElementById("campoNombreTrabajadorManual").value.trim();
            let campoRutTrabajadorManual=document.getElementById("campoRutTrabajadorManual").value.trim();
            let campoCentroCostoManual=document.getElementById("campoCentroCostoManual").value.trim();
            error = false;

            if (campoNombreTrabajadorManual.trim().length == 0) {
                document.getElementById("campoNombreTrabajadorManual").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoNombreTrabajadorManual").innerHTML = "El campo nombre trabajador es obligatorio.";
                error = true;
            } else {
                document.getElementById("validacionCampoNombreTrabajadorManual").innerHTML = "";
                document.getElementById("campoNombreTrabajadorManual").setAttribute("class", "form-control is-valid");
            }

            if (campoRutTrabajadorManual.trim().length == 0) {
                document.getElementById("campoRutTrabajadorManual").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoRutTrabajadorManual").innerHTML = "El campo rut trabajador es obligatorio.";
                error = true;
            } else {
                if (campoRutTrabajadorManual.trim().length < 11) {
                    document.getElementById("campoRutTrabajadorManual").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoRutTrabajadorManual").innerHTML = "El campo rut trabajador debe contener al menos 11 caracteres.";
                    error = true;
                } else {
                    let rut = campoRutTrabajadorManual.trim().replace(".", "");
                    rut = rut.trim().replace(".", "");
                    rut = rut.split("-");
                    let rutSinDigitoVerificador = rut[0];
                    let digitoVerificador = rut[1];
                    if (digitoVerificador == "K" || digitoVerificador == "k") {
                        digitoVerificador = digitoVerificador.toUpperCase()
                    }

                    var digitoVerificadorCalculado = getDV(parseInt(rutSinDigitoVerificador));

                    if (digitoVerificadorCalculado == digitoVerificador) {
                        document.getElementById("validacionCampoRutTrabajadorManual").innerHTML = "";
                        document.getElementById("campoRutTrabajadorManual").setAttribute("class", "form-control is-valid");
                    } else {
                        document.getElementById("campoRutTrabajadorManual").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoRutTrabajadorManual").innerHTML = "El campo rut trabajador es invalido.";
                        error = true;
                    }
                }
            }

            if (campoCentroCostoManual.trim().length == 0) {
                document.getElementById("campoCentroCostoManual").classList.remove('input-success-icon');
                document.getElementById("campoCentroCostoManual").classList.add('input-error-icon');
                document.getElementById("validacionCampoCentroCostoManual").innerHTML = "El campo centro de costo es obligatorio.";
                document.getElementById("validacionCampoCentroCostoManual").style.display = "block";
                error = true;
            } else {
                document.getElementById("campoCentroCostoManual").classList.remove('input-error-icon');
                document.getElementById("campoCentroCostoManual").classList.add('input-success-icon');
                document.getElementById("validacionCampoCentroCostoManual").innerHTML = "";
                document.getElementById("validacionCampoCentroCostoManual").style.display = "none";
            }

            return error;
        }

        function getDV(numero) {
            nuevo_numero = numero.toString().split("").reverse().join("");
            for (i = 0, j = 2, suma = 0; i < nuevo_numero.length; i++, ((j == 7) ? j = 2 : j++)) {
                suma += (parseInt(nuevo_numero.charAt(i)) * j);
            }
            n_dv = 11 - (suma % 11);
            return ((n_dv == 11) ? 0 : ((n_dv == 10) ? "K" : n_dv));
        }

        function editarAsignarcionDeTrabajadorManual(){
            let campoNombreTrabajadorManual=document.getElementById("campoNombreTrabajadorManual").value.trim();
            let campoRutTrabajadorManual=document.getElementById("campoRutTrabajadorManual").value.trim();
            let campoCentroCostoManual=document.getElementById("campoCentroCostoManual").value.trim();
            let nombreCentroDeCosto=document.getElementById("campoCentroCostoManual").options[document.getElementById("campoCentroCostoManual").selectedIndex].text;

            let tipoAsignacion=document.getElementById("campoTipoAsignacionTrabajador").value.trim();

            if(validarCamposDeAsignacionDeTrabajadorManual()==false){
                document.getElementById("registrosDeUsuarioAsignado").innerHTML =
                    '<tr role="row">' +
                    '<td style="display: none;" class="tabla-tipo-asignacion-trabajador-asignado">'+tipoAsignacion+'</td>' +
                    '<td style="display: none;" class="tabla-id-trabajador-asignado"></td>' +
                    '<td style="display: none;" class="tabla-id-centro-costo-trabajador-asignado">'+campoCentroCostoManual+'</td>' +
                    '<td class="tabla-nombre-trabajador-asignado">'+campoNombreTrabajadorManual+'</td>' +
                    '<td class="tabla-rut-trabajador-asignado">'+campoRutTrabajadorManual+'</td>' +
                    '<td class="tabla-centro-costo-trabajador-asignado">'+nombreCentroDeCosto+'</td>' +
                    '<td class="tabla-accion-trabajador-asignado">' +
                    '<button onclick="habilitarBotonesDeConfirmacionDeEliminacionDeTrabajador(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaTrabajadorAsignado(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-item mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';

                    document.getElementById("campoCentroCosto").value=nombreCentroDeCosto;
                    document.getElementById("campoIdCentroCosto").value=campoCentroCostoManual;

                    if(nombreConsumible.trim().length>0){
                        let numeroUnicoCorrelativo="";
                        if(numeroCorrelativo.toString().trim().length==1){
                            numeroUnicoCorrelativo="00000"+numeroCorrelativo.toString().trim();
                        }else if(numeroCorrelativo.toString().trim().length==2){
                            numeroUnicoCorrelativo="0000"+numeroCorrelativo.toString().trim();
                        }else if(numeroCorrelativo.toString().trim().length==3){
                            numeroUnicoCorrelativo="000"+numeroCorrelativo.toString().trim();
                        }else if(numeroCorrelativo.toString().trim().length==4){
                            numeroUnicoCorrelativo="00"+numeroCorrelativo.toString().trim();
                        }else if(numeroCorrelativo.toString().trim().length==5){
                            numeroUnicoCorrelativo="0"+numeroCorrelativo.toString().trim();
                        }else{
                            numeroUnicoCorrelativo=numeroCorrelativo.toString().trim();
                        }
                        document.getElementById("campoCorrelativo").value="GI-"+nombreCentroDeCosto+"-"+nombreConsumible+"-"+numeroUnicoCorrelativo;
                    }

                    $('#modalAsignarTrabajadorManual').modal('hide'); 
            }
        }

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

        function habilitarBotonesDeConfirmacionDeEliminacionDeTrabajador(boton) {

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

        }

        function eliminarFilaTrabajadorAsignado(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            document.getElementById("registrosDeUsuarioAsignado").innerHTML=
            '<tr id="usuarioAsignadoNoDisponibleEnLaTabla">'+
            '<td colspan="4" class="text-center">No hay trabajadores disponibles en la tabla</td>'+
            '</tr>';

            document.getElementById("campoCentroCosto").value = "";
            document.getElementById("campoIdCentroCosto").value = "";
            document.getElementById("campoCorrelativo").value="";
        }
    </script>

    <script>
        function validarFormularioDelConsumible(){
            let error=false;
            if (document.getElementById("campoConsumible").value.trim().length>0) {
                document.getElementById("campoConsumible").classList.remove('input-error-icon');
                document.getElementById("campoConsumible").classList.add('input-success-icon');
                document.getElementById("validacionCampoConsumible").innerHTML = "";
                document.getElementById("validacionCampoConsumible").style.display = "none";
            } else {
                error=true;
                document.getElementById("campoConsumible").classList.remove('input-success-icon');
                document.getElementById("campoConsumible").classList.add('input-error-icon');
                document.getElementById("validacionCampoConsumible").innerHTML = "El campo consumible es obligatorio.";
                document.getElementById("validacionCampoConsumible").style.display = "block";
            }

            if (document.getElementById("campoCentroCosto").value.trim().length>0) {
                document.getElementById("campoCentroCosto").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoCentroCosto").innerHTML = "";
            } else {
                error=true;
                document.getElementById("campoCentroCosto").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoCentroCosto").innerHTML = "El campo centro de costo es obligatorio.";
            }

            if (document.getElementById("campoStockActualConsumible").value.trim().length>0) {
                document.getElementById("campoStockActualConsumible").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoStockActualConsumible").innerHTML = "";
            } else {
                error=true;
                document.getElementById("campoStockActualConsumible").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoStockActualConsumible").innerHTML = "El campo stock del consumible es obligatorio.";
            }

            if (document.getElementById("campoCorrelativo").value.trim().length>0) {
                document.getElementById("campoCorrelativo").setAttribute("class", "form-control is-valid");
                document.getElementById("validacionCampoCorrelativo").innerHTML = "";
            } else {
                error=true;
                document.getElementById("campoCorrelativo").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoCorrelativo").innerHTML = "El campo correlativo es obligatorio.";
            }

            if (document.getElementById("campoCantidad").value.trim().length>0) {
                if(parseInt(document.getElementById("campoCantidad").value.trim())>0){
                    document.getElementById("campoCantidad").setAttribute("class", "form-control is-valid");
                    document.getElementById("validacionCampoCantidad").innerHTML = "";
                }else{
                    error=true;
                    document.getElementById("campoCantidad").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoCantidad").innerHTML = "El campo cantidad debe ser mayor que 0.";
                }
            } else {
                error=true;
                document.getElementById("campoCantidad").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoCantidad").innerHTML = "El campo cantidad es obligatorio.";
            }

            document.getElementById("campoDetalleGeneral").setAttribute("class", "form-control is-valid");
            document.getElementById("validacionCampoDetalleGeneral").innerHTML = "";

            let UsuarioAsignadoExiste=false;

            let filasUsuarioAsignado = document.getElementById('tabla-usuario-asignado').tBodies[0].querySelectorAll("tr");

            filasUsuarioAsignado.forEach(elemento => {
                if(elemento.querySelector(".tabla-id-trabajador-asignado")){
                    UsuarioAsignadoExiste=true;
                }
            });

            if(error==false){
                if(UsuarioAsignadoExiste==false){
                    Swal.fire({
                        icon: 'error',
                        title: '¡Consumible No Editado!',
                        text: 'No es posible editar el consumible, es oblitario tener los datos del trabajador que se le asigno el consumible',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    });
                    error=true;
                }else{
                    if(parseInt(document.getElementById("campoCantidad").value.trim())>parseInt(document.getElementById("campoStockActualConsumible").value.trim())){
                        Swal.fire({
                            icon: 'error',
                            title: '¡Consumible No Editado!',
                            text: 'No es posible editar el consumible, el stock del consumible es insuficiente',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        });
                        error=true;
                    }
                }
            }

            return error;
        }

        function limpiarCamposDelFormularioDelConsumible(){
            document.getElementById("validacionCampoConsumible").innerHTML = "";
            document.getElementById("campoConsumible").classList.remove('input-success-icon');
            document.getElementById("campoConsumible").classList.remove('input-error-icon');
            document.getElementById("validacionCampoConsumible").style.display = "none";

            document.getElementById("validacionCampoCentroCosto").innerHTML = "";
            document.getElementById("campoCentroCosto").setAttribute("class", "form-control");

            document.getElementById("campoStockActualConsumible").setAttribute("class", "form-control");
            document.getElementById("validacionCampoStockActualConsumible").innerHTML = "";

            document.getElementById("campoCorrelativo").setAttribute("class", "form-control");
            document.getElementById("validacionCampoCorrelativo").innerHTML = "";

            document.getElementById("campoCantidad").setAttribute("class", "form-control");
            document.getElementById("validacionCampoCantidad").innerHTML = "";

            document.getElementById("validacionCampoDetalleGeneral").innerHTML = "";
            document.getElementById("campoDetalleGeneral").setAttribute("class", "form-control");            

            document.getElementById("validacionCampoTipoAsignacionTrabajador").innerHTML = "";
            document.getElementById("campoTipoAsignacionTrabajador").classList.remove('input-success-icon');
            document.getElementById("campoTipoAsignacionTrabajador").classList.remove('input-error-icon');
            document.getElementById("validacionCampoTipoAsignacionTrabajador").style.display = "none";
        }

        function editarConsumible(){
            if(validarFormularioDelConsumible()==false){
                document.getElementById("botonDeEdicion").setAttribute("disabled", true);
                generarLoading('{{ asset('img/logo.png') }}')

                let listadoDatosUsuarioAsignado=[];
                let filasUsuarioAsignado = document.getElementById('tabla-usuario-asignado').tBodies[0].querySelectorAll("tr");
                filasUsuarioAsignado.forEach(elemento => {
                    if(elemento.querySelector(".tabla-id-trabajador-asignado")){
                        existeTrabajadorAsignado=true;
                        let campoIdUsuarioAsignado=elemento.querySelector(".tabla-id-trabajador-asignado").innerHTML;
                        let campoNombreUsuarioAsignado=elemento.querySelector(".tabla-nombre-trabajador-asignado").innerHTML;
                        let campoRutUsuarioAsignado=elemento.querySelector(".tabla-rut-trabajador-asignado").innerHTML;
                        let campoIdCentroCostoUsuarioAsignado=elemento.querySelector(".tabla-id-centro-costo-trabajador-asignado").innerHTML;
                        let campoTipoAsignacionUsuarioAsignado=elemento.querySelector(".tabla-tipo-asignacion-trabajador-asignado").innerHTML;
    
                        let trabajador = {
                            idUsuarioTalana: campoIdUsuarioAsignado,
                            nombreUsuario:campoNombreUsuarioAsignado,
                            rutUsuario: campoRutUsuarioAsignado,
                            idCentroCostoUsuario: campoIdCentroCostoUsuarioAsignado,
                            tipoAsignacion:campoTipoAsignacionUsuarioAsignado,
                            tipoUsuario: "usuario_asignado_consumible"
                        }
                        listadoDatosUsuarioAsignado.push(trabajador);
                    }
                });
                listadoDatosUsuarioAsignado = JSON.stringify(listadoDatosUsuarioAsignado);

                let formData = new FormData();
                formData.append('_method', "PUT");
                formData.append('numero_correlativo', numeroCorrelativo);
                formData.append('id_consumible', document.getElementById("campoConsumible").value);
                formData.append('centro_costo', document.getElementById("campoCentroCosto").value);
                formData.append('id_centro_costo', document.getElementById("campoIdCentroCosto").value);
                formData.append('cantidad', document.getElementById("campoCantidad").value);
                formData.append('detalle_general', document.getElementById("campoDetalleGeneral").value);
                formData.append('id_consumible_defecto', idConsumible);
                formData.append('cantidad_asignacion_consumible_defecto', cantidadAsignacionConsumible);
                formData.append('listado_usuario_asignado', listadoDatosUsuarioAsignado);
                let csrf = '{{ csrf_token() }}';
                $.ajax({
                    url: '{{ route('consumible-ti.update-asignacion',$asignacionConsumibleTi) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                            icon: 'success',
                            title: '¡Consumible Editado!',
                            text: 'El consumible se edito con éxito',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        }).then((result) => {
                            location.reload();
                        })
                        .catch((error) => {
                            location.reload();
                        });
                        document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    },
                    error: function(data) {
                        console.log(data)
                        document.getElementById("botonDeEdicion").removeAttribute("disabled");
                        eliminarLoading()
                    }
                })
            }
        }
    </script>
@stop