<div class="card ot-card mb-30">
    <div class="card-title mb-20">
        <h3 class="text-capitalize">{{ _trans('common.Activity Feed') }}</h3>
    </div>
    <div class="height-255 hide-scroll overflow-auto" id="activityFeeds">
        <x-activity-feed.activity-feeds :activityFeeds="$activityFeeds" />
        <div id="loadMoreLoader" style="display: none; text-align: center;">
            <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            {{ _trans('common.Loading more') }} ...
        </div>
    </div>
</div>

<script>
// document.addEventListener('DOMContentLoaded', function() {
    let pageNo = 1;
    const loadMoreLoader = document.getElementById('loadMoreLoader');
    const activityFeedsContainer = document.getElementById('activityFeeds');
    
    function loadMoreFeeds() {
        pageNo++;
        loadMoreLoader.style.display = 'block';
        fetch(`/activity-feed?page=${pageNo}`)
            .then(response => response.text())
            .then(data => {
                loadMoreLoader.style.display = 'none';
                if (data.trim().length) {
                    activityFeedsContainer.insertAdjacentHTML('beforeend', data);
                    const noMoreData = document.getElementById('no-more-data');
                    if (noMoreData) {
                        activityFeedsContainer.removeEventListener('scroll', handleScroll);
                    }
                } else {
                    activityFeedsContainer.removeEventListener('scroll', handleScroll);
                    loadMoreLoader.style.display = 'none'; // Hide the loader if no more data
                }
            })
            .catch(error => {
                console.error('Error:', error);
                loadMoreLoader.style.display = 'none';
            });
    }
    
    function handleScroll() {
        const { scrollTop, scrollHeight, clientHeight } = activityFeedsContainer;
        if (scrollTop + clientHeight >= scrollHeight - 5) {
            loadMoreFeeds();
        }
    }

    activityFeedsContainer.addEventListener('scroll', handleScroll);
// });
</script>
