@php
    $spaceModel = $space ?? null;
    $layoutRows = old('layouts', $spaceModel
        ? $spaceModel->layouts->map(fn ($l) => [
            'layout_name' => $l->layout_name,
            'capacity' => $l->capacity,
            'is_custom' => $l->is_custom,
            'sort_order' => $l->sort_order,
        ])->all()
        : [['layout_name' => '', 'capacity' => '']]);
    $spaceTypeOptions = $spaceTypes->pluck('name', 'id');
    $statusOptions = collect(\App\Enums\SpaceOperationalStatus::cases())->mapWithKeys(fn ($s) => [$s->value => $s->label()]);
@endphp

<div class="row">
    <div class="col-md-4">
        <x-form.select label="Space Type" name="space_type_id" :options="$spaceTypeOptions" :selected="$spaceModel?->space_type_id" required placeholder="Select type" />
    </div>
    <div class="col-md-4">
        <x-form.input label="Code" name="code" :value="$spaceModel?->code" required maxlength="50" />
    </div>
    <div class="col-md-4">
        <x-form.input label="Name" name="name" :value="$spaceModel?->name" required />
    </div>
    <div class="col-md-6">
        <x-form.input label="Location" name="location" :value="$spaceModel?->location" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Min Capacity" name="min_capacity" type="number" :value="$spaceModel?->min_capacity" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Max Capacity" name="max_capacity" type="number" :value="$spaceModel?->max_capacity" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Standard Rate" name="standard_rate" type="number" step="0.01" :value="$spaceModel?->standard_rate" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Hourly Rate" name="hourly_rate" type="number" step="0.01" :value="$spaceModel?->hourly_rate" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Half Day Rate" name="half_day_rate" type="number" step="0.01" :value="$spaceModel?->half_day_rate" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Full Day Rate" name="full_day_rate" type="number" step="0.01" :value="$spaceModel?->full_day_rate" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Setup (minutes)" name="setup_duration_minutes" type="number" :value="$spaceModel?->setup_duration_minutes" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Breakdown (minutes)" name="breakdown_duration_minutes" type="number" :value="$spaceModel?->breakdown_duration_minutes" min="0" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Opening Time" name="opening_time" type="time" :value="old('opening_time', $spaceModel?->opening_time ? substr((string) $spaceModel->opening_time, 0, 5) : null)" />
    </div>
    <div class="col-md-3">
        <x-form.input label="Closing Time" name="closing_time" type="time" :value="old('closing_time', $spaceModel?->closing_time ? substr((string) $spaceModel->closing_time, 0, 5) : null)" />
    </div>
    <div class="col-md-6">
        <x-form.select label="Operational Status" name="operational_status" :options="$statusOptions" :selected="$spaceModel?->operational_status?->value ?? 'active'" />
    </div>
    <div class="col-12">
        <x-form.textarea label="Description" name="description" :value="$spaceModel?->description" rows="2" />
    </div>
    <div class="col-md-4">
        <x-form.textarea label="Amenities" name="amenities" :value="$spaceModel?->amenities" rows="3" />
    </div>
    <div class="col-md-4">
        <x-form.textarea label="Equipment" name="equipment" :value="$spaceModel?->equipment" rows="3" />
    </div>
    <div class="col-md-4">
        <x-form.textarea label="Terms" name="terms" :value="$spaceModel?->terms" rows="3" />
    </div>
</div>

<hr class="my-4">
<h5 class="mb-3">Seating Layouts</h5>

<div x-data="spaceLayouts(@js($layoutRows))">
    <template x-for="(row, index) in rows" :key="index">
        <div class="border rounded p-3 mb-3 bg-light">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong x-text="'Layout ' + (index + 1)"></strong>
                <button type="button" class="btn btn-sm btn-outline-danger" @click="removeRow(index)" x-show="rows.length > 1">Remove</button>
            </div>
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label required">Layout Name</label>
                    <input type="text" class="form-control" :name="'layouts[' + index + '][layout_name]'" x-model="row.layout_name" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label required">Capacity</label>
                    <input type="number" class="form-control" :name="'layouts[' + index + '][capacity]'" x-model="row.capacity" min="1" required>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="form-check">
                        <input type="hidden" :name="'layouts[' + index + '][is_custom]'" value="0">
                        <input type="checkbox" class="form-check-input" :name="'layouts[' + index + '][is_custom]'" value="1" x-model="row.is_custom">
                        <label class="form-check-label">Custom layout</label>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <button type="button" class="btn btn-outline-primary btn-sm" @click="addRow()">
        <i class="bi bi-plus-lg me-1"></i> Add Layout
    </button>
</div>

@push('scripts')
<script>
function spaceLayouts(initialRows) {
    return {
        rows: initialRows.length ? initialRows : [{ layout_name: '', capacity: '', is_custom: false }],
        addRow() {
            this.rows.push({ layout_name: '', capacity: '', is_custom: false });
        },
        removeRow(index) {
            this.rows.splice(index, 1);
        }
    };
}
</script>
@endpush
