@extends('dashboard.layouts.default')
@section('content')
<section class="study-section">
  <div class="container">
    <div class="row g-2">
      @include('layout.top-ads')
      <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)
                  <li class="{{ ($unit_id==$unit->id) ?'active':'' }}">
                    <div class="box">
                      <div class="row align-items-center">
                        <div class="col-md-12">
                          <a href="{{url('teacher/vq/'.$unit->slug)}}">
                            <i class='bx bxs-caret-right-circle me-2' ></i>
                            <p>{{ $unit->name}}</p>
                          </a>
                        </div>
                      </div>
                    </div>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a >{{ $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(!$check_plan && ($video && $video->video_mode=='paid'))
          <div class="sign-up-card">
            <h5><i class='bx bxs-info-circle me-2' ></i>Access to quizzes only - please enquire for video access</h5>
          </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>
                <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')
                <video id="myVideo" class="quizvideoplay"
                @if($check_plan || $video->video_mode=='free')
                data-id="{{ $video->playback_id }}"
                @endif  poster="https://image.mux.com/{{ $video->playback_id }}/thumbnail.png?width=400&height=200&fit_mode=smartcrop&time=5"
                data-vtitle="{{ $video->title }}" controls preload="none"></video>
                @endif

                @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>
                @endif
              </div>
            </div>
            @endif
            <!-- <form class="quiz-wrap" id="quiz-ans-from"> -->
            <input type="hidden" name="unit_id" value="{{ $unit_id }}">
            <input type="hidden" name="quiz_type" id="quiz_type" value="">
            @php
            $q_count = 1;
            $fillQuestions = App\Models\Question::
            select('questions.id','questions.question')
            ->where('questions.unit_id',$unit_id)
            ->where('question_type',3)
            ->get();
            $display = count($fillQuestions)>0?'block':'none';
            @endphp
            <button class="btn btn-warning fil-show-blnk" href="javascript:void(0);" style="display:{{ $display }};"> Gap fill & Quiz</button>
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fill_blnk_col">
                @foreach($fillQuestions as $key=>$fillquiz)
                @php
                $question = strip_tags(    ($fillquiz['question']));
                $questionArray = explode('________', $question);
                $newStr = '';
                for ($i = 0; $i < count($questionArray); $i++)  {
                $newStr.= $questionArray[$i];
                $newStr.= '<input type="text"  class="form-control fill-answer" id="fill-ans-'.$fillquiz->id.'" data-id="'.($key+1).'" data-qcount="{{$q_count}}" data-question_type = "3" value="" autocomplete="off">';
                }
                @endphp
                <div class="box" id="box_$id'">
                  <h5
                    class="fill-input"> {{ $q_count }}
                    . {!! $newStr !!}
                  </h5>
                  <input type="hidden" id="fill_quiz_id"
                    name="question_id"
                    class="fill_quiz"
                    value="" autocomplete="off">
                </div>
                @php
                $q_count++;
                @endphp
                @endforeach
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 col-xs-12 custom_fm_col">
                @php
                $one_questions = App\Models\Question::
                select('questions.id','questions.question')
                ->where('questions.unit_id',$unit_id)
                ->where('question_type',2)
                ->get();
                @endphp
                @foreach($one_questions as $key=>$oneWordQuestions)
                @php              
                $images =  App\Models\QuestionImage::where('question_id',$oneWordQuestions->id)->get();
                @endphp
                <div class="form-group custom_grp_fm"
                  id="cstm_sng_{{ $oneWordQuestions->id}}" data-question="{{ $oneWordQuestions->question }}">
                  <label for=""> {{ $q_count }}
                  . {{ $oneWordQuestions->question }}</label>
                  @if(count($images) > 0) 
                  <div id="carousel-example-generic_{{$oneWordQuestions->id}}" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                      @foreach ($images as $key => $image) 
                      @php
                      if($key===0)
                      $active = 'active';
                      else
                      $active = '';  
                      @endphp
                      <div class="carousel-item text-center img_center {{ $active }}"><img class="img-fluid" src=" {{ asset('storage/uploads/questions/' . $oneWordQuestions['id'] . '/' . $image->image) }}" alt="#carousel-example-generic_{{$key}}"></div>
                      @endforeach
                    </div>
                  </div>
                  @endif
                  <input type="text"
                    class="form-control txt_single-ans input-s{{$key}}"
                    qno="{{$key}}" id="sng-ans-{{ $oneWordQuestions->id}}"
                    data-id="{{ $oneWordQuestions->id}}"  data-qcount="{{$q_count}}" data-question_type = "2" value=""
                    autocomplete="off">
                </div>
                @php
                $q_count++;
                @endphp
                @endforeach
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 col-xs-12 custom_fm_col">
                @php
                $one_questions = App\Models\Question::
                select('questions.id','questions.question')
                ->where('questions.unit_id',$unit_id)
                ->where('question_type',1)
                ->get();
                @endphp
                @foreach($one_questions as $key=>$oneWordQuestions)
                @php              
                $images =  App\Models\QuestionImage::where('question_id',$oneWordQuestions->id)->get();
                $options =  App\Models\MultipleOption::where('question_id',$oneWordQuestions->id)->select('option','is_answer','id')->get();
                @endphp
                <div class="form-group custom_grp_fm"
                  id="cstm_sng_{{ $oneWordQuestions->id}}" data-question="{{ $oneWordQuestions->question }}">
                  <label for=""> {{ $q_count }}
                  . {{ $oneWordQuestions->question }}</label>
                  @if(count($images) > 0) 
                  <div id="carousel-example-generic_{{$oneWordQuestions->id}}" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                      @foreach ($images as $key => $image) 
                      @php
                      if($key===0)
                      $active = 'active';
                      else
                      $active = '';  
                      @endphp
                      <div class="carousel-item text-center img_center {{ $active }}"><img class="img-fluid" src=" {{ asset('storage/uploads/questions/' . $oneWordQuestions['id'] . '/' . $image->image) }}" alt="#carousel-example-generic_{{$key}}"></div>
                      @endforeach
                    </div>
                  </div>
                  @endif
                  @if(isset($options) && count($options) > 0)
                  <div class="row mt-2">
                      @foreach($options as $index => $option)
                          <div class="col-md-6">
                              <input type="radio" data-qcount="{{$q_count}}" name="options_{{$oneWordQuestions->id}}" data-id="{{$oneWordQuestions->id}}" data-question_type = "1" class="multiple_single-ans input-s{{$key}}"  qno="{{$key}}" id="{{$option['id']}}" value="{{$option['id']}}">
                              <label for="option{{$index + 1}}" class="label_{{$option['id']}}">{{ $option['option'] }}</label>
                          </div>
                      @endforeach
                  </div>
                  @endif
                </div>
                @php
                $q_count++;
                @endphp
                @endforeach
              </div>
            </div>        
            <button type="button" class="btn btn-blue btn-sin-sub" style="display: none;">Submit</button>
          </div>
        </div>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@include('layout.report_issue')
@include('layout.report_thankyou')
@endsection
@push('page-scripts')
<script type="text/javascript">
  $(document).ready(function () {
      @if(!$check_plan && ($video && $video->video_mode!='free'))
      document.getElementById('myVideo').controls = false;
      document.getElementById('myVideo').controls = true;
      @else
      videoInit();
      @endif
  });

  $(document).ready(function() {
        $(document).on('click', '.multiple_single-ans', function (e) {
                      qid = this.id;
                      qno = $("#" + qid).attr('qno');
                      question_id = $("#" + qid).attr('data-id');
                      var qcount = $("#" + qid).attr('data-qcount');
                      var submit_flag = 0;
                      var fill_count = $('.fill_quiz').length;
                      var single_count = $('.custom_grp_fm').length;
                      var quiz_type = $('#quiz_type').val();
                      var answer = this.value;
                      var answerText =  $(".label_"+answer).html();
                      if (submit_flag == 0) {
                          $.ajax({
                              url: "{{ url('teacher/video-quiz/submit-multiple-option') }}", type: 'POST',
                              data: {'question_id': question_id, 'answer': answer},
                              dataType: "json",
                              headers: {
                                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                              }  
                          }).done(function (return_data) 
                          {
                            if (return_data.status == true) {
                                $(".label_"+answer).html(answerText+" ✔ ");
                                $(".label_"+answer).css('color','green');
                                $(".label_"+answer).css('fontWeight','bold');
                                $(".label_"+answer).css('fontSize','medium');
                                $('#cstm_sng_' + return_data.id).append('<div class="answer-success mb-0"> <h4> Answer: ' + return_data.original_answer +'</h4></div>');
                            } 
                            else {
                                $(".label_"+answer).html(answerText+" ✖ ");
                                $(".label_"+answer).css('color','red');
                                $(".label_"+answer).css('fontWeight','bold');
                                $(".label_"+answer).css('fontSize','medium');
                                $('#cstm_sng_' + return_data.id).append('<div class="answer-success mb-0"> <h4> Answer: ' + return_data.original_answer +'</h4></div>');
                            }
                            $('input[name="options_' + question_id + '"]').prop('disabled', true);
                            var no = parseInt(qcount) +1 ;
                            var currentInput =  $('input[data-qcount="'+no+'"]'); 
                            var question_type = currentInput.attr('data-question_type');
                            if(question_type == 2) 
                            {
                              qno = parseInt(qno) + 1;
                              $('.input-s' + qno).focus();
                            }
                          });
                      } 
        });
  });
  
  var isLoading = false;
  var events;
  var tracks;
  var lastStartPosition;
  var lastDuration;
  var video = $('#myVideo')[0];
  var bufferingIdx = -1;
  
  function videoInit() {
      var token = "{{ config('kayscience.MUX_TOKEN_ID') }}";
      var env_key = "{{ config('kayscience.MUX_ENV_KEY')  }}";
      $("#env_key").val(env_key);
      window.muxPlayerInitTime = Date.now();
      var playback_id = $('#myVideo').attr('data-id');
      var hlsUrl = 'https://stream.mux.com/' + playback_id + '.m3u8';
      var vid = document.querySelector('#myVideo');
      var video_title = $('#myVideo').attr('data-vtitle');
  
      const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
  
      // Initialize Mux Data monitoring
      if (typeof mux !== 'undefined') {
          if (Hls.isSupported()) {
              var hls = new Hls({autoStartLoad: false,  maxMaxBufferLength : 15});
              hls.loadSource('https://stream.mux.com/' + playback_id + '.m3u8');
              hls.attachMedia(vid);
              @if(!$is_videoplayed)
                  self.events = events = {
                  url: 'https://stream.mux.com/' + playback_id + '.m3u8',
                  t0: performance.now(),
                  load: [],
                  buffer: [],
                  video: [],
                  level: [],
                  bitrate: []
              }; // actual values, only on window
  
              video.addEventListener('resize', handleVideoEvent);
              video.addEventListener('seeking', handleVideoEvent);
              video.addEventListener('seeked', handleVideoEvent);
              video.addEventListener('pause', handleVideoEvent);
              video.addEventListener('play', handleVideoEvent);
              video.addEventListener('canplay', handleVideoEvent);
              video.addEventListener('canplaythrough', handleVideoEvent);
              video.addEventListener('ended', handleVideoEvent);
              video.addEventListener('playing', handleVideoEvent);
              video.addEventListener('error', handleVideoEvent);
              video.addEventListener('loadedmetadata', handleVideoEvent);
              video.addEventListener('loadeddata', handleVideoEvent);
              video.addEventListener('durationchange', handleVideoEvent);
  
              if (hls.bufferTimer === undefined) {
                  events.buffer.push({
                      time: 0,
                      buffer: 0,
                      pos: 0
                  });
                  hls.bufferTimer = self.setInterval(checkBuffer, 100);
              }
  
              @endif
          } else {
              var nativeHLS = vid.canPlayType('application/vnd.apple.mpegurl');
              vid.src = nativeHLS ? hlsUrl : fallbackUrl;
          }
  
          vid.addEventListener('play', function () {
              @if($check_plan || ($video && $video->video_mode=='free'))
              hls.startLoad();
              @endif
          }, {once: true});
  
          mux.monitor('#myVideo', {
              debug: true,
  
              // Pass in the HLS.js instance
              hlsjs: hls,
  
              // Optionally, if Hls is not available on the window globally
              // you need to pass Hls as well.
              Hls: Hls,
              data: {
                  env_key: "{{ config('kayscience.MUX_ENV_KEY')  }}", // required
  
                  respectDoNotTrack: false,
                  // Site Metadata
                  viewer_user_id: '{{ $teacher_id }}', // ex: '12345'
                  experiment_name: '{{ $encryptedStr }}', // ex: 'player_test_A'
                  sub_property_id: '', // ex: 'cus-1'
  
                  // Player Metadata
                  player_name: 'My Main Player', // ex: 'My Main Player'
                  player_version: '1.0.0', // ex: '1.0.0'
                  player_init_time: '1451606400000', // ex: 1451606400000
  
                  // Video Metadata (cleared with 'videochange' event)
                  video_id: playback_id, // ex: 'abcd123'
                  video_title: video_title, // ex: 'My Great Video'
                  video_series: '', // ex: 'Weekly Great Videos'
                  video_duration: '', // in milliseconds, ex: 120000
                  video_stream_type: '', // 'live' or 'on-demand'
                  video_cdn: '' // ex: 'Fastly', 'Akamai'
              }
  
  
          });
  
      }
  
  }
  
  function checkBuffer() {
      var v = $('#myVideo')[0];
      var r = v.buffered;
      var bufferingDuration;
      if (r) {
          var pos = v.currentTime;
          var bufferLen = 0;
          if (bufferLen <= 0.1 && v.paused === false && pos - lastStartPosition > 0.5) {
              if (lastDuration - pos <= 0.5 && events.isLive === false) {
                  // don't create buffering event if we are at the end of the playlist, don't report ended for live playlist
              } else {
                  // we are not at the end of the playlist ... real buffering
                  if (bufferingIdx !== -1) {
                      bufferingDuration = performance.now() - events.t0 - events.video[bufferingIdx].time;
                      events.video[bufferingIdx].duration = bufferingDuration;
                      events.video[bufferingIdx].name = bufferingDuration;
                  } else {
                      events.video.push({
                          type: 'buffering',
                          time: performance.now() - events.t0
                      });
                      //  trimEventHistory(); // we are in buffering state
  
                      bufferingIdx = events.video.length - 1;
                  }
              }
          }
  
          if (bufferLen > 0.1 && bufferingIdx !== -1) {
              bufferingDuration = performance.now() - events.t0 - events.video[bufferingIdx].time;
              events.video[bufferingIdx].duration = bufferingDuration;
              events.video[bufferingIdx].name = bufferingDuration; // we are out of buffering state
  
              bufferingIdx = -1;
          } // update buffer/position for current Time
  
  
          var event = {
              time: performance.now() - events.t0,
              buffer: Math.round(bufferLen * 1000),
              pos: Math.round(pos * 1000)
          };
          var bufEvents = events.buffer;
          var bufEventLen = bufEvents.length;
  
          if (bufEventLen > 1) {
              var event0 = bufEvents[bufEventLen - 2];
              var event1 = bufEvents[bufEventLen - 1];
              var slopeBuf0 = (event0.buffer - event1.buffer) / (event0.time - event1.time);
              var slopeBuf1 = (event1.buffer - event.buffer) / (event1.time - event.time);
              var slopePos0 = (event0.pos - event1.pos) / (event0.time - event1.time);
              var slopePos1 = (event1.pos - event.pos) / (event1.time - event.time); // compute slopes. if less than 30% difference, remove event1
  
              if ((slopeBuf0 === slopeBuf1 || Math.abs(slopeBuf0 / slopeBuf1 - 1) <= 0.3) && (slopePos0 === slopePos1 || Math.abs(slopePos0 / slopePos1 - 1) <= 0.3)) {
                  bufEvents.pop();
              }
          }
  
          events.buffer.push(event);
 
          var videoPlaybackQuality = v.getVideoPlaybackQuality;
        }
  
      var videoPlayed = timeRangesToString(v.played);
  }
  
  function timeRangesToString(r) {
      var newArr = [];
  
      for (var i = 0; i < r.length; i++) {
          let start = r.start(i);
          let end = r.end(i);
          newArr.push({start, end})
      }
  
      return newArr;
  
  }
  
  function handleVideoEvent(evt) {
      var data = '';
  
      switch (evt.type) {
          case 'durationchange':
              if (evt.target.duration - lastDuration <= 0.5) {
                  return;
              }
  
              lastDuration = evt.target.duration;
              data = Math.round(evt.target.duration * 1000);
              break;
  
          case 'resize':
              data = evt.target.videoWidth + '/' + evt.target.videoHeight;
              break;
  
          case 'loadedmetadata':
          case 'loadeddata':
          case 'canplay':
          case 'canplaythrough':
          case 'ended':
          case 'seeking':
          case 'seeked':
          case 'play':
          case 'playing':
              lastStartPosition = evt.target.currentTime;
  
          case 'pause':
          case 'waiting':
          case 'stalled':
          case 'error':
              data = Math.round(evt.target.currentTime * 1000);
  
              if (evt.type === 'error') {
                  var errorTxt;
                  var mediaError = evt.currentTarget.error;
  
                  switch (mediaError.code) {
                      case mediaError.MEDIA_ERR_ABORTED:
                          errorTxt = 'You aborted the video playback';
                          break;
  
                      case mediaError.MEDIA_ERR_DECODE:
                          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support';
                          handleMediaError();
                          break;
  
                      case mediaError.MEDIA_ERR_NETWORK:
                          errorTxt = 'A network error caused the video download to fail part-way';
                          break;
  
                      case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
                          errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported';
                          break;
                  }
  
                  if (mediaError.message) {
                      errorTxt += ' - ' + mediaError.message;
                  }
  
                  logStatus(errorTxt);
              }
  
              break;
  
          default:
              break;
      }
  
      var event = {
          time: performance.now() - events.t0,
          type: evt.type,
          name: data
      };
      events.video.push(event);
  
      if (evt.type === 'seeking') {
          lastSeekingIdx = events.video.length - 1;
      }
  
      if (evt.type === 'seeked') {
          events.video[lastSeekingIdx].duration = event.time - events.video[lastSeekingIdx].time;
      }
  
      // trimEventHistory();
  }
  
  
  function setSlider() {
      var serv0 = $('#ans-slider').owlCarousel({
          loop: true,
          nav: false,
          items: 1,
          autoplay: true,
          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]);
      })
  }
    
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
  var isLoading = 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;
          } else {
              if (!isLoading) {
                  isLoading = true;
                  e.preventDefault();
                  qid = this.id;
                  qno = $("#" + qid).attr('qno');
                  question_id = $("#" + qid).attr('data-id');
                  $('#' + question_id).addClass('keydisabled');
                  var submit_flag = 0;
                  var fill_count = $('.fill_quiz').length;
                  var single_count = $('.custom_grp_fm').length;
                  var quiz_type = $('#quiz_type').val();
                  var answer = this.value;
                  $(".valid-error").remove();
                  if (submit_flag == 0) {
  
                      $.ajax({
                          url: "{{ url('teacher/video-quiz/submit') }}", type: 'POST',
                          data: {'question_id': question_id, 'answer': answer},
                          dataType: "json",
                          headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                          }
  
                      }).done(function (d) {
                          var return_data = d.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) {
                                  $('#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 mb-0"> <h4> Answer: ' + correct_answer +
                                   //   '</h4></div>');
                                  $('#cstm_sng_' + return_data['id']).append('<div class="answer-success mb-0"> <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>');
                              } 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 mb-0"> <h4> Answer: ' + correct_answer +
                                    //  '</h4></div>');
                                  $('#cstm_sng_' + return_data['id']).append('<div class="answer-success mb-0"> <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>');
                              }
  
                              $('#sng-ans-' + return_data['id']).removeAttr("name");
                              $('#sng-ans-' + return_data['id']).removeClass("txt_single-ans");
                              $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                              qno = parseInt(qno) + 1;
                              $('.input-s' + qno).focus();
  
  
                          }
                          if (return_data['prev_qtype'] == 3) {
  
                          }
                          isLoading = false; 
                      });
                  }
  
              }
              return false;
          }
      }
  });
  
  $(document).on('keydown', '.fill-answer', function (e) {
      if (e.which == 13) {
          $(".valid-error").remove();
          id = this.id;
          var item = this;
          position = $('#' + id).attr('data');
          answer = this.value;
          question_id = $('#fill_quiz_id').val();
          var unit_id = '{{ $unit_id }}';
  
          if (answer.length > 0) {
  
              $.ajax({
                  url: "{{ url('video-quiz/submitfillblank') }}",
                  type: 'POST',
                  data: {
                      'question_id': question_id,
                      'position': position,
                      'answer': answer,
                      'unit_id': unit_id,
                      'attempt': attempt
                  },
                  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);
                  } else {
                      $('#' + id).css('color', 'green');
                      $('#' + id).css('font-weight', 'bold');
                      $('#' + id).css('font-size', 'medium');
                      $('#' + id).val(d.right_answer);
                  }
                  $('#' + id).addClass('keydisabled');
                  $(item).next().focus();
  
                  $(this).next(':input').focus();
              });
  
          } else {
  
              $('#box_' + question_id).append('<span class="valid-error"> Please Enter Your Answer  </span>');
  
          }  
          return false;
      }
  });
  
  function reportIssue(question_id, correct_answer, is_correct) {
      var answer = $('#sng-ans-' + question_id).val();
      if(answer=='')
      var answer = $('#old-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