<div class="mt-4 max-w-md" x-data="{ open: false }">

	@isset($label)
		<x-jetstream.label :value="$label" for="toAccount" />
	@else
		<x-jetstream.label for="toAccount" value="{{ __('To account') }}" />
	@endisset

	<div class="relative">

		<!----- When no To account is selected ----->
		@if (!isset($toAccountId) || $search != '')
			<div class="pointer-events-none absolute inset-y-0 left-0 flex pl-3 pt-2">
				<svg class="h-5 w-5 text-theme-light" fill="currentColor" viewBox="0 0 20 20">
					<path clip-rule="evenodd"
							d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
							fill-rule="evenodd" />
				</svg>
			</div>
			<input autocomplete="off"
					class="block w-full rounded-md border border-theme-primary bg-theme-background py-2 pl-10 pr-3 leading-5 placeholder-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-theme-accent focus:ring-theme-accent focus:placeholder-theme-primary sm:text-sm"
					id="searchInput" placeholder="{{ __('Search organization name') }}" type="search"
					wire:model.live.debounce.500ms="search" x-on:blur="$wire.checkValidation()"
					x-on:click.away="open = false" x-on:focus="open = true">

			@if (strlen($search) > 2)
				<ul class="absolute z-50 mt-0 w-full cursor-default overflow-visible rounded-md border border-theme-border bg-white text-sm text-theme-primary shadow-lg"
					x-show="open">
					@forelse ($searchResults as $result)
						<li>
							<a class="ml-2 flex items-center px-3 py-2 hover:bg-gray-100 cursor-pointer"
								wire:click="toAccountSelected({{ $result['accountId'] }})">
								<img class="aspect-square w-12 rounded-full outline outline-1 outline-offset-1 outline-gray-500"
									src="{{ $result['holderPhoto'] }}">
								<div class="ml-3 leading-tight">
									<div class="font-semibold text-theme-primary">
										@if (array_key_exists('holderName', $result))
											@if ($result['holderFullName'] == $result['holderName'])
												{{ $result['holderName'] }}
												<div class="text-2xs font-normal text-theme-muted">
													{{ $result['holderLocation'] }} </div>
											@else
												{{ $result['holderName'] }}
												<div class="text-2xs font-normal text-theme-muted">
													{{ Illuminate\Support\Str::limit($result['holderFullName'] . ', ' . $result['holderLocation'], 35) }}
												</div>
											@endif
										@else
											{{ __('No account holder found') }}
										@endif
									</div>
									<div class="text-theme-primary">
										@if (array_key_exists('accountName', $result))
											{{ __(ucfirst(__('messages.' . strtolower($result['accountName']) . '_account'))) }}
											{{ __('account') }}
										@else
											{{ __('No accounts found') }}
										@endif
									</div>
								</div>
							</a>
						</li>
					@empty
						<li class="px-4 py-4">{{ __('No organization accounts found for') }} "{{ $search }}"</li>
					@endforelse
				</ul>
			@endif

			<!----- When a To account is selected ---->
		@else
			<div
				 class="focus:shadow-outline-blue mt-2 w-full cursor-default rounded-md border border-theme-border bg-white py-2 pl-0 pr-3 leading-5 shadow-sm transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-300 focus:outline-none sm:text-sm">
				<div class="ml-2 flex items-center pl-2">
					<img class="w-12 rounded-full outline outline-1 outline-offset-1 outline-gray-500"
						 src="{{ $toHolderPhoto }}">
					<div class="ml-3 leading-tight">
						<div class="font-semibold" wire:model.live="toHolderName">
							{{ $toHolderName }}
						</div>
						@if ($toHolderFullName == $toHolderName)
							<div class="text-2xs font-normal text-theme-muted"> {{ $toHolderLocation }} </div>
						@else
							<div class="text-2xs font-normal text-theme-muted">
								{{ Illuminate\Support\Str::limit($toHolderFullName . ', ' . $toHolderLocation, 35) }}
							</div>
						@endif
						<div class="text-theme-secondary" wire:model.live="toAccountName">
							{{ __(ucfirst(__('messages.' . strtolower($toAccountName) . '_account'))) }}
						{{ __('account') }}
						</div>
					</div>
					<button class="ml-auto text-theme-secondary hover:text-red-600" type="button"
							wire:click="removeSelectedAccount">
						<x-icon mini name="x-circle" />
					</button>
				</div>
			</div>
		@endif

	</div>
</div>
