@extends('dashboard.layouts.default')
@section('content')
<section class="top-section revision">
  <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  class="row" method="post" novalidate="novalidate" id="q_form" name="question_form" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="col-lg-12 mb-2">
          <div class="card">
            <div class="card-body">
              <div class="row g-1 align-items-center revision-option">
                <div class="col">
                  <a href="{{ url('teacher/lsq/quiz-questions') }}" class="btn btn-revision-head {{$quiz_id==4?'active':''}}">
                  @if(USER_ROLE == 'teacher')Retrieval Practice @else LSQ Maker @endif</a>
                </div>
                <div class="col">
                  <a href="{{ url('teacher/lsq/formula-practice') }}" class="btn btn-revision-head {{$quiz_id==2?'active':''}}">
                  Formula Practice </a>
                </div>
              </div>
              @if($quiz_id == 4 )
              <div class="mt-1">
              @foreach($curriculumAll as $row)
                <button type="button" class="btn btn-subject btn-eb btn-eb-{{$row['id']}}" onclick="setCurriculum(this.id)" id="{{$row['id']}}">{{$row['name']}}</button>
              @endforeach
                <!--<button type="button" class="btn btn-subject btn-eb btn-eb-{{$curriculum_id}}" onclick="setCurriculum(this.id)" id="{{$curriculum_id}}">KS4</button>
                <button type="button" class="btn btn-subject btn-eb btn-eb-{{$ks3_id}}" onclick="setCurriculum(this.id)" id="{{$ks3_id}}">KS3</button>-->
              </div>
              @endif
              @if($quiz_id != 2 && $quiz_id != 3 )
              <div class="mt-1">
                @foreach($subjects as $key=>$subject)
                <button type="button"
                  class="btn btn-subject btn-sb btn-sb-{{ $subject->id }}"
                  onclick="setSubject(this.id)"
                  id="{{ $subject->id }}"> {{ $subject->name }}  </button>
                @endforeach
              </div>
              @endif
              @if($quiz_id != 2 && $quiz_id != 3 )
              <ul class="mt-1 topic-head"></ul>
              @endif
            </div>
          </div>
        </div>
        <div class="floatcard sticky-top mb-2">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="box-body">
                <div class="questions_module">
                  <div class="row g-2 align-items-center syll-head">
                    <div class="col-md-6" style=" display: none !important; ">
                      <div class="d-flex align-items-center justify-content-center text-center">
                        <h6 class="mb-0">Select no of questions :</h6>
                        <button type="button" class="btn btn-count selqstn" value="10" onclick="questionSelected($(this).val())" id="btnqno-110">10</button>
                        <button type="button" class="btn btn-count selqstn" value="20" onclick="questionSelected($(this).val())" id="btnqno-20">20 </button>
                        <button type="button" class="btn btn-count selqstn" value="30" onclick="questionSelected($(this).val())" id="btnqno-30">30 </button>
                      </div>
                    </div>
                    <div class="col-md-7 startbtn">
                      <div class="d-flex align-items-center justify-content-center text-center">
                        @if(SESSION::get('slug')=='quiz-questions')
                        <h6 class="mb-0">Select quizzes below and then select number of questions :</h6>
                        @elseif(SESSION::get('slug')=='formula-practice')
                        <h6 class="mb-0">Please select the number of questions :</h6>
                        @endif
                        <button type="button" class="btn btn-count selqstn" value="5" onclick="questionSelected($(this).val())" id="btnqno-5">5</button>
                        <button type="button" class="btn btn-count selqstn" value="10" onclick="questionSelected($(this).val())" id="btnqno-10">10 </button>
                        <button type="button" id="start_quiz" class="btn btn-success disabled" disabled>Next</button>
                      </div>
                    </div>
                    <div class="col">
                      <button type="button" id="reset_quiz" class="btn btn-outline-primary float-end" style=" @if($quiz_id == 2 || $quiz_id == 3)display: none;@endif">
                      Reset
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <input type="hidden" id="current_question_number"/>
        <div class="col-xl-12 mb-4">
          @if($quiz_id != 2 && $quiz_id != 3 )
          <div class="row g-2 syllubus-div">
            <div class="col-md-12 no-data-found" style="display:none;">
              <div class="subject-detail-box-section">
                <div class="listed-section">
                  <h4>No videos and quizzes found</h4>
                </div>
              </div>
            </div>
            <div class="col-md-6" id="col-paper1">
            </div>
            <div class="col-md-6" id="col-paper2">
            </div>
					</div>
				</div>
				<div class="question-div">
				</div>
				@else
				@php
				$btntxt = $quiz_id == 2?'Formula Practice':'Converting Units';
				@endphp
				<div class="text-center">
					<button type="button" class="btn btn-primary btn-lg formula-practice"
						style="font-size: 25px; display: none;">
					Start {{ $btntxt}}</button>
				</div>
				@endif
				<div class="form-group row">
					<label for="inputEmail3" class="col-sm-10 control-label">&nbsp; </label>
					<div class="col-sm-2 qstn-btn-wrapper">
						<input type="hidden" name="subject_id" id="subject_id">
						<input type="hidden" name="curriculum_id" id="curriculum_id"
							value="">
						<input type="hidden" name="question_type" id="question_type">
						<input type="hidden" name="select_topic" id="select_topic">
					</div>
				</div>
      </form>
    </div>
    <div id="div_questions" style="display: none;">
      <div class="row">
        <div class="col-xl-12">
          <div class="card card-custom gutter-b">
            <div class="card-body ">
              <div class="card-body flex-grow-1" id="questions">
                <div class="row">
                  <div class="col-lg-12" id="questionDataDiv">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- include('layout.bottom-ads') -->
  </div>
