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

@section('content')
<main class="news-page">
	<section>
		<div class="container">
			<div class="w-4/5 lg:w-full mx-auto text-center">
				<div class="h1 display">
					{{ $section_data['title'] }}<br>
					{{ $section_data['title_secondary'] }}
				</div>
				<h6 class="mt-8 mb-20">
					{{ $section_data['excerpt'] }}
				</h6>
				</div>
		</div>
		<div class="news__featured">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $section_data['article_background'] }}" class="lazy bg" alt="">
			<div class="news__top">
				@if($getFeaturedArticle)
				<div class="container">
					<div class="news__short">
						<div class="btn-wrapper">
							<span class="btn btn--border btn--br">
								<img src="{{ asset('styling/img/icon-star.png') }}" alt=""> {!! get_staticwording('newshighlight', session('locale')) !!}
							</span>
							@foreach($getFeaturedArticle->relatedCategory as $relCategory)
							<span class="btn btn--primary btn--br">
								{{ $relCategory->category->outputTranslate('title', session('locale')) }}
							</span>
							@endforeach
						</div>						
						<p class="news__date">
							{!! get_staticwording('posted', session('locale')) !!}: {{ date('d/m/Y', strtotime($getFeaturedArticle->created_at)) }}
						</p>
						<h4>
							<a href="{{ route('project') }}">
								{{ $section_data['note_info_text'] }}
							</a>
						</h4>
					</div>
					<div class="news__short">
						<p>
							{{ $getFeaturedArticle->excerpt }}
						</p>
						<a href="{{ route('fe.detail_articles', ['slug' => $getFeaturedArticle->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>
				@endif
			</div>
		</div>
	</section>
	<section>
		@if(!$getArticles['data']->isEmpty())
		<div class="container">
			<div class="h1 text-center mb-20 mt-40">
				{{ $section_data['article_more'] }}
			</div>
			<div class="news__list" id="article-list">
				@foreach($getArticles['data'] as $article)
				<div class="news__single">
					<figure>
						<img src="{{ $article->image_formated }}" data-src="{{ $article->image_formated }}" class="lazy" alt="{{ $article->title }}">
						<img src="{{ asset('styling/img/logo-white.png') }}" class="logo" alt="">
					</figure>
					<div class="news__short">
						@foreach($article->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($article->created_at)) }}
						</p>
						<h6>
							<a href="{{ route('fe.detail_articles', ['slug' => $article->slug]) }}">
								{{ $article->outputTranslate('title', session('locale')) }}
							</a>
						</h6>
						<p>
							{{ $article->outputTranslate('excerpt', session('locale')) }}
						</p>
						<a href="{{ route('fe.detail_articles', ['slug' => $article->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
			</div>
			<div class="page-pagination" id="article-pagination">
				{!! $pagination !!}
			</div>
		</div>
		@endif
	</section>
	<div style="display:none;">
		<form id="articleFilterForm" style="display:none;">
			@csrf
			<input type="hidden" name="page" value="{{ $getArticles['page'] }}">
		</form>
	</div>
</main>
@stop

@push('additional_script')
<script>
	$(function() {
		fetchData()
		$('body').on('click', '.page-number', function(e) {
			let page = $(this).attr('data-page');
			console.log(this)
			console.log(page)
			$('input[name="page"]').val(page)
			fetchData()
		})
	});

	function fetchData() {
		let filterForm = $('#articleFilterForm').serializeArray();
		let filterFormObject = {};

		$.each(filterForm, function(index, value) { filterFormObject[value.name] = value.value; });

		$.ajax({
			url: '{{ route("fe.fetch_all_article") }}',
			type: 'POST',
			data: filterFormObject,
			beforeSend: function (evt) {
				$('#article-pagination').empty();
				$('#article-list').empty();				
			},
			success: function (response) {
				// console.log(response);
				$('#article-list').html(response.content);
				$('#article-pagination').html(response.pagination);

				if (response.total_data > 0) {
					$('#notFound').hide();
				} else {
					$('#notFound').show();
				}
			},
			error: function(jqXHR, textStatus, errorThrown) {
				console.log(textStatus, errorThrown);
			}
		});
	}
</script>
@endpush