@extends('frontend.layout.navbar')
@section('title', 'News & Events')
@section('content')
    <div class="relative w-full h-full">
        <img src="{{ asset('img/news/banner-news.webp') }}" class="absolute inset-0 object-cover w-full h-full">
        <div class="container relative inset-0 z-0 flex items-center mx-auto pt-[25rem] pb-[3rem] ">
            <div>
                <div class=" w-auto md:w-[30rem] h-36 p-4 bg-black bg-opacity-60 flex items-center justify-start border-l-4 "
                    style="border-color: #ffbd59;">
                    <div class="">
                        <p class="mb-3 text-3xl font-bold tracking-wider text-white lg:text-5xl">News & Events</p>
                        <p class="text-xs text-white">Home > News & Events</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-gray-100">
        <div class="container max-w-screen-xl p-5 mx-auto ">
            <div class="grid grid-cols-1 md:grid-cols-5 ">
                <div class="col-span-3 p-5 md:p-10 rounded-xl " data-aos="fade-right">
                    <div>
                        <p class="mb-5 text-xl font-semibold md:text-2xl"> {{ $NewsEvent->title }}</p>
                        <div class=""><img src="{{ asset($NewsEvent->image) }}" class="w-full h-auto ">
                        </div>

                        <div class="mt-5 tracking-wider ">
                            <p>{!! $NewsEvent->description !!}
                            </p>
                        </div>

                    </div>
                </div>
                <div class="col-span-2 md:mt-20" data-aos="fade-right">
                    <div class="p-5 bg-white ">
                        <p class="text-xl font-bold">Recent Events</p>
                        @foreach ($latestevents as $events)
                            <a href="{{ route('NewsEvent_singlepage.get', ['id' => $events->id]) }}">
                                <div class="w-auto px-5 py-3 mt-5 bg-gray-100">
                                    <div class="md:ml-5">
                                        <p class="font-bold">{{ $events->title }}</p>
                                        <p class="flex items-center"><i class='text-xl text-gray-600 bx bx-calendar'></i>
                                            <span
                                                class="ml-3 text-gray-400">{{ \Carbon\Carbon::parse($events->date)->format('F j, Y') }}</span>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-5 mt-10 bg-white ">
                        <p class="text-xl font-bold">Recent News</p>
                        @foreach ($latestnews as $news)
                            <a href="{{ route('NewsEvent_singlepage.get', ['id' => $news->id]) }}">

                                <div class="w-auto px-5 py-3 mt-5 bg-gray-100">
                                    <div class="md:ml-5">

                                        <p class="flex items-center"><i class='text-xl text-gray-600 bx bx-calendar'></i>
                                            <span
                                                class="ml-3 text-gray-400">{{ \Carbon\Carbon::parse($news->date)->format('F j, Y') }}</span>
                                        </p>
                                        <p class="font-bold">{{ $news->title }}</p>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>

                </div>
            </div>
            <div class="mt-20 " data-aos="fade-down">
                <p class="mb-5 text-2xl font-bold">Recent Post</p>
                <hr class="border-2 border-gray-300">
                <div class="flex justify-between mt-2">
                    <!-- Previous Button -->
                    @if ($previous)
                        <a href="{{ route('NewsEvent_singlepage.get', ['id' => $previous->id]) }}"
                            class="px-4 py-2 rounded-lg">
                            < Previous </a>
                            @else
                                <span class="px-4 py-2 text-gray-500 cursor-not-allowed">
                                    < Previous </span>
                    @endif

                    @if ($next)
                        <a href="{{ route('NewsEvent_singlepage.get', ['id' => $next->id]) }}"
                            class="px-4 py-2 ml-4 rounded-lg">
                            Next >
                        </a>
                    @else
                        <span class="px-4 py-2 text-gray-500 cursor-not-allowed">
                            Next >
                        </span>
                    @endif
                </div>

                <div class="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-2">
                    @foreach ($latestpost as $post)
                        <a href="{{ route('NewsEvent_singlepage.get', ['id' => $post->id]) }}">

                            <div class="bg-[#85c300] w-full h-auto rounded-xl text-white  p-5 ">
                                <div class="flex flex-col items-center gap-2 md:flex-row"><i
                                        class='bx text-md bx-calendar-alt'></i>
                                    <p class="text-md">{{ \Carbon\Carbon::parse($post->date)->format('F j, Y') }}</p>
                                </div>
                                <div class="mt-2 text-xl font-semibold">
                                    <p>{{ $post->title }}</p>
                                </div>
                            </div>
                        </a>
                    @endforeach

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

    </div>
    <script>
        window.addEventListener('load', function() {
            window.scrollTo({
                top: 500, // Adjust this value to scroll to a specific position (in pixels)
                behavior: 'smooth' // Enables smooth scrolling
            });
        });
    </script>
@endsection