@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="flex flex-col justify-center gap-10 my-20 md:flex-row ">
                <div class="col-span-3 p-5 bg-white md:p-10 rounded-xl">
                    <div class="flex flex-col items-center gap-5 md:flex-row">
                        <div>Filter:</div>
                        <div>
                            <a href="{{url('news_events')}} " class="py-3 px-12 rounded-xl font-bold bg-gray-100">All</a>
                        </div>

                        <div>
                            <form method="GET" action="{{ route('NewsEvent.get') }}">
                                <input type="hidden" name="type" value="news">
                                <button type="submit"
                                    class="py-3 w-32 rounded-xl font-bold 
                                        {{ request()->input('type') == 'news' ? 'bg-[#fbae42] text-black' : 'bg-gray-100' }}">
                                    News
                                </button>
                            </form>
                        </div>

                        <div>
                            <form method="GET" action="{{ route('NewsEvent.get') }}">
                                <input type="hidden" name="type" value="event">
                                <button type="submit"
                                    class="py-3 w-32 rounded-xl font-bold 
                                        {{ request()->input('type') == 'event' ? 'bg-[#fbae42] text-black' : 'bg-gray-100' }}">
                                    Events
                                </button>
                            </form>
                        </div>
                    </div>


                    <div class="grid grid-cols-1 gap-10 mt-5 lg:grid-cols-2">


                        @foreach ($NewsEvent as $news_events)
                            <div>
                                <a href="{{ route('NewsEvent_singlepage.get', ['id' => $news_events->id]) }}">

                                    <div class="flex flex-col items-center justify-center"><img
                                            src="{{ asset($news_events->image) }}" class="h-auto md:h-[15rem] "> </div>
                                    <div class="flex flex-col items-center gap-5 mt-5 md:flex-row">
                                        <div class="flex flex-col items-center md:flex-row"><i
                                                class='text-xl bx bx-calendar-alt'></i>
                                            <span class="ml-3 text-sm">
                                                {{ \Carbon\Carbon::parse($news_events->date)->format('F j, Y') }}
                                            </span>
                                        </div>
                                        @if ($news_events->type == 'event')
                                            <a class="bg-[#c8e6f4] text-sm py-1 rounded-lg w-20 text-center">Events</a>
                                        @else
                                            <a class="bg-[#f9cecb] text-sm py-1 rounded-lg w-20 text-center">News</a>
                                        @endif
                                    </div>
                                    <div class="mt-5 text-xl text-[#8dae23] font-semibold">
                                        <p>{{ $news_events->title }}</p>
                                    </div>
                                </a>
                            </div>
                        @endforeach


                    </div>
                    <div class="mt-10 pagination ">
                        {{ $NewsEvent->links() }}
                    </div>
                </div>
                <div>
                    <div class="p-5 bg-white  rounded-xl">
                        <p class="text-xl font-bold">Recent Events</p>
                        @foreach ($latestevents as $events)
                            <a href="{{ route('NewsEvent_singlepage.get', ['id' => $events->id]) }}">
                                <div class="mt-5 bg-gray-100 w-auto md:w-[22rem] px-5 py-3">
                                    <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  rounded-xl">
                        <p class="text-xl font-bold">Recent News</p>
                        @foreach ($latestnews as $news)
                            <a href="{{ route('NewsEvent_singlepage.get', ['id' => $news->id]) }}">
                                <div class="mt-5 bg-gray-100 w-auto md:w-[22rem] px-5 py-3">
                                    <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>
    </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