@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="dashboard-card">
        <div class="flex-between gap-3 mb-4">
            <h5 class="dashboard-body__title mb-0">@lang('Card Details')</h5>

            <div class="flex-align gap-3">
                <a class="btn btn-outline--secondary btn--sm topup-btn">
                    <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z">
                            </path>
                        </svg>
                    </span>
                    @lang('Topup')
                </a>
            </div>
        </div>
        <div class="card-details-section">
            <div class="v-card-details">
                <x-v-card :name="$card->name" :last4="$card->last4" :expire_month="$card->exp_month" :expire_year="$card->exp_year" :status="$card->status"
                    :brand="$card->brand" :id="$card->card_id" :hide_status="true" :start_color="$card->start_color" :end_color="$card->end_color" />
            </div>
            <div class="card-details-wrapper">
                <div class="card-details__item">
                    <small>@lang('Current Balance')</small>
                    <h6>{{ showAmount($card->spending_limit - $card->current_spend) }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Spending Limit')</small>
                    <h6 class="text-primary">{{ showAmount($card->spending_limit ?? 0) }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Current Spend')</small>
                    <h6 class="text-danger">{{ showAmount($card?->current_spend ?? 0) }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Issued At')</small>
                    <h6>{{ showDateTime($card->created_at, 'd M, Y') }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('City / Postal Code')</small>
                    <h6>{{ $card?->address?->city }} / {{ $card?->address?->postal_code }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Country / State')</small>
                    <h6>{{ $card?->address?->country }} / {{ $card?->address?->state ?? auth()?->user()?->state ?? 'N/A' }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Nickname')</small>
                    <h6>{{ $card?->nickname ?? 'N/A' }}</h6>
                </div>
                <div class="card-details__item">
                    <small>@lang('Card Status')</small>
                    @php echo $card->status_badge @endphp
                </div>

            </div>
        </div>
    </div>

    <div class="dashboard-card mt-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h5 class="dashboard-body__title m-0">@lang('Transactions')</h5>
            <form class="search-group">
                <input type="search" name="search" class="form--control" value="{{ request()->search }}"
                    placeholder="@lang('Search by transactions')">
                <button class="search-group__btn">
                    <i class="las la-search"></i>
                </button>
            </form>
        </div>
        <div class="dashboard-table">
            <table class="table table--responsive--xl">
                <thead>
                    <tr>
                        <th>@lang('Trx')</th>
                        <th>@lang('Transacted')</th>
                        <th>@lang('Amount')</th>
                        <th>@lang('Post Balance')</th>
                        <th class="text-end">@lang('Details')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        <tr>
                            <td>{{ $transaction->trx }}</td>
                            <td>
                                <div>
                                    {{ showDateTime($transaction->created_at) }}
                                    <br>
                                    <strong>{{ diffForHumans($transaction->created_at) }}</strong>
                                </div>
                            </td>
                            <td>
                                <strong
                                    class="text-{{ $transaction->trx_type == '-' ? 'danger' : 'success' }}">{{ $transaction->trx_type }}
                                    {{ showAmount($transaction->amount) }}</strong>
                            </td>
                            <td>{{ showAmount($transaction->post_balance) }}</td>
                            <td class="text-end">{{ $transaction->details }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">
                                <x-empty-table title="No transaction found" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if ($transactions->hasPages())
        <div class="pagination-wrapper">
            {{ $transactions->links() }}
        </div>
    @endif

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

    <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="#" 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">
                                                @foreach ($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 hidden class="payment-item__radio gateway-input"
                                                            id="{{ titleToKey($data->name) }}"
                                                            data-gateway='@json($data)' type="radio"
                                                            name="_gateway" 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>
                                                @endforeach
                                                @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">
                                                    <div class="deposit-info__title">
                                                        <p class="text mb-0">@lang('Amount')</p>
                                                    </div>
                                                    <div class="deposit-info__input">
                                                        <div class="deposit-info__input-group input-group">
                                                            <span
                                                                class="deposit-info__input-group-text">{{ gs('cur_sym') }}</span>
                                                            <input type="text"
                                                                class="form-control form--control amount"
                                                                placeholder="@lang('00.00')"
                                                                value="{{ old('amount') }}" autocomplete="off">
                                                        </div>
                                                    </div>
                                                </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>

    <form action="{{ route('user.topup.store') }}" class="topup-form" id="topup-form" method="POST">
        @csrf
        <input type="hidden" name="from_details" value="1">
        <input type="hidden" name="amount">
        <input type="hidden" name="gateway" />
        <input type="hidden" name="currency" />
        <input type="hidden" name="from_wallet" value="1" />
        <input type="hidden" name="card_id" value="{{ $card->id }}" />
    </form>

    <div class="modal custom--modal fade" id="confirmTopup" tabindex="-1" aria-labelledby="confirmTopupLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="confirmTopupLabel">@lang('Confirm Topup')</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="#" class="confirm-topup-form">
                        <div class="form-group">
                            <label class="form-label">@lang('Amount')</label>
                            <input type="text" required class="form-control form--control wallet-amount"
                                placeholder="@lang('Enter amount')" />
                        </div>

                        <div class="d-flex gap-2 mt-3">
                            <button type="submit"
                                class="btn btn--base btn--sm flex-fill wallet-balance-btn">@lang('Submit')</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="http://js.stripe.com/v3"></script>
    <script>
        $(document).ready(function() {
            const cardId = @json($card->card_id);
            const dbCardId = @json($card->id);

            const stripe = new Stripe(@json(stripePublishableKey()));
            const apiVersion = '2022-08-01';

            $('.show-full-card').on('click', async function(e) {
                e.preventDefault();

                const $button = $(this);
                const $card = $button.closest('.v--card');
                const $numberSpan = $card.find('.v--card__number span');
                const $cvcSpan = $card.find('.v--card__cvc span');
                const $pinSpan = $card.find('.v--card__pin span');
                const last4 = $numberSpan.attr('data-last4');
                const isHidden = Boolean($numberSpan.attr('data-hidden'));
                const $icon = $button.find('i');

                // If card details are visible, hide them
                if (!isHidden) {
                    $numberSpan.text(`**** **** **** ${last4}`).attr('data-hidden', 'true');
                    $cvcSpan.text('***').attr('data-hidden', 'true');
                    $pinSpan.text('****').attr('data-hidden', 'true');
                    $icon.removeClass('fa-eye').addClass('fa-eye-slash');

                    return;
                }

                showPlaceholderContent($numberSpan, $cvcSpan, $pinSpan);

                try {
                    const {
                        number,
                        cvc,
                        pinNumber
                    } = await fetchCardDetails();

                    const formattedNumber = number.replace(/\s/g, '').replace(/(.{4})/g, '$1 ').trim();

                    $numberSpan.text(formattedNumber).removeAttr('data-hidden');
                    $cvcSpan.text(cvc).removeAttr('data-hidden');
                    $pinSpan.text(pinNumber).removeAttr('data-hidden');
                    $icon.removeClass('fa-eye-slash').addClass('fa-eye');
                } catch (error) {
                    $numberSpan.text(`**** **** **** ${last4}`).attr('data-hidden', 'true');
                    $cvcSpan.text('***').attr('data-hidden', 'true');
                    $pinSpan.text('****').attr('data-hidden', 'true');
                }
            });

            async function fetchCardDetails() {
                const cardProvider = "{{ gs('card_provider') }}";

                if (cardProvider === 'strowallet') {
                    const url = "{{ route('user.card.strowallet.details', ':id') }}".replace(':id', cardId);

                    return new Promise((resolve, reject) => {
                        $.get(url, function(data, textStatus) {
                            if (textStatus === 'success') {
                                const card = {
                                    number: data.data.card.card_number,
                                    cvc: data.data.card.cvv,
                                    pin: "****"
                                };
                                resolve(card);
                            } else {
                                reject(new Error('Failed to fetch card details'));
                            }
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            reject(new Error(errorThrown || 'Request failed'));
                        });
                    });
                }

                const {
                    public_nonce,
                    private_nonce
                } = await fetchNonces();
                const {
                    ephemeralKeySecret
                } = await fetchEphemeral(public_nonce);

                const cardResponse = await fetch(
                    `https://api.stripe.com/v1/issuing/cards/${cardId}?` +
                    `ephemeral_key_private_nonce=${private_nonce}&` +
                    'expand[0]=number&expand[1]=cvc&expand[2]=pin.number&safe_expands=true', {
                        method: 'GET',
                        headers: {
                            'Authorization': `Bearer ${ephemeralKeySecret}`,
                            'Stripe-Version': apiVersion,
                            'Content-Type': 'application/json'
                        }
                    }
                );

                if (!cardResponse.ok) {
                    throw new Error('Failed to get card details');
                }

                const {
                    number,
                    cvc,
                    pin
                } = await cardResponse.json();
                const pinNumber = pin.number;

                return {
                    number,
                    cvc,
                    pinNumber
                };
            }

            async function fetchNonces() {
                return new Promise((resolve, reject) => {
                    $.get("{{ route('user.card.nonce.fetch') }}", function(resp) {
                        if (resp && resp.public_nonce && resp.private_nonce) {
                            resolve({
                                public_nonce: resp.public_nonce,
                                private_nonce: resp.private_nonce
                            });
                        } else {
                            reject(new Error("Invalid response from server"));
                        }
                    }).fail(err => reject(err));
                });
            }

            async function fetchEphemeral(public_nonce) {
                const keyResponse = await fetch("{{ route('user.card.ephemeral.keys') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        card_id: cardId,
                        nonce: public_nonce
                    })
                });

                if (!keyResponse.ok) {
                    throw new Error('Failed to get ephemeral key');
                }

                const {
                    ephemeralKeySecret
                } = await keyResponse.json();

                return {
                    ephemeralKeySecret
                };
            }

            function showPlaceholderContent($numberSpan, $cvcSpan, $pinSpan) {
                $numberSpan.html(
                    '<div class="shimmer-wrapper"><span class="shimmer-text">**** **** **** ****</span><div class="shimmer-overlay"></div></div>'
                );
                $cvcSpan.html(
                    '<div class="shimmer-wrapper"><span class="shimmer-text">***</span><div class="shimmer-overlay"></div></div>'
                );
                $pinSpan.html(
                    '<div class="shimmer-wrapper"><span class="shimmer-text">****</span><div class="shimmer-overlay"></div></div>'
                );
            }

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

            $('.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) {
                const gettingAmount = parseFloat($('.getting-amount').attr('data-getting-amount'));

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

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

            $('.topup-btn').on('click', function(e) {
                $('#balanceMiddlewareModal').modal('show');
            });

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

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

            $('#addMoneyModal').on('show.bs.modal', function(e) {});

            $(document).on('input', '.amount', function(e) {
                $('.topup-form').find('[name="amount"]').val($(this).val());
            });

            $(document).on('input', '.wallet-amount', function(e) {
                $('.topup-form').find('[name="amount"]').val($(this).val());
            });

            $('#topup-form').on('submit', function(e) {
                const submitNow = $(this).data('submit-now');

                if (!submitNow) {
                    e.preventDefault();
                    $('#balanceMiddlewareModal').modal('show');
                }
            });

            $('.deposit-form').on('submit', function(e) {
                e.preventDefault();
                $('.topup-form').find('[name="from_wallet"]').val(0);
                $('.topup-form').find('[name="gateway"]').val($('.gateway-input:checked').val());
                $('.topup-form').data('submit-now', true);
                $('.topup-form').submit();
            });

            $('.wallet-balance-btn').on('click', function(e) {
                $('#confirmTopup').modal('show');
                $('.topup-form').find('[name="from_wallet"]').val(1);
                // $('.topup-form').data('submit-now', true);
                // $('.topup-form').submit();
            });

            $('#confirmTopup').on('hidden.bs.modal', function(e) {
                $('#balanceMiddlewareModal').modal('show');
            });

            $('.confirm-topup-form').on('submit', function(e) {
                e.preventDefault();
                $('.topup-form').data('submit-now', true);
                $('.topup-form').submit();
            })

        });
    </script>
@endpush