@extends('layouts.app')
@section('title', 'Manage Tables & Floors')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-xl font-bold">Manage Tables & Floors</h1>
            <p class="text-sm text-ink-muted">Set up as many floors, areas and tables as your venue actually has — nothing here is fixed.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('restaurant.tables.index') }}" class="btn-secondary btn-sm">Back to floor plan</a>
            <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-floor')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add floor</button>
        </div>
    </div>

    @forelse ($floors as $floor)
        <div class="card card-pad space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="font-display font-bold text-base">{{ $floor->name }}</h2>
                <div class="flex gap-1.5">
                    <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-add-area-{{ $floor->id }}')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add area</button>
                    <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-floor-{{ $floor->id }}')">Rename</button>
                    <form method="POST" action="{{ route('restaurant.floors.destroy', $floor) }}" onsubmit="return confirm('Remove floor {{ $floor->name }}? It must have no tables left in it.')">
                        @csrf @method('DELETE')
                        <button class="btn-ghost btn-sm text-danger">Remove</button>
                    </form>
                </div>
            </div>

            @forelse ($floor->areas as $area)
                <div class="pl-4 border-l-2 border-border space-y-2">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold">{{ $area->name }} <span class="text-ink-faint font-normal">({{ $area->tables->count() }} tables)</span></p>
                        <div class="flex gap-1.5">
                            <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-add-table-{{ $area->id }}')"><i data-lucide="plus" class="w-3 h-3"></i> Add table</button>
                            <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-area-{{ $area->id }}')">Rename</button>
                            <form method="POST" action="{{ route('restaurant.areas.destroy', $area) }}" onsubmit="return confirm('Remove area {{ $area->name }}? It must have no tables left in it.')">
                                @csrf @method('DELETE')
                                <button class="btn-ghost btn-sm text-danger">Remove</button>
                            </form>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        @forelse ($area->tables as $table)
                            <div class="flex items-center gap-1.5 pl-3 pr-1.5 py-1 rounded-full border border-border bg-canvas text-xs">
                                <span class="font-semibold">{{ $table->name }}</span>
                                <span class="text-ink-faint">· {{ $table->capacity }} seats</span>
                                <button class="text-ink-faint hover:text-ink px-1" x-on:click="$dispatch('open-modal-edit-table-{{ $table->id }}')"><i data-lucide="pencil" class="w-3 h-3"></i></button>
                                <form method="POST" action="{{ route('restaurant.tables.destroy', $table) }}" onsubmit="return confirm('Remove table {{ $table->name }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-danger/70 hover:text-danger px-1"><i data-lucide="trash-2" class="w-3 h-3"></i></button>
                                </form>
                            </div>

                            <x-modal id="edit-table-{{ $table->id }}" title="Edit {{ $table->name }}">
                                <form method="POST" action="{{ route('restaurant.tables.update', $table) }}" id="edit-table-{{ $table->id }}-form" class="space-y-4">
                                    @csrf @method('PUT')
                                    <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $table->name }}" class="input" required></div>
                                    <div><label class="field-label">Capacity (seats)</label><input type="number" name="capacity" value="{{ $table->capacity }}" min="1" class="input" required></div>
                                    <div>
                                        <label class="field-label">Area</label>
                                        <select name="table_area_id" class="input">
                                            <option value="">Unassigned</option>
                                            @foreach ($floors as $f)
                                                <optgroup label="{{ $f->name }}">
                                                    @foreach ($f->areas as $a)
                                                        <option value="{{ $a->id }}" @selected($table->table_area_id === $a->id)>{{ $a->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                </form>
                                <x-slot:footer>
                                    <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                                    <button form="edit-table-{{ $table->id }}-form" class="btn-primary">Save</button>
                                </x-slot:footer>
                            </x-modal>
                        @empty
                            <p class="text-xs text-ink-faint">No tables in this area yet.</p>
                        @endforelse
                    </div>
                </div>

                <x-modal id="edit-area-{{ $area->id }}" title="Rename area">
                    <form method="POST" action="{{ route('restaurant.areas.update', $area) }}" id="edit-area-{{ $area->id }}-form" class="space-y-4">
                        @csrf @method('PUT')
                        <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $area->name }}" class="input" required></div>
                    </form>
                    <x-slot:footer>
                        <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                        <button form="edit-area-{{ $area->id }}-form" class="btn-primary">Save</button>
                    </x-slot:footer>
                </x-modal>

                <x-modal id="add-table-{{ $area->id }}" title="Add table to {{ $area->name }}">
                    <form method="POST" action="{{ route('restaurant.tables.store') }}" id="add-table-{{ $area->id }}-form" class="space-y-4">
                        @csrf
                        <input type="hidden" name="table_area_id" value="{{ $area->id }}">
                        <div><label class="field-label">Table name</label><input type="text" name="name" class="input" required placeholder="T-12"></div>
                        <div><label class="field-label">Capacity (seats)</label><input type="number" name="capacity" value="4" min="1" class="input" required></div>
                    </form>
                    <x-slot:footer>
                        <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                        <button form="add-table-{{ $area->id }}-form" class="btn-primary">Add table</button>
                    </x-slot:footer>
                </x-modal>
            @empty
                <p class="text-sm text-ink-muted pl-4">No areas on this floor yet — add one to start placing tables.</p>
            @endforelse
        </div>

        <x-modal id="edit-floor-{{ $floor->id }}" title="Rename floor">
            <form method="POST" action="{{ route('restaurant.floors.update', $floor) }}" id="edit-floor-{{ $floor->id }}-form" class="space-y-4">
                @csrf @method('PUT')
                <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $floor->name }}" class="input" required></div>
            </form>
            <x-slot:footer>
                <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                <button form="edit-floor-{{ $floor->id }}-form" class="btn-primary">Save</button>
            </x-slot:footer>
        </x-modal>

        <x-modal id="add-area-{{ $floor->id }}" title="Add area to {{ $floor->name }}">
            <form method="POST" action="{{ route('restaurant.areas.store') }}" id="add-area-{{ $floor->id }}-form" class="space-y-4">
                @csrf
                <input type="hidden" name="floor_id" value="{{ $floor->id }}">
                <div><label class="field-label">Area name</label><input type="text" name="name" class="input" required placeholder="Poolside, Main Hall, Terrace…"></div>
            </form>
            <x-slot:footer>
                <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                <button form="add-area-{{ $floor->id }}-form" class="btn-primary">Add area</button>
            </x-slot:footer>
        </x-modal>
    @empty
        <div class="card card-pad text-center py-12">
            <i data-lucide="building-2" class="w-8 h-8 mx-auto text-ink-faint mb-2"></i>
            <p class="text-sm text-ink-muted mb-3">No floors set up yet. Start with one — e.g. "Ground Floor".</p>
            <button class="btn-primary btn-sm mx-auto" x-on:click="$dispatch('open-modal-add-floor')">Add your first floor</button>
        </div>
    @endforelse

    @if ($unassigned->isNotEmpty())
        <div class="card card-pad space-y-2">
            <h2 class="font-display font-bold text-sm">Unassigned tables</h2>
            <p class="text-xs text-ink-muted">These aren't in any floor/area yet — edit each to place it.</p>
            <div class="flex flex-wrap gap-2">
                @foreach ($unassigned as $table)
                    <div class="flex items-center gap-1.5 pl-3 pr-1.5 py-1 rounded-full border border-border bg-canvas text-xs">
                        <span class="font-semibold">{{ $table->name }}</span>
                        <button class="text-ink-faint hover:text-ink px-1" x-on:click="$dispatch('open-modal-edit-table-{{ $table->id }}')"><i data-lucide="pencil" class="w-3 h-3"></i></button>
                    </div>
                    <x-modal id="edit-table-{{ $table->id }}" title="Edit {{ $table->name }}">
                        <form method="POST" action="{{ route('restaurant.tables.update', $table) }}" id="edit-table-{{ $table->id }}-form" class="space-y-4">
                            @csrf @method('PUT')
                            <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $table->name }}" class="input" required></div>
                            <div><label class="field-label">Capacity (seats)</label><input type="number" name="capacity" value="{{ $table->capacity }}" min="1" class="input" required></div>
                            <div>
                                <label class="field-label">Area</label>
                                <select name="table_area_id" class="input">
                                    <option value="">Unassigned</option>
                                    @foreach ($floors as $f)
                                        <optgroup label="{{ $f->name }}">
                                            @foreach ($f->areas as $a)
                                                <option value="{{ $a->id }}">{{ $a->name }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="edit-table-{{ $table->id }}-form" class="btn-primary">Save</button>
                        </x-slot:footer>
                    </x-modal>
                @endforeach
            </div>
        </div>
    @endif

    <x-modal id="add-floor" title="Add floor">
        <form method="POST" action="{{ route('restaurant.floors.store') }}" id="add-floor-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Floor name</label><input type="text" name="name" class="input" required placeholder="Ground Floor, Rooftop…"></div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-floor-form" class="btn-primary">Add floor</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection