@extends('index')

@section('content')
    <main id="main">
        <!-- ======= Hero Slider Section ======= -->
        <section id="hero-slider" class="hero-slider">
            <div class="container-md" data-aos="fade-in">
                <div class="row">
                    <div class="col-12">
                        <div class="swiper sliderFeaturedPosts">
                            <div class="swiper-wrapper">
                                @foreach ($carousels as $carousel)
                                    <div class="swiper-slide">
                                        {{-- <h2>{{ $carousel->title }}</h2> --}}
                                        <a href="#" class="img-bg d-flex align-items-end" style="background-image: url('{{ url('uploads/images/carousel/main_image/' . $carousel->main_image) }}');">
                                            <div class="img-bg-inner">
                                                <p>{{ $carousel->title }}</p>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <div class="custom-swiper-button-next">
                                <span class="bi-chevron-right"></span>
                            </div>
                            <div class="custom-swiper-button-prev">
                                <span class="bi-chevron-left"></span>
                            </div>

                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- End Hero Slider Section -->


        <!-- ======= Post Category Section ======= -->
        <section class="category-section">
            <div class="container" data-aos="fade-up">

                <div class="section-header d-flex justify-content-between align-items-center mb-5">
                    <h2>Our Blog</h2>
                    <div><a href="category.html" class="more">See All Blog</a></div>
                </div>

                <div class="row">
                    <div class="col-md-12">

                        @foreach ($blogs as $blog)
                            <div class="d-lg-flex post-entry-2">
                                <a href="{{ route('blog-detail', ['id' => $blog->id]) }}" class="me-4 thumbnail mb-4 mb-lg-0 d-inline-block">
                                    <img src="{{ url('uploads/images/blog/main_image/' . $blog->main_image) }}" alt="" class="img-fluid">
                                </a>
                                <div>
                                    <div class="post-meta"><span class="date"></span> <span class="mx-1">&bullet;</span> <span>{{ $blog->created_at->format('d M, Y') }}</span></div>
                                    <h3><a href="{{ route('blog-detail', ['id' => $blog->id]) }}">{{ $blog->title }}</a></h3>
                                    <p>{!! \Illuminate\Support\Str::limit(strip_tags($blog->description), 800, '...') !!}</p>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>
            </div>
        </section><!-- End Culture Category Section -->

    </main><!-- End #main -->
@endsection