@extends('layouts.main-app')

@section('title', 'News and Promotions')


@section('content')


@include('layouts.navbar')

<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/news/singlepage-banner.webp')}}" alt="">
    <div class="relative">
        <h1 class="py-2 text-2xl font-bold text-center text-white">News & Updates</h1>
    </div>
</div>

<div class="container max-w-screen-xl py-8 mx-auto">
    <div class="grid grid-cols-1 px-4 space-y-4 md:space-y-0 md:gap-8 lg:grid-cols-3">
        <div  class="col-span-2 space-y-8">
            <h1 class="text-4xl font-bold">{{$newsItems->title}}</h1>
            <img src="{{asset($newsItems->image_path)}}" alt="">
            <p>
                {!!$newsItems->content!!}
            </p>
        </div>
        <div >
            <div class="shadow-xl ">
                <button class="bg-[#FBAF43] w-full rounded-full font-bold text-left px-4 py-1 text-white">CATEGORIES</button>
                <div class="pt-4 pb-2 space-y-2">
                    @foreach ($category as $categories)
                    <div class="flex items-center justify-between px-6 ">
                        <h1>{{$categories->category_name}}</h1>
                        <i class='bx bx-chevron-right'></i>
                    </div>
                    <hr>
                    @endforeach


                </div>
            </div>
            <div class="pt-8">
                <h1 class="py-8 text-2xl font-bold">RECENT POSTS</h1>
                @foreach ($news->sortByDesc('created_at')->take(3) as $newsItem)
                <a href="{{ url('news_and_promotions_details', $newsItem->id) }}">
                    <div class="shadow-xl rounded-xl">
                        <div class="flex flex-col items-center p-4 space-x-8 md:flex-row">
                            <img class="w-40 h-28" src="{{ asset($newsItem->image_path) }}" alt="{{ $newsItem->title }}">
                            <div class="flex flex-col justify-center">
                                <div class="flex items-center text-md">
                                    <i class='text-blue-500 bx bx-calendar'></i>
                                    <p>{{ $newsItem->created_at->format('M d, Y') }}</p>
                                </div>
                                <div>
                                    <h1 class="text-sm font-bold">{{ Str::limit($newsItem->title, 50) }}</h1> <!-- Limit the title to 50 characters -->
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                </a>
                @endforeach
            </div>
            <div>
                <h1 class="py-8 text-2xl font-bold">OPEN JOB POSITIONS</h1>

                @php
                // Filter careers where open_position is not zero and shuffle the remaining ones
                $filteredCareers = $careers->filter(function ($career) {
                return $career->open_position > 0;
                })->shuffle();
                @endphp

                @foreach ($filteredCareers as $career)
                <a href="{{ url('/job_details', $career->id) }}">
                    <div class="shadow-xl rounded-xl">
                        <div class="flex flex-col items-center p-4 space-x-4 md:flex-row">
                            <img src="{{ asset($career->mpc->image) }}" alt="">
                            <div class="flex flex-col justify-center">
                                <h1 class="text-sm text-gray-700">{{ $career->mpc->mpc_name }}</h1>
                                <h1 class="text-xl font-bold text-blue-500">{{ $career->title }}</h1>
                                <div class="text-xs">
                                    <i class='text-blue-500 bx bx-map'></i> {{ $career->location->location_name }} |
                                    <i class='text-blue-500 bx bx-time'></i> {{ $career->created_at->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                </a>
                @endforeach

            </div>
        </div>

    </div>
    @include('layouts.newsletter')

</div>


@include('layouts.footer')



@endsection