{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: _add-modal.blade.php
------------------------------------------------------
Use: The add-bank-account dialog. Carries its own Alpine
     scope so it can live on any page (the bank-accounts
     list and the wallet withdraw flow) and open on the
     `open-add-account` window event.
=====================================================
--}}

@php
    $bankNames = [];

    foreach (\App\Support\BankDirectory::all() as $key => $label) {
        $bankNames[$key] = $label;
    }

    $accountConfig = [
        'bins' => \App\Support\BankDirectory::binMap(),
        'names' => $bankNames,
        'unknown' => __('front.banks.unknown'),
        'strings' => ['confirmAdd' => __('front.bank_accounts.confirm_add')],
    ];
@endphp

<template x-teleport="body">
    <div x-data="bankAccountForm(@js($accountConfig))"
         x-on:open-add-account.window="open = true">
        <div x-cloak x-show="open" x-transition.opacity x-on:keydown.escape.window="open = false"
             class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]" x-on:click.self="open = false">
            <div class="w-full max-w-[440px] rounded-[22px] bg-white p-7 shadow-2xl" x-show="open" x-transition.scale.origin.center>
                <div class="mb-5 flex items-center gap-3">
                    <span class="flex size-[46px] items-center justify-center rounded-[13px] bg-[#efeafb] text-primary-600">
                        <svg class="size-[23px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/></svg>
                    </span>
                    <div>
                        <h3 class="text-lg font-bold">{{ __('front.bank_accounts.modal_title') }}</h3>
                        <p class="mt-0.5 text-[12.5px] text-ink-faint">{{ __('front.bank_accounts.modal_subtitle') }}</p>
                    </div>
                </div>

                <form method="POST" action="{{ route('account.bank-accounts.store') }}" id="bank-account-form"
                      x-on:submit.prevent="submit()">
                    @csrf
                    <input type="hidden" name="card_number" x-bind:value="card">
                    <input type="hidden" name="sheba" x-bind:value="sheba">

                    <label for="bank-card" class="block text-[13px] font-bold">{{ __('front.bank_accounts.card_label') }}</label>
                    <div class="relative mt-2">
                        <input id="bank-card" type="text" inputmode="numeric" dir="ltr"
                               x-model="cardText" x-on:input="onCard($event)"
                               placeholder="{{ __('front.bank_accounts.card_placeholder') }}"
                               class="w-full rounded-xl border-[1.5px] bg-[#fbfbfd] py-3 pl-28 pr-3.5 text-left text-[15px] font-bold tracking-[1px] outline-none transition focus:border-primary-600 focus:bg-white"
                               x-bind:class="cardError ? 'border-secondary-500 bg-secondary-50' : 'border-[#e3e1ec]'">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 rounded-xl bg-[#efeafb] px-2.5 py-1.5 text-xs font-bold text-primary-600"
                              x-show="bankName" x-cloak x-text="bankName"></span>
                    </div>
                    <p class="mt-1.5 text-xs text-secondary-500" x-show="cardError" x-cloak>{{ __('front.bank_accounts.card_error') }}</p>

                    <label for="bank-sheba" class="mt-4 block text-[13px] font-bold">{{ __('front.bank_accounts.sheba_label') }}</label>
                    <div class="mt-2 flex items-stretch overflow-hidden rounded-xl border-[1.5px] bg-[#fbfbfd] transition focus-within:border-primary-600 focus-within:bg-white"
                         x-bind:class="shebaError ? 'border-secondary-500' : 'border-[#e3e1ec]'" dir="ltr">
                        <span class="flex items-center bg-[#f2f0fa] px-3.5 text-sm font-bold text-primary-600">IR</span>
                        <input id="bank-sheba" type="text" inputmode="numeric" dir="ltr"
                               x-model="shebaText" x-on:input="onSheba($event)"
                               placeholder="{{ __('front.bank_accounts.sheba_placeholder') }}"
                               class="min-w-0 flex-1 border-none bg-transparent px-3.5 py-3 text-left text-sm tracking-[1px] outline-none">
                    </div>
                    <p class="mt-1.5 text-xs text-secondary-500" x-show="shebaError" x-cloak>{{ __('front.bank_accounts.sheba_error') }}</p>

                    <div class="mt-5 flex gap-2.5">
                        <button type="button" x-on:click="open = false"
                                class="flex-1 rounded-xl bg-[#f2f0fa] p-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                            {{ __('front.bank_accounts.cancel') }}
                        </button>
                        <button type="submit" x-bind:disabled="! canSubmit() || busy"
                                class="flex-1 rounded-xl bg-primary-600 p-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:bg-[#c9c3e0] disabled:shadow-none">
                            {{ __('front.bank_accounts.submit') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>