@php $pageContent = getContent(config('settings')->active_template, 'recharge.content', true); @endphp

@extends($activeTemplate.'layouts.dash')
<?php $amountList = [3500,10000,25000,40000,50000,100000,200000,400000,500000,750000,900000,1000000]; ?>
@push('style')
	<link rel="stylesheet" href="/assets/css/recharge.css{{$catch}}" />
@endpush

@section('content')
    <div class="top" style="background: none;">
        <div data-href="{{ route('user.home') }}" class="linkBTN" style="float:left; line-height:46px;width:50%; height:46px;cursor:pointer;" id="btnClose">
            <i class="layui-icon" style=" color:#fff; margin-left:12px; font-size:18px;  font-weight:bold;"></i>
        </div>
        <div class="topname" id="topname1" style="line-height: 50px; font-weight: bold; color: #fff;">Recharge</div>
        <div data-href="{{ route('user.deposit.history') }}" class="linkBTN" style="float:right; text-align:right; line-height:46px;width:50%;" id="log">
            <img src="/assets/images/iconlog.png" style="height: 27px;  margin-right: 10px; margin-bottom: 2px; border-radius: 50px;">
        </div>
    </div>

    <div style=" max-width:450px; margin:0 auto; position:relative;">
        <div style=" height:auto; overflow:hidden;">
            <div style="width: 100%; margin: 0 auto; background: #f1f1f1; ">
                <img src="{{ getImage( 'assets/images/frontend/recharge/' .@$pageContent->data_values->backgroud, '1080x1035') }}" style="width:100%;">
                <div style="width: 95%; position: absolute; left: 2.5%; top: 160px; margin-top: 5px; padding-bottom: 3px; border-radius: 2px; height: auto; overflow: hidden;">
                    <div style="position: absolute;margin-top: 10px;height: 25px;display: block;top: -14px;right: 10px;font-weight: 900;" id="FreeUi">
                        <span style="color:#ff6a00;"><font id="withdrawal_t23">Fund balance</font>：{{ $currency['cur_sym'] }}{{ showAmount($userBalance) }}</span>
                    </div>
					
                    <div id="cards1" style="width: 100%; margin: 0 auto; display: none; background: #f1f1f1; margin-top: 0px; padding-top: 0px; padding-bottom: 20px; border-radius: 5px; height: auto; overflow: hidden;">
                        <div style="padding-left:10px; padding-bottom:10px; margin-top:10px; font-weight:bold; ">
							<span style="color:#000;" id="_recharge_t7">Transfer Information</span> 
							<span style="font-size:12px; color:#ff6a00; font-weight:100; "></span>
						</div>
                        <div id="cards2">
                            <div style="text-align: center; width: 98%; margin: 0 auto; margin-bottom: 15px; ">
                                <div class="inputdiv">
                                    <div style="width:60px;text-align:right;" id="_recharge_t8">Payee</div>
                                    <input type="text" value="3ke ejek4" id="cardname" readonly="readonly" style="font-size:12px; color:#777; text-align:center;" class="layui-input" autocomplete="off">
                                    <button style="font-size: 12px; color: #0094ff; width: auto; height: 37px; border: 0px; background: #fff; font-weight: bold; " id="copy1" data-clipboard-text="1">Copy</button>
                                </div>
                            </div>

                            <div style="text-align: center; width:98%; margin:0 auto; margin-bottom:15px; ">
                                <div class="inputdiv">
                                    <div style="width: 60px; text-align: right;" id="_recharge_t9">Bank</div>
                                    <input type="text" value="slsk djd" id="carduname" readonly="readonly" style="font-size: 12px; color: #777; text-align: center; " class="layui-input" autocomplete="off">
                                    <button style="font-size: 12px; color: #0094ff; width: auto; height: 37px; border: 0px; background: #fff; font-weight: bold; " id="copy2" data-clipboard-text="2">Copy</button>
                                </div>
                            </div>

                            <div style="text-align: center; width:98%; margin:0 auto; margin-bottom:15px; ">
                                <div class="inputdiv">
                                    <div style="width: 60px; text-align: right;" id="_recharge_t10">Account</div>
                                    <input type="text" value="bank name" id="account" readonly="readonly" style="font-size: 12px; color: #777; text-align: center; " class="layui-input" autocomplete="off">
                                    <button style="font-size: 12px; color: #0094ff; width: auto; height: 37px; border: 0px; background: #fff; font-weight: bold; " id="copy3" data-clipboard-text="3">Copy</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="width: 100%; margin: 0 auto; padding-top: 10px;  border-radius: 5px; height: auto; overflow: hidden; ">
						<div>
							<div style="width: 100%; margin: 0 auto; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; height: auto; overflow: hidden; ">
								<div style="padding-left:5px; padding-bottom:10px;">
									<font style="font-weight: bold; color: #fff;">Recharge amount</font>
									<font style="color:#fff;" class="small-font">（ Minimum ₦ 2,000 ）</font>
								</div>
							</div>
							<div class="layui-form-item" style="padding-bottom: 10px; height: auto; overflow: hidden; ">
								<div style="width: 98%; margin: 0 auto; height: auto; overflow: hidden; " id="amountlist">
									@foreach($amountList as $amount )
									<button data-role="amount-tip" data-value="{{$amount}}" style="width:24%; float:left;margin-left:1%; margin-top:10px;background:none; text-align:center;cursor:pointer; border:0px;" class="item ">
										<div style="border: 1px solid #000; padding:7px;  color:#000; padding-left:0px; padding-right:0px; border-radius: 5px;">
											<i class="layui-icon " style="font-size:12px;"></i> {{$amount}}
										</div>
									</button>
									@endforeach
								</div>
							</div>
							<input type="hidden" name="recharge_currency" value="{{ $currency['cur_text'] }}">
							@csrf
							
						</div>

                        <div style="text-align: center; width: 98%; margin: 0 auto; margin-bottom: 15px; margin-top: 15px; height: auto; overflow: hidden; ">
                            <div class="inputdiv" style="height: auto; overflow: hidden;">
                                <div style="width: 40px; color: #000; background: #fff;"><img src="/assets/images/money-i.png" style="width:24px;margin-left:5px"></div>
                                <input type="number" id="recharge-input" maxlength="7" oninput="if(value.length&gt;7)value=value.slice(0,7)" style="font-size: 14px; padding-left:10px; color: #000;  background: #fff;" placeholder="Please enter the recharge amount" class="layui-input rchAmount" autocomplete="off">
                                <div style="width: 30px; color: #000; background: #fff;">{{ config('settings')->cur_sym}}</div>
                            </div>
                        </div>
                    </div>

					<div class="layui-form-item" style="padding-bottom: 10px; height: auto; overflow: hidden; ">
						<div style="padding-left: 10px; padding-top: 10px; font-weight: bold; color: #000; height: auto; overflow: hidden;">Recharge channel</div>
						<div style="width: 98%; margin: 0 auto; height: auto; overflow: hidden; " id="paylist">
							@foreach($gatewayCurrency as $key => $gateway)
							<button style="width:32.2%; float:left;margin-left:1%; margin-top:10px;  border-radius: 5px;text-align:center;cursor:pointer;" class="payitem channelitem" data-curname="{{ $gateway->currency }}" data-currency="{{ $gateway->symbol }}" data-method="{{ $gateway->method_code }}" data-min="{{ getAmount($gateway->min_amount) }}" data-max="{{ getAmount($gateway->max_amount) }}">
								<div style="font-size:12px;padding:10px; padding-left:0px; padding-right:0px;">
									<i class="layui-icon " style="font-size:12px;"></i> {{ $gateway->name }}
								</div>
							</button>
							@endforeach
						</div>
					</div>

                    <div style="width: 100%; margin: 0 auto; background: none; padding-bottom: 15px; height: auto; overflow: hidden; ">
                        <div style="text-align: center; width: 98%; margin: 0 auto; margin-bottom: 15px; margin-top: 35px; height: auto; overflow: hidden;">
                            <button class="layui-btn" id="recharge-btn" style="width: 60%; font-weight: bold; font-size: 14px; color: #fff; height: 45px; line-height: 45px; border-radius: 100px; border: 0px; background: #000; " type="button" value="Recharge now">
                                RECHARGE NOW
                            </button>
                        </div>
                    </div>
					
                    <div style="width: 100%; margin: 0 auto; background: none; margin-top: 10px; height: auto; overflow: hidden;">
                        <div style="width: 98%; margin: 0 auto; padding-bottom: 60px; border-radius: 3px; background: none; ">
                            <div style="height:35px; line-height:35px; text-align:left;">
								<span style="margin-left:5px; color:#000; font-weight:bold;font-size: 18px;">Recharge Instructions</span>
							</div>
                            <div style="text-align: justify; padding: 20px 5px; padding-top: 0px; height: auto; overflow: hidden; color: #999;" id="payinfo">
							{!! @$pageContent->data_values->description !!}
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('script')
<script src="{{ asset('assets/js/recharge-amount.js') }}{{ $catch}}"></script>

