@php
    $params = [
        'limit' => (int) ($limit ?? 6),
        'category' => $category ?? '',
        'post_type' => $postType ?? '',
        'order' => $order ?? 'desc',
    ];
@endphp

<div
    x-data="{
        url: '{{ route('ajax.video-galleries.shortcode') }}',
        params: @js($params),
        page: 1,
        hasMore: true,
        loading: false,
        init() { this.fetchPosts(); },
        async fetchPosts() {
            if (this.loading || !this.hasMore) return;
            this.loading = true;
{{--            const query = new URLSearchParams({ ...this.params, page: this.page }).toString();--}}
            const query = new URLSearchParams({
                ...this.params,
                page: this.page++
            }).toString();
            const res = await fetch(`${this.url}?${query}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            const data = await res.json();
            if (data.html && data.html.trim()) this.$refs.container.insertAdjacentHTML('beforeend', data.html);
            this.hasMore = !!data.hasMore;
            this.loading = false;
        },
        loadMore() { this.fetchPosts(); }
    }"
    x-init="init()"
    class="space-y-6"
>
    <!-- container where items will be appended -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" x-ref="container"></div>

    <!-- Load More button -->
    <div class="flex justify-center" x-show="hasMore" x-cloak>
        <button
            @click="loadMore"
            class="px-5 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
            :disabled="loading"
            x-text="loading ? '{{ __('messages.LOADING') }}' : '{{ __('messages.See More') }}'">
        </button>
    </div>
</div>