@extends('adminlte::page')

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

@section('title', 'Intranet | Ficha Entrevista Tecnica')

@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-primary 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-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Ficha Entrevista Tecnica</a>
                            </li>
                        </ul>
                    </div>

                    <form 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">Correlativo Solicitud De Reclutamiento</label>
                                            <input type="text" class="form-control" name="correlativo" value="{{ old('correlativo', $postulante->cargo->solicitudDeReclutamiento->correlativo) }}" readonly="true">
                                        </div>

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

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

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

                                        <div class="form-group">
                                            <label for="rut_entrevistador">Rut Entrevistador</label>
                                            <input type="text" class="form-control" id="rutEntrevistador" name="rut_entrevistador" value="{{ old('rut_entrevistador') }}" onblur="cambiarCampoRutHaTexto(this)" onkeypress="return validarCampoRutEntrevistador(event)" onfocus="cambiarCampoRutHaNumero(this)">
                                            <div class="invalid-feedback" id="valicacionCampoRutEntrevistador">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="nombreEntrevistador">Nombre Entrevistador</label>
                                            <input type="text" class="form-control" id="nombreEntrevistador" name="nombre_entrevistador" value="{{ old('nombre_entrevistador') }}">
                                            <div class="invalid-feedback" id="valicacionCampoNombreEntrevistador">

                                            </div>
                                        </div>

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

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

                                        </div>
                                    </div>

                                    <input type="hidden" id="idFicha" value="{{ $fichaEntrevistaTecnica->id }}">
                                </div>

                                <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                    <div class="dt-responsive table-responsive">
                                        @php
                                            $cantidadColSpanSeccion = 1;
                                        @endphp
                                        <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-postulantes">
                                            <thead>
                                                <tr role="row">
                                                    <th style="background-color: #007bff; color:white;">Aspectos a Evaluar</th>
                                                    @foreach ($puntajesPermitidos as $puntaje)
                                                        @php
                                                            $cantidadColSpanSeccion = $cantidadColSpanSeccion + 2;
                                                        @endphp
                                                        <th colspan="2" style="background-color: #007bff; color:white;">{{ $puntaje['puntaje_opcion'] }}ptos</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($fichaEntrevistaTecnica->seccionesFichaEntrevistaTecnicaOrdenanos as $seccion)
                                                    <tr>
                                                        <th colspan="{{ $cantidadColSpanSeccion }}" class="text-center" style="background-color: #007bff; color:white;">{{ $seccion->seccion }} {{ $seccion->porcentaje }}%</th>
                                                    </tr>
                                                    @foreach ($seccion->preguntasFichaEntrevistaTecnicaOrdenanos as $pregunta)
                                                        <tr class="fila-pregunta">
                                                            <td>{{ $pregunta->pregunta }}</td>
                                                            @foreach ($puntajesPermitidos as $puntaje)
                                                                @php
                                                                    $idOpcion = '';
                                                                    $valorOpcion = '';
                                                                    $valorPuntajeOpcion = 0;
                                                                    $opcionTieneContenidoEnEstePuntaje = false;
                                                                    $puntajeMaximo = 0;
                                                                    foreach ($pregunta->opcionesFichaEntrevistaTecnicaOrdenanos as $opcion) {
                                                                        if ($puntaje['puntaje_opcion'] == $opcion->puntaje) {
                                                                            $idOpcion = $opcion->id;
                                                                            $valorOpcion = $opcion->opcion;
                                                                            $valorPuntajeOpcion = $opcion->puntaje;
                                                                            $opcionTieneContenidoEnEstePuntaje = true;
                                                                        }
                                                                    
                                                                        if ($opcion->puntaje > $puntajeMaximo) {
                                                                            $puntajeMaximo = $opcion->puntaje;
                                                                        }
                                                                    }
                                                                @endphp

                                                                @if ($opcionTieneContenidoEnEstePuntaje == true)
                                                                    <td>{{ $valorOpcion }}</td>
                                                                    <td onclick="establecerPuntaje({{ $seccion->id }},{{ $pregunta->id }},{{ $idOpcion }},{{ $valorPuntajeOpcion }},{{ $puntajeMaximo }},{{ $pregunta->porcentaje }},this,this.parentElement)" class="text-center celda-puntaje" style="width: 80px; background-color: #007bff; cursor:pointer;"></td>
                                                                @else
                                                                    <td colspan="2"></td>
                                                                @endif
                                                            @endforeach
                                                        </tr>
                                                    @endforeach

                                                    <tr class="fila-total-porcentaje-seccion">
                                                        <td colspan="{{ $cantidadColSpanSeccion - 1 }}">Total</td>
                                                        <td class="porcentaje-seccion" style="display:none;" id="porcentaje-seccion-{{ $seccion->id }}">{{ $seccion->porcentaje }}</td>
                                                        <td class="total-porcentaje-numero" style="display:none;" id="total-porcentaje-numero-{{ $seccion->id }}"></td>
                                                        <td id="total-porcentaje-{{ $seccion->id }}" style="width: 80px; background-color: #007bff;color:white; font-weight:700;" class="text-center">0%</td>
                                                    </tr>
                                                @endforeach
                                                <tr>
                                                    <td colspan="{{ $cantidadColSpanSeccion - 3 }}">Total Final</td>
                                                    <td colspan="1" id="total-evaluacion" style="width: 80px; background-color: #dc3545;color:white; font-weight:700;" class="text-center">0%</td>
                                                    <td colspan="2" id="total-evaluacion-estimacion" style="width: 80px; background-color: #dc3545;color:white; font-weight:700;" class="text-center">Muy Deficiente</td>
                                                    <td style="display:none;" id="total-evaluacion-numero">0</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="contenedor-estimaciones">
                                        <table class="table table-bordered" role="grid" aria-describedby="base-style_info">
                                            <thead>
                                                <tr>
                                                    <th colspan="2" style="background-color: #007bff; color:white;">IDENTIFICACIÓN DE ESTIMACIONES</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td style="color: red;">0% - 55 %</td>
                                                    <td>Muy Deficiente</td>
                                                </tr>
                                                <tr>
                                                    <td style="color: red;">56%- 66%</td>
                                                    <td>Deficiente</td>
                                                </tr>
                                                <tr>
                                                    <td style="color: red;">67% - 77%</td>
                                                    <td>Regular</td>
                                                </tr>
                                                <tr>
                                                    <td style="color: red;">78% - 88%</td>
                                                    <td>Satisfactorio</td>
                                                </tr>
                                                <tr>
                                                    <td style="color: red;">89% y 100%</td>
                                                    <td>Muy Satisfactorio</td>
                                                </tr>
                                            </tbody>
                                        </table>

                                    <div style="padding: 10px;">
                                        <p><span style="font-weight: 700; color:red;">Importante: </span>Si el postulante obtiene un porcentaje en la ficha entrevista técnica que es muy deficiente o deficiente, se descartara automáticamente.</p>
                                        <div id="contenerdorDeCoordinacion">
                                            <div class="form-group">
                                                <label for="coordinacionDocumentos">Coordinación De Documentación/Actividades</label>
                                                <input type="text" class="form-control" id="coordinacionDocumentos" name="coordinacion_documentos" value="{{ old('coordinacion_documentos','No') }}" readonly="true">
                                                <div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeRegistrarRespuesta" onclick="registrarRespuestaDeFichaEntrevistaTecnica()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Registrar Respuestas</button>
                            @if (auth()->check())
                                <a href="{{ route('postulante.show', $postulante->cargo) }}" role="button" id="botonVolver" class="btn btn-secondary mt-1"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                            @else
                                @if ($link)
                                <a href="{{ $link->link }}" role="button" class="btn btn-secondary mt-1" id="botonVolver"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                                @endif
                            @endif
                        </div>
                    </form>

                </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') }}">
    <style>
        .contenedor-estimaciones {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 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>
        
    </script>

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

        function cambiarCampoRutHaNumero(campo) {
            campo.setAttribute("maxlength", "9");
            switch (campo.value.length) {
                case 2:
                    var rutNumerico = campo.value.slice(1, 2);
                    campo.value = rutNumerico;
                    break;
                case 3:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 3);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 4:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 4);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 5:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(4, 5);
                    campo.value = rutNumerico1 + rutNumerico2;
                    break;
                case 7:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(6, 7);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 8:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(7, 8);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 9:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(4, 7);
                    var rutNumerico3 = campo.value.slice(8, 9);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3;
                    break;
                case 11:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(6, 9);
                    var rutNumerico4 = campo.value.slice(10, 11);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3 + rutNumerico4;
                    break;
                case 12:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(7, 10);
                    var rutNumerico4 = campo.value.slice(11, 12);
                    campo.value = rutNumerico1 + rutNumerico2 + rutNumerico3 + rutNumerico4;
                    break;
            }
        }

        function cambiarCampoRutHaTexto(campo) {
            campo.setAttribute("maxlength", "12");
            switch (campo.value.length) {
                case 1:
                    var rutNumerico = campo.value;
                    campo.value = "-" + rutNumerico;
                    break;
                case 2:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 2);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 3:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 3);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 4:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(3, 4);
                    campo.value = rutNumerico1 + "-" + rutNumerico2;
                    break;
                case 5:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 4);
                    var rutNumerico3 = campo.value.slice(4, 5);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 6:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(5, 6);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 7:
                    var rutNumerico1 = campo.value.slice(0, 3);
                    var rutNumerico2 = campo.value.slice(3, 6);
                    var rutNumerico3 = campo.value.slice(6, 7);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "-" + rutNumerico3;
                    break;
                case 8:
                    var rutNumerico1 = campo.value.slice(0, 1);
                    var rutNumerico2 = campo.value.slice(1, 4);
                    var rutNumerico3 = campo.value.slice(4, 7);
                    var rutNumerico4 = campo.value.slice(7, 8);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "." + rutNumerico3 + "-" + rutNumerico4;
                    break;
                case 9:
                    var rutNumerico1 = campo.value.slice(0, 2);
                    var rutNumerico2 = campo.value.slice(2, 5);
                    var rutNumerico3 = campo.value.slice(5, 8);
                    var rutNumerico4 = campo.value.slice(8, 9);
                    campo.value = rutNumerico1 + "." + rutNumerico2 + "." + rutNumerico3 + "-" + rutNumerico4;
                    break;
            }
        }

        function validarCampoRutPostulante(event) {
            var campoRut = document.getElementById("rutPostulante");
            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 && event.key != "k" && event.key != "K") {
                return false;
            } else {
                if (campoRut.value.length > 8) {
                    return false;
                } else {
                    return true;
                }
            }
        }

        function validarCampoRutEntrevistador(event) {
            var campoRut = document.getElementById("rutEntrevistador");
            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 && event.key != "k" && event.key != "K") {
                return false;
            } else {
                if (campoRut.value.length > 8) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    </script>

    <script>
        let listadoValoresSeleccionRespuestaPostulante = [];
        let cantidadSeccion = {{ count($fichaEntrevistaTecnica->seccionesFichaEntrevistaTecnicaOrdenanos) }};

        function establecerPuntaje(idSeccion, idPregunta, idOpcion, puntaje, puntajeMaximo, porcentajePregunta, columna, fila) {
            if (listadoValoresSeleccionRespuestaPostulante.length > 0) {
                let celdasPuntaje = fila.querySelectorAll(".celda-puntaje");
                for (let i = 0; i < celdasPuntaje.length; i++) {
                    celdasPuntaje[i].innerHTML = "";
                }

                let indexListado = 0;
                let existeElementoHaCambiar = false;
                listadoValoresSeleccionRespuestaPostulante.forEach(elemento => {
                    if (elemento.idPregunta == idPregunta) {
                        existeElementoHaCambiar = true;
                        listadoValoresSeleccionRespuestaPostulante[indexListado].idOpcion = idOpcion;
                        listadoValoresSeleccionRespuestaPostulante[indexListado].puntaje = puntaje;
                    }
                    indexListado++;
                });

                if (existeElementoHaCambiar == false) {
                    let valores = {
                        idSeccion: idSeccion,
                        idPregunta: idPregunta,
                        porcentajePregunta: porcentajePregunta,
                        idOpcion: idOpcion,
                        puntaje: puntaje,
                        puntajeMaximo: puntajeMaximo
                    };

                    listadoValoresSeleccionRespuestaPostulante.push(valores);
                }

                let totalPorcentajeSeccion = 0;
                listadoValoresSeleccionRespuestaPostulante.forEach(elemento => {
                    if (elemento.idSeccion == idSeccion) {
                        let total = elemento.porcentajePregunta / elemento.puntajeMaximo;
                        total = total * elemento.puntaje;
                        total = Math.round(total);
                        totalPorcentajeSeccion += total;
                    }
                });
                document.getElementById('total-porcentaje-numero-' + idSeccion).innerHTML = totalPorcentajeSeccion;
                document.getElementById('total-porcentaje-' + idSeccion).innerHTML = totalPorcentajeSeccion + "%";
            } else {
                let celdasPuntaje = fila.querySelectorAll(".celda-puntaje");
                for (let i = 0; i < celdasPuntaje.length; i++) {
                    celdasPuntaje[i].innerHTML = "";
                }

                let valores = {
                    idSeccion: idSeccion,
                    idPregunta: idPregunta,
                    porcentajePregunta: porcentajePregunta,
                    idOpcion: idOpcion,
                    puntaje: puntaje,
                    puntajeMaximo: puntajeMaximo
                };

                listadoValoresSeleccionRespuestaPostulante.push(valores);

                let totalPorcentajeSeccion = 0;
                listadoValoresSeleccionRespuestaPostulante.forEach(elemento => {
                    if (elemento.idSeccion == idSeccion) {
                        let total = elemento.porcentajePregunta / elemento.puntajeMaximo;
                        total = total * elemento.puntaje;
                        total = Math.round(total);
                        totalPorcentajeSeccion += total;
                    }
                });
                document.getElementById('total-porcentaje-numero-' + idSeccion).innerHTML = totalPorcentajeSeccion;
                document.getElementById('total-porcentaje-' + idSeccion).innerHTML = totalPorcentajeSeccion + "%";
            }
            columna.innerHTML = '<h2 style="color:white;">' + puntaje + '</h2>';

            let filas = document.getElementById('tabla-postulantes').tBodies[0].querySelectorAll("tr.fila-total-porcentaje-seccion");
            let totalEvaluacion = 0;
            filas.forEach(elementoPadre => {
                let porcentajeSeccion = "0."+elementoPadre.querySelector(".porcentaje-seccion").innerHTML.trim();
                let totalPorcentajeSeccion = elementoPadre.querySelector(".total-porcentaje-numero").innerHTML.trim();
                let total=0;

                if(totalPorcentajeSeccion.length>0){
                    total = parseInt(totalPorcentajeSeccion) * parseFloat(porcentajeSeccion);
                    total = Math.round(total);
                    totalEvaluacion+=total;
                }else{
                    total=0;
                    totalEvaluacion+=total;
                }
            });

            if(totalEvaluacion>=0 && totalEvaluacion<=55){
                document.getElementById("total-evaluacion").style.backgroundColor="#dc3545";
                document.getElementById("total-evaluacion-estimacion").style.backgroundColor="#dc3545";
                document.getElementById("total-evaluacion-estimacion").innerHTML="Muy Deficiente";
                document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
                document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;
                document.getElementById("contenerdorDeCoordinacion").innerHTML=
                '<div class="form-group">'+
                    '<label for="coordinacionDocumentos">Coordinación De Documentación/Actividades</label>'+
                    '<input type="text" class="form-control" id="coordinacionDocumentos" name="coordinacion_documentos" value="{{ old('coordinacion_documentos','No') }}" readonly="true">'+
                    '<div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>'+
                '</div>';
            }else if(totalEvaluacion>=56 && totalEvaluacion<=66){
                document.getElementById("total-evaluacion").style.backgroundColor="#dc3545";
                document.getElementById("total-evaluacion-estimacion").style.backgroundColor="#dc3545";
                document.getElementById("total-evaluacion-estimacion").innerHTML="Deficiente";
                document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
                document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;
                document.getElementById("contenerdorDeCoordinacion").innerHTML=
                '<div class="form-group">'+
                    '<label for="coordinacionDocumentos">Coordinación De Documentación/Actividades</label>'+
                    '<input type="text" class="form-control" id="coordinacionDocumentos" name="coordinacion_documentos" value="{{ old('coordinacion_documentos','No') }}" readonly="true">'+
                    '<div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>'+
                '</div>';
            }else if(totalEvaluacion>=67 && totalEvaluacion<=77){
                document.getElementById("total-evaluacion").style.backgroundColor="#ffc107";
                document.getElementById("total-evaluacion-estimacion").style.backgroundColor="#ffc107";
                document.getElementById("total-evaluacion-estimacion").innerHTML="Regular";
                document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
                document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;
                document.getElementById("contenerdorDeCoordinacion").innerHTML=
                '<div class="form-group">'+
                    '<label>Coordinación De Documentación/Actividades</label>'+
                    '<select class="form-control listaDespegableConBuscador" id="coordinacionDocumentos" name="coordinacion_documentos">'+
                        '<option value="">--Seleccionar Coordinación De Documentación/Actividades--</option>'+
                        '<option value="Si">Si</option>'+
                        '<option value="No">No</option>'+
                    '</select>'+
                    '<div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>'+
                '</div>';

                $('#coordinacionDocumentos').selectpicker({
                    dropupAuto: false
                });
            }else if(totalEvaluacion>=78 && totalEvaluacion<=88){
                document.getElementById("total-evaluacion").style.backgroundColor="#28a745";
                document.getElementById("total-evaluacion-estimacion").style.backgroundColor="#28a745";
                document.getElementById("total-evaluacion-estimacion").innerHTML="Satisfactorio";
                document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
                document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;
                document.getElementById("contenerdorDeCoordinacion").innerHTML=
                '<div class="form-group">'+
                    '<label>Coordinación De Documentación/Actividades</label>'+
                    '<select class="form-control listaDespegableConBuscador" id="coordinacionDocumentos" name="coordinacion_documentos">'+
                        '<option value="">--Seleccionar Coordinación De Documentación/Actividades--</option>'+
                        '<option value="Si">Si</option>'+
                        '<option value="No">No</option>'+
                    '</select>'+
                    '<div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>'+
                '</div>';

                $('#coordinacionDocumentos').selectpicker({
                    dropupAuto: false
                });
            }else if(totalEvaluacion>=89 && totalEvaluacion<=100){
                document.getElementById("total-evaluacion").style.backgroundColor="#28a745";
                document.getElementById("total-evaluacion-estimacion").style.backgroundColor="#28a745";
                document.getElementById("total-evaluacion-estimacion").innerHTML="Muy Satisfactorio";
                document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
                document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;
                document.getElementById("contenerdorDeCoordinacion").innerHTML=
                '<div class="form-group">'+
                    '<label>Coordinación De Documentación/Actividades</label>'+
                    '<select class="form-control listaDespegableConBuscador" id="coordinacionDocumentos" name="coordinacion_documentos">'+
                        '<option value="">--Seleccionar Coordinación De Documentación/Actividades--</option>'+
                        '<option value="Si">Si</option>'+
                        '<option value="No">No</option>'+
                    '</select>'+
                    '<div class="invalid-feedback" id="valicacionCampoCoordinacionDocumentos"></div>'+
                '</div>';

                $('#coordinacionDocumentos').selectpicker({
                    dropupAuto: false
                });
            }

            /*let totalEvaluacion = 0;
            document.querySelectorAll(".total-porcentaje-numero").forEach(elemento => {
                if (elemento.innerHTML.trim() != "") {
                    totalEvaluacion += parseInt(elemento.innerHTML);
                }
            });

            totalEvaluacion = totalEvaluacion / cantidadSeccion;
            totalEvaluacion = Math.round(totalEvaluacion);
            document.getElementById("total-evaluacion").innerHTML = totalEvaluacion + "%";
            document.getElementById("total-evaluacion-numero").innerHTML = totalEvaluacion;*/
        }

        function validarCamposGeneralesFichaEntrevistaTecnica() {
            let camposSinErrores = true;
            let errorRedirecionTab="";

            if (document.getElementById("rutEntrevistador").value.trim().length > 0) {
                if (document.getElementById("rutEntrevistador").value.trim().length < 11) {
                    errorRedirecionTab="custom-tabs-one-messages-tab";
                    camposSinErrores = false;
                    document.getElementById("rutEntrevistador").setAttribute("class", "form-control is-invalid");
                    document.getElementById("valicacionCampoRutEntrevistador").innerHTML = "El campo rut del entrevistador debe contener al menos 11 caracteres.";
                } else {
                    let rutEntrevistador = document.getElementById("rutEntrevistador").value.trim().replace(".", "");
                    rutEntrevistador = rutEntrevistador.trim().replace(".", "");
                    rutEntrevistador = rutEntrevistador.split("-");
                    let rutSinDigitoVerificador = rutEntrevistador[0];
                    let digitoVerificador = rutEntrevistador[1];
                    if (digitoVerificador == "K" || digitoVerificador == "k") {
                        digitoVerificador = digitoVerificador.toUpperCase()
                    }

                    let digitoVerificadorCalculado = getDV(parseInt(rutSinDigitoVerificador));

                    if (digitoVerificadorCalculado == digitoVerificador) {
                        document.getElementById("rutEntrevistador").setAttribute("class", "form-control is-valid");
                        document.getElementById("valicacionCampoRutEntrevistador").innerHTML = "";
                    } else {
                        errorRedirecionTab="custom-tabs-one-messages-tab";
                        camposSinErrores = false;
                        document.getElementById("rutEntrevistador").setAttribute("class", "form-control is-invalid");
                        document.getElementById("valicacionCampoRutEntrevistador").innerHTML = "El campo rut del entrevistador es invalido.";
                    }
                }
            } else {
                errorRedirecionTab="custom-tabs-one-messages-tab";
                camposSinErrores = false;
                document.getElementById("rutEntrevistador").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoRutEntrevistador").innerHTML = "El campo rut del entrevistador es obligatorio";
            }

            if (document.getElementById("nombreEntrevistador").value.trim().length > 0) {
                document.getElementById("nombreEntrevistador").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoNombreEntrevistador").innerHTML = "";
            } else {
                errorRedirecionTab="custom-tabs-one-messages-tab";
                camposSinErrores = false;
                document.getElementById("nombreEntrevistador").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoNombreEntrevistador").innerHTML = "El campo nombre del entrevistador es obligatorio";
            }

            if (document.getElementById("coordinacionDocumentos").value.trim().length > 0) {
                document.getElementById("coordinacionDocumentos").classList.remove('input-error-icon');
                document.getElementById("coordinacionDocumentos").classList.add('input-success-icon');
                document.getElementById("valicacionCampoCoordinacionDocumentos").innerHTML = "";
                document.getElementById("valicacionCampoCoordinacionDocumentos").style.display = "none";
            } else {
                errorRedirecionTab="custom-tabs-one-profile-tab";
                camposSinErrores = false;
                document.getElementById("coordinacionDocumentos").classList.remove('input-success-icon');
                document.getElementById("coordinacionDocumentos").classList.add('input-error-icon');
                document.getElementById("valicacionCampoCoordinacionDocumentos").innerHTML = "El campo coordinación de documentación/actividades es obligatorio";
                document.getElementById("valicacionCampoCoordinacionDocumentos").style.display = "block";
            }

            if(camposSinErrores==false && errorRedirecionTab!=""){
                document.getElementById(errorRedirecionTab).click();
            }

            return camposSinErrores;
        }

        let urlInicioSesion='{{url("/")}}';
        function registrarRespuestaDeFichaEntrevistaTecnica() {
            document.getElementById("botonDeRegistrarRespuesta").setAttribute("disabled", true);
            generarLoading('{{ asset('img/logo.png') }}')
            let error = validarCamposGeneralesFichaEntrevistaTecnica();
            if (error == true) {
                let filasPreguntas = document.querySelectorAll(".fila-pregunta");
                let faltaPuntajePorCompletar = false;
                filasPreguntas.forEach(elemento => {
                    let celdasPuntajes = elemento.querySelectorAll(".celda-puntaje")
                    let celdaConPuntaje = false;
                    celdasPuntajes.forEach(celda => {
                        if (celda.innerHTML.trim() != "") {
                            celdaConPuntaje = true;
                        }
                    });

                    if (celdaConPuntaje == false) {
                        faltaPuntajePorCompletar = true;
                    }
                });

                if (faltaPuntajePorCompletar == true) {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Falta Campos Por Completar!',
                        text: 'no puede registrar las respuesta de la ficha, falta campos que debe completar',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    });

                    document.getElementById("botonDeRegistrarRespuesta").removeAttribute("disabled");
                    eliminarLoading()
                    document.getElementById("custom-tabs-one-profile-tab").click();
                } else {
                    var formData = new FormData();
                    formData.append('id_ficha', document.getElementById("idFicha").value);
                    formData.append('rut_postulante', document.getElementById("rutPostulante").value);
                    formData.append('nombre_entrevistador', document.getElementById("nombreEntrevistador").value);
                    formData.append('rut_entrevistador', document.getElementById("rutEntrevistador").value);
                    formData.append('coordinacion_documentos', document.getElementById("coordinacionDocumentos").value);
                    formData.append('observacion', document.getElementById("observacion").value);
                    formData.append('listado_valores_respuesta_ficha', JSON.stringify(listadoValoresSeleccionRespuestaPostulante));
                    formData.append('porcentaje', document.getElementById("total-evaluacion-numero").innerHTML.trim());
                    formData.append('estimacion', document.getElementById("total-evaluacion-estimacion").innerHTML.trim());
                    var csrf = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('ficha-entrevista-tecnica.store-responder-ficha', $postulante) }}',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            document.getElementById("botonDeRegistrarRespuesta").removeAttribute("disabled");
                            eliminarLoading()

                            if(data.estado=="inicio sesion"){
                                if(data.estado_postulante=="Descartado"){
                                    Swal.fire({
                                    icon: 'warning',
                                    title: '¡No Aprobado!',
                                    text: 'El postulante no obtuvo el porcentaje para seguir con el proceso de postulación, por lo que queda descartado automáticamente',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        location.href=urlInicioSesion;
                                    })
                                    .catch((error) => {
                                        location.href=urlInicioSesion;
                                    }); 
                                }else{
                                    Swal.fire({
                                    icon: 'success',
                                    title: '¡Exito!',
                                    text: 'La ficha fue respondida de forma exitosa y el postulante obtuvo el porcentaje necesario para continuar con el proceso de postulación',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        location.href=urlInicioSesion;
                                    })
                                    .catch((error) => {
                                        location.href=urlInicioSesion;
                                    });    
                                }
                            }else{
                                if(data.estado_postulante=="Descartado"){
                                    Swal.fire({
                                        icon: 'warning',
                                        title: '¡No Aprobado!',
                                        text: 'El postulante no obtuvo el porcentaje para seguir con el proceso de postulación, por lo que queda descartado automáticamente',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        document.getElementById("botonVolver").click();
                                    })
                                    .catch((error) => {
                                        document.getElementById("botonVolver").click();
                                    });
                                }else{
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Exito!',
                                        text: 'La ficha fue respondida de forma exitosa y el postulante obtuvo el porcentaje necesario para continuar con el proceso de postulacion',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        document.getElementById("botonVolver").click();
                                    })
                                    .catch((error) => {
                                        document.getElementById("botonVolver").click();
                                    });
                                }
                            }
                        },
                        error: function(data) {
                            console.log(data)
                            document.getElementById("botonDeRegistrarRespuesta").removeAttribute("disabled");
                            eliminarLoading()
                        }
                    })
                }
            } else {
                document.getElementById("botonDeRegistrarRespuesta").removeAttribute("disabled");
                eliminarLoading()
            }
        }
    </script>
@stop