@props(['post' => '', 'inputClasses' => '', 'autocomplete' => '', 'placeholder' => '', 'templateResult' => 'false', 'templateSelection' => 'false', 'text' => 'item.name', 'id' => 'item.name'])
<form class="mx-auto"
      @if (!empty($post))
	      action="{{ $post }}"
      @else
	@endif>
	<div id="searchContainer" class="flex max-w-min md:min-w-[25rem] mx-auto">
		<noscript class="flex">
			<input id="search" name="search"
			        class="input input-bordered bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none w-[23rem]" placeholder="{{ $placeholder }}"/>
			<button type="submit" id="select2-btn"
			        class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">
				<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
			</button>
		</noscript>
	</div>
	<div class="flex flex-wrap mt-2 gap-3 mx-auto sm:max-w-[27.5rem] lg:max-w-[55rem] justify-center">
		{{ $slot ?? '' }}
	</div>
</form>
<script type="text/javascript">
	function formatResult(item) {
		if (!{{ $templateResult }} || !item.id) {
			return item.text;
		}
		const selectionText = item.text.split("|");
		if (item.text === selectionText[0]) {
			return item.text;
		}
		return $('<span>' + selectionText[0] + '</br>' + selectionText[1] + '</span>');
	};

	function formatSelection(item) {
		if (!{{ $templateSelection }} || !item.id) {
			return item.text;
		}
		const selectionText = item.text.split("|");
		if (item.text === selectionText[0]) {
			return item.text;
		}
		return $('<span>' + selectionText[0] + '</span>');
	}

	window.addEventListener('load', () => {
		document.getElementById('searchContainer').innerHTML = '<button type="button" x-on:click="$(\'#search\').val(\'\').change();" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-lg rounded-r-none">'
			+ '<i class="fa-solid fa-x fa-xs text-{{ env('ACCENT_COLOR') }}"></i></button>'
			+ '<select id="search" name="search" class="bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-none w-[21rem]"></select>'
			+ '<button type="submit" id="select2-btn" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">'
			+ '<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i></button>';

		$('#search').on('select2:select', function (e) {
			document.getElementById('select2-btn').focus();
		});

		@if(app('request')->input('search'))
		const option = new Option('{{ app('request')->input('search') }}', '{{ app('request')->input('search') }}', true, true);
		$('#search').append(option).trigger('change');
		@endif
		$('#search').select2({
			tags: [],
			placeholder: '{{ $placeholder }}',
			templateResult: formatResult,
			templateSelection: formatSelection,
			ajax: {
				url: '{{ $autocomplete }}',
				dataType: 'json',
				delay: 250,
				processResults: function (data) {
					console.log(data);
					return {
						results: $.map(data, function (item) {
							return {
								text: {!! $text !!},
								id: {{ $id }}
							}
						})
					};
				},
				cache: true
			}
		});
	});
</script>