update date picker in pesan buket module to flat picker

public/css/user/main.css

@@ -1566,6 +1566,15 @@ input[type="time"].formulirbuket-input {
     font-size: 0.9rem;
 }
 
+.flatpickr-calendar.hasTime.noCalendar {
+    width: 240px !important;
+    min-width: 0 !important;
+}
+
+.flatpickr-time {
+    border-top: none !important;
+}
+
 .summary-item {
     display: flex;
     flex-direction: column;

resources/views/layouts/user.blade.php

@@ -18,6 +18,7 @@
     <link href="{{ asset('vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
     <link href="{{ asset('vendors/aos/aos.css') }}" rel="stylesheet">
     <link href="{{ asset('css/user/main.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 
     <script>
         (function() {
@@ -153,6 +154,8 @@ class="bi bi-tiktok"></i></a>
             });
         }
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+
 </body>
 
 </html>

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

@@ -24,7 +24,7 @@ class="stretched-link"></a>
         <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: 160px;">
+                <div class="text-start" style="width: 16e0px;">
                     @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
@@ -54,7 +54,7 @@ class="page-number text-decoration-none text-muted px-3 py-1 mt-0">
                 </div>
 
                 {{-- TOMBOL NEXT --}}
-                <div class="text-end" style="width: 160px;">
+                <div class="text-end" style="width: 16e0px;">
                     @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>

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

@@ -86,11 +86,20 @@ class="form-control formulirbuket-input @error('tgl_ambil') is-invalid @enderror
                                         @enderror
                                     </div>
                                     <div class="col-md-6">
-                                        <label class="form-label  small">Waktu Pengambilan</label>
+                                        <label class="form-label small">Waktu Pengambilan</label>
-                                        <input type="time" name="waktu_ambil"
+
-                                            class="form-control formulirbuket-input @error('waktu_ambil') is-invalid @enderror"
+                                        <div class="input-group">
-                                            min="09:00" max="21:00" value="{{ old('waktu_ambil') }}">
+
-                                        <small class="text-muted">Jam operasional: 09.00 - 21.00 WIB</small>
+                                            <input type="text" id="jam_picker" name="waktu_ambil"
+                                                class="form-control formulirbuket-input bg-white @error('waktu_ambil') is-invalid @enderror"
+                                                placeholder="Pilih Jam Pengambilan" value="{{ old('waktu_ambil') }}"
+                                                readonly>
+                                            <span class="input-group-text bg-white"><i class="bi bi-clock"></i></span>
+
+                                        </div>
+
+                                        <small class="text-muted">Jam operasional: 09:00 - 21:00 WIB</small>
+
                                         @error('waktu_ambil')
                                             <div class="invalid-feedback d-block">{{ $message }}</div>
                                         @enderror
@@ -237,7 +246,19 @@ class="btn formulirbuket-btn-cancel flex-fill">Batalkan</a>
             }
         });
     </script>
-
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            flatpickr("#jam_picker", {
+                enableTime: true,
+                noCalendar: true,
+                dateFormat: "H:i",
+                time_24hr: true,
+                minTime: "09:00",
+                maxTime: "21:00",
+                disableMobile: "true"
+            });
+        });
+    </script>
 
 
 @endsection