@props([
    'name',
    'label',
    'userValue' => null,
    'type' => 'text',
    'options' => [],
    'wrapperClass' => '',
    'inputClass' => 'mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20',
    'placeholder' => null,
    'max' => null,
    'uppercase' => false,
    'autocomplete' => null,
    'displayValue' => null,
])

@php
    $locked = filled($userValue);
    $value = old($name, $userValue);
    $lockedDisplay = $displayValue ?? match ($type) {
        'date' => $userValue?->format('M d, Y') ?? '—',
        'select' => collect($options)->firstWhere('value', $userValue)['label'] ?? ($userValue ? ucfirst((string) $userValue) : '—'),
        default => filled($userValue) ? $userValue : '—',
    };
    $lockedInputClass = 'mt-1.5 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-600';
@endphp

<div class="{{ $wrapperClass }}">
    <label for="{{ $locked ? $name . '_display' : $name }}" class="block text-sm font-medium text-slate-700">{{ $label }}</label>

    @if($locked)
        <input type="text" id="{{ $name }}_display" value="{{ $lockedDisplay }}" readonly class="{{ $lockedInputClass }}">
        <p class="mt-1 text-xs text-slate-400">Already saved — contact HR to change</p>
    @elseif($type === 'select')
        <select name="{{ $name }}" id="{{ $name }}" class="{{ $inputClass }} js-select2">
            <option value="">Select</option>
            @foreach($options as $option)
                <option value="{{ $option['value'] }}" {{ (string) $value === (string) $option['value'] ? 'selected' : '' }}>
                    {{ $option['label'] }}
                </option>
            @endforeach
        </select>
    @elseif($type === 'date')
        <input type="date" name="{{ $name }}" id="{{ $name }}"
               value="{{ $value instanceof \Carbon\CarbonInterface ? $value->format('Y-m-d') : $value }}"
               @if($max) max="{{ $max }}" @endif
               class="{{ $inputClass }}">
    @else
        <input type="text" name="{{ $name }}" id="{{ $name }}" value="{{ $value }}"
               @if($placeholder) placeholder="{{ $placeholder }}" @endif
               @if($autocomplete) autocomplete="{{ $autocomplete }}" @endif
               @if($name === 'pan_number') data-lpignore="true" data-1p-ignore data-bwignore @endif
               @if($uppercase) class="{{ $inputClass }} uppercase" @else class="{{ $inputClass }}" @endif>
    @endif

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