@extends('dashboard.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
                  $quizPoint = App\Models\Question::select('id')->where('unit_id',$unit->id)->count();
                  $getPoint = App\Models\UnitMaxPoint::where('unit_id',$unit->id)->where('student_id', STUDENT_ID)->first();
                  if($getPoint){
                  $point = $getPoint->point;
                  $percentage = $getPoint->average;
                  $task_percent = $point / $quizPoint * 100;
                  $task_percentage = round($task_percent);
                  }
                  else{
                  $point = 0;
                  $percentage = 0;
                  $task_percentage = 0;
                  }
                  $quiz_complete = 0 ;
                  if($percentage == 100)
                  $quiz_complete = 1;
                  @endphp
                  <li class="{{ ($unit_id==$unit->id) ?'active':'' }}">
                    <div class="box">
                      <div class="row align-items-center">
                        <div class="col-md-8">
                          <a href="{{url('vq/'.$unit->slug)}}">
                            <i class='bx bxs-caret-right-circle me-2' ></i>
                            <p>{{ $unit->name}}</p>
                          </a>
                        </div>
                        <div class="col-md-4">
                         <!-- <div class="progress-wrap">
                            <p class="mb-0">{{ $point }} / {{ $quizPoint }} ({{$task_percentage }}%)</p>
														@if($percentage == 100)</p>
                            <div class="progress">
                              <div class="progress-bar bg-green"
                              role="progressbar"
                              style="width: {{ $percentage }}%"
                              aria-valuenow="{{ $percentage }}"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                            </div>
                            @elseif($percentage < 100 && $percentage>=50)
                            <div class="progress">
                              <div class="progress-bar bg-orange"
                                role="progressbar"
                                style="width: {{ $percentage }}%;"
                                aria-valuenow="{{ $percentage }}"
                                aria-valuemin="0"
                                aria-valuemax="100"></div>
                            </div>
                            @elseif($percentage < 50)
                            <div class="progress">
                              <div class="progress-bar"
                                role="progressbar"
                                style="width: {{ $percentage }}%;"
                                aria-valuenow="{{ $percentage }}"
                                aria-valuemin="0"
                                aria-valuemax="100"></div>
                            </div>
                            @endif
                            @if($quiz_complete == 1)
                            <p class="text-center fw-semibold">Completed</p>
                            @elseif ($unit_id==$unit->id)
                            <p class="text-center fw-semibold">In Progress</p>
                            @else
                            <p class="text-center fw-semibold">Pending</p>
                            @endif
                          </div>-->
                        </div>
                      </div>
                    </div>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">{{ $topic_name }}</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">
          <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>Full access for videos, gap-fills and exam questions</h3>
                  <a href="{{ url('subscriptions') }}" class="btn btn-primary">Click here</a>
                </div>  
                </div>
                @if(isset($video->video_type) && $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> --}}
                  <div id="player"></div>
                @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 playsinline>
                  </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="student_id"  id="student_id" value="{{ STUDENT_ID }}">
            <input type="hidden" name="quiz_type"   id="quiz_type" value="">
            @if(isset($video->id))
            <input type="hidden" name="video_id"    id="video_id" value="{{ $video->id }}">
            @endif
            <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"></div>
            </div>
            <input type="hidden" id="qn_no" value="">
            <button type="button" class="btn btn-blue btn-sin-sub mt-2" style="display: none;">Submit</button>
          </form>
          <button type="button" class="btn btn-blue btn-sub-quiz mt-2"  onclick="sumbitFullQuiz();" style="display: none;">Submit Quiz</button>
        </div>
      </div>
    </div>
  </div>
