@extends('layouts.app')

@section('title', __('messages.search_result'))

@section('content')
    <div class="container mx-auto my-5">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <!-- Main Content (9 Columns) -->
            <div class="md:col-span-9">
                <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ __('messages.search_reult_for') }} "{{ $query }}"</h1>

                <!-- Section for Coupons -->
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4">{{ __('messages.coupons') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6" id="coupon-results">

                        @foreach ($coupons as $coupon)
                            @include('partials.coupon')
                        @endforeach
                    </div>
                    @if ($coupons->hasMorePages())
                        <button class="load-more" data-type="coupons" data-page="2"
                            data-url="{{ LaravelLocalization::localizeURL('/search/load-more') }}">
                            {{ __('messages.load_more') }}
                        </button>
                    @endif
                </div>

                <!-- Section for Offers -->
                <div>
                    <h2 class="text-xl font-bold mb-4">{{ __('messages.offers') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6" id="offer-results">
                        @foreach ($offers as $offer)
                            @include('partials.offer', ['results' => $offers])
                        @endforeach
                    </div>
                    @if ($offers->hasMorePages())
                        <button class="load-more" data-type="offers" data-page="2"
                            data-url="{{ LaravelLocalization::localizeURL('/search/load-more') }}">
                            {{ __('messages.load_more') }}
                        </button>
                    @endif
                </div>

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

        </div>
    </div>
@endsection
@section('scripts')
    <!-- Script to Handle Load More -->
    <script>
        document.querySelectorAll('.load-more').forEach(button => {
            button.addEventListener('click', async () => {
                const type = button.dataset.type;
                const page = parseInt(button.dataset.page);
                const query = document.querySelector('input[name="q"]').value;
                const url = button.dataset.url; // Get the localized URL

                // Append query parameters to the localized URL
                const fullUrl = `${url}?q=${encodeURIComponent(query)}&type=${type}&page=${page}`;

                const response = await fetch(fullUrl, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });

                const data = await response.json();
                if (type === 'coupons') {
                    document.getElementById('coupon-results').innerHTML += data.html;
                } else if (type === 'offers') {
                    document.getElementById('offer-results').innerHTML += data.html;
                }

                if (data.hasMore) {
                    button.dataset.page = page + 1;
                } else {
                    button.style.display = 'none';
                }
            });
        });
    </script>
@endsection