@extends('frontend.layouts.app')
@section('content')
<main class="page_main_layout gallery_page">
		<section class="innerPageBanner galleryPageBnr">
			<div class="container">
				<div class="contentWrapper__wr wow animate__zoomIn" data-wow-duration="2s">
					<p class="bannerTitle__wr" title="Takhlees-Videos">{{translate('Videos')}}</p>
					<ol class="breadcrumb__wr">
						<li><a href="index.php" title="Takhlees-Home">{{translate('Home')}}</a></li>
						<li title="Takhlees-Videos">{{translate('Videos')}}</li>
					</ol>
				</div>
			</div>
		</section>
		<section class="videosGalerySec__wr">
			<div class="container">
				<div class="row">
					@if($videos->isNotEmpty())
					@foreach ($videos as $video)
						@if($video->type == 1)
							<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
								<div class="itemWrap__wr">
									<picture class="itemPic__wr">
										<a href="{{$video->video}}" data-fancybox="video-gallery" data-type="iframe" class="ifram_link">
											<img src="https://img.youtube.com/vi/pq9VwJAsPBw/hqdefault.jpg" class="videoThumb img-fluid" loading="lazy" alt="" title="" width="" height="">
										</a>
									</picture>
								</div>
							</div>
						@endif
						@if($video->type == 0)
							<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
								<div class="itemWrap__wr">
									<picture class="itemPic__wr">
										<a href="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" data-fancybox="video-gallery" data-type="html5video">
											<video width="320" height="240" controls>
												<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
											</video>
										</a>
									</picture>
								</div>
							</div>
						@endif
					@endforeach
					@endif
					{{-- <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
						<div class="itemWrap__wr">
							<picture class="itemPic__wr">
								<a href="https://www.youtube.com/embed/ObA_adWXJPY?rel=0" data-fancybox="video-gallery" data-type="iframe">
									<img src="https://img.youtube.com/vi/ObA_adWXJPY/hqdefault.jpg" class="videoThumb img-fluid" loading="lazy" alt="" title="" width="" height="">
								</a>
							</picture>
						</div>
					</div>
					<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
						<div class="itemWrap__wr">
							<picture class="itemPic__wr">
								<a href="https://www.youtube.com/embed/vyoQv_-tAto?rel=0" data-fancybox="video-gallery" data-type="iframe">
									<img src="https://img.youtube.com/vi/vyoQv_-tAto/hqdefault.jpg" class="videoThumb img-fluid" loading="lazy" alt="" title="" width="" height="">
								</a>
							</picture>
						</div>
					</div>
					<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 wow animate__zoomIn" data-wow-duration="2s">
						<div class="itemWrap__wr">
							<picture class="itemPic__wr">
								<a href="https://www.youtube.com/embed/JKrNV_KxlfY?rel=0" data-fancybox="video-gallery" data-type="iframe">
									<img src="https://img.youtube.com/vi/JKrNV_KxlfY/hqdefault.jpg" class="videoThumb img-fluid" loading="lazy" alt="" title="" width="" height="">
								</a>
							</picture>
						</div>
					</div> --}}
				</div>
			</div>
		</section>
	</main>

@endsection
@section('script')
	<script>
		$('.ifram_link').each(function(){
			var embeddedUrl = $(this).attr('href');
			var videoId = embeddedUrl.split('/').pop();
			videoId = videoId.substring(0, videoId.indexOf('?'));
			var thumbnailUrl = 'https://img.youtube.com/vi/'+videoId+'/maxresdefault.jpg';
			$(this).children().attr('src', thumbnailUrl)
		})
        
	</script>
@endsection