@extends('dashboard.layouts.default')
@section('content')
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
<section class="top-section set-task">
  <div class="container-fluid">
    <div class="row g-3">
      <div class="col-md-3">
        <div class="card summary-list sticky-top">
          <div class="card-header bg-white border-0 pt-3 pb-0"><h5 class="unit-title">Summary</h5></div>
          <div class="card-body overflow-hidden">
            <div class="mb-2">
              <form method="post" class="form" novalidate="novalidate" id="updateTaskForm"
                name="kt_question_form" action="{{ url('teacher/tasks/update/details') }}">
                {{ csrf_field() }}
                <input type="hidden" name="step" value="1"/>
                <button type="submit" id="updatedetails" class="btn btn-sm btn-primary" >Update Details
                </button>
              </form>
            </div>
            <div class="h-100 overflow-auto pe-2" id="summaryDiv">
              @if(!$students)
              @forelse($classes as $key=>$class)
              <div class="selected-text">{{ $class->name }}</div>
              @empty
              @endforelse
              @else    
              @forelse($students as $key=>$student)
              <div class="selected-text">{{ $student->name }}</div>
              @empty
              @endforelse
              @endif
              @foreach($units as $key=>$unit)
              <div class="selected-text">{{ $unit->name }} 
                {{ (($check_videos != null) && (in_array($unit->id, $check_videos))) ? '' : '' }}
                {{ (($check_quizs != null) && (in_array($unit->id, $check_quizs))) ? '' : '' }}
              </div>
              @endforeach 
            </div>
          </div>
        </div>
			</div>
      <div class="col-md-9">
        <div class="card mb-3 sec-header sticky-top">
          <div class="card-body p-2">
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                <!--<a class="btn btn-back" href="{{ url('teacher/tasks/resettask/'. $details->taskId.'/1') }}"><i class="bx bx-chevron-left" ></i></a>-->
                <h5 class="sub-title">Reset Task > Choose Questions</h5>
              </div>
              <div id="" class="">
                <button type="button" class="btn btn-primary btn-with-i" id="nextbtn">Choose Dates <i class="bx bx-chevron-right"></i></button>
              </div>
            </div>
          </div>
        </div>
				<form method="post" class="form" novalidate="novalidate" id="questionform"
					name="kt_question_form" action="{{ url('teacher/tasks/resetquestions') }}"
					enctype="multipart/form-data">
					{{ csrf_field() }}
					<input type="hidden" name="task_id" id="task_id" value="{{ $details->taskId}}"/>
					@foreach($units as $unit)
          <div class="card shadow-sm mb-3">
            <div class="card-header bg-white border-0 p-3 pb-1">
              <h5 class="unit-title">
								{{$unit->name}}
								@php
								$videos = App\Models\Video::where('unit_id', $unit->id)->get();
								$video = $videos->where('video_mode', 'free')->first();
								$is_plan = \App\Helpers\Helper::checkSchoolPlan();
								if ($is_plan) {
								$paid_video = $videos->where('video_mode', 'paid')->first();
								if ($paid_video) {
								$video = $paid_video;
								}
								}
								@endphp
								@if($video)
                <button type="button" class="btn btn-watch btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" id="videoBtn" onclick="showVideo('{{ $video->playback_id}}');">
                  <i class='bx bx-play-circle fs-6 me-1'></i> Watch Video
                </button>
								@endif
							</h5>
						</div>
						<div class="card-body">
							<ul class="list-group list-group-flush">
								@foreach($unit->questions as $question)
								<li class="list-group-item ps-1">
									<div class="form-check">
										@php
										if(Session::has('question_ids')){
										$selected_questions = Session::get('question_ids');
										$checked = (in_array($question->id, $selected_questions)) ? 'checked' : '';
										}else{
										if($details->selected_questions){
										$selected_questions = $details->selected_questions;
										$checked = (in_array($question->id, $selected_questions)) ? 'checked' : '';
										}else{
										$selected_questions = array();
										$checked = "checked";
										}
										}
										@endphp
										<input class="form-check-input checkquestion" type="checkbox" name="question_ids[]" value="{{$question->id}}" id="{{$question->id}}" {{$checked}}>
                    <label class="form-check-label" for="{{$question->id}}">{{$question->question}}</label>
									</div>
								</li>
								@endforeach
							</ul>
						</div>
					</div>
					@endforeach
				</form>
			</div>
		</div>
	</div>
</section>
<!--video::Modal-->
<div class="modal fade vd-modal" id="myModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header border-0 p-0"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button></div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9 vid"></div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
  // Wait for the DOM to be ready
  window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                          ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
      // Handle page restore.
      window.location.reload();
  }
  });
  function backToUpdate() {
      //$("#updateTaskForm").submit();
      history.back();
  }
  
  $("#nextbtn").click(function () {
  
      var question_ids = [];
  
      $('input:checkbox.checkquestion').each(function () {
          var sThisVal = (this.checked ? question_ids.push($(this).val()) : "");
      });
  
      if (question_ids.length > 0) {
          $("#questionform").submit();
      } else {
          showAlert("Please select any questions !", "error");
      }
  
  });
  
  
  function showVideo(id) {
      $html = '<video id="myVideo" class="quizvideoplay"  data-id="' + id + '"  poster="https://image.mux.com/' + id + '/thumbnail.png?width=400&height=200&fit_mode=smartcrop&time=5" data-vtitle="" controls ></video>';
      $('.embed-responsive').html($html);
      videoInit();
      //$('#myModal').modal('show');
      $('#myModal').modal({
          backdrop: 'static'
      });
  
  
  }
  
  
  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');
      console.log(playback_id);
      var hlsUrl = 'https://stream.mux.com/' + playback_id + '.m3u8';
      var vid = document.querySelector('#myVideo');
      var video_title = $('#myVideo').attr('data-vtitle');
      var video = $('#myVideo')[0];
      console.log(vid);
  
     // const player = new Plyr(vid, {captions: {active: true, update: true, language: 'en'}});
      if (typeof mux !== 'undefined') {
  
          if (Hls.isSupported()) {
              var hls = new Hls({
                  maxMaxBufferLength : 15
              });
              hls.loadSource(hlsUrl);
              hls.attachMedia(vid);
          }
  
  
      }
  
  }
  
  
  $(".close").click(function () {
  
      var vid = document.querySelector('#myVideo');
      vid.pause();
  });
  
  
</script>
@endsection