@extends('layouts.admin')
@section('title', 'Tables')

@section('content')
<div class="bg-white rounded-xl border border-gray-100 p-5 mb-6">
    <h2 class="font-semibold mb-4">Add Restaurant Table</h2>
    @if ($staff->isEmpty())
        <div class="mb-4 rounded-lg bg-yellow-50 text-yellow-700 px-4 py-3 text-sm">Add an active user with the Staff role before creating a table.</div>
    @endif
    <form method="POST" action="{{ route('admin.tables.store') }}" class="grid grid-cols-1 md:grid-cols-4 gap-3">
        @csrf
        <input name="name" value="{{ old('name') }}" placeholder="Table name (e.g. Table 1)" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
        <input name="capacity" type="number" value="{{ old('capacity', 2) }}" min="1" max="100" placeholder="Capacity" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
        <select name="assigned_staff_id" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
            <option value="">Assign staff</option>
            @foreach ($staff as $member)
                <option value="{{ $member->id }}" @selected((string) old('assigned_staff_id') === (string) $member->id)>{{ $member->name }} — {{ $member->phone }}</option>
            @endforeach
        </select>
        <button @disabled($staff->isEmpty()) class="bg-orange-500 text-white rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-40">Add Table</button>
    </form>
</div>

<div class="bg-white rounded-xl border border-gray-100 p-5 overflow-x-auto">
    <table class="w-full text-sm">
        <thead><tr class="text-left text-gray-500 border-b border-gray-100"><th class="py-2">Table</th><th>Capacity</th><th>Assigned Staff</th><th>Mobile</th><th>Active</th><th>Actions</th></tr></thead>
        <tbody>
        @forelse ($tables as $table)
            <tr class="border-b border-gray-50">
                <td class="py-2 font-medium">{{ $table->name }}</td>
                <td>{{ $table->capacity }}</td>
                <td>{{ $table->assignedStaff->name }}</td>
                <td>{{ $table->assignedStaff->phone }}</td>
                <td>{{ $table->is_active ? 'Yes' : 'No' }}</td>
                <td class="flex items-center gap-3 py-2">
                    <button type="button" class="text-blue-600 text-xs" onclick="document.getElementById('edit-table-{{ $table->id }}').classList.toggle('hidden')">Edit</button>
                    <form method="POST" action="{{ route('admin.tables.destroy', $table) }}" onsubmit="return confirm('Delete this table?')">
                        @csrf @method('DELETE')
                        <button class="text-red-500 text-xs">Delete</button>
                    </form>
                </td>
            </tr>
            <tr id="edit-table-{{ $table->id }}" class="hidden bg-gray-50">
                <td colspan="6" class="p-3">
                    <form method="POST" action="{{ route('admin.tables.update', $table) }}" class="grid grid-cols-1 md:grid-cols-5 gap-3 items-center">
                        @csrf @method('PUT')
                        <input name="name" value="{{ $table->name }}" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
                        <input name="capacity" type="number" value="{{ $table->capacity }}" min="1" max="100" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
                        <select name="assigned_staff_id" required class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
                            @foreach ($staff as $member)
                                <option value="{{ $member->id }}" @selected($table->assigned_staff_id === $member->id)>{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <label class="inline-flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" @checked($table->is_active)> Active</label>
                        <button class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium">Save</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="py-6 text-center text-gray-400">No tables added yet.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
@endsection