jQuery(document).ready(function ($) {
    var cat;
    var retro;
    //---------------------------------------------------------------
    //-------------------- BOTON REGRESAR ---------------------------
    //---------------------------------------------------------------
    $(".btn-return").click(function(){
      location.href ="recursos.php?idcat="+cat;
      //let prevUrl = document.referrer;
      //window.location=prevUrl;
    });

    //---------------------------------------------------------------
    //-------------------- DATA ENCUESTA ---------------------------
    //---------------------------------------------------------------
    function getEvaluacion(evaluacion,numempl){
      $('.progress-evaluacion').hide();
      $('.instrucciones-evaluacion').show();
    
      $.ajax({
        url: 'evaluaciones/getEvaluacion.php',
        type:'POST',
        data:{idevaluacion:evaluacion,numempl:numempl},
        success: function(response) {
          var _data = JSON.parse(response);
          if (_data.codeDatos == '200') {
            //INICIALIZAR CARGANDO
            $('#evaname').html('Cargando...');
            $('._instrucciones').html('Cargando...');
            $('._preguntas').html('Cargando...');
            $('._calificacion').html('Cargando...');
            $('._intentos').html('Cargando...');
            $('._tiempo').html('Cargando...');
            //INICIALIZAR RESET CAMPOS
            $('#evaname').html('');
            $('._instrucciones').html('');
            $('._preguntas').html('');
            $('._calificacion').html('');
            $('._intentos').html('');
            $('._tiempo').html('');

            //INICIALIZAR DATOS EVALUACION
            cat = _data.datos.categoria;
            retro = _data.datos.retroalimentacion;
            $('#btn-constancia').attr('href','certificate.php?idcourse='+cat);
            $('#evaname').html(_data.datos.titulo);
            $('._instrucciones').html(_data.datos.instrucciones);
            $('._preguntas').html(_data.datos.preguntas+' preguntas');
            $('._calificacion').html(_data.datos.calificacion);
            commit.postCalificacion(_data.datos.preguntas,_data.datos.calificacion);
            $('#btn_init').attr('data-type',_data.datos.tipopreguntas);
            
            if (_data.datos.tipointentos == 'Limitado') {
              $('._intentos').html(_data.datos.intentos+' intentos');
              $('#btn_init').show();
              if ( _data.progreso.aplicado >= _data.datos.intentos) {
                $('#btn_init').hide();
                resultados(_data.progreso);
              }else{
                resultados(_data.progreso);
              }
            }else{
              resultados(_data.progreso);
              $('._intentos').html(_data.datos.tipointentos);
              $('#btn_init').show();
            }
            if (_data.datos.tipotiempo == 'Limitado') {
              $('._tiempo').html(_data.datos.tiempo+' minutos');
              $('._timelimit').html(_data.datos.tiempo);
              timer.postLimit(_data.datos.tiempo);
            }else{
              $('.progress_bar').hide();
              $('._tiempo').html(_data.datos.tipotiempo);
              $('._timelimit').html(_data.datos.tipotiempo);
            }

            $('.layer-load').hide();
          }else{
            Swal.fire({
              html: _data.msgDatos,
              icon: _data.iconDatos,
              onBeforeOpen: function () {},
              onOpen: function () {
                $('.layer-load').hide();
              },
              onRender: function () {},
              onClose: function () {
                //$('.btn-return').click();
                location.href ="dashboard.php";
              },
              onAfterClose: function () {}
            });
          }


        },
        error: function() {
          Swal.fire({
            html: 'Hubo un error al procesar los datos',
            icon: 'error',
            onBeforeOpen: function () {},
            onOpen: function () {
              $('.layer-load').hide();
            },
            onRender: function () {},
            onClose: function () {
              $('.btn-return').click();
            },
            onAfterClose: function () {}
          });
        }
      });
    }

    //---------------------------------------------------------------
    //--------------------- BOTON INICIAR ---------------------------
    //---------------------------------------------------------------
    $("#btn_init").click(function(){
      $('layer-load').show();
      var type = $(this).attr('data-type');
      var mode = $(this).attr('data-mode');
      $('.constancia-evaluacion').hide();
      $('.instrucciones-evaluacion').hide();
      $('.result-evaluacion').hide();
      $('.progress-evaluacion').show();
      evaluacion(mode,type,$('#idevaluacion').val(),$('#numerodeempleado').val());
    });


    //---------------------------------------------------------------
    //------------------- INICIAR EVALUACION ------------------------
    //---------------------------------------------------------------
    function evaluacion(mode,orden,evaluacion,numempl){

      $.ajax({
        url: 'evaluaciones/getPreguntas.php',
        type:'POST',
        data:{mode:mode,orden:orden,evaluacion:evaluacion,numempl:numempl},
        success: function(respuesta) {
          var _data = JSON.parse(respuesta);

          if (_data.code == '200') {
            if (mode == 'progress') {
              $('#cronometro').val(_data.preguntas[0].tiempo);
              $('#estado').val(_data.preguntas[0].estado);
              timer.reload(_data.preguntas[0].tiempo);
            }else{
                timer.init();
                commit.init();
            }

            $('.nav-tabs').html('');
            $('.tab-content').html('');
            var navs = '';
            var tabs = '';
            var btn = '';
            var totaltabs = _data.preguntas.length;

                //Contruccion de tabs
                $.each(_data.preguntas, function (index, val) {
                  navs = '';
                  tabs = '';
                  if (index == 0) {
                    navs = '<li class="nav-item">'+
                              '<a class="nav-link active disabled" data-toggle="tab" href="#eva'+index+'" data-nav="'+index+'" id="nav'+index+'">Pregunta '+(index+1)+'</a>'+
                            '</li>';

                    tabs = '<div class="tab-pane container active" id="eva'+index+'">'+
                            '<div class="row">'+
                            '<input type="hidden" name="idpregunta" id="idpregunta'+index+'" value="'+val.idpregunta+'">'+
                            '<input type="hidden" name="scorepregunta" id="scorepregunta'+index+'" value="'+val.puntos+'">'+
                            '<input type="hidden" name="type" id="type'+index+'" value="'+val.tipo+'">'+
                              '<div class="col-lg-12 col-md-12 col-12 mt-3">'+
                                '<p><b>Puntos: </b>'+val.puntos+'</p>'+
                                '<p id="eva'+index+'"><b>Pregunta '+(index+1)+':</b>'+val.titulo+'</p>'+
                                '<p class="evadesc'+index+'">'+val.descripcion+'</p>'+
                                '<div id="answerseva'+index+'" class="answers">'+
                                '</div>'+
                              '</div>'+
                              '<div class="col-lg-6 col-md-6 col-6" id="btns_'+index+'">'+
                              '</div>'+
                            '</div>'+
                          '</div>';
                  }else{
                    navs = '<li class="nav-item">'+
                              '<a class="nav-link disabled" data-toggle="tab" href="#eva'+index+'" data-nav="'+index+'" id="nav'+index+'">Pregunta '+(index+1)+'</a>'+
                            '</li>';

                    tabs = '<div class="tab-pane container fade" id="eva'+index+'">'+
                            '<div class="row">'+
                            '<input type="hidden" name="idpregunta" id="idpregunta'+index+'" value="'+val.idpregunta+'" disabled>'+
                            '<input type="hidden" name="scorepregunta" id="scorepregunta'+index+'" value="'+val.puntos+'" disabled>'+
                            '<input type="hidden" name="type" id="type'+index+'" value="'+val.tipo+'" disabled>'+
                              '<div class="col-lg-12 col-md-12 col-12 mt-3">'+
                              '<p><b>Puntos: </b>'+val.puntos+'</p>'+
                                '<p id="eva'+index+'"><b>Pregunta '+(index+1)+':</b>'+val.titulo+'</p>'+
                                '<p class="evadesc'+index+'">'+val.descripcion+'</p>'+
                                '<div id="answerseva'+index+'" class="answers">'+
                                '</div>'+
                              '</div>'+
                              '<div class="col-lg-6 col-md-6 col-6" id="btns_'+index+'">'+
                              '</div>'+
                            '</div>'+
                          '</div>';

                  }

                  $('.nav-tabs').append(navs);
                  $('.tab-content').append(tabs);

                  $.each(val.respuestas, function (indexanswers, answers) {
                    if (val.tipo == 'textarea') {
                      if (indexanswers == 1) {
                        answers = '<div class="form-group">'+
                          '<textarea class="form-control" rows="5" data-sec="'+index+'" id="answers'+answers.idpregunta+'" name="answers'+answers.idpregunta+'[]" required="required"></textarea>'+
                        '</div>';
                        $('#answerseva'+index).append(answers);
                      }
                    }else{
                      answers = '<label class="container-check">'+answers.texto+
                                    '<input type="'+val.tipo+'" data-sec="'+index+'" name="answers'+answers.idpregunta+'[]" id="answers'+answers.idpregunta+'" value="'+answers.idopcion+'">'+
                                    '<span class="checkmark"></span>'+
                                  '</label>';
                      $('#answerseva'+index).append(answers);
                    }
                  });


                  if (totaltabs == (index+1)) {
                    btn = '<button type="submit" name="btnSave" value="terminar" id="btn-'+index+'" data-tab="'+index+'" class="btn-next btn btn-primary btn-sm" style="display:none;">Enviar</button>';
                  }else{
                    btn = '<button type="submit" name="btnSave" value="siguiente" id="btn-'+index+'" data-tab="'+index+'" class="btn-next btn btn-primary btn-sm" style="display:none;">Siguiente</button>';
                  }
                  $('#btns_'+index).append(btn);

                  $('.answers input').click(function () {
                    seccion = $(this).attr('data-sec');
                    $('#btn-'+seccion).show();
                  });

                  $('.answers .form-control').focus(function () {
                    console.log('escribiendo');
                    seccion = $(this).attr('data-sec');
                    $('#btn-'+seccion).show();
                  });

                });

                $(".btn-next").click(function(){
                  tabant = $(this).attr('data-tab');
                  valor = $(this).attr('value');
                  console.log(valor);
                  tabsig = parseInt(tabant);
                  tabsig = (tabsig+1);
                  $('#eva'+tabant).removeClass('active');
                  $('#nav'+tabant).removeClass('active');
                  $('#cronometro').val(timer.getTime());
                  //$('#idpregunta'+tabant).attr('disabled',true);
                  if (valor != 'terminar') {
                    $('#eva'+tabsig).tab('show');
                    $('#nav'+tabsig).addClass('active');
                  }else{
                    $('.progress-evaluacion').hide();
                    $('.layer-load').show();
                  }
                  
                });
                //fin construcción
                $('layer-load').hide();
          }else{
              Swal.fire({
                html: _data.msg,
                icon: _data.icon,
                onBeforeOpen: function () {},
                onOpen: function () {
                  $('.layer-load').hide();
                },
                onRender: function () {},
                onClose: function () {
                  $('.btn-return').click();
                },
                onAfterClose: function () {}
              });
          }
          
        },
        error: function() {
            Swal.fire({
              html: 'Hubo un error al procesar los datos',
              icon: 'error',
              onBeforeOpen: function () {},
              onOpen: function () {
                $('.layer-load').hide();
              },
              onRender: function () {},
              onClose: function () {
                $('.btn-return').click();
              },
              onAfterClose: function () {}
            });
          }
      });
    }
    //---------------------------------------------------------------
    //--------------------- COMMIT PROGRESO --------------------------
    //---------------------------------------------------------------
    class Commit{
      constructor(evaluacion,numempleado){
        this.idestado = '';
        this.evaluacion = evaluacion;
        this.numempleado = numempleado;
        this.estado = 'incomplete';
        this.calificacion = 0;
        this.aciertos = 0;
        this.puntos = 0;
        this.calificacionletra = 'Sin calificación';
        this.tiempo = '00:00:00';
        this.cronometro = '0';
        this.status = 'init';
        this.calificacionrequerida = 0;
        this.numpreguntas = 0;
      }

      getPuntos(){
        return this.puntos;
      }

      getAciertos(){
        return this.aciertos;
      }

      postData(estado){
        this.idestado = estado;
        this.status = 'push';
        $('#estado').val(this.idestado);
      }

      postPoint(puntos,aciertos){
        this.puntos = parseFloat(puntos);
        this.aciertos = parseInt(aciertos);
      }

      postCalificacion(preguntas,calificacionrequerida){
        this.numpreguntas = preguntas;
        this.calificacionrequerida = calificacionrequerida;
      }

      calculate(){
        this.calificacion = (this.aciertos/this.numpreguntas)*10;

        if (this.calificacion >= this.calificacionrequerida) {
          this.calificacionletra = 'Aprobado';
        }else{
          this.calificacionletra = 'Reprobado';
        }
      }

      init(){
        $.ajax({
          url: 'evaluaciones/initEvaluacion.php',
          type:'POST',
          data:{numempl:this.numempleado,evaluacion:this.evaluacion,estado:this.estado,calificacion:this.calificacion,aciertos:this.aciertos,puntos:this.puntos,calificacionletra:this.calificacionletra,tiempo:this.tiempo,status:this.status,idestado:this.idestado,cronometro:this.cronometro},
          success: function(respuesta) {
            var _data = JSON.parse(respuesta);
            if (_data.code == '200') {
              $('#estado').val(_data.idestado);

            }else{
              Swal.fire({
                html: _data.msg,
                icon: _data.icon,
                onBeforeOpen: function () {},
                onOpen: function () {
                  $('.layer-load').hide();
                },
                onRender: function () {},
                onClose: function () {
                  $('.btn-return').click();
                },
                onAfterClose: function () {}
              });
            }
          },
          error: function() {
            Swal.fire({
              html: 'Hubo un error al procesar los datos',
              icon: 'error',
              onBeforeOpen: function () {},
              onOpen: function () {
                $('.layer-load').hide();
              },
              onRender: function () {},
              onClose: function () {
                $('.btn-return').click();
              },
              onAfterClose: function () {}
            });
          }
        });
      }

      push(tiempo,estado){
          this.tiempo = tiempo;
          this.idestado = estado;
          this.cronometro = timer.getProgress();
          this.status = 'push';

          this.init();
      }

      finish(tiempo,estado){
          this.tiempo = tiempo;
          this.idestado = estado;
          this.status = 'finish';
          this.estado = 'completed';

          this.init();
      }

      cancel(){
        this.estado = 'cancel';
        this.tiempo = timer.getTime();
        this.init();
      }

    }
    //---------------------------------------------------------------
    //----------------------- CRONOMETRO ----------------------------
    //---------------------------------------------------------------
    class Temporizador {
        constructor() {
            this.interval;
            this.time = '00:00:00';
            this.limit;
            this.length;
            this.aux = 0;
            this.switch = 60;
            this.segundos = 0;
            this.minutos = 0;
            this.hora = 0;
            this.formatsegundos = '00';
            this.formatminutos = '00';
            this.formathoras = '00';
        }
        getTime() {
            return this.time;
        }

        getProgress() {
            return this.aux;
        }

        postLimit(limit){
          this.limit = limit;
          let sec = this.limit*60;
          this.length = 100/sec;
        }

        init(limit) {

            this.interval = setInterval(() => {

              if (this.segundos%5 == 0) {
                commit.push(this.getTime(),$('#estado').val());
              }


              this.segundos++;
              this.aux;
              $('.progress-bar').width(this.aux+'%');
              //console.log(this.aux);
              this.aux = (this.aux+this.length);

              if (this.segundos == this.switch) {
                this.minutos++;
                this.segundos = 0;
              }

              if (this.minutos == this.switch) {
                this.hora++;
                this.minutos = 0;
              }

              if (this.minutos == this.limit) {
                alert();
              }


              if (this.segundos <= 9) {
                this.formatsegundos = '0'+this.segundos;
              }else{
                this.formatsegundos = this.segundos;
              }

              if (this.minutos <= 9) {
                this.formatminutos = '0'+this.minutos;
              }else{
                this.formatminutos = this.minutos;
              }

              if (this.hora <= 0) {
                this.formathoras = '0'+this.hora;
              }else{
                this.formathoras = this.hora;
              }

              this.time = this.formathoras+':'+this.formatminutos+':'+this.formatsegundos;
              $('._time').html(this.time);
            }, 1000);
        }
      
        reload(tiempo,cronometro) {
            var str = tiempo;
            var res = str.split(":");
            let horaint = parseInt(res[0]);
            let minutosint = parseInt(res[1]);
            let segundosint = parseInt(res[2]);
            
            this.hora = horaint;
            this.minutos = minutosint;
            this.segundos = segundosint;
            this.aux = parseInt(cronometro);
            this.time = tiempo;
        }

        stop() {
          console.log('stop');
          clearInterval(this.interval)
        }
    }
    //---------------------------------------------------------------
    //------- RESULTADO DE EVALUACIONES APLICADAS -------------------
    //---------------------------------------------------------------
    function resultados(data){
      $('.table-data tbody').empty();

      if (data.aplicado >= 1) {

        $.each(data.datos, function (k, col) {

          let estado;
          //console.log(col[5]);
          switch(col[5]) {
            case 'completed':
                estado = 'Completado';
              $('#btn_init').html('Comenzar evaluación');
              $('#btn_init').attr('data-mode','new');
              break;
            case 'cancel':
              estado = 'Cancelado por limite de tiempo';
              $('#btn_init').html('Comenzar evaluación');
              $('#btn_init').attr('data-mode','new');
              break;
            case 'incomplete':
              $('#btn_init').html('Continuar evaluación');
              $('#btn_init').attr('data-mode','recove');
              timer.reload(col[3],col[4]);
              commit.postData(col[0]);
              //$('#aciertos').val(col[7]);
              //$('#puntos').val(col[8]);
              commit.postPoint(col[8],col[7]);
              estado = 'No completado';
            break;
          }


          if (col[2] == 'Aprobado') {
            $('.constancia-evaluacion').show();
            column = '<tr class="table-success">'+
                      '<td >'+col[1]+'</td>'+
                      '<td >'+col[2]+'</td>'+
                      '<td >'+col[3]+'</td>'+
                      '<td >'+estado+'</td>'+
                      '<td >'+col[6]+'</td>'+
                  '</tr>';
          }else if(col[2] == 'Reprobado'){
            column = '<tr class="table-danger">'+
                      '<td >'+col[1]+'</td>'+
                      '<td >'+col[2]+'</td>'+
                      '<td >'+col[3]+'</td>'+
                      '<td >'+estado+'</td>'+
                      '<td >'+col[6]+'</td>'+
                  '</tr>';
          }else{
            column = '<tr>'+
                      '<td >'+col[1]+'</td>'+
                      '<td >'+col[2]+'</td>'+
                      '<td >'+col[3]+'</td>'+
                      '<td >'+estado+'</td>'+
                      '<td >'+col[6]+'</td>'+
                  '</tr>';
          }

          $(".table-data tbody").append(column); 
        });
        $('.result-evaluacion').show();
      }else{
        $('#btn_init').attr('mode','new');
      }

    }

    //---------------------------------------------------------------
    //--------------------- SEND PREGUNTA ---------------------------
    //---------------------------------------------------------------
    function alert(){
                Swal.fire({
                  html: 'Se ha agotado el tiempo para completar la evaluación',
                  icon: 'warning',
                  onBeforeOpen: function () {},
                  onOpen: function () {
                    commit.cancel();
                    timer.stop();
                  },
                  onRender: function () {},
                  onClose: function () {
                    location.reload();
                  },
                  onAfterClose: function () {}
                });
    }


    //---------------------------------------------------------------
    //--------------------- SEND PREGUNTA ---------------------------
    //---------------------------------------------------------------
    $(".formcontroller").validate({
        submitHandler: function (form) {
          $('.layer-load').show();

          var controller = 'evaluaciones/saveEvaluacion.php';
          $.ajax({
              url: controller,
              type: 'POST',
              data: $(".formcontroller").serializeArray(),
            })
            .done(function (response) {
              var _data = JSON.parse(response);

              if (_data.code == '200') {
                var tabsig;
                var tabant;
                $(".nav-link").each(function() {
                    if($(this).hasClass('active')){
                      tabsig = $(this).attr('data-nav');
                    }
                });


                if (retro == 'Activado'){
                  var html = '';
                  var icon = '';
                  if (_data.acertadas == true) {
                    html = 'Respuesta correcta';
                    icon = 'success';
                  }else{
                    html = 'Respuesta incorrecta';
                    icon = 'error';
                  }


                  Swal.fire({
                    html: html,
                    icon: icon,
                    onBeforeOpen: function () {},
                    onOpen: function () {
                      $('.layer-load').hide();
                    },
                    onRender: function () {},
                    onClose: function () {
                      if (_data.section == 'terminar') {
                        $('.layer-load').hide();
                        timer.stop();
                        let puntos = (parseFloat(commit.getPuntos())+parseFloat(_data.puntos));
                        let aciertos = (parseInt(commit.getAciertos())+parseInt(_data.aciertos));
                        commit.postPoint(puntos,aciertos);
                        commit.push(timer.getTime(),$('#estado').val());
                        commit.calculate();
                        commit.finish(timer.getTime(),$('#estado').val());

                        setTimeout(function(){ location.reload(); }, 1000);
                      }else{
                        tabant = parseInt(tabsig)-1;
                        $('#idpregunta'+tabant).attr('disabled',true);
                        $('#answerseva'+tabant+' input').attr('disabled',true);
                        $('#idpregunta'+tabsig).attr('disabled',false);
                        $('#scorepregunta'+tabsig).attr('disabled',false);
                        $('#type'+tabsig).attr('disabled',false);
                        let puntos = (parseFloat(commit.getPuntos())+parseFloat(_data.puntos));
                        let aciertos = (parseInt(commit.getAciertos())+parseInt(_data.aciertos));
                        commit.postPoint(puntos,aciertos);
                        commit.push(timer.getTime(),$('#estado').val());
                        $('.layer-load').hide();
                      }
                    },
                    onAfterClose: function () {}
                  });
                }else{
                  if (_data.section == 'terminar') {
                    $('.layer-load').hide();
                    timer.stop();
                    let puntos = (parseFloat(commit.getPuntos())+parseFloat(_data.puntos));
                    let aciertos = (parseInt(commit.getAciertos())+parseInt(_data.aciertos));
                    commit.postPoint(puntos,aciertos);
                    commit.push(timer.getTime(),$('#estado').val());
                    commit.calculate();
                    commit.finish(timer.getTime(),$('#estado').val());

                    setTimeout(function(){ location.reload(); }, 1000);
                  }else{
                    tabant = parseInt(tabsig)-1;
                    $('#idpregunta'+tabant).attr('disabled',true);
                    $('#answerseva'+tabant+' input').attr('disabled',true);
                    $('#idpregunta'+tabsig).attr('disabled',false);
                    $('#scorepregunta'+tabsig).attr('disabled',false);
                    $('#type'+tabsig).attr('disabled',false);
                    let puntos = (parseFloat(commit.getPuntos())+parseFloat(_data.puntos));
                    let aciertos = (parseInt(commit.getAciertos())+parseInt(_data.aciertos));
                    commit.postPoint(puntos,aciertos);
                    commit.push(timer.getTime(),$('#estado').val());
                    $('.layer-load').hide();
                  }
                }

              }else{
                Swal.fire({
                  html: _data.msg,
                  icon: _data.icon,
                  onBeforeOpen: function () {},
                  onOpen: function () {},
                  onRender: function () {},
                  onClose: function () {},
                  onAfterClose: function () {}
                });
              }
            })
            .fail(function () {
              Swal.fire({
                html: 'Hubo un error al procesar los datos',
                icon: 'error',
                onBeforeOpen: function () {},
                onOpen: function () {
                  $('.layer-load').hide();
                },
                onRender: function () {},
                onClose: function () {
                  $('.btn-return').click();
                },
                onAfterClose: function () {}
              });
            })
            .always(function () {
              //console.log("complete");
            });
        },
        rules: {
          idencuesta: {
            required: true
          }
        }
      });


    getEvaluacion($('#idevaluacion').val(),$('#numerodeempleado').val());
    const timer = new Temporizador();
    const commit = new Commit($('#idevaluacion').val(),$('#numerodeempleado').val());

  });