@extends('layouts.main')
@include('site.meta.og_content')
@section('content')
@php
	// dd($data->infographs);
@endphp
@if($data->banner)
<section class="container-fluid  page-content-start gray-bg">
	<div class="container banner-padding-30">
		<div class="row">
			<div class="col-12 gmf-resource-banner detailed-page-banner">
				<img src="{{$data->banner}}" class="img-fluid d-none d-sm-block" alt="growth matters forum banner">
				<img src="{{$data->banner}}" class="img-fluid d-block d-sm-none" alt="growth matters forum banner">
			</div>
		</div>
	</div>
</section>
@endif
@if($data->category =='Events')
<section class="container-fluid gmf-event-details">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12 event-banner-content">
				{{-- <h1 class="title-heading ">GMF Events: {{$data->name}}
                </h1>  --}}
                <ul class="event-conducted">
                	<li class="date">
                		<span class="date-label">Date</span> 
                		<span class="value">{{$data->start_date}}</span>
                	</li>
            		<li class="location">
            			<span class="date-label">Type of event</span> 
            			<span class="value"> {{$data->type}}</span>
            		</li>
            	</ul>
            </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>
				<!-- <h2>{{date_formt_to_html($data->publish_date)}}</h2> -->
				<!-- <div class="row gmf-blogs-source">
					<ul class="gmf-source-list">
						<li class="list-item">
							<h3><span><a href="/resource/{{strtolower($data->category)}}">Resources</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']}}" target="_blank" download class="btn btn-primary gmf-btn-primary white">{{$value['label']}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
					@empty
					@endforelse
				</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>
@if($data->infographs)

<section class="sec-infografic">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2>{{$data->infographs['title']}}</h2>
			</div>
			<div class="col-12 info-grafic-gallery" >
				<div class="gallery-slider" id="lightgallery">
					@foreach($data->infographs['images'] as $key=>$value)
						<div class="col gallery-item " data-src="{{ env('IMAGE_URL').'resources/'.$value['file_name']}}">
							<img src="{{ env('IMAGE_URL').'resources/'.$value['file_name']}}"  class="animate-opacity">
						</div>
					@endforeach
					
				</div>
				<div class="index"><a href="" download="" target="_blank" class="btn gmf-btn-primary btn-info-download">Download <i class="fas fa-long-arrow-alt-down"></i></a></div>
				<a class="prev" data-value="-1"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-chevron-left fa-w-8 fa-3x"><path fill="currentColor" d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z" class=""></path></svg></a>
				<a class="next" data-value="1" ><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" class="svg-inline--fa fa-chevron-right fa-w-8 fa-3x"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z" class=""></path></svg></a>
			</div>
			<div class="col-12 info-description">
				<div class="content">
					<p>
						{{$data->infographs['description']}}	
					</p>
				</div>
				
			</div>
		</div>
	</div>
</section>
@endif

<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'=>'resource', 
			'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/resource.css')}}">
<link rel="stylesheet" href="{{ asset('/css/events.css')}}">
<link rel="stylesheet" href="{{ asset('/css/lightgallery.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 src="{{ asset('/js/lightbox/lightgallery.js') }}"></script>
<script src="{{ asset('/js/lightbox/lg-autoplay.js') }}"></script>
<script src="{{ asset('/js/lightbox/lg-fullscreen.js') }}"></script>
<script src="{{ asset('/js/lightbox/lg-zoom.js') }}"></script>
<script src="{{ asset('/js/lightbox/lg-thumbnail.js') }}"></script>
<script type="text/javascript">
	$(function(){
		$(".gmf-nav-secondary .nav-item").removeClass('active')
        $(".gmf-nav-secondary .nav-item.resources").addClass('active')

		$('.content-description a').each(function(){    
			$(this).attr('target','_blank');
		});

        lightGallery(document.getElementById('lightgallery'),{
        	share:false,
        	rotate:false,
        	// download:false,
        	hash:false,
        	thumbnail:true,
        });
       	$(document).on('click', '.prev', function(event) {
       		event.preventDefault();
       		var index = $(this).data()
       		nextSlide(1)
       		/* Act on the event */
       	});
       	$(document).on('click', '.next', function(event) {
       		event.preventDefault();
       		var index = $(this).data()
       		nextSlide(1)
       		/* Act on the event */
       	});
        var slideIndex = 1;
		showSlides(slideIndex);

		function nextSlide(n) {
			
		  showSlides(slideIndex += n);
		}

		function currentSlide(n) {
		  showSlides(slideIndex = n);
		}

		function showSlides(n) {
		  var i;
		  var slides = document.getElementsByClassName("gallery-item");
		  if (n > slides.length) {slideIndex = 1}
		  if (n < 1) {slideIndex = slides.length}
		  for (i = 0; i < slides.length; i++) {
		      slides[i].style.display = "none";
		  }
		  $(".btn-info-download").attr('href', $(slides[slideIndex-1]).data('src'));
		  $(".btn-info-download").attr('download', $(slides[slideIndex-1]).data('src'));
		  slides[slideIndex-1].style.display = "table-cell";
		}

	})
</script>
@endpush