@extends('site.layouts.master')

@section('title'){{ @$content->name.''.(isset($epg) ? ' - EPS '.$epg : null).' '.__('website.play_chanel') }}@stop
@section('meta_image', '')
@section('meta_description',@$content->properties["description"])

@section('style-libraries')
    <link rel="stylesheet" href="{{ url('site/css/video-js.css')}}">
    <link rel="stylesheet" href="{{ url('site/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">
				
				@if(@$isPlay)
			    <video id="video" crossorigin class="vjs-fluid video-js {{@$isPlay ? '' : 'show-popup'}}" autoplay controls playsinline data-setup="{}" preload="auto" @if(@$content->images) poster="{!! env('CMS_URL', 'https://dttv.itvmax.org') . @$content->images !!}" @endif>
				</video>
			    @else
			    <div id="video" class="w3-container w3-center" style="background: url('{!! $content->images !!}'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #cccccc21;">
			    	<div id="frame">
			    		<iframe src="{{ $content->source_embed }}" frameborder="0" scrolling="no" allowfullscreen></iframe>
			    	</div>
			    </div>
			    @endif
				
			</div>

		</div>
	</section>

	<section id="meta-flim" class="mt-20">
		<div class="w3-container">
			<div class="w3-row">
				<div class="w3-col m7 s12 l8">
					<h1 class="text-info">{{ $content->name }}</h1>
					<ul class="ul-dot">
						@include('site.pages.category.tags', ['tags' => $content->tags, 'limit' => 20])
					</ul>
					<p class="film-description">{{ $content->note }}</p>
				</div>
				<div class="w3-col m5 s12 l4">
					<div class="property-header">
						<div>
							<a href="">
								<img src="{{ url('site/images/icons/heart.png')}}">
								<span>Favouris</span>
							</a>
							
						</div>
						<div>
							<a href="">
								<img src="{{ url('site/images/icons/share.png')}}">
								<span>Share</span>
							</a>
						</div>
					</div>
					<ul class="l-property">
						
					</ul>
				</div>

				@if($content->totalItem > 1)
				<div class="w3-col mt-20">
					<div id="list-epg">
						<h3>List EPS</h3>
						<div id="epg1">
							<div class="swiper-epg swiper-container" pagination="false" style="position: relative;">
								<div class="swiper-wrapper">
									@if($content->totalItem > 1)
									@foreach($content->streamsItems as $stream)
									<div class="swiper-slide item-chanel">
								    	<img class="swiper-gl-image" src="{{ url('images/900x506.png')}}" alt="{{ $content->name }}">
								    	<p class="mt-5">EPS {{ $stream->episode }}</p>
								    	<a class="btn-play" href="{{ route('category.play' , [ 'id' => $content->id, 'epg' => $stream->episode]) }}">
								    		<i class="fa fa-play"></i>
								    	</a>
								    </div>
								    @endforeach
								    @endif
								</div>

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

			</div>
		</div>
	</section>

	
	@if($relatedContents->isNotEmpty())
		<section class="mt-20">
			<div class="w3-container">
				<h3>Phim cùng thể loại</h3>
				<div class="video-chanel" pagination="false" style="position: relative;">
					@include('site.pages.home.items', ['items' => $relatedContents])
				</div>
			</div>
	  	</section>
		
	@endif
	@if ($ads_below_movie_box)
		<section>
		<div class="w3-container">
			<div class="w3-col m12">
				<a href="{{@$ads_below_movie_box->link_ads}}" target="_blank">
					<img src="{{url(@$ads_below_movie_box->content)}}" alt="" width="100%">
				</a>
			</div>
		</div>
		</section>
	@endif

	<section class="mt-20">
		<div class="w3-container">
			<h3>Phim mới</h3>
			<div class="video-chanel is_new" pagination="false" style="position: relative;">
				@include('site.pages.home.items', ['items' => $news])
			</div>
			<h3 class="text-center text-load">
				<a href="javascript:void(0);" class="loadmore" data-cate="is_new">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
			</h3>
		</div>
	</section>

	@if ($ads_below_movie_box)
		<section>
		<div class="w3-container">
			<div class="w3-col m12">
				<a href="{{@$ads_below_movie_box->link_ads}}" target="_blank">
					<img src="{{url(@$ads_below_movie_box->content)}}" alt="" width="100%">
				</a>
			</div>
		</div>
		</section>
	@endif

    <section class="mt-20">
      <div class="w3-container">
        <h3>Trending</h3>
        <div class="video-chanel is_trending" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $trendings])
        </div>
        <h3 class="text-center text-load">
          <a href="javascript:void(0);" class="loadmore" data-cate="is_trending">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
        </h3>
      </div>
    </section>

	@if ($ads_below_movie_box)
		<section>
		<div class="w3-container">
			<div class="w3-col m12">
				<a href="{{@$ads_below_movie_box->link_ads}}" target="_blank">
					<img src="{{url(@$ads_below_movie_box->content)}}" alt="" width="100%">
				</a>
			</div>
		</div>
		</section>
	@endif
    <section class="mt-20">
      <div class="w3-container">
        <h3>Hot</h3>
        <div class="video-chanel is_hot" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $hots])
        </div>
        <h3 class="text-center text-load">
          <a href="javascript:void(0);" class="loadmore" data-cate="is_hot">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
        </h3>
      </div>
    </section>

