guestbook display

app/Http/Controllers/MainController.php

 {
     public function main(Request $request) {
         $rsvp = RSVP::all();
-        $guestbook = GuestBook::all();
+        $guestbooks = GuestBook::orderBy('created_at', 'desc')->take(5)->get();
+        $totalPages = $guestbooks->count();
 
         $host = $request->getHost();
         if ($host == 'aliffayuna.com') {
-            return view('digital-card', compact(['rsvp', 'guestbook']));
+            return view('digital-card', compact(['rsvp', 'guestbooks']));
         } else if ($host == 'rsvp.aliffayuna.com') {
             return view('rsvp-digital-card');
         } else {
-            return view('digital-card', compact(['rsvp', 'guestbook']));
+            return view('digital-card', compact(['rsvp', 'guestbooks', 'totalPages']));
             // return view('rsvp-digital-card');
         }
     }
 
         return response()->json(['message' => 'Terima kasih atas ucapan anda!']);
     }
+
+    public function fetchGuestbook(Request $request)
+    {
+        $page = $request->input('page', 1); // Default to page 1 if no page is provided
+        $guestbook = GuestBook::orderBy('created_at', 'desc')->take(5)->get()->forPage($page, 1);
+
+        return response()->json([
+            'guestbook' => view('partials.guestbook', ['entry' => $guestbook->first()])->render(),
+        ]);
+    }
+
 }

resources/views/components/guestbook.blade.php

 <div class="flex flex-col gap-5 w-4/5">
-    <div class="text-center pb-3 fade-element">
+    <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>
-        <p class="font-medium text-sm text-gray-600 italic">Ucapan kepada kedua mempelai</p>
-        <p class="font-medium text-sm text-gray-600 italic">-Nama-</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">
     </div>
     <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
     @include('modals.guestbook-modal')
-</div>
+</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

resources/views/partials/guestbook.blade.php

+@if ($entry)
+    <p class="font-medium text-sm text-gray-600 italic fade-in-5">{{ $entry->speech }}</p>
+    <p class="font-medium text-sm text-gray-600 italic fade-in-5">-{{ $entry->name }}-</p>
+@endif

routes/web.php

 
 Route::get('/', [MainController::class, 'main']);
 Route::post('/saveRsvp', [MainController::class, 'saveRsvp'])->name('rsvp.save');
-Route::post('/saveSpeech', [MainController::class, 'saveSpeech'])->name('speech.save');
+Route::post('/saveSpeech', [MainController::class, 'saveSpeech'])->name('speech.save');
+Route::get('/guestbook', [MainController::class, 'fetchGuestbook'])->name('guestbook.ajax');