@extends('layouts.master')

@section('title')
	@if(!isset($broad))
 	{{ $chanel->name.' '.__('website.play_chanel') }}
 	@else
 	{{ $broad->program.' '.__('website.play_chanel') }}
 	@endif
@stop
@section('meta_image', 'https://dttv.itvmax.org' . $chanel->images)
@section('meta_description', $chanel->description)

@section('style-libraries')
    <link rel="stylesheet" href="{{ url('css/video-js.css')}}">
    <link rel="stylesheet" href="{{ url('css/select2.min.css')}}">
@stop

@section('styles')
    
@stop

@section('content')
<div id="content">
	<section id="container-video">
		<div class="w3-container">
			<div id="live-video-js" class="video-live">
				@if($isPlay)
			    <video id="video" data-play="{{$isPlay}}" data-setup="{}" class="vjs-fluid video-js {{$isPlay ? '' : 'show-popup'}}" playsinline autoplay controls poster="{!! env('CMS_URL', 'https://dttv.itvmax.org') . $chanel->images !!}"></video>
			    @else
			    <div id="video" class="w3-container w3-center" style="background: url('{!! env('CMS_URL', 'https://dttv.itvmax.org') . $chanel->images !!}'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #cccccc21;">
			    	<div id="popup">
			    		<h3>{{ __('website.notify') }}</h3>
				    	@if(!$user)
				    		<p>{{ __('website.notify_mes') }}</p>
				    		<a href="{{ route('login') }}" class="w3-button w3-red btn mt-20">{{ __('website.login') }}</a>
				    	@else
				    		<p>{{ __('website.notify_auth') }}</p>
				    		<a href="{{ route('register') }}" class="w3-button w3-red btn  mt-20">{{ __('website.register') }}</a>
				    	@endif
			    	</div>
			    </div>
			    @endif
				
			</div>
			<h1 class="text-info">{{ $chanel->name }} {{ isset($broad) ? ' - '.$broad->program : "" }}</h1>
		</div>
	</section>

	<section class="chanel-categories mt-30">
		<div class="w3-container">
			<div class="w3-col m12">
				<ul id="list-categories-chanel">
					<li @if($action == null || $action == 'all') class="active" @endif><a href="javascript:void(0);" class="item-fgroup" data-show="all">{{__('website.all')}}</a></li>
					@if(isset($chanelsPackage))
					<li @if( $action == 'myPackage' ) class="active" @endif><a href="javascript:void(0);" class="item-fgroup" data-show="myPackage">{{__('website.myPackage')}}</a></li>
					@endif
					@foreach($cates as $cate)
					<li @if($action == $cate->code) class="active" @endif ><a href="javascript:void(0);" class="item-fgroup" data-show="{{ $cate->code }}">{{ $cate->display_name }}</a></li>
					@endforeach
				</ul>
			</div>
		</div>
	</section>
	<div id="all" class="action-filter mt-30 mb-30 live-home  @if($action == null || $action == 'all') active @endif">
		@foreach($cates as $cate)
		<section class="list-chanel mt-20">
			<div class="w3-container">
				<h3>{{ $cate->display_name }}</h3>
				<div class="swiper-chanel swiper-container" pagination="false" style="position: relative;">
					<div class="swiper-wrapper">
						@foreach($cate->items as $live)
			            <div class="swiper-slide item-chanel">
			                <img class="swiper-gl-image" src="{!! env('CMS_URL', 'https://dttv.itvmax.org') . $live->images !!}" alt="{{ $live->name }}">
			                <a class="btn-play" href="{{ route('live.index', [ 'chanel_id' => ($live->code ? $live->code : $live->id), 'action' => $action ]) }}">
			                  <i class="fa fa-play"></i>
			                </a>
			                <p class="text-center mt-10 title-trim">{{ $live->name }}</p>
			            </div>
			            @endforeach
				    </div>

				    <div class="swiper-button-prev"></div>
			 		<div class="swiper-button-next"></div>
				</div>
			</div>
		</section>
		@endforeach
	</div>

	@foreach($cates as $cate)
	<div id="{{ $cate->code }}" class="action-filter mt-30 mb-30 live-home @if($action == $cate->code) active @endif">
		<div class="w3-container">
			<h3>{{ $cate->display_name }}</h3>
			<div class="w3-row">
				@foreach($cate->items as $live)
		 	 	<div class="w3-col s4 m3 l2">
			    	<div class="swiper-slide item-chanel">
				    	<img class="swiper-gl-image" src="{!! env('CMS_URL', 'https://dttv.itvmax.org') . $live->images !!}" alt="{{ $live->name }}">
				    	<a class="btn-play" href="{{ route('live.index', [ 'chanel_id' => ($live->code ? $live->code : $live->id), 'action' => $action ]) }}">
				    		<i class="fa fa-play"></i>
				    	</a>
				    	<p class="text-center mt-10 title-trim">{{ $live->name }}</p>
				    </div>
			  	</div>
			  	@endforeach
			</div>
		</div>
	</div>
	@endforeach

	@if(isset($chanelsPackage))
	<div id="myPackage" class="action-filter mt-30 mb-30 live-home @if($action == 'myPackage') active @endif">
		<div class="w3-container">
			<h3>{{__('website.myPackage')}}</h3>
			<div class="w3-row">
				@foreach($chanelsPackage as $ch)
		 	 	<div class="w3-col s4 m3 l2">
			    	<div class="swiper-slide item-chanel">
				    	<img class="swiper-gl-image" src="{!! env('CMS_URL', 'https://dttv.itvmax.org') . $ch->images !!}" alt="{{ $ch->name }}">
				    	<a class="btn-play" href="{{ route('live.index', [ 'chanel_id' => ($ch->code ? $ch->code : $ch->id), 'action' => $action ]) }}">
				    		<i class="fa fa-play"></i>
				    	</a>
				    	<p class="text-center mt-10 title-trim">{{ $ch->name }}</p>
				    </div>
			  	</div>
			  	@endforeach
			</div>
		</div>
	</div>
	@endif

