@extends('layouts.main-app')

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

@section('content')


@include('layouts.navbar')



<!--HTML CODE-->
<div class="relative w-full">
    <div class="swiper default-carousel swiper-container">
        <div class="swiper-wrapper">

            @foreach ($newsItems->sortByDesc('created_at')->take(3) as $newsItem)
            <div class="swiper-slide">
                <div class="relative h-screen md:h-[35rem]">
                    <!-- Background Image -->
                    <img class="absolute inset-0 object-cover w-full h-full" src="{{ asset('uploads/blogs/' . $newsItem->image) }}" alt="">

                    <!-- Blue Overlay with 50% Opacity -->
                    <div class="absolute inset-0 bg-[#0D78BC] opacity-80"></div>

                    <div class="container relative flex items-center justify-center h-full max-w-screen-xl mx-auto text-white">
                        <div class="grid items-center grid-cols-1 gap-4 px-4 md:grid-cols-2 place-content-center">
                            <div class="flex flex-col justify-between h-full space-y-4">
                                <div></div>
                                <div>
                                    <h1 class="text-2xl font-bold">{{$newsItem->name}}</h1>
                                    <div>{!! \Illuminate\Support\Str::words(strip_tags($newsItem->message), 20, '...') !!}</div>

                                </div>
                                <div>
                                    <a href="{{ url('news_and_promotions_details', $newsItem->id) }}">
                                        <button class="rounded-full bg-[#FBAF43] px-8 py-2">READ MORE</button>
                                    </a>

                                </div>

                            </div>
                            <div>
                                <img class="w-full h-full" src="{{ asset('uploads/blogs/' . $newsItem->image) }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
           
        </div>
         <!-- Left Arrow -->
            <div class="absolute top-1/2 left-0 z-10 transform -translate-y-1/2">
                <div class="flex flex-col items-center justify-center gap-4">
                    <button id="slider-button-left" class="bg-gray-400 bg-opacity-50 text-2xl rounded-full h-10 w-10 flex justify-center items-center text-[#115D8D]">
                        <i class='bx bx-left-arrow-alt'></i>
                    </button>
                </div>
            </div>
    
            <!-- Right Arrow -->
            <div class="absolute top-1/2 right-0 z-10 transform -translate-y-1/2">
                <button id="slider-button-right" class="bg-gray-400 bg-opacity-50 text-2xl rounded-full h-10 w-10 flex justify-center items-center text-[#115D8D]">
                    <i class='bx bx-right-arrow-alt'></i>
                </button>
            </div>
        <div class="items-end">
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

<!--JAVASCRIPT CODE-->
<script>
    var swiper = new Swiper(".default-carousel", {
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: "#slider-button-right",
            prevEl: "#slider-button-left",
        },
    });
</script>




