@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('tutor/tasks/update/details') }}">
								{{ csrf_field() }}
								<input type="hidden" name="step" value="1"/>
								<button type="submit" class="btn btn-sm btn-primary" >Update Details
								</button>
							</form>
						</div>
						<div class="h-100 overflow-auto pe-2" id="summaryDiv">
							@forelse($classes as $key=>$class)
							<div class="selected-text">{{ $class->name }}</div>
							@empty
							@endforelse
							@forelse($student_det as $key=>$stud)
							<div class="selected-text">{{ $stud->fname.' '.$stud->lname }}</div>
							@empty
							@endforelse
							@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" onclick="backToUpdate()"><i class="bx bx-chevron-left" ></i></a> -->
                <h5 class="sub-title">Set 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('tutor/tasks/set-questions') }}"
        enctype="multipart/form-data">
          {{ csrf_field() }}
          @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::checkTutorPlan();
								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
                    $checked = "checked";
                    if(Session::has('question_ids')){
                    $selected_questions = Session::get('question_ids');
                    $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()) : "");
      });
  
      console.log(question_ids.length);
      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 video = $('#myVideo')[0];
  
      var token = "{{ config('kayscience.MUX_TOKEN_ID') }}";
      var env_key = "{{ config('kayscience.MUX_ENV_KEY')  }}";
      $("#env_key").val(env_key);
      window.muxPlayerInitTime = Date.now();
  
      // Initialize Mux Data monitoring
      if (typeof mux !== 'undefined') {
  
          var vid = document.querySelector('#myVideo');
          //   console.log(id);
          //   console.log(vid);
          var playback_id = $('#myVideo').attr('data-id');
          var video_title = $('#myVideo').attr('data-vtitle');
  
          const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
          if (Hls.isSupported()) {
              var hls = new Hls();
              hls.loadSource('https://stream.mux.com/' + playback_id + '.m3u8');
              hls.attachMedia(vid);
  
          }
          vid.play();
  
  
      }
  
  }
  
  $(".close").click(function () {
  
      var vid = document.querySelector('#myVideo');
      vid.pause();
  });
  
  
</script>
@endsection