</div>

@stop

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

	<script type="text/javascript">
		$('#video').click(function() {
			alert(1);
		});

		var loadmore = true;
		$('.loadmore').click(function() {
          if(loadmore){
            loadmore = false;

            var page = $(this).attr('page');
            if(page == undefined) page = 1;
            page = parseInt(page) + 1;
            $(this).attr('page', page);
            var cate = $(this).attr('data-cate');
            var url = "{{ route('category.post') }}";
            
            $.ajax({
              url: url, // Route được định nghĩa ở bước 1
              type: 'POST',
              dataType: "json",
              data: {
                  _token: '{{ csrf_token() }}',
                  page : page,
                  cate : cate,
              },
              success: function(response) {
                  $('.'+cate).append(response.html);
                  loadmore = true;
              },
              error: function(xhr) {
                  console.log('Error:', xhr.responseText);
                  loadmore = true;
              }
            });
          }
            

          return false;
        }); 



		@if($isPlay)
		var player = videojs('video');
		var controlBar = player.controlBar;
		var hideControlsTimeout;
		$(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
            }
        });

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

        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
            }
        });
		@endif



		$(document).ready(function(){
			@if($isPlay)
			@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.one('adplaying', function() { 
				var countDown = 10;
				countDown = 1;

			    var skipAds = document.createElement('div');
			    skipAds.className = 'skipads btn'; 
				skipAds.textContent = 'Skip ('+countDown+'s)';
				player.el().appendChild(skipAds);
				
				var countdownInterval = setInterval(function() {
				  countDown--;
				  if (countDown <= 0) {
				    clearInterval(countdownInterval);
				    skipAds.innerHTML = 'Skip'; 
				    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

			@if($isPlay)
			
			player.setAttribute('crossorigin', 'anonymous')
			player.el_.setAttribute('crossorigin', 'anonymous')
			player.setAttribute('cors', 'anonymous')
			player.ready(function() {
				var customHTML = document.createElement('div');
				customHTML.innerHTML = '<div id="stream-info"> <h3 class="stream-name">{{ $content->name }}</h3></p></div>';
				player.el().appendChild(customHTML);

				@if(isset($playUrl))
					player.src('{{ $playUrl }}');
				@else
					player.src({
						src : '{!! @$content->streams->first()->link !!}',
					  	// type: 'video/mp4',
					  	// withCredentials: true
					});
				@endif

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

				setTimeout(() => {
					$('#stream-info').hide();
				}, 10000);
			});
			@endif
			@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');
			});

			const swiperChanel = new Swiper('.swiper-chanel', {
				slidesPerView: 2,
				spaceBetween: 5,
				speed: 500,
				slidesOffsetBefore: 5,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			    breakpoints: {
                  "@0.00": {
                      slidesPerView: 5,
                      spaceBetween: 10,
                  },
                  "@0.75": {
                      slidesPerView: 6,
                      spaceBetween: 20,
                  },
                  "@1.00": {
                      slidesPerView: 7,
                      spaceBetween: 20,
                  },
                  "@1.50": {
                      slidesPerView: 8,
                      spaceBetween: 20,
                  },
              	},
			});

			const swiperEpg = new Swiper('.swiper-epg', {
				slidesPerView: 2,
				spaceBetween: 5,
				speed: 500,
				slidesOffsetBefore: 5,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			    breakpoints: {
                  "@0.00": {
                      slidesPerView: 6,
                      spaceBetween: 10,
                  },
                  "@0.75": {
                      slidesPerView: 8,
                      spaceBetween: 20,
                  },
                  "@1.00": {
                      slidesPerView: 10,
                      spaceBetween: 20,
                  },
                  "@1.50": {
                      slidesPerView: 10,
                      spaceBetween: 20,
                  },
              },
			});
		});

		$(document).on('click', '[id^="load-more"]', function() {
          var type = $(this).data('type'); 
          var page = $(this).data('page');
          
          console.log('Loading page:', page);
          
          $.ajax({
              url: '{{ route("homepage") }}',
              type: 'GET',
              data: {
                  page: page,
                  type: type
              },
              beforeSend: function() {
                  $('#load-more-' + type).text('Đang tải...');
              },
              success: function(data) {
                  console.log('Data returned:', data);
                  
                  if (data) {
                      $('#' + type + '-container').append(data);
                      $('#load-more-' + type).html('Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt="">');
                      $('#load-more-' + type).data('page', page + 1); 
                  } else {
                      $('#load-more-' + type).hide();
                  }
              },
              error: function() {
                  alert('Có lỗi xảy ra!');
              }
          });
      });
	</script>
@stop