@extends('frontend::layouts.user')
@section('title')
{{ __('Deposit Now') }}
@endsection
@section('content')
<form action="{{ route('user.deposit.now') }}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-12">
            <div class="site-card">
                <div class="site-card-header">
                    <div class="title">{{ __('Add Money') }}</div>
                    <div class="card-header-links">
                        <a href="{{ route('user.deposit.log') }}" class="card-header-link"><i data-lucide="alert-circle"></i>{{ __('Deposit History') }}</a>
                    </div>
                </div>
                <div class="site-card-body">
                    <div class="step-details-form mb-4">
                        <div class="row">

                            @if(setting('multiple_currency','permission'))
                            <div class="col-xl-4 col-lg-4 col-md-4">
                                <div class="inputs">
                                    <label for="" class="input-label">{{ __('Select Wallet') }}<span class="required">*</span></label>
                                    <select name="wallet_type" class="box-input" id="walletSelect">
                                        <option value="" disabled selected>--{{ __('Select Wallet') }}--</option>
                                        <option value="default" data-currency="{{ setting('site_currency') }}">{{ __('Default Wallet') }}</option>
                                        @foreach ($wallets as $wallet)
                                        <option value="{{ $wallet->id }}" @selected($code==$wallet->currency?->code) data-currency="{{ $wallet->currency?->code }}">{{ $wallet?->currency?->name }} ({{ $wallet?->currency?->code }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @endif

                            <div @class([ 'col-xl-4 col-lg-4 col-md-4'=> setting('multiple_currency','permission'),
                                'col-xl-6 col-lg-6 col-md-6' => !setting('multiple_currency','permission')
                                ])>
                                <div class="inputs">
                                    <label for="" class="input-label">{{ __('Select Gateway') }}<span class="required">*</span></label>
                                    <select name="gateway_code" class="box-input deposit-methods" id="gatewaySelect">
                                        <!-- <option value="" disabled selected>--{{ __('Select Gateway') }}--</option> -->
                                        <option data-logo="{{ asset('front/images/payment_gateway.svg') }}" value="" disabled selected>--{{ __('Select Gateway') }}--</option>
                                        @if(!setting('multiple_currency','permission'))
                                        @foreach ($gateways as $gateway)
                                        <option data-logo="{{ $gateway->logo ? asset($gateway->logo) : $gateway->gateway_logo }}" value="{{ $gateway->gateway_code }}">{{ $gateway->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="input-info-text charge"></div>
                                </div>
                            </div>
                            <div @class([ 'col-xl-4 col-lg-4 col-md-4'=> setting('multiple_currency','permission'),
                                'col-xl-6 col-lg-6 col-md-6' => !setting('multiple_currency','permission')
                                ])>
                                <div class="inputs">
                                    <label for="" class="input-label">{{ __('Enter Amount:') }}<span class="required">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="amount" id="amount" required>
                                        <span class="input-group-text" id="basic-addon1">{{ $currency }}</span>
                                    </div>
                                    <div class="input-info-text min-max"></div>
                                </div>
                            </div>

                            <div class="row manual-row">

                            </div>
                        </div>
                    </div>
                    <div class="site-card">
                        <div class="site-card-header">
                            <div class="title-small">{{ __('Review Details:') }}</div>
                        </div>
                        <div class="site-card-body p-0 overflow-x-auto">
                            <div class="site-custom-table site-custom-table-sm">
                                <div class="contents">
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Amount:') }}</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold amount"> </div>
                                        </div>
                                    </div>
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Charge:') }}</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="red-color fw-bold charge2"></div>
                                        </div>
                                    </div>
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Payment Method:') }}</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold method"></div>
                                        </div>
                                    </div>
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Payment Method Logo') }}:</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold" id="logo"><img class="table-icon" src="" alt=""></div>
                                        </div>
                                    </div>
                                    <div class="site-table-list conversion">
                                        <div class="site-table-col">
                                            <div class="fw-bold">{{ __('Conversion Rate') }}:</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold conversion-rate"></div>
                                        </div>
                                    </div>
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Total') }}:</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold total"></div>
                                        </div>
                                    </div>
                                    <div class="site-table-list">
                                        <div class="site-table-col">
                                            <div class="trx fw-bold">{{ __('Payable Amount') }}:</div>
                                        </div>
                                        <div class="site-table-col">
                                            <div class="fw-bold pay-amount"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button
                        @if(auth()->user()->passcode !== null && setting('deposit_passcode_status'))
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#passcode"
                        @else
                        type="submit"
                        @endif
                        class="site-btn polis-btn"
                        >
                        {{ __('Proceed to payment') }}
                    </button>
                </div>
            </div>
            @if(auth()->user()->passcode !== null && setting('deposit_passcode_status'))
            <div class="modal fade" id="passcode" tabindex="-1" aria-labelledby="passcodeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content site-table-modal">
                        <div class="modal-body popup-body">
                            <button type="button" class="modal-btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <i data-lucide="x"></i>
                            </button>
                            <div class="popup-body-text">
                                <div class="title">{{ __('Confirm Your Passcode') }}</div>
                                <div class="step-details-form">
                                    <div class="row">
                                        <div class="col-xl-12 col-lg-12 col-md-12">
                                            <div class="inputs">
                                                <label for="" class="input-label">{{ __('Passcode') }}<span class="required">*</span></label>
                                                <input type="password" class="box-input" name="passcode" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="action-btns">
                                    <button type="submit" class="site-btn-sm primary-btn me-2">
                                        <i data-lucide="check"></i>
                                        {{ __('Confirm') }}
                                    </button>
                                    <button type="button" class="site-btn-sm red-btn" data-bs-dismiss="modal" aria-label="Close">
                                        <i data-lucide="x"></i>
                                        {{ __('Close') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</form>
@endsection
@section('script')
<script>
    "use strict"

    // Select 2 activation
    function formatState(state) {
        if (!state.id) {
            return state.text;
        }
        var $state = $(
            '<span>' +
            ($(state.element).data('logo') ? '<img src="' + $(state.element).data('logo') + '" class="img-icon"/> ' : '') +
            state.text +
            '</span>'
        );
        return $state;
    };

    initGatewaySelect();

    function initGatewaySelect() {
        $('#gatewaySelect').select2({
            templateResult: formatState,
            templateSelection: formatState,
            minimumResultsForSearch: Infinity,
        });
    }

    $('#walletSelect').select2({
        minimumResultsForSearch: Infinity,
    });

    var globalData;
    var currency = @json($currency);

    $('#walletSelect').on('change', function() {
        "use strict";
        getGateways();
    });


    @if(setting('multiple_currency', 'permission'))
    getGateways();

    function getGateways() {
        var currency = $('#walletSelect').find('option:selected').data('currency');
        var url = '{{ route("user.deposit.get.gateways",":currency") }}';
        url = url.replace(':currency', currency);

        $.get(url, function(response) {
            $('#gatewaySelect').html(response.options);
            initGatewaySelect();
        });
    }
    @endif

    $("#gatewaySelect").on('change', function(e) {
        "use strict"
        e.preventDefault();
        $('.manual-row').empty();

        var code = $(this).val()
        var url = '{{ route("user.deposit.gateway",":code") }}';
        url = url.replace(':code', code);

        $.get(url, function(data) {

            globalData = data;

            if (data.currency === currency) {
                $('.conversion').addClass('d-none');
            } else {
                $('.conversion').removeClass('d-none');
            }

            $('.charge').text('Charge ' + data.charge + ' ' + (data.charge_type === 'percentage' ? ' % ' : currency))
            $('.conversion-rate').text('1' + ' ' + currency + ' = ' + data.rate + ' ' + data.currency);

            $('.method').html('<span class="type site-badge badge-primary">' + data.name + '</span>')
            $('.min-max').text('Minimum ' + data.minimum_deposit + ' ' + currency + ' and ' + 'Maximum ' + data.maximum_deposit + ' ' + currency)
            $('#logo').html(`<img class="table-icon" src='${data.gateway_logo}'>`);
            var amount = $('#amount').val()

            if (Number(amount) > 0) {
                $('.amount').text((amount + ' ' + data.currency));
                var charge = data.charge_type === 'percentage' ? calPercentage(amount, data.charge) : data.charge
                $('.charge2').text(charge + ' ' + currency)
                $('.total').text((Number(amount) + Number(charge)) + ' ' + currency)
            }

            if (data.credentials !== undefined) {
                $('.manual-row').append(data.credentials)
                imagePreview()
            }

        });

        $('#amount').on('keyup', function(e) {
            "use strict"
            var amount = $(this).val()
            $('.amount').text((amount + ' ' + currency));

            var charge = globalData.charge_type === 'percentage' ? calPercentage(amount, globalData.charge) : globalData.charge
            $('.charge2').text(charge + ' ' + currency)

            var total = (Number(amount) + Number(charge));

            $('.total').text(total + ' ' + currency)
            var payTotal = total * globalData.rate + ' ' + globalData.currency;
            $('.pay-amount').text(payTotal)
        })


    });
</script>
@endsection
