<select data-init-select2-myform ...>

<select id="categoryList" data-width="100%"
	class="form-select categoryList"
	data-init-select2-myform
	data-livewire-prop="state.category_id"
	data-placeholder="Select the Category"
	data-min-length="3"
	data-api-url="{{ route('api.category.index') }}"
	data-per-page="20" required>
	<option value="">Select the Category</option>
</select>

<select id="subcategoryList" data-width="100%"
	class="form-select subcategoryList"
	data-init-select2-myform
	data-livewire-prop="state.subcategory_id"
	data-placeholder="Select the SubCategory"
	data-min-length="0"
	data-api-url="{{ route('api.subcategory.index') }}"
	data-dep-selector="#categoryList"
	data-dep-param="category_id"
	data-per-page="20" required>
	<option value="">Select the SubCategory</option>
</select>

@push('scripts')
	<script>
		(() => {
			const DEFAULT_SELECT2_OPTIONS = {
				theme: 'bootstrap-5',
				language: 'pt',
				placeholder: 'Selecione',
				allowClear: true,
				minimumInputLength: 0
			};

			function initializeSelect2($select) {
				if (!$select.length) return;
				if ($select.hasClass('select2-hidden-accessible')) $select.select2('destroy');

				const options = {
					...DEFAULT_SELECT2_OPTIONS
				};

				const apiUrl = $select.data('api-url');
				if (apiUrl) {
					const perPage = Number($select.data('per-page')) || 20;
					const depSelector = $select.data('dep-selector') || $select.data('depSelector');
					const depParam = $select.data('dep-param') || $select.data('depParam') || 'prop_id';

					if (depSelector && depParam) {
						options.ajax = {
							url: apiUrl,
							dataType: 'json',
							delay: 250,
							data: params => {
								const payload = {
									term: params.term || '',
									page: params.page || 1,
									per_page: perPage,
								};

								if (depSelector) {
									const depVal = $(depSelector).val();
									if (depVal !== undefined && depVal !== null && depVal !== '') {
										payload[depParam] = depVal;
									}
								}
								return payload;

							}

						};

					} else {

						options.ajax = {

							url: apiUrl,
							dataType: 'json',
							delay: 250,
							data: params => ({
								term: params.term || '',
								page: params.page || 1,
								per_page: perPage
							})
						}
					}
				}

				if ($select.data('placeholder') !== undefined) options.placeholder = $select.data('placeholder');
				if ($select.data('min-length') !== undefined) options.minimumInputLength = Number($select.data(
					'min-length'));

				$select.select2(options);

				$(document).off('select2:open.s2min').on('select2:open.s2min', () => {
					document.querySelector('.select2-search__field')?.focus();
				});

				const livewireProp = $select.data('livewire-prop');
				if (livewireProp) $select.off('change.s2min').on('change.s2min', function() {
					@this.set(livewireProp, $(this).val());
				});
			}

			function scanForSelect2(context = document) {
				$('[data-init-select2-document-form]', context).each(function() {
					initializeSelect2($(this));
				});
			}

			document.addEventListener('DOMContentLoaded', () => scanForSelect2());
			document.addEventListener('livewire:load', () => {
				Livewire.hook('message.processed', () => scanForSelect2());
			});

			window.initSelect2 = scanForSelect2;
			window.initializeSelect2DocumentForm = initializeSelect2;

			$('#categoryList').on('change', () => {
				$('#subcategoryList').val(null).trigger('change');
			});
		})();
	</script>

	<script>
		window.addEventListener('prefill-select2-document-form', (e) => {
			setTimeout(() => {
				const {
					selector,
					id,
					text
				} = e.detail || {};
				if (!selector || id == null) return;
				const $el = $(selector);

				if ($el.find("option[value='" + id + "']").length === 0) {
					var newOption = new Option(text, id, true, true);
					$el.append(newOption).trigger('change');
				} else {
					$el.val(id).trigger('change');
				}
			}, 100);
		});
	</script>
@endpush