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

@section('content')
<main class="pdf-page">
	<section class="global-banner t2 animate">
		<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $section_data['background'] !!}" class="lazy bg" alt="{!! $section_data['alt_background'] !!}">
		<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ asset('styling/img/bg-faq.png') }}" class="lazy bg bg--bottom" alt="bevananda catalog">
		<figure class="">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $section_data['image'] !!}" class="lazy" alt="{!! $section_data['alt_image'] !!}">
		</figure>
		<div class="container">
			<div class="text from-right">
				<h1 class="display">{!! $section_data['title'] !!} <br>{!! $section_data['title_secondary'] !!}</h1>
				<h6>
					{!! $section_data['excerpt'] !!}
				</h6>
			</div>
		</div>
	</section>
	<section class="bg-linear">
		
		@if(!$getCatalog['data']->isEmpty())
		<div class="container">
			<div class="grid grid-cols-2 md:grid-cols-1 gap-8" id="catalog-list">
				@foreach($getCatalog['data'] as $catalogItem)
				<div class="file">
					{{-- <a href="{{ route('fe.detail_catalog', ['slug' => $catalogItem->slug]) }}" target="blank"> --}}
					<a href="javascript:void(0);" class="btn-download-catalog" related-data="catalog" related-id="{{ $catalogItem->id }}" item-data="catalog" item-id="{{ $catalogItem->id }}">
						<div class="text">
							<h4>
								{!! $catalogItem->outputTranslate('title', session('locale')) !!}
							</h4>
							<p>
								{!! $catalogItem->outputTranslate('excerpt', session('locale')) !!}
							</p>
							<img src="{{ asset('styling/img/icon-arrow-3.png') }}" alt="arrow icon">
						</div>
					</a>
				</div>
				@endforeach
			</div>
			<div class="page-pagination" id="catalog-pagination">
				{!! $pagination !!}
			</div>
		</div>
		@endif
	</section>

	<div style="display:none;">
		<form id="catalogFilterForm" style="display:none;">
			@csrf
			<input type="hidden" name="page" value="{{ $getCatalog['page'] }}">
		</form>
	</div>
</main>
@stop

@push('additional_script')
<script>
	$(function() {
		$('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 = $('#catalogFilterForm').serializeArray();
		let filterFormObject = {};

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

		$.ajax({
			url: '{{ route("fe.fetch_all_catalog") }}',
			type: 'POST',
			data: filterFormObject,
			beforeSend: function (evt) {
				$('#catalog-pagination').empty();
				$('#catalog-list').empty();				
			},
			success: function (response) {
				// console.log(response);
				$('#catalog-list').html(response.content);
				$('#catalog-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