167 lines
9.9 KiB
PHP
167 lines
9.9 KiB
PHP
<div class="container mx-auto px-4 py-8 main-content-scroll">
|
|
<div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
|
|
<h1 class="text-3xl font-bold text-gray-800"><?php echo e($pageTitle); ?></h1>
|
|
|
|
<div class="w-full sm:w-auto">
|
|
<label for="typeFilter" class="sr-only">Filter by Category</label>
|
|
<select id="typeFilter" wire:model.live="typeItemId" wire:change="filterByType($event.target.value)"
|
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50">
|
|
<option value="">Semua Menu</option>
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $allTypeItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<option value="<?php echo e($type->id); ?>"><?php echo e($type->name); ?></option>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
|
|
<!--[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 transition transform hover:scale-105 active:scale-95 active:ring-2 active:ring-green-400">
|
|
<!--[if BLOCK]><![endif]--><?php if(isset($item->image_url) && $item->image_url): ?>
|
|
<img src="<?php echo e($item->image_url); ?>" alt="<?php echo e($item->name); ?>" class="w-full h-40 object-cover"
|
|
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-40 object-cover" loading="lazy" decoding="async" />
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
<div class="p-4 flex flex-col flex-grow">
|
|
<h2 class="text-lg font-semibold leading-tight"><?php echo e($item->name); ?></h2>
|
|
<p class="text-gray-500 mb-3">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">
|
|
<p class="text-gray-500 text-xl">Tidak ada menu tersedia untuk kategori ini.</p>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
</div>
|
|
|
|
<div class="fixed bottom-4 right-4 z-30">
|
|
<button wire:click="openCart"
|
|
class="bg-green-600 text-white rounded-full p-4 shadow-lg hover:bg-green-700 transition flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/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="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-medium"><?php echo e(array_sum($cart)); ?></span>
|
|
|
|
</button>
|
|
</div>
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if($showCart): ?>
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center" role="dialog"
|
|
aria-modal="true" aria-labelledby="cart-title">
|
|
<div class="bg-white w-full max-w-md rounded shadow-lg p-6 z-50 relative">
|
|
<h2 id="cart-title" class="text-xl font-bold mb-4">Keranjang</h2>
|
|
|
|
<!--[if BLOCK]><![endif]--><?php if(empty($cartItems)): ?>
|
|
<p class="text-gray-500">Keranjang kosong.</p>
|
|
<?php else: ?>
|
|
<ul class="divide-y divide-gray-200 mb-4 max-h-72 overflow-y-auto" tabindex="0">
|
|
<!--[if BLOCK]><![endif]--><?php $__currentLoopData = $cartItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<li class="py-2 flex justify-between items-center">
|
|
<div>
|
|
<p class="font-medium"><?php echo e($item['name']); ?></p>
|
|
<p class="text-sm text-gray-500">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">
|
|
-
|
|
</button>
|
|
<span class="mx-2"><?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">
|
|
+
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
|
|
</ul>
|
|
<div class="font-bold mb-4 text-right text-lg">Total: Rp
|
|
<?php echo e(number_format($cartTotal, 0, ',', '.')); ?></div>
|
|
<button wire:click="checkout"
|
|
class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-green-500"
|
|
type="button" wire:loading.attr="disabled" wire:loading.class="opacity-50">
|
|
<span wire:loading.remove>Checkout</span>
|
|
<span wire:loading>Processing...</span>
|
|
</button>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
<button wire:click="closeCart"
|
|
class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 focus:outline-none"
|
|
aria-label="Close cart" type="button">
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?><!--[if ENDBLOCK]><![endif]-->
|
|
|
|
<div x-data="{ notification: false, message: '' }"
|
|
x-on:notify.window="notification = true; message = $event.detail.message; setTimeout(() => notification = false, 3000)"
|
|
x-cloak>
|
|
<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 top-8 right-8 bg-green-500 text-white px-4 py-2 rounded shadow-lg z-50">
|
|
<p x-text="message"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
Livewire.on('midtransSnapToken', (data) => {
|
|
console.log('Snap token received:', data.token);
|
|
|
|
if (typeof snap !== 'undefined') {
|
|
snap.pay(data.token, {
|
|
onSuccess: function(result) {
|
|
console.log('Payment success:', result);
|
|
Livewire.dispatch('paymentSuccess');
|
|
},
|
|
onPending: function(result) {
|
|
console.log('Payment pending:', result);
|
|
Livewire.dispatch('notify', {
|
|
message: 'Pembayaran belum selesai'
|
|
});
|
|
},
|
|
onError: function(result) {
|
|
console.log('Payment error:', result);
|
|
Livewire.dispatch('notify', {
|
|
message: 'Terjadi kesalahan pembayaran'
|
|
});
|
|
},
|
|
onClose: function() {
|
|
console.log('Payment closed');
|
|
Livewire.dispatch('notify', {
|
|
message: 'Pembayaran dibatalkan'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
console.error("Midtrans Snap is not loaded. Please check your Midtrans script tag.");
|
|
Livewire.dispatch('notify', {
|
|
message: 'Payment gateway tidak tersedia'
|
|
});
|
|
}
|
|
});
|
|
|
|
// Handle URL updates from Livewire component
|
|
Livewire.on('updateUrl', (data) => {
|
|
const newUrl = data.url;
|
|
if (window.history.pushState) {
|
|
window.history.pushState({ path: newUrl }, '', newUrl);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
<?php /**PATH E:\!PROJECT\dfood-website\resources\views/livewire/food-order.blade.php ENDPATH**/ ?>
|