@props(['enums' => null, 'alpineVariable', 'placeholder', 'default' => null, 'functionCall' => null, 'bool' => false, 'boolTrue' => 'True', 'boolFalse' => 'False', 'multiple' => false])
<noscript>
	<select id="{{ $alpineVariable }}" tabindex="0"
	        class="border w-[20rem] bg-zinc-800 border-red-400 placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left text-wrap" {{ $multiple && !$bool ? 'multiple' : '' }}>
		<option
			class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
			value="">{{ $placeholder }}</option>
		@if($bool)
			<option
				class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
				value="{{ $boolTrue }}">{{ $boolTrue }}</option>
			<option
				class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
				value="{{ $boolFalse }}">{{ $boolFalse }}</option>
		@else
			@foreach($enums as $enum)
				<option
					class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
					value="{{ $functionCall ? $enum->$functionCall() : $enum }}">{{ $functionCall ? $enum->$functionCall() : $enum }}</option>
			@endforeach
		@endif
	</select>
</noscript>
<div id="{{ $alpineVariable }}-container">
</div>
<script type="application/javascript">
	window.addEventListener('load', () => {
		document.getElementById('{{ $alpineVariable }}-container').innerHTML = '<div class="dropdown dropdown-hover mx-auto" x-data="{ {{ $alpineVariable }}: {{ !empty(app('request')->input($alpineVariable)) ? json_encode(explode(',', app('request')->input($alpineVariable))) : json_encode([]) }} }">'
			+ '<div class="flex"><input name="{{ $alpineVariable }}" class="hidden" value="" x-bind:value="{{ $alpineVariable }}"/>'
			+ '<label tabindex="0" class="btn w-[11rem] bg-zinc-800 border-red-400 focus:bg-zinc-700 hover:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none normal-case font-normal" x-text="{{ $alpineVariable }}.length != 0 ? ({{ json_encode($multiple) }} ? {{ "'" . $placeholder . " ('" }} + {{ $alpineVariable }}.length + \' picked)\' : {{ $alpineVariable }}.join(\', \')) : {{ "'" . $placeholder . "'" }}"></label>'
			+ '<button type="button" x-on:click="{{ $alpineVariable }} = []" class="btn btn-square bg-zinc-800 border-red-400 hover:bg-zinc-700 rounded-l-none rounded-r-lg max-w-[2rem]">'
			+ '<i class="fa-solid fa-x fa-xs text-red-400"></i></button></div>'
			+ '<ul tabindex="0" class="dropdown-content border menu flex-nowrap shadow rounded-box w-[13rem] bg-zinc-800 border-red-400 placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left">'
			@if($bool)
				+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolTrue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolTrue . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolTrue . '\'];' }}">{{ $boolTrue }}</a></li>'
				+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolFalse . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolFalse . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolFalse . '\'];' }}">{{ $boolFalse }}</a></li>'
			@else
				@foreach($enums as $enum)
					@php
					$optionValue = ($functionCall ? $enum->$functionCall() : $enum);
						if ($multiple) {
	                        $onClick = $alpineVariable . '.includes(\'' . $optionValue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $optionValue . '\'), 1) : ' . $alpineVariable . '.push(\'' . $optionValue . '\');';
						} else {
	                        $onClick = $alpineVariable . '.includes(\'' . $optionValue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $optionValue . '\'), 1) : ' . $alpineVariable . ' = [\'' . $optionValue . '\'];';
	                    }

                        $bindClass = $alpineVariable . '.includes(\'' . $optionValue . '\') ? \'bg-zinc-700\' : \'\';';
					@endphp
					+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-bind:class="{{ $bindClass }}" x-on:click="{{ $onClick }}">{{ $functionCall ? $enum->$functionCall() : $enum }}</a></li>'
			    @endforeach
			@endif
			+ '</ul></div>';
	});
</script>