@extends('frontend.layouts.default')
@section('content')
<section class="study-section">
  <div class="container">
    <div class="row g-2">
      <div class="col-md-4">
        <div class="accordion topic-accordion sticky-top" id="topic-accordion">
          @foreach($chapters as $key=>$chapter)
          <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{$chapter->id}}">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$chapter->id}}" aria-expanded="true" aria-controls="collapse{{$chapter->id}}">
                {{$chapter->chapter_code}} {{$chapter->name}}
              </button>
            </h2>
            <div id="collapse{{$chapter->id}}" class="accordion-collapse collapse {{$chapter->id==$chapter_id?'show':''}}" aria-labelledby="heading{{$chapter->id}}" data-bs-parent="#topic-accordion">
              <div class="accordion-body">
                @php
                $units = App\Models\Unit::where('chapter_id',$chapter->id)->get();
                @endphp
                <ul>
                  @foreach($units as $key=>$unit)
                  @php
                  $questionCount = App\Models\Question::where('question_mode','free')->where('unit_id',$unit->id)->count();
                  if($unit_id==$unit->id)
                  $cur_quiz_count = $questionCount;
                  @endphp
                  <li class="{{ ($unit_id==$unit->id) ?'active':'' }}">
                    <div class="box">
                      <a href="{{url('d/'.$unit->slug)}}">
                        <i class='bx bxs-caret-right-circle me-2' ></i><p>{{ $unit->name}}</p>
                      </a>
                    </div>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('course/'.$subject_slug) }}">{{ $topic_name }}</a></li>
          <li class="breadcrumb-item"><i class='bx bxs-chevron-right-circle me-2'></i>{{ $chapter_name }}</li>
          <li class="breadcrumb-item"><i class='bx bxs-chevron-right-circle me-2'></i>{{ $unit_name }}</li>
        </ol>
        <div class="topic-content">
          @if($video)
          <div class="sign-up-card">
            <h5><i class='bx bxs-info-circle me-2' ></i>Sign up for a free trial to access all videos</h5>
            <a class="btn btn-blue" href="{{ url('signup') }}#sign-up-free">Free Trial</a>
          </div>
          @endif
          <div class="video-content mb-2">
            @if($video)
            <div class="embed-responsive embed-responsive-16by9 vid">
              <div class="d-flex align-items-center justify-content-center">
                <div class="video-inner-box popup_video" style="display: none">
                <div class="video-text">
                  <h3>Access over 800 videos and quizzes, daily science and maths  tuition <br/>and exam prep resources</h3>
                  <a data-bs-toggle="modal" data-bs-target="#signup-modal"  class="btn btn-primary">Click here</a>
                </div>
                </div>
                @if($video->video_type == 'youtube') 
                <iframe width="100%" height="500" class="quizvideoplay" id="video-player"
                  src="https://www.youtube.com/embed/{{ $video->vcode }}"
                  title="YouTube video player" frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen></iframe>
                @else
                <video id="myVideo" class="quizvideoplay" data-id="{{ $video->playback_id }}"
                  poster="https://image.mux.com/{{ $video->playback_id }}/thumbnail.png?width=400&height=200&fit_mode=smartcrop&time=5"
                  data-vtitle="{{ $video->title }}" controls></video>
                @endif
              </div>
            </div>
            @endif
          </div>
          @php
          $cur_quiz_count = isset($cur_quiz_count)? $cur_quiz_count:0;
          @endphp
          <form class="quiz-wrap" id="quiz-ans-from">
            <input type="hidden" name="quiz_type" id="quiz_type" value="">
            <input type="hidden" name="unit_id" id="unit_id" value="{{ $unit_id }}">
            <a class="btn btn-warning fil-show-blnk" href="javascript:void(0);" style="display: none;"> Gap fill & Quiz </a>
            <div class="row">
              <div class="col-lg-12 fill_blnk_col">
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 custom_fm_col">
                @if($cur_quiz_count== 0)
                <p>There is no quizzess found in this lesson</p>
                @endif
              </div>
            </div>
            <input type="hidden" id="qn_no" value="">
            <button type="button" class="btn btn-blue btn-sin-sub" style="display: none;">Submit</button>
            <button type="button" class="btn btn-blue btn-signup" style="display: none;">Sign Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

