@extends('client.raffles.layouts.app')
@section('content')
    <div class="services-banner">
        <img src="{{ asset($page->banner) }}" width="1425" height="356" alt="events ">

    </div>
    <section class="section ">
        <div class="flex flex-col gap-5 justify-center items-center text-center">
            <h2 class="text-60 md:text-30 text-sec">Events</h2>
            <div class="title-line mx-auto"></div>


        </div>
    </section>
    <div class="py-20 container events">
        <div class="sm:block flex justify-between items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Upcoming Events
            </h2>

        </div>

        <div class="swiper swiper-events mt-40 mb-40">
            <div class="swiper-wrapper">
                @foreach ($upcomingEvents as $event)
                    <a href="" class="swiper-slide">
                        <div class="event-block relative w-full">
                            <div class="w-full rounded-30">
                                <img src="{{ asset($event->image) }}" alt="">
                            </div>
                            <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                                <div>
                                    <h4 class="text-16  text-ter">Start</h4>
                                    <h4 class="text-18 font-bold text-black">{{ $event->start_date }}</h4>
                                </div>
                                <div>
                                    <h3 class="text-16 text-black">{{ $event->title }}</h3>
                                    <p class="text-14 p-0 m-0 text-grey">{{ $event->short_description }} </p>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <!-- past events  -->

        <div class="sm:block flex justify-between items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Past Events
            </h2>

        </div>

        <div class="swiper swiper-events mt-40">
            <div class="swiper-wrapper">
                @foreach ($previousEvents as $event)
                    <a href="" class="swiper-slide">
                        <div class="event-block relative w-full">
                            <div class="w-full rounded-30">
                                <img src="{{ asset($event->image) }}" alt="">
                            </div>
                            <div class="flex items-center gap-20 py-20 px-20 bg-white rounded-30">
                                <div>
                                    <h4 class="text-16  text-ter">Start</h4>
                                    <h4 class="text-18 font-bold text-black">{{ $event->start_date }}</h4>
                                </div>
                                <div>
                                    <h3 class="text-16 text-black">{{ $event->title }}</h3>
                                    <p class="text-14 p-0 m-0 text-grey">{{ $event->short_description }} </p>
                                </div>
                            </div>
                        </div>

                    </a>
                @endforeach

            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <!-- Blog -->

        <div class=" flex flex-col gap-20 justify-center items-center mb-40 mt-40">
            <h2 class="ld-fh-element inline-block relative mt-10 mb-0 section-heading-sec">
                Blog
            </h2>
            <p class="text-18 text-center">Our blog
                features articles written by experts in the field, providing valuable information to help you achieve
                your goals.</p>
            </p>

        </div>

        <div class="swiper swiper-events mt-40 mb-20">
            <div class="swiper-wrapper">
                @foreach ($blogs as $blog)
                    <a href="{{ route('blog.single', $blog->slug) }}"
                        class="swiper-slide flex flex-col gap-20 p-10  blog-post">
                        <div class="w-100percent h-210 overflow-hidden rounded-16">
                            <img class="w-full h-full object-cover rounded-16" src="{{ asset($blog->image) }}"
                                alt="">
                        </div>
                        <div>
                            <span class="bg-gray text-sec rounded-30 text-10 py-5 px-10 mt-10">20 min read</span>
                            <h2 class="text-20 text-ter pt-10">{{ $blog->title }}</h2>
                        </div>
                        <div class="flex flex-col gap-10">
                            <p class="text-14 text-black">{{ $blog->short_description }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
            <!-- Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- Navigation Buttons -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div>
@endsection