Add select component, and start of switch to use @pa instead of @js/@css

resources/views/components/form/base.blade.php

@@ -0,0 +1,27 @@
+<div class="form-group">
+	@if(isset($label))
+		<label {{ $attributes->only(['class']) }} for="{{ $id ?? $name }}">{{ $label }}</label>
+	@endisset
+	<div class="input-group has-validation">
+		@if(isset($icon) || isset($prepend))
+			{{-- // messes with the icon box, we have rounded corners on the right side
+			<div class="input-group-prepend">
+			--}}
+				<span class="input-group-text">@isset($icon)<i class="bi {{ $icon }}"></i>@endisset @isset($prepend){!! $prepend !!}@endisset</span>
+			{{--
+			</div>
+			--}}
+		@endif
+		{{ $slot }}
+		<span class="invalid-feedback">
+			@error((! empty($old)) ? $old : $name)
+				{{ $message }}
+			@elseif(isset($feedback))
+				{{ $feedback }}
+			@enderror
+		</span>
+	</div>
+	@isset($helper)
+		<span class="input-helper">{{ $helper }}</span>
+	@endif
+</div>

resources/views/components/form/select.blade.php

@@ -0,0 +1,62 @@
+<x-form.base {{ $attributes }}>
+	<input type="hidden" id="{{ $name }}_disabled" name="{{ $name }}" value="" disabled>
+	<select style="width: 80%;" class="form-select @error((! empty($old)) ? $old : $name) is-invalid @enderror" id="{{ $id ?? $name }}" name="{{ $name }}" @required(isset($required)) @disabled(isset($disabled))>
+		@if(empty($value) || isset($addnew) || isset($choose))
+			<option value=""></option>
+			@isset($addnew)
+				<option value="new">{{ $addnew ?: 'Add New' }}</option>
+			@endisset
+		@endif
+
+		@isset($options)
+			@empty($groupby)
+				@foreach($options as $option)
+					@continue(! Arr::get($option,'value'))
+					<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == old($old ?? $name,$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+				@endforeach
+
+			@else
+				@foreach($options->groupBy($groupby) as $group)
+					<optgroup label="{{ $groupby == 'active' ? (Arr::get($group->first(),$groupby) ? 'Active' : 'Not Active') : Arr::get($group->first(),$groupby) }}">
+						@foreach($group as $option)
+							@continue(! Arr::get($option,'value'))
+							<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == old($old ?? $name,$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+						@endforeach
+					</optgroup>
+				@endforeach
+			@endempty
+		@endisset
+	</select>
+</x-form.base>
+
+@pa(select2)
+
+@section('page-scripts')
+	<script type="text/javascript">
+		// Select doesnt support read only so we'll use disable and a new field
+		function {{$id ?? $name}}_readonly(on) {
+			if (on) {
+				$('#{{ $name }}').prop('disabled',true);
+				$('#{{ $name }}_disabled').prop('disabled',false).val($('#{{ $name }}').val());
+
+			} else {
+				$('#{{ $name }}').prop('disabled',false);
+				$('#{{ $name }}_disabled').prop('disabled',true);
+			}
+		}
+
+		$(document).ready(function() {
+			$('#{{ $id ?? $name }}').select2({
+				dropdownAutoWidth: true,
+				width: 'style',
+				@isset($addvalues)
+				tags: true,
+				@isset($placeholder)
+					placeholder: '{{ $placeholder ?? '' }}',
+				@endisset
+				allowClear: true,
+				@endisset
+			});
+		});
+	</script>
+@append