</div>

@stop

@section('scripts')
	<script src="{{ url('js/packages/hls.js')}}"></script>
	<script src="{{ url('js/packages/video.min.js')}}"></script>
	<script src="{{ url('js/packages/videojs.ads.min.js')}}"></script>
	<script src="{{ url('js/packages/select2.min.js')}}"></script>

	<script type="text/javascript">
		var startTimePlay, maxPlayTime;
		@if($isPlay && !$maxPlay)
		var player = videojs('video');
		var lives = localStorage.lives;
		var activeChanel = '{{ ($chanel->code ? $chanel->code : $chanel->id) }}';

		if(lives === undefined)
		{
			lives = {!! json_encode($cates->flatMap->items->toArray()) !!};
    		localStorage.setItem('lives', JSON.stringify(lives));
		}else {
			lives = JSON.parse(lives);
		}

		var controlBar = player.controlBar;
		$(document).on('mousemove', function() {
            if (player.isFullscreen()) {
                controlBar.removeClass('hidden');
                clearTimeout(window.hideControlsTimeout);
                window.hideControlsTimeout = setTimeout(function() {
                    controlBar.addClass('hidden');
                }, 3000); // 3000ms = 3 giây
            }
        });

		@endif

		$(document).ready(function(){
			@if(!$maxPlay && !$user)
			startTimePlay = {{ $timePlay }};
			maxPlayTime = 300*6; 
			countdownTimer();
			@endif

			@if($isPlay && !$maxPlay)
			@if($ads)
			player.ads();

			player.on('contentchanged', function() {
			  	player.trigger('adsready');
			});

			player.on('readyforpreroll', function() {
		    	player.ads.startLinearAdMode();
			    player.src("{{ config('itv.ads') }}");
			    player.play();

			    player.one('adplaying', function() {
				    player.trigger('ads-ad-started');
				});

			    player.one('adended', function() {
				    player.ads.endLinearAdMode();
				});
		  	});

		  	player.on('fullscreenchange', function() {
                if (player.isFullscreen()) {
                    controlBar.addClass('hidden');
                } else {
                    controlBar.removeClass('hidden');
                }
            });

            // Khi di chuột vào video, hiện thị thanh điều khiển ngay lập tức
            player.on('mousemove', function() {
                if (player.isFullscreen()) {
                    controlBar.removeClass('hidden');
                    clearTimeout(window.hideControlsTimeout);
                    window.hideControlsTimeout = setTimeout(function() {
                        controlBar.addClass('hidden');
                    }, 3000); // 3000ms = 3 giây
                }
            });

			player.one('adplaying', function() { 
				var countDown = 10;

			    var skipAds = document.createElement('div');
			    skipAds.className = 'skipads btn'; // Thêm class "skipads" cho phần tử div
				skipAds.textContent = 'Skip ('+countDown+'s)';
				player.el().appendChild(skipAds);
				
				var countdownInterval = setInterval(function() {
				  countDown--;
				  if (countDown <= 0) {
				    clearInterval(countdownInterval);
				    skipAds.innerHTML = 'Skip'; // Nút đã sẵn sàng để bỏ qua
				    skipAds.style.opacity = 1;
				    skipAds.style.cursor = 'pointer';
				    skipAds.addEventListener('click', function() {
				      player.ads.endLinearAdMode();
				    });
				  } else {

				    skipAds.innerHTML = 'Skip (' + countDown + 's)';
				  }
				}, 1000);
			});

			player.trigger('adsready');

			@endif

			var myButton = player.controlBar.addChild('button', {}, 10);
			myButton.addClass('timeshift');
			var child = myButton.el();
			var imgElement = document.createElement('img');
			imgElement.src = "{{ url('images/icons/calendar.png')}}";

			var spanElement = document.createElement('span');
			spanElement.classList.add('vjs-icon-placeholder');
			spanElement.setAttribute('aria-hidden', 'true');
			spanElement.appendChild(imgElement);

			child.appendChild(spanElement);
			child.setAttribute('title', 'Timeshift');

			var clickHandler = ("ontouchstart" in window ? "touchend" : "click");

			myButton.on(clickHandler, function() {
			    $('#broadcast-schedule').show();
			    
				var activeElements = document.querySelectorAll('.list-schedule .active');
				if (activeElements.length > 0) {
				    var activeElement = activeElements[0];
				    activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
				}
			});

			var customHTML = document.createElement('div');
			@if(!isset($broad))
		 	customHTML.innerHTML = '<div id="stream-info"> <h3 class="stream-name">{{ $chanel->name }}</h3> <p class="stream-cate">{{ @$chanel->countries->first()->name }}</p></div>';
		 	@else
		 	customHTML.innerHTML = '<div id="stream-info"> <h3 class="stream-name">{{ $chanel->name }}</h3> <p class="stream-cate">{{ $broad->program }}</p></div>';
		 	@endif
			
			player.el().appendChild(customHTML);

			player.ready(function() {
				var date = null;
				@if(@$broad)
					date = '{{ $broad->start_time->format("Y-m-d") }}';
				@endif
				var activeBroad = '{{ @$broad->id }}';

				$.post('{{ route("live.broads",[ 'chanel_id' => ($chanel->code ? $chanel->code : $chanel->id), 'action' => $action ]) }}', {_token: _token, date: date, active_broad : activeBroad },function(result) {
					$(player.el()).append(result.html);

				  	document.querySelector('.header-schedule .button-close').addEventListener('click', function() {
					    document.getElementById('broadcast-schedule').style.display = 'none';
					});
				});

				

				@if($isPlay)
					@if(isset($playUrl))
						player.src('{{ $playUrl }}');
					@else
						player.src('{{ @$chanel->streams->first()->link_stream  }}');
					@endif

					player.load();
					player.play();

					setTimeout(() => {
						$('#stream-info').hide();
					}, 10000);
				@endif
				// player.el().appendChild(customHTML);
			});

			@endif

			$('.item-fgroup').click(function(e) {
				e.preventDefault();
				var idShow = $(this).attr('data-show');
				$('.chanel-categories li').removeClass('active');
				$('.action-filter').removeClass('active');
				$(this).parents('li').addClass('active');
				$('#'+idShow).addClass('active');

				var url = '{{ url()->current() }}';
				var parsedUrl = new URL(url);
				parsedUrl.searchParams.set('action', idShow);
				var modifiedUrl = parsedUrl.toString();
				window.history.pushState({}, '', modifiedUrl);

				$('.item-chanel a, .list-schedule a').each(function() {
				    var url = new URL($(this).attr('href'));
				    url.searchParams.set('action', idShow)
				    $(this).attr('href', url.toString());
				});
			});

			// @if($action)
			// 	$('.item-chanel a, .list-schedule a').each(function() {
			// 	    var url = new URL($(this).attr('href'));
			// 	    url.searchParams.set('action', idShow)
			// 	    $(this).attr('href', url.toString());
			// 	});
			// @endif

			const swiper = new Swiper('.swiper-main', {
				speed: 500,
				loop: true,
				effect: 'coverflow',
			    grabCursor: true,
				pagination: {
					el: '.swiper-pagination',
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				scrollbar: {
					el: '.swiper-scrollbar',
				},
			});

			const swiperChanel = new Swiper('.swiper-chanel', {
				slidesPerView: 2,
				spaceBetween: 5,
				speed: 500,
				loop: true,
				slidesOffsetBefore: 5,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			    breakpoints: {
			        "@0.00": {
			          	slidesPerView: 2.5,
			          	spaceBetween: 10,
			        },
			        "@0.75": {
			          	slidesPerView: 3.5,
			          	spaceBetween: 20,
			        },
			        "@1.00": {
			          	slidesPerView: 4.5,
			          	spaceBetween: 40,
			        },
			        "@1.50": {
			          	slidesPerView: 5.5,
			          	spaceBetween: 50,
			        },
			    },
			});
		});

		function countdownTimer() {
			var currentTime = Math.floor(Date.now() / 1000); // get current time in seconds
			var elapsedTime = currentTime - startTimePlay;

			if (elapsedTime >= maxPlayTime) {
				stopVideo();
			} else {
				var timeRemaining = maxPlayTime - elapsedTime;
				updateCountdownDisplay(timeRemaining);

				setTimeout(countdownTimer, 1000);
			}
		}

		function updateCountdownDisplay(timeRemaining) {
		  	// console.log("Time remaining: " + timeRemaining + " seconds");
		}

		function stopVideo() {
			player.dispose();
		  	// location.reload();
		}

	</script>
@stop