@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="dashboard-body__title m-0">@lang('Issue New Card')</h5>
        <a href="{{ route('user.card.index') }}" class="btn btn--base btn--sm">
            <i class="fas fa-list me-2"></i>
            @lang('All cards')
        </a>
    </div>

    <div class="issue-card-row">
        <form class="issue-card-form">
            <div class="accordion custom--accordion" id="issueFormAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#personalUse" aria-expanded="true" aria-controls="personalUse">
                            @lang('Personal Use')
                        </button>
                    </h2>
                    <div id="personalUse" class="accordion-collapse collapse show" data-bs-parent="#issueFormAccordion">
                        <div class="accordion-body">
                            <div class="form-group">
                                <label for="nickname1" class="form--label">@lang('Nickname')</label>
                                <input type="text" id="nickname1" class="form-control form--control nickname" required />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#forOtherUse" aria-expanded="false" aria-controls="forOtherUse">
                            @lang('For Other')
                        </button>
                    </h2>

                    <div id="forOtherUse" class="accordion-collapse collapse" data-bs-parent="#issueFormAccordion">
                        <div class="accordion-body">
                            @if (isset($existingCardHolders) && count($existingCardHolders) > 0)
                                <div class="choose-cardholder-options">
                                    <div class="choose-cardholder-option">
                                        <input type="radio" name="card_holder_option" value="existing"
                                            id="existing_card_holder" checked hidden />
                                        <label for="existing_card_holder" class="cardholder-label">
                                            <svg class="icon" viewBox="0 0 24 24" fill="none">
                                                <path d="M5 12l5 5L20 7" stroke="currentColor" stroke-width="2"
                                                    fill="none" />
                                            </svg>
                                            @lang('Existing Card Holder')
                                        </label>
                                    </div>
                                    <div class="choose-cardholder-option">
                                        <input type="radio" name="card_holder_option" value="new" id="new_card_holder"
                                            hidden />
                                        <label for="new_card_holder" class="cardholder-label">
                                            <svg class="icon" viewBox="0 0 24 24" fill="none">
                                                <circle cx="12" cy="12" r="10" stroke="currentColor"
                                                    stroke-width="2" />
                                                <line x1="12" y1="8" x2="12" y2="16"
                                                    stroke="currentColor" stroke-width="2" />
                                                <line x1="8" y1="12" x2="16" y2="12"
                                                    stroke="currentColor" stroke-width="2" />
                                            </svg>
                                            @lang('Create New Card Holder')
                                        </label>
                                    </div>
                                </div>

                                <div class="mt-3 existing-cardholder-form row">
                                    <div class="form-group col-lg-6">
                                        <label for="select-cardholder_id" class="form--label">@lang('Select Cardholder')</label>
                                        <select id="select-cardholder_id" class="form--control select3" required>
                                            <option value="" selected>@lang('Select Cardholder')</option>
                                            @foreach ($existingCardHolders as $cardHolder)
                                                <option value="{{ $cardHolder->id }}">{{ $cardHolder->firstname }}
                                                    {{ $cardHolder->lastname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label for="select-nickname" class="form--label">@lang('Nick Name')</label>
                                        <input type="text" class="form--control nickname" />
                                    </div>
                                </div>
                            @endif

                            <div class="row new-cardholder-form mt-3">
                                <div class="col-xxl-6 col-lg-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select-first-name" class="form--label">@lang('First Name')</label>
                                        <input type="text" class="form--control select-first-name" required />
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-lg-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select-last-name" class="form--label">@lang('Last Name')</label>
                                        <input type="text" class="form--control select-last-name" required />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="select-nickname" class="form--label">@lang('Nick Name')</label>
                                        <input type="text" class="form--control nickname" />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="select-email" class="form--label">@lang('Email Address')</label>
                                        <input type="email" class="form--control select-email" required />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="select-date_of_birth" class="form--label">@lang('Date of birth')</label>
                                        <input type="date" class="form--control select-date_of_birth" required />
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="select-phone-number" class="form--label">@lang('Phone Number')</label>
                                        <div class="input-group flex-nowrap">
                                            <span class="input-group-text pe-0">
                                                <select class="form-select select-country border-0 bg-transparent py-0"
                                                    aria-label="Country code">
                                                    @foreach ($countries as $code => $country)
                                                        <option @selected($user->country_code == $code) value="{{ $code }}">
                                                            {{ $code }}</option>
                                                    @endforeach
                                                </select>
                                            </span>
                                            <input type="number" class="form--control select-phone-number" required />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-lg-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select-address" class="form--label">@lang('Address')</label>
                                        <input type="text" class="form--control select-address" required />
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-lg-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select-city" class="form--label">@lang('City')</label>
                                        <input type="text" class="form--control select-city" required />
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-lg-12 col-sm-12">
                                    <div class="form-group mb-sm-0">
                                        <label for="select-state" class="form--label">@lang('State')</label>
                                        <input type="text" class="form--control select-state" required />
                                    </div>
                                </div>
                                <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                    <div class="form-group">
                                        <label for="select-zip" class="form--label required">@lang('Postal Code')</label>
                                        <input type="number" class="form--control select-zip" required />
                                    </div>
                                </div>
                                @if (gs('card_provider') == 'strowallet')
                                    <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                        <div class="form-group">
                                            <label for="select-house-number"
                                                class="form--label required">@lang('House Number')</label>
                                            <input type="number" class="form--control select-house-number"
                                                id="select-house-number" required />
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                        <div class="form-group">
                                            <label for="select-id-type"
                                                class="form--label required">@lang('ID Type')</label>
                                            <select required id="select-id-type" class="form--control select-id-type">
                                                <option value="BVN">BVN</option>
                                                <option value="NIN">NIN</option>
                                                <option value="PASSPORT">PASSPORT</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                        <div class="form-group">
                                            <label for="select-id-number"
                                                class="form--label required">@lang('ID Number')</label>
                                            <input type="number" class="form--control select-id-number" required />
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                        <div class="form-group">
                                            <label for="select-id-image"
                                                class="form--label required">@lang('ID Image')</label>
                                            <input type="file" class="form--control select-id-image"
                                                id="select-id-image" required />
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-12 col-sm-12 mb-sm-0">
                                        <div class="form-group">
                                            <label for="select-user-photo"
                                                class="form--label required">@lang('User Photo')</label>
                                            <input type="file" class="form--control select-user-photo"
                                                id="select-user-photo" required />
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="issue-card-preview">
            <div class="order-card">
                <h6 class="order-card__title">@lang('Your card order')</h6>
                <div class="order-card__thumb">
                    <x-v-card :hide_status="true" :hide_eye="true" />
                </div>
                <form action="#" class="input-amount-form">
                    <div class="input-amount">
                        <input type="number" class="form--control input-amount-field" required />
                        <div class="input-amount__thumb">
                            <img src="{{ asset('assets/images/thumbs/us-1.png') }}" alt="@lang('USD')" />
                            <span class="text">@lang('USD')</span>
                        </div>
                    </div>
                    <div class="balance">
                        <div>
                            <p class="balance__title">@lang('Add money')</p>
                            <span class="balance__text">@lang('Card issue fee')</span>
                            <p class="balance__text">@lang('Total Payment')</p>
                        </div>
                        <div class="text-end">
                            <p class="text-success">{{ gs('cur_sym') }}<span class="getting-amount"
                                    data-getting-amount="0">0.00</span>{{ gs('cur_text') }}</p>
                            <p data-card-issue-fee="{{ getAmount(gs('card_issue_fee')) }}"
                                class="balance__number text-danger">{{ showAmount(gs('card_issue_fee')) }}</p>
                            <p data-total-payment="0" class="balance__number">{{ gs('cur_sym') }}<span
                                    class="total-payment">0.00</span>{{ gs('cur_text') }}</p>
                        </div>
                    </div>
                </form>
                <button class="btn--base pill btn--sm btn w-100" id="addMoneyModalBtn">@lang('Pay & Issue')</button>
            </div>
        </div>
    </div>

    <form class="hidden-form" enctype="multipart/form-data" method="POST"
        action="{{ route('user.card.issue.store') }}">
        @csrf
        <input type="hidden" name="cardholder_id" />
        <input type="hidden" name="house_number" />
        <input type="hidden" name="id_type" />
        <input type="hidden" name="id_number" />
        <input type="hidden" name="id_image" />
        <input type="hidden" name="user_photo" />
        <input type="hidden" name="gateway" />
        <input type="hidden" name="from_wallet" />
        <input type="hidden" name="date_of_birth" />
        <input type="hidden" name="nickname" value="0" />
        <input type="hidden" name="for_me" value="1" />
        <input type="hidden" name="firstname" />
        <input type="hidden" name="lastname" />
        <input type="hidden" name="email" />
        <input type="hidden" name="phone_number" />
        <input type="hidden" name="country" />
        <input type="hidden" name="state" />
        <input type="hidden" name="city" />
        <input type="hidden" name="address" />
        <input type="hidden" name="zip" />
        <input type="hidden" name="currency" />
        <input type="hidden" name="amount" />
    </form>

    <div class="modal fade fade-in-scale custom--modal gateway-modal" id="addMoneyModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">@lang('Payment Methods')</span>
                    <p class="modal-header__text">
                        <span class="modal-header__icon">
                            <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M13.8346 8.66664C13.8346 12 11.5013 13.6666 8.72797 14.6333C8.58274 14.6825 8.42499 14.6802 8.2813 14.6266C5.5013 13.6666 3.16797 12 3.16797 8.66664V3.99997C3.16797 3.82316 3.23821 3.65359 3.36323 3.52857C3.48826 3.40355 3.65782 3.33331 3.83464 3.33331C5.16797 3.33331 6.83464 2.53331 7.99464 1.51997C8.13587 1.39931 8.31554 1.33301 8.5013 1.33301C8.68707 1.33301 8.86673 1.39931 9.00797 1.51997C10.1746 2.53997 11.8346 3.33331 13.168 3.33331C13.3448 3.33331 13.5143 3.40355 13.6394 3.52857C13.7644 3.65359 13.8346 3.82316 13.8346 3.99997V8.66664Z"
                                    stroke="#currentColor" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M6.5 8.00008L7.83333 9.33341L10.5 6.66675" stroke="#currentColor"
                                    stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </span>
                        @lang('Your payment information is safe with us')
                    </p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row justify-content-center">
                        <div class="col-lg-12">
                            <form action="{{ route('user.card.issue.store') }}" method="post" class="deposit-form">
                                @csrf
                                <div class="gateway-card">
                                    <div class="row gy-sm-4 gy-3">
                                        <div class="col-lg-6">
                                            <div class="payment-system-list is-scrollable gateway-option-list">
                                                @forelse ($gatewayCurrency as $data)
                                                    <label for="{{ titleToKey($data->name) }}"
                                                        class="payment-item @if ($loop->index > 4) d-none @endif gateway-option">
                                                        <div class="payment-item__info flex-nowrap">
                                                            <span class="check-type-icon">
                                                                <svg class="check-circle" width="9" height="9"
                                                                    viewBox="0 0 13 10" fill="none"
                                                                    xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M1 5L4.5 8.5L12.5 0.5" stroke="currentColor"
                                                                        stroke-linecap="round" class="check"></path>
                                                                </svg>
                                                            </span>
                                                            <span class="payment-item__name">{{ __($data->name) }}</span>
                                                        </div>
                                                        <div class="payment-item__thumb">
                                                            <img class="payment-item__thumb-img"
                                                                src="{{ getImage(getFilePath('gateway') . '/' . $data->method->image) }}"
                                                                alt="@lang('payment-thumb')" />
                                                        </div>
                                                        <input name="_gateway" class="payment-item__radio gateway-input"
                                                            id="{{ titleToKey($data->name) }}" hidden
                                                            data-gateway='@json($data)' type="radio"
                                                            value="{{ $data->method_code }}" @checked(old('gateway', $loop->first) == $data->method_code)
                                                            data-min-amount="{{ showAmount($data->min_amount) }}"
                                                            data-max-amount="{{ showAmount($data->max_amount) }}" />
                                                    </label>
                                                @empty
                                                    <div class="no-gateway">
                                                        <svg viewBox="0 0 24 24" class="mb-2" width="100"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                                                stroke-linejoin="round"></g>
                                                            <g id="SVGRepo_iconCarrier">
                                                                <path
                                                                    d="M18.04 13.55C17.62 13.96 17.38 14.55 17.44 15.18C17.53 16.26 18.52 17.05 19.6 17.05H21.5V18.24C21.5 20.31 19.81 22 17.74 22H7.63C7.94 21.74 8.21 21.42 8.42 21.06C8.79 20.46 9 19.75 9 19C9 16.79 7.21 15 5 15C4.06 15 3.19 15.33 2.5 15.88V11.51C2.5 9.44001 4.19 7.75 6.26 7.75H17.74C19.81 7.75 21.5 9.44001 21.5 11.51V12.95H19.48C18.92 12.95 18.41 13.17 18.04 13.55Z"
                                                                    stroke="#7099ff" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                                                <path opacity="0.4"
                                                                    d="M2.5 12.4098V7.83986C2.5 6.64986 3.23 5.58982 4.34 5.16982L12.28 2.16982C13.52 1.69982 14.85 2.61985 14.85 3.94985V7.74983"
                                                                    stroke="#7099ff" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                                                <path
                                                                    d="M22.5608 13.9702V16.0302C22.5608 16.5802 22.1208 17.0302 21.5608 17.0502H19.6008C18.5208 17.0502 17.5308 16.2602 17.4408 15.1802C17.3808 14.5502 17.6208 13.9602 18.0408 13.5502C18.4108 13.1702 18.9208 12.9502 19.4808 12.9502H21.5608C22.1208 12.9702 22.5608 13.4202 22.5608 13.9702Z"
                                                                    stroke="#7099ff" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                                                <path opacity="0.4" d="M7 12H14" stroke="#7099ff"
                                                                    stroke-width="1.5" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                                <path
                                                                    d="M9 19C9 19.75 8.79 20.46 8.42 21.06C8.21 21.42 7.94 21.74 7.63 22C6.93 22.63 6.01 23 5 23C3.54 23 2.27 22.22 1.58 21.06C1.21 20.46 1 19.75 1 19C1 17.74 1.58 16.61 2.5 15.88C3.19 15.33 4.06 15 5 15C7.21 15 9 16.79 9 19Z"
                                                                    stroke="#7099ff" stroke-width="1.5"
                                                                    stroke-miterlimit="10" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                                <path d="M6.06922 20.0402L3.94922 17.9302" stroke="#7099ff"
                                                                    stroke-width="1.5" stroke-miterlimit="10"
                                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                                                <path d="M6.04969 17.96L3.92969 20.0699" stroke="#7099ff"
                                                                    stroke-width="1.5" stroke-miterlimit="10"
                                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                                            </g>
                                                        </svg>
                                                        <p class="mt-2">@lang('No Payment Gateway Enabled Yet')</p>
                                                    </div>
                                                @endforelse
                                                @if ($gatewayCurrency->count() > 4)
                                                    <button type="button" class="payment-item__btn more-gateway-option">
                                                        <p class="payment-item__btn-text">@lang('Show All Payment Options')</p>
                                                        <span class="payment-item__btn__icon"><i
                                                                class="fas fa-chevron-down"></i></span>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="payment-system-list p-3">
                                                <div class="deposit-info d-none">
                                                    <input type="hidden" class="amount" name="amount"
                                                        value="{{ old('amount') }}" autocomplete="off" readonly />
                                                </div>
                                                <div class="deposit-info">
                                                    <div class="deposit-info__title">
                                                        <p class="text has-icon"> @lang('Limit')
                                                            <span></span>
                                                        </p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <p class="text"><span
                                                                class="gateway-limit">@lang('0.00')</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="deposit-info">
                                                    <div class="deposit-info__title">
                                                        <p class="text has-icon">@lang('Processing Charge')
                                                            <span data-bs-toggle="tooltip" title="@lang('Processing charge for payment gateways')"
                                                                class="proccessing-fee-info">
                                                                <i class="las la-info-circle"></i>
                                                            </span>
                                                        </p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <p class="text"><span
                                                                class="processing-fee">@lang('0.00')</span>
                                                            {{ __(gs('cur_text')) }}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="deposit-info total-amount pt-3">
                                                    <div class="deposit-info__title">
                                                        <p class="text">@lang('Total')</p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <p class="text"><span
                                                                class="final-amount">@lang('0.00')</span>
                                                            {{ __(gs('cur_text')) }}</p>
                                                    </div>
                                                </div>

                                                <div class="deposit-info gateway-conversion d-none total-amount pt-2">
                                                    <div class="deposit-info__title">
                                                        <p class="text">@lang('Conversion')</p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <p class="text"></p>
                                                    </div>
                                                </div>
                                                <div class="deposit-info conversion-currency d-none total-amount pt-2">
                                                    <div class="deposit-info__title">
                                                        <p class="text">
                                                            @lang('In') <span class="gateway-currency"></span>
                                                        </p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <p class="text">
                                                            <span class="in-currency"></span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="d-none crypto-message mb-3">
                                                    @lang('Conversion with')<span class="gateway-currency"></span>
                                                    @lang('and final value will Show on next step')
                                                </div>
                                                <button type="submit" class="btn btn--base w-100" disabled>
                                                    @lang('Confirm Payment')
                                                </button>
                                                <div class="info-text pt-3">
                                                    <p class="text">@lang('Ensuring your funds grow safely through our secure deposit process with world-class payment options.')</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('Template::user.card.balance_selector')
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/flatpickr.min.css') }}" />
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/flatpickr.js') }}"></script>
@endpush

@push('script')
    <script>
        "use strict";
        (function($) {
            var hasExistingUsers = "{{ boolval(isset($existingCardHolders) && count($existingCardHolders) > 0) }}";

            let flatpickrInstance = null;

            if (hasExistingUsers) {
                $('.new-cardholder-form').hide();
            }

            $('[name="card_holder_option"]').on('change', function() {
                const selected = $(this).val();

                if (selected == 'new') {
                    $('[name="cardholder_id"]').val(null);
                    $('.existing-cardholder-form').hide();
                    $('.new-cardholder-form').fadeIn();
                } else {
                    $('.new-cardholder-form').hide();
                    $('.existing-cardholder-form').fadeIn();
                }
            });

            $('#issueFormAccordion').on('show.bs.collapse', function(e) {
                if (e.target.id == 'forOtherUse') {
                    $('.select3').select2({
                        width: '100%',
                    });
                    $('[name="for_me"]').val(0);
                } else {
                    $('[name="for_me"]').val(1);
                }

                if (!flatpickrInstance) {
                    flatpickrInstance = $('.select-date_of_birth').flatpickr({
                        dateFormat: "Y-m-d"
                    });
                }
            });

            var amount = parseFloat($('.amount').val() || 0);
            var gateway, minAmount, maxAmount;

            $('.input-amount-form').on('submit', function(e) {
                e.preventDefault();
                $(this).next('button').click();
            });

            $('.input-amount-field').on('input', function(e) {
                const $input = $(this);
                const cardIssueFee = parseFloat($('[data-card-issue-fee]').attr('data-card-issue-fee'));
                const $cardIssueFee = $input.val();
                const inputAmount = parseFloat($input.val()) || 0;
                const gettingAmount = Number(Math.max(inputAmount, 0)).toFixed(2);
                const totalPayment = Number(Math.max(inputAmount, 0) + cardIssueFee).toFixed(2);

                $('.getting-amount').attr('data-getting-amount', gettingAmount).text(gettingAmount);
                $('[name="amount"]').val(totalPayment);
                $('[data-total-payment]').attr('data-total-payment', totalPayment).find('.total-payment').text(
                    totalPayment);
            });

            $('.amount').on('input', function(e) {
                amount = parseFloat($(this).val());
                if (!amount) {
                    amount = 0;
                }
                calculation();
            });

            $('.gateway-input').on('change', function(e) {
                gatewayChange();
            });

            function gatewayChange() {
                let gatewayElement = $('.gateway-input:checked');
                let methodCode = gatewayElement.val();

                gateway = gatewayElement.data('gateway');
                minAmount = gatewayElement.data('min-amount');
                maxAmount = gatewayElement.data('max-amount');

                let processingFeeInfo =
                    `${parseFloat(gateway?.percent_charge).toFixed(2)}% with ${parseFloat(gateway?.fixed_charge).toFixed(2)} {{ __(gs('cur_text')) }} charge for payment gateway processing fees`
                $(".proccessing-fee-info").attr("data-bs-original-title", processingFeeInfo);
                calculation();
            }

            gatewayChange();

            $(".more-gateway-option").on("click", function(e) {
                let paymentList = $(".gateway-option-list");
                paymentList.find(".gateway-option").removeClass("d-none");
                $(this).addClass('d-none');
                paymentList.animate({
                    scrollTop: (paymentList.height() - 60)
                }, 'slow');
            });

            function calculation() {
                if (!gateway) return;
                $(".gateway-limit").text(minAmount + " - " + maxAmount);

                let percentCharge = 0;
                let fixedCharge = 0;
                let totalPercentCharge = 0;

                if (amount) {
                    percentCharge = parseFloat(gateway.percent_charge);
                    fixedCharge = parseFloat(gateway.fixed_charge);
                    totalPercentCharge = parseFloat(amount / 100 * percentCharge);
                }

                let totalCharge = parseFloat(totalPercentCharge + fixedCharge);
                let totalAmount = parseFloat((amount || 0) + totalPercentCharge + fixedCharge);

                $(".final-amount").text(totalAmount.toFixed(2));
                $(".processing-fee").text(totalCharge.toFixed(2));
                $("input[name=currency]").val(gateway.currency);
                $(".gateway-currency").text(gateway.currency);

                if (amount < Number(gateway.min_amount) || amount > Number(gateway.max_amount)) {
                    $(".deposit-form button[type=submit]").attr('disabled', true);
                } else {
                    $(".deposit-form button[type=submit]").removeAttr('disabled');
                }

                if (gateway.currency != "{{ gs('cur_text') }}" && gateway.method.crypto != 1) {
                    $('.deposit-form').addClass('adjust-height')

                    $(".gateway-conversion, .conversion-currency").removeClass('d-none');
                    $(".gateway-conversion").find('.deposit-info__input .text').html(
                        `1 {{ __(gs('cur_text')) }} = <span class="rate">${parseFloat(gateway.rate).toFixed(2)}</span>  <span class="method_currency">${gateway.currency}</span>`
                    );
                    $('.in-currency').text(parseFloat(totalAmount * gateway.rate).toFixed(gateway.method.crypto == 1 ?
                        8 : 2))
                } else {
                    $(".gateway-conversion, .conversion-currency").addClass('d-none');
                    $('.deposit-form').removeClass('adjust-height')
                }

                if (gateway.method.crypto == 1) {
                    $('.crypto-message').removeClass('d-none');
                } else {
                    $('.crypto-message').addClass('d-none');
                }
            }

            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
            $('.gateway-input').change();

            $('#addMoneyModalBtn').on('click', function(e) {
                if ($('.accordion-collapse.collapse.show')?.length == 0) {
                    notify('error', `@lang('You must select an option to issue a card')`);
                    return false;
                }

                let isValid = true;
                const issueCardForm = $('.issue-card-form')[0];

                if (issueCardForm) {
                    const issueInputs = issueCardForm.querySelector('.accordion-collapse.collapse.show')
                        ?.querySelectorAll('input');

                    if (issueInputs && $('[name="card_holder_option"]:checked').val() == 'new') {
                        for (const input of issueInputs) {
                            if (!input.checkValidity()) {
                                input.reportValidity();
                                isValid = false;
                                break;
                            }
                        }
                    }
                }

                const amountForm = $('.input-amount-form')[0];

                if (isValid && amountForm) {
                    if (!amountForm.checkValidity()) {
                        amountForm.reportValidity();
                        isValid = false;
                    }
                }

                if (isValid) {
                    $('#balanceMiddlewareModal').modal('show');
                }
            });

            $('.issue-card-form input').on('keydown', function(e) {
                if (e.keyCode == 13) {
                    $('#addMoneyModalBtn').trigger('click');
                }
            });

            $('.gatewayModalBtn').on('click', function(e) {
                $('#balanceMiddlewareModal').modal('hide');
                gatewayModal();
            });

            function gatewayModal() {
                const gettingAmount = parseFloat($('.getting-amount').attr('data-getting-amount'));

                if (gettingAmount < 1) {
                    notify('error', "@lang('Invalid amount input')");
                    return;
                }

                $('#addMoneyModal').modal('show');
            }

            $('#addMoneyModal').on('hidden.bs.modal', function(e) {
                $('.payment-item').removeClass('hidden');
                $('#balanceMiddlewareModal').modal('show');
            });

            $('#addMoneyModal').on('show.bs.modal', function(e) {
                const amount = Number($('span.total-payment').text());
                let notHidden = 1;
                let gatewayRadio = null;

                // filter out gateways based on amount input
                $('#addMoneyModal').find('.payment-item input').each(function(index, element) {
                    const data = JSON.parse($(element).attr('data-gateway'));

                    if (Number(data.max_amount) < amount || Number(data.min_amount) > amount) {
                        $(this).closest('.payment-item').addClass('hidden');
                    } else {
                        if (!gatewayRadio) {
                            gatewayRadio = $(this);
                        }

                        if (notHidden <= 4) {
                            $(this).closest('.payment-item').removeClass('d-none');
                            notHidden++;
                        }
                    }

                    if (gatewayRadio) {
                        gatewayRadio.trigger('click');
                    }
                });

                $('.amount').val(amount).trigger('input');
            });

            $('.hidden-form').on('submit', function(e) {
                const amount = Number($('span.total-payment').text());
                $('[name="cardholder_id"]').val(
                    $('[name="card_holder_option"]').val() == 'new' ? null : $('#select-cardholder_id')
                    .val()
                );
                $('[name="gateway"]').val($('.gateway-input:checked').val());
                $('[name="firstname"]').val($('.select-first-name').val());
                $('[name="date_of_birth"]').val($('.select-date_of_birth').val());
                $('[name="lastname"]').val($('.select-last-name').val());
                $('[name="email"]').val($('.select-email').val());
                $('[name="phone_number"]').val($('.select-phone-number').val());
                $('[name="amount"]').val(amount);
                $('[name="country"]').val($('.select-country').val());
                $('[name="state"]').val($('.select-state').val());
                $('[name="city"]').val($('.select-city').val());
                $('[name="address"]').val($('.select-address').val());
                $('[name="zip"]').val($('.select-zip').val());
                $('[name="nickname"]').val($('.accordion-collapse.collapse.show').find('.nickname').val());

                var isStrowallet = "{{ gs('card_provider') == 'strowallet' }}";

                if (isStrowallet) {
                    $('[name="house_number"]').val($('.select-house-number').val());
                    $('[name="id_type"]').val($('#select-id-type').val());
                    $('[name="id_number"]').val($('.select-id-number').val());

                    const idImage = $('.select-id-image')[0].files[0];
                    const userPhoto = $('.select-user-photo')[0].files[0];

                    if (idImage || userPhoto) {
                        const form = $(this)[0];
                        const formData = new FormData(form);

                        formData.append('id_image', idImage);
                        formData.append('user_photo', userPhoto);
                        e.preventDefault();
                        $.ajax({
                            url: form.action,
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.redirect) {
                                    window.location.href = response.redirect;
                                } else {
                                    console.log(response);
                                }
                            },
                            error: function(xhr) {
                                if (xhr.status == 400) {
                                    notify('error', xhr.responseJSON.message);
                                }
                            }
                        });
                    }
                }
            });

            $('.wallet-balance-btn').on('click', function(e) {
                $('.hidden-form').find('[name="from_wallet"]').val(1);
                $('.hidden-form').submit();
            });

            $('.deposit-form').on('submit', function(e) {
                e.preventDefault();
                $('.hidden-form').find('[name="from_wallet"]').val(0);
                $('.hidden-form').submit();
            });
        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .choose-cardholder-options {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .choose-cardholder-option {
            min-width: max-content;
        }

        .choose-cardholder-option input[type="radio"] {
            display: none;
        }

        .cardholder-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #ccc;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }

        .cardholder-label:hover {
            border-color: #888;
        }

        .cardholder-label .icon {
            width: 24px;
            height: 24px;
            color: #666;
        }

        input[type="radio"]:checked+.cardholder-label {
            border-color: #007bff;
            background-color: #e7f1ff;
            color: #007bff;
        }

        input[type="radio"]:checked+.cardholder-label .icon {
            color: #007bff;
        }

        .select-country {
            width: 100%;
            min-width: 70px;
        }

        .issue-card-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .issue-card-form {
            flex: 1;
        }

        .dashboard .order-card__thumb {
            overflow: auto !important;
        }

        @media screen and (max-width: 1199px) and (min-width: 991px) {

            .issue-card-form {
                flex-basis: 100%;
            }
        }

        @media screen and (max-width: 800px) {
            .issue-card-form {
                flex-basis: 100%;
            }
        }

        .issue-card-preview {
            min-width: 400px;
        }

        @media screen and (max-width: 1199px) and (min-width: 991px) {
            .issue-card-preview {
                flex: 1;
            }
        }

        @media screen and (max-width: 800px) {
            .issue-card-preview {
                flex: 1;
            }
        }

        .no-gateway {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100%;
            justify-content: center;
            margin-bottom: 0;
        }
    </style>
@endpush