refactor: update buket routes to include slugs and enhance pagination UI

resources/views/user/components/_list.blade.php

@@ -10,7 +10,8 @@
                     <h6 class="katalogbuket-product-title">{{ $b->nama }}</h6>
                     <p class="katalogbuket-product-price">Rp {{ number_format($b->harga, 0, ',', '.') }}</p>
                     <div class="spacer"></div>
-                    <a href="{{ route('detail.buket', $b->id_buket) }}" class="stretched-link"></a>
+                    <a href="{{ route('detail.buket', $b->id_buket . '-' . Str::slug($b->nama)) }}"
+                        class="stretched-link"></a>
                 </div>
             </div>
         @empty
@@ -19,4 +20,52 @@
             </div>
         @endforelse
     </div>
+    @if ($buket->hasPages())
+        <div class="row mt-5" id="custom-pagination">
+            <div class="col-12 d-flex justify-content-between align-items-center">
+                {{-- TOMBOL PREVIOUS --}}
+                <div class="text-start" style="width: 150px;">
+                    @if ($buket->onFirstPage())
+                        <span class="btn btn-pagination btn-sm rounded-pill px-3 disabled" style="opacity: 0.5;">
+                            <i class="bi bi-chevron-left me-1"></i> Sebelumnya
+                        </span>
+                    @else
+                        <a href="{{ $buket->previousPageUrl() }}" class="btn btn-pagination">
+                            <i class="bi bi-chevron-left me-1"></i> Sebelumnya
+                        </a>
+                    @endif
+                </div>
+
+                {{-- TOMBOL ANGKA (Looping Halaman) --}}
+                <div class="d-flex justify-content-center align-items-center gap-2">
+                    @foreach ($buket->getUrlRange(1, $buket->lastPage()) as $page => $url)
+                        @if ($page == $buket->currentPage())
+                            <span class="page-number active mt-0 rounded"
+                                style="background-color: var(--bs-gray-400); color: black; font-weight: 700; padding: 5px 12px;">
+                                {{ $page }}
+                            </span>
+                        @else
+                            <a href="{{ $url }}"
+                                class="page-number text-decoration-none text-muted px-3 py-1 mt-0">
+                                {{ $page }}
+                            </a>
+                        @endif
+                    @endforeach
+                </div>
+
+                {{-- TOMBOL NEXT --}}
+                <div class="text-end" style="width: 150px;">
+                    @if ($buket->hasMorePages())
+                        <a href="{{ $buket->nextPageUrl() }}" class="btn btn-pagination btn-sm rounded-pill px-3">
+                            Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
+                        </a>
+                    @else
+                        <span class="btn btn-pagination disabled btn-sm rounded-pill px-3" style="opacity: 0.5;">
+                            Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
+                        </span>
+                    @endif
+                </div>
+            </div>
+        </div>
+    @endif
 </div>

resources/views/user/detail-buket.blade.php

@@ -69,7 +69,7 @@ class="detailbuket-spec-val">{{ ucfirst(str_replace('_', ' ', $buket->kategori))
                         </p>
 
                         <div class="d-flex gap-3 mt-5">
-                            <a href="{{ route('formulir.buket', ['id' => $buket->id_buket]) }}"
+                            <a href="{{ route('formulir.buket', $buket->id_buket . '-' . \Illuminate\Support\Str::slug($buket->nama)) }}"
                                 class="btn btn-detailbuket-primary flex-fill">
                                 Pesan Sekarang
                             </a>

resources/views/user/pembayaran-buket.blade.php

@@ -196,7 +196,7 @@ class="position-absolute w-100 h-100 opacity-0 start-0 top-0 cursor-pointer @err
                             </p>
 
                             <div class="d-flex gap-3">
-                                <a href="{{ route('detail.buket', $buket->id_buket) }}"
+                                <a href="{{ route('detail.buket', $buket->id_buket . '-' . \Illuminate\Support\Str::slug($buket->nama)) }}"
                                     class="btn formulirbuket-btn-cancel flex-fill">Batalkan</a>
                                 <button type="submit" class="btn formulirbuket-btn-submit flex-fill">Kirim
                                     Pesanan</button>

resources/views/user/pesan-buket.blade.php

@@ -102,45 +102,6 @@ class="bi bi-chevron-right"></i></a></li>
 
                 <div class="col-lg-9">
                     @include('user.components._list')
-                    <div class="row mt-5">
-                        <div class="col-12 d-flex justify-content-between align-items-center">
-
-                            @if ($buket->onFirstPage())
-                                <span class="btn btn-pagination btn-sm rounded-pill px-3 disabled">
-                                    <i class="bi bi-chevron-left me-1"></i> Sebelumnya
-                                </span>
-                            @else
-                                <a href="{{ $buket->previousPageUrl() }}"
-                                    class="btn btn-pagination btn-sm rounded-pill px-3">
-                                    <i class="bi bi-chevron-left me-1"></i> Sebelumnya
-                                </a>
-                            @endif
-
-                            {{-- Nomor Halaman --}}
-                            <div class="pagination-numbers text-muted">
-                                @foreach ($buket->getUrlRange(1, $buket->lastPage()) as $page => $url)
-                                    @if ($page == $buket->currentPage())
-                                        <span class="page-number active">{{ $page }}</span>
-                                    @else
-                                        <a href="{{ $url }}"
-                                            class="page-number text-decoration-none">{{ $page }}</a>
-                                    @endif
-                                @endforeach
-                            </div>
-
-                            @if ($buket->hasMorePages())
-                                <a href="{{ $buket->nextPageUrl() }}" class="btn btn-pagination btn-sm rounded-pill px-3">
-                                    Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
-                                </a>
-                            @else
-                                <span class="btn btn-pagination btn-sm rounded-pill px-3 disabled">
-                                    Selanjutnya <i class="bi bi-chevron-right ms-1"></i>
-                                </span>
-                            @endif
-
-                        </div>
-                    </div>
-
                 </div>
             </div>
         </div>
@@ -209,13 +170,24 @@ function fetchBuket(url = "{{ route('pesan.buket') }}") {
                 $(this).removeClass('active');
             });
             // Pagination AJAX
-            $(document).on('click', '.pagination a', function(e) {
+            // $(document).on('click', '.pagination a', function(e) {
-                e.preventDefault();
+            //     e.preventDefault();
-                let url = $(this).attr('href');
+            //     let url = $(this).attr('href');
-                fetchBuket(url);
+            //     fetchBuket(url);
-                window.scrollTo(0, 400);
+            //     window.scrollTo(0, 400);
-            });
+            // });
+            $(document).on('click', '#custom-pagination a', function(e) {
+                e.preventDefault(); // Mencegah reload halaman
 
+                // Ambil URL dari tombol yang diklik
+                let url = $(this).attr('href');
+
+                // Pastikan URL valid sebelum dipanggil
+                if (url && url !== '#') {
+                    fetchBuket(url);
+                    window.scrollTo(0, 400); // Scroll ke atas sedikit biar enak dilihat
+                }
+            });
             var slider = document.getElementById('price-slider');
             noUiSlider.create(slider, {
                 start: [0, 500000],