@extends('main-site.partials.app')

@section('title', __('Courses'))

@section('content')

	<!-- Page Banner -->
	<div class="page-banner" style="background-image: url(main-site/assets/img/blog-banner.jpg);">
		<div class="container position-relative">
			<div class="banner-content">
				<h1 class="page-banner-title">
					{{ __("website_301.posts.Blog1") }}
					<br>
                    {{ __("website_301.posts.Blog2") }}
				</h1>
				<p class="banner-desc mb-0">
                    {{ __("website_301.posts.Blog3") }}
				</p>
			</div>
		</div>
	</div>

	<div class="bg-grey">

		<!-- blog -->
		<section class="blog-section sec-padding wow fadeInUp">
			<div class="container">
				<div class="row gx-lg-5">
					<div class="col-lg-6 mb-4 mb-lg-0">
						<div>
							<img src="{{ $latestPost->image }}" class="w-100 round-30" alt="">
						</div>
					</div>

					<div class="col-lg-6">
						<div class="section-title2 mb-4">
							<p class="d-flex align-items-center gap-2">{{ __("website_301.posts.LastUpdates") }}<span><span class="line1"></span><span class="line2"></span></span></p>
							<h2 class="mb-0">{{ $latestPost->title }}</h2>
						</div>
                        <p class="mb-45">
                            {{ $latestPost->short_description }}
                        </p>
                        <a href="{{ route('post', $latestPost->slug) }}" class="dark-color">{{ __("website_301.posts.ReadMore") }}<i class="icon-arrow-left align-middle mx-2"></i> </a>
					</div>
				</div>
			</div>
		</section>

		<!-- blog-slider -->
		<section class="blog-slider-section blog-slider1 sec-padding pt-0 wow fadeInUp">
			<div class="container">
				<div class="section-title d-flex align-items-center justify-content-between gap-3 flex-wrap mb-45">
					<h2 class="pb-0">{{ __("website_301.posts.LastPosts") }}</h2>
                    {{ $posts->links() }}
					{{-- <div class="carousel-arrows d-inline-flex">
						<span class="carousel-btn next"><i class="icon-arrow-right"></i></span>
						<span class="carousel-btn prev"><i class="icon-arrow-left"></i></span>
					</div> --}}
				</div>
				<div class="blog-slides owl-theme owl-carousel">
                    @foreach($posts as $post)
                        <div class="blog-card">
                            <div class="card-img mb-2">
                                <img src="{{ $post->image_path }}" class="w-100" alt="">
                            </div>
                            <div class="card-content">
                                <span class="d-block light-color mb-3">{{ $post->created_at->format('d M Y') }}</span>
                                <a href="{{ route('post', $post->slug) }}">
                                    <h4 class="fw-600 dark-color mb-3">{{ $post->title }}</h4>
                                </a>
                                <p class="dark-color">{{ $post->short_description }}</p>
                                <a href="{{ route('post', $post->slug) }}" class="dark-color">{{ __("website_301.posts.ReadMore") }}<i class="icon-arrow-left align-middle mx-2"></i> </a>
                            </div>
                        </div>
                    @endforeach
				</div>
			</div>
		</section>

        <!-- blog-slider -->
        <section class="blog-slider-section blog-slider2 sec-padding pt-0 wow fadeInUp">
            <div class="container">
                <div class="section-title d-flex align-items-center justify-content-between gap-3 flex-wrap mb-45">
                    <h2 class="pb-0">{{ __("website_301.posts.MostPopular") }}</h2>
                    <div class="carousel-arrows d-inline-flex">
                        {{-- <span class="carousel-btn next"><i class="icon-arrow-right"></i></span>
                        <span class="carousel-btn prev"><i class="icon-arrow-left"></i></span> --}}
                    </div>
                </div>
                <div class="blog-slides2 owl-theme owl-carousel">
                    @forelse ($mostReadPosts as $post)
                    <div class="blog-card">
                        <div class="card-img mb-2">
                            <img src="{{ $post->image_path }}" class="w-100" alt="">
                        </div>
                        <div class="card-content">
                            <span class="d-block light-color mb-3">{{ $post->created_at->format('d M Y') }}</span>
                            <a href="{{ route('post', $post->slug) }}">
                                <h4 class="fw-600 dark-color mb-3">{{ $post->title }}</h4>
                            </a>
                            <p class="dark-color">{{ $post->short_description }}</p>
                            <a href="{{ route('post', $post->slug) }}" class="dark-color">{{ __("website_301.posts.ReadMore") }}<i class="icon-arrow-left align-middle mx-2"></i> </a>
                        </div>
                    </div>
                    @empty
                    {{ __("website_301.posts.NoPosts") }}
                    @endforelse

                </div>
            </div>
        </section>

	</div>

@endsection