285 lines
8.8 KiB
PHP
285 lines
8.8 KiB
PHP
<div>
|
|
<style>
|
|
/* General Reset and Base */
|
|
* { box-sizing: border-box; }
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #f1f3f5;
|
|
color: #333;
|
|
}
|
|
|
|
header {
|
|
background: #1d3557;
|
|
color: #fff;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
header h1 { margin: 0; font-size: 1.75rem; }
|
|
|
|
button.cart-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
span.cart-count {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -10px;
|
|
background: #e63946;
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 0.75rem;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 3rem 1rem;
|
|
text-align: center;
|
|
background: linear-gradient(to right, #f8c291, #f6e58d);
|
|
margin-bottom: 2rem;
|
|
}
|
|
.hero h2 {
|
|
margin: 0;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Grid Layout for Items */
|
|
.menu-grid {
|
|
max-width: 1200px;
|
|
margin: 0 auto 4rem;
|
|
padding: 0 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
article.card {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
transition: 0.3s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
article.card img {
|
|
width: 100%;
|
|
height: 160px;
|
|
object-fit: cover;
|
|
}
|
|
.card-body {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.food-name {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.3rem;
|
|
flex: 1;
|
|
}
|
|
.food-price {
|
|
color: #2d6a4f;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.quantity-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
input[type="number"] {
|
|
width: 60px;
|
|
padding: 0.3rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Cart Modal */
|
|
.cart-popup {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0,0,0,0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
.cart-popup.show {
|
|
display: flex;
|
|
}
|
|
.cart-content {
|
|
background: white;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 480px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.cart-header, .cart-footer {
|
|
padding: 1rem;
|
|
background: #1d3557;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.cart-items {
|
|
padding: 1rem;
|
|
flex: 1;
|
|
}
|
|
.cart-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.checkout-btn {
|
|
background-color: #1d3557;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
.checkout-btn:hover {
|
|
background-color: #457b9d;
|
|
}
|
|
.checkout-btn:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
|
|
@media(max-width: 600px) {
|
|
header h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
.hero h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<h1>MyFood IoT Ordering</h1>
|
|
<button class="cart-btn" wire:click="openCart">
|
|
🛒
|
|
@if(array_sum($cart) > 0)
|
|
<span class="cart-count">{{ array_sum($cart) }}</span>
|
|
@endif
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Hero for Food -->
|
|
<section class="hero">
|
|
<h2>🍔 Daftar Makanan</h2>
|
|
</section>
|
|
|
|
<!-- Food Items Grid -->
|
|
<section class="menu-grid" aria-label="Makanan">
|
|
@foreach($foodItems as $item)
|
|
@if($item['type'] === 'food')
|
|
<article class="card">
|
|
<img src="{{ $item['image_url'] }}" alt="{{ $item['name'] }}">
|
|
<div class="card-body">
|
|
<div class="food-name">{{ $item['name'] }}</div>
|
|
<div class="food-price">Rp {{ number_format($item['price'], 0, ',', '.') }}</div>
|
|
<div class="quantity-wrapper">
|
|
<label>Qty:</label>
|
|
<input type="number" min="0" wire:model.live.debounce.300ms="cart.{{ $item['id'] }}">
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endif
|
|
@endforeach
|
|
</section>
|
|
|
|
<!-- Hero for Drink -->
|
|
<section class="hero" style="background: linear-gradient(to right, #74b9ff, #a29bfe);">
|
|
<h2>🥤 Daftar Minuman</h2>
|
|
</section>
|
|
|
|
<!-- Drink Items Grid -->
|
|
<section class="menu-grid" aria-label="Minuman">
|
|
@foreach($foodItems as $item)
|
|
@if($item['type'] === 'beverage')
|
|
<article class="card">
|
|
<img src="{{ $item['image_url'] }}" alt="{{ $item['name'] }}">
|
|
<div class="card-body">
|
|
<div class="food-name">{{ $item['name'] }}</div>
|
|
<div class="food-price">Rp {{ number_format($item['price'], 0, ',', '.') }}</div>
|
|
<div class="quantity-wrapper">
|
|
<label>Qty:</label>
|
|
<input type="number" min="0" wire:model.live.debounce.300ms="cart.{{ $item['id'] }}">
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endif
|
|
@endforeach
|
|
</section>
|
|
|
|
<!-- Cart Modal -->
|
|
<div class="cart-popup @if($showCart) show @endif" wire:keydown.escape="closeCart" wire:click.self="closeCart">
|
|
<div class="cart-content">
|
|
<div class="cart-header">
|
|
<h3>🛒 Keranjang</h3>
|
|
<button wire:click="closeCart" style="font-size: 1.5rem;">×</button>
|
|
</div>
|
|
<div class="cart-items">
|
|
@if(empty($cartItems))
|
|
<p>Keranjang kosong.</p>
|
|
@else
|
|
@foreach($cartItems as $item)
|
|
<div class="cart-item">
|
|
<span>{{ $item['name'] }}</span>
|
|
<span>x{{ $item['qty'] }}</span>
|
|
<span>Rp {{ number_format($item['total_price'], 0, ',', '.') }}</span>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
<div class="cart-footer">
|
|
<span>Total: Rp {{ number_format($cartTotal, 0, ',', '.') }}</span>
|
|
<button class="checkout-btn" wire:click="checkout" @if(count($cartItems ?? []) === 0) disabled @endif>Checkout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Midtrans + Notify -->
|
|
<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.client_key') }}"></script>
|
|
<script>
|
|
window.addEventListener('midtransSnapToken', event => {
|
|
const token = event.detail.token;
|
|
window.snap.pay(token, {
|
|
onSuccess: () => window.livewire.dispatch('paymentSuccess'),
|
|
onPending: () => window.livewire.dispatch('paymentSuccess'),
|
|
onError: (result) => alert('Error: ' + result.status_message),
|
|
onClose: () => {}
|
|
});
|
|
});
|
|
window.addEventListener('notify', event => {
|
|
alert(event.detail.message);
|
|
});
|
|
</script>
|
|
</div>
|