@extends('adminlte::page')

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

@section('title', 'Intranet | Editar 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">
                    <div class="card-header">
                        <div class="form-group">
                            <label for="cargo">Nombre Ficha</label>
                            <input type="text" class="form-control" value="{{ $ficha->nombre }}" onchange="cambiarValorNombreFicha(this)" id="nombre_ficha">
                            <div class="invalid-feedback" id="valicacionCampoNombreFicha"></div>
                        </div>
                        <input type="hidden" id="idFicha" value="{{ $ficha->id }}">
                        <input type="hidden" id="listadoPreguntasEliminadas" value="[]">
                        <input type="hidden" id="listadoOpcionesEliminadas" value="[]">
                    </div>

                    <div class="card-body">
                        <button type="button" class="btn btn-success" id="botonDeCreacionSeccion" onclick="crearSeccion()"><i class="fas fa-grip-lines"></i> Crear Sección</button>
                        <button type="button" class="btn btn-aspen" onclick="editarFicha()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Editar Ficha </button>
                        <a href="{{ route('ficha-entrevista-tecnica.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                    </div>
                </div>

                <div class="alert alert-danger" role="alert" style="display: none;" id="error-porcentaje">La suma total de los porcentaje de las secciones no deben superar el 100% para registrar la ficha</div>
                <div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-seccion">La ficha debe tener obligatoriamente al menos una sección para registrar la ficha</div>

                <div id="contenedorDeSecciones">
                    @php
                        $indexSeccion = 0;
                    @endphp
                    @foreach ($ficha->seccionesFichaEntrevistaTecnicaOrdenanos as $seccion)
                        @php
                            $indexSeccion++;
                        @endphp

                        <div class="card card-section">
                            <div class="card-header">
                                <h5 class="card-title m-0 titulo-seccion" style="font-weight: 700; font-size: 20px;">Sección {{ $indexSeccion }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                    <div class="form-group">
                                        <label for="cargo">Nombre Sección</label>
                                        <input type="text" class="form-control" value="{{ $seccion->seccion }}" onchange="cambiarValorNombreSeccion(this)" id="nombre_seccion_{{ $indexSeccion }}">
                                        <div class="invalid-feedback" id="valicacionCampoNombreSeccion{{ $indexSeccion }}"></div>
                                    </div>
                                    <div class="form-group">
                                        <label for="cargo">Porcentaje</label>
                                        <input type="number" min="0" max="100" class="form-control" value="{{ $seccion->porcentaje }}" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_seccion_{{ $indexSeccion }}" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">
                                        <div class="invalid-feedback" id="valicacionCampoPorcentajeSeccion{{ $indexSeccion }}"></div>
                                    </div>
                                    <input type="hidden" class="idSeccion" id="idSeccion_{{ $indexSeccion }}" value="{{ $seccion->id }}">
                                    <input type="hidden" class="numero-de-seccion" value="{{ $indexSeccion }}">
                                </div>

                                <div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-pregunta-seccion-{{ $indexSeccion }}">La sección debe tener obligatoriamente al menos una pregunta para registrar la ficha</div>
                                <div class="alert alert-danger" role="alert" style="display: none;" id="error-porcentaje-pregunta-seccion-{{ $indexSeccion }}">La suma total de los porcentaje de las preguntas de las secciones no deben superar el 100% para registrar la ficha</div>

                                <div id="contenedor-pregunta-seccion-{{ $indexSeccion }}" style="padding:15px; background-color: rgba(0,0,0,.03);">

                                    @php
                                        $indexPregunta = 0;
                                    @endphp
                                    @foreach ($seccion->preguntasFichaEntrevistaTecnicaOrdenanos as $pregunta)
                                        @php
                                            $indexPregunta++;
                                        @endphp
                                        <div class="card pregunta-seccion-{{ $indexSeccion }} pregunta-de-seccion">
                                            <div class="card-body">
                                                <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                                    <div class="form-group">
                                                        <label for="cargo">Nombre Pregunta</label>
                                                        <input type="text" class="form-control" value="{{ $pregunta->pregunta }}" onchange="cambiarValorNombrePregunta(this)" id="nombre_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}">
                                                        <div class="invalid-feedback" id="valicacionCampoNombrepregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}"></div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="cargo">Porcentaje</label>
                                                        <input type="number" min="0" max="100" class="form-control" value="{{ $pregunta->porcentaje }}" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">
                                                        <div class="invalid-feedback" id="valicacionCampoPorcentajePregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}"></div>
                                                    </div>
                                                    <input type="hidden" class="idPregunta" id="idPregunta_{{ $indexPregunta }}_Seccion_{{ $indexSeccion }}" value="{{ $pregunta->id }}">
                                                </div>
                                                <div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-opciones-pregunta-{{ $indexPregunta }}-seccion-{{ $indexSeccion }}">La pregunta debe tener obligatoriamente al menos una opción para registrar la ficha</div>

                                                <div id="contenedor-opciones-pregunta-{{ $indexPregunta }}-seccion-{{ $indexSeccion }}" class="contenedor-de-opciones">
                                                    @php
                                                        $indexOpcion = 0;
                                                    @endphp
                                                    @foreach ($pregunta->opcionesFichaEntrevistaTecnicaOrdenanos as $opcion)
                                                        @php
                                                            $indexOpcion++;
                                                        @endphp
                                                        <div class="contenedorCamposOpciones contenedorDeUnaOpcion">
                                                            <div class="form-group">
                                                                <label for="cargo">Nombre Opción</label>
                                                                <input type="text" class="form-control campoNombreOpcion" value="{{ $opcion->opcion }}" onchange="cambiarValorNombreOpcion(this)" id="nombre_opcion_{{ $indexOpcion }}_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}">
                                                                <div class="invalid-feedback invalidCampoNombreOpcion" id="valicacionCampoNombreOpcion_{{ $indexOpcion }}_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}"></div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label>Puntos</label>
                                                                <input type="text" class="form-control listaDespegableConBuscador" value="{{ $opcion->puntaje }}" onchange="cambiarValorPuntosOpcion(this)" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)" id="puntos_{{ $indexOpcion }}_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}">
                                                                <div class="invalid-feedback invalidCampoPuntos" id="valicacionCampoPuntos_{{ $indexOpcion }}_pregunta_{{ $indexPregunta }}_seccion_{{ $indexSeccion }}"></div>
                                                            </div>
                                                            <input type="hidden" class="idOpcion" id="idOpcion_{{ $indexOpcion }}_Pregunta_{{ $indexPregunta }}_Seccion_{{ $indexSeccion }}" value="{{ $opcion->id }}">

                                                            <div class="d-flex align-items-center">
                                                                <button type="button" class="btn btn-danger btn-block" onclick="eliminarOpcion(this.parentElement.parentElement,{{ $indexPregunta }},{{ $indexSeccion }})" style="margin-bottom: -14px;"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar Opción </button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                <button type="button" class="btn btn-aspen mr-1" onclick="agregarOpcionesEnUnaPreguntas('contenedor-opciones-pregunta-{{ $indexPregunta }}-seccion-{{ $indexSeccion }}',{{ $indexPregunta }},{{ $indexSeccion }})"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Opción </button>
                                                <button type="button" class="btn btn-danger" onclick="eliminarPregunta(this.parentElement.parentElement)"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar Pregunta </button>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class=" card-footer"><button type="button" class="btn btn-aspen mr-1" onclick="agregarPregunta('contenedor-pregunta-seccion-{{ $indexSeccion }}',{{ $indexSeccion }})"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear pregunta </button></div>
                        </div>
                    @endforeach
                </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>
        .contenedorCamposOpciones {
            display: grid;
            grid-template-columns: 40% 40% 17%;
            column-gap: 10px;
        }
    </style>
