From c7611df602a09efebcb0bade05681a4ad2ee8d42 Mon Sep 17 00:00:00 2001 From: JokoPrasetio Date: Thu, 16 Oct 2025 10:01:59 +0700 Subject: [PATCH] new version --- public/js/checkout/index.js | 11 +- public/js/order_guest/functions.js | 74 +-- .../guest/checkout/checkout_payment.blade.php | 227 +++++-- .../views/guest/checkout/step/step1.blade.php | 266 ++++---- .../views/guest/checkout/step/step2.blade.php | 115 ++-- .../views/guest/checkout/step/step3.blade.php | 197 +++--- .../views/guest/checkout_order.blade.php | 98 +-- resources/views/guest/index.blade.php | 620 +++++++++++++----- 8 files changed, 1029 insertions(+), 579 deletions(-) diff --git a/public/js/checkout/index.js b/public/js/checkout/index.js index 4b2f365..3db7ad6 100644 --- a/public/js/checkout/index.js +++ b/public/js/checkout/index.js @@ -32,6 +32,7 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.next-step').forEach(btn => { btn.addEventListener('click', async () => { const btnLoad = btn; + const originalHTML = btnLoad.innerHTML; btnLoad.disabled = true; btnLoad.innerHTML = 'Memproses...'; let cart = JSON.parse(sessionStorage.getItem('cart') || '[]'); @@ -104,7 +105,7 @@ document.addEventListener('DOMContentLoaded', () => { Swal.fire('Error', 'Terjadi kesalahan, silakan coba lagi.', 'error'); }finally{ btnLoad.disabled = false; - btnLoad.innerHTML = 'Selanjutnya'; + btnLoad.innerHTML = originalHTML; } }); @@ -218,7 +219,13 @@ function showStep(index) { for(let i = 1; i <= total; i++){ const circle = document.getElementById(`step-circle-${i}`) if(circle){ - circle.classList.toggle('active', i === index + 1) + circle.classList.toggle('active', i === index + 1); + circle.classList.toggle('completed', i < index + 1); + } + const indicator = document.getElementById(`indicator-step-${i}`); + if (indicator) { + indicator.classList.toggle('active', i === index + 1); + indicator.classList.toggle('completed', i < index + 1); } } } diff --git a/public/js/order_guest/functions.js b/public/js/order_guest/functions.js index 403271a..4931bff 100644 --- a/public/js/order_guest/functions.js +++ b/public/js/order_guest/functions.js @@ -1,73 +1,67 @@ let filterState = {}; -$(document).ready(function(){ - const jenisMenuAwal = $("#tabJenisMenu .nav-link.active").data("filter") - filterState ={ +$(document).ready(function () { + const jenisMenuAwal = $("#tabJenisMenu .btn.active").data("filter") || 'makanan'; + filterState = { jenis_menu: jenisMenuAwal, - search:'', + search: '', per_page: 50, - } + }; - fetchMenu(filterState) + fetchMenu(filterState); - $('#tabJenisMenu .btn').on('click', function(e) { + $('#tabJenisMenu .btn').on('click', function (e) { e.preventDefault(); const jenis = $(this).data('filter'); - // reset semua button jadi outline-success - $('#tabJenisMenu .btn') - .removeClass('btn-success active') - .addClass('btn-outline-success'); + $('#tabJenisMenu .btn').removeClass('active'); + $(this).addClass('active'); - // set button yang dipilih jadi active - $(this) - .removeClass('btn-outline-success') - .addClass('btn-success active'); - - // reset datepicker & label - datePicker.clear(); - $('#tanggalTerpilihLabel').addClass('d-none').text(''); + if (typeof datePicker !== 'undefined') { + datePicker.clear(); + } + $('#tanggalTerpilihLabel').addClass('d-none'); + $('#labelTanggalText').text('Menampilkan menu...'); $('#resetTanggal').addClass('d-none'); - // set filter state filterState.jenis_menu = jenis; fetchMenu(filterState); }); - $(".alert-link").on('click', function(e){ + $(".alert-link").on('click', function (e) { e.preventDefault(); - $('#tabJenisMenu .btn').removeClass('btn-success active').addClass('btn-outline-success'); - $('#tabJenisMenu .btn[data-filter="konsultasi" ]').removeClass('btn-outline-success').addClass('btn-success active'); + const konsultasiBtn = $('#tabJenisMenu .btn[data-filter="konsultasi"]'); + if (konsultasiBtn.length) { + $('#tabJenisMenu .btn').removeClass('active'); + konsultasiBtn.addClass('active'); + } - if (typeof datePicker !== 'undefined') { - datePicker.clear(); - } + if (typeof datePicker !== 'undefined') { + datePicker.clear(); + } filterState.jenis_menu = 'konsultasi'; - document.getElementById('tanggalTerpilihLabel').classList.add('d-none'); // Sembunyikan label - document.getElementById('tanggalTerpilihLabel').textContent = ''; - document.getElementById('resetTanggal').classList.add('d-none'); + $('#tanggalTerpilihLabel').addClass('d-none'); + $('#labelTanggalText').text('Menampilkan menu...'); + $('#resetTanggal').addClass('d-none'); fetchMenu(filterState); - }) + }); let searchTimout; - $('#searchMenu').on('input', function(){ + $('#searchMenu').on('input', function () { clearTimeout(searchTimout); const keyword = $(this).val(); searchTimout = setTimeout(() => { filterState.search = keyword; - fetchMenu(filterState) - }, 300) - }) - - -}) + fetchMenu(filterState); + }, 300); + }); +}); function changePerPage(select) { const newPerPage = parseInt(select.value); - filterState.per_page = newPerPage - fetchMenu(filterState) + filterState.per_page = newPerPage; + fetchMenu(filterState); } - diff --git a/resources/views/guest/checkout/checkout_payment.blade.php b/resources/views/guest/checkout/checkout_payment.blade.php index cbc5d74..92a890e 100644 --- a/resources/views/guest/checkout/checkout_payment.blade.php +++ b/resources/views/guest/checkout/checkout_payment.blade.php @@ -2,56 +2,197 @@ @section('body_main_guests')
+ +
-
-

