@extends('layouts.client')

@push('meta_title')
    {{ __('Home') }}
@endpush

@push('styles')
	<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
	<style>
		.swiper-button-prev, .swiper-button-next {
			color: #ffffff;
		}

		.banner-img {
			height: 400px;
			object-fit: cover
		}

		@media (max-width: 567px) {
			.banner-img {
				height: 600px;
			}
		}

	</style>
@endpush

@section('content')

	<section class="section">
		<div class="container">
			@if(count($ads) > 0)
				<!-- Slider main container -->
				<div class="swiper ads-swiper mb-4">
					<!-- Additional required wrapper -->
					<div class="swiper-wrapper">
						<!-- Slides -->
						@foreach ($ads as $ad)
							<div class="swiper-slide">
								<div class="card border">
									<div class="card-body px-4 py-3">
										<div class="row g-4 align-items-center">
											<div class="col-xl-2 col-lg-2 col-md-2">
												<a href="{{ $ad->permalink }}" target="_blank" rel="noopener noreferrer">
													<img data-src="{{ $ad->image_file }}" class="ads-thumbnail lozad" alt="{{ $ad->title }}">
												</a>
											</div>
											<div class="col-xl-8 col-lg-8 col-md-8">
												<span class="badge bg-dark">sponsor</span>
												<h5 class="fw-bold d-flex align-items-center mt-1">{{ $ad->title }}</h5>
												<span class="text-muted small">{{ Str::of($ad->excerpt)->limit(100) }}</span>
											</div>
											<div class="col-xl-2 col-lg-2 col-md-2">
												<a href="{{ $ad->permalink }}" class="btn btn-dark float-end" target="_blank" rel="noopener noreferrer">Learn more</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						@endforeach
					</div>
					{{-- Navigation --}}
					<div class="swiper-pagination"></div>
				</div>
			@endif

			<div class="categories-container mb-4">
				@foreach ($categories as $category)
					<a href="{{ route('news.category', $category->category_permalink) }}" class="category-item">{{ $category->name }} <i class="bx {{ $category->icon ?? 'bxs-category-alt' }}"></i></a>
				@endforeach
			</div>

			@if(count($banners) > 0)
				<!-- Slider main container -->
				<div class="swiper banners">
					<!-- Additional required wrapper -->
					<div class="swiper-wrapper">
						<!-- Slides -->
						@foreach ($banners as $banner)
							<div class="swiper-slide">
								<div class="card bg-dark">
									<img src="{{ $banner->image_file }}" class="opacity-50 banner-img" alt="...">
									<div class="card-img-overlay text-center text-white p-5">
										<h1 class="fw-bold">{{ $banner->title }}</h1>
										<span class="text">{{ Str::of($banner->excerpt)->limit(150) }}</span>
									</div>
								</div>
							</div>
						@endforeach
					</div>
					{{-- Navigation --}}
					<div class="swiper-button-next"></div>
      				<div class="swiper-button-prev"></div>
				</div>
			@endif
		</div>
	</section>

	@if (count($news) > 0)
		<section class="pb-5">
			<div class="container">
				<h4 class="fw-bold">Recent posts</h4>

				<div class="row g-4 pt-4">

					@foreach($news->slice(0, 8) as $value)
						<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
							<div class="card">
								@php
									if ($value->meta_link != NULL) {
										$permalink = $value->meta_link;
										$redirect_attribute = 'target="_blank" rel="noopener noreferrer"';
									} else {
										$permalink = route('news.view', $value->permalink);
										$redirect_attribute = NUll;
									}
								@endphp
								<a href="{{ $permalink }}" {{ $redirect_attribute }}><img class="card-img-top lozad" data-src="{{ $value->image_file }}" alt=""></a>
								<div class="card-body">
									<span class="badge bg-dark mb-2">{{ $value->category->name }}</span>
									<a href="{{ $permalink }}" class="text-decoration-none" {{ $redirect_attribute }}>
										<h5 class="card-title">{{ Str::of($value->title)->limit(55) }}</h5>
									</a>
									<p class="card-text">{{ Str::of($value->excerpt)->limit(100) }}</p>
									<div class="card-context">
										<span class="card-author">By: {{ $value->author }}</span>
										<span class="dot"></span>
										<span class="card-date">{{ $value->date_format }}</span>
									</div>
								</div>
							</div>
						</div>
					@endforeach
					
					@if ($news->total() >= 9)
						<div class="col-xl-12">
							<div class="d-flex justify-content-center">
								<a href="{{ route('news') }}" class="btn btn-dark btn-lg">See more posts</a>
							</div>
						</div>
					@endif
				</div>
			</div>
		</section>
	@endif
	
	@if (count($featured_news) > 0)
		<section class="section">
			<div class="container">
				<h4 class="fw-bold">Featured destinations for beach lovers</h4>
				<p>Recommended based on your activity</p>

				<div class="row pt-4 g-4">

					@foreach ($featured_news->slice(0, 4) as $featured)
						<div class="col-xl-3 col-lg-3 col-md-6">
							<a href="{{ route('news.view', $featured->permalink) }}">
								<div class="card bg-dark text-white">
									<img data-src="{{ $featured->image_file }}" class="card-img lozad" alt="...">
									<div class="card-img-overlay display-grid-content-end">
										<h5 class="card-title"><i class="bx bxs-map bx-tada-hover"></i> {{ $featured->location }}</h5>
									</div>
								</div>
							</a>
						</div>
					@endforeach
				</div>
			</div>
		</section>
	@endif
@endsection

@push('scripts')
	<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
	<script>
		document.addEventListener('turbolinks:load', function() {
			new Swiper('.ads-swiper', {
				grabCursor: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: ".swiper-pagination",
					dynamicBullets: true,
					clickable: true,
				},
			});

			const swiperBanner = new Swiper('.banners', {
				grabCursor: true,
				autoplay: {
					delay: 6000,
					disableOnInteraction: false,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			});
		});
	</script>
@endpush