@extends('layouts.main')
@include('site.meta.og_content')
@section('content')
@if($data->banner)
<section class="container-fluid page-content-start" style="background-color: #000;" >
	<div class="container">
		<div class="row" style="">
			<div class="col-12 video-banner" id="play-video">
				
				<div class="sec-image">
					<a href="javascript://" class="play-video">
						<img src="{{$data->banner}}" class="img-fluid d-none d-sm-block" alt="growth matters forum banner">
						<img src="{{$data->image}}" class="img-fluid d-block d-sm-none" alt="growth matters forum banner">
					    <span class="img-indicator"><img src="{{ asset('/images/play.png')}}" alt="play"></span>
                    </a>
                   
                    <div class="embed-responsive embed-responsive-21by9 video-embed" style="display:none;">
                    	<iframe width="560" height="315" src="{{$data->video_url}}" title="YouTube video player" frameborder="0" ></iframe>
                	</div>
				</div>
			</div>
		</div>
	</div>

</section>
@endif
<section>
	<div class="container">
		<div class="row">
			<div class="col-12 gmf-breadcrub-sec">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
                    <li class="breadcrumb-item">
							<a href="/" class="">Home</a>
						</li> 
						<li  class="breadcrumb-item active" >
                             <a href="/resource/{{strtolower($data->category)}}">Resources</a>
                        </li>
						<li aria-current="page" class="breadcrumb-item active">
                            {{$data->category}}
                        </li>
                    </ol>
                </nav>
			</div>
		</div>
	</div>
</section>

<section class="gmf-blogs-content">
	<div class="container">
		<div class="row">
			<div class="col">
				<h1>{{$data->name}}</h1>
				<h2>{{$data->sub_headline}}</h2>
				<!-- <div class="row gmf-blogs-source">
					<ul class="gmf-source-list">
						<li class="list-item">
							<h3><span><a href="/videos">Video</a></span> | <span><a href="/search?category={{$data->category}}">{{$data->category}}</a></span></h3>
						</li>
						<li class="list-item">
							<div class="social-action">
								{{-- <ul>
									<li class="like">
										<gmf-like :data={{json_encode($data->likes)}}></gmf-like>
									</li> 
									<li class="share">
										<gmf-share :data={{$data->share}}></gmf-share> 
									</li> 
								</ul> --}}
							</div>
						</li>
					</ul>
				</div> -->
				<div class="row">
					<div class="col-12 article-content content-description">
						{!!$data->description!!}
					</div>
				</div>
				<div class="col-sm-12 col-md-12 col-lg-12 download-btn-row">
					@forelse ($data->assets as $key => $value)
						<a href="{{$value['url']}}" download class="btn btn-primary gmf-btn-primary white">{{$value['label']}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
					@empty
					@endforelse
					{{-- <div><a href="" class="btn btn-primary gmf-btn-primary white">DOWNLOAD PDF</a></div>
					<div><a href="" class="btn btn-primary gmf-btn-primary white">DOWNLOAD FORMS</a></div>
					<div><a href="" class="btn btn-primary gmf-btn-primary white">DOWNLOAD DOCUMENTS</a></div>
					<div><a href="" class="btn btn-primary gmf-btn-primary white">DOWNLOAD PRODUCTS</a></div> --}}
				</div>
				<div class="col-sm-12 col-md-12 col-lg-12 download-btn-row">
					<div><a href="#play-video" class="btn btn-primary gmf-btn-primary white btn-watch-video">Watch video</a></div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="container"><hr class="divider"></section>
<section class="container register_event">
	@if($data->cta_type=='internal')
		{{-- <a href="javascript://" class="btn btn-primary internal-event-registration">Register</a> --}}
	@else
		@forelse ($data->cta as $key => $value)
			<a  href="javascript://" data-auth="{{$value['auth_status']}}" data-page="{{Request::segment(1).'-'.Request::segment(2)}}" data-url="{{$value['url']}}" class="btn btn-primary btn-cta-check">{{$value['label']}}</a> &nbsp;
		@empty
			
		@endforelse
	@endif
</section>
	<section class="gmf-blogs-author">
		<div class="container">
			<div class="row">
				<div class="col">
					@if(!empty($data->author))
						<h1>Author</h1>
						<div class="row mt-3 mb-4">
							<div class="col">
								<div class="d-flex align-items-center">
									<div class="mr-4">
										<img src="/images/dummy1.png" alt="Author" class="img-fluid">
									</div>
									<div>
										<h2>{{$data->author->name}}</h2>
										<h3>{{$data->author->designation}} | {{$data->author->company_name}}</h3>
									</div>
								</div>
							</div>
						</div>
						<p>{{$data->author->description}}</p>
					@endif
					<div class="row mt-5 mb-4">
						<div class="col">
							{{-- <gmf-comment :commentfeed="{{json_encode($data->comment_data)}}"></gmf-comment> --}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
@php
	$pageview=[
			'heading' => $data->name,
			'category'=>'video', 
			'topic'=>$data->category,
			'topic_id'=>$data->id
		];
@endphp
<input type="hidden" class="page_view" value="{{json_encode($pageview)}}">

@stop
@push('style')
<link rel="stylesheet" href="{{ asset('/css/blogs.css')}}">
<link rel="stylesheet" href="{{ asset('/css/video.css')}}">
@endpush
@push('script')
<script src="{{ asset('/js/comment.js') }}"></script>
<script src="{{ asset('/js/site/page_view.js') }}"></script>
<script src="{{ asset('/js/site/cta_check.js') }}"></script>
<script type="text/javascript">
	$(function(){
		$(".gmf-nav-secondary .nav-item").removeClass('active')
        $(".gmf-nav-secondary .nav-item.resources").addClass('active')
        $(document).on('click', '.play-video', function(){
        	$(this).css('display', 'none');
        	$('.video-embed').css('display', 'block');
        	var symbol = $(".video-embed iframe")[0].src.indexOf("?") > -1 ? "&" : "?";
			$(".video-embed iframe")[0].src += symbol + "mute=1&autoplay=1";
        });
		$('.content-description a').each(function(){    
			$(this).attr('target','_blank');
		});
		$(document).on('click', '.btn-watch-video', function(event) {
			event.preventDefault();
			var url = $($(this).attr("href"));
			$('html, body').animate({scrollTop: url.offset().top}, 500,function(){
				$('.play-video').css('display', 'none');
        		$('.video-embed').css('display', 'block');
        		var symbol = $(".video-embed iframe")[0].src.indexOf("?") > -1 ? "&" : "?";
				$(".video-embed iframe")[0].src += symbol + "mute=1&autoplay=1";
			});

		});
	})
</script>
@endpush