<form wire:submit.prevent="showModal">
    @csrf
    <div class="bg-theme-background px-4 py-4 shadow sm:rounded-lg sm:p-6">
        @php
            $hasNoAccounts = false;
            $isAdminProfile = session('activeProfileType') === 'App\Models\Admin';

            if ($isAdminProfile) {
                $hasNoAccounts = true;
            } elseif (getActiveProfile() && method_exists(getActiveProfile(), 'accounts')) {
                $hasNoAccounts = getActiveProfile()->accounts()->notRemoved()->count() === 0;
            }
        @endphp

        @if($hasNoAccounts)
            <div class="mb-6 rounded-lg border border-theme-border bg-theme-surface p-4 text-theme-primary">
                <div class="flex items-center">
                    <div>
                        <h3 class="font-semibold">{{ __('No accounts available') }}</h3>
                        <p class="mt-1 text-sm">
                            @if($isAdminProfile)
                                {{ __('Admin profiles do not have accounts and cannot make payments. Please switch to a different profile to make payments.') }}
                            @else
                                {{ __('Your profile does not have any accounts to make payments from. Please contact an administrator to set up an account.') }}
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        @endif
        <div class="grid grid-cols-6 gap-6">
            <div class="col-span-6 sm:col-span-4">

                <!--- Amount --->
                @livewire('amount', [
                    'maxLengthHoursInput' => timebank_config('maxLengthHoursInput.user'),
                    'hours' => $hours,
                    'minutes' => $minutes,
                    'amount' => $amount,
                ])
                @error('amount')
                    <div class="mb-3 text-sm text-red-700" role="alert">
                        {{ __($message) }}
                    </div>
                @enderror

                <!--- From account --->
                @livewire('from-account')
                @error('fromAccountId')
                    <div class="mb-3 text-sm text-red-700" role="alert">
                        {{ __($message) }}
                    </div>
                @enderror

                <!--- To Account --->
                @livewire('to-account', ['toHolderName' => $toHolderName, 'toAccountId' => $toAccountId])
                @error('toAccountId')
                    <div class="mb-3 text-sm text-red-700" role="alert">
                        {{ __($message) }}
                    </div>
                @enderror

                 <!--- Description --->
                 <div class="mt-4">
                    <label for="description" class="mt-2 block text-sm font-medium text-theme-primary"> {{ __('Description') }}</label>
                    <textarea
                        wire:model.live.debounce.500ms="description"
                        id="description"
                        placeholder=" {{ __('Payment description') }}"
                        rows="5"
                        class="mt-1 placeholder-theme-light focus:ring-theme-accent focus:border-theme-accent block w-full shadow-sm sm:text-sm border-theme-primary rounded-md @error('description') is-invalid @enderror" name="description">
                    </textarea>
                </div>
                @error('description')
                    <div class="mb-3 text-sm text-red-700" role="alert">
                        {{ __($message) }}
                    </div>
                @enderror

                <!--- Transaction type --->
                @livewire('transaction-type-radio', ['type' => $type, 'typeOptions' => $typeOptions])
                @error('transactionTypeSelected.name')
                    <div class="mb-3 text-sm text-red-700" role="alert">
                        {{ __($message) }}
                    </div>
                @enderror

                <!--- Remember payment data checkbox ----->
                <div class="my-4">
                    <x-checkbox id="rememberPaymentData" secondary label="{{ __('Remember payment data for next payment') }}" wire:model="rememberPaymentData"/>
                </div>

            </div>
        </div>
        <div class="text-right">
            <x-jetstream.button type="submit" wire:target="showModal" :disabled="!canActiveProfileCreatePayments()">
                {{ __('Pay') }}
            </x-jetstream.button>
        </div>
    </div>

    <!----Transfer limit error Modal ---->
    <x-jetstream.dialog-modal wire:model.live="modalErrorVisible">
        <x-slot name="title">
            {{ __('Payment limit') }}
        </x-slot>

        <x-slot name="content">
            {{ $limitError }}
        </x-slot>
        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="$toggle('modalErrorVisible')" wire:loading.attr="disabled">
                {{ __('Back') }}
            </x-jetstream.secondary-button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!---- Confirmation Modal ---->
    @if (!$limitError && !empty($transactionTypeSelected))
    <x-jetstream.dialog-modal wire:model.live="modalVisible">
        <x-slot name="title">
            {{ __('Confirm your payment') }}
        </x-slot>

        <x-slot name="content">

            <div class="pb-3 px-3">
                <div class="font-semibold">
                        {{ __('Description') }}
                </div>
                {{ $description }}
            </div>

            <div class="grid grid-cols-3 items-center justify-center gap-8 py-3">
                <!-- Column 1: Images and Vertical Line -->
                <div class="w-full place-items-end">

                    <div class="w-full place-items-end">
                        <!-- From account -->
                        <div class="flex flex-col items-end">
                            <img alt="{{ session('activeProfileName') }}"
                                 class="h-16 w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-2 outline-theme-primary"
                                 src="{{ Storage::url(session('activeProfilePhoto')) }}">
                        </div>
                        <!-- Vertical Line and middle icon -->
                        <div class="flex flex-col items-end">
                            <div class="flex h-6 w-16 justify-center py-1">
                                <div class="h-full w-px bg-theme-primary"></div>
                            </div>
                            <div class="flex h-6 w-16 justify-center">
                                <div
                                     class="flex h-6 w-6 items-center justify-center rounded-full text-theme-primary outline outline-1 outline-offset-1 outline-theme-primary">
                                        <x-icon mini name="{{ $transactionTypeSelected['icon'] }}" />
                                </div>
                            </div>
                            <!-- Arrow Down -->
                            <div class="flex w-16 justify-center py-1">

                                <svg fill="none" height="20" viewBox="0 0 15 20" width="15"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.5 0 L7.5 18 M7.5 18 L0 10 M7.5 18 L15 10" stroke-width="1"
                                          stroke="#4B5563" />
                                </svg>
                            </div>
                        </div>

                        <!-- To account -->
                        <div class="flex flex-col items-end">
                            <img alt="{{ $toHolderName }}"
                                 class="h-16 w-16 rounded-full object-cover outline outline-1 outline-offset-2 outline-theme-primary"
                                 src="{{ $toHolderPhoto }}">
                        </div>
                    </div>
                </div>
                <!-- Column 2: Info Text -->
                <div class="col-span-2 place-items-center">
                    <div class="grid h-16 content-center items-center leading-tight">
                        <div class="font-semibold">
                            {{ session('activeProfileName') }}
                        </div>
                        <div class="text-theme-secondary">
                            {{ __(ucfirst(strtolower($fromAccountName))) }}  {{ __('bank account')}}
                        </div>
                    </div>
                    <div class="grid h-16 mr-12 content-center items-center leading-tight">
                        <div class="font-semibold">
                            {{ tbFormat($amount) }}
                        </div>
                        <div class="text-theme-secondary">
                            {{ __($transactionTypeSelected['label']) }}
                        </div>
                    </div>
                    <div class="grid h-16 content-center items-center leading-tight">
                        <div class="font-semibold">
                            {{ $toHolderName }}
                        </div>
                        <div class="text-theme-secondary">
                            {{ __(ucfirst($toAccountName)) }} {{ __('bank account')}}
                        </div>
                    </div>
                </div>
            </div>
        @if (session('error'))
            <div class="alert alert-danger  text-red-500">
                {{ session('error') }}
            </div>
        @endif
        </x-slot>
        <x-slot name="footer">
            @if (session('error'))
            <x-jetstream.secondary-button wire:click="$toggle('modalVisible')" wire:loading.attr="disabled">
                {{ __('Back') }}
            </x-jetstream.secondary-button>
            @else
            <x-jetstream.secondary-button class="w-32 justify-center" wire:click="$toggle('modalVisible')"
                    wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.button class="ml-3 w-32 justify-center" wire:click="doTransfer()"
                    wire:loading.attr="disabled" :disabled="!canActiveProfileCreatePayments()">
                {{ __('Pay') }}
            </x-jetstream.button>
            @endif
        </x-slot>
    </x-jetstream.dialog-modal>
    @endif

</form>
