@extends('dashboard.layouts.default')
@if(isset($school_id) && $school_id  == '9')
@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">
					@php
					$next_quiz  = '';
					$next_chapter_quiz  = '';
					@endphp
					@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::join('task_units', 'task_units.unit_id', '=', 'units.id')
								->join('task_student', 'task_units.task_id', '=', 'task_student.task_id')
								->select('units.name','units.id','units.slug')
								->where('task_units.task_id', $quiz_id)
								->where('chapter_id',$chapter->id)
								->groupBy('units.id')
								->get();
								@endphp
								<ul>
									@foreach($units as $key=>$unit)
									@php
									$attempt = App\Models\UnitTaskCompleted::where('task_id', $quiz_id)
									->where('unit_id', $unit->id)
									->where('student_id', STUDENT_ID)
									->orderBy('attempt', 'DESC')
									//->toSql();exit;
									->first();
									if($attempt)
									{
									$attempt = $attempt->attempt;
									}else{
									$attempt = App\Models\TaskCompleted::where('task_id', $quiz_id)
									->where('student_id', STUDENT_ID)
									->orderBy('attempt', 'DESC')
									//->toSql();exit;
									->first()->attempt;
									}
									//echo $attempt;
									$quizCount = App\Models\TaskQuestions::where('task_id',$quiz_id)->where('unit_id',$unit->id)->count();
									$answeredCount = App\Models\QuizAnswer::where('task_id',$quiz_id)->where('unit_id',$unit->id)->where('is_correct',1)->where('attempt',$attempt)->where('student_id',STUDENT_ID)->count();
									if($quizCount>0){
									$task_percentage = ($answeredCount/$quizCount)*100;
									$percentage = round($task_percentage);
									}
									else{
									$percentage = 0;
									}
									//echo $unit_id;
									$quiz_pending  =  App\Models\TaskAttempt::where('task_id',$quiz_id)->where('unit_id',$unit->id)->where('student_id',STUDENT_ID)->where('attempt',$attempt)->first();
									$quiz_complete = 0;
									//echo $unit_id;
									if($quiz_pending){
									if($quiz_pending->completed_at!=null){
									$quiz_complete = 1;
									}
									}
									if(($chapter->id != $chapter_id) && $quiz_complete == 0 && $next_chapter_quiz ==''){
									$next_chapter_quiz = url('quiz/'.$quiz_id.'/'.$unit->slug);
									}
									if( $quiz_complete ==0 && $unit_id!=$unit->id && $next_quiz =='' & $chapter->id == $chapter_id){
									$next_quiz =  url('quiz/'.$quiz_id.'/'.$unit->slug);
									}
									@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('quiz/'.$quiz_id.'/'.$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">{{ $answeredCount }} / {{ $quizCount }} ({{$percentage}}%)</p>
														@if($percentage == 100)
														<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
					@php
					if($next_quiz=='' && $next_chapter_quiz == ''){
					$next_quiz = '';
					}
					elseif($next_quiz!=''){
					$next_quiz = $next_quiz;
					}
					elseif($next_chapter_quiz != ''){
					$next_quiz = $next_chapter_quiz;
					}
					@endphp
        </div>
      </div>
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="">{{ $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 inner-tabs-content">
          <div class="content">
            @php
            $attempt = App\Models\UnitTaskCompleted::where('task_id', $quiz_id)
            ->where('unit_id', $unit_id)
            ->where('student_id', STUDENT_ID)
            ->orderBy('attempt', 'DESC')
            //->toSql();exit;
            ->first();
            if($attempt)
            {
            $attempt = $attempt->attempt;
            }else{
            $attempt = App\Models\TaskCompleted::where('task_id', $quiz_id)
            ->where('student_id', STUDENT_ID)
            ->orderBy('attempt', 'DESC')
            //->toSql();exit;
            ->first()->attempt;
            }
            //echo $attempt;
            $quiz_pending  =  App\Models\TaskAttempt::where('task_id',$quiz_id)->where('unit_id',$unit_id)->where('student_id',STUDENT_ID)->where('attempt',$attempt)->first();
            $quiz_complete = 0;
            //echo $unit_id;
            if($quiz_pending){
            if($quiz_pending->completed_at!=null){
            $quiz_complete = 1;
            }
            }
            @endphp
            @if($quiz_complete == 1 || $is_attempted==1)
            <div class="card card-title">
              <div class="card-body">
                <a class="btn btn-primary btn-lg  align-items-center justify-content-center" id="redoTaskButton" data-ln="{{ url('re-assign/'.$quiz_id.'/'.$unit_id) }}">Re-do this video & quiz</a>
              </div>
            </div>
            @endif
            {{--@if(@$quizes->enable_video && $video)
            <div class="card card-title">
              <div class="card-body">
                <h3 class="title" id="video-banner">
                &nbsp;&nbsp;<i
                  class="fa fa-info-circle"></i>&nbsp;&nbsp;&nbsp;
                @if($is_videoplayed)
                The video is locked whilst you attempt the quiz
                @else
                To check your answers sign up for free
                @endif
                <!--                  <a href="{{ url('signup') }}" class="btn btn-primary" style="text-align: right;">Sign Up for Free</a></h3>-->
                <!-- <a class="btn video-btn pull-right" href="{{ url('signup') }}#sign-up-free">Sign up for free</a></h3> -->
              </div>
            </div>
            @endif --}}
            <div class="video-content mb-2">
              @if($video_player)
              <!--   <div class="card card-title">
                <div class="card-body">
                    <h3 class="title text-center" id="video-banner">&nbsp;&nbsp;<i
                            class="fa fa-info-circle"></i>&nbsp;&nbsp;&nbsp;Watch the video to
                        attempt the quiz
                </div>
                </div> -->
              @if( $video)
              <div class="embed-responsive embed-responsive-16by9 vid" 
              @if(isset($video->video_mode) && isset($expiry_status) && isset($studnt_type) && $studnt_type == 'tutor' && $video->video_mode == 'paid' && $expiry_status =='Y')style="pointer-events:none;"@endif >
								<div class="d-flex align-items-center justify-content-center">
									<div class="video-inner-box text-center popup_video"
										style="display: none">
										<h3>Full access for videos, gap-fills and exam questions</h3>
										<a href="{{ url('subscriptions') }}" class="btn btn-kay">Click
										here</a>
									</div>
									@if(isset($video->video_mode) && isset($expiry_status) && isset($studnt_type) && $studnt_type == 'tutor' && $video->video_mode == 'paid' && $expiry_status =='Y')
									<div class="video-inner-box text-center popup_videos">
										<h3>Your subscription has run out. <br/>Please ask your tutor to re-activate your account.</h3>
									</div>
									@endif
									@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> --}}
									<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
									<!-- New section for youtube video -->
									<div id="player"></div>
									<!-- New section for youtube video -->
									@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>
								<!-- <iframe class="embed-responsive-item" src="//www.youtube.com/embed/M-1S9NmH9O0"></iframe> -->
							</div>
							@endif
						</div>
            {{-- 
            <div class="embed-responsive embed-responsive-16by9 vid">
              <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>
              <input type="hidden" id="videoCompleted" value="true">
            </div>
            --}}
            @endif
            <form class="quiz-wrap" id="quiz-ans-from">
              <input type="hidden" name="unit_id"  id="unit_id" value="{{ $unit_id }}">
              <input type="hidden" name="task_id"  id="task_id" value="{{ $quiz_id }}">
              <input type="hidden" name="quiz_type" id="quiz_type" value="">
              <input type="hidden" name="current_question_id" id="current_question_id" value="">              
              <input type="hidden" name="current_answer" id="current_answer" value="">              
              @php
              $q_count = 1;
              $answered_fillQuestions = App\Models\QuizFillBlankAttempt::join('questions','quiz_fill_blank_attempt.question_id','questions.id')
              ->select('questions.id','questions.question')
              ->where('quiz_fill_blank_attempt.student_id',STUDENT_ID)
              ->where('quiz_fill_blank_attempt.unit_id',$unit_id)
              ->where('quiz_fill_blank_attempt.task_id',$quiz_id)
              ->where('quiz_fill_blank_attempt.attempt',$attempt)
              ->groupBy('questions.id')
              ->get();
              $display = count($answered_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($answered_fillQuestions as $key=>$fillquiz)
                  @php
                  $fill_answers = App\Models\QuizFillBlankAttempt::join('quiz_fill_blank_answers','quiz_fill_blank_answers.question_id','quiz_fill_blank_attempt.question_id')
                  ->join("fill_blank_answers",function($join){
                  $join->on("fill_blank_answers.question_id","=","quiz_fill_blank_answers.question_id")
                  ->on("fill_blank_answers.position_order","=","quiz_fill_blank_answers.position_order");
                  })
                  ->select('quiz_fill_blank_answers.position_order','quiz_fill_blank_answers.answer','quiz_fill_blank_answers.is_correct','fill_blank_answers.answers as fillBAns')
                  ->where('quiz_fill_blank_answers.student_id',STUDENT_ID)
                  ->where('quiz_fill_blank_answers.unit_id',$unit_id)
                  ->where('quiz_fill_blank_answers.task_id',$quiz_id)
                  ->where('quiz_fill_blank_answers.attempt',$attempt)
                  ->orderBy('position_order','ASC')
                  ->get()->toArray();
                  $question = strip_tags(htmlspecialchars_decode($fillquiz['question']));
                  $questionArray = explode('________', $question);
                  // dd($fill_answers);
                  $newStr = '';
                  for ($i = 0; $i < count($questionArray); $i++)  {
                  $fillAns = isset($fill_answers[$i]['answer'])?$fill_answers[$i]['answer']:'';
                  $color = (@$fill_answers[$i]['is_correct']==1)?'green':'red';
                  $newStr.= $questionArray[$i];
                  $correctAns = isset($fill_answers[$i]['fillBAns'])?explode(',',$fill_answers[$i]['fillBAns']):[];
                  //dd($correctAns[0]);
                  $newStr.= ($fillAns!='')?'<input type="text" class="form-control fill-answer keydisabled" style="color: '.$color.'; font-weight: bold; font-size: medium;" value="'.$correctAns[0].'">':'';
                  }
                  @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="">
                  </div>
                  @php
                  $q_count++;
                  @endphp
                  @endforeach
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 custom_fm_col">
                  @php
                  $answered_questions = App\Models\QuizAnswer::select('questions.id','questions.question','quiz_answers.answer','one_word_answers.answer as correct_answer','quiz_answers.is_correct')
                  ->join('questions','quiz_answers.question_id','questions.id')
                  ->join('one_word_answers','one_word_answers.question_id','questions.id')
                  ->where('quiz_answers.student_id',STUDENT_ID)
                  ->where('quiz_answers.unit_id',$unit_id)
                  ->where('quiz_answers.task_id',$quiz_id)
                  ->where('quiz_answers.attempt',$attempt)
                  ->groupBy('questions.id')
                  ->get();
                  @endphp
                  @foreach($answered_questions as $key=>$quizanwers)
                  @php
                  $ans = explode(',',$quizanwers->correct_answer);
                  $color = $quizanwers->is_correct?'green':'red';
                  @endphp
                  <div class="form-group custom_grp_fm" id="cstm_sng_{{ $quizanwers->id }}" data-question="{{ $quizanwers->question }}">
                    <label class="lbl-qstn"> {{ $q_count }}
                    . {{ $quizanwers->question }}</label>
                    <input type="text"
                      class="form-control txt_single-ans {{ $quizanwers->is_correct?'txt-success':'txt-danger' }} keydisabled bg-white"
                      id="sng-ans-{{ $quizanwers->id }}"
                      value="{{ $quizanwers->answer }}       {{ $quizanwers->is_correct?'✔':'✖' }}"
                      style="color: {{$color}}; font-weight: bold; font-size: medium;">
                    <input type="hidden" value="1127">
                    @if($quizanwers->is_correct == 0)
                    <div class="answer-success">
                      <h4>Answer : {{ $ans[0] }}
                        <a class="report-issue" href="javascript:void(0)" onclick="reportIssue({{ $quizanwers->id }},'{{ $ans[0] }}',{{ $quizanwers->is_correct }})">Report an issue</a>
                      </h4>
                    </div>
                    @endif
                  </div>
                  @php
                  $q_count++;
                  @endphp
                  @endforeach
                </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>
              <a href="javascript:void(0)" class="btn btn-blue btn-sub-quiz mt-2" onclick="sumbitFullQuiz();" style="display: none;">
              @if($next_quiz!='')Submit Quiz & Next @else Submit Quiz @endif
              </a>
            </form>
          </div>
          @if($is_complete && $is_attempted==0)
          <div class="quiz-warning">
            <h3> Please complete all tasks in this homework to re-attempt any quizzes.</h3>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>
@include('layout.report_issue')
</div>
@endsection
@push('page-css')
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
<link href="{{ url('frontend/css/player.css') }}" rel="stylesheet">
<style type="text/css">
  .text-danger {
  color: #e85f5d !important;
  }
  .text-success {
  color: #4abb25 !important;
  }
  .qstn-txt {
  text-shadow: 0 0 0px #0e080887;
  color: transparent;
  }
  .report-issue {
  float: right;
  line-height: 20px;
  color: #999;
  font-size: 12px;
  padding-right: 18px;
  }
</style>
@endpush
@section('pagescripts')
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<script src="https://src.litix.io/core/3/mux.js"></script>
<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ url('js/common.js') }}"></script>
<!-- <script src="{{ url('js/hls-demo.js')}}"></script> -->
<!-- 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.1')}}"></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}},
          {{$quiz_id}}
      );
  }
  
  // 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) {
  
  // 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">
  var submittedItems = [];
  var currentquestions = [];
  $(document).ready(function () { 
      if(video !== undefined){
          videoInit();
      }
      //clearLocalStorage();
      $('#redoTaskButton').click(function(event) {
          /* Act on the event */
          clearLocalStorage();
          $getLink = $(this).data('ln');
          $('#redoTaskButton').html("Please wait...");
          window.location.href = $getLink;
      }); 
  });

  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
      // 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: hlsUrl,
                  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 () {
              hls.startLoad();
          }, {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: '{{ $encryptedTask }}', // 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);
      if (videoPlayed.length > 0) {
          let playedTime = videoPlayed[videoPlayed.length - 1]['end'];
          if (playedTime == v.duration) {
          }
      }
  }
  
  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) {
                  // 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);
              }
  
              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;
      }
    }
  
  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]);
      })
  }
  
  @if($is_attempted==0)
  getQuizQuestions();
  @endif
  @if((!$video_player || $is_videoplayed) && !$is_complete )  
  @endif
  
  $(document).on('keydown', '.fill-answer', function (e) {
  
      if (e.keyCode === 13) {
          id = this.id;
          var item = this;
          position = $('#' + id).attr('data');
          answer = this.value;
          question_id = $('#fill_quiz_id').val();
          var unit_id = '{{ $unit_id }}';
          var task_id = '{{ $quiz_id }}';
          var attempt = '{{ $attempt }}';
          if (answer != '') {
  
              $.ajax({
                  url: "{{ url('submit-fill-blank') }}",
                  type: 'POST',
                  data: {
                      'question_id': question_id,
                      'position': position,
                      'answer': answer,
                      'unit_id': unit_id,
                      'task_id': task_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');
                  setNextQuestion();
                  $(item).next().focus(); 
              });
          }
          return false;
      }
    });
  
  
  function updatevideo() {
      var task_id = '{{ $quiz_id }}';
      var attempt = '{{ $attempt }}';
      var unit_id = '{{ $unit_id }}';
      var video_completed = $('#videoCompleted').val();
      $.ajax({
          url: "{{ url('updatevideo') }}",
          type: 'POST',
          data: {'unit_id': unit_id, 'task_id': task_id, 'attempt': attempt, 'video_completed': video_completed},
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  
      }).done(function (d) {
          $("#video-banner").html("&nbsp;&nbsp;<i class='fa fa-info-circle'></i>&nbsp;&nbsp;&nbsp;The video is locked whilst you attempt the quiz");
          $('#myVideo').removeAttr("src");
          $(".txt_single-ans").last().removeClass('keydisabled');
          $(".lbl-qstn").last().removeClass('qstn-txt');
          $('.fill-answer').removeClass('keydisabled');
          $(".fill-input").last().removeClass('qstn-txt');
      });  
  }  
  
  function getFirstQuestion() {
      if ($('#videoCompleted').val() == 'true') {
          getQuizQuestions();
      }
      $('#videoCompleted').val('false');
  }
      
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
    
  function sumbitFullQuiz() 
  {  
      nextUrl = '{{ $next_quiz }}';
      if (nextUrl != '') {
          window.location.href = nextUrl;
      } else {
          window.location.href = "{{ url('tasks') }}";
      }  
  }
  
  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');
  }

    var questionJsonArray;
    var questionno=0;

    function getQuizQuestions() {
        var task_id = '{{ $quiz_id }}';
        var unit_id = '{{ $unit_id }}';
        var student_id  = '{{ $student_id }}';
        $.ajax({
          url: "{{ route('fetchQuizQuestion') }}",
          type: 'POST',
          data: { 'unit_id': unit_id, 'task_id': task_id },
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }  
        }).done(function (result) {
         if(result.quizsList) {
            var resultArray = JSON.stringify(result.quizsList);
            questionJsonArray = resultArray;
        }
        if (localStorage.getItem('quiz_'+student_id+'_'+task_id+'_'+unit_id)) {
            if (localStorage.getItem('quiz_'+student_id+'_'+task_id+'_'+unit_id)) {
            var storedArray = localStorage.getItem('quiz_'+student_id+'_'+task_id+'_'+unit_id);
            $.each(JSON.parse(decodeURIComponent(storedArray)), function(index, corAnswer) {
              submittedItems.push(corAnswer);
              currentquestions.push(corAnswer);
            });
      }     fetchLocalStoredData();
        }
        else {
            setNextQuestion();
        }
        });
    }

  function setNextQuestion()
  {
        var fill_count = $('.fill_quiz').length;
        var single_count = $('.custom_grp_fm').length;
        var questions_count = $('.custom_grp_fm').length;
        var limit = 0;
        var video_completed = $('#videoCompleted').val();
        var jsonArray = JSON.parse(questionJsonArray);
        var length =  jsonArray.length;;
        if(questions_count == '') {
            questions_count = 0;
        }
        if(fill_count == '') {
            fill_count = 0;
        }
        questionno = questions_count + fill_count;
        if(length != questionno) {
            var nextQuestion = jsonArray[questionno];
            if (nextQuestion['typeId'] == 2) {
                $('#quiz_type').val(2);
                $('.custom_fm_col').append(nextQuestion['html']);
                $('.btn-sin-sub').show();
                @if(!$is_videoplayed )
                @endif
                @if(!$video_player)
                $(".lbl-qstn").last().removeClass('qstn-txt');
                $(".txt_single-ans").last().removeClass('keydisabled');
                @endif
                $('#sng-ans-' + nextQuestion['questionid']).focus();
            } else if (nextQuestion['typeId'] == 3) {
                $('#quiz_type').val(3);
                $('.fill_blnk_col').append(nextQuestion['html']);
                $('.fill-answer').each(function (index) {
                    qid = $('#fill_quiz_id').val();
                    $(this).attr('id', 'blnk_' + qid + '_' + (index + 1));
                    $(this).attr('data', index + 1);
                });
                $('.btn-sin-sub').show();
                $('.fil-show-blnk').show();
                fill_count = parseInt(fill_count) + 1;
                @if(!$is_videoplayed)
                if (fill_count == 0) {
                    $('.fill-answer').addClass('keydisabled');
                    $(".fill-input").last().addClass('qstn-txt');
                } else
                    $(".fill-input").last().removeClass('qstn-txt');
                @endif
            }
            $('#qn_no').val(nextQuestion['questionid']);
        }    
        var totalNo = parseInt(questionno)+1;
       // if(totalNo == length) {
         //       $(".btn-sin-sub").hide();
         //       $(".btn-sub-quiz").show();
    //    }
    }

    $(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;
                var questionid = this.id.split('sng-ans-');
                $("#current_question_id").val(questionid[1]);
                $("#current_answer").val(this.value);
                $('#' + id).addClass('keydisabled');
                $('.btn-sin-sub').trigger('click');
                return false;
            }
      }
    });
  
    $(".btn-sin-sub").click(function (e)
    {
        e.preventDefault();
        $('.btn-sin-sub').attr("disabled","disabled");
        var submit_flag = 0;
        $(".valid-error").remove();
        var attempt = '{{ $attempt }}';
        var quiz_type = $('#quiz_type').val();
        var error = 0;
  
        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>');
                    error = 1;
                    $('.btn-sin-sub').removeAttr("disabled");
                    $('#sng-ans-'+ id).focus();
                    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>');
                    error = 1;
                    return false;
                }
            });
        }
        var questionId = $("#qn_no").val();
        var answer =  $("#sng-ans-"+questionId).val();

        if (error == 0) {
           submitAnswer(questionId,quiz_type,answer);  
        }
    });

    function submitAnswer(question_id,quiz_type,answer)
    {
            var unit_id     = '{{ $unit_id }}';
            var task_id     = '{{ $quiz_id }}';
            var student_id  = '{{ $student_id }}';
            var questionArray = JSON.parse(questionJsonArray);
            var length        =  questionArray.length;;
            var resultArray   = $.grep(questionArray, function(element) {
                return element .questionid == question_id;
            });
            var fill_count = $('.fill_quiz').length;
            var answerArray = resultArray[0]['answer'];
            var question = resultArray[0]['question'];
            var chance  = '';
            if ($('#chance').length) {
                var chance = $("#chance").val();
            }
            var questions_count = $('.custom_grp_fm').length;
            if(questions_count == '') {
                questions_count = 0;
            }
            if(fill_count == '') {
                fill_count = 0;
            }
            questionno = questions_count + fill_count;
            var is_correct = 0;
            if(checkValidAnswer(answer,answerArray,question)) {
                var is_correct = 1;
            }

            if(quiz_type == 2) {
                        var answer = $('#sng-ans-' + question_id).val();
                        var correct_answer = answerArray[0];
                        
                        if (is_correct == 0 && chance == '' ) {
                            $('#sng-ans-' + question_id).addClass('txt-danger');
                            $('#sng-ans-' + question_id).addClass('bg-white');
                            $('#sng-ans-' + question_id).css('color', 'red');
                            $('#sng-ans-' + question_id).css('font-weight', 'bold');
                            $('#sng-ans-' + question_id).css('font-size', 'medium');
                            $('#sng-ans-' + question_id).attr('disabled', true);
                            $('#sng-ans-' + question_id).val(answer + '      ✖');
                            $("#sng-ans-" + question_id).attr("id", 'old-ans-' + question_id);
                            $('#cstm_sng_' + question_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(' + question_id + ',\'' + correct_answer + '\',' + is_correct + ')">Report an issue</a></h4></div>');
                            $('#cstm_sng_' + question_id).append('<div class="second-chance"><input type="text" name="txt_single_answer"  class="form-control txt_single-ans bg-white"  id="sng-ans-'+ question_id + '" data-id="' + question_id + '" autocomplete="off" placeholder="Please try again"> <input type="hidden" id="chance" name="chance" value="2"></div>');
                            $('#sng-ans-'+ question_id).focus();
                            $('.btn-sin-sub').removeAttr("disabled");
                        }
                        else if (is_correct == 0) {
                            $('#sng-ans-' + question_id).addClass('txt-danger');
                            $('#sng-ans-' + question_id).css('color', 'red');
                            $('#sng-ans-' + question_id).css('font-weight', 'bold');
                            $('#sng-ans-' + question_id).css('font-size', 'medium');
                            $('#sng-ans-' + question_id).val(answer + '      ✖');
                            $('#cstm_sng_' + question_id).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                                '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + question_id + ',\'' + correct_answer + '\',' + is_correct + ')">Report an issue</a></h4></div>');
                            $('#sng-ans-' + question_id).removeAttr("name");
                            $('#sng-ans-' + question_id).addClass('keydisabled');
                            $('#sng-ans-' + question_id).attr('disabled', true);
                            $("#chance").remove();
                            submittedItems.push({ questionno: questionno,question: question,quiz_type: quiz_type,question_id: question_id, txt_single_answer: answer, is_correct: is_correct,correct_answer: correct_answer,chance: chance  });                         
                            currentquestions.push({ questionno: questionno,question: question,quiz_type: quiz_type,question_id: question_id, txt_single_answer: answer, is_correct: is_correct,correct_answer: correct_answer,chance: chance  });                         
                            if (questionno > 0 && questionno % 5 === 0)  {
                                submitQuizAnswers(questionno,length);
                            }
                            else{
                                setNextQuestion();
                            }
                            if(questionno == length) {
                                   submitQuizAnswers(questionno,length);
                                   $(".btn-sin-sub").hide();
                                   $(".btn-sub-quiz").show();
                            }
                        } else {
                            $('#sng-ans-' + question_id).addClass('txt-success');
                            $('#sng-ans-' + question_id).addClass('bg-white');
                            $('#sng-ans-' + question_id).css('color', 'green');
                            $('#sng-ans-' + question_id).css('font-weight', 'bold');
                            $('#sng-ans-' + question_id).css('font-size', 'medium');
                            $('#sng-ans-' + question_id).val(answer + '      ✔');
                            $('#cstm_sng_' + question_id).append('<div class="answer-success"> <h4> Answer: ' + correct_answer +
                                '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + question_id + ',\'' + correct_answer + '\',' + is_correct + ')">Report an issue</a></h4></div>');
                            $('#sng-ans-' + question_id).removeAttr("name");
                            $('#sng-ans-' + question_id).addClass('keydisabled');
                            $('#sng-ans-' + question_id).attr('disabled', true);
                            $("#chance").remove();
                            submittedItems.push({ questionno: questionno,question: question,quiz_type: quiz_type,question_id: question_id, txt_single_answer: answer, correct_answer: correct_answer,is_correct: is_correct,chance: chance });                              
                            currentquestions.push({ questionno: questionno,question: question,quiz_type: quiz_type,question_id: question_id, txt_single_answer: answer, correct_answer: correct_answer,is_correct: is_correct,chance: chance });                                                       
                            if (questionno > 0 && questionno % 5 === 0)  {
                                submitQuizAnswers(questionno,length);
                            }
                            else{
                                setNextQuestion();
                            }
                            if(questionno == length) {
                                   submitQuizAnswers(questionno,length);
                                   $(".btn-sin-sub").hide();
                                   $(".btn-sub-quiz").show();
                            }
                        }
            }
            else if(quiz_type == 3) {
                        if (return_data.next_quetion['status'] == true) {
                            $('.fill_blnk_col').append(return_data.next_quetion['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();   
                        }
            }
            if ((questionno > 0 && questionno % 5 === 0) || questionno == length) {
                 clearLocalStorage();
            } 
            localStorage.setItem('quiz_'+student_id+'_'+task_id+'_'+unit_id, encodeURIComponent(JSON.stringify(submittedItems)));
            isLoading       = false;  
            $('.btn-sin-sub').removeAttr("disabled");
    } 

    function  checkValidAnswer(answer, correctAnswerArray, question)
    {
            var result = false;     
            correctAnswerArray = correctAnswerArray.map(function(item) {
                return item.toLowerCase();
            });
            var answer =answer.trim().toLowerCase();
            var lastChar = answer.substr(-1);
            var removeString = ["}", "\\", "|", "#", "_", ","];
            removeString.forEach(function (charToRemove) {
                answer = answer.replace(new RegExp(charToRemove.replace(/\\/g, '\\\\'), 'g'), '');
            });
            if ($.inArray(answer, correctAnswerArray) !== -1) {
                                        result =  true;
            }
            else {     
                    var originalAnswer = correctAnswerArray[0];
                    var encoder = new TextEncoder('utf-8');
                    var originalAnswerUTF8 = encoder.encode(originalAnswer);
                    var originalAnswerUTF8String = new TextDecoder('utf-8').decode(originalAnswerUTF8);
                    
                    if (question.toLowerCase().indexOf(" or ") !== -1) {   
                        if ((answer.indexOf("yes") === -1 && answer.indexOf("no") === -1) || (answer.indexOf("true") === -1 && answer.indexOf("false") === -1)) {
                            var canswer = correctAnswerArray[0].replace('.', '');
                            if (canswer === 'false' || canswer === 'no') {
                                        var matchArray = ["false", "fal", "alse", "fase", "Falsr", "Falsre", "falsert", "asl", "lse", "fa", "false.", "falser", "falsew", "falsdr", "false4r", "faulse", "faslse", "fallse", "falsr", "falsw", "fakse", "falss", "faulse", "wrong", "faske", "faklse", "falde", "faul", "alse", "fqlse", "fakse", "fapse", "faose", "falwe", "falde", "fal3s", "falce", "falcw", "falcr", "falcd", "fal4s", "falsww", "fals3", "fals4", "fqlse", "fzlse", "fwlse", "f", "fall", "fallse", "faallse", "fallse", "fa", "fals", "dalse", "galse", "ralse", "talse", "calse", "valse", "fzlse", "fakze", "falzee", "falsee", "faalse", "fallsee", "falseee", "fwkse", "fzkae", "faose", "Falce", "faux", "fapse", "fsle", "Falsr", "Felse", "falce", "fels", "felsw", "fakse", "faksw", "faksd", "faksa", "Faslse", "Faslsse", "Feslse", "falsee", "faks", "felsd", "felsr", "falsww", "fassel", "fqsle", "fzsle", "fasele", "gasle", "dasle", "vasel", "dasle", "fule", "fuel", "fail", "fusle", "fulse", "fqsel", "faps", "folse", "folde", "fols", "folsw", "falseww", "falseu", "falsei", "falseo", "wrong", "wron", "wrpng", "weong", "wromg", "nottrue", "isnttrue", "nottru", "no", "nope", "nop", "na", "n", "nah", "n9", "n0", "np", "nl", "nk", "ni", "mo", "mp", "ml", "mk", "mi", "m", "bo", "bp", "bl", "bi", "b", "ho", "jo", "ko", "naa", "naaa", "nah", "naah", "naaah", "naaaa", "naaaaa", "not", "noteven", "no0", "no9", "npo", "nlo", "nko", "nio", "noi", "nok", "nol", ".false", "noo", "nooo", "noooo", "nooooo", "noooooo", "false]", "false]", "flas", "flase", "flade", "fassle", "fallse", "fallsd", "Fakse", "faksew", "fakser", "faksed", "fakse3", "fakse4", "false3", "false4", "fal", "se", "fa", "se", "fa", "fas", "fase", "fasll", "faslee", "falkse", "falksee", "falksse", "falks", "falksw", "falksr", "falkss", "falksd", "falser", "falsed", "falsert", "falce", "falcee", "falcw", "falcr", "falcew", "falcerl", "falced", "falsp", "falso", "Falss", "fallsee", "falksee", "fale", "fake", "falw", "falr", "falawe", "flas", "glase", "galse", "dalse", "valse", "calse", "valse", "ralse", "ealse", "talse", "fasl", "fls", "las", "fl", "al", "lfas", "afls", "afl", "noitcan", "notpossibl", "nofala", "fales", "fasle", "flse", "lase", "fla", "ale", "als", "lfase", "aflse", "noo", "nah", "n", "na", "nope", "noitcant", "notpossible", "no.", "falae", "n.", "n]", "n2", "n0", "nn", "nnn", "nz", "nb", "nr", "o", "mo", "ni"];
                                        result = (matchArray.indexOf(answer) !== -1);
                            } 
                            else if (canswer === 'true' || canswer === 'true' || canswer === 'yes') {
                                        var matchArray = ["true", "tru", "tr", "ue", "ru", "true.", "tru", "terue", "ttrue", "truwe", "trure", "yrue", "ttue", "tri", "ytrue", "correct","i agree", "agree", "agre", "agrew", "i agrew","i agreed","agreed","ttrue","trye","trues","ttrrue","teue","tfue","tgue","tdue","trye","trie","trhe","trje","yrue","grue","frue","grue","hrue","trye","trie","truw","t","tr", "tru","rue","yru","ttu","tue","tri","truw","tryue","trud","truf","trus","trust","ttrie","ttrje","truue","triie","tryye","tryhe","rtue", "rtye","gture","htrue","ytrue","ytrie","ytryd","rtye","true","truew","trus","trud","truf","truw","trus","trud","trur","yrid","grye","t4ue","t5ue","tr7e","tr8e","true","tru4","true3","true4","y","ye","yee","yeee","yea","yeaa","yeah","yrrah","yeaah","yeaaa","yep","ya","yess","yess","yed","yrd","yws","ys","yez","yex","yesw","yesa","yesd","y3s","y3es","y3ws", "y4es", "y4rs", "y2ws", "yesx", "yesz", "yesc", "yws", "yas", "yds", "y3s", "y4s", "ye3s", "ye4s", "ues", "tes", "ges", "hes", "jes","7es","6es","yy","yyy","yyes","yees","yews","hews","hds","h3s","ues","uws","ys","yas","yesz","yesw","yesd","yesx","yesc","ywsa", "ywd", "ywa", "tes", "hes", "jes", "ues", "yws", "yds", "yrs", "tes", "ges", "hes", "jes", "ues", "yeaa", "yed", "truue", "trrue", "ttrue", "truee", "truuee", ".true", "Trze", "trie", "teue", "twue", "tsue", "tdue", "tfue", "t5ue", "t4ue", "ytes", "yges", "yhes", "yews", "yeds", "yesa", "yesd", "yesz", "yesx", "tes", "y6es", "y7es", "y4es", "y4rs", "y3es", "y3esa", "y4eds", "yeds", "yews", "yexs", "yezs", "yez","true]", "true ]", "yes]", "yes ]", "tes", "res", "fes", "hes", "ues", "jes", "yers", "yedsa", "yews", "yewsa", "yewsd", "ywes", "ywesd", "yreds", "yers", "yerss", "yersa", "yersx", "yersz", "tire", "ture", "tyre", "tjre", "yses", "ydes", "yseds", "yedsa", "2yes", "trrue", "ttrue", "truue", "truee", "trust", "ye", "yeya", "ya", "correct", "corect", "right", "rioght", "its true", "it is true","treu","teru","tre","ure","rute","y","ye","yessir","yse","yes#","yes=","yes]","yes","yes","yes/","yee","esy","es","eys"];
                                        result = (matchArray.indexOf(answer) !== -1);
                            }
                            else{
                                        result = (correctAnswerArray.indexOf(answer) !== -1);
                            }
                        }
                        else if ((answer.indexOf("yes") !== -1) && (answer.indexOf("no") !== -1)) {
                                        result = false;
                        } else if ((answer.indexOf("true") !== -1) && (answer.indexOf("false") !== -1)) {
                                        result = false;
                        }
                        else {
                            if (/^[0-9]+$/.test(answer_data)) {
                                var answer = answer.replace(/\s/g, ''); // Remove spaces
                                $.each(correctAnswerArray, function(index, corAnswer) {
                                    corAnswer = corAnswer.replace(/\s/g, ''); // Remove spaces
                                    if (answer === corAnswer) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                });
                            }
                            else {
                                $.each(correctAnswerArray, function(index, corAnswer) {
                                    if (corAnswer.length == 1 && answer.length == 1) {
                                        if (answer === corAnswer) {
                                            result = true;
                                            return false; // break out of the loop
                                        }
                                    }
                                    if (answer && corAnswer) {
                                        if (answer.indexOf(corAnswer) !== -1) {
                                            result = true;
                                            return false; // break out of the loop
                                        }
                                    }
                                    if (answer && corAnswer) {
                                        var wordiff = Math.abs(corAnswer.length - answer.length);
                                        if (answer.length >= 5 && wordiff == 1 && (corAnswer.indexOf(answer) !== -1 || answer.indexOf(corAnswer) !== -1)) {
                                            result = true;
                                            return false; // break out of the loop
                                        }
                                    }
                                });
                            }
                        }
                    } 
                    else if ((answer.indexOf("yes") !== -1) && (answer.indexOf("no") !== -1)) {
                        result = false;
                    }
                    else if (answer.indexOf("true") !== -1 && answer.indexOf("false") !== -1) {
                        result = false;
                    }
                    else { 
                        $.each(correctAnswerArray, function(index, corAnswer) {
                                if (corAnswer.length === 1 && answer.length === 1) {
                                    if (answer === corAnswer) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }
                                if (answer && corAnswer) {
                                    var wordDiff = Math.abs(corAnswer.length - answer.length);
                                    if (answer.length >= 5 && wordDiff === 1 && (corAnswer.includes(answer) || answer.includes(corAnswer))) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }
                                if (answer && corAnswer) {
                                    if (answer.includes(corAnswer)) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }
                        });
                    }
                    if(result == false) 
                    {                                         
                        if (! /^-?\d+-?$/.test(answer)) {
                            $.each(correctAnswerArray, function(index, corAnswer) {
                                answer = answer.replace(/\s/g, '');
                                corAnswer = corAnswer.replace(/\s/g, '');

                                if (corAnswer.length - answer.length === 1) {
                                    if(isOneLetterMissing(corAnswer,answer)) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }
                                if (corAnswer.length == answer.length) {
                                   if (areWordsSimilar(corAnswer, answer)) {
                                       if (areLettersInterchanged(corAnswer, answer)) {
                                            result = true;
                                            return false; // break out of the loop
                                        }
                                    }
                                }
                                
                                if (answer && corAnswer) {
                                    var wordDiff = Math.abs(corAnswer.length - answer.length);

                                    if (answer.length >= 5 && wordDiff === 1 && (corAnswer.includes(answer) || answer.includes(corAnswer))) {
                                        result = true;
                                        return false; // break out of the loop
                                    }

                                    var answerArray1 = answer.split('');
                                    var answerArray2 = corAnswer.split('');
                                    var diff = answerArray2.filter(item => !answerArray1.includes(item));

                                    var len = corAnswer.length;
                                    var answerLen = answer.length;
                                    var commonCount = 0;

                                    $.each(answerArray2, function(item, key) {
                                        if ($.inArray(key, answerArray1) !== -1) {
                                            commonCount++;
                                        }
                                    });

                                    if ((len + 1) === answerLen && (answerLen - 1) === commonCount && wordDiff === 1 && diff.length === 1) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }

                                var prefix = ['a', 'an', 'and', 'the', 'it', 'its', 'it is', 'it’s', 'these', 'they', 'theyre', 'they’re', 'by'];
                                var answerText = answer.split(' ');
                                var answerLen = answerText.length;

                                if ($.inArray(answerText[0], prefix) !== -1 || $.inArray(answerText[answerLen - 1], prefix) !== -1) {
                                    if (answerText[0] && $.inArray(answerText[0], prefix) !== -1) {
                                        answerText.shift();
                                        answer = answerText.join(' ');
                                    }

                                    if (answerText[answerLen - 1] && $.inArray(answerText[answerLen - 1], prefix) !== -1) {
                                        answerText.pop();
                                        answer = answerText.join(' ');
                                    }

                                    var answer1 = answer.replace(/\s/g, '');
                                    var answerArray1 = answer1.split('');
                                    var corAnswer1 = corAnswer.replace(/\s/g, '');
                                    var answerArray2 = corAnswer1.split('');
                                    var diff = answerArray2.filter(item => !answerArray1.includes(item));

                                    if (answer.length >= 2 && diff.length === 1) {
                                        result = true;
                                        return false; // break out of the loop
                                    }
                                }
                            });
                        }
                    }
            }
            return result;
    }
    
    function areWordsSimilar(word1, word2) {
        word1 = word1.toLowerCase();
        word2 = word2.toLowerCase();
        
        // Convert the words to arrays of characters and sort them
        var sortedWord1 = word1.split('').sort().join('');
        var sortedWord2 = word2.split('').sort().join('');
        
        // Compare the sorted words
        if (sortedWord1 === sortedWord2) {
              return true;
        }
        else{
              return false;
        }
    }
    
    function areLettersInterchanged(original, modified) {
      // Check if the length of both strings is the same
      if (original.length !== modified.length) {
        return false;
      }

      // Count the number of differences
      let differences = 0;
      for (let i = 0; i < original.length; i++) {
        if (original[i] !== modified[i]) {
          differences++;
        }
        // If there are more than two differences, no need to continue checking
        if (differences > 2) {
          return false;
        }
      }

      // If exactly two differences are found, return true
      return differences === 2;
    }

    function similarText(str1, str2) {
          return true;
    }

    function clearLocalStorage() {
        var unit_id     = '{{ $unit_id }}';
        var task_id     = '{{ $quiz_id }}';
        var student_id  = '{{ $student_id }}';
        if (localStorage.getItem('quiz_'+student_id+'_'+task_id+'_'+unit_id)) {
            localStorage.removeItem('quiz_'+student_id+'_'+task_id+'_'+unit_id);
        }
    }

    function submitQuizAnswers(currentQuestionNo, totalQuestionNo) 
    {
        var next_question = 0;
        if(currentQuestionNo == totalQuestionNo) {
           next_question = 1;
        }
        var unit_id = '{{ $unit_id }}';
        var task_id = '{{ $quiz_id }}';
        var attempt = '{{ $attempt }}';
        $.ajax({
              url: "{{ route('submitQuizAnswer') }}",
              type: 'POST',
              data: {'quizdata': JSON.stringify(currentquestions),'next_question': next_question, 'task_id': task_id,'unit_id': unit_id,'attempt': attempt},
              dataType: "json",
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          }).done(function (result) {
                if(currentQuestionNo !== totalQuestionNo) {
                    setNextQuestion();
                }
            clearLocalStorage();
            submittedItems = [];
            currentquestions = [];  
          });
    }

    
    function fetchLocalStoredData()
    {
        var task_id = '{{ $quiz_id }}';
        var unit_id = '{{ $unit_id }}';
        var student_id  = '{{ $student_id }}';
        var html = '';
        var localStoredData = localStorage.getItem('quiz_'+student_id+'_'+task_id+'_'+unit_id); 
        $.each(JSON.parse(decodeURIComponent(localStoredData)), function(key, value) {
            if (value.quiz_type !== undefined) {
                if (value.quiz_type === '3') {
                    // Handle quiz type 3 
                } else if (value.quiz_type === '2') {
                    if (value.is_correct === 1) {
                        html += '<div class="form-group custom_grp_fm" id="cstm_sng_' + value.question_id + '"><label class="lbl-qstn">' + value.questionno + '.' + value.question + '</label><input type="text" class="form-control txt_single-ans keydisabled txt-success bg-white" id="sng-ans-' + value.question_id + '" value="' + value.txt_single_answer + '       ✔" data-id="' + value.question_id + '" autocomplete="off" disabled="disabled" style="color: green; font-weight: bold; font-size: medium;"><input type="hidden" name="question_id" value="' + value.question_id + '"></div>';
                    } else {
                        html += '<div class="form-group custom_grp_fm" id="cstm_sng_' + value.question_id + '"><label class="lbl-qstn">' + value.questionno + '.' + value.question + '</label><input type="text" name="txt_single_answer" class="form-control txt_single-ans keydisabled txt-danger bg-white" id="old-ans-' + value.question_id + '" value="' + value.txt_single_answer + '       ✖" data-id="' + value.question_id + '" autocomplete="off" disabled="disabled" style="color: red; font-weight: bold; font-size: medium;"><input type="hidden" name="question_id" value="' + value.question_id + '"></div>';
                        html += '<div class="answer-success"><h4>Answer : ' + value.correct_answer + '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + value.question_id + ',"' + value.correct_answer + '",0)">Report an issue</a></h4></div>';
                    }
                }
            }
        });
        $('.custom_fm_col').append(html);
        setNextQuestion();
    }

     // Check if the lengths of the strings are difference of 1 letter
    function isOneLetterMissing(str1, str2) {
        if (str1.length !== str2.length - 1 && str1.length !== str2.length + 1) {
            return false;
        }

        for (let i = 0; i < str1.length; i++) {
            if (str1.charAt(i) !== str2.charAt(i)) {
            return str1.substring(i) === str2.substring(i + 1) || str1.substring(i + 1) === str2.substring(i);
            }
        }
        return false;
    }

</script>
@endpush
@else
@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">
					@php
					$next_quiz  = '';
					$next_chapter_quiz  = '';
					@endphp
					@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::join('task_units', 'task_units.unit_id', '=', 'units.id')
								->join('task_student', 'task_units.task_id', '=', 'task_student.task_id')
								->select('units.name','units.id','units.slug')
								->where('task_units.task_id', $quiz_id)
								->where('chapter_id',$chapter->id)
								->groupBy('units.id')
								->get();
								@endphp
								<ul>
									@foreach($units as $key=>$unit)
									@php
									$attempt = App\Models\UnitTaskCompleted::where('task_id', $quiz_id)
									->where('unit_id', $unit->id)
									->where('student_id', STUDENT_ID)
									->orderBy('attempt', 'DESC')
									//->toSql();exit;
									->first();
									if($attempt)
									{
									$attempt = $attempt->attempt;
									}else{
									$attempt = App\Models\TaskCompleted::where('task_id', $quiz_id)
									->where('student_id', STUDENT_ID)
									->orderBy('attempt', 'DESC')
									//->toSql();exit;
									->first()->attempt;
									}
									//echo $attempt;
									$quizCount = App\Models\TaskQuestions::where('task_id',$quiz_id)->where('unit_id',$unit->id)->count();
									$answeredCount = App\Models\QuizAnswer::where('task_id',$quiz_id)->where('unit_id',$unit->id)->where('is_correct',1)->where('attempt',$attempt)->where('student_id',STUDENT_ID)->count();
									if($quizCount>0){
									$task_percentage = ($answeredCount/$quizCount)*100;
									$percentage = round($task_percentage);
									}
									else{
									$percentage = 0;
									}
									//echo $unit_id;
									$quiz_pending  =  App\Models\TaskAttempt::where('task_id',$quiz_id)->where('unit_id',$unit->id)->where('student_id',STUDENT_ID)->where('attempt',$attempt)->first();
									$quiz_complete = 0;
									//echo $unit_id;
									if($quiz_pending){
									if($quiz_pending->completed_at!=null){
									$quiz_complete = 1;
									}
									}
									if(($chapter->id != $chapter_id) && $quiz_complete == 0 && $next_chapter_quiz ==''){
									$next_chapter_quiz = url('quiz/'.$quiz_id.'/'.$unit->slug);
									}
									if( $quiz_complete ==0 && $unit_id!=$unit->id && $next_quiz =='' & $chapter->id == $chapter_id){
									$next_quiz =  url('quiz/'.$quiz_id.'/'.$unit->slug);
									}
									@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('quiz/'.$quiz_id.'/'.$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">{{ $answeredCount }} / {{ $quizCount }} ({{$percentage}}%)</p>
														@if($percentage == 100)
														<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
					@php
					if($next_quiz=='' && $next_chapter_quiz == ''){
					$next_quiz = '';
					}
					elseif($next_quiz!=''){
					$next_quiz = $next_quiz;
					}
					elseif($next_chapter_quiz != ''){
					$next_quiz = $next_chapter_quiz;
					}
					@endphp
        </div>
      </div>
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="">{{ $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 inner-tabs-content">
          <div class="content">
            @php
            $attempt = App\Models\UnitTaskCompleted::where('task_id', $quiz_id)
            ->where('unit_id', $unit_id)
            ->where('student_id', STUDENT_ID)
            ->orderBy('attempt', 'DESC')
            //->toSql();exit;
            ->first();
            if($attempt)
            {
            $attempt = $attempt->attempt;
            }else{
            $attempt = App\Models\TaskCompleted::where('task_id', $quiz_id)
            ->where('student_id', STUDENT_ID)
            ->orderBy('attempt', 'DESC')
            //->toSql();exit;
            ->first()->attempt;
            }
            //echo $attempt;
            $quiz_pending  =  App\Models\TaskAttempt::where('task_id',$quiz_id)->where('unit_id',$unit_id)->where('student_id',STUDENT_ID)->where('attempt',$attempt)->first();
            $quiz_complete = 0;
            //echo $unit_id;
            if($quiz_pending){
            if($quiz_pending->completed_at!=null){
            $quiz_complete = 1;
            }
            }
            @endphp
            @if($quiz_complete == 1 || $is_attempted==1)
            <div class="card card-title">
              <div class="card-body">
                <a class="btn btn-primary btn-lg  align-items-center justify-content-center" id="redoTaskButton" data-ln="{{ url('re-assign/'.$quiz_id.'/'.$unit_id) }}">Re-do this video & quiz</a>
              </div>
            </div>
            @endif
            {{--@if(@$quizes->enable_video && $video)
            <div class="card card-title">
              <div class="card-body">
                <h3 class="title" id="video-banner">
                &nbsp;&nbsp;<i
                  class="fa fa-info-circle"></i>&nbsp;&nbsp;&nbsp;
                @if($is_videoplayed)
                The video is locked whilst you attempt the quiz
                @else
                To check your answers sign up for free
                @endif
                <!--                  <a href="{{ url('signup') }}" class="btn btn-primary" style="text-align: right;">Sign Up for Free</a></h3>-->
                <!-- <a class="btn video-btn pull-right" href="{{ url('signup') }}#sign-up-free">Sign up for free</a></h3> -->
              </div>
            </div>
            @endif --}}
            <div class="video-content mb-2">
              @if($video_player)
              <!--   <div class="card card-title">
                <div class="card-body">
                    <h3 class="title text-center" id="video-banner">&nbsp;&nbsp;<i
                            class="fa fa-info-circle"></i>&nbsp;&nbsp;&nbsp;Watch the video to
                        attempt the quiz
                </div>
                </div> -->
              @if( $video)
              <div class="embed-responsive embed-responsive-16by9 vid" 
              @if(isset($video->video_mode) && isset($expiry_status) && isset($studnt_type) && $studnt_type == 'tutor' && $video->video_mode == 'paid' && $expiry_status =='Y')style="pointer-events:none;"@endif >
								<div class="d-flex align-items-center justify-content-center">
									<div class="video-inner-box text-center popup_video"
										style="display: none">
										<h3>Full access for videos, gap-fills and exam questions</h3>
										<a href="{{ url('subscriptions') }}" class="btn btn-kay">Click
										here</a>
									</div>
									@if(isset($video->video_mode) && isset($expiry_status) && isset($studnt_type) && $studnt_type == 'tutor' && $video->video_mode == 'paid' && $expiry_status =='Y')
									<div class="video-inner-box text-center popup_videos">
										<h3>Your subscription has run out. <br/>Please ask your tutor to re-activate your account.</h3>
									</div>
									@endif
									@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> --}}
									<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
									<!-- New section for youtube video -->
									<div id="player"></div>
									<!-- New section for youtube video -->
									@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>
								<!-- <iframe class="embed-responsive-item" src="//www.youtube.com/embed/M-1S9NmH9O0"></iframe> -->
							</div>
							@endif
						</div>
            {{-- 
            <div class="embed-responsive embed-responsive-16by9 vid">
              <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>
              <input type="hidden" id="videoCompleted" value="true">
            </div>
            --}}
            @endif
            <form class="quiz-wrap" id="quiz-ans-from">
              <input type="hidden" name="unit_id" value="{{ $unit_id }}">
              <input type="hidden" name="task_id" value="{{ $quiz_id }}">
              <input type="hidden" name="quiz_type" id="quiz_type" value="">
              @php
              $q_count = 1;
              $answered_fillQuestions = App\Models\QuizFillBlankAttempt::join('questions','quiz_fill_blank_attempt.question_id','questions.id')
              ->select('questions.id','questions.question')
              ->where('quiz_fill_blank_attempt.student_id',STUDENT_ID)
              ->where('quiz_fill_blank_attempt.unit_id',$unit_id)
              ->where('quiz_fill_blank_attempt.task_id',$quiz_id)
              ->where('quiz_fill_blank_attempt.attempt',$attempt)
              ->groupBy('questions.id')
              ->get();
              $display = count($answered_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($answered_fillQuestions as $key=>$fillquiz)
                  @php
                  $fill_answers = App\Models\QuizFillBlankAttempt::join('quiz_fill_blank_answers','quiz_fill_blank_answers.question_id','quiz_fill_blank_attempt.question_id')
                  ->join("fill_blank_answers",function($join){
                  $join->on("fill_blank_answers.question_id","=","quiz_fill_blank_answers.question_id")
                  ->on("fill_blank_answers.position_order","=","quiz_fill_blank_answers.position_order");
                  })
                  ->select('quiz_fill_blank_answers.position_order','quiz_fill_blank_answers.answer','quiz_fill_blank_answers.is_correct','fill_blank_answers.answers as fillBAns')
                  ->where('quiz_fill_blank_answers.student_id',STUDENT_ID)
                  ->where('quiz_fill_blank_answers.unit_id',$unit_id)
                  ->where('quiz_fill_blank_answers.task_id',$quiz_id)
                  ->where('quiz_fill_blank_answers.attempt',$attempt)
                  ->orderBy('position_order','ASC')
                  ->get()->toArray();
                  $question = strip_tags(htmlspecialchars_decode($fillquiz['question']));
                  $questionArray = explode('________', $question);
                  // dd($fill_answers);
                  $newStr = '';
                  for ($i = 0; $i < count($questionArray); $i++)  {
                  $fillAns = isset($fill_answers[$i]['answer'])?$fill_answers[$i]['answer']:'';
                  $color = (@$fill_answers[$i]['is_correct']==1)?'green':'red';
                  $newStr.= $questionArray[$i];
                  $correctAns = isset($fill_answers[$i]['fillBAns'])?explode(',',$fill_answers[$i]['fillBAns']):[];
                  //dd($correctAns[0]);
                  $newStr.= ($fillAns!='')?'<input type="text" class="form-control fill-answer keydisabled" style="color: '.$color.'; font-weight: bold; font-size: medium;" value="'.$correctAns[0].'">':'';
                  }
                  @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="">
                  </div>
                  @php
                  $q_count++;
                  @endphp
                  @endforeach
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 custom_fm_col">
                  @php
                  $answered_questions = App\Models\QuizAnswer::select('questions.id','questions.question','quiz_answers.answer','one_word_answers.answer as correct_answer','quiz_answers.is_correct')
                  ->join('questions','quiz_answers.question_id','questions.id')
                  ->join('one_word_answers','one_word_answers.question_id','questions.id')
                  ->where('quiz_answers.student_id',STUDENT_ID)
                  ->where('quiz_answers.unit_id',$unit_id)
                  ->where('quiz_answers.task_id',$quiz_id)
                  ->where('quiz_answers.attempt',$attempt)
                  ->groupBy('questions.id')
                  ->get();
                  @endphp
                  @foreach($answered_questions as $key=>$quizanwers)
                  @php
                  $ans = explode(',',$quizanwers->correct_answer);
                  $color = $quizanwers->is_correct?'green':'red';
                  @endphp
                  <div class="form-group custom_grp_fm" id="cstm_sng_{{ $quizanwers->id }}" data-question="{{ $quizanwers->question }}">
                    <label class="lbl-qstn"> {{ $q_count }}
                    . {{ $quizanwers->question }}</label>
                    <input type="text"
                      class="form-control txt_single-ans {{ $quizanwers->is_correct?'txt-success':'txt-danger' }} keydisabled bg-white"
                      id="sng-ans-{{ $quizanwers->id }}"
                      value="{{ $quizanwers->answer }}       {{ $quizanwers->is_correct?'✔':'✖' }}"
                      style="color: {{$color}}; font-weight: bold; font-size: medium;">
                    <input type="hidden" value="1127">
                    @if($quizanwers->is_correct == 0)
                    <div class="answer-success">
                      <h4>Answer : {{ $ans[0] }}
                        <a class="report-issue" href="javascript:void(0)" onclick="reportIssue({{ $quizanwers->id }},'{{ $ans[0] }}',{{ $quizanwers->is_correct }})">Report an issue</a>
                      </h4>
                    </div>
                    @endif
                  </div>
                  @php
                  $q_count++;
                  @endphp
                  @endforeach
                </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>
              <a href="javascript:void(0)" class="btn btn-blue btn-sub-quiz mt-2" onclick="sumbitFullQuiz();" style="display: none;">
              @if($next_quiz!='')Submit Quiz & Next @else Submit Quiz @endif
              </a>
            </form>
          </div>
          @if($is_complete && $is_attempted==0)
          <div class="quiz-warning">
            <h3> Please complete all tasks in this homework to re-attempt any quizzes.</h3>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>
@include('layout.report_issue')
</div>
@endsection
@push('page-css')
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
<link href="{{ url('frontend/css/player.css') }}" rel="stylesheet">
<style type="text/css">
  .text-danger {
  color: #e85f5d !important;
  }
  .text-success {
  color: #4abb25 !important;
  }
  .qstn-txt {
  text-shadow: 0 0 0px #0e080887;
  color: transparent;
  }
  .report-issue {
  float: right;
  line-height: 20px;
  color: #999;
  font-size: 12px;
  padding-right: 18px;
  }
</style>
@endpush
@section('pagescripts')
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<script src="https://src.litix.io/core/3/mux.js"></script>
<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ url('js/common.js') }}"></script>
<!-- <script src="{{ url('js/hls-demo.js')}}"></script> -->
<!-- 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.1')}}"></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}},
          {{$quiz_id}}
      );
  }
  
  // 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) {
  
  // 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 () { 
      if(video !== undefined){
          videoInit();
      }
      
  
      $('#redoTaskButton').click(function(event) {
          /* Act on the event */
          $getLink = $(this).data('ln');
          $('#redoTaskButton').html("Please wait...");
          window.location.href = $getLink;
      });
  
  
  });
  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
      // 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: hlsUrl,
                  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 () {
              hls.startLoad();
          }, {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: '{{ $encryptedTask }}', // 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 log = "Duration: " + v.duration + "\nBuffered: " + timeRangesToString(v.buffered) + "\nSeekable: " + timeRangesToString(v.seekable) + "\nPlayed: " + timeRangesToString(v.played) + "\n";
  
          // if (hls.media) {
          //   for (var type in tracks) {
          //     log += 'Buffer for ' + type + ' contains: ' + timeRangesToString(tracks[type].buffer.buffered) + '\n';
          //   }
  
          var videoPlaybackQuality = v.getVideoPlaybackQuality;
  
          // if (videoPlaybackQuality && typeof videoPlaybackQuality === typeof Function) {
          //   log += "Dropped frames: " + v.getVideoPlaybackQuality().droppedVideoFrames + "\n";
          //   log += "Corrupted frames: " + v.getVideoPlaybackQuality().corruptedVideoFrames + "\n";
          // } else if (v.webkitDroppedFrameCount) {
          //   log += "Dropped frames: " + v.webkitDroppedFrameCount;
          // }
      }
  
      var videoPlayed = timeRangesToString(v.played);
      // console.log(videoPlayed.length);
      // console.log(videoPlayed);
      if (videoPlayed.length > 0) {
          let playedTime = videoPlayed[videoPlayed.length - 1]['end'];
          // console.log(playedTime);
          if (playedTime == v.duration) {
              //getFirstQuestion();
             // updatevideo();
  
          }
      }
  }
  
  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]);
      })
  }
  
  
  // $(".btn-fill-sub").click(function(e) {
  //     error = 0;
  //      $(".valid-error").remove();
  //      $('.fill-answer').each(function(index) {
  //         console.log(this.value);
  //          if (this.value == '') {
  //             $('#box_' + this.id).append('<span class="valid-error"> Please Enter Your Answer </span>');
  //             error = 1;
  //             return false;
  //          }
  //     });
  
  //     if(error == 0){
  //         $(".btn-fill-sub").hide();
  //         getQuestions();
  //     }
  
  
  // });
  
  @if($is_attempted==0)
  getQuestions();
  @endif
  @if((!$video_player || $is_videoplayed) && !$is_complete )
  
  //$('#myVideo').removeAttr("src");
  
  @endif
  
  $(document).on('keydown', '.fill-answer', function (e) {
  
      if (e.keyCode === 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 }}';
          var task_id = '{{ $quiz_id }}';
          var attempt = '{{ $attempt }}';
          if (answer != '') {
  
              $.ajax({
                  url: "{{ url('submit-fill-blank') }}",
                  type: 'POST',
                  data: {
                      'question_id': question_id,
                      'position': position,
                      'answer': answer,
                      'unit_id': unit_id,
                      'task_id': task_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).val($('#'+id).val()+'      ✖');
                      // $('#'+id).after("<span style='color:green; font-weight:bold; font-size:medium'>"+d.right_answer+"</span>");
                  }
                  $('#' + id).addClass('keydisabled');
                  $(item).next().focus();
  
  
              });
          }
          return false;
      }
  
  
  });
  
  
  function updatevideo() {
      var task_id = '{{ $quiz_id }}';
      var attempt = '{{ $attempt }}';
      var unit_id = '{{ $unit_id }}';
      var video_completed = $('#videoCompleted').val();
      $.ajax({
          url: "{{ url('updatevideo') }}",
          type: 'POST',
          data: {'unit_id': unit_id, 'task_id': task_id, 'attempt': attempt, 'video_completed': video_completed},
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  
      }).done(function (d) {
          $("#video-banner").html("&nbsp;&nbsp;<i class='fa fa-info-circle'></i>&nbsp;&nbsp;&nbsp;The video is locked whilst you attempt the quiz");
          $('#myVideo').removeAttr("src");
          $(".txt_single-ans").last().removeClass('keydisabled');
          $(".lbl-qstn").last().removeClass('qstn-txt');
          $('.fill-answer').removeClass('keydisabled');
          $(".fill-input").last().removeClass('qstn-txt');
      });
  
  }
  
  
  //  $(document).on('change','.fill-answer',function(){
  //     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 task_id = '{{ $quiz_id }}';
  //     var attempt = '{{ $attempt }}';
  //     if (answer !='') {
  
  //         $.ajax({
  //             url: "{{ url('submit-fill-blank') }}",
  //             type: 'POST',
  //             data: {'question_id':question_id,'position':position,'answer':answer,'unit_id':unit_id,'task_id':task_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($('#'+id).val()+'      ✔');
  //             }else{
  //                  $('#'+id).css('color', 'red');
  //                  $('#'+id).css('font-weight', 'bold');
  //                  $('#'+id).css('font-size', 'medium');
  //                  $('#'+id).val($('#'+id).val()+'      ✖');
  //                  $('#'+id).after("<span style='color:green; font-weight:bold; font-size:medium'>"+d.right_answer+"</span>");
  //             }
  //             $('#'+id).addClass('keydisabled');
  //             $(item).next().focus();
  
  
  //         });
  //     }
  
  // });
  
  function getFirstQuestion() {
      //console.log($('#videoCompleted').val());
      if ($('#videoCompleted').val() == 'true') {
          getQuestions();
      }
      $('#videoCompleted').val('false');
  }
  
  
  function getQuestions() {
  
      var unit_id = '{{ $unit_id }}';
      var task_id = '{{ $quiz_id }}';
      var token = "{{ csrf_token() }}";
      var fill_count = $('.fill_quiz').length;
      var single_count = $('.custom_grp_fm').length;
      var quetions_count = $('.custom_grp_fm').length;
      var limit = 0;
      var video_completed = $('#videoCompleted').val();
      $.ajax({
          url: "{{ url('get-questions') }}",
          type: "POST",
          data: {
              'unit_id': unit_id,
              'task_id': task_id,
              'limit': limit,
              'video_completed': video_completed,
              'fill_count': fill_count,
              'single_count': single_count,
              'attempt': '{{$attempt}}',
              _token: token
          },
      }).done(function (data) {
          //console.log(data);
  
          if (data.status == true) {
              if (data.type_id == 2) {
                  $('.custom_fm_col').append(data.html);
                  $('#quiz_type').val(data.type_id);
                  $('.btn-sin-sub').show();
                  $('#qn_no').val(data.question_id);
                  console.log("Dsadas");
                  @if(!$is_videoplayed )
  
                  /* if (single_count == 0 && fill_count == 0) {
  
                       $(".txt_single-ans").last().addClass('keydisabled');
                       $(".lbl-qstn").last().addClass('qstn-txt');
                   } else{
                       $(".lbl-qstn").last().removeClass('qstn-txt');
                   }*/
                  @endif
                  @if(!$video_player)
                  $(".lbl-qstn").last().removeClass('qstn-txt');
                  $(".txt_single-ans").last().removeClass('keydisabled');
                  @endif
              } 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();
  
                  @if(!$is_videoplayed)
                  if (fill_count == 0) {
                      $('.fill-answer').addClass('keydisabled');
                      $(".fill-input").last().addClass('qstn-txt');
                  } else
                      $(".fill-input").last().removeClass('qstn-txt');
                  @endif
  
  
              }
              setSlider();
              $('.btn-sin-sub').removeAttr("disabled");
          } else {
              //$('.inner-content').append(data.html);
          }
      })
  }
  
  
  /*$(".btn-next").click(function(e) {
      var error = 0;
      e.preventDefault();
      $('.btn-next').attr("disabled", true);
      $(".btn-next").hide();
      $(".valid-error").remove();
      $(".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>');
              error = 1;
              $('.btn-next').attr("disabled", false);
              $(".btn-next").show();
              return false;
          } else {
              error = 0;
          }
      });
      console.log(error);
      if (error == 0)
          getQuestions();
  
  });
  */
  $(document).on('keydown', '.keydisabled', function (event) {
      return false;
  });
  
  
  $(".btn-sin-sub").click(function (e) {
      e.preventDefault();
      $('.btn-sin-sub').attr("disabled","disabled");
      var submit_flag = 0;
      $(".valid-error").remove();
      var attempt = '{{ $attempt }}';
      var quiz_type = $('#quiz_type').val();
      var error = 0;
  
      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>');
                  error = 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>');
                  error = 1;
                  return false;
              }
          });
      }
  
      //console.log(error);
      if (error == 0) {
          $(this).attr("disabled", "disabled");
          var fill_count = $('.fill_quiz').length;
          var single_count = $('.custom_grp_fm').length;
  
          var formData = $('#quiz-ans-from').serialize();
      var quest_id = $('#qn_no').val();
      $("#sng-ans-" + quest_id).attr('disabled', true);
          // formdata.append('_token',$('meta[name="csrf_token"]').attr('content'));
          $.ajax({
              url: "{{ url('submit-quizz') }}",
              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) {
              if (d.flagError) {
                  showAlert(d.message, "error");
              } else {
                  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 && 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!  <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 +
                              '<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');
                          $('#sng-ans-' + return_data['id']).attr('disabled', true);
                          $("#chance").remove();
                          if (return_data.next_quetion['status'] == true) {
                              $('.custom_fm_col').append(return_data.next_quetion['html']);
                              $('#sng-ans-' + return_data.next_quetion['question_id']).focus();
                          } else {
                              $(".btn-sin-sub").hide();
                              $(".btn-sub-quiz").show();
                          }
                      } 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 +
                              '<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();
                          if (return_data.next_quetion['status'] == true) {
                              $('.custom_fm_col').append(return_data.next_quetion['html']);
                              $('#sng-ans-' + return_data.next_quetion['question_id']).focus();
                          } else {
                              $(".btn-sin-sub").hide();
                              $(".btn-sub-quiz").show();
                          }
                      }
                      $('#qn_no').val(return_data.next_quetion['question_id']);
                     
                  }
                  if (return_data['prev_qtype'] == 3) {
  
                      if (return_data.next_quetion['status'] == true) {
                          $('.fill_blnk_col').append(return_data.next_quetion['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();
  
  
                      }
                  }
  
                  isLoading = false;
  
                  $('.btn-sin-sub').removeAttr("disabled");
              }
  
          });
      }
  
  });
  
  $(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;
          }
      }
  });
  
  function sumbitFullQuiz() {
  
      nextUrl = '{{ $next_quiz }}';
      // showAlert("You have successfully submited the quiz","success");
      if (nextUrl != '') {
          window.location.href = nextUrl;
      } else {
          window.location.href = "{{ url('tasks') }}";
      }
  
  }
  
  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');
  }
  
  // $(document).on('keypress', '.txt_single-ans', function (e) {
  //         if($(this).val().length >= 50) {
  //             showAlert("Invalid answer: Maximum 50 letters allowed", "error");
  //             return false;
  //        }
  
  //  });
  
</script>
@endpush
@endif