@extends('layouts.main-app')

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

@section('content')


@include('layouts.navbar')

<div class="relative ">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/news/banner-1.webp')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto text-white py-[10rem]">
        <div class="grid grid-cols-1 px-4 md:grid-cols-3">
            <div class="space-y-4">
                <h1 class="text-3xl font-bold">Angelica Munar A Rising Star with a Multifaceted Approach at tipón</h1>
                <p>Aliquam pelientesque nisi aliquet suspendisse moltis velit fermentum. Augue maecenas nullam fusce finibus fusce imperdiet montes taciti. Vivamus felis potenti sollicitudin efficitur laculis luctus ridiculus adipiscing orci.</p>
                <button class="rounded-full bg-[#FBAF43] px-8 py-2">READ MORE</button>
            </div>
        </div>
    </div>
</div>



<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 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->id }}"
                                {{ request('category') == $category->id ? '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" 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" placeholder="24 Sept 2024" onfocus="(this.type='date')" onblur="(this.type='text')" value="{{ request('end_date') }}">
                        </div>
                    </div>
                </div>
            </form>

            <script>
                // Trigger form submission when input fields change
                document.querySelectorAll('select, input').forEach(function(element) {
                    element.addEventListener('change', function() {
                        document.querySelector('form').submit();
                    });
                });

                // Reset filters functionality
                document.getElementById('reset-filters').addEventListener('click', function() {
                    // Reset the form and reload the page without filters
                    document.querySelector('form').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->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  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 src="{{ asset($news->image_path) }}" 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->title }}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex items-center justify-between">
                <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="space-x-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