@extends('dashboard.layouts.default')
@section('content')
@push('page-css')
<style>
  #header { display: none!important;}
  body { background: #fff;}
</style>    
@endpush
<div class="qanda sticky-top">
  <div class="container-fluid">
    <div class="row g-2 align-items-center justify-content-center text-center">
      <div class="col-md-3 col-6 order-1 d-flex justify-content-md-start justify-content-center">
        @php
        $url = 'teacher/lsq/'.$slug;
        @endphp
        <a href="{{url($url)}}" class="btn btn-back me-1 {{$quiz_id==4?'active':''}}"><i class='bx bx-chevrons-left'></i></a>
        <button class="btn btn-new {{$quiz_id==2?'active':''}}" id="new_question">New Questions</button>
      </div>
      <div class="col-md-6 col-12 order-md-2 order-3 text-center">
        <div class="form-group d-flex justify-content-center">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" type="text" name="question_title" class="form-control question_title" placeholder="Insert Title" rows="1"></textarea>
        </div>
      </div>
      <div class="col-md-3 col-6 order-md-3 order-2 d-flex justify-content-md-end justify-content-center">
        <div class="btn btn-date me-1">{{date('d/m/Y')}}</div>
        <button class="btn btn-answer {{$quiz_id==3?'active':''}}" id="answers_btn">Answers </button>
        <button class="btn btn-new {{$quiz_id==3?'active':''}}" id="questions_btn" style="display:none;">Questions </button>
      </div>
    </div>
    <input type="hidden" id="current_question_number"/>
  </div>
</div>
<section class="pb-3 min-vh-100" id="ds-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <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 div_questions" id="question-answer-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-12" id="question-div">
                @if($questions->isEmpty())
                <h4>No questions found</h4>
                @else
                {{ csrf_field() }}
                @php
                $i = 1;
                $enable = 0;
                $qno = 1;
                @endphp
                @foreach($questions as $key=>$quest)
                @php
                $curAnswerArray = explode(",", $quest->answer);
                $answer = mb_convert_encoding($curAnswerArray[0], 'UTF-8', 'UTF-8');
                @endphp
                @if($quest->question_type == 1)
                <div class="form-group row">
                  <div class="col-sm-12 col-form-label" >
                  <div class="question-lnk" data-qid="{{ $quest->qId }}" id="question-{{ $quest->qId }}"><label> {{ $qno }}. </label> {{$quest->question}}</div>
                  </div>
                  <div class="answer-lnk answer-{{$quest->qId}}" data-qid="{{ $quest->qId }}" style="display:none;">{{$answer}}</div>
                </div>
                @elseif($quest->question_type == 2)
                <div class="form-group custom_grp_fm "  data-question="{{$quest->question}}">
                  <div class="question-lnk" data-qid="{{ $quest->qId }}" id="question-{{ $quest->qId }}"><label for="">{{ $qno }}. {{$quest->question}}</label></div>
                  <div class="answer-lnk answer-{{$quest->qId}}" data-qid="{{ $quest->qId }}" style="display:none;">{{$answer}}</div>
                </div>
                @elseif($quest->question_type == 3)
                @php
                $rep_question = $quest->question;
                $count = substr_count($rep_question, '________');
                for($i=1; $i<=$count; $i++){
                $str_qs[]='<input type="text" data-question-id="fill_blank_pos_' .$i. '" class="fill_blank input-sm focusout" name="fill_blank_ans_' .$quest->qId.'[]" id="qs_'.$quest->qId.'" style="width: 200px" />';
                }
                $replacedQuestion = Str::replaceArray('________', $str_qs , $rep_question);
                @endphp
                <div class="form-group row">
                  <div class="col-sm-12 col-form-label question-lnk" id="question-{{ $quest->qId }}" data-qid="{{ $quest->qId }}">
                  <div class="question-lnk" data-qid="{{ $quest->qId }}" id="question-{{ $quest->qId }}"><label> {{ $qno }}. </label> {!! $replacedQuestion !!} <span class="text-danger" id="answer_div_error_{{$quest->qId}}" style="display: none;">Fill all fillable fields</span></div>
                  </div>
                  <div class="answer-lnk answer-{{$quest->qId}}" data-qid="{{ $quest->qId }}" style="display:none;">{{$answer}}</div>
                </div>
                @endif
                <!-- <div class="form-group row">
                  <div class="col-sm-12 col-form-label">
                      <div id="next_btn_div_{{$i}}">
                          <button type="button" class="btn btn-primary btn-lg btnnxt" data-id="{{$quest->qId}}" id="btn{{$i}}" onclick="getNextQuestion({{$i}}, {{$enable}}, {{$quest->qId}},{{$quest->question_type}})" id="nxt_btn">Submit</button>
                      </div>
                  </div>
                  </div> -->
                @php
                $i++;
                $qno++;
                @endphp
                @endforeach
                <!-- <div class="form-group row">
                  <div class="col-sm-12">
                      <input type="hidden" name="work_progress" id="work_progress" value="0">
                      <button type="button" style="float:right;" class="btn btn-danger font-weight-bold" id="st_answer_sbmt">FINISH REVISION</button>
                  </div>
                  </div> -->
                @endif
              </div>
              @php
              $i = 1;
              $enable = 0;
              $ano = 1;
              @endphp
              <div class="col-md-12" id="answer-div" style="display:none;"> 
                <input type="hidden" name="">
                @foreach($questions as $key=>$quest)
                @php
                $curAnswerArray = explode(",", $quest->answer);
                $answer = mb_convert_encoding($curAnswerArray[0], 'UTF-8', 'UTF-8');
                @endphp
                @if($quest->question_type == 1)
                <div class="form-group row">
                  <div class="col-sm-12 col-form-label">
                    <label> {{ $ano }}. </label> {{$answer}}
                  </div>
                </div>
                @elseif($quest->question_type == 2)
                <div class="form-group custom_grp_fm" id="cstm_oneword_{{ $quest->qId }}" data-question="{{$quest->question}}">
                  <label for="">{{ $ano }}. {{$answer}}</label>
                </div>
                @elseif($quest->question_type == 3)
                @php
                $rep_question = $quest->question;
                $count = substr_count($rep_question, '________');
                for($i=1; $i<=$count; $i++){
                $str_qs[]='<input type="text" data-question-id="fill_blank_pos_' .$i. '" class="fill_blank input-sm focusout" name="fill_blank_ans_' .$quest->qId.'[]" id="qs_'.$quest->qId.'" style="width: 200px" />';
                }
                $replacedQuestion = Str::replaceArray('________', $str_qs , $rep_question);
                @endphp
                <div class="form-group row">
                  <div class="col-sm-12 col-form-label">
                    <label> {{ $ano }}. </label> {!! $replacedQuestion !!} <span class="text-danger" id="answer_div_error_{{$quest->qId}}" style="display: none;">Fill all fillable fields</span>
                  </div>
                </div>
                @endif
                <!-- <div class="form-group row">
                  <div class="col-sm-12 col-form-label">
                      <div id="next_btn_div_{{$i}}">
                          <button type="button" class="btn btn-primary btn-lg btnnxt" data-id="{{$quest->qId}}" id="btn{{$i}}" onclick="getNextQuestion({{$i}}, {{$enable}}, {{$quest->qId}},{{$quest->question_type}})" id="nxt_btn">Submit</button>
                      </div>
                  </div>
                  </div> -->
                @php
                $i++;
                $ano++;
                @endphp
                @endforeach
                <!-- <div class="form-group row">
                  <div class="col-sm-12">
                      <input type="hidden" name="work_progress" id="work_progress" value="0">
                      <button type="button" style="float:right;" class="btn btn-danger font-weight-bold" id="st_answer_sbmt">FINISH REVISION</button>
                  </div>
                  </div> -->
              </div>
            </div>
            <input type="hidden" id="current_question_number"/>
          </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> -->
      </div>
      <!-- include('layout.bottom-ads') -->
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script>
  function textAreaAdjust(element) {
  element.style.height = "0px";
  element.style.height = (2+element.scrollHeight)+"px";
}
</script>
<script>
  //var questionUrl = "{{ url('revision') }}";
  // $('#overlay').fadeIn();
  //showQuiz();
  $("#new_question").click(function (e) {
      e.preventDefault();
      $("#questions_btn").hide();
      $("#answers_btn").show();
      showQuiz();
  });
  $("#questions_btn").click(function (e) {
      e.preventDefault();
      //showQuiz();
      $("#questions_btn").hide();
      $("#answers_btn").show();
      $("#answer-div").hide();
      $("#question-div").show();
  });
  $("#answers_btn").click(function (e) {
      e.preventDefault();
      //showQuiz();
      $("#answers_btn").hide();
      $("#questions_btn").show();
      $("#question-div").hide();
      $("#answer-div").show();
  });
  function showQuiz() {
      // checkedIds = encodeURIComponent(checkedIds);
      var token = "{{ csrf_token() }}";
      $.ajax({
          url: "{{ url('teacher/lsq/showQuiz') }}",
          type: "POST",
          data: {
              _token: token
          },
          
          dataType: "html"
      }).done(function (data) {
          //$("#div_list").hide();
          $("#question-answer-div").html(data);
          $("#div_questions").show();
      })
  
  }
  
  //$(".question-lnk").click(function (e) {
  $('body').on('click', '.question-lnk', function(e) {
      e.preventDefault();
      //showQuiz();
      var qid = $(this).data("qid");
      console.log(qid);
      $('#question-'+qid +' > label').css('font-size','26px');
      $('.answer-'+qid).toggle();
      if($('.answer-'+qid).is(":hidden"))
      {
        $('#question-'+qid +' > label').css('font-size','34px');
      }
  });
  
  //$(".answer-lnk").click(function (e) {
  $('body').on('click', '.answer-lnk', function(e) {
      e.preventDefault();
      //showQuiz();
      var qid = $(this).data("qid");
      $('#question-'+qid +' > label').css('font-size','34px');
      $('.answer-'+qid).hide();
  });
  
  // function setCurriculum(curriculum_id){
  //    $('#curriculum_id').val(curriculum_id);
  //    $('.btn-cur').removeClass('btn-active');
  //    $('.btn-cur-'+curriculum_id).addClass('btn-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;
  
  //     // console.log("hetre");
  //     form = $('#questionForm');
  //     var formData = new FormData(form[0]);
  //     //  console.log(formData);
  
  //     $.ajax({
  //         url: "{{ url('revision/submit/answer/') }}", type: 'POST',
  //         type: form.attr('method'),
  //         data: formData,
  //         processData: false,
  //         contentType: false
  //         // success: ajaxSuccess
  //     }).done(function (data) {
  //         if (data.error) {
  //             // $('#SubmitMessageBox').show()
  //             // location.reload();
  //         } else {
  //             window.location.href = "{{ url('performance') }}";
  //         }
  
  //         //
  //         //$.each(array1, function(key1, value1) {
  //         // $.each(value1['two']['three'], function(key1, value1) {
  //         //     document.write('test');
  //         // });
  //         //});
  
  //         // $.each(data, function(key1, value1) {
  //         //     // $.each(value1['two']['three'], function(key1, value1) {
  //         //     //     document.write('test');
  //         //     // });
  //         // });
  
  
  //     });
  
  // });
  
  
  // $("#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 !");
  //     }
  
  // }
  
  
  
  
  
  
  
  
  /*function getNextQuestion2(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();
          $("#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, "answer": answer, "chance":chance, _token: token},
                  //data: $('#questionForm').serialize() + "&question_id="+quest_id+"&fill_count=" + fill_count + "&single_count=" + single_count + "&attempt=" + attempt,
                  //dataType: "json",
                  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 + '      ✖');
                      // let qu_div_id = $("#cstm_oneword_" + return_data['id']).parent('div').attr('id');
                      // $("#cstm_oneword_" + return_data['id']).attr("id", 'old-ans-' + return_data['id']);
                      // $("#"+qu_div_id).append('<div class="answer-danger"> <h4> Either 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>');
                      // $("#"+qu_div_id).append('<div class="second-chance form-group custom_grp_fm"><input type="text" name="txt_single_answer"  class="form-control txt_single-ans"  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>');
                      // $('#cstm_oneword_'+ return_data['id']).focus();
                      // $('.btn-sin-sub').removeAttr("disabled");
  
                      //let qu_div_id = $("#cstm_oneword_" + return_data['id']).parent('div').attr('id');
                      $("#oneword_ans_" + return_data['id']).attr("id", 'old-ans-' + return_data['id']);
                      
                      $("#cstm_oneword_" + return_data['id']).append('<div class="answer-danger"> <h4> Either 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 +
                          '<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');
                      //$('#oneword_ans_' + return_data['id']).attr('disabled', true);
  
                      $("#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 +
                          '<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);
          }
      }
      // var submit_flag = 1;
      // $(".valid-error").remove();
      // $(".oneword_ans").each(function(index) {
      //   var submit_flag = 1;
      //     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;
      //     } else {
      //         submit_flag = 0;
      //         if(submit_flag == 0){
      //       $("#questionDiv_"+row_id).show();
      //       $("#next_btn_div_"+row_id).hide();
      //     }
      //     }
      // });
      // console.log(submit_flag);
  
      // if(enable !=0 ){
      //   $('#st_answer_sbmt').prop('disabled', false);
      // }
      $('#work_progress').val(0);
  }
  
  function reportIssue2(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');
  }
  
  // $(document).on('keypress', '.txt_single-ans', function (e) {
  //     if ($(this).val().length >= 50) {
  //         showAlert("Invalid answer: Maximum 50 letters allowed", "error");
  //         return false;
  //     }
  
  // });
  */
  
</script>
@endsection