<div class="container max-w-screen-xl mx-auto ">
    <div class="grid grid-cols-1 px-4 py-8 md:gap-8 lg:grid-cols-3">
        <div>
            <form id="blogs" method="GET" action="{{ url('news_and_promotions') }}">
                <div class="p-8 shadow-xl">
                    <div class="flex justify-between">
                        <div>
                            <h1 class="text-xl font-bold">Filter BY</h1>
                        </div>
                        <div class="flex items-center cursor-pointer text-md" id="reset-filters">
                            <h1>Reset</h1>
                            <i class='text-red-500 bx bx-x'></i>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <h1 class="font-medium text-gray-400">Category</h1>
                        <select name="category" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                            <option value="">Select Category</option>
                            @foreach ($categories as $category)
                            <option value="{{ $category->category_name }}"
                                {{ request('category') == $category->category_name ? 'selected' : '' }}>
                                {{ $category->category_name }}
                            </option>
                            @endforeach
                        </select>

                        @if(request('category'))
                        <div class="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4">
                            @php
                            // Find the category name based on the selected category id
                            $selectedCategory = $categories->firstWhere('id', request('category'));
                            @endphp
                            @if($selectedCategory)
                            <button type="submit" name="category" value="" class="px-3 py-1 text-gray-500 bg-gray-200 rounded-md">
                                {{ $selectedCategory->category_name }} <i class='text-red-500 bx bx-x'></i>
                            </button>
                            @endif
                        </div>
                        @endif
                    </div>


                    <hr class="my-4">

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <h1>Date from</h1>
                            <input type="text" id="start_date" name="start_date" class="w-full border-2 rounded-full border-[#FBAF43] p-2 text-sm" placeholder="24 Sept 2024" onfocus="(this.type='date')" onblur="(this.type='text')" value="{{ request('start_date') }}">
                        </div>
                        <div>
                            <h1>Date to</h1>
                            <input type="text" id="end_date" name="end_date" class="w-full border-2 rounded-full border-[#FBAF43] p-2 text-sm" placeholder="24 Sept 2024" onfocus="(this.type='date')" onblur="(this.type='text')" value="{{ request('end_date') }}">
                        </div>
                    </div>
                </div>
            </form>

            <script>
                // Select the form by its ID
                const blogsForm = document.getElementById('blogs');

                // Trigger form submission when input fields or select elements change
                blogsForm.querySelectorAll('select, input').forEach(function(element) {
                    element.addEventListener('change', function() {
                        blogsForm.submit();
                    });
                });

                // Reset filters functionality
                document.getElementById('reset-filters').addEventListener('click', function() {
                    // Reset the form and reload the page without filters
                    blogsForm.reset();
                    window.location.href = "{{ url('news_and_promotions') }}";
                });
            </script>


            <div class="pt-8">
                <h1 class="py-8 text-2xl font-bold">RECENT POSTS</h1>
                @foreach ($newsItems->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('uploads/blogs/' . $newsItem->image) }}" 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->name, 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 class="col-span-2 pb-8">
            <div class="flex flex-col items-center justify-between py-8 md:flex-row">
                <div>
                    <h1>Showing {{ $newsItems->firstItem() }}-{{ $newsItems->lastItem() }} of {{ $newsItems->total() }} results</h1>
                </div>
                <div>
                    <form action="{{ url('news_and_promotions') }}" method="GET">
                        <select name="sort_by" class="border-2 border-[#FBAF43] rounded-full p-2" onchange="this.form.submit()">
                            <option value="">Sort By (Default)</option>
                            <option value="date" {{ request('sort_by') == 'date' ? 'selected' : '' }}>Date</option>
                            <option value="title" {{ request('sort_by') == 'title' ? 'selected' : '' }}>Title</option>
                        </select>
                    </form>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                @foreach ($newsItems as $news)
                <div class="hover:shadow-xl rounded-xl">
                    <a href="{{ url('news_and_promotions_details', $news->id) }}">
                        <div>
                            <img class="object-cover w-full h-[20rem]" src="{{ asset('uploads/blogs/' . $news->image) }}" alt="">
                            <div class="flex items-center py-4 space-x-2">
                                <div class="bg-[#115D8D] text-white text-center rounded-lg p-4 flex flex-col justify-center items-center">
                                    <span class="text-xl font-bold">{{ $news->created_at->format('d') }}</span>
                                    <span class="text-sm">{{ $news->created_at->format('M') }}</span>
                                </div>
                                <div>
                                    <p class="font-bold">{{ $news->name }}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach

            </div>

            <!-- Pagination -->
            <div class="flex items-center justify-between space-x-2">
                <div>
                    @if ($newsItems->onFirstPage())
                    <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl" disabled><i class='bx bx-left-arrow-alt'></i></button>
                    @else
                    <a href="{{ $newsItems->previousPageUrl() }}">
                        <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl"><i class='bx bx-left-arrow-alt'></i></button>
                    </a>
                    @endif
                </div>
                <div class="flex flex-wrap gap-2">
                    @foreach ($newsItems->getUrlRange(1, $newsItems->lastPage()) as $page => $url)
                    <a href="{{ $url }}">
                        <button class="text-[#FBAF43] rounded-full hover:text-white hover:border-transparent hover:bg-blue-500 border-[#FBAF43] border-2 w-8 h-8 {{ $page == $newsItems->currentPage() ? 'bg-transparent text-white' : '' }}">
                            {{ $page }}
                        </button>
                    </a>
                    @endforeach
                </div>
                <div>
                    @if ($newsItems->hasMorePages())
                    <a href="{{ $newsItems->nextPageUrl() }}">
                        <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl"><i class='bx bx-right-arrow-alt'></i></button>
                    </a>
                    @else
                    <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl" disabled><i class='bx bx-right-arrow-alt'></i></button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @include('layouts.newsletter')
</div>



@include('layouts.footer')



@endsection