@extends ('site::public.layout')

@section('content')
<main class="news-detail-page">
	<section class="top">
		<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/article-detail.png') }}" 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">
				{{ $article->title }}
			</h1>
			<div class="top__info">
				<div>
                    @foreach($article->relatedCategory as $relCategory)
                    <span class="btn btn--primary btn--br">
                        {{ $relCategory->category->outputTranslate('title', session('locale')) }}
                    </span>
                    @endforeach
				</div>
				<div class="top__share">
					<span>{!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($article->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">
                {!! $article->outputTranslate('description', session('locale')) !!}
			</div>
			<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>
					</span>
				</div>
			</div>
			<div class="other-info">
				<p>
					{!! $section_data['bottom_contact_text'] !!}
				</p>
				<div class="phone">
					<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>

            @if($relatedArticle->count() > 0)
			<div class="news__related">
				<div class="h1 text-center mb-20 mt-40">
					{{ $section_data['article_more'] }}
				</div>
				<div class="news__list">
					@if($relatedArticle)
					@foreach($relatedArticle as $related)
					<div class="news__single">
						<figure>
							<img src="{{ $related->image_formated }}" data-src="{{ $related->image_formated }}" class="lazy">
							<img src="{{ asset('styling/img/logo-white.png') }}" class="logo">
						</figure>
						<div class="news__short">
							@foreach($related->relatedCategory as $relCategory)
							<span class="btn btn--primary btn--br mb-5px">
								{{ $relCategory->category->outputTranslate('title', session('locale')) }}
							</span>
							@endforeach
							<p class="news__date">
								{!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($related->created_at)) }}
							</p>
							<h6>
								<a href="{{ route('fe.detail_articles', ['slug' => $related->slug]) }}">
									{{ $related->outputTranslate('title', session('locale')) }}
								</a>
							</h6>
							<p>
								{{ $related->outputTranslate('excerpt', session('locale')) }}
							</p>
							<a href="{{ route('fe.detail_articles', ['slug' => $related->slug]) }}" 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('readmore', session('locale')) !!}
								</span>
							</a>
						</div>
					</div>
					@endforeach
					@endif
				</div>
			</div>
			@endif
		</div>
	</section>
</main>
@stop