Checkout Order

- - Kembali ke Menu - +
+
+
+

Checkout Pesanan

+

Lengkapi data, konfirmasi pesanan, lalu selesaikan pembayaran.

+
+
+ + Kembali ke Menu + +
- {{-- Form Identitas --}} -
- @csrf - -
-
-
1
- Data -
-
-
2
- Konfirmasi -
-
-
3
- Pembayaran -
+ + @csrf +
+
+
1
+ Data Pemesan +
+
+
2
+ Konfirmasi +
+
+
3
+ Pembayaran +
+
+ +
+
+ Langkah 1 dari 3 +
+
+ + @include('guest.checkout.step.step1') + @include('guest.checkout.step.step2') + @include('guest.checkout.step.step3') +
- -
-
- Langkah 1 dari 2 -
-
- {{-- STEP ONE --}} - @include('guest.checkout.step.step1') - - {{-- STEP TWO --}} - @include('guest.checkout.step.step2') - - {{-- STEP THREE --}} - @include('guest.checkout.step.step3') - -
+ @include('guest.checkout.modal.noteOrder') @include('guest.checkout.modal.confirmPaymentBilling') - - - + + + @endsection diff --git a/resources/views/guest/checkout/step/step1.blade.php b/resources/views/guest/checkout/step/step1.blade.php index ef62a22..0e6fb1c 100644 --- a/resources/views/guest/checkout/step/step1.blade.php +++ b/resources/views/guest/checkout/step/step1.blade.php @@ -1,137 +1,133 @@ -
-
- -
- -
- - -
-
- - -
-
- - -
-
-
- -
- - -
-
- - -
-
-
- - - -
Silakan cari dan pilih nama karyawan.
-
-
- - -
-
- - -
Notifikasi dari sistem belum dapat dikirim ke email dengan domain @rsabhk.co.id, oleh karena itu karyawan disarankan memakai alamat email lain
-
- {{--
- - -
--}} -
- - -
-
- - -
+
+
Langkah 1: Informasi Pemesan
+ - - {{-- Pasien --}} -
- - -
-
- - -
- -
- - -
- -
- - -
- {{-- End Pasien --}} - - {{-- Karyawan --}} -
- - -
-
- - -
- {{-- End Karyawan --}} - - - {{-- Umum --}} - -
- - -
- {{-- End Umum --}} - -
- +
+
+ +
+
+ + +
+
+ + +
+
+ + +
- {{-- --}} +
+ +
+ +
+
+ + +
+
+ + +
+
+
+ +
+ + + +
Silakan cari dan pilih nama karyawan.
+
+
+ + +
+
+ + +
Notifikasi dari sistem belum dapat dikirim ke email dengan domain @rsabhk.co.id, oleh karena itu karyawan disarankan memakai alamat email lain.
+
+
+ + +
+
+ + +
+ + {{-- Pasien --}} +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {{-- End Pasien --}} + + {{-- Karyawan --}} +
+ + +
+
+ + +
+ {{-- End Karyawan --}} + + {{-- Umum --}} +
+ + +
+ {{-- End Umum --}} +
+ +
+ +
+
diff --git a/resources/views/guest/checkout/step/step2.blade.php b/resources/views/guest/checkout/step/step2.blade.php index 97516b0..ef8712c 100644 --- a/resources/views/guest/checkout/step/step2.blade.php +++ b/resources/views/guest/checkout/step/step2.blade.php @@ -1,62 +1,61 @@ -
-
Langkah 2: Konfirmasi Pemesanan
+
+
Langkah 2: Konfirmasi Pesanan
- {{-- Ringkasan Pesanan --}} -
Pesanan Gizi
+
+
Ringkasan Pesanan
+
+ {{-- Render melalui JavaScript --}} +
+
+
+ + +
-
- {{-- Akan diisi oleh JavaScript --}} -
+ - {{-- Tombol Navigasi --}} -
- - -
- - - - - -
+ +
diff --git a/resources/views/guest/checkout/step/step3.blade.php b/resources/views/guest/checkout/step/step3.blade.php index 9b32d61..d73c0e9 100644 --- a/resources/views/guest/checkout/step/step3.blade.php +++ b/resources/views/guest/checkout/step/step3.blade.php @@ -1,117 +1,110 @@ -
-
Langkah 3: Lakukan Pembayaran
+
+
Langkah 3: Selesaikan Pembayaran
-
-
-
- Pembayaran -
-
- -
-
-
-
Detail Pembayaran
-
- -
-
- - -
-
No Order
-
-
- -
- -
-
- - -
-
Bank
-
Bank BRI
-
- - -
-
Nama Rek.
-
RPL 182 RSAB HARKIT OPR BLU PENERIMAAN
-
- - -
-
No.Rek
-
-
- -
- 096201000073308 -
-
- - -
-
Nominal
-
Rp 0
-
- - -
-
Waktu Pembayaran
-
-
+
+
+
+ Pembayaran +
+
+
+
+
+
+
Detail Pembayaran
+
+
No. Order
+
+
+ +
- -

- Mohon untuk melakukan pembayaran sebelum batas waktu yang tertera, lalu unggah bukti pembayaran sebagai konfirmasi. -

-
-
- - -
-
- - -
-
- -
- -
- Klik atau drag file ke sini untuk upload
- Format: JPG, PNG | Max: 2MB +
+
Bank
+
Bank BRI
+
+ +
+
Nama Rekening
+
RPL 182 RSAB HARKIT OPR BLU PENERIMAAN
+
+ +
+
No. Rekening
+
+
+ 096201000073308 +
-
-
-
- +

+ Lakukan pembayaran sebelum batas waktu berakhir, kemudian unggah bukti transfer untuk mempercepat verifikasi. +

+
+
+
+ +
+
+
+ + + +
+ +
+ +
+ +
+ Klik atau tarik file ke area ini untuk mengunggah
+ Format: JPG, PNG | Maksimal: 2MB +
+
+ + + + +
+
+ +
+ + +
+
diff --git a/resources/views/guest/checkout_order.blade.php b/resources/views/guest/checkout_order.blade.php index 8ff6a45..082cf86 100644 --- a/resources/views/guest/checkout_order.blade.php +++ b/resources/views/guest/checkout_order.blade.php @@ -1,71 +1,71 @@