<div class="rounded-lg border border-slate-200 p-4" data-field-row>
    <div class="mb-3 flex items-center justify-between">
        <span class="text-xs font-semibold uppercase tracking-wide text-slate-500">Field</span>
        <button type="button" data-remove-field class="text-xs text-red-600 hover:underline">Remove</button>
    </div>
    <div class="grid gap-3 sm:grid-cols-2">
        <div>
            <label class="block text-xs font-medium text-slate-600">Label</label>
            <input type="text" name="fields[{{ $index }}][label]" value="{{ old('fields.'.$index.'.label', $field['label'] ?? '') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
            @error('fields.'.$index.'.label')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            <p data-js-error="fields[{{ $index }}][label]" class="mt-1 text-sm text-red-600 hidden"></p>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600">Type</label>
            <select name="fields[{{ $index }}][type]" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                @foreach(['text' => 'Text', 'textarea' => 'Textarea', 'number' => 'Number', 'date' => 'Date', 'select' => 'Select', 'checkbox' => 'Checkbox'] as $value => $label)
                    <option value="{{ $value }}" {{ old('fields.'.$index.'.type', $field['type'] ?? 'text') === $value ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600">Options (select only)</label>
            <input type="text" name="fields[{{ $index }}][options]" value="{{ old('fields.'.$index.'.options', isset($field['options']) ? implode(', ', $field['options']) : '') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Option A, Option B">
        </div>
        <div class="flex items-end">
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input type="hidden" name="fields[{{ $index }}][required]" value="0">
                <input type="checkbox" name="fields[{{ $index }}][required]" value="1" class="rounded border-slate-300" {{ old('fields.'.$index.'.required', $field['required'] ?? false) ? 'checked' : '' }}>
                Required
            </label>
        </div>
    </div>
</div>
