@extends ('site::public.layout')
@section('content')
	
	<main class="news-detail-page">
		@php  
		$project_thumb = $project_bg = asset('assets/img/no-image.jpg');
		$project_gallery = [];
		if($project->thumbnail!=''){
			$img = json_decode($project->thumbnail);
			$project_thumb = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
		}
		if($project->background!=''){
			$bg = json_decode($project->background);
			$project_bg = ENV('IMG_URL').str_replace(' ', '%20', $bg->path);
		}
		// if($project->gallery!=''){
		// 	$arr_gal = explode('|',$project->gallery);
		// 	foreach ($arr_gal as $key => $value) {
		// 		$gal = json_decode($value);
		// 		$project_gallery[] = ENV('IMG_URL').str_replace(' ', '%20', $gal->path);
		// 	}
		// }
		@endphp
		<section class="top">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $project_bg }}" class="lazy main-img">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/article-overlay.png') }}" class="lazy overlay-img">
			<div class="container">
				<h1 class="display mb-10">
					{!! get_staticwording('project', session('locale')) !!} {!! $project->outputTranslate('title', session('locale')) !!}
				</h1>
				<div class="top__info">
					<div>
						<span class="btn btn--primary btn--br btn--barb">
							{!! strtoupper($project->related_product) !!}
						</span>
					</div>
					<div class="top__share">
						<span>{!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($project->created_at)) }}</span>
						<div class="flex gap-4 mt-2 md:justify-center">
							<a href="https://wa.me/{{ str_replace(array('–', '-', ' '), '', setting('general.whatsapp')) }}" target="blank"><img src="{{ asset('styling/img/icon-whatsapp.svg') }}"></a>
							<a href="{{ setting('socialmedia.twitter') }}" target="blank"><img src="{{ asset('styling/img/icon-twitter.svg') }}"></a>
							<a href="{{ setting('socialmedia.instagram') }}" target="blank"><img src="{{ asset('styling/img/icon-instagram.svg') }}"></a>
							<a href="{{ setting('socialmedia.facebook') }}" target="blank"><img src="{{ asset('styling/img/icon-facebook.svg') }}"></a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="news__detail bg-linear">
			<div class="container">
				<div class="body">
					{!! $project->outputTranslate('description', session('locale')) !!}
				</div>

				@if(count($project->gallery_data)>0)
					<div class="h1 mt-16 mb-8">{!! get_staticwording('projectgallery', session('locale')) !!}.</div>
					<div class="gallery">
						@foreach($project->gallery_data as $key=>$gal)
						<figure>
							<a href="{!! $gal['image'] !!}" title="{!! $project->outputTranslate('title', session('locale')) !!}" class="image-link">
								<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $gal['image'] !!}" class="lazy" alt="{!! $gal['alt_image'] !!}">
							</a>
						</figure>
						@endforeach
					</div>
				@endif

				<div class="other-info">
					<h6>
						{!! $section_data['bottom_wa_text'] !!}
					</h6>
					<div class="wa">
						<b>BEVANANDA WHATSAPP</b>
						<span>
							<img src="{{ asset('styling/img/icon-whatsapp.svg') }}">
							<a href="https://wa.me/{{ str_replace(array('–', '-', ' '), '', setting('general.whatsapp')) }}" target="blank">
								{{ setting('general.whatsapp') }}
							</a>
							{{-- {!! $section_data['bottom_wa_no'] !!} --}}
						</span>
					</div>
				</div>
				<div class="other-info">
					<p>
						{!! $section_data['bottom_contact_text'] !!}
					</p>
					<div class="phone">
						{{-- <span><img src="{{ asset('styling/img/icon-phone.svg') }}"> {!! $section_data['bottom_contact_phone'] !!}</span> 
						<span><img src="{{ asset('styling/img/icon-email.svg') }}"> {!! $section_data['bottom_contact_email'] !!}</span> --}}
						<a href="tel:{{ str_replace(array('–', '-'), '', setting('general.phone')) }}">
							<span><img src="{{ asset('styling/img/icon-phone.svg') }}"> {{ setting('general.phone') }}</span> 
							</a>
							<a href="mailto:{!! setting('general.email') !!}">
							<span><img src="{{ asset('styling/img/icon-email.svg') }}"> {{ setting('general.email') }}</span>
							</a>
					</div>
				</div>
				<div class="news__related">
					<div class="h1 text-center mb-20 mt-40">
						{!! $section_data['relevant'] !!}
						<p>{!! $section_data['relevant_excerpt'] !!}</p>
					</div>
					<div class="news__list">
						@foreach($project_related as $key=>$proj)
							@php  
							$project_thumb = $project_bg = asset('assets/img/no-image.jpg');
							if($proj->thumbnail!=''){
								$img = json_decode($proj->thumbnail);
								$project_thumb = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
							}
							if($proj->background!=''){
								$bg = json_decode($proj->background);
								$project_bg = ENV('IMG_URL').str_replace(' ', '%20', $bg->path);
							}
							@endphp
							<div class="news__single">
								<figure>
									<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $project_thumb }}" class="lazy">
									<img src="{{ asset('styling/img/logo-white.png') }}" class="logo">
								</figure>
								<div class="news__short">
									<span class="btn btn--primary btn--br btn--barb">
										{!! strtoupper($proj->related_product) !!}
									</span>
									<p class="news__date">
										{!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($proj->created_at)) }}
									</p>
									<h6>
										<a href="{{ url('project/'.$proj->slug) }}">
											{!! $proj->outputTranslate('title', session('locale')) !!}
										</a>
									</h6>
									<p>
										{!! $proj->outputTranslate('excerpt', session('locale')) !!}
									</p>
									<a href="{{ url('project') }}" class="btn news__cta">
										<span>
											<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
											</svg>
											{!! get_staticwording('allproject', session('locale')) !!}
										</span>
									</a>
								</div>
							</div>
						@endforeach
					</div>
				</div>
			</div>
		</section>
	</main>
@endsection