@include('frontend/pages/modal')
@include('frontend/pages/signup_continue_modal')
@include('layout.report_issue')
@endsection
@push('page-scripts')
<script type="text/javascript">
  @if(isset($video->video_type) && $video->video_type != 'youtube') 
  var playback_id = $('#myVideo').attr('data-id');
  var source = 'https://stream.mux.com/' + playback_id + '.m3u8';
  var video = document.querySelector('#myVideo');
  var isLoading = false;
  const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
  
  @if($video && $video->video_mode=='free')
  if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(source);
      hls.attachMedia(video);
      window.hls = hls;
  } else {
      video.src = source;
  }
  
  video.addEventListener('play', function () {
      hls.startLoad();
  }, {once: true});
  window.player = player;
  @else
  $('.popup_video').show();
  
  @endif
  @endif
  
  function setSlider() {
      var serv0 = $('#ans-slider').owlCarousel({
          loop: false,
          nav: false,
          items: 1,
          autoplay: false,
          autoplaySpeed: 200,
          autoplayHoverPause: true,
          autoplayHoverPause: true,
          responsive: {
              0: {
                  items: 1
              },
              768: {
                  items: 1
              },
              1200: {
                  items: 1
              }
          }
      })
      $('#ans-slider-prev').click(function () {
          serv0.trigger('next.owl.carousel');
      })
      $('#ans-slider-next').click(function () {
          serv0.trigger('prev.owl.carousel', [300]);
      })
  }
  getQuestions();
  @if($cur_quiz_count> 0)
  
  
  
  @endif
  
  function getQuestions() {
  
      var unit_id = '{{ $unit_id }}';
      var token = "{{ csrf_token() }}";
      var fill_count = $('.fill_quiz').length;
      var single_count = $('.custom_grp_fm').length;
      var video_completed = $('#videoCompleted').val();
  
      $.ajax({
          url: "{{ url('subject/getquestions') }}", type: "POST",
          data: {
              'unit_id': unit_id,
              'video_completed': video_completed,
              'fill_count': fill_count,
              'single_count': single_count,
              _token: token
          },
      }).done(function (data) {
          console.log(data);
          if (data.status == true) {
              isLoading = false;
              if (data.type_id == 2) {
                  $('.custom_fm_col').append(data.html);
                  $('#quiz_type').val(data.type_id);
                //  $('#sng-ans-' + data.question_id).focus();
                  $('#qn_no').val(data.question_id);
                  $('.btn-sin-sub').show();
              } else if (data.type_id == 3) {
                  $('.fill_blnk_col').append(data.html);
                  $('.fill-answer').each(function (index) {
                      qid = $('#fill_quiz_id').val();
                      $(this).attr('id', 'blnk_' + qid + '_' + (index + 1));
                      $(this).attr('data', index + 1);
                  });
                  $('#quiz_type').val(data.type_id);
                  $('.btn-sin-sub').show();
                  $('.fil-show-blnk').show();
  
              } else {
                  $('.btn-sin-sub').hide();
              }
              setSlider();
              $('.btn-sin-sub').removeAttr("disabled");
          } else {
              $('.btn-sin-sub').hide();
  
              $('.btn-signup').show();
              // $('.inner-content').html(data.html);
          }
      })
  
  
  }
  
  
  $(".btn-sin-sub").click(function (e) {
      e.preventDefault();
      $('.btn-sin-sub').attr("disabled","disabled");
      var submit_flag = 0;
      var fill_count = $('.fill_quiz').length;
      var single_count = $('.custom_grp_fm').length;
      var quiz_type = $('#quiz_type').val();
      $(".valid-error").remove();
      if (quiz_type == 2) {
          $(".txt_single-ans").each(function (index) {
              if (this.value == '') {
                  id = this.id.split('sng-ans-');
                  $('#cstm_sng_' + id[1]).append('<span class="valid-error"> Please Enter Your Answer </span>');
                  submit_flag = 1;
                  $('.btn-sin-sub').removeAttr("disabled");
                  return false;
              }
          });
  
      } else if (quiz_type == 3) {
          $('.fill-answer').each(function (index) {
              console.log(this.value);
              if (this.value == '') {
                  $('#box_' + $("#fill_quiz_id").val()).append('<span class="valid-error"> Please fill all answers </span>');
                  submit_flag = 1;
                  $('.btn-sin-sub').removeAttr("disabled");
                  return false;
              }
          });
      }
  
      chance = $('#chance').val();
      console.log(submit_flag);
      console.log('qn_count:'+single_count);
      console.log('chance:'+chance);
      
      if (submit_flag == 0) {
          $(this).attr("disabled", "disabled");
          var formData = $('#quiz-ans-from').serialize();
      var quest_id = $('#qn_no').val();
      $("#sng-ans-" + quest_id).attr('disabled', true);
          $.ajax({
              url: "{{ url('subject/submit') }}", type: 'POST',
              data: formData + "&fill_count=" + fill_count + "&single_count=" + single_count,
              dataType: "json",
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
  
          }).done(function (d) {
             // isLoading = false;
              //getQuestions();
              var return_data = d.return_data;
              console.log(return_data);
              if (return_data['prev_qtype'] == 2) {
                  var answer = $('#sng-ans-' + return_data['id']).val();
                  var correct_answer = return_data['original_answer'];
                  if (return_data['is_correct'] == 0 && return_data['chance'] == '' ) {
                      $('#sng-ans-' + return_data['id']).addClass('txt-danger');
                      $('#sng-ans-' + return_data['id']).css('color', 'red');
                      $('#sng-ans-' + return_data['id']).css('font-weight', 'bold');
                      $('#sng-ans-' + return_data['id']).css('font-size', 'medium');
                      $('#sng-ans-' + return_data['id']).val(answer + '      ✖');
                      $("#sng-ans-" + return_data['id']).attr("id", 'old-ans-' + return_data['id']);
                      $('#cstm_sng_' + return_data['id']).append('<div class="answer-danger"> <h4>Your answer or spelling is wrong...Try again!</h4></div>');
                      $('#cstm_sng_' + return_data['id']).append('<div class="second-chance"><input type="text" name="txt_single_answer"  class="form-control txt_single-ans bg-white"  id="sng-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>');
                      $('#sng-ans-'+ return_data['id']).focus();
                      $('.btn-sin-sub').removeAttr("disabled");
                  }
                 else if (return_data['is_correct'] == 0) {
                      $('#sng-ans-' + return_data['id']).addClass('txt-danger');
                      $('#sng-ans-' + return_data['id']).css('color', 'red');
                      $('#sng-ans-' + return_data['id']).css('font-weight', 'bold');
                      $('#sng-ans-' + return_data['id']).css('font-size', 'medium');
                      $('#sng-ans-' + return_data['id']).val(answer + '      ✖');
                      $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                          '</h4></div>');
                         $("#chance").remove();
                         $('#sng-ans-' + return_data['id']).removeAttr("name");
                         $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                         if(single_count==3 && chance==2)
                          {
                              $("#signup-continue-modal").modal('show');
                          }else{
                              getQuestions();
                          }
                   } else {
                      $('#sng-ans-' + return_data['id']).addClass('txt-success');
                      $('#sng-ans-' + return_data['id']).css('color', 'green');
                      $('#sng-ans-' + return_data['id']).css('font-weight', 'bold');
                      $('#sng-ans-' + return_data['id']).css('font-size', 'medium');
                      $('#sng-ans-' + return_data['id']).val(answer + '      ✔');
                      $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                          '</h4></div>');
                       $('#sng-ans-' + return_data['id']).removeAttr("name");
                       $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                       $("#chance").remove();
                       if(single_count==3)
                      {
                          $("#signup-continue-modal").modal('show');
                      }else{
                          getQuestions();
                      }
                  }
                  
                  
                  // <a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' . $oneWordQuestions['id'] . ',' . $request->unit_id . ')">Report an issue</a>
              }
              if (return_data['prev_qtype'] == 3) {
  
              }
              isLoading = false;
          });
  
  
      }
  
  })
  
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
  
  $(document).on('keydown', '.txt_single-ans', function (e) {
  
      if (e.which == 13) {
  
              if (this.value == '') {
                  $(".valid-error").remove();
                  id = this.id.split('sng-ans-');
                  $('#cstm_sng_' + 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');
                  $('.btn-sin-sub').trigger('click');
                  return false;
              }
              }
      
  });
  
  $(document).on('keydown', '.fill-answer', function (e) {
  
      if (e.which == 13) {
          id = this.id;
          var item = this;
          console.log(id);
          position = $('#' + id).attr('data');
          console.log(position);
          answer = this.value;
          question_id = $('#fill_quiz_id').val();
          var unit_id = '{{ $unit_id }}';
  
          if (answer != '') {
  
              $.ajax({
                  url: "{{ url('subject/submitfillblank') }}",
                  type: 'POST',
                  data: {'question_id': question_id, 'position': position, 'answer': answer, 'unit_id': unit_id},
                  dataType: "json",
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
  
              }).done(function (d) {
                  if (d.status == true) {
                      $('#' + id).css('color', 'green');
                      $('#' + id).css('font-weight', 'bold');
                      $('#' + id).css('font-size', 'medium');
                      $('#' + id).val(d.right_answer);
                      // $('#'+id).val($('#'+id).val()+'      ✔');
                  } else {
                      $('#' + id).css('color', 'red');
                      $('#' + id).css('font-weight', 'bold');
                      $('#' + id).css('font-size', 'medium');
                      $('#' + id).val(d.right_answer);
                      // $('#'+id).after("<span style='color:green; font-weight:bold; font-size:medium'>"+d.right_answer+"</span>");
                  }
                  $('#' + id).addClass('keydisabled');
                  $(item).next().focus();
  
  
              });
          }
  
          //$('#'+id).trigger('change');
          $(this).next(':input').focus();
          return false;
      }
  });
  
  
  
  function reportIssue(question_id, correct_answer, is_correct) {
      var answer = $('#sng-ans-' + question_id).val();
      var question = $('#cstm_sng_' + question_id).data('question');
      var submitted;
      $('#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>
@endpush