@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold text-slate-900">Master Meja</h2>
                <p class="text-sm text-slate-500">Kelola status meja.</p>
            </div>
            <x-button href="{{ route('mejas.create') }}">Tambah Meja</x-button>
        </div>

        <x-card>
            <form method="get" class="mb-4">
                <x-input name="q" placeholder="Cari no meja" :value="$search" />
            </form>

            <x-table>
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-3">No Meja</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($mejas as $meja)
                        <tr class="border-b border-slate-100">
                            <td class="px-4 py-3 font-medium text-slate-800">{{ $meja->no_meja }}</td>
                            <td class="px-4 py-3">
                                <x-badge :variant="$meja->is_active ? 'success' : 'warning'">
                                    {{ $meja->is_active ? 'Aktif' : 'Nonaktif' }}
                                </x-badge>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex justify-end gap-2">
                                    <x-button variant="secondary" href="{{ route('mejas.edit', $meja) }}" class="px-2" title="Edit" aria-label="Edit">
                                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path d="M13.586 3.586a2 2 0 0 1 2.828 2.828l-8.5 8.5a1 1 0 0 1-.447.263l-4 1a1 1 0 0 1-1.213-1.213l1-4a1 1 0 0 1 .263-.447l8.5-8.5Z"/>
                                        </svg>
                                    </x-button>
                                    <form method="post" action="{{ route('mejas.destroy', $meja) }}">
                                        @csrf
                                        @method('delete')
                                        <x-button variant="danger" type="submit" class="px-2" onclick="return confirm('Hapus data?')" title="Hapus" aria-label="Hapus">
                                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path d="M6 2a1 1 0 0 0-1 1v1H3.5a1 1 0 0 0 0 2H4v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6h.5a1 1 0 1 0 0-2H15V3a1 1 0 0 0-1-1H6Zm2 6a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V8Zm4 0a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V8Z"/>
                                            </svg>
                                        </x-button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="px-4 py-6 text-center text-slate-500" colspan="3">Data kosong.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table>

            <div class="mt-4">{{ $mejas->links() }}</div>
        </x-card>
    </div>
@endsection
