<jet-form-section @submitted="submitKyc">

    <div class="form-container form-transactions form-bankacconts" :style="{'maxWidth': '100%'}">
        <!-- form components start -->
        <div v-if="$page.props.user.bank_verified == 0" class="form-components">
            <div class="form-components__title"><h3>{{ $t('Submit KYC') }}</h3></div>
            <div class="form-components__body">
                <div class="form-components__input-text">

                    <div class="form-components__block">
                        <div class="form-components__block-item block-text">
                            <p>{{ $t('You need to provide additional KYC details in order to link a bank account.') }}</p>

                            <p v-if="$page.props.errors.bankAccountKyc && $page.props.errors.bankAccountKyc.common" class="mt-5 text-red-500">{{ $page.props.errors.bankAccountKyc.common }}</p>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.first_name}">
                            <label for="first_name">{{ $t('First Name') }}</label>
                            <input v-model="form.first_name" type="text" id="first_name">
                            <span v-if="form.errors.first_name" class="helper-text">{{ form.errors.first_name }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.last_name}">
                            <label for="last_name">{{ $t('Last Name') }}</label>
                            <input v-model="form.last_name" type="text" id="last_name">
                            <span v-if="form.errors.last_name" class="helper-text">{{ form.errors.last_name }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.phone_number}">
                            <label for="last_name">{{ $t('Phone') }}</label>
                            <input placeholder="(555) 555-5555" @input="acceptNumber" v-model="form.phone_number" type="text" id="phone_number">
                            <span v-if="form.errors.phone_number" class="helper-text">{{ form.errors.phone_number }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.date_of_birth}">
                            <label for="date_of_birth">{{ $t('Date of birth') }}</label>
                            <input v-model="form.date_of_birth" type="date" id="date_of_birth">
                            <span v-if="form.errors.date_of_birth" class="helper-text">{{ form.errors.date_of_birth }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.ssn}">
                            <label for="ssn_number">{{ $t('Social Security Number') }}</label>
                            <input v-model="form.ssn" type="text" id="ssn_number" maxlength="9">
                            <span v-if="form.errors.ssn" class="helper-text">{{ form.errors.ssn }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.street}">
                            <label for="street">{{ $t('Street Address') }}</label>
                            <input v-model="form.street" type="text" id="street" maxlength="120">
                            <span v-if="form.errors.street" class="helper-text">{{ form.errors.street }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.city}">
                            <label for="city">{{ $t('City') }}</label>
                            <input v-model="form.city" type="text" id="city" maxlength="40">
                            <span v-if="form.errors.city" class="helper-text">{{ form.errors.city }}</span>
                        </div>
                    </div>

                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.state}">
                            <label for="state">{{ $t('State') }}</label>
                            <select placeholder="Select state" v-model="form.state" id="registerState" class="p-2 form-control"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District Of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="PR">Puerto Rico</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
                            <span v-if="form.errors.state" class="helper-text">{{ form.errors.state }}</span>
                        </div>
                    </div>


                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.postal}">
                            <label for="postal">{{ $t('Postal Code') }}</label>
                            <input v-model="form.postal" type="text" id="postal" maxlength="5">

                            <span v-if="form.errors.postal" class="helper-text">{{ form.errors.postal }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="form-components__block-item block-button">
                            <button :disabled="form.processing" :class="{ 'opacity-55': form.processing }" class="form-components__block-button">{{ $t('Submit') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="$page.props.user.bank_verified == 2" class="form-components">
            <div class="form-components__title"><h3>{{ $t('Bank Accounts') }}</h3></div>
            <div class="form-components__body">
                <div class="form-components__input-text">

                    <div class="form-components__block">
                        <div class="form-components__block-item block-button" :style="{'maxWidth': '200px'}">
                            <button @click.prevent="launchPlaid" class="form-components__block-button">
                                <span class="components-filter__icon">
                                    <svg v-show="sending" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                    {{ $t('Link Bank Account') }}
                                </span>
                            </button>
                        </div>
                    </div>

                    <div class="form-components__block">
                        <div class="form-components__block-item block-text">
                            <table :class="{'opacity-25' : deleting}" class="w-full whitespace-no-wrap mob-table-bank-accounts">
                                <tr class="text-left font-bold">
                                    <th class="px-6 pt-6 pb-4">{{ $t('Account #') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Name') }}Name</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Type') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Status') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Actions') }}</th>
                                </tr>
                                <tr v-for="account in accounts" :key="account.number">
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">

                                            {{ account.accountNumber }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">

                                            {{ account.accountName }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">

                                            {{ account.accountType }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">
                                            {{ account.accountStatus == "active" ? 'Active' : 'Pending' }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="cursor-pointer px-6 py-4 flex items-center focus:text-indigo-500">
                                            <div class="table-list__link">
                                                <a @click.prevent="deposit(account, 'deposit')" href="#">{{ $t('Deposit') }}</a>
                                                <a @click.prevent="deposit(account, 'withdraw')" href="#">{{ $t('Withdraw') }}</a>
                                                <a @click.prevent="deleteAccount(account)" href="#" class="text-red-500">{{ $t('Delete') }}</a>
                                            </div>
                                        </span>
                                    </td>
                                </tr>
                                <tr v-if="accounts === null || accounts.length === 0">
                                    <td class="border-t" colspan="100">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">
                                            {{ $t('No linked bank accounts found') }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div class="components-filter components-filter__form" v-if="depositState">
                            <form>
                                <div class="components-filter__row">
                                    <div class="components-filter__item">
                                        <text-user-input placeholder="0.00" @keyup.native="(e) => clearInput(e)" @keypress.native="(e) => handleInput(e)" @paste.native.prevent @drop.native.prevent v-model="depositForm.amount" class="components-filter__item" :label="$t('Amount in USD')" />

                                    </div>
                                </div>
                                <div class="components-filter__row">
                                    <div class="components-filter__item">
                                        <button @click.prevent="depositSubmit" v-if="$page.props.user" class="flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">
                                            <span class="components-filter__icon">
                                                <svg v-show="depositSending" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                </svg>
                                                {{ $t('Submit') }}
                                            </span>
                                        </button>
                                        <div class="mt-5" v-if="depositResponse">{{ depositResponse }}</div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section v-if="$page.props.user.bank_verified == 1" class="user-status">
            <div class="user-status__row">
                <div class="user-status__item">
                    <font-awesome-icon class="animate-bounce text-4xl text-yellow-500 mb-5 user-status__icon" icon="clock"></font-awesome-icon>
                    <h2 class="user-status__title">{{ $t('Your KYC request is being reviewed') }}</h2>
                    <p class="mb-8 leading-relaxed">{{ $t('Once we verify your identity, you will be able to link your bank account.') }}</p>
                </div>
            </div>
        </section>

        <section v-if="$page.props.user.bank_verified == 3" class="user-status">
            <div class="user-status__row">
                <div class="user-status__item">
                    <font-awesome-icon class="text-4xl text-red-500 mb-5 user-status__icon" icon="exclamation"></font-awesome-icon>
                    <h2 class="user-status__title">{{ $t('Your KYC request was rejected.') }}</h2>
                </div>
            </div>
        </section>

        <!-- form components end -->
    </div>

    <div class="form-container form-transactions" :style="{'maxWidth': '100%'}">
        <div v-if="$page.props.user.bank_verified == 2" class="form-components">
            <div class="form-components__title"><h3>{{ $t('Transactions') }}</h3></div>
            <div class="form-components__body">
                <div class="form-components__input-text">

                    <div class="form-components__block">
                        <div class="form-components__block-item block-text">
                            <table class="w-full whitespace-no-wrap mob-table-transactions">
                                <tr class="text-left font-bold">
                                    <th class="px-6 pt-6 pb-4">{{ $t('Created at') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Account') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Type') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Amount') }}</th>
                                    <th class="px-6 pt-6 pb-4">{{ $t('Status') }}</th>
                                </tr>
                                <tr v-for="transaction in transactions" :key="transaction.transaction_id">
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">
                                            {{ parseTime(transaction.created)}}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">

                                            {{ transaction.bankAccountName }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span v-if="transaction.transactionType == 'issue'" class="px-6 py-4 flex items-center text-green-500">
                                            {{ $t('Deposit') }}
                                        </span>
                                        <span v-if="transaction.transactionType != 'issue'" class="px-6 py-4 flex items-center text-yellow-500">
                                            {{ $t('Withdraw') }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">

                                            {{ decimal_format(transaction.silaAmount / 100, 2) }} {{ $t('USD') }}
                                        </span>
                                    </td>
                                    <td class="border-t">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">
                                            <badge v-if="transaction.status != 'success'" class="mr-2" type="orange">
                                                {{ $t('Pending') }}
                                            </badge>
                                            <badge v-if="transaction.status == 'success'" class="mr-2" type="green">
                                                {{ $t('Processed') }}
                                            </badge>
                                        </span>
                                    </td>
                                </tr>
                                <tr v-if="transactions === null || transactions.length === 0">
                                    <td class="border-t" colspan="100">
                                        <span class="px-6 py-4 flex items-center focus:text-indigo-500">
                                            {{ $t('No transactions found') }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</jet-form-section>
