EVOLUTION-MANAGER

Edit File: crear-servicios.js

var contenedor_imagenes = [];
var sorts = [];
var sortsorden = [];

new Sortable(documentos_cargados, {
    handle: '.mostrar-archivos',
    animation: 150,
    ghostClass: 'background-class',
    store: {
        set: function (sortable) {
            sorts = sortable.toArray();
        }
    }
});

new Sortable(preguntas_creadas_usuario, {
    handle: '.preguntas',
    animation: 150,
    ghostClass: 'background-class',
    store: {
        set: function (sortable) {
            sortsorden = sortable.toArray();
        }
    }
});

function maximo(campo, limite, id) {
    if (campo.value.length >= limite) {
        campo.value = campo.value.substring(0, limite);
    }
    document.getElementById(id).innerHTML = limite - campo.value.length;
}

var input = document.getElementById("cargar");
var show_archivos = document.getElementById("documentos_cargados");

input.addEventListener("change", (e) => {

const fileshow = (filename, filetype) => {

let container = document.createElement('div');
        container.className = 'mostrar-archivos';
        container.id = filename;
        container.setAttribute('data-id', filename);

let leftdiv = document.createElement('div');
        leftdiv.className = 'left';

let filespan = document.createElement('span');
        filespan.className = 'tipo-archivo';
        filespan.textContent = filetype;

let fileh3 = document.createElement('h3');
        fileh3.textContent = filename;

leftdiv.appendChild(filespan);
        leftdiv.appendChild(fileh3);

let rightdiv = document.createElement('div');
        rightdiv.className = 'right';
        rightdiv.setAttribute('onclick', 'borrar_img("' + filename + '")');
        rightdiv.id = 'borrar';

let filespan2 = document.createElement('span');
        filespan2.innerHTML = '&#215;';

rightdiv.appendChild(filespan2);
        container.appendChild(leftdiv);
        container.appendChild(rightdiv);

show_archivos.appendChild(container);
    }

if (e.target.files[0]) {
        let filename = e.target.files[0].name;
        let filetype = e.target.value.split(".").pop();

if (contenedor_imagenes.length > 0) {
            if (validar_nombreimagenes(filename)) {
                mensaje_de_alerta("error", "Esta intentando subir una imagen repetida");
            } else {
                if (contenedor_imagenes.length == 10) {
                    input_imagenes.value = "";
                    mensaje_de_alerta("error", "Solo puede subir un máximo de 10 imagenes");
                } else {
                    contenedor_imagenes.push(e.target.files[0]);

//
                    const file = input.files[0];
                    const reader = new FileReader();
                    reader.readAsArrayBuffer(file);
                    var porcentaje;

const progressBar = document.getElementById('progressBar');
                    progressBar.classList.add('progressBarshow');

reader.onprogress = (e) => {
                        porcentaje = Math.round((e.loaded / e.total) * 100);
                        progressBar.style.width = porcentaje + '%';
                        progressBar.innerHTML = porcentaje + "%"
                    }

reader.onload = (e) => {
                        progressBar.classList.remove('progressBarshow');
                        progressBar.style.width = '0%';
                        fileshow(filename, filetype);
                    }
                }
            }
        } else {
            contenedor_imagenes.push(e.target.files[0]);

//
            const file = input.files[0];
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            var porcentaje;

const progressBar = document.getElementById('progressBar');
            progressBar.classList.add('progressBarshow');

reader.onprogress = (e) => {
                porcentaje = Math.round((e.loaded / e.total) * 100);
                progressBar.style.width = porcentaje + '%';
                progressBar.innerHTML = porcentaje + "%"
            }

reader.onload = (e) => {
                progressBar.classList.remove('progressBarshow');
                progressBar.style.width = '0%';
                fileshow(filename, filetype);
            }
        }
        input.value = "";
    }
});

document.getElementById("crear-servicio").addEventListener("submit", (event) => {
    event.preventDefault();

var nombre_servicio = document.getElementById("nombre").value;
    var descripcion = document.getElementById("descripcion").value;

const textareasPreguntas = document.querySelectorAll('textarea[name="preguntas[]"]');
    const valoresPreguntas = [];

textareasPreguntas.forEach(textarea => {
        valoresPreguntas.push(textarea.value);
    });

const textareasRespuestas = document.querySelectorAll('textarea[name="respuestas[]"]');
    const valoresRespuesta = [];

textareasRespuestas.forEach(textarea => {
        valoresRespuesta.push(textarea.value);
    });

// if (contenedor_imagenes.length > 0 && nombre_servicio != "" && descripcion != "") {
    const loadingModal = document.getElementById('loadingModal');
    loadingModal.style.display = 'block';

$.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
        }
    });

//resetear mensajes de error
    document.getElementById("errors-message-nombre").innerHTML = "";
    document.getElementById("errors-message-descripcion").innerHTML = "";
    document.getElementById("errors-message-imagenes").innerHTML = "";
    document.getElementById("errors-message-enunciado").innerHTML = "";
    document.getElementById("errors-message-respuesta").innerHTML = "";

