@extends('front.app')

@section('content')
<section data-aos="fade-up" class="inner_banner">
	<img class="img-fluid w-100 d-none d-md-block" src="{{asset('front/images/mediacentre_banner.webp')}}" alt="banner">
	<img class="img-fluid w-100 d-block d-md-none" src="{{asset('front/images/mediacentre_mobbanner.webp')}}" alt="banner">
	<div class="innerbanner_text"></div>
	@include('front.banner_base')
</section>
<!--************************************* media_centre *************************************-->
<section class="media_centre">
	<div class="container">
		<div class="row">
			<div data-aos="fade-up" class="col-12 text-center">
				<h1 class="mb-5">Media Centre</h1>
			</div>
		</div>
		<div class="row g-lg-5 gy-4">

		@foreach($mediacentre as $blog)
			<div data-aos="fade-up" class="col-md-4 col-12">
				<a class="video-btn position-relative"   href="{{route('front.media_centre_detailed',['slug' => $blog->title ])}}">
					<img class="img-fluid rounded-4" src="{{asset('assets/images/'.$blog->photo)}}" alt="Media Centre">
					@if($blog->link != null)
					<!--<img class="videobtn" src="{{asset('front/images/videobtn.svg')}}" alt="Media Centre">-->
					@endif
				</a>
				<h4 class="mt-3 mb-2">{{$blog->title}}</h4>
				<h5>{{$blog->short_description}}</h5>
			</div>
		@endforeach
			
			
		</div>
	</div>
</section>

<!--************************************* video modal **********************************-->
<!--<section class="modal fade" id="video_modal">-->
<!--	<button type="button" class="close modalclose d-flex justify-content-center align-items-center" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>-->
<!--	<div class="modal-dialog modal-dialog-centered modal-xl">-->
<!--       	<div class="modal-content">-->
<!--           	<div class="modal-body video-modal-body">-->
<!--               	<div class="ratio ratio-21x9" id="vid_div">-->
<!--                  	<iframe src="javascript:void(0)" id="video2" allowfullscreen="" allowscriptaccess="always" allow="autoplay"></iframe>-->
<!--            	</div>-->
<!--				<img class="img-fluid w-100" id="image2" src="images/media_centre_01.webp" alt="Media Centre">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

@endsection

@section('page_js')
<script>
// 	$(document).ready(function()
// 	{
// 	    var $videoSrc;
// 	    var $imageSrc;
// 	    $('.video-btn').click(function()
// 	        {
// 	            $videoSrc=$(this).data("src")
	            
// 	            $imageSrc=$(this).data("imagesrc")
	            
// 	        });
	
// 	$('#video_modal').on('shown.bs.modal',function(e)
// 	    {
// 	        if($videoSrc != '')
// 	        {
	            
// 	            $('#vid_div').show();
// 	            $('#image2').hide();
// 	            $("#video2").attr('src',$videoSrc+"?autoplay=1&amp;modestbranding=1&amp;showinfo=0")
	            
// 	        }
// 	        else
// 	        {
// 	            $('#vid_div').hide();
// 	             $('#image2').show();
// 	            $("#image2").attr('src',$imageSrc)
// 	        }
	        
	        
	        
// 	    });
	
// 	$('#video_modal').on('hide.bs.modal',function(e)
// 	    {
// 	        if($videoSrc != '')
// 	        {
	            
// 	             $('#vid_div').show();
// 	             $('#image2').hide();
// 	             $("#video2").attr('src',$videoSrc)
// 	        }
// 	        else
// 	        {
// 	            $('#vid_div').hide();
// 	            $('#image2').show();
// 	            $("#image2").attr('src',$imageSrc)
// 	        }
	        
	        
// 	    })})
</script>
@endsection