<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>
