{{-- Single custom field input. Included from contact-form.blade.php
     once for every CustomField row (both for ungrouped fields at the
     top of the form and for fields inside a collapsible <details>
     group). Receives one variable:
       $field — App\Models\CustomField
     Reads/writes $customFieldValues[$field->key] on the Livewire
     ContactForm component. --}}
<div>
    <label class="block text-sm font-medium text-ink/80 mb-1">
        {{ $field->name }}
        @if($field->required) <span class="text-red-500">*</span> @endif
    </label>

    @php
        // Resolve once so each branch can use them without re-touching $field.
        $key = $field->key;
        $placeholder = $field->placeholder ?: '';
    @endphp

    @if($field->type === 'dropdown' && $field->options)
        <select wire:model="customFieldValues.{{ $key }}"
                class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            <option value="">{{ $placeholder ?: __('Select...') }}</option>
            @foreach($field->options as $opt)
                <option value="{{ $opt }}">{{ $opt }}</option>
            @endforeach
        </select>

    @elseif($field->type === 'multi_select' && $field->options)
        {{-- Native multi-select. Wire-bound to a PHP array; Livewire
             keeps the array in sync as the user picks/unpicks options.
             size=4 keeps the box compact even for long option lists. --}}
        <select wire:model="customFieldValues.{{ $key }}"
                multiple size="4"
                class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            @foreach($field->options as $opt)
                <option value="{{ $opt }}">{{ $opt }}</option>
            @endforeach
        </select>
        <p class="text-[11px] text-muted mt-1">{{ __('Hold Ctrl (⌘ on Mac) to select multiple.') }}</p>

    @elseif($field->type === 'checkbox')
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" wire:model="customFieldValues.{{ $key }}"
                   class="w-4 h-4 text-primary-600 border-border rounded focus:ring-primary-500">
            @if($placeholder)
                <span class="text-sm text-ink/80">{{ $placeholder }}</span>
            @endif
        </label>

    @elseif($field->type === 'long_text')
        <textarea wire:model="customFieldValues.{{ $key }}" rows="4" maxlength="5000"
                  placeholder="{{ $placeholder }}"
                  class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"></textarea>

    @else
        <input type="{{ match($field->type) { 'number' => 'number', 'date' => 'date', 'email' => 'email', 'url' => 'url', 'phone' => 'tel', default => 'text' } }}"
               wire:model="customFieldValues.{{ $key }}"
               placeholder="{{ $placeholder }}"
               class="w-full px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
    @endif

    {{-- Parent-level error catches "required but unselected" on
         multi_select (array|min:1) AND scalar validation failures.
         Individual sub-element errors (e.g. one option > 255 chars)
         would land at `customFieldValues.{key}.0` — @error can't
         wildcard those, so we rely on the parent message. --}}
    @error("customFieldValues.{$field->key}") <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div>