@extends('layouts.app')

@section('content')
    <div class="container mx-auto sm:mt-2 mt-8">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">

                <!-- Page Title and Description -->
                <div class="ml-4 mb-10 mr-4">
                    {{ Breadcrumbs::render('offers') }}
                    <h1 class="text-3xl font-bold">{{ __('messages.offers') }}</h1>
                    <p class="text-gray-600 mt-3">{{ __('messages.offers_description') }}</p>
                </div>
                <!-- Filters -->
                <div class="flex flex-wrap gap-1 mb-6 ml-4">
                    <!-- Filter by Store -->
                    <select class="m-1 px-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 "
                        id="storeFilter">
                        <option value="">{{ __('messages.all_stores') }}</option>
                        @foreach ($formattedStores as $store)
                            <option value="{{ $store['id'] }}">{{ $store['name'] }}</option>
                        @endforeach
                    </select>

                    <!-- Filter by Category -->
                    <select class="m-1 px-1  border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 "
                        id="categoryFilter">
                        <option value="">{{ __('messages.all_categories') }}</option>
                        @foreach ($formattedCategories as $category)
                            <option value="{{ $category['id'] }}">{{ $category['name'] }}</option>
                        @endforeach
                    </select>

                    <!-- Sort By -->
                    <select class="m-1 px-1  border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 "
                        id="sortFilter">
                        <option value="latest">{{ __('messages.latest') }}</option>
                        <option value="oldest">{{ __('messages.oldest') }}</option>
                    </select>
                </div>
                <div class="mt-6 ml-2 mr-2">
                    <!-- Offers Container -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6" id="offersContainer">
                        <!-- Offers will be loaded here -->
                    </div>

                    <!-- Load More Button -->
                    <div class="flex justify-center mt-6">
                        <button id="loadMoreBtn"
                            class="mt-6  bgd-color text-white px-6 py-2 rounded-md m-auto focus:outline-none focus:ring-2">
                            {{ __('messages.load_more') }}
                        </button>
                        <p id="noMoreOffersMessage" class="text-gray-500 mt-2 hidden">{{ __('messages.no_more_offers') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>
    @vite('resources/js/components/offers.js')

    <script>
        window.offersData = {
            ajaxUrl: "{{ LaravelLocalization::localizeURL('/ajax/offers') }}"
        };
    </script>
@endsection