digital-card/resources/views/components/guestbook.blade.php

<div class="flex flex-col gap-5 w-4/5">
    <div class="flex flex-col justify-center text-center gap-3 fade-element">
        <p class="font-medium text-gray-600 pb-3">Ruangan Ucapan</p>
        <div id="guestbook-container">
            @include('partials.guestbook', ['entry' => $guestbooks->first()])
        </div>
        <div class="join flex justify-center" id="pagination-buttons">
            @for ($i = 1; $i <= $totalPages; $i++)
                <button class="join-item btn btn-xs {{ $i == 1 ? 'btn-active' : '' }} hidden" data-page="{{ $i }}">{{ $i }}</button>
            @endfor
        </div>
    </div>
    <div class="text-center pb-2 fade-element">
        <a onclick="guestbook.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
            <i class="fa-solid fa-pen-fancy"></i>
            <span>Ucapan</span>
        </a>

    </div>
    <div class="text-center pb-2 fade-element">
        <a onclick="rsvp.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
            <i class="fa-solid fa-clipboard"></i>
            <span>Sahkan Kehadiran</span>
        </a>
    </div>
    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center ">
    @include('modals.guestbook-modal')
</div>

@push('script')
<script>
    $(document).ready(function() {
        var autoSwitchInterval = 4500; // 3 seconds
        var currentPage = 1;
        var totalPages = {{ $totalPages }}; // Total number of pages

        function fetchGuestbook(page) {
            $.ajax({
                url: '{{ route('guestbook.ajax') }}',
                type: 'GET',
                data: { page: page },
                success: function(response) {
                    $('#guestbook-container').html(response.guestbook);

                    // Update pagination buttons
                    $('#pagination-buttons .join-item').removeClass('btn-active');
                    $('#pagination-buttons .join-item[data-page="' + page + '"]').addClass('btn-active');

                    // Update currentPage
                    currentPage = page;
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        }

        // Auto-switching every 3 seconds
        setInterval(function() {
            var nextPage = currentPage + 1;
            if (nextPage > totalPages) {
                nextPage = 1;
            }
            fetchGuestbook(nextPage);
        }, autoSwitchInterval);

        // Handle pagination button click
        $('#pagination-buttons').on('click', '.join-item', function() {
            var page = $(this).data('page');
            fetchGuestbook(page);
        });
    });
</script>
@endpush