39 lines
1.9 KiB
PHP
39 lines
1.9 KiB
PHP
<div class="container mx-auto p-4">
|
|
<h1 class="text-2xl font-bold mb-4">Pilih Meja Anda</h1>
|
|
|
|
@if (session()->has('message'))
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<span class="block sm:inline">{{ session('message') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Contoh denah, ganti dengan gambar denah Anda --}}
|
|
<div class="relative mb-8">
|
|
<img src="{{ asset('images/denah-contoh.png') }}" alt="Denah Restoran" class="w-full h-auto rounded-lg shadow-lg">
|
|
{{-- Anda bisa menempatkan tombol meja di atas gambar ini menggunakan posisi absolut --}}
|
|
{{-- Contoh penempatan meja (ini hanya placeholder, sesuaikan koordinatnya) --}}
|
|
@foreach ($availableTables as $table)
|
|
<button wire:click="selectTable('{{ $table['id'] }}')"
|
|
class="absolute bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-lg"
|
|
style="top: {{ rand(10, 80) }}%; left: {{ rand(10, 80) }}%;"> {{-- Ini random, harus diganti dengan koordinat tetap --}}
|
|
{{ $table['name'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<h2 class="text-xl font-semibold mb-3">Daftar Meja Tersedia:</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@forelse ($availableTables as $table)
|
|
<div class="bg-white p-4 rounded-lg shadow-md flex justify-between items-center">
|
|
<span class="text-lg font-medium">{{ $table['name'] }}</span>
|
|
<button wire:click="selectTable('{{ $table['id'] }}')"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Pilih
|
|
</button>
|
|
</div>
|
|
@empty
|
|
<p class="text-gray-500 col-span-full">Tidak ada meja yang tersedia saat ini.</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|