@php $isEdit = ! empty($form); @endphp

<form method="POST" action="{{ $isEdit ? route('admin.forms.update', $form) : route('admin.forms.store') }}" class="mt-6 max-w-3xl space-y-6">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <div>
        <label class="block text-sm font-medium">Name</label>
        <input type="text" name="name" value="{{ old('name', $form->name ?? '') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <div>
        <label class="block text-sm font-medium">Slug</label>
        <input type="text" name="slug" value="{{ old('slug', $form->slug ?? '') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <div>
        <label class="block text-sm font-medium">Description</label>
        <textarea name="description" rows="2" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('description', $form->description ?? '') }}</textarea>
    </div>
    <div>
        <label class="block text-sm font-medium">Notification Email</label>
        <input type="email" name="settings[notification_email]" value="{{ old('settings.notification_email', $form->settings['notification_email'] ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
    </div>
    <label class="flex items-center gap-2"><input type="checkbox" name="is_active" value="1" @checked(old('is_active', $form->is_active ?? true))> Active</label>
    <label class="flex items-center gap-2"><input type="checkbox" name="settings[multi_step]" value="1" @checked(old('settings.multi_step', $form->settings['multi_step'] ?? false))> Multi-step</label>

    <div x-data="{ fields: {{ json_encode(old('fields', ($form->fields ?? collect())->map(fn($f) => ['id' => $f->id, 'name' => $f->name, 'label' => $f->label, 'type' => $f->type, 'is_required' => $f->is_required, 'options' => ['step' => $f->options['step'] ?? 1, 'choices' => $f->options['choices'] ?? []]])->values())) }} }">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold">Fields</h2>
            <button type="button" @click="fields.push({name:'',label:'',type:'text',is_required:false,options:{step:1}})" class="text-sm text-blue-600">+ Add field</button>
        </div>
        <template x-for="(field, i) in fields" :key="i">
            <div class="mt-4 rounded-lg border border-slate-200 p-4">
                <input type="hidden" :name="'fields['+i+'][id]'" x-model="field.id">
                <div class="grid gap-3 md:grid-cols-2">
                    <input :name="'fields['+i+'][name]'" x-model="field.name" placeholder="Name" class="rounded border px-3 py-2">
                    <input :name="'fields['+i+'][label]'" x-model="field.label" placeholder="Label" class="rounded border px-3 py-2">
                    <select :name="'fields['+i+'][type]'" x-model="field.type" class="rounded border px-3 py-2">
                        @foreach($fieldTypes as $val => $label)<option value="{{ $val }}">{{ $label }}</option>@endforeach
                    </select>
                    <input type="number" :name="'fields['+i+'][options][step]'" x-model="field.options.step" placeholder="Step" class="rounded border px-3 py-2" min="1">
                </div>
                <label class="mt-2 flex items-center gap-2 text-sm"><input type="checkbox" :name="'fields['+i+'][is_required]'" value="1" x-model="field.is_required"> Required</label>
            </div>
        </template>
    </div>

    <button type="submit" class="rounded-lg bg-slate-900 px-6 py-2 text-white">Save</button>
</form>