@extends('adminlte::page')

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

@section('title', 'Intranet | Editar Referencia Para El Postulante ' . $postulante->nombre)

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

                <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" id="custom-tabs-one-messages-tab" data-toggle="pill" href="#custom-tabs-one-messages" role="tab" aria-controls="custom-tabs-one-messages" aria-selected="false">Datos Postulante</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" 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">Formulario Referencias</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" 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">Referencias</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label for="cargo">Correlativo Solicitud De Reclutamiento</label>
                                        <input type="text" class="form-control" name="correlativo" value="{{ old('correlativo', $postulante->cargo->solicitudDeReclutamiento->correlativo) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Nombre Cargo Solicitado</label>
                                        <input type="text" class="form-control" name="nombre_cargo" value="{{ old('nombre_cargo', $postulante->cargo->cargo) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Rut Postulante</label>
                                        <input type="text" class="form-control" name="rut_postulante" value="{{ old('rut_postulante', $postulante->rut) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Nombre Postulante</label>
                                        <input type="text" class="form-control" name="nombre_postulante" value="{{ old('nombre_postulante', $postulante->nombre) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Correo Postulante</label>
                                        <input type="text" class="form-control" name="correo_postulante" value="{{ old('correo_postulante', $postulante->correo) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Telefono Postulante</label>
                                        <input type="text" class="form-control" name="telefono_postulante" value="{{ old('telefono_postulante', $postulante->telefono) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Ciudad</label>
                                        <input type="text" class="form-control" name="ciudad" value="{{ old('ciudad', $postulante->ciudad) }}" readonly="true">
                                    </div>

                                    @if ($postulante->referido == true)
                                        <div class="form-group">
                                            <label for="cargo">Referido</label>
                                            <input type="text" class="form-control" name="referido" value="{{ old('', 'Si') }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label for="cargo">Referido</label>
                                            <input type="text" class="form-control" name="referido" value="{{ old('', 'No') }}" readonly="true">
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        <label for="cargo">Pretencion De Renta</label>
                                        <input type="text" class="form-control" name="pretencion_renta" value="{{ old('pretencion_renta', $postulante->pretencion_renta_texto) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Licencia De Conducir</label>
                                        <input type="text" class="form-control" name="licencia" value="{{ old('licencia', $postulante->licencia_conducir) }}" readonly="true">
                                    </div>


                                    @if ($postulante->discapacidad == true)
                                        <div class="form-group">
                                            <label for="cargo">Tiene Discapacidad</label>
                                            <input type="text" class="form-control" name="discapacidad" value="{{ old('discapacidad', 'Si') }}" readonly="true">
                                        </div>
                                    @else
                                        <div class="form-group">
                                            <label for="cargo">Tiene Discapacidad</label>
                                            <input type="text" class="form-control" name="discapacidad" value="{{ old('discapacidad', 'No') }}" readonly="true">
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        <label for="cargo">Nombre Discapasidad</label>
                                        <input type="text" class="form-control" name="nombre_discapacidad" value="{{ old('nombre_discapacidad', $postulante->nombre_discapacidad) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Carnet Discapasidad</label>
                                        <input type="text" class="form-control" name="carnet_discapacidad" value="{{ old('carnet_discapacidad', $postulante->carnet_discapacidad) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Disponibilidad</label>
                                        <input type="text" class="form-control" name="disponibilidad" value="{{ old('disponibilidad', $postulante->disponibilidad) }}" readonly="true">
                                    </div>


                                    <div class="form-group">
                                        <label for="cargo">Experencia General</label>
                                        <input type="text" class="form-control" name="experiencia_general" value="{{ old('experiencia_general', $postulante->experiencia_general) }}" readonly="true">
                                    </div>

                                    <div class="form-group">
                                        <label for="cargo">Experencia Especifica</label>
                                        <input type="text" class="form-control" name="experiencia_especifico" value="{{ old('experiencia_especifico', $postulante->experiencia_especifica) }}" readonly="true">
                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane fade show active" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label for="empresa">Empresa</label>
                                        <input type="text" class="form-control" id="empresa" name="empresa" value="{{ old('empresa') }}">
                                        <div class="invalid-feedback" id="valicacionEmpresa">

                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="cargo">Cargo</label>
                                        <input type="text" class="form-control" id="cargo" name="cargo" value="{{ old('cargo') }}">
                                        <div class="invalid-feedback" id="valicacionCargo">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="ano_experiencia">Tiempo De Experiencias En La Empresa</label>
                                        <input type="text" class="form-control" id="anoExperienciaTexto" name="ano_experiencia_texto" value="{{ old('ano_experiencia_texto') }}">
                                        <div class="invalid-feedback" id="valicacionAnoExperienciaTexto">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Estado</label>
                                        <select class="form-control listaDespegableConBuscador" id="estado" name="estado" data-live-search="true">
                                            <option value="">--Seleccionar Estado--</option>
                                            @foreach ( $estados as  $estado)
                                                @if (old('estado') == $estado)
                                                    <option selected value="{{ $estado }}">{{ $estado }}
                                                    </option>
                                                @else
                                                    <option value="{{ $estado }}">{{ $estado }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback" id="valicacionCampoEstado">

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

                                <div class="form-group">
                                    <label for="observacion">Observación <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                    <textarea class="form-control" id="observacion" name="observacion" rows="3"></textarea>
                                    <div class="invalid-feedback" id="valicacionCampoObservacion">

                                    </div>
                                </div>
                                <input type="hidden" id="codigoUnico">

                                <button type="button" class="btn btn-aspen" id="botonDeAgregarReferencia" onclick="agregarReferencia()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Referencia </button>
                                <button type="button" class="btn btn-warning" id="botonDeEditarReferencia" style="display: none;" onclick="editarReferencia()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Referencia </button>
                            </div>

                            <div class="tab-pane fade" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <div class="alert alert-danger" role="alert" style="display: none;" id="errorTablaReferencias">

                                </div>
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-referencias">
                                        <thead>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Acción</th>
                                                <th>Empresa</th>
                                                <th>Cargo</th>
                                                <th>Tiempo De Experiencias En La Empresa</th>
                                                <th>Estado</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registroReferencias">
                                            <tr id="referenciasNoDisponibleEnLaTabla" style="display: none;">
                                                <td colspan="6" class="text-center">No hay referencias disponibles en
                                                    la tabla</td>
                                            </tr>
                                            @php
                                                $indexRefenrecia=0;
                                            @endphp
                                            @foreach($postulante->referencias as $ref)
                                                @php
                                                    $indexRefenrecia++;
                                                @endphp
                                                <tr>
                                                    <td class="tabla-id-unico-referencias" style="display: none;">{{uniqid()}}</td>
                                                    <td class="tabla-observacion-referencias" style="display: none;">{{$ref->observacion}}</td>
                                                    <td class="tabla-contador-referencias">{{$indexRefenrecia}}</td>
                                                    <td class="tabla-accion-referencias">
                                                        <div class="btn-group ">
                                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>
                                                            <div class="dropdown-menu">
                                                               @isset($ref->observacion)
                                                               <a class="dropdown-item" href="#" onclick="detalleObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>
                                                               @endisset
                                                                <a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarLaReferencia(this)"><i class="fas fa-edit" aria-hidden="true"></i> Editar Fila</a>
                                                                <a class="dropdown-item" href="#" onclick="eliminarFila(this)"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Fila</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="tabla-empresa-referencias">{{$ref->empresa}}</td>
                                                    <td class="tabla-cargo-referencias">{{$ref->cargo}}</td>
                                                    <td class="tabla-ano-experiencia-texto-referencias">{{$ref->ano_experiencia}}</td>
                                                    <td class="tabla-estado-referencias">{{$ref->estado}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="button" class="btn btn-aspen" id="botonDeCreacion" onclick="EditarReferencias()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Editar Referencias</button>
                        <a href="{{ route('postulante.show', $postulante->cargo) }}" role="button" class="btn btn-secondary mt-1"><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="modalObservacion" 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: #B08C1C; color:white;">
                        <h5 class="modal-title" id="tituloModalObservacion"></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" id="contenedorDescrionArticiloAlSeleccionarlo">
                            <label for="descripcion">Observación</label>
                            <textarea class="form-control" id="observacionModal" rows="3" readonly="true"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <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') }}">
@stop    

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        $('#estado').selectpicker({
            dropupAuto: false
        });
    </script>

    <script>
        function losCamposSoloSeIngresanNumeros(event) {
            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 establecerValorDelCampoAnoExperienciaNumero(experiencia) {
            if (experiencia.value.length > 0) {
                if(parseInt(experiencia.value)>0){
                    document.getElementById("anoExperienciaNumero").value = experiencia.value;
                    experiencia.value = experiencia.value + " Años";
                }else{
                    document.getElementById("anoExperienciaNumero").value = experiencia.value;
                    experiencia.value = "Sin Experiencia";
                }
            } else if (experiencia.value.length == 0) {
                document.getElementById("anoExperienciaNumero").value = "";
                experiencia.value = "";
            }
        }

        function modificarValorCampoAnoExperienciaTexto(experiencia) {
            experiencia.value = document.getElementById("anoExperienciaNumero").value;
        }

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

    <script>
        let cantidadReferencias = 0;
        function validarCamposSobreLaReferencia() {
            let camposSinErrores = true;
            let idCampoError = "";

            if (document.getElementById("empresa").value.trim().length > 0) {
                document.getElementById("empresa").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionEmpresa").innerHTML = "";
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "empresa";
                }
                document.getElementById("empresa").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionEmpresa").innerHTML = "El campo empresa es obligatorio";
            }

            if (document.getElementById("cargo").value.trim().length > 0) {
                document.getElementById("cargo").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCargo").innerHTML = "";
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "cargo";
                }
                document.getElementById("cargo").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCargo").innerHTML = "El campo cargo es obligatorio";
            }

            if (document.getElementById("anoExperienciaTexto").value.trim().length > 0) {
                document.getElementById("anoExperienciaTexto").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionAnoExperienciaTexto").innerHTML = "";
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "anoExperienciaTexto";
                }
                document.getElementById("anoExperienciaTexto").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionAnoExperienciaTexto").innerHTML = "El campo tiempo de experiencias en la empresa es obligatorio";
            }

            if (document.getElementById("estado").value.trim().length > 0) {
                document.getElementById("estado").classList.remove('input-error-icon');
                document.getElementById("estado").classList.add('input-success-icon');
                document.getElementById("valicacionCampoEstado").innerHTML = "";
                document.getElementById("valicacionCampoEstado").style.display = "none";
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "estado";
                }
                document.getElementById("estado").classList.remove('input-success-icon');
                document.getElementById("estado").classList.add('input-error-icon');
                document.getElementById("valicacionCampoEstado").innerHTML = "El campo estado es obligatorio";
                document.getElementById("valicacionCampoEstado").style.display = "block";
            }

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

            if (camposSinErrores == false) {
                document.getElementById(idCampoError).scrollIntoView({
                        behavior: "smooth",
                        block: "end",
                        inline: "nearest"
                    });
            }

            return camposSinErrores;
        }

        function limpiarCamposSobreLaReferencia() {
            document.getElementById("empresa").value = "";
            document.getElementById("valicacionEmpresa").innerHTML = "";
            document.getElementById("empresa").setAttribute("class", "form-control");

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

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

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

            document.getElementById("observacion").value = "";
            document.getElementById("valicacionCampoObservacion").innerHTML = "";
            document.getElementById("observacion").setAttribute("class", "form-control");
        }

        function detalleObservacion(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            document.getElementById("observacionModal").value = elementoPadre.querySelector(".tabla-observacion-referencias").innerHTML;
            document.getElementById("tituloModalObservacion").innerHTML = "Observación De la Referencia Con La Empresa " + elementoPadre.querySelector(".tabla-empresa-referencias").innerHTML;
            $("#modalObservacion").modal("show");
        }

        function eliminarFila(fila) {
            Swal.fire({
                title: '¿Esta seguro?',
                text: "Se borraba todos los datos que tenga relación a la referencia",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Si, borrar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
                    cantidadReferencias = 0;
                    elementoPadre.remove();
                    let filas = document.getElementById('tabla-referencias').tBodies[0].querySelectorAll("tr");
                    filas.forEach(elemento => {
                        if (elemento.querySelector(".tabla-contador-referencias")) {
                            cantidadReferencias++;
                            elemento.querySelector(".tabla-contador-referencias").innerHTML = cantidadReferencias;
                        }
                    });
                }
            })
        }

        function establecerFormularioParaEditarLaReferencia(fila) {
            limpiarCamposSobreLaReferencia();
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            document.getElementById("empresa").value = elementoPadre.querySelector(".tabla-empresa-referencias").innerHTML;
            document.getElementById("cargo").value = elementoPadre.querySelector(".tabla-cargo-referencias").innerHTML;
            document.getElementById("anoExperienciaTexto").value = elementoPadre.querySelector(".tabla-ano-experiencia-texto-referencias").innerHTML;
            document.getElementById("observacion").value = elementoPadre.querySelector(".tabla-observacion-referencias").innerHTML;
            $('#estado').selectpicker('val', elementoPadre.querySelector(".tabla-estado-referencias").innerHTML);
            document.getElementById("codigoUnico").value = elementoPadre.querySelector(".tabla-id-unico-referencias").innerHTML;

            document.getElementById("botonDeAgregarReferencia").style.display = "none";
            document.getElementById("botonDeEditarReferencia").style.display = "inline-block";
            document.getElementById("custom-tabs-one-profile-tab").click();
        }

        function agregarReferencia() {
            let error = validarCamposSobreLaReferencia();
            if (error == true) {
                let empresa = document.getElementById("empresa").value.trim();
                let cargo = document.getElementById("cargo").value.trim();
                let anoExperienciaTexto = document.getElementById("anoExperienciaTexto").value.trim();
                let estado = document.getElementById("estado").value.trim();
                let observacion = document.getElementById("observacion").value.trim();
                let codigoUnico = uuidv4();
                cantidadReferencias++;

                let itemDropdowObservacion = '';
                if (observacion.length > 0) {
                    itemDropdowObservacion = '<a class="dropdown-item" href="#" onclick="detalleObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>';
                }

                document.getElementById("referenciasNoDisponibleEnLaTabla").style.display = "none";
                document.getElementById("registroReferencias").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td style="display: none;" class="tabla-id-unico-referencias">' + codigoUnico + '</td>' +
                    '<td style="display: none;" class="tabla-observacion-referencias">' +observacion + '</td>' +
                    '<td class="tabla-contador-referencias">' + cantidadReferencias + '</td>' +
                    '<td class="tabla-accion-referencias">' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>' +
                    '<div class="dropdown-menu">' +
                    itemDropdowObservacion +
                    '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarLaReferencia(this)"><i class="fas fa-edit" aria-hidden="true"></i> Editar Fila</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarFila(this)"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Fila</a>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="tabla-empresa-referencias">' + empresa + '</td>' +
                    '<td class="tabla-cargo-referencias">' + cargo + '</td>' +
                    '<td class="tabla-ano-experiencia-texto-referencias">' + anoExperienciaTexto + '</td>' +
                    '<td class="tabla-estado-referencias">' + estado + '</td>' +
                    '</tr>';

                limpiarCamposSobreLaReferencia();
                Swal.fire({
                    icon: 'success',
                    title: '¡Agregado!',
                    text: 'La referencia se agrego con éxito',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })

                document.getElementById("custom-tabs-one-home-tab").click();
            }
        }

        function editarReferencia() {
            let error = validarCamposSobreLaReferencia();
            if (error == true) {
                let filas = document.getElementById('tabla-referencias').tBodies[0].querySelectorAll("tr");
                filas.forEach(elementoPadre => {
                    if (elementoPadre.querySelector(".tabla-contador-referencias")) {
                        if (elementoPadre.querySelector(".tabla-id-unico-referencias").innerHTML == document.getElementById("codigoUnico").value) {
                            let empresa = document.getElementById("empresa").value.trim();
                            let cargo = document.getElementById("cargo").value.trim();
                            let anoExperienciaTexto = document.getElementById("anoExperienciaTexto").value.trim();
                            let estado = document.getElementById("estado").value.trim();
                            let observacion = document.getElementById("observacion").value.trim();

                            let itemDropdowObservacion = '';
                            if (observacion.length > 0) {
                                itemDropdowObservacion = '<a class="dropdown-item" href="#" onclick="detalleObservacion(this)"><i class="fas fa-eye" aria-hidden="true"></i> Observación</a>';
                            }

                            elementoPadre.querySelector(".tabla-accion-referencias").innerHTML =
                                '<div class="btn-group ">' +
                                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>' +
                                '<div class="dropdown-menu">' +
                                itemDropdowObservacion +
                                '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarLaReferencia(this)"><i class="fas fa-edit" aria-hidden="true"></i> Editar Fila</a>' +
                                '<a class="dropdown-item" href="#" onclick="eliminarFila(this)"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Fila</a>' +
                                '</div>' +
                                '</div>';
                            elementoPadre.querySelector(".tabla-empresa-referencias").innerHTML = empresa;
                            elementoPadre.querySelector(".tabla-cargo-referencias").innerHTML = cargo;
                            elementoPadre.querySelector(".tabla-ano-experiencia-texto-referencias").innerHTML = anoExperienciaTexto;
                            elementoPadre.querySelector(".tabla-observacion-referencias").innerHTML = observacion;
                            elementoPadre.querySelector(".tabla-estado-referencias").innerHTML = estado;
                        }
                    }
                });

                Swal.fire({
                    icon: 'success',
                    title: '¡Editado!',
                    text: 'La referencia se edito con éxito',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "Confirmar"
                })

                document.getElementById("custom-tabs-one-home-tab").click();
                limpiarCamposSobreLaReferencia();
                document.getElementById("botonDeAgregarReferencia").style.display = "inline-block";
                document.getElementById("botonDeEditarReferencia").style.display = "none";
            }
        }
    </script>

    <script>
        function EditarReferencias() {
            document.getElementById("botonDeCreacion").setAttribute("disabled", true);
            generarLoading('{{ asset('img/logo.png') }}')

            let filas = document.getElementById('tabla-referencias').tBodies[0].querySelectorAll("tr");
            let listadoReferencias = [];

            filas.forEach(elementoPadre => {
                if (elementoPadre.querySelector(".tabla-contador-referencias")) {
                    let contadorFila = elementoPadre.querySelector(".tabla-contador-referencias").innerHTML;
                    let empresa= elementoPadre.querySelector(".tabla-empresa-referencias").innerHTML.trim();
                    let cargo = elementoPadre.querySelector(".tabla-cargo-referencias").innerHTML.trim();
                    let anoExperienciaTexto = elementoPadre.querySelector(".tabla-ano-experiencia-texto-referencias").innerHTML.trim();
                    let observacion = elementoPadre.querySelector(".tabla-observacion-referencias").innerHTML.trim();
                    let estado = elementoPadre.querySelector(".tabla-estado-referencias").innerHTML.trim();

                    var referencia = {
                        contadorFila: contadorFila,
                        empresa: empresa,
                        cargo: cargo,
                        anoExperienciaTexto: anoExperienciaTexto,
                        observacion: observacion,
                        estado: estado
                    }
                    listadoReferencias.push(referencia);
                }
            });

            if (listadoReferencias.length > 0) {
                document.getElementById("errorTablaReferencias").style.display = "none";
                document.getElementById("errorTablaReferencias").innerHTML = "";
                listadoReferencias = JSON.stringify(listadoReferencias);
                let formData = new FormData();
                formData.append('listado_referencias', listadoReferencias);
                let csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('postulante.store-editar-referencias', $postulante) }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                                icon: 'success',
                                title: '¡Editado!',
                                text: 'Las referencias se editaron con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });
                    },
                    error: function(data) {
                        console.log(data)
                        eliminarLoading()
                    }
                })
            }else {
                eliminarLoading()
                document.getElementById("botonDeCreacion").removeAttribute("disabled")
                document.getElementById("errorTablaReferencias").style.display = "block";
                document.getElementById("errorTablaReferencias").innerHTML = "No hay referencias agregados, para registrar lasreferencias debe tener al menos una referencia agregado";
                document.getElementById("custom-tabs-one-home-tab").click();
            }
        }
    </script>
@stop