102 lines
4.3 KiB
PHP
102 lines
4.3 KiB
PHP
<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>
|