498 lines
34 KiB
PHP
498 lines
34 KiB
PHP
<div class="flex h-screen bg-gray-100 font-sans" x-data="{
|
|
notification: false,
|
|
message: '',
|
|
notificationType: 'success',
|
|
isProcessingButton: false,
|
|
getNotificationClasses() {
|
|
// Fungsi untuk mendapatkan kelas CSS berdasarkan tipe notifikasi
|
|
switch (this.notificationType) {
|
|
case 'success':
|
|
return 'bg-green-500';
|
|
case 'warning':
|
|
return 'bg-yellow-500';
|
|
case 'error':
|
|
return 'bg-red-500';
|
|
case 'info':
|
|
return 'bg-blue-500';
|
|
default:
|
|
return 'bg-gray-700';
|
|
}
|
|
},
|
|
|
|
// Inisialisasi Alpine.js
|
|
init() {
|
|
// Listener untuk notifikasi global dari Livewire Component
|
|
Livewire.on('notify', (data) => {
|
|
this.notification = true;
|
|
this.message = data.message;
|
|
this.notificationType = data.type || 'success';
|
|
setTimeout(() => this.notification = false, 4000);
|
|
});
|
|
}
|
|
}">
|
|
|
|
<div class="w-64 bg-white shadow-lg overflow-y-auto p-4 z-20">
|
|
<h1 class="text-5xl font-bold mb-6 text-center text-gray-800">DFOOD</h1>
|
|
<nav>
|
|
<ul class="space-y-4">
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $allTypeItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<li class="mb-2">
|
|
<a href="#" wire:click.prevent="filterByType(<?php echo e($type->id); ?>)"
|
|
class="block rounded overflow-hidden shadow-md transition-all duration-200
|
|
<?php echo e($typeItemId == $type->id ? 'ring-2 ring-green-600 ring-offset-2' : 'hover:scale-105'); ?>">
|
|
<?php
|
|
$imageUrl = $type->image_url;
|
|
if (!filter_var($imageUrl, FILTER_VALIDATE_URL)) {
|
|
$imageUrl = asset($imageUrl);
|
|
}
|
|
?>
|
|
<img src="<?php echo e($imageUrl); ?>" class="w-full h-32 object-cover" alt="<?php echo e($type->name); ?>"
|
|
loading="lazy" decoding="async">
|
|
<div
|
|
class="text-center py-3 border-t border-gray-200 text-gray-800 font-medium
|
|
<?php echo e($typeItemId == $type->id ? 'bg-green-600 text-white' : 'bg-gray-50'); ?>">
|
|
<?php echo e($type->name); ?>
|
|
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
<!--[if BLOCK]><![endif]--><?php $__empty_1 = true; $__currentLoopData = $foodItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
|
<div wire:click="addToCart(<?php echo e($item->id); ?>)"
|
|
class="bg-white cursor-pointer shadow rounded-lg overflow-hidden
|
|
transition transform hover:scale-105 active:scale-95
|
|
active:ring-2 active:ring-green-400 flex flex-col">
|
|
<!--[if BLOCK]><![endif]--><?php if(isset($item->image_url) && $item->image_url): ?>
|
|
<img src="<?php echo e(asset($item->image_url)); ?>" alt="<?php echo e($item->name); ?>"
|
|
class="w-full h-48 object-cover object-center" loading="lazy" decoding="async" />
|
|
<?php else: ?>
|
|
<img src="<?php echo e(asset('img/placeholder-food.jpg')); ?>" alt="<?php echo e($item->name); ?>"
|
|
class="w-full h-48 object-cover object-center" loading="lazy" decoding="async" />
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
<div class="p-4 flex flex-col flex-grow">
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800 mb-2"><?php echo e($item->name); ?></h2>
|
|
<p class="text-gray-600 text-lg">Rp <?php echo e(number_format($item->price, 0, ',', '.')); ?></p>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
|
<div class="col-span-full text-center py-10 bg-white rounded-lg shadow">
|
|
<p class="text-gray-500 text-xl">Tidak ada menu tersedia untuk kategori ini.</p>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="fixed top-0 right-0 h-full w-96 bg-white shadow-xl z-30 flex flex-col transform
|
|
transition-transform duration-300 ease-in-out
|
|
<?php echo e($showCart ? 'translate-x-0' : 'translate-x-full'); ?>">
|
|
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
|
<h2 id="cart-title" class="text-2xl font-bold text-gray-800">Keranjang Anda</h2>
|
|
<button wire:click="closeCart" class="text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
aria-label="Close cart" type="button">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<!--[if BLOCK]><![endif]--><?php if(empty($cartItems)): ?>
|
|
<p class="text-gray-500 text-center py-10">Keranjang kosong.</p>
|
|
<?php else: ?>
|
|
|
|
<ul class="divide-y divide-gray-200 mb-4" tabindex="0">
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $cartItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<li class="py-3 flex justify-between items-center">
|
|
<div>
|
|
<p class="font-medium text-gray-800"><?php echo e($item['name']); ?></p>
|
|
<p class="text-sm text-gray-600">Rp
|
|
<?php echo e(number_format($item['price'], 0, ',', '.')); ?></p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button wire:click="removeFromCart(<?php echo e($item['id']); ?>)" type="button"
|
|
class="px-2 py-1 bg-red-100 text-red-700 rounded hover:bg-red-200">
|
|
-
|
|
</button>
|
|
<span class="mx-1 text-gray-800 font-semibold"><?php echo e($item['qty']); ?></span>
|
|
<button wire:click="addToCart(<?php echo e($item['id']); ?>)" type="button"
|
|
class="px-2 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200">
|
|
+
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</ul>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
|
|
|
|
<div class="p-6 border-t border-gray-200 bg-white">
|
|
<div class="mb-4 text-right text-xl text-gray-900">Total: Rp
|
|
<?php echo e(number_format($cartTotal, 0, ',', '.')); ?></div>
|
|
|
|
|
|
<div class="flex flex-col space-y-3 mt-4">
|
|
<button wire:click="goToCheckoutDetails" type="button" wire:loading.attr="disabled"
|
|
wire:loading.class="opacity-50"
|
|
class="bg-green-600 hover:bg-green-700 text-white py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 font-semibold text-lg
|
|
disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
<?php echo e(empty($cartItems) ? 'disabled' : ''); ?>>
|
|
<span wire:loading.remove>Lanjut Pembayaran</span>
|
|
<span wire:loading>Processing...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if($showCart): ?>
|
|
<div class="fixed inset-0 opacity-bg z-20" wire:click="closeCart">
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
|
|
<div class="fixed bottom-4 right-4">
|
|
<button wire:click="openCart"
|
|
class="bg-green-600 text-white rounded-full py-3 px-6 shadow-lg hover:bg-green-700 transition flex items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
<span class="font-semibold text-xl">Keranjang
|
|
<span class="bg-white text-green-600 rounded-full px-2 py-1 text-base ml-2">
|
|
<?php echo e(array_sum($cart)); ?>
|
|
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if($showMapModal): ?>
|
|
<div class="fixed inset-0 opacity-bg z-[71] flex items-center justify-center" role="dialog" aria-modal="true"
|
|
aria-labelledby="map-title" x-show="$wire.showMapModal"
|
|
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90"
|
|
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
|
|
<div class="bg-white w-full max-w-2xl lg:max-w-4xl xl:max-w-5xl rounded shadow-lg p-6 relative">
|
|
<h2 id="map-title" class="text-xl font-bold mb-4">Denah Meja Restoran</h2>
|
|
|
|
<div class="relative w-full overflow-hidden border border-gray-300 rounded-lg"
|
|
style="max-height: 80vh;">
|
|
<img src="<?php echo e(asset('img/denah-cafe.png')); ?>" alt="Denah Restoran"
|
|
class="w-full h-auto object-contain max-h-[400px] mx-auto">
|
|
</div>
|
|
|
|
<div class="mt-6 text-right">
|
|
<button wire:click="closeMap" type="button"
|
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
|
|
<button wire:click="closeMap"
|
|
class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
aria-label="Close map" type="button">
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
<!--[if BLOCK]><![endif]--><?php if($showCheckoutDetailsModal): ?>
|
|
<div class="fixed inset-0 opacity-bg z-[70] text-gray-700 flex items-center justify-center" role="dialog"
|
|
aria-modal="true" aria-labelledby="checkout-details-title" x-show="$wire.showCheckoutDetailsModal"
|
|
x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4"
|
|
x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4"
|
|
@click.away="$wire.closeCheckoutDetailsModal()" @transition:after-enter="isProcessingButton = false">
|
|
<div class="bg-white w-full max-w-2xl rounded-lg shadow-lg p-6 relative">
|
|
<h2 id="checkout-details-title" class="text-2xl font-bold mb-4 text-gray-800 text-center">Checkout
|
|
</h2>
|
|
<button wire:click="closeCheckoutDetailsModal"
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
aria-label="Tutup" type="button">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<form wire:submit.prevent="processOrderConfirmation">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
|
|
|
|
<div class="flex-1 p-4 bg-white rounded-lg shadow-md">
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-bold text-gray-700 mb-3">PESAN MEJA</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div
|
|
class="flex items-center p-3 rounded-md border border-gray-300 hover:bg-blue-50 cursor-pointer transition duration-200 ease-in-out
|
|
<?php if($isExistingCustomer == '0'): ?> bg-blue-100 border-blue-500 <?php endif; ?>">
|
|
<input type="radio" id="customer-new" name="customer_type"
|
|
wire:model.live="isExistingCustomer" value="0"
|
|
class="mr-3 h-5 w-5 text-blue-600 focus:ring-blue-500">
|
|
<label for="customer-new" class="text-gray-700 text-base font-medium">BELUM
|
|
MEMESAN</label>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-cente p-3 rounded-md border border-gray-300 hover:bg-blue-50 cursor-pointer transition duration-200 ease-in-out
|
|
<?php if($isExistingCustomer == '1'): ?> bg-blue-100 border-blue-500 <?php endif; ?>">
|
|
<input type="radio" id="customer-existing" name="customer_type"
|
|
wire:model.live="isExistingCustomer" value="1"
|
|
class="mr-3 h-5 w-5 text-blue-600 focus:ring-blue-500">
|
|
<label for="customer-existing"
|
|
class="text-gray-700 text-base font-medium">SUDAH MEMESAN</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-md mb-2 font-bold">Pilih Meja Anda</h3>
|
|
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if(!$isExistingCustomer): ?>
|
|
<div class="mb-4">
|
|
<label for="available-table-select-checkout"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Meja Tersedia:</label>
|
|
<select id="available-table-select-checkout" wire:model.live="selectedTableId"
|
|
class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
<?php echo e($tableIdFromUrl && $selectedOccupiedTableId === null ? 'disabled' : ''); ?>>
|
|
<option value="">-- Pilih Meja Tersedia --</option>
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $availableTables; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $table): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<option value="<?php echo e($table['id']); ?>"><?php echo e($table['device_id']); ?> || TERSEDIA
|
|
</option>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</select>
|
|
<!--[if BLOCK]><![endif]--><?php $__errorArgs = ['selectedTableId'];
|
|
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
|
if ($__bag->has($__errorArgs[0])) :
|
|
if (isset($message)) { $__messageOriginal = $message; }
|
|
$message = $__bag->first($__errorArgs[0]); ?>
|
|
<span class="text-red-500 text-sm mt-1"><?php echo e($message); ?></span>
|
|
<?php unset($message);
|
|
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
|
endif;
|
|
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if($isExistingCustomer): ?>
|
|
<div class="mb-4">
|
|
<label for="occupied-table-select-checkout"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Meja Sudah Terisi
|
|
(Konfirmasi Nama):</label>
|
|
<select id="occupied-table-select-checkout"
|
|
wire:model.live="selectedOccupiedTableId"
|
|
class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
<?php echo e($tableIdFromUrl && $selectedTableId === null ? 'disabled' : ''); ?>>
|
|
<option value="">-- Pilih Meja Terisi --</option>
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $occupiedTables; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $table): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<option value="<?php echo e($table['id']); ?>"><?php echo e($table['device_id']); ?> || Oleh:
|
|
<?php echo e($table['reserved_by']); ?></option>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</select>
|
|
<!--[if BLOCK]><![endif]--><?php $__errorArgs = ['selectedOccupiedTableId'];
|
|
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
|
if ($__bag->has($__errorArgs[0])) :
|
|
if (isset($message)) { $__messageOriginal = $message; }
|
|
$message = $__bag->first($__errorArgs[0]); ?>
|
|
<span class="text-red-500 text-sm mt-1"><?php echo e($message); ?></span>
|
|
<?php unset($message);
|
|
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
|
endif;
|
|
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if($showCustomerNameInput): ?>
|
|
<div class="mb-4">
|
|
<label for="customer-name-input-checkout"
|
|
class="block text-gray-700 text-sm font-bold mb-2">Nama Pemesan:</label>
|
|
<input type="text" id="customer-name-input-checkout"
|
|
wire:model.live="inputCustomerName"
|
|
class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
placeholder="Masukkan nama Anda"
|
|
<?php echo e($isCustomerNameInputDisabled ? 'disabled' : ''); ?>>
|
|
<!--[if BLOCK]><![endif]--><?php $__errorArgs = ['inputCustomerName'];
|
|
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
|
if ($__bag->has($__errorArgs[0])) :
|
|
if (isset($message)) { $__messageOriginal = $message; }
|
|
$message = $__bag->first($__errorArgs[0]); ?>
|
|
<span class="text-red-500 text-sm mt-1"><?php echo e($message); ?></span>
|
|
<?php unset($message);
|
|
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
|
endif;
|
|
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
|
|
<div class="mb-4">
|
|
<button wire:click="showMap" type="button"
|
|
class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
Lihat Denah Meja
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 p-4 bg-white rounded-lg shadow-md">
|
|
<div class="mb-6 border rounded-lg">
|
|
<h3 class="text-md text-gray-800 font-bold">Pilih Metode Pembayaran:</h3>
|
|
|
|
<div>
|
|
<p class="text-sm mb-2">Pembayaran Otomatis</p>
|
|
<label class="flex items-center mb-2 cursor-pointer">
|
|
<input type="radio" wire:model.live="selectedPaymentMethod"
|
|
value="midtrans" class="form-radio h-5 w-5 text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" class="inline-block h-6 w-auto ml-2 mr-2">
|
|
<path d="M4.5 3.75a3 3 0 0 0-3 3v.75h21v-.75a3 3 0 0 0-3-3h-15Z" />
|
|
<path fill-rule="evenodd"
|
|
d="M22.5 9.75h-21v7.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-7.5Zm-18 3.75a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="text-gray-700 font-bold text-sm">Credit Card/Virtual
|
|
Account</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm mb-2">Pembayaran Manual</p>
|
|
<label class="flex items-center cursor-pointer pb-2">
|
|
<input type="radio" wire:model.live="selectedPaymentMethod" value="cash"
|
|
class="form-radio h-5 w-5 text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" alt="Tunai Logo"
|
|
class="inline-block size-6 h-6 w-auto ml-2 mr-2">
|
|
<path d="M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
|
|
<path fillRule="evenodd"
|
|
d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z"
|
|
clipRule="evenodd" />
|
|
<path
|
|
d="M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z" />
|
|
</svg>
|
|
<span class="text-gray-700 font-bold text-sm">Tunai</span>
|
|
</label>
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="radio" wire:model.live="selectedPaymentMethod" value="qris"
|
|
class="form-radio h-5 w-5 text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" class="inline-block h-6 w-auto ml-2 mr-2 size-6">
|
|
<path fill-rule="evenodd"
|
|
d="M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375v-4.5ZM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5v-.75Zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="text-gray-700 font-bold text-sm">QRIS</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!--[if BLOCK]><![endif]--><?php $__errorArgs = ['selectedPaymentMethod'];
|
|
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
|
if ($__bag->has($__errorArgs[0])) :
|
|
if (isset($message)) { $__messageOriginal = $message; }
|
|
$message = $__bag->first($__errorArgs[0]); ?>
|
|
<span class="text-red-500 text-sm mt-2 block text-center"><?php echo e($message); ?></span>
|
|
<?php unset($message);
|
|
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
|
endif;
|
|
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
<div class="mb-4 hidden">
|
|
<label for="customerEmail" class="block text-gray-800 text-sm font-bold mb-2">
|
|
Email Anda (Opsional):
|
|
</label>
|
|
<p class="text-gray-600 text-xs mb-2">
|
|
Email digunakan untuk menerima struk pesanan.
|
|
</p>
|
|
<input type="email" id="customerEmail" wire:model.live="customerEmail"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
placeholder="nama@contoh.com">
|
|
<!--[if BLOCK]><![endif]--><?php $__errorArgs = ['customerEmail'];
|
|
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
|
if ($__bag->has($__errorArgs[0])) :
|
|
if (isset($message)) { $__messageOriginal = $message; }
|
|
$message = $__bag->first($__errorArgs[0]); ?>
|
|
<span class="text-red-500 text-sm mt-1"><?php echo e($message); ?></span>
|
|
<?php unset($message);
|
|
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
|
endif;
|
|
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
<div class="text-center mt-6">
|
|
<div class="mb-4 text-right text-xl text-gray-900">Total: Rp
|
|
<?php echo e(number_format($cartTotal, 0, ',', '.')); ?></div>
|
|
|
|
<button wire:click="processOrderConfirmation"
|
|
class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 disabled:cursor-not-allowed"
|
|
type="submit" wire:loading.attr="disabled" wire:loading.class="opacity-50">
|
|
<span wire:loading.remove wire:target="processOrderConfirmation">Bayar</span>
|
|
<span wire:loading wire:target="processOrderConfirmation">Processing...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
<!--[if BLOCK]><![endif]--><?php if($showQrisPayment): ?>
|
|
<div class="fixed inset-0 opacity-bg flex items-center justify-center z-[75]">
|
|
<div class="bg-white p-6 rounded-lg max-w-md w-full">
|
|
<h2 class="text-xl font-bold mb-4">Pembayaran QRIS</h2>
|
|
|
|
<div class="mb-4">
|
|
<p class="mb-2">Silakan scan QR code berikut untuk pembayaran:</p>
|
|
<img src="<?php echo e($qrisImageUrl); ?>" alt="QRIS Payment Code"
|
|
class="w-full h-auto border border-gray-300">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button wire:click="$set('showQrisPayment', false)" class="px-4 py-2 bg-gray-300 rounded">
|
|
Batal
|
|
</button>
|
|
<button wire:click="confirmQrisPayment" class="px-4 py-2 bg-blue-500 text-white rounded">
|
|
Konfirmasi Pembayaran
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
|
|
<div x-show="notification" x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform translate-y-2"
|
|
class="fixed bottom-8 left-1/2 -translate-x-1/2 text-white px-4 py-2 rounded-lg shadow-lg z-[9999]"
|
|
:class="getNotificationClasses()" x-cloak>
|
|
<p x-text="message"></p>
|
|
</div>
|
|
<!--[if BLOCK]><![endif]--><?php if(session('success')): ?>
|
|
<div x-data="{ show: true, message: '<?php echo e(session('success')); ?>', getNotificationClasses() { return 'bg-green-500'; } }" x-show="show" x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform translate-y-2" x-init="setTimeout(() => show = false, 4000)"
|
|
class="fixed bottom-8 left-1/2 -translate-x-1/2 text-white px-4 py-2 rounded-lg shadow-lg z-[9999]"
|
|
:class="getNotificationClasses()" x-cloak>
|
|
<p x-text="message"></p>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
|
|
<?php /**PATH E:\!PROJECT\dfood-website\resources\views/livewire/food-order.blade.php ENDPATH**/ ?>
|