@props([
    'label',
    'name',
    'required' => false,
    'tooltip' => null,
    'start' => now()->year + 1,
    'end' => now()->year - 75,
])

<div class="form-group">
    <label class="form-label">
        {{ $label }}
        @if($required)
            <span class="text-danger">*</span>
        @endif
    </label>

    <div class="input-group">
        <!-- Calendar Icon -->
        <span class="input-group-text">
            <i class="fa fa-calendar"></i>
        </span>

        <select
            name="{{ $name }}"
            id="{{ $name }}"
            class="form-select @error($name) is-invalid @enderror"
            wire:model.blur="{{ $attributes->get('wire:model') ?? $name }}"
            {{ $attributes->except('wire:model') }}
            @if($tooltip)
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="{{ $tooltip }}"
            @endif
        >
            <option value="">Year</option>

            @foreach(range($start, $end) as $year)
                <option value="{{ $year }}">{{ $year }}</option>
            @endforeach
        </select>
    </div>

    @error($name)
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
</div>