var ligaRedirect="";
var areasSeleccionadas=0;
var graficaVisisble=0;
var marksData;
var cxt;
var radarChart;
$(document).ready(function()
{
    iniFormValidate('frmSeccion1Encuesta233','guardarSeccion2Encuesta133');

    function iniFormValidate($formid,$btnSubmitId)
    {
        $.validator.setDefaults({
            submitHandler: function () {
            guardarSeccion1Encuesta233($formid, $btnSubmitId);
            }
        });
        $('#'+$formid).validate();
    }
    function guardarSeccion1Encuesta233($formid,$btnSubmitId)
    {
        if(areasSeleccionadas==8)
        {
            var url = '../controllers/Encuesta233Controller.php';
            var $datos = $('#'+$formid).serialize();
            $.post(url,$datos,
                function (data)
                {
                    if(data.type==='success'){
                        mostrarMensajeGuardado("The first section was saved", "The first section has been registered succesfully.", "success", "OK")
                    }
                    else
                    {
                        mostrarMensajeGuardado("The first section could not be saved", "The first section could not be registered.", "error", "OK")
                    }
                    ligaRedirect ="https://sadpro.osvaldo.com/encuesta2/controllers/Encuesta233Controller.php?userId="+data.userId+"&nombreAlumno="+data.nombreAlumno+"&opc="+data.opc;;

                }, 'json');
        }
        else
        {
            mostrarMensajeGuardado("Selected areas", "Remember that you must select a total of <strong class='text-primary'>8 areas</strong>, to be able to see and save your results", "warning", "OK");
            document.getElementById($btnSubmitId).disabled=false;
        }
    }
});
function mostrarMensajeGuardado(titulo,texto,icon,button)
{
    Swal.fire({
        title: titulo,
        html: texto,
        icon: icon,
        confirmButtonColor: '#3085d6',
        confirmButtonText: '<i class="fa fa-close"> '+button,
        willClose: () => {
            if(ligaRedirect!="")
            {
                window.location=ligaRedirect;
            }
        }
    }).then((result) => {
        if (result.isConfirmed) {
            if(ligaRedirect!="")
            {
                window.location=ligaRedirect;
            }
        }
    })
}

function ocultarMostrarValor(checkbox,cajatexto,orden)
{
    document.getElementById(cajatexto).value="";
    if($("#"+checkbox).is( ':checked' ))
    {
        areasSeleccionadas++;
        if(areasSeleccionadas>8)
        {
            mostrarMensajeGuardado("Áreas seleccionadas", "Solo puedes seleccionar un <strong class='text-primary'>máximo de 8 áreas</strong>, si deseas seleccionar el área de <strong>" + checkbox + "</strong> debes de quitar la selección de alguna otra.", "warning", "Aceptar");
            $("#"+checkbox).bootstrapToggle('off');
        }
        else
        {
            ocultarGrafica();
            document.getElementById(cajatexto).style.display = "block";
            document.getElementById(cajatexto).required = true;
            document.getElementById(cajatexto).value="1";
            if (document.getElementById(cajatexto+"-error"))
            {
                document.getElementById(cajatexto+"-error").style.display="";
                document.getElementById(cajatexto+"-error").innerText="";
            }
            if(orden>=14)
            {
                document.getElementById("texto"+orden).value = "";
                document.getElementById("label"+orden).style.display = "none";
                document.getElementById("texto"+orden).style.display = "";
                document.getElementById("texto"+orden).required = true;
                if (document.getElementById("texto"+orden+"-error"))
                {
                    document.getElementById("texto"+orden+"-error").style.display="";
                    document.getElementById("texto"+orden+"-error").innerText="";
                }
            }
        }
    }
    else
    {
        ocultarGrafica();
        areasSeleccionadas--;
        document.getElementById(cajatexto).style.display = "none";
        document.getElementById(cajatexto).required = false;
        if (document.getElementById(cajatexto+"-error"))
        {
            document.getElementById(cajatexto+"-error").innerText="";
            document.getElementById(cajatexto+"-error").style.display="none";
        }
        if(orden>=14)
        {
            document.getElementById("texto"+orden).value = "";
            document.getElementById("texto"+orden).style.display = "none";
            document.getElementById("texto"+orden).required = false;
            document.getElementById("label"+orden).style.display = "";
            if (document.getElementById("texto"+orden+"-error"))
            {
                document.getElementById("texto"+orden+"-error").innerText="";
                document.getElementById("texto"+orden+"-error").style.display="none";
            }
        }
    }
}

