@extends('layouts.frontend')

@section('title')
	Steven's Snapshots | Photography Blog | Tips and Tricks
@endsection

@section('page_title')
	Steven's Snapshots: Exploring the World Through Photography
@endsection

@section('page_subheading')
	Dive into Steven's Photographic Journey: Tips, Tricks, and Tales from Behind the Lens
@endsection

@section('meta-description')
	Join hobby photographer Steven Hardy as he shares his passion for photography through engaging blog posts. Explore diverse themes, learn new techniques, and see the world through his lens.
@endsection
@section('meta-title')
	Steven's Snapshots | Photography Blog | Tips and Tricks
@endsection
@section('meta-og-url')
	{{url()->full()}}
@endsection
@section('meta-og-image')
	https://cdn.stevenhardy.digital/steven-photos/website-images/blog-header.jpg
@endsection

@section('background-image')
	https://cdn.stevenhardy.digital/steven-photos/website-images/blog-header.jpg
@endsection

@section('content')
	<div class="site-section">
		<div class="container">
			@if(count($pinned_posts) > 0)
			<div class="intro">
				<h2 class="text-left" id="categories">Highlighting Steven's Captivating Photography: Featured Blog Posts</h2>
				<p class="categories-border"></p>
			</div>
			<div class="row pinned-posts">
					@foreach($pinned_posts as $post)
					<div class="col-md-6">
						<a href="/post/{{$post->slug}}">
							<div class="card bg-dark text-white">
								<img src="https://cdn.stevenhardy.digital/steven-photos/{{$post->thumbnail}}" class="card-img" alt="{{$post->title}}" loading="lazy" style="border-radius: 15px; border: 0;">
								<div class="card-img-overlay" style="border-radius: 15px; border: 0;">
									<h5 class="card-title font-bold">{{$post->title}}</h5>
								</div>
							</div>
						</a>
					</div>
				@endforeach
			</div>

			@endif
			<div class="intro">
				<h2 class="text-left" id="categories">Explore the Latest in Photography: Recent Blog Posts by Steven</h2>
				<p class="categories-border"></p>
			</div>
			<div class="row" id="main-post">
				@foreach($recent_posts as $recent)
					<div class="col-xs-12 col-md-6 col-lg-4 col-xl-4 animal-section mb-4">
						<div class="blog-imgs">
							<a href="/post/{{$recent->slug}}"><img src="https://cdn.stevenhardy.digital/steven-photos/{{$recent->thumbnail}}" alt="{{$recent->title}}" class="blog-img" loading="lazy"></a>
						</div>
						<div class="blog-title-heading" >
							<p class="category">{{$recent->category->name}}</p>
							<h2 class="Gorillas-Chimpanzees">{{$recent->title}}</h2>
							<p class="blog-paragraph">{!! \Illuminate\Support\Str::limit(strip_tags($recent['content']), 200, '...')!!}</p>
							<span class="steven-name"><i class="fa fa-user"></i> By {{$recent->user->name}} <i class="fa fa-calendar"></i> {{date('F d, Y', strtotime($recent->created_at))}}</span><br>
							<a href="/post/{{$recent->slug}}"><button type="button" class="btn btn-success" id="read-more-button">See the full picture</button></a>
						</div>
					</div>
				@endforeach
			</div>
			<div class="row">
				<a href="/view-all-posts" class="mx-auto pt-4"><button type="button" class="btn btn-success text-uppercase m-0" id="read-more-button">View all of my blog posts</button></a>
			</div>
		</div>
		<div class="team-grid">
			<div class="container">
				<div class="intro">
					<h2 class="text-left" id="categories">Dive into Photography Themes: Discover Blog Categories by Steven</h2>
					<p class="categories-border"></p>
				</div>
				<div class="row people">
					@foreach ($categories->slice(0, 1) as $category)
						<div class="col-md-4 col-lg-4 item" id="bgimage-margin">
							<div class="box" style="background-image: url('https://cdn.stevenhardy.digital/steven-photos/{{$category->featured_image}}');width: 100% !important;">
								<div class="cover">
									<h3 class="name">{{$category->name}}</h3>
									<a href="/category/{{$category->slug}}"><button type="button" class="btn btn-success" id="Click-Here-button">View articles from {{$category->name}}</button></a>
								</div>
							</div>
						</div>
					@endforeach
					@foreach ($categories->slice(1, 2)->take(2) as $category)
						<div class="col-md-4 col-lg-4 item">
							<div class="box" style="background-image: url('https://cdn.stevenhardy.digital/steven-photos/{{$category->featured_image}}'); width: 100% !important;height: 590px;object-fit: cover;position: relative;top: 160px;">
								<div class="cover" id="cover-text">
									<h3 class="name">{{$category->name}}</h3>
									<a href="/category/{{$category->slug}}"><button type="button" class="btn btn-success" id="Click-Here-button">View articles from {{$category->name}}</button></a>
								</div>
							</div>
						</div>
					@endforeach
				</div>
				<div class="row people">
					@foreach ($categories->slice(3, 4)->take(1) as $category)
						<div class="col-md-4 col-lg-4 item">
						<div class="box" style="background-image: url('https://cdn.stevenhardy.digital/steven-photos/{{$category->featured_image}}');width: 100% !important;">
							<div class="cover">
								<h3 class="name">{{$category->name}}</h3>
								<a href="/category/{{$category->slug}}"><button type="button" class="btn btn-success" id="Click-Here-button">View articles from {{$category->name}}</button></a>
							</div>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>
@endsection