From 28c5206b9dbf542fc6fc92064b6af09e45434603 Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Thu, 15 Jan 2026 19:14:23 +0700
Subject: [PATCH] update date picker in pesan buket module to flat picker

---
 public/css/user/main.css                      |  9 +++++
 resources/views/layouts/user.blade.php        |  3 ++
 .../views/user/components/_list.blade.php     |  4 +--
 .../views/user/pembayaran-buket.blade.php     | 33 +++++++++++++++----
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/public/css/user/main.css b/public/css/user/main.css
index 5a75bba..2f6862b 100644
--- a/public/css/user/main.css
+++ b/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;
diff --git a/resources/views/layouts/user.blade.php b/resources/views/layouts/user.blade.php
index 4935f97..689ca9f 100644
--- a/resources/views/layouts/user.blade.php
+++ b/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>
diff --git a/resources/views/user/components/_list.blade.php b/resources/views/user/components/_list.blade.php
index 3a4e22b..7db650f 100755
--- a/resources/views/user/components/_list.blade.php
+++ b/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>
diff --git a/resources/views/user/pembayaran-buket.blade.php b/resources/views/user/pembayaran-buket.blade.php
index 2ae28bd..9a68a97 100644
--- a/resources/views/user/pembayaran-buket.blade.php
+++ b/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>
-                                        <input type="time" name="waktu_ambil"
-                                            class="form-control formulirbuket-input @error('waktu_ambil') is-invalid @enderror"
-                                            min="09:00" max="21:00" value="{{ old('waktu_ambil') }}">
-                                        <small class="text-muted">Jam operasional: 09.00 - 21.00 WIB</small>
+                                        <label class="form-label small">Waktu Pengambilan</label>
+
+                                        <div class="input-group">
+
+                                            <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