var formData = new FormData();
    formData.append('nombre', $('#nombre').val());
    formData.append('descripcion', $('#descripcion').val());
    if (contenedor_imagenes.length > 0) {
        for (var x = 0; x < contenedor_imagenes.length; x++) {
            // Enviar imágenes con un índice específico, asegurando que se envíen como imagenes[0], imagenes[1], etc.
            formData.append('imagenes[' + x + ']', contenedor_imagenes[x]);

// Si hay más de un elemento en `sorts`, buscamos el índice correspondiente y lo añadimos
            if (sorts.length > 1) {
                for (var i = 0; i < sorts.length; i++) {
                    if (sorts[i] == contenedor_imagenes[x].name) {
                        formData.append('orden[' + x + ']', i); // Se asegura de que 'orden' tenga el mismo índice que las imágenes
                        break;
                    }
                }
            } else {
                formData.append('orden[' + x + ']', 1 + x); // Añadir orden si no hay `sorts`
            }
        }
    }
    if (valoresPreguntas.length > 0) {
        for (var i = 0; i < valoresPreguntas.length; i++) {
            formData.append('pregunta[]', valoresPreguntas[i]);
            formData.append('respuesta[]', valoresRespuesta[i]);
            if (sortsorden.length > 0) {
                for (var x = 0; x < sortsorden.length; x++) {
                    if (sortsorden[x] == valoresPreguntas[i]) {
                        formData.append('orden_p[]', 1 + x);
                        break;
                    }
                }
            } else
                formData.append('orden_p[]', 1 + i);
        }
    }

$.ajax({
        url: "/administrador/crud-servicios/crear-servicio",
        method: "POST",
        enctype: "multipart/form-data",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.success) {
                loadingModal.style.display = 'none';
                document.getElementById("nombre").value = "";
                document.getElementById("descripcion").value = "";
                document.getElementById("documentos_cargados").innerHTML = "";
                contenedor_imagenes = [];
                input.value = "";
                document.getElementById("enunciado").value = "";
                document.getElementById("respuesta").value = "";
                document.getElementById('preguntas_creadas_usuario').innerHTML = "";
                mensaje_de_alerta("success", response.message);
            } else {
                loadingModal.style.display = 'none';
                if (response.error_validacion) {
                    mensaje_de_alerta("error", "Hubo un error de validación revise la información ingresada");
                    var errores = response.error_validacion;

// Mapea los campos a los IDs de los elementos HTML
                    var campos = {
                        "nombre": "errors-message-nombre",
                        "descripcion": "errors-message-descripcion",
                        "imagenes": "errors-message-imagenes",
                        // "orden": "errors-message-orden",
                        "pregunta": "errors-message-enunciado",
                        "respuesta": "errors-message-respuesta"
                    };

// Recorre los errores y asigna los mensajes a los elementos correspondientes
                    $.each(errores, function (key, value) {
                        for (var campo in campos) {
                            if (value[0].includes(campo)) {
                                document.getElementById(campos[campo]).innerHTML += '<p class="alert alert-danger">' + value[0] + '</p>';
                            }
                        }
                    });

}
                if (response.error) {
                    console.log(response.error);
                    mensaje_de_alerta("error", response.error);
                }
            }
        },
        error: function (xhr) {
            loadingModal.style.display = 'none';
            var message = JSON.parse(xhr.responseText);
            mensaje_de_alerta("error", message.message);
        }
    });
    // } else {
    //     mensaje_de_alerta("error", "Llene todos los campos solicitados");
    // }
});

function validar_nombreimagenes(filename) {
    for (var x = 0; x < contenedor_imagenes.length; x++) {
        if (contenedor_imagenes[x].name == filename)
            return true;
    }
    return false;
}

function mensaje_de_alerta(icon, title) {
    Swal.fire({
        icon: icon,
        title: title,
        showConfirmButton: true,
    });
}

function agregar_pregunta() {
    var enunciado = document.getElementById("enunciado").value;
    var respuesta = document.getElementById("respuesta").value;

if (enunciado != "" && respuesta != "") {
        const divPreguntas = document.createElement('div');
        divPreguntas.className = 'preguntas';
        divPreguntas.id = enunciado;
        divPreguntas.setAttribute('data-id', enunciado);

const h2 = document.createElement('h2');
        h2.innerHTML = enunciado;
        divPreguntas.appendChild(h2);

const p = document.createElement('p');
        p.innerHTML = respuesta;
        divPreguntas.appendChild(p);

const textareaPreguntas = document.createElement('textarea');
        textareaPreguntas.name = 'preguntas[]';
        textareaPreguntas.cols = 30;
        textareaPreguntas.rows = 10;
        textareaPreguntas.value = enunciado;
        textareaPreguntas.style.display = "none";
        divPreguntas.appendChild(textareaPreguntas);

const textareaRespuestas = document.createElement('textarea');
        textareaRespuestas.name = 'respuestas[]';
        textareaRespuestas.cols = 30;
        textareaRespuestas.rows = 10;
        textareaRespuestas.value = respuesta;
        textareaRespuestas.style.display = "none";
        divPreguntas.appendChild(textareaRespuestas);

const eliminarbtn = document.createElement('div');
        eliminarbtn.className = 'right ubicacion-eliminar';
        eliminarbtn.setAttribute('onclick', 'borrar_pregunta("' + enunciado + '")');
        eliminarbtn.id = 'borrar';

let filespan2 = document.createElement('span');
        filespan2.innerHTML = '&#215;';

eliminarbtn.appendChild(filespan2);

divPreguntas.appendChild(eliminarbtn);

document.getElementById('preguntas_creadas_usuario').appendChild(divPreguntas);

document.getElementById("enunciado").value = "";
        document.getElementById("respuesta").value = "";

} else
        mensaje_de_alerta("error", "Llene la información requerida");
}