<script>
	var min = 0, max = 0, channel = false, curName = '', currency = "{{ config('settings')->cur_sym }}"; 

	var payChannel = document.querySelectorAll(".channelitem");
		payChannel.forEach(payLink => {
		payLink.addEventListener('click', (e) => {
		let data = e.currentTarget.dataset;
		min = parseFloat(data.min); max = parseFloat(data.max);curName= data.curname;
		channel = data.method; //currency = data.currency;
		
		//remove all active styles
		payChannel.forEach(payLink => {
			payLink.classList.remove('active');        
		});
		e.currentTarget.classList.add('active');
		
	  }, false);
	});

    $("#recharge-btn").click(function() {
        var amount = parseFloat($('.rchAmount').val());
        var token = document.querySelector('input[name="_token"]').value;

        var is_status = true;

        if (!amount) {
            modalMessage("Please enter the amount");
            is_status = false; return false;
        }

        if (!channel) {
            modalMessage("Select a payment channel to use");
            is_status = false; return false;
        }

        if (amount < min || amount > max) {
            modalMessage("Opps!! The amount range is " +currency+min+" to "+currency+max+" for "+curName+" payment");
            is_status = false; return false;
        }
		
        if (is_status) {
            $.ajax({
                type: "POST",
                url: "{{ route('user.deposit.insert') }}",
                data: {
                    amount: amount,
                    method: channel,
                    _token: token
                },
                beforeSend: function() {
					loading.showLoading({type: 2,tip: "Wait ..."});
                },
                success: function(data) {
                    loading.hideLoading();
                    modalMessage(data.message);
                    modalMessage(data.message, 200, data.link);
                },
                error: function(xhr, status, error) {
                    var responseText = JSON.parse(xhr.responseText);
					
                    loading.hideLoading();
					if(responseText.link){
                        modalMessage(responseText.message, 400, responseText.link);
					}else{
						modalMessage(responseText.message);
					}
                },
                fail: function() {
                    loading.hideLoading();
                    modalMessage("Request Failed");
                }
            });
        }
        return false;
    })
</script>
@endpush