</section>
@include('layout.report_issue')
@include('layout.report_thankyou')
@endsection
@section('pagescripts')
<!-- Track youtube -->
@if(isset($video->video_type) && $video->video_type == 'youtube') 
<script src="{{asset('/js/track_youtube/track_youtube_watch_time.js?v=1.0.5')}}"></script>
@if($video->vcode && strlen($video->vcode) > 0)
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '500',
    width: '100%',
    videoId: '{{ $video->vcode }}',
    playerVars: {
      'playsinline': 1,
      'rel': 0,
      'modestbranding': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  }
  
  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    //  event.target.playVideo();
      setTheParametersFirst(
          {{ STUDENT_ID }},
          {{ $unit_id }},
          '{{ url('/update-youtube-tracker') }}',
          player.getDuration(),
          {{$video->id}},
          0 //No task
      );
  }
  
  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    console.log('testing player status change youtube tracker');

  // 5. The API calls this function when the player's state changes.
  // The function indicates that when playing a video (state=1),
  // -1 unstarted 
  // 0 ended 
  // 1 playing
  // 2 paused
  // 3 buffering
  // 5 video cued
  
  whenYoutubeVideoStatusChanged(
      event.data
  );
  /*if (event.data == YT.PlayerState.PLAYING && !done) {
    //setTimeout(stopVideo, 6000);
    done = true;
  }*/
  }
  function stopVideo() {
      player.stopVideo();
  }