@stop

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

        function losCamposSoloSeIngresanNumeros(event, campo) {
            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 {
                let valor = campo.value + event.key;
                if (parseInt(valor) > 100) {
                    return false;
                } else {
                    return true;
                }
            }
        }

        function crearSeccion() {
            cantidadSeccion++;
            cantidadSeccionSinModificacion++;
            document.getElementById("error-contenedor-seccion").style.display = "none";
            document.getElementById("contenedorDeSecciones").innerHTML +=
                '<div class="card card-section">' +
                '<div class="card-header">' +
                '<h5 class="card-title m-0 titulo-seccion" style="font-weight: 700; font-size: 20px;">Sección ' + cantidadSeccion + '</h5>' +
                '</div>' +
                '<div class="card-body">' +

                '<div class="contenedorDosCamposPorFilaEnLosFormulario">' +
                '<div class="form-group">' +
                '<label for="cargo">Nombre Sección</label>' +
                '<input type="text" class="form-control" onchange="cambiarValorNombreSeccion(this)" id="nombre_seccion_' + cantidadSeccionSinModificacion + '">' +
                '<div class="invalid-feedback" id="valicacionCampoNombreSeccion' + cantidadSeccionSinModificacion + '">' +

                '</div>' +
                '</div>' +

                '<div class="form-group">' +
                '<label for="cargo">Porcentaje</label>' +
                '<input type="number" min="0" max="100" class="form-control" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_seccion_' + cantidadSeccionSinModificacion + '" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">' +
                '<div class="invalid-feedback" id="valicacionCampoPorcentajeSeccion' + cantidadSeccionSinModificacion + '">' +

                '</div>' +
                '</div>' +
                '<input type="hidden" class="numero-de-seccion" value="' + cantidadSeccionSinModificacion + '">' +
                '</div>' +

                '<div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-pregunta-seccion-' + cantidadSeccionSinModificacion + '">La sección debe tener obligatoriamente al menos una pregunta para registrar la ficha</div>' +
                '<div class="alert alert-danger" role="alert" style="display: none;" id="error-porcentaje-pregunta-seccion-' + cantidadSeccionSinModificacion + '">La suma total de los porcentaje de las preguntas de las secciones no deben superar el 100% para registrar la ficha</div>' +

                '<div id="contenedor-pregunta-seccion-' + cantidadSeccionSinModificacion + '" style="padding:15px; background-color: rgba(0,0,0,.03);">' +


                '<div class="card pregunta-seccion-' + cantidadSeccionSinModificacion + ' pregunta-de-seccion">' +
                '<div class="card-body">' +

                '<div class="contenedorDosCamposPorFilaEnLosFormulario">' +
                '<div class="form-group">' +
                '<label for="cargo">Nombre Pregunta</label>' +
                '<input type="text" class="form-control"  onchange="cambiarValorNombrePregunta(this)"  id="nombre_pregunta_1_seccion_' + cantidadSeccionSinModificacion + '">' +
                '<div class="invalid-feedback" id="valicacionCampoNombrepregunta_1_seccion_' + cantidadSeccionSinModificacion + '">' +

                '</div>' +
                '</div>' +

                '<div class="form-group">' +
                '<label for="cargo">Porcentaje</label>' +
                '<input type="number" min="0" max="100" class="form-control" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_pregunta_1_seccion_' + cantidadSeccionSinModificacion + '" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">' +
                '<div class="invalid-feedback" id="valicacionCampoPorcentajePregunta_1_seccion_' + cantidadSeccionSinModificacion + '"></div>' +
                '</div>' +

                '</div>' +

                '<div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-opciones-pregunta-1-seccion-' + cantidadSeccionSinModificacion + '">La pregunta debe tener obligatoriamente al menos una opción para registrar la ficha</div>' +

                '<div id="contenedor-opciones-pregunta-1-seccion-' + cantidadSeccionSinModificacion + '" class="contenedor-de-opciones">' +

                '</div>' +

                '<button type="button" class="btn btn-aspen mr-1" onclick="agregarOpcionesEnUnaPreguntas(\'contenedor-opciones-pregunta-1-seccion-' + cantidadSeccionSinModificacion + '\',1,' + cantidadSeccionSinModificacion + ')"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Opción </button>' +
                '<button type="button" class="btn btn-danger" onclick="eliminarPregunta(this.parentElement.parentElement)"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar Pregunta </button>' +

                '</div>' +
                '</div>' +
                '</div>' +

                '</div>' +

                '<div class=" card-footer">' +
                '<button type="button" class="btn btn-aspen mr-1" onclick="agregarPregunta(\'contenedor-pregunta-seccion-' + cantidadSeccionSinModificacion + '\',' + cantidadSeccionSinModificacion + ')"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear pregunta </button>' +
                '</div>' +

                '</div>';

            /*'<button type="button" class="btn btn-danger" onclick="eliminarSeccion(this.parentElement.parentElement)"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar Sección </button>' +*/
        }

        function agregarOpcionesEnUnaPreguntas(contenedor, idPregunta, idSeccion) {
            if (document.getElementById(contenedor).innerHTML.trim().length > 0) {
                let listadoContenedoresOpciones = document.getElementById(contenedor).querySelectorAll(".contenedorDeUnaOpcion");
                let cantidadOpcion = listadoContenedoresOpciones.length;
                cantidadOpcion++;

                document.getElementById("error-contenedor-opciones-pregunta-" + idPregunta + "-seccion-" + idSeccion).style.display = "none";

                document.getElementById(contenedor).innerHTML +=
                    '<div class="contenedorCamposOpciones contenedorDeUnaOpcion">' +
                    '<div class="form-group">' +
                    '<label for="cargo">Nombre Opción</label>' +
                    '<input type="text" class="form-control campoNombreOpcion" onchange="cambiarValorNombreOpcion(this)" id="nombre_opcion_' + cantidadOpcion + '_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +
                    '<div class="invalid-feedback invalidCampoNombreOpcion" id="valicacionCampoNombreOpcion_' + cantidadOpcion + '_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="form-group">' +
                    '<label>Puntos</label>' +
                    '<input type="text" class="form-control listaDespegableConBuscador" onchange="cambiarValorPuntosOpcion(this)" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)" id="puntos_' + cantidadOpcion + '_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +
                    '<div class="invalid-feedback invalidCampoPuntos" id="valicacionCampoPuntos_' + cantidadOpcion + '_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="d-flex align-items-center">' +
                    '<button type="button" class="btn btn-danger btn-block" onclick="eliminarOpcion(this.parentElement.parentElement,' + idPregunta + ',' + idSeccion + ')" style="margin-bottom: -14px;"><i class="fas fa-trash" style="margin-right: 2px; "></i> Eliminar Opción </button>'
                '</div>' +
                '</div>';
            } else {
                document.getElementById("error-contenedor-opciones-pregunta-" + idPregunta + "-seccion-" + idSeccion).style.display = "none";

                document.getElementById(contenedor).innerHTML =
                    '<div class="contenedorCamposOpciones contenedorDeUnaOpcion">' +
                    '<div class="form-group">' +
                    '<label for="cargo">Nombre Opción</label>' +
                    '<input type="text" class="form-control campoNombreOpcion" onchange="cambiarValorNombreOpcion(this)" id="nombre_opcion_1_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +
                    '<div class="invalid-feedback invalidCampoNombreOpcion" id="valicacionCampoNombreOpcion_1_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="form-group">' +
                    '<label>Puntos</label>' +
                    '<input type="text" class="form-control listaDespegableConBuscador" onchange="cambiarValorPuntosOpcion(this)" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)" id="puntos_1_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +
                    '<div class="invalid-feedback invalidCampoPuntos" id="valicacionCampoPuntos_1_pregunta_' + idPregunta + '_seccion_' + idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="d-flex align-items-center">' +
                    '<button type="button" class="btn btn-danger btn-block" onclick="eliminarOpcion(this.parentElement.parentElement,' + idPregunta + ',' + idSeccion + ')" style="margin-bottom: -14px;"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar Opción </button>'
                '</div>' +
                '</div>';
            }
        }

        function eliminarPregunta(elemento) {
            let contenedor = elemento.parentElement;
            if (elemento.querySelector(".idPregunta")) {
                let valorIdPregunta = elemento.querySelector(".idPregunta").value;
                let listadoPreguntasEliminadas = JSON.parse(document.getElementById("listadoPreguntasEliminadas").value);
                listadoPreguntasEliminadas.push(valorIdPregunta);
                document.getElementById("listadoPreguntasEliminadas").value = JSON.stringify(listadoPreguntasEliminadas);
            }
            elemento.remove();
            if (contenedor.innerHTML.trim().length > 0) {
                let cantidadPregunta = 0;
                let listadoPreguntas = contenedor.querySelectorAll(".pregunta-de-seccion")
                listadoPreguntas.forEach(elemento => {
                    cantidadPregunta++;
                    let listadoIdFormControl = elemento.querySelector(".form-control").id.split("_");
                    elemento.querySelector(".form-control").id = listadoIdFormControl[0] + "_" + listadoIdFormControl[1] + "_" + cantidadPregunta + "_" + listadoIdFormControl[3] + "_" + listadoIdFormControl[4];

                    let listadoIdInvalidFeedBack = elemento.querySelector(".invalid-feedback").id.split("_");
                    elemento.querySelector(".invalid-feedback").id = listadoIdInvalidFeedBack[0] + "_" + cantidadPregunta + "_" + listadoIdInvalidFeedBack[2] + "_" + listadoIdInvalidFeedBack[3];

                    let listadoContenedorOpciones = elemento.querySelector(".contenedor-de-opciones").id.split("-");
                    elemento.querySelector(".contenedor-de-opciones").id = listadoContenedorOpciones[0] + "-" + listadoContenedorOpciones[1] + "-" + listadoContenedorOpciones[2] + "-" + cantidadPregunta + "-" + listadoContenedorOpciones[4] + "-" + listadoContenedorOpciones[5];

                    elemento.querySelector(".btn-aspen").setAttribute("onclick", 'agregarOpcionesEnUnaPreguntas(\'' + listadoContenedorOpciones[0] + '-' + listadoContenedorOpciones[1] + '-' + listadoContenedorOpciones[2] + '-' + cantidadPregunta + '-' + listadoContenedorOpciones[4] + '-' + listadoContenedorOpciones[5] + '\',' + cantidadPregunta + ',' + listadoContenedorOpciones[5] + ')');

                    let listadoError = elemento.querySelector(".alert-danger").id.split("-");
                    elemento.querySelector(".alert-danger").id = listadoError[0] + "-" + listadoError[1] + "-" + listadoError[2] + "-" + listadoError[3] + "-" + cantidadPregunta + "-" + listadoError[5] + "-" + listadoError[6];
                });
            }
        }

        function agregarPregunta(contenedorPregunta, idSeccion) {
            if (document.getElementById(contenedorPregunta).innerHTML.trim().length > 0) {
                let listadoContenedoresPreguntas = document.getElementById(contenedorPregunta).querySelectorAll(".pregunta-de-seccion");
                let cantidadPregunta = listadoContenedoresPreguntas.length;
                cantidadPregunta++;
                document.getElementById("error-contenedor-pregunta-seccion-" + idSeccion).style.display = "none";
                document.getElementById("error-porcentaje-pregunta-seccion-" + idSeccion).style.display = "none";

                document.getElementById(contenedorPregunta).innerHTML +=
                    '<div class="card pregunta-seccion-' + idSeccion + ' pregunta-de-seccion">' +
                    '<div class="card-body">' +

                    '<div class="contenedorDosCamposPorFilaEnLosFormulario">' +
                    '<div class="form-group">' +
                    '<label for="cargo">Nombre Pregunta</label>' +
                    '<input type="text" class="form-control" onchange="cambiarValorNombrePregunta(this)" id="nombre_pregunta_' + cantidadPregunta + '_seccion_' + idSeccion + '">' +
                    '<div class="invalid-feedback" id="valicacionCampoNombrepregunta_' + cantidadPregunta + '_seccion_' + idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="form-group">' +
                    '<label for="cargo">Porcentaje</label>' +
                    '<input type="number" min="0" max="100" class="form-control" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_pregunta_' + cantidadPregunta + '_seccion_' + idSeccion + '" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">' +
                    '<div class="invalid-feedback" id="valicacionCampoPorcentajePregunta_' + cantidadPregunta + '_seccion_' + idSeccion + '"></div>' +
                    '</div>' +

                    '</div>' +

                    '<div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-opciones-pregunta-' + cantidadPregunta + '-seccion-' + idSeccion + '">La pregunta debe tener obligatoriamente al menos una opción para registrar la ficha</div>' +

                    '<div id="contenedor-opciones-pregunta-' + cantidadPregunta + '-seccion-' + idSeccion + '" class="contenedor-de-opciones">' +

                    '</div>' +
                    '<button type="button" class="btn btn-aspen mr-1" onclick="agregarOpcionesEnUnaPreguntas(\'contenedor-opciones-pregunta-' + cantidadPregunta + '-seccion-' + idSeccion + '\',' + cantidadPregunta + ',' + idSeccion + ')"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Opción </button>' +
                    '<button type="button" class="btn btn-danger" onclick="eliminarPregunta(this.parentElement.parentElement)"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar pregunta </button>' +

                    '</div>' +
                    '</div>';
            } else {
                document.getElementById("error-contenedor-pregunta-seccion-" + idSeccion).style.display = "none";
                document.getElementById("error-porcentaje-pregunta-seccion-" + idSeccion).style.display = "none";

                document.getElementById(contenedorPregunta).innerHTML =
                    '<div class="card pregunta-seccion-' + idSeccion + ' pregunta-de-seccion">' +
                    '<div class="card-body">' +

                    '<div class="contenedorDosCamposPorFilaEnLosFormulario">' +
                    '<div class="form-group">' +
                    '<label for="cargo">Nombre Pregunta</label>' +
                    '<input type="text" class="form-control" onchange="cambiarValorNombrePregunta(this)" id="nombre_pregunta_1_seccion_' +idSeccion + '">' +
                    '<div class="invalid-feedback" id="valicacionCampoNombrepregunta_1_seccion_' +idSeccion + '">' +

                    '</div>' +
                    '</div>' +

                    '<div class="form-group">' +
                    '<label for="cargo">Porcentaje</label>' +
                    '<input type="number" min="0" max="100" class="form-control" onchange="cambiarValorPorcentajeSeccion(this)" id="porcentaje_pregunta_1_seccion_' + idSeccion + '" onkeypress="return losCamposSoloSeIngresanNumeros(event, this)">' +
                    '<div class="invalid-feedback" id="valicacionCampoPorcentajePregunta_1_seccion_' + idSeccion + '"></div>' +
                    '</div>' +

                    '</div>' +

                    '<div class="alert alert-danger" role="alert" style="display: none;" id="error-contenedor-opciones-pregunta-1-seccion-' + idSeccion + '">La pregunta debe tener obligatoriamente al menos una opción para registrar la ficha</div>' +

                    '<div id="contenedor-opciones-pregunta-1-seccion-' + idSeccion + '" class="contenedor-de-opciones">' +

                    '</div>' +
                    '<button type="button" class="btn btn-aspen mr-1" onclick="agregarOpcionesEnUnaPreguntas(\'contenedor-opciones-pregunta-1-seccion-' + idSeccion + '\',1,' + idSeccion + ')"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Agregar Opción </button>' +
                    '<button type="button" class="btn btn-danger" onclick="eliminarPregunta(this.parentElement.parentElement)"><i class="fas fa-trash" style="margin-right: 2px;"></i> Eliminar pregunta </button>' +

                    '</div>' +
                    '</div>';
            }
        }

        function cambiarValorNombrePregunta(campo) {
            campo.setAttribute("value", campo.value);
        }

        function cambiarValorNombreOpcion(campo) {
            campo.setAttribute("value", campo.value);
        }

        function cambiarValorPuntosOpcion(campo) {
            campo.setAttribute("value", campo.value);
        }

        function cambiarValorNombreSeccion(campo) {
            campo.setAttribute("value", campo.value);
        }

        function cambiarValorPorcentajeSeccion(campo) {
            campo.setAttribute("value", campo.value);
        }

        function cambiarValorNombreFicha(campo) {
            campo.setAttribute("value", campo.value);
        }

        function eliminarOpcion(elemento, idPregunta, idSeccion) {
            let contenedor = elemento.parentElement;
            if (elemento.querySelector(".idOpcion")) {
                let valorIdOpcion = elemento.querySelector(".idOpcion").value;
                let listadoOpcionesEliminadas = JSON.parse(document.getElementById("listadoOpcionesEliminadas").value);
                listadoOpcionesEliminadas.push(valorIdOpcion);
                document.getElementById("listadoOpcionesEliminadas").value = JSON.stringify(listadoOpcionesEliminadas);
            }
            elemento.remove();
            if (contenedor.innerHTML.trim().length > 0) {
                let cantidadOpcion = 0;
                let listadoOpciones = contenedor.querySelectorAll(".contenedorDeUnaOpcion");
                listadoOpciones.forEach(elemento => {
                    elemento.querySelector(".campoNombreOpcion").removeAttribute("id");
                    elemento.querySelector(".invalidCampoNombreOpcion").removeAttribute("id");
                    elemento.querySelector(".listaDespegableConBuscador").removeAttribute("id");
                    elemento.querySelector(".invalidCampoPuntos").removeAttribute("id");
                });

                listadoOpciones.forEach(elemento => {
                    cantidadOpcion++;
                    elemento.querySelector(".campoNombreOpcion").id = "nombre_opcion_" + cantidadOpcion + "_pregunta_" + idPregunta + "_seccion_" + idSeccion;
                    elemento.querySelector(".invalidCampoNombreOpcion").id = "valicacionCampoNombreOpcion_" + cantidadOpcion + "_pregunta_" + idPregunta + "_seccion_" + idSeccion;
                    elemento.querySelector(".listaDespegableConBuscador").id = "puntos_" + cantidadOpcion + "_pregunta_" + idPregunta + "_seccion_" + idSeccion;
                    elemento.querySelector(".invalidCampoPuntos").id = "valicacionCampoPuntos_" + cantidadOpcion + "_pregunta_" + idPregunta + "_seccion_" + idSeccion;
                });
            }
        }

        function eliminarSeccion(elemento) {
            let contenedor = elemento.parentElement;
            elemento.remove();
        }

        function editarFicha() {
            let errorFicha = false;
            let cantidadTotalPorcentaje = 0;
            let listadoValoresSeccion = [];

            let nombreFicha = document.getElementById("nombre_ficha").value.trim();
            if (nombreFicha.length > 0) {
                document.getElementById("nombre_ficha").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoNombreFicha").innerHTML = "";
            } else {
                errorFicha = true;
                document.getElementById("nombre_ficha").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoNombreFicha").innerHTML = "El campo nombre ficha es obligatorio";
            }

            document.querySelectorAll(".card-section").forEach(elementoSeccion => {
                let numeroSeccion = elementoSeccion.querySelector(".numero-de-seccion").value.trim();
                let nombreSeccion = document.getElementById("nombre_seccion_" + numeroSeccion).value.trim();
                let porcentajeSeccion = document.getElementById("porcentaje_seccion_" + numeroSeccion).value.trim();
                if (numeroSeccion.length > 0 && nombreSeccion.length > 0 && porcentajeSeccion.length > 0) {
                    if (nombreSeccion.length > 0) {
                        document.getElementById("nombre_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                        document.getElementById("valicacionCampoNombreSeccion" + numeroSeccion).innerHTML = "";
                    } else {
                        document.getElementById("nombre_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                        document.getElementById("valicacionCampoNombreSeccion" + numeroSeccion).innerHTML = "El campo nombre sección es obligatorio";
                    }

                    if (porcentajeSeccion.length > 0) {
                        document.getElementById("porcentaje_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                        document.getElementById("valicacionCampoPorcentajeSeccion" + numeroSeccion).innerHTML = "";
                    } else {
                        document.getElementById("porcentaje_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                        document.getElementById("valicacionCampoPorcentajeSeccion" + numeroSeccion).innerHTML = "El campo porcentaje es obligatorio";
                    }

                    if (porcentajeSeccion != "" && porcentajeSeccion != null && porcentajeSeccion != undefined) {
                        cantidadTotalPorcentaje += parseInt(porcentajeSeccion);
                    }

                    let cantidadPreguntas = document.getElementById("contenedor-pregunta-seccion-" + numeroSeccion).childNodes.length;
                    let cantidadPorcentajePregunta = 0;
                    let listadoPreguntas = [];
                    for (let i = 0; i <= cantidadPreguntas; i++) {
                        if (document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion)) {
                            let nombrePregunta = document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                            let porcentajePregunta = document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                            let cantidadOpciones = document.getElementById("contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).childNodes.length;
                            let listadoOpciones = [];

                            if (porcentajePregunta != "" && porcentajePregunta != null && porcentajePregunta != undefined) {
                                cantidadPorcentajePregunta += parseInt(porcentajePregunta);
                            }

                            if (nombrePregunta.length > 0) {
                                document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                document.getElementById("valicacionCampoNombrepregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                            } else {
                                document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                document.getElementById("valicacionCampoNombrepregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo nombre pregunta es obligatorio";
                            }

                            if (porcentajePregunta.length > 0) {
                                document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                document.getElementById("valicacionCampoPorcentajePregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                            } else {
                                document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                document.getElementById("valicacionCampoPorcentajePregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo porcentaje es obligatorio";
                            }

                            for (let j = 0; j <= cantidadOpciones; j++) {
                                if (document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion) && document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion)) {
                                    let nombreOpcion = document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                                    let puntosOpcion = document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();

                                    if (nombreOpcion.length > 0) {
                                        document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                        document.getElementById("valicacionCampoNombreOpcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                    } else {
                                        document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                        document.getElementById("valicacionCampoNombreOpcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo nombre opción es obligatorio";
                                    }

                                    if (puntosOpcion.length > 0) {
                                        document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                        document.getElementById("valicacionCampoPuntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                    } else {
                                        document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                        document.getElementById("valicacionCampoPuntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo puntos es obligatorio";
                                    }

                                    if (document.getElementById("idOpcion_" + j + "_Pregunta_" + i + "_Seccion_" + numeroSeccion)) {
                                        let idOpcion = document.getElementById("idOpcion_" + j + "_Pregunta_" + i + "_Seccion_" + numeroSeccion).value;
                                        let objetoOpcion = {
                                            idOpcion: idOpcion,
                                            nombreOpcion: nombreOpcion,
                                            puntosOpcion: puntosOpcion
                                        }

                                        listadoOpciones.push(objetoOpcion);
                                    } else {
                                        let objetoOpcion = {
                                            nombreOpcion: nombreOpcion,
                                            puntosOpcion: puntosOpcion
                                        }

                                        listadoOpciones.push(objetoOpcion);
                                    }
                                }
                            }

                            if (cantidadOpciones > 0) {
                                document.getElementById("error-contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).style.display = "none";
                            } else {
                                document.getElementById("error-contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).style.display = "block";
                            }

                            if (listadoOpciones.length > 0) {
                                if (document.getElementById("idPregunta_" + i + "_Seccion_" + numeroSeccion)) {
                                    let idPregunta = document.getElementById("idPregunta_" + i + "_Seccion_" + numeroSeccion).value;
                                    let objetoPregunta = {
                                        idPregunta: idPregunta,
                                        nombrePregunta: nombrePregunta,
                                        porcentajePregunta: porcentajePregunta,
                                        opciones: listadoOpciones
                                    }

                                    listadoPreguntas.push(objetoPregunta);
                                } else {
                                    let objetoPregunta = {
                                        nombrePregunta: nombrePregunta,
                                        porcentajePregunta: porcentajePregunta,
                                        opciones: listadoOpciones
                                    }

                                    listadoPreguntas.push(objetoPregunta);
                                }
                            } else {
                                errorFicha = true;
                            }
                        }
                    }

                    if (cantidadPorcentajePregunta > 100) {
                        errorFicha = true;
                        document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "block";
                        document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).innerHTML = "La suma total de los porcentaje de las preguntas de la sección no deben superar el 100% para registrar la ficha";
                    } else {
                        if (cantidadPorcentajePregunta < 100) {
                            errorFicha = true;
                            document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "block";
                            document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).innerHTML = "La suma total de los porcentaje de las preguntas de la sección debe ser igual al 100% para registrar la ficha";
                        } else {
                            document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "none";
                        }
                    }

                    if (cantidadPreguntas > 0) {
                        document.getElementById("error-contenedor-pregunta-seccion-" + numeroSeccion).style.display = "none";
                    } else {
                        document.getElementById("error-contenedor-pregunta-seccion-" + numeroSeccion).style.display = "block";
                    }

                    if (listadoPreguntas.length > 0) {
                        if (document.getElementById("idSeccion_" + numeroSeccion)) {
                            let idSeccion = document.getElementById("idSeccion_" + numeroSeccion).value;
                            let objectoSeccion = {
                                idSeccion: idSeccion,
                                nombreSeccion: nombreSeccion,
                                porcentajeSeccion: porcentajeSeccion,
                                preguntas: listadoPreguntas
                            };

                            listadoValoresSeccion.push(objectoSeccion);
                        } else {
                            let objectoSeccion = {
                                nombreSeccion: nombreSeccion,
                                porcentajeSeccion: porcentajeSeccion,
                                preguntas: listadoPreguntas
                            };

                            listadoValoresSeccion.push(objectoSeccion);
                        }
                    } else {
                        errorFicha = true;
                    }
                } else {
                    errorFicha = true;
                    if (nombreSeccion.length > 0) {
                        document.getElementById("nombre_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                        document.getElementById("valicacionCampoNombreSeccion" + numeroSeccion).innerHTML = "";
                    } else {
                        document.getElementById("nombre_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                        document.getElementById("valicacionCampoNombreSeccion" + numeroSeccion).innerHTML = "El campo nombre sección es obligatorio";
                    }

                    if (porcentajeSeccion.length > 0) {
                        document.getElementById("porcentaje_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                        document.getElementById("valicacionCampoPorcentajeSeccion" + numeroSeccion).innerHTML = "";
                    } else {
                        document.getElementById("porcentaje_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                        document.getElementById("valicacionCampoPorcentajeSeccion" + numeroSeccion).innerHTML = "El campo porcentaje es obligatorio";
                    }

                    if (document.getElementById("contenedor-pregunta-seccion-" + numeroSeccion).childNodes.length > 0) {
                        document.getElementById("error-contenedor-pregunta-seccion-" + numeroSeccion).style.display = "none";
                        let cantidadPreguntas = document.getElementById("contenedor-pregunta-seccion-" + numeroSeccion).childNodes.length;
                        let cantidadPorcentajePregunta = 0;
                        for (let i = 0; i <= cantidadPreguntas; i++) {
                            if (document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion)) {
                                let nombrePregunta = document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                                let porcentajePregunta = document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                                if (porcentajePregunta != "" && porcentajePregunta != null && porcentajePregunta != undefined) {
                                    cantidadPorcentajePregunta += parseInt(porcentajePregunta);
                                }

                                if (nombrePregunta.length > 0) {
                                    document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                    document.getElementById("valicacionCampoNombrepregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                } else {
                                    document.getElementById("nombre_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                    document.getElementById("valicacionCampoNombrepregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo nombre pregunta es obligatorio";
                                }

                                if (porcentajePregunta.length > 0) {
                                    document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                    document.getElementById("valicacionCampoPorcentajePregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                } else {
                                    document.getElementById("porcentaje_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                    document.getElementById("valicacionCampoPorcentajePregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo porcentaje es obligatorio";
                                }

                                if (document.getElementById("contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).childNodes.length > 0) {
                                    document.getElementById("error-contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).style.display = "none";
                                    let cantidadOpciones = document.getElementById("contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).childNodes.length;
                                    for (let j = 0; j <= cantidadOpciones; j++) {
                                        if (document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion) && document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion)) {
                                            let nombreOpcion = document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();
                                            let puntosOpcion = document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).value.trim();

                                            if (nombreOpcion.length > 0) {
                                                document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                                document.getElementById("valicacionCampoNombreOpcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                            } else {
                                                document.getElementById("nombre_opcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                                document.getElementById("valicacionCampoNombreOpcion_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo nombre opción es obligatorio";
                                            }

                                            if (puntosOpcion.length > 0) {
                                                document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-valid");
                                                document.getElementById("valicacionCampoPuntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "";
                                            } else {
                                                document.getElementById("puntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).setAttribute("class", "form-control is-invalid");
                                                document.getElementById("valicacionCampoPuntos_" + j + "_pregunta_" + i + "_seccion_" + numeroSeccion).innerHTML = "El campo puntos es obligatorio";
                                            }
                                        }
                                    }
                                } else {
                                    document.getElementById("error-contenedor-opciones-pregunta-" + i + "-seccion-" + numeroSeccion).style.display = "block";
                                }
                            }
                        }

                        if (cantidadPorcentajePregunta > 100) {
                            errorFicha = true;
                            document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "block";
                            document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).innerHTML = "La suma total de los porcentaje de las preguntas de la sección no deben superar el 100% para registrar la ficha";
                        } else {
                            if (cantidadPorcentajePregunta < 100) {
                                errorFicha = true;
                                document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "block";
                                document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).innerHTML = "La suma total de los porcentaje de las preguntas de la sección debe ser igual al 100% para registrar la ficha";
                            } else {
                                document.getElementById("error-porcentaje-pregunta-seccion-" + numeroSeccion).style.display = "none";
                            }
                        }
                    } else {
                        document.getElementById("error-contenedor-pregunta-seccion-" + numeroSeccion).style.display = "block";
                    }
                }
            });

            if (cantidadTotalPorcentaje > 100) {
                errorFicha = true;
                document.getElementById("error-porcentaje").style.display = "block";
                document.getElementById("error-porcentaje").innerHTML = "La suma total de los porcentaje de las secciones no deben superar el 100% para registrar la ficha";
            } else {
                if (cantidadTotalPorcentaje < 100) {
                    errorFicha = true;
                    document.getElementById("error-porcentaje").style.display = "block";
                    document.getElementById("error-porcentaje").innerHTML = "La suma total de los porcentaje de las secciones debe ser igual al 100% para registrar la ficha";
                } else {
                    document.getElementById("error-porcentaje").style.display = "none";
                }
            }

            if (document.querySelectorAll(".card-section").length > 0) {
                document.getElementById("error-contenedor-seccion").style.display = "none";
            } else {
                document.getElementById("error-contenedor-seccion").style.display = "block";
            }

            if (listadoValoresSeccion.length > 0) {
                if (errorFicha == false) {
                    generarLoading('{{ asset('img/logo.png') }}')
                    var formData = new FormData();
                    formData.append('nombre_ficha', nombreFicha);
                    formData.append('listadoPreguntasEliminadas', document.getElementById("listadoPreguntasEliminadas").value);
                    formData.append('listadoOpcionesEliminadas', document.getElementById("listadoOpcionesEliminadas").value);
                    formData.append('secciones', JSON.stringify(listadoValoresSeccion));
                    formData.append('_method', "PUT");
                    var csrf = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('ficha-entrevista-tecnica.update',$ficha) }}',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            console.log(data)
                            eliminarLoading()
                            Swal.fire({
                                    icon: 'success',
                                    title: '¡Editado!',
                                    text: 'La ficha con el nombre ' + data.nombre + ' se edito con éxito',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                }).then((result) => {
                                    location.reload();
                                })
                                .catch((error) => {
                                    location.reload();
                                });
                        },
                        error: function(data) {
                            console.log(data)
                            eliminarLoading()
                        }
                    })
                }
            }
        }
    </script>
@stop