@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('coupons') }}
                    <h1 class="text-3xl font-bold">{{ __('messages.coupons') }}</h1>
                    <p class="text-gray-600 mt-3">{{ __('messages.coupons_description') }}</p>
                </div>
                <div class="mb-8">
                    <div class="flex gap-1 mb-6 ml-1">
                        <!-- 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 id="sortFilter"
                            class="m-1  border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2">
                            <option value="latest">{{ __('messages.latest') }}</option>
                            <option value="oldest">{{ __('messages.oldest') }}</option>
                            <option value="likes">{{ __('messages.most_liked') }}</option>
                            <option value="views">{{ __('messages.most_viewed') }}</option>
                        </select>
                    </div>
                    <div class="mt-6 ml-2 mr-2">
                        <!-- Coupons Container -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6" id="couponsContainer">
                            <!-- Coupons 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>
                        </div>
                        <p id="noMoreCouponsMessage" class="text-center text-gray-500 mt-4 hidden">
                            {{ __('messages.no_more_coupons') }}
                        </p>
                    </div>
                </div>
            </div>

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

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