@extends('dashboard.layouts.default')
@section('content')
<section class="top-section live_stream">
  <div class="container-fluid">
		<div class="card bg-kay rounded-2 mb-2 d-block d-lg-none">
			<div class="card-body">
				<div class="row justify-content-between">
					<div class="text-white livestream_text"></div>
				</div>
			</div>
		</div>
    <div class="row justify-content-center g-2">
      <div class="col-lg-9">
				<div class="card rounded-2 mb-2 parent-card">
					<div class="card-body">
						<div class="d-flex align-items-center justify-content-center">
												@if(isset($livedata['embedded_url']) && $livedata['embedded_url']!= '') 
						     					<iframe width="100%" height="500" src=""  title="Tuition video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
						@else
						<iframe width="100%" height="500" src="https://www.youtube.com/embed/LhveTGblGHY?si=-c269jHG6LwzyJz9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
						@endif   
						@if($tuition_status == 'N')
						<div class="video-inner-box text-center popup_video" style="display: flex">
							<div class="video-text" style="border: 2px solid #333;">
								<h3 style="margin-top: 2%;">Sorry, this is exclusive live tuition for students and schools who have signed up to our science and maths lessons.</h3>
							</div>
						</div> 
					  @endif
					   
						        
						</div>
						</div>
        </div>
      </div>
      <!--<div class="col-lg-3">
				<div class="card rounded-2 mb-2 parent-card">
					<div class="card-body">
					</div>
				</div>
			</div> -->
    </div>
	<div class="row justify-content-center g-2">
		<div class="col-lg-9">
			<div class="card rounded-2 mb-2 parent-card">
				<div class="card-body">
					<h5 class="control-label" style="margin-left:1%;">If the video is grey or you can't see the video please try the following:</h5>
					<ol class="text-start mb-0 me-2">
						<li style="margin-bottom: 12px;">Turn your ad-blocker off and refresh the page</li>
						<li style="margin-bottom: 12px;">Or log in to KayScience in 'incognito mode'</li>
						<li style="margin-bottom: 12px;">Or adjust your Internet's parental settings to allow videos to be streamed</li>
					</ol>
				</div>
			</div>
		</div>
    </div>
	</div>
    </div>
  </div>
</section>
@endsection
@push('inner-scripts')
<script>
       $(document).ready(function() {
               var livestreamtitle                 =  '';
			   var livestreamstarttime             =  '00:00';
			   var livestreamendtime               =  '00:00';
			   var liveStreamText                  =  '<h5 class="mb-0">'+livestreamtitle+' - '+'<span class="ms-4"> '+livestreamstarttime+' - '+livestreamendtime+'</span></h5>';
			  
			   $(".livestream_text").html(liveStreamText);
			   checkLiveStreamEnd();
	   });

	   function checkLiveStreamEnd(){	
			   intervalId = setInterval(function() {
				togglePageVisibility();
               }, 2000);
	   }

	   function togglePageVisibility()
       {
		    var livestreamstarttime             =  '00:00';
			var livestreamendtime               =  '00:00';
			if (checkEndTimeBetween(livestreamstarttime, livestreamendtime)) 
			{
			}
			else {
				window.location.href = "{{ url('/timetable') }}";
			}
        }

		function checkEndTimeBetween(startTimeStr, endTimeStr) 
		{
			var now = new Date();
			var currentUKTime = new Date(now.toLocaleString('en-US', { timeZone: 'Europe/London' }));
			var startTime     = new Date(currentUKTime.toDateString() + " " + startTimeStr);
			var endTime       = new Date(currentUKTime.toDateString() + " " + endTimeStr);
			return startTime <= currentUKTime && currentUKTime <= endTime;
		}

</script>
@endpush