</section>
@endsection
@section('scripts')
<script src="{{ asset('js/pages/question/question.js') }}"></script>
<script>
  console.log('opening '+{{$quiz_id}});
  var questionUrl = "{{ url('teacher/lsq') }}";
  // $('#overlay').fadeIn();
  var checkedIds = Array();
  var paper1_topic_count = 0;
  var paper2_topic_count = 0;
  
  $(document).ready(function () {
    @if($quiz_id == 2 || $quiz_id == 3)
      $("#start_quiz").hide();
      $(".questions_module").show();
      @else
      setSubject(1);
      setCurriculum({{$selcurriculum_id}});
      @endif
      //$("#start_quiz").addClass("btn-primary");
  });
  
  $(document).on('click', '.selected_topic', function () {
      if ($("#select_topic").val() == 1) {
          //
      } else {
          $("#select_topic").val(1);
          $(".questions_module").show();
          $(".questions_module").show();
      }
  });
  
  function selectedTopic(unit_id) {
      // alert(unit_id);
      if ($.inArray(unit_id, checkedIds) == -1) {
          checkedIds.push(unit_id);
      } else {
          checkedIds.splice($.inArray(unit_id, checkedIds), 1);
          $("#selected_topic_" + unit_id).removeClass("active");
      }
      var current_question_number = $("#current_question_number").val();
      if (current_question_number != 0) {
          questionSelected(current_question_number);
      }
  
      $.each(checkedIds, function (index, value) {
          $("#selected_topic_" + value).addClass("active");
      });
      // console.log(checkedIds)
  
  }
  
  function questionSelected(value) {
     @if($quiz_id == 2 || $quiz_id == 3)
          var quizCount = value;
       @else
      var val = checkedIds.length;
      var quizCount = val * value;
      @endif
      console.log(value);
      //console.log(val);
      console.log("#btnqno-" + value);
      $(".selqstn").removeClass('active');
      $("#btnqno-" + value).addClass('active');
      $(".totalQuestions").html('<h5 class="text-center px-3 pt-3">&nbsp;' + quizCount + ' Qs </h5>');
      $("#current_question_number").val(value);
      $(".quiz_div").show();
      @if($quiz_id == 2 || $quiz_id == 3)
      $("#start_quiz").removeClass('disabled');
        $('#start_quiz').removeAttr("disabled");
        $("#start_quiz").addClass("btn-kgreen");
      showQuiz();
      $(".formula-practice").show();
      @else
      //$("#start_quiz").show();
      if(val>0)
      {
        $("#start_quiz").removeClass('disabled');
        $('#start_quiz').removeAttr("disabled");
        $("#start_quiz").addClass("btn-kgreen");
        //$("#reset_quiz").show();
      }else{
        $("#start_quiz").removeClass('btn-kgreen');
        $('#start_quiz').attr('disabled', true);
        $("#start_quiz").addClass("disabled");
        
      }
      @endif
  
  }
  
  function setCurriculum(curriculum_id) {
      $('#curriculum_id').val(curriculum_id);
      $('.btn-eb').removeClass('active');
      $('.btn-eb-' + curriculum_id).addClass('active');
  
      checkedIds = Array();
  
      @if($quiz_id == 2 || $quiz_id == 3)
      $("#start_quiz").hide();
      @else
      //$("#start_quiz").show();
      //$("#start_quiz").addClass("btn-green");
      @endif
  
      setTopics();
  }
  
  function setSubject(subject_id) {
      $('#subject_id').val(subject_id);
      $('.btn-sb').removeClass('active');
      $('.btn-sb-' + subject_id).addClass('active');
  
      checkedIds = Array();
  
      @if($quiz_id == 2 || $quiz_id == 3)
      $("#start_quiz").hide();
      @else
      //$("#start_quiz").show();
      //$("#start_quiz").addClass("btn-green");
      @endif
  
      setTopics();
  }
  
  
  $(".formula-practice").click(function (e) {
      e.preventDefault();
      startQuiz();
  });
  
  $("#start_quiz").click(function (e) {
      e.preventDefault();
      showQuiz();
  });
  
  $("#reset_quiz").click(function (e) {
      e.preventDefault();
      checkedIds = Array();
      $('.selqstn').removeClass('active');
      //$('#start_quiz').addClass("btn-green");
      $("#start_quiz").removeClass('btn-kgreen');
        $('#start_quiz').attr('disabled', true);
        $("#start_quiz").addClass("disabled");
      $('.selected_topic').removeClass('active');
      $(".totalQuestions").html('<h5 class="text-center px-3 pt-3">&nbsp;0 Qs </h5>');
  });
  
  
  function showQuiz() {
      var country_id = $("#country_id").val();
      var curriculum_id = $("#curriculum_id").val();
      var subject_id = $("#subject_id").val();
      var question_category = '{{ $quiz_id }}';
      var current_question_number = $("#current_question_number").val();
      // checkedIds = encodeURIComponent(checkedIds);
      var token = "{{ csrf_token() }}";
      var is_submit = 1;
      console.log(question_category);
      if (question_category == 1 || question_category == 4) {
          if (checkedIds.length == 0) {
              showAlert("Please select any lessons", "error");
              is_submit = 0;
          }
      }
      if (is_submit == 1) {
          $.ajax({
              url: "{{ url('teacher/lsq/'.$slug.'/setQuiz') }}",
              type: "POST",
              data: {
                  'country_id': country_id,
                  'curriculum_id': curriculum_id,
                  'subject_id': subject_id,
                  'question_category': question_category,
                  'current_question_number': current_question_number,
                  'checkedIds': checkedIds,
                  _token: token
              },
              dataType: "html"
          }).done(function (data) {
             @if($quiz_id===4||$quiz_id===1)
                   window.location.href = "{{ url('teacher/lsq/'.$slug.'/start') }}";    
             @endif
              // $("#div_list").hide();
              // $("#questionDataDiv").html(data);
              // $("#div_questions").show();
          })
      }
  }
  
  function startQuiz(){
           window.location.href = "{{ url('teacher/lsq/'.$slug.'/start') }}";    
  }
  // function setCurriculum(curriculum_id){
  //    $('#curriculum_id').val(curriculum_id);
  //    $('.btn-cur').removeClass('active');
  //    $('.btn-cur-'+curriculum_id).addClass('active');
  //     setTopics();
  // }
  
  $(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('teacher/lsq/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') }}";
          }
  
      });
  
  });
  
  function setTopics() {
      var country_id = $("#country_id").val();
      var curriculum_id = $("#curriculum_id").val();
      var subject_id = $("#subject_id").val();
      var token = "{{ csrf_token() }}";
      if (subject_id != '') {
          $.ajax({
              url: "{{ url('teacher/lsq/getTopicCodes') }}",
              type: "POST",
              data: {
                  // 'country_id': country_id,
                  'curriculum_id': curriculum_id,
                  'subject_id': subject_id,
                  _token: token
              },
              dataType: "json"
          }).done(function (data) {
  
              $(".topic-head").html(data.html);
              paper1_topic_count = data.paper1_topics;
              paper2_topic_count = data.paper2_topics;
  
              getSyllubus(1, 0); //paper_1
              getSyllubus(2, 0); //paper_2
              $(".syllubus-div").show();
              $(".question-div").hide();
          })
      }
  }
  
  
  var paper1_load = 0;
  var paper2_load = 0;
  
  function getSyllubus(paper_id, load) {
      $('.no-data-found').hide();
      if (load == 0)
          $(".loader").hide();
      if (paper_id == 1)
          paper1_load = load;
      else
          paper2_load = load;
  
      var country_id = $("#country_id").val();
      var curriculum_id = $("#curriculum_id").val();
      var subject_id = $("#subject_id").val();
      var token = "{{ csrf_token() }}";
      if (curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('teacher/lsq/getSyllubus') }}",
              type: "POST",
              data: {
                  //'country_id': country_id,
                  'curriculum_id': curriculum_id,
                  'subject_id': subject_id,
                  'paper_id': paper_id,
                  'load': load,
                  _token: token
              },
              dataType: "html"
          }).done(function (data) {
              if (load == 0) {
                  if (paper_id == 1)
                      $('#col-paper1').html(data);
                  else
                      $('#col-paper2').html(data);
              } else {
                  if (paper_id == 1)
                      $('#col-paper1').append(data);
                  else
                      $('#col-paper2').append(data);
              }
  
              if (paper_id == 1 && paper1_load < paper1_topic_count) {
                  paper1_load++;
                  getSyllubus(1, paper1_load);
              } else if (paper_id == 2 && paper2_load < paper2_topic_count) {
                  paper2_load++;
                  getSyllubus(2, paper2_load);
              }
  
              // if(paper1_load ==paper1_topic_count && paper2_load == paper2_topic_count){
  
              //    var numItems = $('.unit-title').length;
              //    console.log(numItems);
              //    if(numItems==0){
              //        $('.no-data-found').show();
              //    }else{
              //        $('.no-data-found').hide();
              //    }
  
              // }
  
              $('#overlay').fadeOut();
  
          })
      }
  
  }
  
  function gotoTopic(id) {
      var scrollPos = $("#topic-" + id).offset().top;
      //console.log(scrollPos);
      $(window).scrollTop(scrollPos - 350);
  }
  
  
  function createQuestion(unit_id) {
      $('#overlay').fadeIn();
      var country_id = $("#country_id").val();
      var curriculum_id = $("#curriculum_id").val();
      var subject_id = $("#subject_id").val();
      var unit_id = unit_id;
      var token = "{{ csrf_token() }}";
      $.ajax({
          url: "{{ url('teacher/lsq/makeQuestion') }}",
          type: "POST",
          data: {
              //'country_id': country_id,
              'curriculum_id': curriculum_id,
              'subject_id': subject_id,
              'unit_id': unit_id,
              _token: token
          },
          dataType: "json"
      }).done(function (data) {
          if (data.flagError) {
              showAlert(data.message, "error");
          } else {
              console.log(data);
              $(".question-div").html(data.html);
              $(".syllubus-div").hide();
              $(".question-div").show();
              $(".syll-head").html(data.sel_syll);
              var top_id = data.topic_id;
              $('.btn-top').removeClass('active');
              $('.btn-top-' + top_id).addClass('active');
              init();
              chooseQuestion(1);
  
          }
  
      })
  
  }
  
  $("#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;
  });
  
  
  function getNextQuestion(row_id, enable, quest_id, quest_type) {
      if (quest_type == 2) {
          $(".valid-error").remove();
          var token = "{{ csrf_token() }}";
          var answer = $("#oneword_ans_" + quest_id).val();
          if (answer == '') {
              $('#cstm_oneword_' + quest_id).append('<span class="valid-error"> Please Enter Your Answer </span>');
              submit_flag = 1;
              return false;
          } else {
              $.ajax({
                  url: "{{ url('teacher/lsq/quiz-answer') }}", type: 'POST',
                  data: {"question_id": quest_id, "answer": answer, _token: token},
              }).done(function (data) {
                  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) {
                      $('#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>');
                  } 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>');
                  }
  
                  $('#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);
          }
      }
  }
  
  function reportIssue(question_id, correct_answer, is_correct) {
      var answer = $('#oneword_ans_' + question_id).val();
      var question = $('#cstm_oneword_' + question_id).data('question');
      var submitted;
      console.log(answer, question_id);
      $('#question').html(question);
      if (is_correct) {
          submitted = answer;
      } else {
          submitted = answer + '&emsp;&emsp; Correct: ' + correct_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