<div>

    <div class="ml-auto my-6 flex space-x-4">
        <x-jetstream.button wire:click.prevent="openCreateModal()">
            {{ __('New profile') }}
        </x-jetstream.button>
    </div>

    <!-- Edit modal -->
    @if ($showCreateModal)
        <x-jetstream.dialog-modal wire:model.live="showCreateModal" wire:key="showCreateModal">
            <x-slot name="title">
                {{ __('Create a new profile') }}
            </x-slot>
                        
            <x-slot name="content">
                <div class='my-3 text-xl'>
                    <span
                        class="px-3 py-2 text-sm font-normal">
                        {{ $createProfile['name'] ?? ''}}
                    </span>
                </div>

                <div class="flex my-3">
                    <div class="w-1/3">{{ __('Type') }}</div>
                    <div class="flex-1">
                        <x-select :options="$profileTypeOptions" 
                            class="placeholder-gray-300" id="profile_type"
                            option-label="name" option-value="value"
                            placeholder="{{ __('Select a profile type') }}"
                            wire:model.live="createProfile.type" 
                            />
                    </div>
                </div>
                    @if ($createProfile['type'] === 'App\Models\User')
                        <div class="flex my-3">
                            <div class="w-1/3">{{ __('Link to') }} {{ __('bank') }}</div>
                            <div class="flex-1">
                                <x-select :options="$linkBankOptions" 
                                    class="placeholder-gray-300" id="link_bank"
                                    placeholder="{{ __('Select a bank') }}"
                                    wire:model.live="createProfile.linkBank" 
                                    wire:key="link-bank-{{ $createProfile['type'] }}" 
                                    :template="[
                                        'name' => 'user-option',
                                        'config' => ['src' => 'profile_photo_url'],
                                        ]" 
                                    option-label="name" option-value="id" option-description="email"
                                    :min-items-for-search="4"
                                    wire:loading.attr="disabled" wire:target="createProfile"
                                    />
                            </div>
                        </div>
                    @elseif ($createProfile['type'] === 'App\Models\Organization')
                        <div class="flex w-full mb-3 items-center"> 
                            <div class="w-1/3">{{ __('Link to') }} {{ __('bank') }}</div>
                            <div class="flex-1">
                                <x-select :options="$linkBankOptions" 
                                    class="placeholder-gray-300" id="link_bank"
                                    placeholder="{{ __('Select a bank') }}"
                                    wire:model.live="createProfile.linkBank" 
                                    wire:key="link-bank-{{ $createProfile['type'] }}" 
                                    :template="[
                                        'name' => 'user-option',
                                        'config' => ['src' => 'profile_photo_url'],
                                        ]" 
                                    option-label="name" option-value="id" option-description="email"
                                    :min-items-for-search="4"
                                    wire:loading.attr="disabled" wire:target="createProfile"
                                    />
                            </div>
                        </div>
                        <div class="flex w-full items-center"> 
                            <div class="w-1/3">{{ __('Profile manager') }}</div>
                            <div class="flex-1">
                                <x-select :options="$linkUserOptions" 
                                    class="placeholder-gray-300" id="link_user"
                                    placeholder="{{ __('Select a user') }}"
                                    wire:model.live="createProfile.linkUser" 
                                    wire:key="link-user-{{ $createProfile['type'] }}" 
                                    :template="[
                                        'name' => 'user-option',
                                        'config' => ['src' => 'profile_photo_url'],
                                        ]" 
                                    option-label="name" option-value="id" option-description="email"
                                    :min-items-for-search="4"
                                    wire:loading.attr="disabled" wire:target="createProfile"
                                    />
                            </div>
                        </div>
                    @elseif ($createProfile['type'] === 'App\Models\Admin')
                        <div class="flex my-3">
                            <div class="w-1/3">{{ __('Link to user') }}</div>
                            <div class="flex-1">
                            <x-select :options="$linkUserOptions" 
                                class="placeholder-gray-300" id="link_user"
                                option-label="name" option-value="id"
                                placeholder="{{ __('Select a profile type') }}"
                                wire:model.live="createProfile.linkUser" 
                                wire:key="link-user-{{ $createProfile['type'] }}"
                                :template="[
                                    'name' => 'user-option',
                                    'config' => ['src' => 'profile_photo_url'],
                                    ]" 
                                option-label="name" option-value="id" option-description="email"
                                :min-items-for-search="4"
                                wire:loading.attr="disabled" wire:target="createProfile" 
                                />
                            </div>
                        </div>
                    @elseif ($createProfile['type'] === 'App\Models\Bank')
                        <div class="flex my-3">
                            <div class="w-1/3">{{ __('Profile manager') }}</div>
                            <div class="flex-1">
                            <x-select :options="$linkUserOptions" 
                                class="placeholder-gray-300" id="link_user"
                                option-label="name" option-value="id"
                                placeholder="{{ __('Select a profile type') }}"
                                wire:model.live="createProfile.linkUser" 
                                wire:key="link-user-{{ $createProfile['type'] }}"
                                :template="[
                                    'name' => 'user-option',
                                    'config' => ['src' => 'profile_photo_url'],
                                    ]" 
                                option-label="name" option-value="id" option-description="email"
                                :min-items-for-search="4"
                                wire:loading.attr="disabled" wire:target="createProfile" 
                                />
                            </div>
                        </div>
                    @endif
                <hr>
                <div class="flex my-3">
                    <div class="w-1/3 items-center">{{ __('Name') }}</div>
                    <div class="flex-1">
                        <x-input
                            wire:model.lazy="createProfile.name" 
                            />
                    </div>
                </div>
                <div class="flex my-3">
                    <div class="w-1/3 items-center">{{ __('Full name') }}</div>
                    <div class="flex-1 ">
                        <x-input
                            wire:model.lazy="createProfile.full_name" 
                            />
                    </div>
                </div>
                <div class="flex my-3">
                    <div class="w-1/3 items-center">{{ __('Email') }}</div>
                    <div class="flex-1">
                        <x-input
                            wire:model.lazy="createProfile.email" 
                            />
                    </div>
                </div>
            
                {{-- Conditionally show Password Generation and Inputs only for User type --}}
                @if ($createProfile['type'] === 'App\Models\User' 
                        || $createProfile['type'] === 'App\Models\Bank' 
                        || $createProfile['type'] === 'App\Models\Admin')
                    {{-- Checkbox for Password Generation --}}
                    <div class="flex my-3">
                        <div class="w-1/3 items-center">{{ __('Generate password') }}</div>
                        <div class="flex-1">
                            <x-checkbox
                                id="generate_password"
                                label="{{ __('Generate and email a random password') }}"
                                wire:model.lazy="generateRandomPassword"
                                />
                        </div>
                    </div>

                    {{-- Conditional Password Inputs --}}
                    @if (!$generateRandomPassword)
                        <div class="flex my-3">
                            <div class="w-1/3 items-center">{{ __('Password') }}</div>
                            <div class="flex-1">
                                <x-password
                                    wire:model.live="createProfile.password"
                                    />
                            </div>
                        </div>
                        <div class="flex my-3">
                            <div class="w-1/3 items-center">{{ __('Confirm Password') }}</div>
                            <div class="flex-1">
                                <x-password
                                    wire:model.live="createProfile.password_confirmation"
                                    />
                            </div>
                        </div>
                    @endif
                @endif {{-- End conditional block for User type --}}

            
                <div class="flex my-3" wire:init="emitLocationToChildren">
                    <div class="w-1/3 items-center">{{ __('Location') }}</div>
                    <div class="flex-1">
                    @livewire('locations.locations-dropdown', ['hideLabel' => true])
                    @error('country')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                    @enderror
                    @error('division')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                    @enderror
                    @error('city')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                    @enderror
                    </div>
                </div>

                <div class="flex my-3">
                    <div class="w-1/3 items-center">{{ __('Language') }}</div>
                    <div class="flex-1">
                        <x-select :options="$localeOptions" class="placeholder-gray-300" id="language"
                            option-label="label" option-value="lang_code"
                            placeholder="{{ __('Select a language') }}"
                            wire:model.lazy="createProfile.lang_preference"
                            />
                    </div>
                </div>
                

            {{-- <x-errors /> --}}
            </x-slot>
            <x-slot name="footer">
                <div class="" wire:loading wire:target="createProfile">
                    <x-mini-button flat icon="" primary rounded spinner />
                </div>
                <x-jetstream.secondary-button class="ml-3 w-32 justify-center" wire:click="resetForm"
                    wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-jetstream.secondary-button>
                <x-jetstream.button class="ml-3 w-32 justify-center"
                    wire:click.prevent="create()"
                    wire:loading.attr="disabled">
                    {{ __('Save') }}
                </x-jetstream.button>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif
</div>