{{--
    Form field with label and error message.
    type: text | email | tel | number | textarea | select (pass :options) | radio-group (pass :options) | file (pass accept=".pdf,.doc")
--}}
@props([
    'name',
    'label',
    'type' => 'text',
    'required' => false,
    'options' => [],
    'placeholder' => '',
    'hint' => null,
    'autocomplete' => null,
    'value' => null, // default choice for a select, used when there is no old input
    'accept' => null, // file types offered by a file field's picker
])

@php
    $id = 'f-'.$name;
    $hasError = $errors->has($name);
    $errorClass = $hasError ? '!border-red-500' : '';
@endphp

<div {{ $attributes->only('class') }}>
    @if ($type === 'radio-group')
        <fieldset>
            <legend class="mb-1 block text-sm font-medium text-slate-800">{{ $label }} @if ($required)<span class="text-red-600" aria-hidden="true">*</span>@endif</legend>
            <div class="flex flex-wrap gap-4">
                @foreach ($options as $option)
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="radio" name="{{ $name }}" value="{{ $option }}" @checked(old($name) === $option) @required($required)>
                        {{ $option }}
                    </label>
                @endforeach
            </div>
        </fieldset>
    @else
        <label for="{{ $id }}" class="mb-1 block text-sm font-medium text-slate-800">
            {{ $label }} @if ($required)<span class="text-red-600" aria-hidden="true">*</span>@endif
        </label>

        @if ($type === 'textarea')
            <textarea id="{{ $id }}" name="{{ $name }}" rows="4" placeholder="{{ $placeholder }}"
                      @required($required) @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                      class="form-input {{ $errorClass }}">{{ old($name) }}</textarea>
        @elseif ($type === 'select')
            <select id="{{ $id }}" name="{{ $name }}" @required($required)
                    @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                    class="form-input {{ $errorClass }}">
                <option value="">Select...</option>
                @foreach ($options as $option)
                    <option value="{{ $option }}" @selected(old($name, $value) === $option)>{{ $option }}</option>
                @endforeach
            </select>
        @elseif ($type === 'file')
            {{-- A file can never be refilled after a failed submit, so there is no value. --}}
            <input id="{{ $id }}" type="file" name="{{ $name }}" accept="{{ $accept }}" @required($required)
                   @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                   class="form-input {{ $errorClass }}">
        @else
            <input id="{{ $id }}" type="{{ $type }}" name="{{ $name }}" value="{{ old($name) }}"
                   placeholder="{{ $placeholder }}" @required($required)
                   @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
                   @if ($type === 'tel') inputmode="numeric" @endif
                   @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                   class="form-input {{ $errorClass }}">
        @endif
    @endif

    @if ($hint)
        <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
    @endif

    @error($name)
        <p id="{{ $id }}-error" class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>