</script>
@endif
@endif
@endsection
@push('page-scripts')
<script type="text/javascript">
  $(document).ready(function () {
      videoInit();
      @if(!$check_plan && ($video && $video->video_mode!='free') && $student->type!='Teacher')
        $('.popup_video').show();
      var vids = $("#myVideo");
      $.each(vids, function () {
          this.controls = false;
      });
      @endif
  });
  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: '{{ STUDENT_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
                      }); 
                      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})
          // log += '[' + r.start(i) + ', ' + r.end(i) + ']';
          // log += ' ';
      }
  
      return newArr;
  
  }
  
  function handleVideoEvent(evt) {
      var data = '';
  
      switch (evt.type) {
          case 'durationchange':
              if (evt.target.duration - lastDuration <= 0.5) {
                  // some browsers report several duration change events with almost the same value ... avoid spamming video events
                  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);
                  console.error(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: 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(!$video)
  $('#myVideo').removeAttr("src");
  
  @endif
  
  function getQuestions() {
      var unit_id = '{{ $unit_id }}';
      var token = "{{ csrf_token() }}";
      var fill_count = $('.fill_quiz').length;
      var single_count = $('.single_frm').length;
      var multiple_count = $('.multi_frm').length;
      var video_completed = $('#videoCompleted').val();
  
      $.ajax({
          url: "{{ url('video-quiz/getQuestions') }}", type: "POST",
          data: {
              'unit_id': unit_id,
              'video_completed': video_completed,
              'fill_count': fill_count,
              'single_count': single_count,
              'multiple_count':multiple_count,
              'attempt': '{{$attempt}}',
              _token: token
          },
      }).done(function (data) {
          if (data.status == true) {
              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 == 1) {
                  $('.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);
                  });
  
                  @if((!$check_plan && ($video && $video->video_mode=='free')) || ($check_plan && !$is_videoplayed))
                  if (fill_count == 0) {
                      $('.fill-answer').addClass('keydisabled');
                      $(".fill-input").last().addClass('qstn-txt');
                  } else {
                      $(".fill-input").last().removeClass('qstn-txt');
                      $('.fill-answer').removeClass('keydisabled');
                  }
                  @else
                  $(".fill-input").last().removeClass('qstn-txt');
                  $('.fill-answer').removeClass('keydisabled');
                  @endif
  
                  @if(!$video)
                  $(".fill-input").last().removeClass('qstn-txt');
                  $('.fill-answer').removeClass('keydisabled');
                  @endif
  
                  $('#quiz_type').val(data.type_id);
                  $('.btn-sin-sub').show();
                  $('.fil-show-blnk').show();
              }
              setSlider();
              $('.btn-sin-sub').removeAttr("disabled");
          } else {
              $('.btn-sin-sub').hide();
              var questions_count = '{{ $questions_count }}';
              if (questions_count > 0) {
                  $(".btn-sub-quiz").show();
              } else {
                  showAlert("There is no quiz in this lesson", "error");
              }
          }
      }) 
  }
  
  $(".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 = $('.single_frm').length;
      var attempt = '{{ $attempt }}';
      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 == 1) {
          $(".multiple_single-ans").each(function (index) {
              if (this.value == '') {
                  id = this.id.split('sng-ans-');
                  $('#cstm_sng_' + id[1]).append('<span class="valid-error"> Please Select Your Answer </span>');
                  submit_flag = 1;
                  $('.btn-sin-sub').removeAttr("disabled");
                  return false;
              }             
          });  
      }
       else if (quiz_type == 3) {
          $('.fill-answer').each(function (index) {
              if (this.value == '') {
                  $('#box_' + $("#fill_quiz_id").val()).append('<span class="valid-error"> Please fill all answers </span>');
                  submit_flag = 1;
                  return false;
              }              
          });
      }
      if (submit_flag == 0) { 
      var formData = $('#quiz-ans-from').serialize();
      var quest_id = $('#qn_no').val();
      $("#sng-ans-" + quest_id).attr('disabled', true);
          $.ajax({
              url: "{{ url('video-quiz/submit') }}", type: 'POST',
              data: formData + "&fill_count=" + fill_count + "&single_count=" + single_count + "&attempt=" + attempt,
              dataType: "json",
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }  
          }).done(function (d) {
              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="answer-danger"> <h4> Your answer or spelling is wrong...Try again! <a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                      $('#cstm_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>');
                      $('#cstm_sng_' + 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();
                         $('#sng-ans-' + return_data['id']).removeAttr("name");
                         $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                          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>');
                      $('#cstm_sng_' + 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>');
                       $('#sng-ans-' + return_data['id']).removeAttr("name");
                       $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                       $("#chance").remove();
                       getQuestions();
                  }
              }
              if (return_data['prev_qtype'] == 1) {
              }
              isLoading = false;  
          });  
      }  
  });

  $(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 = $('.single_frm').length;
                      var attempt = '{{ $attempt }}';
                      var quiz_type = $('#quiz_type').val();
                      var answer = this.value;
                      var answerText =  $(".label_"+answer).html();
                      var formData = $('#quiz-ans-from').serialize();
                      if (submit_flag == 0) {
                          $.ajax({
                              url: "{{ url('video-quiz/submit-multiple-option') }}", type: 'POST',
                              data: formData + "&question_id=" + question_id + "&answer=" + answer +"&fill_count=" + fill_count + "&single_count=" + single_count + "&attempt=" + attempt,
                              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.return_data.id).append('<div class="answer-success mb-0"> <h4> Answer: ' + return_data.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.return_data.id).append('<div class="answer-success mb-0"> <h4> Answer: ' + return_data.return_data.original_answer +'</h4></div>');
                            }
                            $('input[name="options_' + return_data.return_data.id + '"]').prop('disabled', true);
                            getQuestions();
                          });
                } 
        });
  });
  
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
  
  $(document).on('keydown', '.txt_scnd-chance', 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', '.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) {
      // e.preventDefault();
      if (e.which == 13) {
          $(".valid-error").remove();
          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 }}';
          var attempt = '{{ $attempt }}';
          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);
                      // $('#'+id).val($('#'+id).val()+'      ✔');
                  } else {
                      $('#' + id).css('color', 'green');
                      $('#' + 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();
  
                  $(this).next(':input').focus();
              });
  
          } else {
  
              $('#box_' + question_id).append('<span class="valid-error"> Please Enter Your Answer  </span>');
  
          }
  
          //$('#'+id).trigger('change');
  
          return false;
      }
  });
  
  function sumbitFullQuiz() {
  
      showAlert("You have successfully submited the quiz", "success");
      setTimeout(function () {
          window.location.href = "{{ url('tasks') }}";
      }, 1000);
  }
  
  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