@extends('dashboard.layouts.default')
@section('page_toolbar')
<input type="hidden" id="question_category" value="{{$quiz_id}}">
@endsection
@section('content')
<section class="top-section revision-quiz">
  <div class="container">
    <div id="div_list">
      @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
          @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
      @endif
      <form method="post" novalidate="novalidate" id="q_form" name="question_form" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="row">
          <input type="hidden" id="current_question_number"/>
          <div class="question-div">
          </div>
        </div>
      </form>
    </div>
    <div id="div_questions" style="display: none;">
      <div class="row">
        <div class="col-lg-12">
          <div class="card mb-3">
            <div class="card-body" id="questions">
              <div id="questionDataDiv"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@include('layout.report_issue')
@endsection
@section('pagescripts')
<script src="{{ asset('js/pages/question/question.js') }}"></script>
<script>
  $(window).scroll(function (e) {
      var $el = $('.floatcard');
      var isPositionFixed = ($el.css('position') == 'fixed');
      if ($(this).scrollTop() > 200 && !isPositionFixed) {
          $el.css({'position': 'fixed', 'top': '0px'});
      }
      if ($(this).scrollTop() < 200 && isPositionFixed) {
          $el.css({'position': 'static', 'top': '0px'});
      }
  });
</script>
<script>
  var questionUrl = "{{ url('revision') }}";
  showQuiz();
  function showQuiz() {
      var token = "{{ csrf_token() }}";
      $.ajax({
          url: "{{ url('revision/showQuiz') }}",
          type: "POST",
          data: {
              _token: token
          },
          dataType: "html"
      }).done(function (data) {
          $("#div_list").hide();
          $("#questionDataDiv").html(data);
          $("#div_questions").show();
      })
  
  }
  
  $(document).on('click', '#st_answer_sbmt', function (e) {
      e.preventDefault();
      $('.oneword_ans_error').html('');
  
      var pre_questionId = 0;
      var multi_ans = [];
      var submit_flag = false;
      var multi_flag = false;
  
      check = true;
  
      multi_flag = true;
      submit_flag = true;
      form = $('#questionForm');
      var formData = new FormData(form[0]);
  
      $.ajax({
          url: "{{ url('revision/submit/answer/') }}", type: 'POST',
          type: form.attr('method'),
          data: formData,
          processData: false,
          contentType: false
      }).done(function (data) {
          if (data.error) {
          } else {
              window.location.href = "{{ url('performance') }}";
          } 
      });
  
  });
  
  
  $("#mark").keypress(function (e) {
      $(this).val(Math.min(5, Math.max(1, $(this).val())));
  });
  
  function quizUpdate(quiz_id) {
  
      var check_quizs = [];
      var check_videos = [];
      var quiz_id = quiz_id;
  
      $('input:checkbox.checkquiz').each(function () {
          var sThisVal = (this.checked ? check_quizs.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkvideo').each(function () {
          var sThisVal = (this.checked ? check_videos.push($(this).val()) : "");
      });
  
  
      if ((check_quizs.length != 0) || (check_videos.length != 0)) {
          $.ajax({
              url: "{{ url('admin/quiz/set-units') }}", type: 'POST',
              data: {"check_quizs": check_quizs, 'check_videos': check_videos, 'quiz_id': quiz_id},
          }).done(function (data) {
              if (data.status == 'success') {
                  showAlert(data.message, "success");
                  setCountry(1);
                  // location.reload();
              } else {
                  alert("Error! Please try again.")
              }
          });
      } else {
          alert("Please select any units !");
      }
  
  }
  
  var isLoading = false;
  $(document).on('keydown', '.oneword_ans', function (e) {
  
      if (e.which == 13) {
          $(".valid-error").remove();
          if (this.value == '') {
  
              id = this.id.split('oneword_ans_');
              $('#cstm_oneword_' + id[1]).append('<span class="valid-error"> Please Enter Your Answer </span>');
              submit_flag = 1;
              return false;
          }
          if (!isLoading) {
              isLoading = true;
              e.preventDefault();
              id = this.id;
              $('#' + id).addClass('keydisabled');
              $('.btnnxt:visible').trigger('click');
              return false;
          }
      }
  });
  
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
   
  $(document).on('keydown', '.txt_scnd-chance', function (e) {
                      isLoading = false;
                      if (e.which == 13) {
                          $(".valid-error").remove();
                          if (this.value == '') {
  
                              id = this.id.split('oneword_ans_');
                              $('#cstm_oneword_' + id[1]).append('<span class="valid-error"> Please Enter Your Answer </span>');
                              submit_flag = 1;
                              return false;
                          }
                          if (!isLoading) {
                              isLoading = true;
                              e.preventDefault();
                              id = this.id;
                              $('#' + id).addClass('keydisabled');
                              $('.btnnxt:visible').trigger('click');
                              return false;
                          }
                      }
    });

    $(document).ready(function() {
        $(document).on('click', '.multiple_single-ans', function (e)
        {
                qid = this.id;
                var questionid = $("#" + qid).attr('data-qid');
                var qanswer    = $("#" + qid).attr('data-answer');
                var answer     = this.value;
                var rowid      = qid.split("opt_")[1]; 
                getNextQuestion(rowid,1,questionid,1);
        });
    });
  
    function getNextQuestion(row_id, enable, quest_id, quest_type)
    {
      if (quest_type == 1) {
          $(".valid-error").remove();
          var token = "{{ csrf_token() }}";
          var answer = $('input[name="set_opt_ans_' + quest_id + '"]:checked').val();
          $('input[name="set_opt_ans_' + quest_id + '"]').prop('disabled', true);
          $("#btn"+row_id).attr('disabled', true);
          var chance = 1;
          if (answer == '') {
              $('#cstm_oneword_' + quest_id).append('<span class="valid-error"> Please Select Your Answer </span>');
              $('input[name="set_opt_ans_' + quest_id + '"]').removeAttr('disabled');
              $("#btn"+row_id).removeAttr('disabled');
              submit_flag = 1;
              return false;
          }  else {
            $.ajax({
                  url: "{{ url('revision/quiz-answer') }}", type: 'POST',
                  data: {"question_id": quest_id,"question_type":'1', "answer": answer, "chance":chance, _token: token},
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              }).done(function (data) {
                  $("#btn"+row_id).removeAttr('disabled');
                  var return_data = data.return_data;
                  var answerText =   $(".label_"+answer).html();
                  console.log(answerText);
                  var correct_answer = return_data['original_answer'];
                  if (return_data['is_correct'] == 0) {
                      console.log('1');
                      console.log(answerText);
                      $(".label_"+answer).html(answerText+" ✖ ");
                      $(".label_"+answer).css('color','red');
                      $(".label_"+answer).css('fontWeight','bold');
                      $(".label_"+answer).css('fontSize','medium');;
                      $('#cstm_multipleoption_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                      '</h4></div>');
                      $("#chance").remove();
                      $('.radiooption_' + return_data['id']).addClass('keydisabled');
                      $("#questionDiv_" + row_id).show();
                      $("#next_btn_div_" + row_id).hide();
                      if (enable != 0) {
                          $('#st_answer_sbmt').prop('disabled', false);
                      }
                      isLoading = false;
                   } else {
                      console.log('2');
                      $(".label_"+answer).html(answerText+" ✔ ");
                      $(".label_"+answer).css('color','green');
                      $(".label_"+answer).css('fontWeight','bold');
                      $(".label_"+answer).css('fontSize','medium');
                      $('#cstm_multipleoption_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                      '</h4></div>');
                      $('#radiooption_' + return_data['id']).addClass('keydisabled');
  
                      $("#questionDiv_" + row_id).show();
                      $("#next_btn_div_" + row_id).hide();
                      if (enable != 0) {
                          $('#st_answer_sbmt').prop('disabled', false);
                      }
                      isLoading = false;
                  }
                  
              });
          }
      }
      else if (quest_type == 2) {
          $(".valid-error").remove();
          var token = "{{ csrf_token() }}";
          var answer = $("#oneword_ans_" + quest_id).val();
          $("#oneword_ans_" + quest_id).attr('disabled', true);
          $("#btn"+row_id).attr('disabled', true);
          var chance = $("#chance").val();
          if (answer == '') {
              $('#cstm_oneword_' + quest_id).append('<span class="valid-error"> Please Enter Your Answer </span>');
              $("#oneword_ans_" + quest_id).removeAttr('disabled');
              $("#btn"+row_id).removeAttr('disabled');
              submit_flag = 1;
              return false;
          } else {
              $.ajax({
                  url: "{{ url('revision/quiz-answer') }}", type: 'POST',
                  data: {"question_id": quest_id,"question_type":'1', "answer": answer, "chance":chance, _token: token},
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              }).done(function (data) {
                  $("#btn"+row_id).removeAttr('disabled');
                  var return_data = data.return_data;
                  var answer = $('#oneword_ans_' + return_data['id']).val();
                  var correct_answer = return_data['original_answer'];
                  if (return_data['is_correct'] == 0 && return_data['chance'] == '' ) {
                      $('#oneword_ans_' + return_data['id']).addClass('txt-danger');
                      $('#oneword_ans_' + return_data['id']).css('color', 'red');
                      $('#oneword_ans_' + return_data['id']).css('font-weight', 'bold');
                      $('#oneword_ans_' + return_data['id']).css('font-size', 'medium');
                      $('#oneword_ans_' + return_data['id']).val(answer + '      ✖');
                      $("#oneword_ans_" + return_data['id']).attr("id", 'old-ans-' + return_data['id']);
                     // $("#cstm_oneword_" + return_data['id']).append('<div class="answer-danger"> <h4>  Your answer or spelling is wrong...Try again! </h4></div>');
                      $("#cstm_oneword_" + return_data['id']).append('<div class="answer-danger"> <h4>  Your answer or spelling is wrong...Try again!  <a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                      $("#cstm_oneword_" + return_data['id']).append('<div class="second-chance form-group custom_grp_fm"><input type="text" name="txt_single_answer"  class="form-control txt_scnd-chance  bg-white"  id="oneword_ans_'+ return_data['id'] + '" data-id="' + return_data['id'] + '" autocomplete="off" placeholder="Please try again"> <input type="hidden" id="chance" name="chance" value="2"></div>');
                      $('#oneword_ans_' + return_data['id']).focus();
                      $('.btn-sin-sub').removeAttr("disabled");
                      
                  }
                  else if (return_data['is_correct'] == 0) {
                      $('#oneword_ans_' + return_data['id']).addClass('txt-danger');
                      $('#oneword_ans_' + return_data['id']).css('color', 'red');
                      $('#oneword_ans_' + return_data['id']).css('font-weight', 'bold');
                      $('#oneword_ans_' + return_data['id']).css('font-size', 'medium');
                      $('#oneword_ans_' + return_data['id']).val(answer + '      ✖');
                     // $('#cstm_oneword_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                       //   '</h4></div>');
                      $('#cstm_oneword_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                          '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                          $("#chance").remove();
                      $('#oneword_ans_' + return_data['id']).removeAttr("name");
                      $('#oneword_ans_' + return_data['id']).addClass('keydisabled');
                      $("#questionDiv_" + row_id).show();
                      $("#next_btn_div_" + row_id).hide();
                      if (enable != 0) {
                          $('#st_answer_sbmt').prop('disabled', false);
                      }
                      isLoading = false;
                      $("#questionDiv_" + row_id).find('input[type=text]').focus();
                   } else {
                      $('#oneword_ans_' + return_data['id']).addClass('txt-success');
                      $('#oneword_ans_' + return_data['id']).css('color', 'green');
                      $('#oneword_ans_' + return_data['id']).css('font-weight', 'bold');
                      $('#oneword_ans_' + return_data['id']).css('font-size', 'medium');
                      $('#oneword_ans_' + return_data['id']).val(answer + '      ✔');
                      //$('#cstm_oneword_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                        //  '</h4></div>');

                      $('#cstm_oneword_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                          '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                          $('#oneword_ans_' + return_data['id']).removeAttr("name");
                      $('#oneword_ans_' + return_data['id']).addClass('keydisabled');
  
                      $("#questionDiv_" + row_id).show();
                      $("#next_btn_div_" + row_id).hide();
                      if (enable != 0) {
                          $('#st_answer_sbmt').prop('disabled', false);
                      }
                      isLoading = false;
                      $("#questionDiv_" + row_id).find('input[type=text]').focus();
                  }
                  
              });
          }
      } else {
          $("#questionDiv_" + row_id).show();
          $("#next_btn_div_" + row_id).hide();
          if (enable != 0) {
              $('#st_answer_sbmt').prop('disabled', false);
          }
      }
      $('#work_progress').val(0);
  }
  
  function reportIssue(question_id, correct_answer, is_correct) {
      var answer = $('#oneword_ans_' + question_id).val();
      if(answer=='')
      var answer = $('#old-ans-' + question_id).val();
      var question = $('#cstm_oneword_' + question_id).data('question');
      var submitted;
      $('#question').html(question);
      if (is_correct) {
          submitted = answer;
      } else {
          submitted = answer ;
      }
      $('#canswer').html(submitted);
      $('#question_id').val(question_id);
      $('#answer').val(answer);
      $('#correct_answer').val(correct_answer);
      $('#is_correct').val(is_correct);
      $('#reportModal').modal('show');
  }
</script>
@endsection