function pintarGrafica()
{
    try
    {
        if(graficaVisisble==0)
        {
            if(areasSeleccionadas==8)
            {
                var arregloEtiquetasAreas = new Array(8);
                var arregloValoresAreas = new Array(8);
                var contadorValoresArea = 0;
                var contadorErrores = 0;
                var textErrores = "";
                //iniFormValidate("frmSeccion1Encuesta233","guardarSeccion1Encuesta233",0);
                $('input[type=checkbox]').each(function(){
                    var cb = $(this);
                    if(cb.is( ':checked' ))
                    {
                        var valorArea = $("#valor"+cb.attr('name')).val();
                        if(valorArea>=1 && valorArea<=10)
                        {
                            arregloValoresAreas[contadorValoresArea]=valorArea;
                            if(cb.attr('name')>=13)
                            {
                                if( $("#texto"+cb.attr('name')).val().length>=5)
                                {
                                    arregloEtiquetasAreas[contadorValoresArea]=$("#texto"+cb.attr('name')).val();
                                    contadorValoresArea++;
                                }
                                else
                                {
                                    textErrores = textErrores + "<li><strong class='text-primary'>"+$("#label"+cb.attr('name')).text()+"</strong>: Captura entre 5 y 50 caracteres.</li>"
                                    contadorErrores++;
                                }
                            }
                            else
                            {
                                arregloEtiquetasAreas[contadorValoresArea]=$("#label"+cb.attr('name')).text();
                                contadorValoresArea++;
                            }
                        }
                        else
                        {
                            textErrores = textErrores + "<li><strong class='text-primary'>"+$("#label"+cb.attr('name')).text()+"</strong>: Captura un valor entre 1 y 10.</li>";
                            if(cb.attr('name')>=13)
                            {
                                if( $("#texto"+cb.attr('name')).val().length<5)
                                {
                                    textErrores = textErrores + "<li><strong class='text-primary'>"+$("#label"+cb.attr('name')).text()+"</strong>: Captura entre 5 y 50 caracteres.</li>";
                                }
                            }
                            contadorErrores++;
                        }
                    }
                });
                if(contadorErrores==0)
                {
                    $("#verGrafica").html('<i class="fa fa-spin fa-spinner"></i> Cargando...');
                    $("#seccionGrafica").show();
                    marksData = {
                        labels: [arregloEtiquetasAreas[0], arregloEtiquetasAreas[1], arregloEtiquetasAreas[2], arregloEtiquetasAreas[3], arregloEtiquetasAreas[4], arregloEtiquetasAreas[5], arregloEtiquetasAreas[6], arregloEtiquetasAreas[7]],
                        datasets: [{
                            label: "¿Qué tan bien rueda tu vida?",
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgb(54, 162, 235)',
                            pointBackgroundColor: 'rgb(54, 162, 235)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgb(54, 162, 235)',
                            fill: true,
                            data: [arregloValoresAreas[0], arregloValoresAreas[1], arregloValoresAreas[2], arregloValoresAreas[3], arregloValoresAreas[4], arregloValoresAreas[5], arregloValoresAreas[6], arregloValoresAreas[7]]
                        }]
                    };
                    cxt = $('#myChart');
                    radarChart = new Chart(cxt, {
                        type: 'radar',
                        data: marksData,
                        options:{
                            scales: {
                                r: {
                                    angleLines: {
                                        display: false
                                    },
                                    suggestedMin: 0,
                                    suggestedMax: 10
                                }
                            }
                        }
                    });
                    graficaVisisble = 1;
                    document.getElementById("guardarSeccion1Encuesta233").style.display = "";
                    $('#verGrafica').html('<i class="fa fa-pie-chart"></i>Ocultar Gr&aacute;fica');
                }
                else
                {
                    mostrarMensajeGuardado("Validación de campos", "Te pedimos atender las siguientes situaciones de campos con el fin de que puedas visualizar la gráfica:<br><ul>"+textErrores+"</ul>", "error", "Aceptar");
                }
            }
            else
            {
                mostrarMensajeGuardado("Áreas seleccionadas", "Recuerda que debes de seleccionar un total de <strong class='text-primary'>8 áreas</strong>, para que puedas visualizar y guardar tu resultado.", "warning", "Aceptar");
            }
        }
        else
        {
            ocultarGrafica();
        }
    }
    catch (e)
    {
        console.log(e);
    }

}

function ocultarGrafica()
{
    if(graficaVisisble==1)
    {
        document.getElementById("guardarSeccion1Encuesta233").style.display = "none";
        $("#verGrafica").html('<i class="fa fa-spin fa-spinner"></i> Ocultando...');
        $("#seccionGrafica").hide();
        graficaVisisble = 0;
        $('#verGrafica').html('<i class="fa fa-pie-chart"></i>Mostrar Gr&aacute;fica');
        marksData = null;
        cxt = null;
        radarChart.destroy();
        radarChart = null;
    }
}