@props([
    'name' => null,
    'label',
    'type' => 'text',
    'value' => null,
    'prefix' => null,
    'disabled' => false,
    'required' => false,
    'isSelect' => false,
    'options' => [],
    'placeholder' => 'Select an option',
])

@php
    $hasName = filled($name);
    $fieldId = $attributes->get('id', $hasName ? $name : 'field-'.uniqid());
    $inputValue = $hasName ? old($name, $value) : $value;
    $hasError = $hasName && $errors->has($name);
    $inputClasses = 'vpm-field-box__input'
        .($isSelect ? ' vpm-field-box__input--select' : '')
        .(filled($prefix) ? ' vpm-field-box__input--prefix' : '')
        .($hasError ? ' vpm-field-box__input--error' : '');
@endphp

<div class="vpm-field-box">
    <label class="vpm-field-box__label" for="{{ $fieldId }}">
        {{ $label }}@if ($required)<span class="vpm-field-box__required" aria-hidden="true">*</span>@endif
    </label>

    @if ($isSelect)
        <select
            id="{{ $fieldId }}"
            @if ($hasName) name="{{ $name }}" @endif
            class="{{ $inputClasses }}"
            @if ($required) required @endif
            {{ $attributes->except(['class', 'id']) }}
        >
            <option value="" disabled @selected(! filled($inputValue))>{{ $placeholder }}</option>
            @foreach ($options as $optionValue => $optionLabel)
                @php
                    if (is_int($optionValue)) {
                        $optionValue = $optionLabel;
                    }
                @endphp
                <option value="{{ $optionValue }}" @selected((string) $inputValue === (string) $optionValue)>
                    {{ $optionLabel }}
                </option>
            @endforeach
        </select>
    @elseif (filled($prefix))
        <div class="vpm-field-box__control vpm-field-box__control--prefix @if ($hasError) vpm-field-box__control--error @endif">
            <span class="vpm-field-box__prefix">{{ $prefix }}</span>
            <input
                id="{{ $fieldId }}"
                type="{{ $type }}"
                @if ($hasName) name="{{ $name }}" @endif
                value="{{ $inputValue }}"
                @if (filled($placeholder) && $placeholder !== 'Select an option') placeholder="{{ $placeholder }}" @endif
                @disabled($disabled)
                @if ($required) required @endif
                class="{{ $inputClasses }}"
                {{ $attributes->except(['class', 'id']) }}
            >
        </div>
    @else
        <input
            id="{{ $fieldId }}"
            type="{{ $type }}"
            @if ($hasName) name="{{ $name }}" @endif
            value="{{ $inputValue }}"
            @if (filled($placeholder) && $placeholder !== 'Select an option') placeholder="{{ $placeholder }}" @endif
            @disabled($disabled)
            @if ($required) required @endif
            class="{{ $inputClasses }}"
            {{ $attributes->except(['class', 'id']) }}
        >
    @endif

    @if ($hasName)
        @error($name)
            <span class="vpm-field__error" role="alert">{{ $message }}</span>
        @enderror
    @endif
</div>