@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="deposit-card-wrapper mt-0">
        <div class="d-flex justify-content-between align-items-center gap-3">
            <h5>@lang('Topup')</h5>
        </div>

        <div class="row gy-4">
            <div class="col-xl-12">
                <div class="deposit-card">
                    <form action="{{ route('user.topup.store') }}" class="topup-form" id="topup-form" method="POST">
                        @csrf
                        <input type="hidden" name="gateway" />
                        <input type="hidden" name="currency" />
                        <input type="hidden" name="from_wallet" value="1" />

                        <div class="row align-items-end gy-4">
                            <div class="col-xl-5">
                                <p class="deposit-card__title">@lang('Select your card')</p>
                                <select name="card_id" class="form--control select2 select-card" required>
                                    <option value="">@lang('Select your card')</option>
                                    @foreach ($cards as $card)
                                        <option @selected(@request()->card_id == $card->id) value="{{ $card->id }}">{{ $card->name }}({{ $card->nickname }}) -
                                            {{ $card->last4 }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-xl-5">
                                <p class="deposit-card__title">@lang('Amount')</p>
                                <input type="number" class="form--control" name="amount" required>
                            </div>
                            <div class="col-xl-2">
                                <button type="submit" class="btn btn--base w-100">@lang('Pay Now')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="dashboard-card mt-4">
        <div class="card-body">
            @include($activeTemplate . 'user.topup.topup_table')
        </div>
    </div>

    <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">
                                                    <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 href="{{ asset($activeTemplate . 'css/select2.min.css') }}" rel="stylesheet" />
@endpush

@push('script')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
    <script>
        (function($) {
            $(".select2").select2();
            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-form').on('submit', function(e) {
                const submitNow = $(this).data('submit-now');

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

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

            $('#addMoneyModal').on('show.bs.modal', function(e) {
                const amount = $('.topup-form').find('input[name="amount"]').val();
                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');
            });

            $('.topup-form').on('submit', function() {
                $('[name="gateway"]').val($('.gateway-input:checked').val());
            });

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

            $('.wallet-balance-btn').on('click', function(e) {
                $('.topup-form').find('[name="from_wallet"]').val(1);
                $('.topup-form').data('submit-now', true);
                $('.topup-form').submit();
            });
        })(jQuery);
    </script>
@endpush