@extends('adminlte::page')

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

@section('title', 'intranet | Nueva Solicitud De Reclutamiento')

@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 active" 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 Generales</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">Formulario Solicitud De Reclutamiento</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">Cargo Solicitados</a>
                            </li>
                        </ul>
                    </div>

                    <form id="formularioDeRequisicion" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-one-tabContent">
                                <div class="tab-pane fade show active" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">
                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">

                                        <div class="form-group">
                                            <label for="cargo">Rut Solicitante</label>
                                            <input type="text" class="form-control" name="rutSolicitante" value="{{ old('rutSolicitante', auth()->user()->rut) }}" readonly="true">
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Nombre Solicitante</label>
                                            <input type="text" class="form-control" name="nombreSolicitante" value="{{ old('nombreSolicitante', auth()->user()->name) }}" readonly="true">
                                        </div>

                                        @if(Gate::check('solicitud-reclutamiento.create-todos-centro-costo'))
                                            <div class="form-group">
                                                <label>Centro costo</label>
                                                <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="centroCostoGeneral" name="centro_costo_general" data-live-search="true" onchange="establecerCentroDeCosto(this)">
                                                    <option value="">--Seleccionar Centro Costo--</option>
                                                    @foreach ($centrosCostos as $cc)
                                                        @if (old('centro_costo_general') == $cc->id)
                                                            <option selected value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                        @else
                                                            <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>    
                                        @else  
                                            <div class="form-group">
                                                <label>Centro costo</label>
                                                <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="centroCostoGeneral" name="centro_costo_general" data-live-search="true" onchange="establecerCentroDeCosto(this)">
                                                    <option value="">--Seleccionar Centro Costo--</option>
                                                    @foreach ($centrosCostosDelUsuario as $cc)
                                                        @if (old('centro_costo_general') == $cc->id)
                                                            <option selected value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                        @else
                                                            <option value="{{ $cc->id }}">{{ $cc->centro_costo }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>  
                                        @endif

                                        <div class="form-group">
                                            <label>Fecha Solicitud</label>
                                            <input type="date" class="form-control" name="fecha_solicitud" value="{{ old('fecha_solicitud', date('Y-m-d')) }}" readonly="true">
                                        </div>
                                        <input type="hidden" id="codigoUnico">
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">

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

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Numero De Vacantes</label>
                                            <input type="text" class="form-control" id="numeroVacante" name="numero_vacante" value="{{ old('numero_vacante') }}" onkeypress="return losCamposSoloSeIngresanNumeros(event)">
                                            <div class="invalid-feedback" id="valicacionCampoNumeroVacante">

                                            </div>
                                        </div>

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

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Area De Trabajo <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                            <input type="text" class="form-control" id="areaTrabajo" name="area_trabajo" value="{{ old('area_trabajo') }}">
                                            <div class="invalid-feedback" id="valicacionCampoAreaTrabajo">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Tipo de Turno</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="tipoDeTurno" name="tipo_turno" data-live-search="true" onchange="cambiosCamposTipoTurno(this)">
                                                <option value="">--Seleccionar Tipo De Turno--</option>
                                                @foreach ($tiposDeTurnos as $tipoDeTurno)
                                                    <option value="{{ $tipoDeTurno }}">{{ $tipoDeTurno }}</option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoTipoDeTurno">

                                            </div>
                                        </div>

                                        <div class="form-group" id="contenedorTipoTurnoTexto" style="display: none;">
                                            <label for="cargo">Escriba El Tipo de Turno</label>
                                            <input type="text" class="form-control" id="tipoDeTurnoTexto" name="tipo_turno_texto" value="{{ old('tipo_turno_texto') }}">
                                            <div class="invalid-feedback" id="valicacionCampoTipoDeTurnoTexto">

                                            </div>
                                        </div>

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

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Centro costo</label>
                                            <input type="text" class="form-control" id="centroCosto" name="centro_costo" value="{{ old('centro_costo') }}" readonly="true">
                                            <div class="invalid-feedback" id="valicacionCampoCentroCosto">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Nombre Del Supervisor Directo</label>
                                            <input type="text" class="form-control" id="nombreSupervisorDirecto" name="nombre_supervisor_directo" value="{{ old('nombre_supervisor_directo') }}">
                                            <div class="invalid-feedback" id="valicacionCampoNombreSupervisarDirecto">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Correo Del Supervisor Directo</label>
                                            <input type="text" class="form-control" id="correoSupervisarDirecto" name="correo_supervisor_directo" value="{{ old('correo_supervisor_directo') }}">
                                            <div class="invalid-feedback" id="valicacionCampoCorreoSupervisarDirecto">

                                            </div>
                                        </div>

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

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Nivel Académico (Para nivel superior/medio indicar profesión)</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="nivelAcademico" name="nivel_academico" data-live-search="true" onchange="cambiosCamposNivelAcademico(this)">
                                                <option value="">--Seleccionar Nivel Academico--</option>
                                                @foreach ($nivelesAcademicos as $nivelAcademico)
                                                    <option value="{{ $nivelAcademico }}">{{ $nivelAcademico }}</option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoNivelAcademico">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Profesión</label>
                                            <input type="text" class="form-control" id="profesion" name="profesion" value="{{ old('profesion', 'Sin Profesión') }}" readonly="true">
                                            <div class="invalid-feedback" id="valicacionCampoProfesion">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Experiencia laboral (años)</label>
                                            <input type="text" class="form-control" onfocus="modificarValorCampoExperienciaLaboraltexto(this)" onblur="establecerValorDelCampoExperienciaLaboralNumero(this)" onkeypress="return losCamposSoloSeIngresanNumeros(event)" id="experienciaLaboralTexto" name="experiencia_laboral_texto" value="{{ old('experiencia_laboral_texto') }}">
                                            <div class="invalid-feedback" id="valicacionCampoExperienciaLaboralTexto">

                                            </div>
                                        </div>
                                        <input type="hidden" name="experiencia_laboral_numero" id="experienciaLaboralNumero">

                                        <div class="form-group">
                                            <label for="cargo">Conocimientos y/o Certificaciones <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="conocimimientoCentificaciones" name="conocimiento_certificaciones" value="{{ old('conocimiento_certificaciones') }}">
                                                <span class="input-group-append">
                                                    <button type="button" class="btn btn-aspen" onclick="agregarConociminetoCertificaciones()">Añadir</button>
                                                </span>
                                            </div>
                                            <div class="invalid-feedback" id="valicacionCampoConocimimientoCentificaciones">

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

                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-conocimiento-certificaciones">
                                            <thead>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Conocimientos y/o certificaciones Añadidos</th>
                                                    <th>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroConocimientosCertificaciones">
                                                <tr id="conocimientosCertificacionesNoDisponibleEnLaTabla">
                                                    <td colspan="3" class="text-center">No hay conocimientos y/o certificaciones disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label for="cargo">Sueldo Bruto</label>
                                            <input type="text" class="form-control" id="sueldoBrutoTexto" name="sueldo_bruto_texto" value="{{ old('sueldo_bruto_texto') }}" onfocus="reestablecerCampoSueldoBruto(this)" onblur="establecerFormatoMonedaSueldoBruto(this)" onkeypress="return losCamposSoloSeIngresanNumeros(event)">
                                            <div class="invalid-feedback" id="valicacionCampoSueldoBrutoTexto">

                                            </div>
                                        </div>
                                        <input type="hidden" id="sueldoBrutoNumero" name="sueldo_bruto_numero">

                                        <div class="form-group">
                                            <label for="cargo">Bonos Asociados <span style="font-weight: 700; font-size:11px;">(Opcional)</span></label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="bonoAsociado" name="bonos_asociado" value="{{ old('bonos_asociado') }}">
                                                <span class="input-group-append">
                                                    <button type="button" class="btn btn-aspen" onclick="agregaBonoAsociado()">Añadir</button>
                                                </span>
                                            </div>
                                            <div class="invalid-feedback" id="valicacionCampoBonoAsociado">

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

                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-bonos-asociados">
                                            <thead>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Bonos Asociados Añadidos</th>
                                                    <th>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroBonosAsociados">
                                                <tr id="bonosAsociadosNoDisponibleEnLaTabla">
                                                    <td colspan="3" class="text-center">No hay bonos asociados disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label for="cargo">Fecha de Ingreso a Faena/Oficina</label>
                                            <input type="date" class="form-control" id="fechaIngreso" name="fecha_ingreso" value="{{ old('fecha_ingreso') }}">
                                            <div class="invalid-feedback" id="valicacionCampoFechaIngreso">

                                            </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>

                                    <div class="alert alert-danger" role="alert" style="display: none;" id="errorEvaluaciones">

                                    </div>
                                    <h4 style="font-weight: 700;">Evaluaciones A Considerar</h4>
                                    <div class="contenedorEvaluaciones" style="margin-bottom: 10px;">
                                        <div style="padding:10px;" class="text-center">EVALUACIONES</div>
                                        <div style="padding:10px;" class="text-center"><span>SI</span></div>
                                        <div style="padding:10px;" class="text-center"><span>NO</span></div>

                                        @php
                                            $cantidadEvaluacion = 0;
                                            $idEvaluaciones = [];
                                        @endphp
                                        @foreach ($evaluacionesDeReclutamiento as $key => $evaluacion)
                                            @php
                                                $cantidadEvaluacion++;
                                                $cantidadEvaluacionEsPar = false;
                                                if ($cantidadEvaluacion % 2 == 0) {
                                                    $cantidadEvaluacionEsPar = true;
                                                } else {
                                                    $cantidadEvaluacionEsPar = false;
                                                }
                                                $idEvaluaciones[] = $evaluacion->id;
                                            @endphp

                                            @if ($cantidadEvaluacionEsPar == false)
                                                <div class="filaEvaluacionBlancoClaro" id="nombreEvaluacion_{{ $evaluacion->id }}">{{ $evaluacion->evaluacion }}</div>
                                                <div class="filaEvaluacionBlancoClaro">
                                                    <div class="form-group text-center">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input radio-button-evaluacion" type="radio" id="radioButtonEvaluacionOpcion1{{ $evaluacion->id }}" name="radioButton_{{ $evaluacion->id }}" value="Si">
                                                            <label for="radioButtonEvaluacionOpcion1{{ $evaluacion->id }}" class="custom-control-label"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="filaEvaluacionBlancoClaro">
                                                    <div class="form-group text-center">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input radio-button-evaluacion" type="radio" id="radioButtonEvaluacionOpcion2{{ $evaluacion->id }}" name="radioButton_{{ $evaluacion->id }}" value="No">
                                                            <label for="radioButtonEvaluacionOpcion2{{ $evaluacion->id }}" class="custom-control-label"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="filaEvaluacionBlancoOscuro" id="nombreEvaluacion_{{ $evaluacion->id }}">{{ $evaluacion->evaluacion }}</div>
                                                <div class="filaEvaluacionBlancoOscuro">
                                                    <div class="form-group text-center">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input radio-button-evaluacion" type="radio" id="radioButtonEvaluacionOpcion1{{ $evaluacion->id }}" name="radioButton_{{ $evaluacion->id }}" value="Si">
                                                            <label for="radioButtonEvaluacionOpcion1{{ $evaluacion->id }}" class="custom-control-label"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="filaEvaluacionBlancoOscuro">
                                                    <div class="form-group text-center">
                                                        <div class="custom-control custom-radio">
                                                            <input class="custom-control-input radio-button-evaluacion" type="radio" id="radioButtonEvaluacionOpcion2{{ $evaluacion->id }}" name="radioButton_{{ $evaluacion->id }}" value="No">
                                                            <label for="radioButtonEvaluacionOpcion2{{ $evaluacion->id }}" class="custom-control-label"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                    <input type="hidden" id="idEvaluaciones" value="{{ json_encode($idEvaluaciones) }}">

                                    <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                        <div class="form-group">
                                            <label>Tipo De Vehiculo</label>
                                            <select aria-disabled="true" class="form-control listaDespegableConBuscador" id="tipoVehiculo" name="tipo_vehiculo" data-live-search="true" onchange="cambiosCamposTipoVehiculo(this)">
                                                <option value="">--Seleccionar Tipo De Vehiculo--</option>
                                                @foreach ($tiposDeVehiculo as $tipoVehiculo)
                                                    @if (old('tipo_vehiculo') == $tipoVehiculo)
                                                        <option selected value="{{ $tipoVehiculo }}">{{ $tipoVehiculo }}</option>
                                                    @else
                                                        <option value="{{ $tipoVehiculo }}">{{ $tipoVehiculo }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="valicacionCampoTipoVehiculo">

                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label for="maquinaria">Especificar Maquinaria a considerar</label>
                                            <input type="text" class="form-control" id="maquinaria" name="maquinaria" value="{{ old('maquinaria', 'Sin Maquinaria') }}" readonly="true">
                                            <div class="invalid-feedback" id="valicacionCampMaquinaria">

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

                                    <fieldset class="fieldset-color-azul" id="fieldsetArticulo">
                                        <legend class="titulo-fieldset-color-azul" id="legendArticulo">Postulantes Referidos</legend>

                                        <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                            <div class="form-group">
                                                <label for="cargo">Nombre Postulante</label>
                                                <input type="text" class="form-control" id="nombrePostulanteReferido" name="nombre_postulante_referido" value="{{ old('nombre_postulante_referido') }}">
                                                <div class="invalid-feedback" id="valicacioNombrePostulanteReferido">

                                                </div>
                                            </div>

                                            <div class="form-group" id="contenedorDelSeleccionadorDeArchivo">
                                                <label>Seleccionar Archivos</label>
                                                <input type="file" class="form-control-file" id="a93541" onchange="GuardarArchivoPreliminarAlSeleccionarlo(this)">
                                            </div>
                                        </div>

                                        <div class="alert alert-danger" role="alert" style="display: none;" id="errorListadoArchivoPreliminar">
                                            No hay archivos seleccionados, para agregar el postulante referido debe seleccionar al menos un archivo
                                        </div>
                                        <div class="dt-responsive table-responsive">
                                            <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivos-preliminar">
                                                <thead>
                                                    <tr role="row">
                                                        <th style="display: none;">id archivo</th>
                                                        <th>Acción</th>
                                                        <th>Nombre Archivo</th>
                                                        <th>Tipo Archivo</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="registroDeArchivosPreliminares">
                                                    <tr id="archivosPreliminarNoDisponibleEnLaTabla">
                                                        <td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <button type="button" class="btn btn-aspen" onclick="agregarPostulantesReferidos()"> Añadir Postulante Referido</button>
                                    </fieldset>

                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-postulantes">
                                            <thead>
                                                <tr>
                                                    <th colspan="5" class="text-center">POSTULANTES REFERIDOS</th>
                                                </tr>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Nombre Postulantes</th>
                                                    <th>Nombre Archivo</th>
                                                    <th>Acción</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroDePostulantes">
                                                <tr id="postulantesNoDisponibleEnLaTabla">
                                                    <td colspan="4" class="text-center">No hay postulantes referidos disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <button type="button" class="btn btn-aspen" id="botonDeAgregarCargo" onclick="agregarElCargosSolicitado()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Cargo </button>
                                    <button type="button" class="btn btn-warning" id="botonDeEditarCargo" style="display: none;" onclick="editarElCargosSolicitado()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Cargo </button>
                                </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="errorTablaCargosSolicitados">

                                    </div>
                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-cargos-solicitados">
                                            <thead>
                                                <tr role="row">
                                                    <th>#</th>
                                                    <th>Acción</th>
                                                    <th>Nombre Cargo</th>
                                                    <th>Numero De Vacantes</th>
                                                    <th>Faena</th>
                                                    <th>Area De Trabajo</th>
                                                    <th>Tipo Turno</th>
                                                    <th>Horario</th>
                                                    <th>Centro Costo</th>
                                                    <th>Nombre Supervisor Directo</th>
                                                    <th>Correo Supervisor Directo</th>
                                                    <th>Supervisa Cargo</th>
                                                    <th>Nivel Academico</th>
                                                    <th>Profesión</th>
                                                    <th>Experiencia Laboral</th>
                                                    <th>Sueldo Bruto</th>
                                                    <th>Fecha Ingreso Faena/Oficina</th>
                                                    <th>Tipo De Vehiculo</th>
                                                    <th>Maquinaria</th>
                                                </tr>
                                            </thead>
                                            <tbody id="registroCargosSolicitados">
                                                <tr id="CargosSolicitadosNoDisponibleEnLaTabla">
                                                    <td colspan="20" class="text-center">No hay cargos solicitados disponibles en la tabla</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeCreacion" onclick="registrarCargosSolicitados()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Registrar Solicitud De Reclutamiento </button>
                            <a href="{{ route('solicitud-reclutamiento.index') }}" role="button" class="btn btn-secondary mt-1"><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="modalConocimientos" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <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="tituloModalConocimientos"></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="dt-responsive table-responsive">
                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                            <thead>
                                <tr role="row">
                                    <th>#</th>
                                    <th>Conocimientos y/o certificaciones</th>
                                </tr>
                            </thead>
                            <tbody id="registroModalConocimientosCertificaciones">
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBonos" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <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="tituloModalBonos"></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="dt-responsive table-responsive">
                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                            <thead>
                                <tr role="row">
                                    <th>#</th>
                                    <th>Bono</th>
                                </tr>
                            </thead>
                            <tbody id="registroModalBonos">
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEvaluaciones" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <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="tituloModalEvaluaciones"></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="contenedorEvaluacionesModal" id="contenedorEvaluacionesModal" style="margin-bottom: 10px;">

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </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>

    <div class="modal fade" id="modalPostulantes" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <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="tituloModalPostulantes"></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="dt-responsive table-responsive">
                        <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info">
                            <thead>
                                <tr role="row">
                                    <th>#</th>
                                    <th>Nombre Postulante</th>
                                    <th>Nombre Archivo</th>
                                </tr>
                            </thead>
                            <tbody id="registroModalPostulantes">
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </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') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .contenedorNombreBotonArchivo{
            display: grid;
            grid-template-columns: 80% 20%;
            column-gap: 4px;
        }

        .contenedorTipoDeTurno {
            display: grid;
            grid-template-columns: 46% 6% 46%;
            column-gap: 4px;
        }

        .contenedorEvaluaciones {
            display: grid;
            grid-template-columns: 40% 30% 30%;
            border: 1px solid #eaeaea;
        }

        .contenedorEvaluacionesModal {
            display: grid;
            grid-template-columns: 70% 30%;
            border: 1px solid #eaeaea;
        }

        .filaEvaluacionBlancoClaro {
            background-color: #f4f4f4;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .filaEvaluacionBlancoOscuro {
            background-color: #eaeaea;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .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>
        $('.clockpicker').clockpicker({
            placement: 'top',
            align: 'left',
            donetext: 'Finalizar'
        });
        $('#centroCostoGeneral').selectpicker({
            dropupAuto: false
        });
        $('#nivelAcademico').selectpicker({
            dropupAuto: false
        });
        $('#faena').selectpicker({
            dropupAuto: false
        });
        $('#tipoVehiculo').selectpicker({
            dropupAuto: false
        });
        $('#tipoDeTurno').selectpicker({
            dropupAuto: false
        });
        $('.table-responsive').on('show.bs.dropdown', function() {
            $('.table-responsive').css("overflow", "inherit");
        });

        $('.table-responsive').on('hide.bs.dropdown', function() {
            $('.table-responsive').css("overflow", "auto");
        })
    </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 cambiosCamposNivelAcademico(nivelAcademico) {
            let valorNivelAcademico = nivelAcademico.value;
            switch (valorNivelAcademico) {
                case "":
                    document.getElementById("profesion").value = "Sin Profesión";
                    document.getElementById("profesion").removeAttribute("readonly");
                    document.getElementById("profesion").setAttribute("readonly", "");
                    break;
                case "Sin Nivel Acamedico":
                    document.getElementById("profesion").value = "Sin Profesión";
                    document.getElementById("profesion").removeAttribute("readonly");
                    document.getElementById("profesion").setAttribute("readonly", "");
                    break;
                case "Enseñanza Basica Completa":
                    document.getElementById("profesion").value = "Sin Profesión";
                    document.getElementById("profesion").removeAttribute("readonly");
                    document.getElementById("profesion").setAttribute("readonly", "");
                    break;
                case "Enseñanza Media Completa":
                    document.getElementById("profesion").value = "";
                    document.getElementById("profesion").removeAttribute("readonly");
                    break;
                case "Enseñanza Superior Completa":
                    document.getElementById("profesion").value = "";
                    document.getElementById("profesion").removeAttribute("readonly");
                    break;
            }
        }

        function cambiosCamposTipoTurno(tipoTurno) {
            let valorTipoTurno = tipoTurno.value;
            switch (valorTipoTurno) {
                case "":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                    break;
                case "4x3":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                    break;
                case "5x2":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                    break;
                case "8x6":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                    break;
                case "7x7":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                    break;
                case "Otro":
                    document.getElementById("tipoDeTurnoTexto").value = "";
                    document.getElementById("contenedorTipoTurnoTexto").style.display="block";
                    break;    
            }
        }

        function establecerValorDelCampoExperienciaLaboralNumero(experienciaLaboral) {
            if (experienciaLaboral.value > 0) {
                document.getElementById("experienciaLaboralNumero").value = experienciaLaboral.value;
                experienciaLaboral.value = experienciaLaboral.value + " Años";
            } else if (experienciaLaboral.value == 0) {
                document.getElementById("experienciaLaboralNumero").value = experienciaLaboral.value;
                experienciaLaboral.value = "Sin Experiencia";
            }
        }

        function modificarValorCampoExperienciaLaboraltexto(experienciaLaboral) {
            experienciaLaboral.value = document.getElementById("experienciaLaboralNumero").value;
        }

        function establecerFormatoMonedaSueldoBruto(campo) {
            document.getElementById("sueldoBrutoNumero").value = campo.value.trim().replace(",", ".");
            let formatoMoneda = new Intl.NumberFormat("es-CL", {
                style: "currency",
                currency: "CLP",
            })
            let valor = formatoMoneda.format(campo.value.trim());
            valor = valor.replace("$", "");
            valor = valor.replace("CLP", "");
            campo.value = "CLP $ " + valor;
        }

        function reestablecerCampoSueldoBruto(campo) {
            campo.value = document.getElementById("sueldoBrutoNumero").value;
        }

        let cantidadMaximaDeRegistrosConociminetoCertificaciones = 0;

        function agregarConociminetoCertificaciones() {
            let valorConocimientoCertificaciones = document.getElementById("conocimimientoCentificaciones").value.trim();
            if (valorConocimientoCertificaciones.length > 0) {
                cantidadMaximaDeRegistrosConociminetoCertificaciones++;
                if (document.getElementById("conocimientosCertificacionesNoDisponibleEnLaTabla")) {
                    document.getElementById("conocimientosCertificacionesNoDisponibleEnLaTabla").remove();
                }
                document.getElementById("registroConocimientosCertificaciones").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-conocimiento-certificacion">' + cantidadMaximaDeRegistrosConociminetoCertificaciones + '</td>' +
                    '<td class="tabla-conocimiento-certificacion">' + valorConocimientoCertificaciones + '</td>' +
                    '<td class="tabla-accion-conocimiento-certificacion">' +
                    '<button onclick="habilitarBotonConfirmarEliminaciononCocimientoCertificaciones(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaCocimientoCertificaciones(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';
                document.getElementById("conocimimientoCentificaciones").value = "";
                document.getElementById("valicacionCampoConocimimientoCentificaciones").innerHTML = "";
                document.getElementById("conocimimientoCentificaciones").setAttribute("class", "form-control");
                document.getElementById("valicacionCampoConocimimientoCentificaciones").style.display = "none";
            } else {
                document.getElementById("conocimimientoCentificaciones").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoConocimimientoCentificaciones").style.display = "block";
                document.getElementById("valicacionCampoConocimimientoCentificaciones").innerHTML = "El campo conocimiento y/o certificaciones es obligatorio";
            }
        }

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

        function habilitarBotonConfirmarEliminaciononCocimientoCertificaciones(boton) {

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

        }

        function eliminarFilaCocimientoCertificaciones(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            cantidadMaximaDeRegistrosConociminetoCertificaciones = 0;
            let filas = document.getElementById('tabla-conocimiento-certificaciones').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    cantidadMaximaDeRegistrosConociminetoCertificaciones++;
                    elemento.querySelector(".tabla-contador-conocimiento-certificacion").innerHTML = cantidadMaximaDeRegistrosConociminetoCertificaciones;
                });
            } else {
                document.getElementById("registroConocimientosCertificaciones").innerHTML =
                    '<tr id="conocimientosCertificacionesNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay conocimientos y/o certificaciones disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        let cantidadMaximaDeRegistrosBonosAsociados = 0;

        function agregaBonoAsociado() {
            let valorBonoAsociado = document.getElementById("bonoAsociado").value.trim();
            if (valorBonoAsociado.length > 0) {
                cantidadMaximaDeRegistrosBonosAsociados++;
                if (document.getElementById("bonosAsociadosNoDisponibleEnLaTabla")) {
                    document.getElementById("bonosAsociadosNoDisponibleEnLaTabla").remove();
                }
                document.getElementById("registroBonosAsociados").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-bonos-asociado">' + cantidadMaximaDeRegistrosBonosAsociados + '</td>' +
                    '<td class="tabla-bonos-asociado">' + valorBonoAsociado + '</td>' +
                    '<td class="tabla-accion-bonos-asociado">' +
                    '<button onclick="habilitarBotonConfirmarEliminaciononBonoAsociado(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaBonoAsociado(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-bono mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';
                document.getElementById("bonoAsociado").value = "";
                document.getElementById("valicacionCampoBonoAsociado").innerHTML = "";
                document.getElementById("bonoAsociado").setAttribute("class", "form-control");
                document.getElementById("valicacionCampoBonoAsociado").style.display = "none";
            } else {
                document.getElementById("bonoAsociado").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoBonoAsociado").style.display = "block";
                document.getElementById("valicacionCampoBonoAsociado").innerHTML = "El campo bono asociado es obligatorio";
            }
        }

        function deshabilitarBotonesConfirmarEliminacionBonoAsociado() {
            let botones = document.querySelectorAll(".boton-confirmar-bono");
            botones.forEach(elemento => {
                elemento.style.display = 'none';
            });
        }

        function habilitarBotonConfirmarEliminaciononBonoAsociado(boton) {

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

        }

        function eliminarFilaBonoAsociado(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            cantidadMaximaDeRegistrosBonosAsociados = 0;
            let filas = document.getElementById('tabla-bonos-asociados').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    cantidadMaximaDeRegistrosBonosAsociados++;
                    elemento.querySelector(".tabla-contador-bonos-asociado").innerHTML = cantidadMaximaDeRegistrosBonosAsociados;
                });
            } else {
                document.getElementById("registroBonosAsociados").innerHTML =
                    '<tr id="bonosAsociadosNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay bonos asociados disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        function cambiosCamposTipoVehiculo(vehiculo) {
            let valorVehiculo = vehiculo.value;
            switch (valorVehiculo) {
                case "":
                    document.getElementById("maquinaria").value = "Sin Maquinaria";
                    document.getElementById("maquinaria").removeAttribute("readonly");
                    document.getElementById("maquinaria").setAttribute("readonly", "");
                    break;
                case "Vehículo Liviano":
                    document.getElementById("maquinaria").value = "Sin Maquinaria";
                    document.getElementById("maquinaria").removeAttribute("readonly");
                    document.getElementById("maquinaria").setAttribute("readonly", "");
                    break;
                case "Maquinaria":
                    document.getElementById("maquinaria").value = "";
                    document.getElementById("maquinaria").removeAttribute("readonly");
                    break;
                case "No Aplica":
                    document.getElementById("maquinaria").value = "Sin Maquinaria";
                    document.getElementById("maquinaria").removeAttribute("readonly");
                    document.getElementById("maquinaria").setAttribute("readonly", "");
                    break;
            }
        }

        function establecerCentroDeCosto(cc) {
            let nombrecentroCosto = cc.options[cc.selectedIndex].text;
            document.getElementById("centroCosto").value = nombrecentroCosto;
        }
    </script>

    <script>
        let cantidadCargosSolicitados = 0;

        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 validarCamposSobreElCargosSolicitado() {
            let camposSinErrores = true;
            let idCampoError = "";
            if (document.getElementById("cargo").value.trim().length > 0) {
                document.getElementById("cargo").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoCargo").innerHTML = "";
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "cargo";
                }
                document.getElementById("cargo").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoCargo").innerHTML = "El campo nombre del cargo es obligatorio";
            }

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

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

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

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

            if (document.getElementById("tipoDeTurno").value == "Otro") {
                if (document.getElementById("tipoDeTurnoTexto").value.trim().length > 0) {
                    document.getElementById("tipoDeTurnoTexto").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoTipoDeTurnoTexto").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "tipoDeTurnoTexto";
                    }
                    document.getElementById("tipoDeTurnoTexto").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoTipoDeTurnoTexto").innerHTML = "El campo escribir el tipo de turno es obligatorio si el campo tipo de turno tiene el valor otro";
                }
            } 

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

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

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

            if (document.getElementById("correoSupervisarDirecto").value.trim().length > 0) {
                emailRegex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
                if (emailRegex.test(document.getElementById("correoSupervisarDirecto").value.trim())) {
                    document.getElementById("correoSupervisarDirecto").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoCorreoSupervisarDirecto").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "correoSupervisarDirecto";
                    }
                    document.getElementById("correoSupervisarDirecto").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoCorreoSupervisarDirecto").innerHTML = "El campo correo no tiene el formato adecuado";
                }
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "correoSupervisarDirecto";
                }
                document.getElementById("correoSupervisarDirecto").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoCorreoSupervisarDirecto").innerHTML = "El campo correo del supervisor directo es obligatorio";
            }

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

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

            if (document.getElementById("nivelAcademico").value == "Enseñanza Media Completa" || document.getElementById("nivelAcademico").value == "Enseñanza Superior Completa") {
                if (document.getElementById("profesion").value.trim().length > 0) {
                    document.getElementById("profesion").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoProfesion").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "profesion";
                    }
                    document.getElementById("profesion").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoProfesion").innerHTML = "El campo profesión es obligatorio si el campo nivel academico tiene el valor enseñanza media completa o enseñanza superior completa";
                }
            } else {
                document.getElementById("profesion").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoProfesion").innerHTML = "";
            }

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

            if (document.getElementById("sueldoBrutoTexto").value.trim().length > 0) {
                if (parseInt(document.getElementById("sueldoBrutoNumero").value) > 0) {
                    document.getElementById("sueldoBrutoTexto").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoSueldoBrutoTexto").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "sueldoBrutoTexto";
                    }
                    document.getElementById("sueldoBrutoTexto").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoSueldoBrutoTexto").innerHTML = "El campo sueldo bruto debe ser mayor que cero";
                }
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "sueldoBrutoTexto";
                }
                document.getElementById("sueldoBrutoTexto").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoSueldoBrutoTexto").innerHTML = "El campo sueldo bruto es obligatorio";
            }

            if (document.getElementById("fechaIngreso").value.trim().length > 0) {
                let fechaActual = new Date();
                let fechaIngreso = new Date(document.getElementById("fechaIngreso").value);

                if (fechaIngreso > fechaActual) {
                    document.getElementById("fechaIngreso").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampoFechaIngreso").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "fechaIngreso";
                    }
                    document.getElementById("fechaIngreso").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoFechaIngreso").innerHTML = "El campo fecha de ingreso debe ser mayor que la fecha actual";
                }
            } else {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "fechaIngreso";
                }
                document.getElementById("fechaIngreso").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoFechaIngreso").innerHTML = "El campo fecha de ingreso es obligatorio";
            }

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

            if (document.getElementById("tipoVehiculo").value == "Maquinaria") {
                if (document.getElementById("maquinaria").value.trim().length > 0) {
                    document.getElementById("maquinaria").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacionCampMaquinaria").innerHTML = "";
                } else {
                    camposSinErrores = false;
                    if (idCampoError == "") {
                        idCampoError = "maquinaria";
                    }
                    document.getElementById("maquinaria").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampMaquinaria").innerHTML = "El campo maquinaria es obligatorio si el campo tipo de vehiculo tiene el valor Maquinaria";
                }
            } else {
                document.getElementById("maquinaria").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampMaquinaria").innerHTML = "";
            }

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

            let idEvaluaciones = JSON.parse(document.getElementById("idEvaluaciones").value);
            let hayOpcionSinSeleccionarEnEvaluaciones = false;
            idEvaluaciones.forEach(id => {
                let nameRadioButtonEvalaucion = "radioButton_" + id;
                let radioButtons = document.getElementsByName(nameRadioButtonEvalaucion);
                let seSeleccionoUnaOpcion = false;
                radioButtons.forEach(radio => {
                    if (radio.checked == true) {
                        seSeleccionoUnaOpcion = true;
                    }
                });

                if (seSeleccionoUnaOpcion == false) {
                    hayOpcionSinSeleccionarEnEvaluaciones = true;
                }
            });

            if (hayOpcionSinSeleccionarEnEvaluaciones == true) {
                camposSinErrores = false;
                if (idCampoError == "") {
                    idCampoError = "errorEvaluaciones";
                }
                document.getElementById("errorEvaluaciones").style.display = "block";
                document.getElementById("errorEvaluaciones").innerHTML = "Hay opciones sin seleccionar en las evaluaciones, debe seleccionar todas las opciones";
            } else {
                document.getElementById("errorEvaluaciones").style.display = "none";
                document.getElementById("errorEvaluaciones").innerHTML = "";
            }

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

            return camposSinErrores;
        }

        function limpiarCamposSobreElCargosSolicitado() {
            document.getElementById("codigoUnico").value = "";

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

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

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

            document.getElementById("areaTrabajo").value = "";
            document.getElementById("valicacionCampoAreaTrabajo").innerHTML = "";
            document.getElementById("areaTrabajo").setAttribute("class", "form-control");
            
            $('#tipoDeTurno').selectpicker('val', "");
            document.getElementById("valicacionCampoTipoDeTurno").innerHTML = "";
            document.getElementById("tipoDeTurno").classList.remove('input-success-icon');
            document.getElementById("tipoDeTurno").classList.remove('input-error-icon');
            document.getElementById("valicacionCampoTipoDeTurno").style.display = "none";

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

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

            let nombrecentroCosto = document.getElementById("centroCostoGeneral").options[document.getElementById("centroCostoGeneral").selectedIndex].text;
            document.getElementById("centroCosto").value = nombrecentroCosto;
            document.getElementById("valicacionCampoCentroCosto").innerHTML = "";
            document.getElementById("centroCosto").setAttribute("class", "form-control");

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

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

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

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

            document.getElementById("profesion").value = "Sin Profesión";
            document.getElementById("valicacionCampoProfesion").innerHTML = "";
            document.getElementById("profesion").setAttribute("class", "form-control");
            document.getElementById("profesion").setAttribute("readonly", "true");

            document.getElementById("experienciaLaboralTexto").value = "";
            document.getElementById("experienciaLaboralNumero").value = "";
            document.getElementById("valicacionCampoExperienciaLaboralTexto").innerHTML = "";
            document.getElementById("experienciaLaboralTexto").setAttribute("class", "form-control");

            document.getElementById("sueldoBrutoTexto").value = "";
            document.getElementById("sueldoBrutoNumero").value = "";
            document.getElementById("valicacionCampoSueldoBrutoTexto").innerHTML = "";
            document.getElementById("sueldoBrutoTexto").setAttribute("class", "form-control");

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

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

            document.getElementById("maquinaria").value = "Sin Maquinaria";
            document.getElementById("valicacionCampMaquinaria").innerHTML = "";
            document.getElementById("maquinaria").setAttribute("class", "form-control");

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

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

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

            document.getElementById("registroConocimientosCertificaciones").innerHTML =
                '<tr id="conocimientosCertificacionesNoDisponibleEnLaTabla">' +
                '<td colspan="3" class="text-center">No hay conocimientos y/o certificaciones disponibles en la tabla</td>' +
                '</tr>';

            document.getElementById("registroBonosAsociados").innerHTML =
                '<tr id="bonosAsociadosNoDisponibleEnLaTabla">' +
                '<td colspan="3" class="text-center">No hay bonos asociados disponibles en la tabla</td>' +
                '</tr>';

            document.getElementById("registroDePostulantes").innerHTML =
                '<tr id="postulantesNoDisponibleEnLaTabla">' +
                '<td colspan="4" class="text-center">No hay postulantes referidos disponibles en la tabla</td>' +
                '</tr>';    

            let radioButtonEvaluaciones = document.querySelectorAll(".radio-button-evaluacion");
            radioButtonEvaluaciones.forEach(radio => {
                radio.checked = false;
            });
        }

        function detalleConocimientos(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let listadoModalConocimiento = JSON.parse(elementoPadre.querySelector(".tabla-listado-conocimientos-cargos").innerHTML)
            document.getElementById("registroModalConocimientosCertificaciones").innerHTML = "";
            let cantidadModalConocimiento = 0;
            listadoModalConocimiento.forEach(conocimiento => {
                cantidadModalConocimiento++;
                document.getElementById("registroModalConocimientosCertificaciones").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-modal-conocimiento-certificacion">' + cantidadModalConocimiento + '</td>' +
                    '<td class="tabla-modal-conocimiento-certificacion">' + conocimiento + '</td>' +
                    '</tr>';
            });
            document.getElementById("tituloModalConocimientos").innerHTML = "Conocimientos/certificaciones del cargo solicitado " + elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            $("#modalConocimientos").modal("show");
        }

        function detalleBonos(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let listadoModalBonos = JSON.parse(elementoPadre.querySelector(".tabla-listado-bonos-cargos").innerHTML)
            document.getElementById("registroModalBonos").innerHTML = "";
            let cantidadModalBonos = 0;
            listadoModalBonos.forEach(bono => {
                cantidadModalBonos++;
                document.getElementById("registroModalBonos").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-modal-bonos">' + cantidadModalBonos + '</td>' +
                    '<td class="tabla-modal-bono-bonos">' + bono + '</td>' +
                    '</tr>';
            });
            document.getElementById("tituloModalBonos").innerHTML = "Bonos del cargo solicitado " + elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            $("#modalBonos").modal("show");
        }

        function detallePostulantes(fila){
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let listadoModalPostulantes = JSON.parse(elementoPadre.querySelector(".tabla-listado-postulantes-cargos").innerHTML)
            document.getElementById("registroModalPostulantes").innerHTML = "";
            let cantidadModalPostulantes = 0;
            listadoModalPostulantes.forEach(postulante => {
                let listadoArchivos=JSON.parse(postulante.listadoArchivos);
                let archivos='<table style="width: 100%; height: 100%;"><tbody>';
                listadoArchivos.forEach(elemento => {
                        if(elemento.extensionArchivoSinFormato.toLowerCase() == "imagen"){
                            archivos += '<tr><td class="contenedorNombreBotonArchivo"><div>' + elemento.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + elemento.base64 + '\',\'imagen\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else if(elemento.extensionArchivoSinFormato.toLowerCase() == "pdf"){
                            archivos += '<tr><td class="contenedorNombreBotonArchivo"><div>' + elemento.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + elemento.base64 + '\',\'pdf\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else if(elemento.extensionArchivoSinFormato.toLowerCase() == "archivo de texto"){
                            archivos += '<tr><td class="contenedorNombreBotonArchivo"><div>' + elemento.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + elemento.base64 + '\',\'txt\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else{
                            archivos += '<tr><td class="contenedorNombreBotonArchivo">' + elemento.nombreArchivo + '</td></tr>';
                        }
                });
                archivos += '</tbody></table>';

                cantidadModalPostulantes++;
                document.getElementById("registroModalPostulantes").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-modal-postulantes">' + cantidadModalPostulantes + '</td>' +
                    '<td class="tabla-modal-nombre-postulantes">' + postulante.nombrePostulante + '</td>' +
                    '<td class="tabla-modal-archivos-postulantes" style="padding:0px;">'+archivos+'</td>' +
                    '</tr>';
            });
            document.getElementById("tituloModalPostulantes").innerHTML = "Postulantes del cargo solicitado " + elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            $("#modalPostulantes").modal("show");
        }

        function detalleEvaluaciones(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let listadoModalEvaluaciones = JSON.parse(elementoPadre.querySelector(".tabla-evaluaciones-cargos").innerHTML)
            document.getElementById("contenedorEvaluacionesModal").innerHTML =
                '<div style="padding:10px;" class="text-center">EVALUACIONES</div>' +
                '<div style="padding:10px;" class="text-center">OPCIÓN SELECCIONADA</div>';
            let cantidadModalEvaluacion = 0;
            listadoModalEvaluaciones.forEach(evaluacion => {
                let cantidadEvaluacionEsPar = false;
                cantidadModalEvaluacion++;
                if (cantidadModalEvaluacion % 2 == 0) {
                    cantidadEvaluacionEsPar = true;
                } else {
                    cantidadEvaluacionEsPar = false;
                }

                if (cantidadEvaluacionEsPar == false) {
                    document.getElementById("contenedorEvaluacionesModal").innerHTML +=
                        '<div class="filaEvaluacionBlancoClaro">' + evaluacion.nombreEvaluacion + '</div>' +
                        '<div class="filaEvaluacionBlancoClaro text-center">' + evaluacion.valorOpcionSeleccionada + '</div>';
                } else {
                    document.getElementById("contenedorEvaluacionesModal").innerHTML +=
                        '<div class="filaEvaluacionBlancoOscuro">' + evaluacion.nombreEvaluacion + '</div>' +
                        '<div class="filaEvaluacionBlancoOscuro text-center">' + evaluacion.valorOpcionSeleccionada + '</div>';
                }
            });
            document.getElementById("tituloModalEvaluaciones").innerHTML = "Evaluaciones del cargo solicitado " + elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            $("#modalEvaluaciones").modal("show");
        }

        function eliminarFila(fila) {
            Swal.fire({
                title: '¿Esta seguro?',
                text: "Se borraba todos los datos que tenga relación al cargo solicitado",
                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;
                    cantidadCargosSolicitados = 0;
                    elementoPadre.remove();
                    let filas = document.getElementById('tabla-cargos-solicitados').tBodies[0].querySelectorAll("tr");
                    filas.forEach(elemento => {
                        if (elemento.querySelector(".tabla-contador-cargos")) {
                            cantidadCargosSolicitados++;
                            elemento.querySelector(".tabla-contador-cargos").innerHTML = cantidadCargosSolicitados;
                        }
                    });

                    if (cantidadCargosSolicitados == 0) {
                        document.getElementById("centroCostoGeneral").removeAttribute("disabled");
                        document.querySelector(".dropdown-toggle[data-id='centroCostoGeneral']").removeAttribute("disabled");
                    }
                }
            })
        }

        function detalleObservacion(fila) {
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            document.getElementById("observacionModal").value = elementoPadre.querySelector(".tabla-observacion-cargos").innerHTML;
            document.getElementById("tituloModalObservacion").innerHTML = "Observación del cargo solicitado " + elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            $("#modalObservacion").modal("show");
        }

        function establecerFormularioParaEditarCargoSolicitado(fila) {
            limpiarCamposSobreElCargosSolicitado()
            let elementoPadre = fila.parentElement.parentElement.parentElement.parentElement;
            let listadoTipoTurno = elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML.split("x");
            document.getElementById("cargo").value = elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
            document.getElementById("numeroVacante").value = elementoPadre.querySelector(".tabla-numero-vacantes-cargos").innerHTML;
            $('#faena').selectpicker('val', elementoPadre.querySelector(".tabla-id-faena-cargos").innerHTML);
            document.getElementById("areaTrabajo").value = elementoPadre.querySelector(".tabla-area-trabajo-cargos").innerHTML;

            switch(elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML){
                case "4x3":
                    $('#tipoDeTurno').selectpicker('val', elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML);
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                break;
                case "5x2":
                    $('#tipoDeTurno').selectpicker('val', elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML);
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                break;
                case "8x6":
                    $('#tipoDeTurno').selectpicker('val', elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML);
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                break;
                case "7x7":
                    $('#tipoDeTurno').selectpicker('val', elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML);
                    document.getElementById("contenedorTipoTurnoTexto").style.display="none";
                break;
                default:
                    $('#tipoDeTurno').selectpicker('val','Otro');
                    document.getElementById("contenedorTipoTurnoTexto").style.display="block";
                    document.getElementById("tipoDeTurnoTexto").value=elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML;
                break;
            }

            document.getElementById("horario").value = elementoPadre.querySelector(".tabla-horario-cargos").innerHTML;
            document.getElementById("centroCosto").value = elementoPadre.querySelector(".tabla-nombre-centro-costo-cargos").innerHTML;
            document.getElementById("nombreSupervisorDirecto").value = elementoPadre.querySelector(".tabla-nombre-supervisor-directo-cargos").innerHTML;
            document.getElementById("correoSupervisarDirecto").value = elementoPadre.querySelector(".tabla-correo-supervisor-directo-cargos").innerHTML;
            document.getElementById("supervisaCargo").value = elementoPadre.querySelector(".tabla-supervisa-cargo-cargos").innerHTML;
            $('#nivelAcademico').selectpicker('val', elementoPadre.querySelector(".tabla-nivel-academico-cargos").innerHTML);
            document.getElementById("profesion").value = elementoPadre.querySelector(".tabla-profesion-cargos").innerHTML;
            document.getElementById("experienciaLaboralTexto").value = elementoPadre.querySelector(".tabla-experiencia-laboral-texto-cargos").innerHTML;
            document.getElementById("experienciaLaboralNumero").value = elementoPadre.querySelector(".tabla-experiencia-laboral-numero-cargos").innerHTML;
            document.getElementById("sueldoBrutoTexto").value = elementoPadre.querySelector(".tabla-sueldo-bruto-texto-cargos").innerHTML;
            document.getElementById("sueldoBrutoNumero").value = elementoPadre.querySelector(".tabla-sueldo-bruto-numero-cargos").innerHTML;
            document.getElementById("fechaIngreso").value = elementoPadre.querySelector(".tabla-fecha-ingreso-cargos").innerHTML;
            $('#tipoVehiculo').selectpicker('val', elementoPadre.querySelector(".tabla-tipo-vehiculo-cargos").innerHTML);
            document.getElementById("maquinaria").value = elementoPadre.querySelector(".tabla-maquinaria-cargos").innerHTML;
            document.getElementById("conocimimientoCentificaciones").value = "";
            document.getElementById("bonoAsociado").value = "";
            document.getElementById("observacion").value = elementoPadre.querySelector(".tabla-observacion-cargos").innerHTML;
            document.getElementById("codigoUnico").value = elementoPadre.querySelector(".tabla-id-unico-cargos").innerHTML;

            let cantidadConociminetoCertificaciones = 0;
            let cantidadBonos = 0;
            let cantidadPostulantes = 0;
            let listadoConocimientos = JSON.parse(elementoPadre.querySelector(".tabla-listado-conocimientos-cargos").innerHTML);
            let listadoBonos = JSON.parse(elementoPadre.querySelector(".tabla-listado-bonos-cargos").innerHTML);
            let listadoEvaluaciones = JSON.parse(elementoPadre.querySelector(".tabla-evaluaciones-cargos").innerHTML);
            let listadoPostulantes = JSON.parse(elementoPadre.querySelector(".tabla-listado-postulantes-cargos").innerHTML);

            listadoConocimientos.forEach(conocimiento => {
                cantidadConociminetoCertificaciones++;
                document.getElementById("registroConocimientosCertificaciones").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-conocimiento-certificacion">' + cantidadConociminetoCertificaciones + '</td>' +
                    '<td class="tabla-conocimiento-certificacion">' + conocimiento + '</td>' +
                    '<td class="tabla-accion-conocimiento-certificacion">' +
                    '<button onclick="habilitarBotonConfirmarEliminaciononCocimientoCertificaciones(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaCocimientoCertificaciones(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';
            });

            listadoBonos.forEach(bono => {
                cantidadBonos++;
                document.getElementById("registroBonosAsociados").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td class="tabla-contador-bonos-asociado">' + cantidadBonos + '</td>' +
                    '<td class="tabla-bonos-asociado">' + bono + '</td>' +
                    '<td class="tabla-accion-bonos-asociado">' +
                    '<button onclick="habilitarBotonConfirmarEliminaciononBonoAsociado(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaBonoAsociado(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-bono mr-1">Confirmar</button>' +
                    '</td>' +
                    '</tr>';
            });

            listadoEvaluaciones.forEach(evaluacion => {
                let nameRadioButtonEvalaucion = "radioButton_" + evaluacion.idEvaluacion;
                let radioButtons = document.getElementsByName(nameRadioButtonEvalaucion);

                radioButtons.forEach(radio => {
                    if (radio.value == evaluacion.valorOpcionSeleccionada) {
                        radio.checked = true;
                    }
                });
            });

            listadoPostulantes.forEach(postulante => {
                cantidadPostulantes++;
                let columnaNombreArchivo='<table style="width: 100%; height: 100%;"><tbody>';
                let listadoArchivosPostulante = JSON.parse(postulante.listadoArchivos);
                listadoArchivosPostulante.forEach(archivo => {
                    if(archivo.extensionArchivoSinFormato.toLowerCase() == "imagen"){
                        columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + archivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + archivo.base64 + '\',\'imagen\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                    }else if(archivo.extensionArchivoSinFormato.toLowerCase() == "pdf"){
                        columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + archivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + archivo.base64 + '\',\'pdf\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                    }else if(archivo.extensionArchivoSinFormato.toLowerCase() == "archivo de texto"){
                        columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + archivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + archivo.base64 + '\',\'txt\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                    }else{
                        columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo">' + archivo.nombreArchivo + '</td></tr>';
                    }
                });
                columnaNombreArchivo += '</tbody></table>';

                document.getElementById("registroDePostulantes").innerHTML +=
                '<tr role="row" class="odd">' +
                    '<td class="tabla-listado-archivos-postulantes" style="display:none">' + postulante.listadoArchivos + '</td>' +
                    '<td class="tabla-contador-postulantes">' + cantidadPostulantes + '</td>' +
                    '<td class="tabla-nombre-postulantes">' + postulante.nombrePostulante + '</td>' +
                    '<td class="tabla-nombre-archivo-postulantes" style="padding:0px;">' + columnaNombreArchivo + '</td>' +
                    '<td class="tabla-accion-postulantes">' +
                    '<button onclick="habilitarBotonConfirmarEliminaciononPostulantes(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                    '<button onclick="eliminarFilaPostulantes(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                    '</td>' +
                '</tr>';    
            });

            if (listadoConocimientos.length > 0) {
                if (document.getElementById("conocimientosCertificacionesNoDisponibleEnLaTabla")) {
                    document.getElementById("conocimientosCertificacionesNoDisponibleEnLaTabla").remove();
                }
            }

            if(listadoBonos.length > 0){
                if (document.getElementById("bonosAsociadosNoDisponibleEnLaTabla")) {
                    document.getElementById("bonosAsociadosNoDisponibleEnLaTabla").remove();
                }
            }

            if(listadoPostulantes.length > 0){
                if (document.getElementById("postulantesNoDisponibleEnLaTabla")) {
                    document.getElementById("postulantesNoDisponibleEnLaTabla").remove();
                }
            }

            document.getElementById("botonDeAgregarCargo").style.display = "none";
            document.getElementById("botonDeEditarCargo").style.display = "inline-block";
            document.getElementById("custom-tabs-one-home-tab").click();
        }

        function agregarElCargosSolicitado() {
            let error = validarCamposSobreElCargosSolicitado();
            if (error == true) {
                let nombreCargo = document.getElementById("cargo").value.trim();
                let numeroVacante = document.getElementById("numeroVacante").value.trim();
                let faena = document.getElementById("faena").value.trim();
                let nombreFaena = document.getElementById("faena").options[document.getElementById("faena").selectedIndex].text;
                let areaTrabajo = document.getElementById("areaTrabajo").value.trim();
                let tipoTurno="";
                if(document.getElementById("tipoDeTurno").value.trim()=="Otro"){
                    tipoTurno =document.getElementById("tipoDeTurnoTexto").value.trim();
                }else{
                    tipoTurno =document.getElementById("tipoDeTurno").value.trim();
                }
                let horario = document.getElementById("horario").value.trim();
                let centroCosto = document.getElementById("centroCostoGeneral").value.trim();
                let nombrecentroCosto = document.getElementById("centroCostoGeneral").options[document.getElementById("centroCostoGeneral").selectedIndex].text;
                let nombreSupervisorDirecto = document.getElementById("nombreSupervisorDirecto").value.trim();
                let correoSupervisarDirecto = document.getElementById("correoSupervisarDirecto").value.trim();
                let supervisaCargo = document.getElementById("supervisaCargo").value.trim();
                let nivelAcademico = document.getElementById("nivelAcademico").value.trim();
                let profesion = document.getElementById("profesion").value.trim();
                let experienciaLaboralTexto = document.getElementById("experienciaLaboralTexto").value.trim();
                let experienciaLaboralNumero = document.getElementById("experienciaLaboralNumero").value.trim();
                let sueldoBrutoTexto = document.getElementById("sueldoBrutoTexto").value.trim();
                let sueldoBrutoNumero = document.getElementById("sueldoBrutoNumero").value.trim();
                let fechaIngreso = document.getElementById("fechaIngreso").value.trim();
                let tipoVehiculo = document.getElementById("tipoVehiculo").value.trim();
                let maquinaria = document.getElementById("maquinaria").value.trim();
                let observacion = document.getElementById("observacion").value.trim();
                let listadoDeConocimientos = [];
                let listadoDeBonos = [];
                let listadoDeEvaluacionesSeleccionadas = [];
                let listadoDePostulantes = [];

                let filasConocimiento = document.getElementById('tabla-conocimiento-certificaciones').tBodies[0].querySelectorAll("tr");
                filasConocimiento.forEach(filaConocimiento => {
                    if (filaConocimiento.querySelector(".tabla-conocimiento-certificacion")) {
                        let conocimiento = filaConocimiento.querySelector(".tabla-conocimiento-certificacion").innerHTML.trim();
                        listadoDeConocimientos.push(conocimiento);
                    }
                });

                let filasBonos = document.getElementById('tabla-bonos-asociados').tBodies[0].querySelectorAll("tr");
                filasBonos.forEach(filasBono => {
                    if (filasBono.querySelector(".tabla-bonos-asociado")) {
                        let bono = filasBono.querySelector(".tabla-bonos-asociado").innerHTML.trim();
                        listadoDeBonos.push(bono);
                    }
                });

                let idEvaluaciones = JSON.parse(document.getElementById("idEvaluaciones").value);
                idEvaluaciones.forEach(id => {
                    let nameRadioButtonEvalaucion = "radioButton_" + id;
                    let nombreEvaluacion = document.getElementById("nombreEvaluacion_" + id).innerHTML;
                    let radioButtons = document.getElementsByName(nameRadioButtonEvalaucion);
                    let valorOpcionSeleccionada = "";
                    let idEvaluacion = id;

                    radioButtons.forEach(radio => {
                        if (radio.checked == true) {
                            valorOpcionSeleccionada = radio.value;
                        }
                    });

                    let objectoEvaluacion = {
                        idEvaluacion: idEvaluacion,
                        nombreEvaluacion: nombreEvaluacion,
                        valorOpcionSeleccionada: valorOpcionSeleccionada
                    }

                    listadoDeEvaluacionesSeleccionadas.push(objectoEvaluacion);
                });

                let filasPostulantes = document.getElementById('tabla-postulantes').tBodies[0].querySelectorAll("tr");
                filasPostulantes.forEach(filaPostulante => {
                    if (filaPostulante.querySelector(".tabla-listado-archivos-postulantes")) {
                        let nombrePostulante = filaPostulante.querySelector(".tabla-nombre-postulantes").innerHTML.trim();
                        let listadoArchivos = filaPostulante.querySelector(".tabla-listado-archivos-postulantes").innerHTML.trim();

                        let objectoPostulante = {
                            nombrePostulante: nombrePostulante,
                            listadoArchivos: listadoArchivos
                        };

                        listadoDePostulantes.push(objectoPostulante);
                    }
                });

                let listadoDeConocimientosString = JSON.stringify(listadoDeConocimientos);
                let listadoDeBonosString = JSON.stringify(listadoDeBonos);
                let listadoDePostulantesString = JSON.stringify(listadoDePostulantes);
                let listadoDeEvaluacionesSeleccionadasString = JSON.stringify(listadoDeEvaluacionesSeleccionadas);
                cantidadCargosSolicitados++;

                let itemDropdowConocimiento = '';
                let itemDropdowBonos = '';
                let itemDropdowPostulantes = '';
                let itemDropdowObservacion = '';
                if (listadoDeConocimientos.length > 0) {
                    itemDropdowConocimiento = '<a class="dropdown-item" href="#" onclick="detalleConocimientos(this)"><i class="fas fa-brain" aria-hidden="true"></i> Conocimiento/Centificaciones</a>';
                }

                if (listadoDeBonos.length > 0) {
                    itemDropdowBonos = '<a class="dropdown-item" href="#" onclick="detalleBonos(this)"><i class="fas fa-money-bill-wave-alt" aria-hidden="true"></i> Bonos</a>';
                }

                if (listadoDePostulantes.length > 0) {
                    itemDropdowPostulantes = '<a class="dropdown-item" href="#" onclick="detallePostulantes(this)"><i class="fas fa-users" aria-hidden="true"></i> Postulantes</a>';
                }

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

                let codigoUnico = uuidv4();

                document.getElementById("CargosSolicitadosNoDisponibleEnLaTabla").style.display = "none";
                document.getElementById("registroCargosSolicitados").innerHTML +=
                    '<tr role="row" class="odd">' +
                    '<td style="display: none;" class="tabla-id-unico-cargos">' + codigoUnico + '</td>' +
                    '<td style="display: none;" class="tabla-listado-conocimientos-cargos">' + listadoDeConocimientosString + '</td>' +
                    '<td style="display: none;" class="tabla-listado-bonos-cargos">' + listadoDeBonosString + '</td>' +
                    '<td style="display: none;" class="tabla-listado-postulantes-cargos">' + listadoDePostulantesString + '</td>' +
                    '<td style="display: none;" class="tabla-evaluaciones-cargos">' + listadoDeEvaluacionesSeleccionadasString + '</td>' +
                    '<td style="display: none;" class="tabla-id-faena-cargos">' + faena + '</td>' +
                    '<td style="display: none;" class="tabla-id-centro-costo-cargos">' + centroCosto + '</td>' +
                    '<td style="display: none;" class="tabla-experiencia-laboral-numero-cargos">' + experienciaLaboralNumero + '</td>' +
                    '<td style="display: none;" class="tabla-sueldo-bruto-numero-cargos">' + sueldoBrutoNumero + '</td>' +
                    '<td style="display: none;" class="tabla-observacion-cargos">' + observacion + '</td>' +
                    '<td class="tabla-contador-cargos">' + cantidadCargosSolicitados + '</td>' +
                    '<td class="tabla-accion-cargos">' +
                    '<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">' +
                    itemDropdowConocimiento +
                    itemDropdowBonos +
                    itemDropdowPostulantes+
                    '<a class="dropdown-item" href="#" onclick="detalleEvaluaciones(this)"><i class="fas fa-book-open" aria-hidden="true"></i> Evaluaciones</a>' +
                    itemDropdowObservacion +
                    '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarCargoSolicitado(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-nombre-cargo-cargos">' + nombreCargo + '</td>' +
                    '<td class="tabla-numero-vacantes-cargos">' + numeroVacante + '</td>' +
                    '<td class="tabla-nombre-faena-cargos">' + nombreFaena + '</td>' +
                    '<td class="tabla-area-trabajo-cargos">' + areaTrabajo + '</td>' +
                    '<td class="tabla-tipo-turno-cargos">' + tipoTurno + '</td>' +
                    '<td class="tabla-horario-cargos">' + horario + '</td>' +
                    '<td class="tabla-nombre-centro-costo-cargos">' + nombrecentroCosto + '</td>' +
                    '<td class="tabla-nombre-supervisor-directo-cargos">' + nombreSupervisorDirecto + '</td>' +
                    '<td class="tabla-correo-supervisor-directo-cargos">' + correoSupervisarDirecto + '</td>' +
                    '<td class="tabla-supervisa-cargo-cargos">' + supervisaCargo + '</td>' +
                    '<td class="tabla-nivel-academico-cargos">' + nivelAcademico + '</td>' +
                    '<td class="tabla-profesion-cargos">' + profesion + '</td>' +
                    '<td class="tabla-experiencia-laboral-texto-cargos">' + experienciaLaboralTexto + '</td>' +
                    '<td class="tabla-sueldo-bruto-texto-cargos">' + sueldoBrutoTexto + '</td>' +
                    '<td class="tabla-fecha-ingreso-cargos">' + fechaIngreso + '</td>' +
                    '<td class="tabla-tipo-vehiculo-cargos">' + tipoVehiculo + '</td>' +
                    '<td class="tabla-maquinaria-cargos">' + maquinaria + '</td>' +
                    '</tr>';
                limpiarCamposSobreElCargosSolicitado()

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

                document.getElementById("custom-tabs-one-profile-tab").click();
                document.getElementById("centroCostoGeneral").setAttribute("disabled", "true");
                document.querySelector(".dropdown-toggle[data-id='centroCostoGeneral']").setAttribute("disabled", "true");
            }
        }

        function editarElCargosSolicitado() {
            let error = validarCamposSobreElCargosSolicitado();
            if (error == true) {
                let filas = document.getElementById('tabla-cargos-solicitados').tBodies[0].querySelectorAll("tr");
                filas.forEach(elementoPadre => {
                    if (elementoPadre.querySelector(".tabla-contador-cargos")) {
                        if (elementoPadre.querySelector(".tabla-id-unico-cargos").innerHTML == document.getElementById("codigoUnico").value) {
                            let nombreCargo = document.getElementById("cargo").value.trim();
                            let numeroVacante = document.getElementById("numeroVacante").value.trim();
                            let faena = document.getElementById("faena").value.trim();
                            let nombreFaena = document.getElementById("faena").options[document.getElementById("faena").selectedIndex].text;
                            let areaTrabajo = document.getElementById("areaTrabajo").value.trim();
                            let tipoTurno="";
                            if(document.getElementById("tipoDeTurno").value.trim()=="Otro"){
                                tipoTurno =document.getElementById("tipoDeTurnoTexto").value.trim();
                            }else{
                                tipoTurno =document.getElementById("tipoDeTurno").value.trim();
                            }
                            let horario = document.getElementById("horario").value.trim();
                            let centroCosto = document.getElementById("centroCostoGeneral").value.trim();
                            let nombrecentroCosto = document.getElementById("centroCostoGeneral").options[document.getElementById("centroCostoGeneral").selectedIndex].text;
                            let nombreSupervisorDirecto = document.getElementById("nombreSupervisorDirecto").value.trim();
                            let correoSupervisarDirecto = document.getElementById("correoSupervisarDirecto").value.trim();
                            let supervisaCargo = document.getElementById("supervisaCargo").value.trim();
                            let nivelAcademico = document.getElementById("nivelAcademico").value.trim();
                            let profesion = document.getElementById("profesion").value.trim();
                            let experienciaLaboralTexto = document.getElementById("experienciaLaboralTexto").value.trim();
                            let experienciaLaboralNumero = document.getElementById("experienciaLaboralNumero").value.trim();
                            let sueldoBrutoTexto = document.getElementById("sueldoBrutoTexto").value.trim();
                            let sueldoBrutoNumero = document.getElementById("sueldoBrutoNumero").value.trim();
                            let fechaIngreso = document.getElementById("fechaIngreso").value.trim();
                            let tipoVehiculo = document.getElementById("tipoVehiculo").value.trim();
                            let maquinaria = document.getElementById("maquinaria").value.trim();
                            let observacion = document.getElementById("observacion").value.trim();
                            let listadoDeConocimientos = [];
                            let listadoDeBonos = [];
                            let listadoDeEvaluacionesSeleccionadas = [];
                            let listadoDePostulantes = [];

                            var filasConocimiento = document.getElementById('tabla-conocimiento-certificaciones').tBodies[0].querySelectorAll("tr");
                            filasConocimiento.forEach(filaConocimiento => {
                                if (filaConocimiento.querySelector(".tabla-conocimiento-certificacion")) {
                                    let conocimiento = filaConocimiento.querySelector(".tabla-conocimiento-certificacion").innerHTML.trim();
                                    listadoDeConocimientos.push(conocimiento);
                                }
                            });

                            var filasBonos = document.getElementById('tabla-bonos-asociados').tBodies[0].querySelectorAll("tr");
                            filasBonos.forEach(filasBono => {
                                if (filasBono.querySelector(".tabla-bonos-asociado")) {
                                    let bono = filasBono.querySelector(".tabla-bonos-asociado").innerHTML.trim();
                                    listadoDeBonos.push(bono);
                                }
                            });

                            let idEvaluaciones = JSON.parse(document.getElementById("idEvaluaciones").value);
                            idEvaluaciones.forEach(id => {
                                let nameRadioButtonEvalaucion = "radioButton_" + id;
                                let nombreEvaluacion = document.getElementById("nombreEvaluacion_" + id).innerHTML;
                                let radioButtons = document.getElementsByName(nameRadioButtonEvalaucion);
                                let valorOpcionSeleccionada = "";
                                let idEvaluacion = id;

                                radioButtons.forEach(radio => {
                                    if (radio.checked == true) {
                                        valorOpcionSeleccionada = radio.value;
                                    }
                                });

                                let objectoEvaluacion = {
                                    idEvaluacion: idEvaluacion,
                                    nombreEvaluacion: nombreEvaluacion,
                                    valorOpcionSeleccionada: valorOpcionSeleccionada
                                }

                                listadoDeEvaluacionesSeleccionadas.push(objectoEvaluacion);
                            });

                            let filasPostulantes = document.getElementById('tabla-postulantes').tBodies[0].querySelectorAll("tr");
                            filasPostulantes.forEach(filaPostulante => {
                                if (filaPostulante.querySelector(".tabla-listado-archivos-postulantes")) {
                                    let nombrePostulante = filaPostulante.querySelector(".tabla-nombre-postulantes").innerHTML.trim();
                                    let listadoArchivos = filaPostulante.querySelector(".tabla-listado-archivos-postulantes").innerHTML.trim();

                                    let objectoPostulante = {
                                        nombrePostulante: nombrePostulante,
                                        listadoArchivos: listadoArchivos
                                    };

                                    listadoDePostulantes.push(objectoPostulante);
                                }
                            });

                            let listadoDeConocimientosString = JSON.stringify(listadoDeConocimientos);
                            let listadoDeBonosString = JSON.stringify(listadoDeBonos);
                            let listadoDePostulantesString = JSON.stringify(listadoDePostulantes);
                            let listadoDeEvaluacionesSeleccionadasString = JSON.stringify(listadoDeEvaluacionesSeleccionadas);

                            let itemDropdowConocimiento = '';
                            let itemDropdowBonos = '';
                            let itemDropdowPostulantes = '';
                            let itemDropdowObservacion = '';
                            if (listadoDeConocimientos.length > 0) {
                                itemDropdowConocimiento = '<a class="dropdown-item" href="#" onclick="detalleConocimientos(this)"><i class="fas fa-brain" aria-hidden="true"></i> Conocimiento/Centificaciones</a>';
                            }

                            if (listadoDeBonos.length > 0) {
                                itemDropdowBonos = '<a class="dropdown-item" href="#" onclick="detalleBonos(this)"><i class="fas fa-money-bill-wave-alt" aria-hidden="true"></i> Bonos</a>';
                            }

                            if (listadoDePostulantes.length > 0) {
                                itemDropdowPostulantes = '<a class="dropdown-item" href="#" onclick="detallePostulantes(this)"><i class="fas fa-users" aria-hidden="true"></i> Postulantes</a>';
                            }

                            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-cargos").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">' +
                                itemDropdowConocimiento +
                                itemDropdowBonos +
                                itemDropdowPostulantes+
                                '<a class="dropdown-item" href="#" onclick="detalleEvaluaciones(this)"><i class="fas fa-book-open" aria-hidden="true"></i> Evaluaciones</a>' +
                                itemDropdowObservacion +
                                '<a class="dropdown-item" href="#" onclick="establecerFormularioParaEditarCargoSolicitado(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-nombre-cargo-cargos").innerHTML = nombreCargo;
                            elementoPadre.querySelector(".tabla-numero-vacantes-cargos").innerHTML = numeroVacante;
                            elementoPadre.querySelector(".tabla-id-faena-cargos").innerHTML = faena;
                            elementoPadre.querySelector(".tabla-nombre-faena-cargos").innerHTML = nombreFaena;
                            elementoPadre.querySelector(".tabla-area-trabajo-cargos").innerHTML = areaTrabajo;
                            elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML = tipoTurno;
                            elementoPadre.querySelector(".tabla-horario-cargos").innerHTML = horario;
                            elementoPadre.querySelector(".tabla-id-centro-costo-cargos").innerHTML = centroCosto;
                            elementoPadre.querySelector(".tabla-nombre-centro-costo-cargos").innerHTML = nombrecentroCosto;
                            elementoPadre.querySelector(".tabla-nombre-supervisor-directo-cargos").innerHTML = nombreSupervisorDirecto;
                            elementoPadre.querySelector(".tabla-correo-supervisor-directo-cargos").innerHTML = correoSupervisarDirecto;
                            elementoPadre.querySelector(".tabla-supervisa-cargo-cargos").innerHTML = supervisaCargo;
                            elementoPadre.querySelector(".tabla-nivel-academico-cargos").innerHTML = nivelAcademico;
                            elementoPadre.querySelector(".tabla-profesion-cargos").innerHTML = profesion;
                            elementoPadre.querySelector(".tabla-experiencia-laboral-texto-cargos").innerHTML = experienciaLaboralTexto;
                            elementoPadre.querySelector(".tabla-experiencia-laboral-numero-cargos").innerHTML = experienciaLaboralNumero;
                            elementoPadre.querySelector(".tabla-sueldo-bruto-texto-cargos").innerHTML = sueldoBrutoTexto;
                            elementoPadre.querySelector(".tabla-sueldo-bruto-numero-cargos").innerHTML = sueldoBrutoNumero;
                            elementoPadre.querySelector(".tabla-fecha-ingreso-cargos").innerHTML = fechaIngreso;
                            elementoPadre.querySelector(".tabla-tipo-vehiculo-cargos").innerHTML = tipoVehiculo;
                            elementoPadre.querySelector(".tabla-maquinaria-cargos").innerHTML = maquinaria;
                            elementoPadre.querySelector(".tabla-listado-conocimientos-cargos").innerHTML = listadoDeConocimientosString;
                            elementoPadre.querySelector(".tabla-listado-bonos-cargos").innerHTML = listadoDeBonosString;
                            elementoPadre.querySelector(".tabla-listado-postulantes-cargos").innerHTML = listadoDePostulantesString;
                            elementoPadre.querySelector(".tabla-evaluaciones-cargos").innerHTML = listadoDeEvaluacionesSeleccionadasString;
                            elementoPadre.querySelector(".tabla-observacion-cargos").innerHTML = observacion;
                        }
                    }
                });

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

                document.getElementById("custom-tabs-one-profile-tab").click();
                limpiarCamposSobreElCargosSolicitado()
                document.getElementById("botonDeAgregarCargo").style.display = "inline-block";
                document.getElementById("botonDeEditarCargo").style.display = "none";
            }
        }
    </script>

    <script>
        function visualizarArchivoDeLaordenDeCompra(archivo, tipo) {
            var body = document.getElementsByTagName("body")[0];
            var html = document.getElementsByTagName("html")[0];
            var contenedor = document.createElement("div");
            var contenerdorVolver = document.createElement("div");
            var contenerdorDeImagenes = document.createElement("div");

            if (tipo == "imagen") {
                var elementoImagen = document.createElement("img");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoImagen");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "pdf") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframe");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center;");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            if (tipo == "txt") {
                var elementoImagen = document.createElement("iframe");
                var contenerdorImg = document.createElement("div");

                elementoImagen.setAttribute("src", archivo);
                elementoImagen.setAttribute("class", "tamanoIframeTxt");
                elementoImagen.setAttribute("id", "imagenDelArchivo");
                contenerdorImg.setAttribute("style", "text-align: center; ");

                contenedor.setAttribute("class", "contenedorParaVisualizarImagenDelArchivo");
                contenedor.setAttribute("id", "contenedorParaVisualizarImagenDelArchivo");
                contenerdorVolver.setAttribute("class", "contenedorVolver");
                contenerdorDeImagenes.setAttribute("class", "contenedorDeImagenes");

                contenerdorVolver.innerHTML =
                    "<div></div>" +
                    '<div style="display: flex; justify-content: center; align-items: center; "><button onClick="cerrarVisualizarDeArchivo()" type="button" style=" border: 0;padding: 0px; background-color: transparent;  margin: 0; color:white; cursor:pointer;"><i class="fas fa-times"></i></button></div>';

                contenerdorImg.appendChild(elementoImagen);

                contenerdorDeImagenes.appendChild(contenerdorImg);

                contenedor.appendChild(contenerdorVolver);
                contenedor.appendChild(contenerdorDeImagenes);
                body.appendChild(contenedor);

                var tamanoLetraVolver = Math.round(contenerdorVolver.offsetHeight * 0.8);
                contenerdorVolver.style.fontSize = tamanoLetraVolver + "px";
                contenerdorDeImagenes.style.fontSize = tamanoLetraVolver + "px";

                setTimeout(function() {
                    if (elementoImagen.offsetHeight > html.offsetHeight) {
                        var alturaDePantalla = elementoImagen.offsetHeight + contenerdorVolver.offsetHeight + 50;
                        contenedor.style.height = alturaDePantalla + "px";
                    } else {
                        contenedor.style.height = html.offsetHeight + "px";
                    }
                }, 100);
            }

            window.scroll({
                top: 0,
                left: 100,
                behavior: 'smooth'
            });

        }

        function cerrarVisualizarDeArchivo() {
            var contenedor = document.getElementById("contenedorParaVisualizarImagenDelArchivo");
            var body = document.getElementsByTagName("body")[0];
            body.removeChild(contenedor);

            document.getElementById("tabla-archivos-preliminar").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }

        function uuid() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        function eliminarArchivoPreliminarDeLaTabla(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();

            if (document.getElementById("registroDeArchivosPreliminares").innerHTML.trim().length == 0) {
                document.getElementById("registroDeArchivosPreliminares").innerHTML =
                    '<tr id="archivosPreliminarNoDisponibleEnLaTabla">' +
                    '<td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }

            document.getElementById("tabla-archivos-preliminar").parentElement.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest"
            });
        }

        function GuardarArchivoPreliminarAlSeleccionarlo(archivo) {
            var nombreArchivo = archivo.files[0].name;
            var extensionarchivo = nombreArchivo.split('.');
            extensionarchivo = extensionarchivo[extensionarchivo.length - 1];
            var extensionArchivoSinCambio = extensionarchivo;
            var accionesRegistroDeArchivo = "";

            if (document.getElementById("archivosPreliminarNoDisponibleEnLaTabla")) {
                document.getElementById("archivosPreliminarNoDisponibleEnLaTabla").remove();
            }

            var reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                var base64 = reader.result;

                if (extensionarchivo.toLowerCase() == "png" || extensionarchivo.toLowerCase() == "jpeg" || extensionarchivo.toLowerCase() == "gif" || extensionarchivo.toLowerCase() == "jpg" || extensionarchivo.toLowerCase() == "bmp") {
                    extensionarchivo = "IMAGEN";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'imagen\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "mp3" || extensionarchivo.toLowerCase() == "wav" || extensionarchivo.toLowerCase() == "wma" || extensionarchivo.toLowerCase() == "ogg") {
                    extensionarchivo = "ARCHIVO DE AUDIO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "zip" || extensionarchivo.toLowerCase() == "rar" || extensionarchivo.toLowerCase() == "tgz" || extensionarchivo.toLowerCase() == "tar") {
                    extensionarchivo = "ARCHIVO COMPRIMIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pdf") {
                    extensionarchivo = "PDF";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'pdf\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "xlsx" || extensionarchivo.toLowerCase() == "xls") {
                    extensionarchivo = "OFFICE EXCEL";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "pptx" || extensionarchivo.toLowerCase() == "ppt") {
                    extensionarchivo = "OFFICE POWER POINT";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "docx" || extensionarchivo.toLowerCase() == "doc") {
                    extensionarchivo = "OFFICE WORD";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (extensionarchivo.toLowerCase() == "txt") {
                    extensionarchivo = "ARCHIVO DE TEXTO";
                    accionesRegistroDeArchivo =
                        '<a class="dropdown-item" href="#" onclick="visualizarArchivoDeLaordenDeCompra(\'' + base64 + '\',\'txt\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                        '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else if (
                    extensionarchivo.toLowerCase() == "mp4" || extensionarchivo.toLowerCase() == "webm" || extensionarchivo.toLowerCase() == "avi" ||
                    extensionarchivo.toLowerCase() == "asf" || extensionarchivo.toLowerCase() == "dvd" || extensionarchivo.toLowerCase() == "m1v" ||
                    extensionarchivo.toLowerCase() == "movie" || extensionarchivo.toLowerCase() == "mpeg" || extensionarchivo.toLowerCase() == "wn" || extensionarchivo.toLowerCase() == "wmv"
                ) {
                    extensionarchivo = "ARCHIVO DE VIDEO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                } else {
                    extensionarchivo = "ARCHIVO DESCONOCIDO";
                    accionesRegistroDeArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivoPreliminarDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
                }

                document.getElementById("registroDeArchivosPreliminares").innerHTML +=
                    '<tr>' +
                    '<td style="display:none;" class="id_archivo_archivos">' + archivo.id + '</td>' +
                    '<td style="display:none;" class="base_64">' + base64 + '</td>' +
                    '<td class="acciones_archivos">' +
                    '<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">' +
                    accionesRegistroDeArchivo +
                    //'<a class="dropdown-item" href="'+url+'" target="_blank"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>'+
                    //'<a class="dropdown-item" href="#" onclick="eliminarArchivoDeLaTabla(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="nombre_archivos">' + nombreArchivo + '</td>' +
                    '<td class="extension_archivos_sin_formato" style="display:none;" >' + extensionarchivo.toLowerCase() + '</td>' +
                    '<td class="extension_archivos">' + extensionarchivo + '</td>' +
                    '</tr>';

                archivo.style.display = "none";
                var inputFile = document.createElement("input");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("class", "form-control-file");
                inputFile.setAttribute("id", uuid());
                inputFile.setAttribute("onchange", "GuardarArchivoPreliminarAlSeleccionarlo(this)");
                document.getElementById("contenedorDelSeleccionadorDeArchivo").appendChild(inputFile);

            };
            reader.onerror = function(error) {

            };

        }

        let cantidadMaximaDeRegistrosPostulantesReferidos = 0;

        function agregarPostulantesReferidos() {
            let nombrePostulante = document.getElementById("nombrePostulanteReferido").value.trim();
            let cantidadArchivos = 0;
            let listadoDeArchivos = [];

            let filasArchivospreliminar = document.getElementById('tabla-archivos-preliminar').tBodies[0].querySelectorAll("tr");
            filasArchivospreliminar.forEach(filaArchivo => {
                if (filaArchivo.querySelector(".id_archivo_archivos")) {
                    cantidadArchivos++;
                    let idArchivo = filaArchivo.querySelector(".id_archivo_archivos").innerHTML.trim();
                    let nombreArchivo = filaArchivo.querySelector(".nombre_archivos").innerHTML.trim();
                    let extensionArchivo = filaArchivo.querySelector(".extension_archivos").innerHTML.trim();
                    let extensionArchivoSinFormato = filaArchivo.querySelector(".extension_archivos_sin_formato").innerHTML.trim();
                    let base64 = filaArchivo.querySelector(".base_64").innerHTML.trim();

                    archivoObjeto = {
                        idArchivo: idArchivo,
                        nombreArchivo: nombreArchivo,
                        extensionArchivo: extensionArchivo,
                        extensionArchivoSinFormato: extensionArchivoSinFormato,
                        base64:base64
                    };

                    listadoDeArchivos.push(archivoObjeto);
                }
            });

            if (nombrePostulante.length > 0 && cantidadArchivos > 0) {
                let columnaNombreArchivo = '<td class="tabla-nombre-archivo-postulantes" style="padding:0px;"><table style="width: 100%; height: 100%;"><tbody>';
                let columnaExtensionArchivo = '<td class="tabla-extension-archivo-postulantes" style="padding:0px;"><table style="width: 100%; height: 100%;"><tbody>';
                let columnaIdArchivo = '<td class="tabla-id-archivo-postulantes" style="padding:0px; display:none;"><table style="width: 100%; height: 100%;"><tbody>';

                    listadoDeArchivos.forEach(filaArchivo => {
                        if(filaArchivo.extensionArchivoSinFormato.toLowerCase() == "imagen"){
                            columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + filaArchivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + filaArchivo.base64 + '\',\'imagen\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else if(filaArchivo.extensionArchivoSinFormato.toLowerCase() == "pdf"){
                            columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + filaArchivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + filaArchivo.base64 + '\',\'pdf\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else if(filaArchivo.extensionArchivoSinFormato.toLowerCase() == "archivo de texto"){
                            columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo"><div>' + filaArchivo.nombreArchivo + '</div><div><button type="button" class="btn btn-secondary"  onclick="visualizarArchivoDeLaordenDeCompra(\'' + filaArchivo.base64 + '\',\'txt\')"><i class="fas fa-eye"></i> Ver </button></div></td></tr>';
                        }else{
                            columnaNombreArchivo += '<tr><td class="contenedorNombreBotonArchivo">' + filaArchivo.nombreArchivo + '</td></tr>';
                        }

                        columnaExtensionArchivo += '<tr><td>' + filaArchivo.extensionArchivo + '</td></tr>';
                        columnaIdArchivo += '<tr><td>' + filaArchivo.idArchivo + '</td></tr>';
                    });

                    columnaNombreArchivo += '</tbody></table></td>';
                    columnaExtensionArchivo += '</tbody></table></td>';
                    columnaIdArchivo += '</tbody></table></td>';

                    cantidadMaximaDeRegistrosPostulantesReferidos++;    
                    if (document.getElementById("postulantesNoDisponibleEnLaTabla")) {
                        document.getElementById("postulantesNoDisponibleEnLaTabla").remove();
                    }
                    document.getElementById("registroDePostulantes").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td class="tabla-listado-archivos-postulantes" style="display:none;">' + JSON.stringify(listadoDeArchivos) + '</td>' +
                        '<td class="tabla-contador-postulantes">' + cantidadMaximaDeRegistrosPostulantesReferidos + '</td>' +
                        '<td class="tabla-nombre-postulantes">' + nombrePostulante + '</td>' +
                        columnaNombreArchivo +
                        '<td class="tabla-accion-postulantes">' +
                        '<button onclick="habilitarBotonConfirmarEliminaciononPostulantes(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaPostulantes(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-articulo mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';

                    document.getElementById("nombrePostulanteReferido").value = "";
                    document.getElementById("valicacioNombrePostulanteReferido").innerHTML = "";
                    document.getElementById("errorListadoArchivoPreliminar").style.display = "none";  
                    document.getElementById("registroDeArchivosPreliminares").innerHTML=
                    '<tr id="archivosPreliminarNoDisponibleEnLaTabla">'+
                        '<td colspan="3" class="text-center">No hay archivos disponibles en la tabla</td>'+
                    '</tr>';
            } else {
                if (nombrePostulante.length > 0) {
                    document.getElementById("nombrePostulanteReferido").setAttribute("class", "form-control is-valid");
                    document.getElementById("valicacioNombrePostulanteReferido").innerHTML = "";
                } else {
                    document.getElementById("nombrePostulanteReferido").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacioNombrePostulanteReferido").innerHTML = "El campo nombre del postulante es obligatorio";
                }

                if (cantidadArchivos > 0) {
                    document.getElementById("errorListadoArchivoPreliminar").style.display = "none";
                } else {
                    document.getElementById("errorListadoArchivoPreliminar").style.display = "block";
                }
            }
        }

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

        function habilitarBotonConfirmarEliminaciononPostulantes(boton) {

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

        }

        function eliminarFilaPostulantes(boton) {
            let elementoFila = boton.parentElement.parentElement;
            elementoFila.remove();
            cantidadMaximaDeRegistrosPostulantesReferidos = 0;
            let filas = document.getElementById('tabla-postulantes').tBodies[0].querySelectorAll("tr");
            if (filas.length > 0) {
                filas.forEach(elemento => {
                    cantidadMaximaDeRegistrosPostulantesReferidos++;
                    elemento.querySelector(".tabla-contador-postulantes").innerHTML = cantidadMaximaDeRegistrosPostulantesReferidos;
                });
            } else {
                document.getElementById("registroDePostulantes").innerHTML =
                    '<tr id="postulantesNoDisponibleEnLaTabla">' +
                    '<td colspan="5" class="text-center">No hay postulantes referidos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }
    </script>

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

            let filas = document.getElementById('tabla-cargos-solicitados').tBodies[0].querySelectorAll("tr");
            let listadoDeCargos = [];
            filas.forEach(elementoPadre => {
                if (elementoPadre.querySelector(".tabla-contador-cargos")) {
                    let contadorFila = elementoPadre.querySelector(".tabla-contador-cargos").innerHTML;
                    let nombreCargo = elementoPadre.querySelector(".tabla-nombre-cargo-cargos").innerHTML;
                    let numeroVacantes = elementoPadre.querySelector(".tabla-numero-vacantes-cargos").innerHTML;
                    let faena = elementoPadre.querySelector(".tabla-nombre-faena-cargos").innerHTML;
                    let areaTrabajo = elementoPadre.querySelector(".tabla-area-trabajo-cargos").innerHTML;
                    let tipoTurno = elementoPadre.querySelector(".tabla-tipo-turno-cargos").innerHTML;
                    let horario = elementoPadre.querySelector(".tabla-horario-cargos").innerHTML;
                    let centroCosto = elementoPadre.querySelector(".tabla-nombre-centro-costo-cargos").innerHTML;
                    let nombreSupervisorDirecto = elementoPadre.querySelector(".tabla-nombre-supervisor-directo-cargos").innerHTML;
                    let correoSupervisorDirecto = elementoPadre.querySelector(".tabla-correo-supervisor-directo-cargos").innerHTML;
                    let supervisaCargo = elementoPadre.querySelector(".tabla-supervisa-cargo-cargos").innerHTML;
                    let nivelAcademica = elementoPadre.querySelector(".tabla-nivel-academico-cargos").innerHTML;
                    let profesion = elementoPadre.querySelector(".tabla-profesion-cargos").innerHTML;
                    let experienciaLaboralTexto = elementoPadre.querySelector(".tabla-experiencia-laboral-texto-cargos").innerHTML;
                    let experienciaLaboralNumero = elementoPadre.querySelector(".tabla-experiencia-laboral-numero-cargos").innerHTML;
                    let sueldoBrutoTexto = elementoPadre.querySelector(".tabla-sueldo-bruto-texto-cargos").innerHTML;
                    let sueldoBrutoNumero = elementoPadre.querySelector(".tabla-sueldo-bruto-numero-cargos").innerHTML;
                    let fechaIngreso = elementoPadre.querySelector(".tabla-fecha-ingreso-cargos").innerHTML;
                    let tipoVehiculo = elementoPadre.querySelector(".tabla-tipo-vehiculo-cargos").innerHTML;
                    let tablaMaquinaria = elementoPadre.querySelector(".tabla-maquinaria-cargos").innerHTML;
                    let listadoConocimientos = elementoPadre.querySelector(".tabla-listado-conocimientos-cargos").innerHTML;
                    let listadoBonos = elementoPadre.querySelector(".tabla-listado-bonos-cargos").innerHTML;
                    let listadoPostulantes = elementoPadre.querySelector(".tabla-listado-postulantes-cargos").innerHTML;
                    let listadoEvaluaciones = elementoPadre.querySelector(".tabla-evaluaciones-cargos").innerHTML;
                    let idFaena = elementoPadre.querySelector(".tabla-id-faena-cargos").innerHTML;
                    let idCentroCosto = elementoPadre.querySelector(".tabla-id-centro-costo-cargos").innerHTML;
                    let observacion = elementoPadre.querySelector(".tabla-observacion-cargos").innerHTML;

                    var cargoSolicitado = {
                        contadorFila: contadorFila,
                        nombreCargo: nombreCargo,
                        numeroVacantes: numeroVacantes,
                        faena: faena,
                        areaTrabajo: areaTrabajo,
                        tipoTurno: tipoTurno,
                        horario:horario,
                        centroCosto: centroCosto,
                        nombreSupervisorDirecto: nombreSupervisorDirecto,
                        correoSupervisorDirecto: correoSupervisorDirecto,
                        supervisaCargo: supervisaCargo,
                        nivelAcademica: nivelAcademica,
                        profesion: profesion,
                        experienciaLaboralTexto: experienciaLaboralTexto,
                        experienciaLaboralNumero: experienciaLaboralNumero,
                        sueldoBrutoTexto: sueldoBrutoTexto,
                        sueldoBrutoNumero: sueldoBrutoNumero,
                        fechaIngreso: fechaIngreso,
                        tipoVehiculo: tipoVehiculo,
                        tablaMaquinaria: tablaMaquinaria,
                        listadoConocimientos: listadoConocimientos,
                        listadoBonos: listadoBonos,
                        listadoPostulantes: listadoPostulantes,
                        listadoEvaluaciones: listadoEvaluaciones,
                        idFaena: idFaena,
                        idCentroCosto: idCentroCosto,
                        observacion: observacion
                    }
                    listadoDeCargos.push(cargoSolicitado);
                }
            });

            if (listadoDeCargos.length > 0) {
                document.getElementById("errorTablaCargosSolicitados").style.display = "none";
                document.getElementById("errorTablaCargosSolicitados").innerHTML = "";
                listadoDeCargos = JSON.stringify(listadoDeCargos);
                let formData = new FormData();
                formData.append('listado_cargos', listadoDeCargos);
                formData.append('centro_costo', document.getElementById("centroCostoGeneral").value);
                let totalDeArchivos = document.getElementsByClassName("form-control-file").length;
                let archivosPostulantes = document.getElementsByClassName("form-control-file");
                for (let i = 0; i < totalDeArchivos; i++) {
                    if (archivosPostulantes[i].files.length > 0) {
                        formData.append(archivosPostulantes[i].id, archivosPostulantes[i].files[0]);
                    }
                }
                let csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('solicitud-reclutamiento.store') }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                                icon: 'success',
                                title: '¡Creado!',
                                text: 'La solicitud de reclutamiento se genero 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("errorTablaCargosSolicitados").style.display = "block";
                document.getElementById("errorTablaCargosSolicitados").innerHTML = "No hay cargos solicitados agregados, para registrar una solicitud de reclutamiento debe tener al menos un cargo solicitado agregado";
                document.getElementById("custom-tabs-one-profile-tab").click();
            }
        }
    </script>
@stop