@extends($activeTemplate.'layouts.users')

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

@section('content')
	<div class="navbar" style="background:transparent">
		<span style="cursor: pointer;" onclick="onJump(&#39;{{ route('user.deposit.history') }}&#39;)"><i></i></span>
		<span></span>
		<span></span>
	</div>

	<div style="">
		<div style="width: 100%; margin: 0 auto; text-align: center;  position: relative; height: auto; overflow: hidden; background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgb(221 170 170));">
			<img src="{{ asset('assets/images/others.png') }}" style=" width:100%;">
		</div>
		<div class="about" style="padding:10px;"></div>
	</div>

    <div class="recharge-wrap">
        <div class="centnen">
			<div class="wrap">
			
                <div class="tips-box">
                    <h2>
                        <img src="{{ asset($activeTemplateTrue.'img/ic_help@2x.png') }}" alt=""> Complete your deposit and wait.
                    </h2>
                    <p>
						While the system verifies yours payment. But if you have any payment made and not yet verified after 2 hours kindly contact support.
                    </p>
                </div>

				<ul class="listss" style="width: 100%; margin: 0 auto; position: relative; margin-top: 10px; height: auto; overflow: hidden; padding-top:10px; padding-bottom:24px;" id="itemlist">
				
					<li style="height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:45%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;">GET AMOUNT</span>
								</div>
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; color: #fff;">{{ $deposit->trx }}</span>
								</div>
								<div style="height:27px; line-height:27px;font-size:12px;color:#999;">Charge: {{ config('settings')->cur_sym }}{{ showAmount($deposit->charge) }}</div>
								<div style="height:27px; line-height:27px;font-size:12px; color:#999;">{{ $deposit->created_at->format('dS F Y, H:i') }}</div>
							</div>
							<div style="float:left;width:45%; text-align:right; margin-right:5%">
								<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #ddaaaa;">{{ config('settings')->cur_sym }}{{showAmount($deposit->amount,0)}}</div>
								<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">&nbsp;amount</div>
								<div class="" style="height:27px; line-height:27px;font-size:12px;color:#999;"></div>
								<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">Currency: <span style="font-weight:900;">{{ $deposit->currency }}</span></div>
							</div>
						</div>
					</li>

					<li style="height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:30%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style ="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;">PAY AMOUNT</span>
								</div>
							</div>
							<div style="float:left;width:44%; text-align:right;">
								<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #ddaaaa;">{{ showAmount($deposit->final_amo, 0) }}</div>
							</div>

							<div style="float:left;width:15%; text-align:right; margin-right:5%">
								<div style="height:8px; line-height:8px; font-size:10px;"></div>
								<span style="display:none">{{ ($deposit->final_amo + 0) }}</span>
								<span role="copy" style="font-size:12px;color:#999;margin-top:-7px;cursor:pointer;border-radius:3px;padding:2px 4px;font-weight:900;border:1px solid #db5757;color:#e1e1b4;">COPY</span>
							</div>
						</div>
					</li>

					<?php if( $deposit->detail ){ ?>
					<li style="height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:45%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;">{{ str_replace('Please make a bank transfer to','', $deposit->detail->note) }}</span>
								</div>
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; color: #fff;">RECEPIENT</span>
								</div>
								<div style="height:17px; line-height:27px;font-size:14px;color:#999;">Account number</div>
								<div style="height:27px; line-height:30px;font-size:18px; color:#999;">{{$deposit->detail->account_number}}</div>
							</div>
							<div style="float:left;width:45%; text-align:right; margin-right:5%">
								<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #ddaaaa;">{{$deposit->detail->bank_name}}</div>
								<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">&nbsp;Bank name</div>
								<div class="" style="height:27px; line-height:27px;font-size:12px;color:#999;"></div>
								<span style="display:none">{{$deposit->detail->account_number}}</span>
								<span role="copy" style="font-size:12px;color:#999;margin-top:-7px;cursor:pointer;border-radius:3px;padding:2px 4px;font-weight:900;border:1px solid #db5757;color:#e1e1b4;">COPY</span>
							</div>
						</div>
					</li>
					<?php }else{ ?>
					<li class="accountInfo" style="display:none;height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:45%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;" id="recepient" class="recepient"> loading.. </span>
								</div>
								<div style="height:27px; line-height:27px;">
									<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; color: #fff;">RECEPIENT</span>
								</div>
								<div style="height:17px; line-height:27px;font-size:14px;color:#999;">Account number</div>
								<div style="height:27px; line-height:30px;font-size:18px; color:#999;" class="account_number"> loading.. </div>
							</div>
							<div style="float:left;width:45%; text-align:right; margin-right:5%">
								<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #ddaaaa;" class="bankname"> loading.. </div>
								<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">&nbsp;Bank name</div>
								<div class="" style="height:27px; line-height:27px;font-size:12px;color:#999;"></div>
								<span style="display:none" class="bankname"> loading.. </span>
								<span role="copy" style="font-size:12px;color:#999;margin-top:-7px;cursor:pointer;border-radius:3px;padding:2px 4px;font-weight:900;border:1px solid #db5757;color:#e1e1b4;">COPY</span>
							</div>
						</div>
					</li>
					<?php } ?>

					<li style="height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:45%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style ="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;">NARRATION</span>
								</div>
								<div style="height:8px; line-height:8px; font-size:10px; color:#999;">Use this payment description</div>
							</div>
							<div style="float:left;width:48%; text-align:right;">
								<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #ddaaaa;">{{ $deposit->trx }}</div>
								<span role="copy" style="font-size:12px;color:#999;margin-top:-7px;cursor:pointer;border-radius:3px;padding:2px 4px;font-weight:900;border:1px solid #db5757;color:#e1e1b4;">COPY</span>
							</div>
						</div>
					</li>

					<li class="accountInfo" style="<?php if( !$deposit->detail ){ ?>display:none;<?php } ?>height:auto;padding-top:4px;overflow:hidden;color:#333;background:#2E333E;margin:0 auto; width:100%;border-radius: 5px; margin-top:10px;padding-bottom:1px;border-bottom:1px solid #eee;">
						<div style="padding:1px;">
							<div style="float:left;width:55%; margin-left:5%">
								<div style="height:27px; line-height:27px;">
									<span style ="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #fff;">TIMER</span>
								</div>
								<div style="height:8px; line-height:8px; font-size:12px; color:#999;">Payment window left to make deposit.</div>
							</div>
							<div style="float:left;width:38%; text-align:right;">
								<div class="title" style="padding: 5px;background: #fff;float: right;margin: 5px;border-radius: 5px;text-align: -webkit-center;justify-content: center;width: 50px;display: flex;">
									<div>
										<img src="{{ asset('assets/app/img/hourglass.svg') }}" alt="hourglass" style="width:24px;">

										<!-- countdown container -->
										<span data-v-385ac480="" id="count-down"><span class="minutes">23</span>:<span class="seconds">53</span></span>
									</div>
								</div>
							</div>
						</div>
					</li>

					@if( $data->virtual_account == 1)
					<?php if( $deposit->detail ){ ?>
						<div type="button" class="btn confirmPay" onclick="confirmBox('CONFIRM PAYMENT','Are you sure you have made the payment of {{number_format($deposit->final_amo,2)}} {{ $deposit->currency}} to the generated account?, click go ahead to verify payment.','{{ route('user.home') }}');" > I'VE PAID NOW</div>
					<?php }else{ ?>
						<div type="button" id="btn-confirm" class="btn apiLink" data-href="{{ route('user.payment.flutterwave',[@$deposit->id]) }}" data-name="{{ $data->txref }}">Generate bank details</div>
						<div type="button" class="btn confirmPay" style="display:none" onclick="confirmBox('CONFIRM PAYMENT','Are you sure you have made the payment of {{number_format($deposit->final_amo,2)}} {{ $deposit->currency}} to the generated account?, click go ahead to verify payment.','{{ route('user.home') }}');" > I'VE PAID NOW</div>
					<?php } ?>
					@else
						<div class="btn submit-btn" id="btn-confirm" onClick="payWithRave()" type="button" data-v-385ac480="">@lang('PAY NOW')</div>
					@endif

				</ul>

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

@endsection

@push('script')
	<script src="{{ asset('assets/app/js/copypaste.js') }}{{ $catch}}"></script>
	<script src="{{ asset('assets/app/js/pageTimeOut.js') }}{{ $catch}}"></script>
	@if( $data->virtual_account == 0)
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
	@endif

	<script>
		var reactModal = $('.accountInfo');
		<?php if( $data->virtual_account == 0){ ?>
        "use strict"
        const API_publicKey = "{{$data->API_publicKey}}";
        function payWithRave() {
            var x = getpaidSetup({
                PBFPubKey: API_publicKey,
                customer_email: "{{$data->customer_email}}",
                amount: "{{$data->amount }}",
                customer_phone: "{{$data->customer_phone}}",
                currency: "{{$data->currency}}",
                txref: "{{$data->txref}}",
                onclose: function () {
                },
                callback: function (response) {
                    var txref = response.tx.txRef;
                    var status = response.tx.status;
                    var chargeResponse = response.tx.chargeResponseCode;
                    if (chargeResponse == "00" || chargeResponse == "0") {
                        window.location = '{{ url('ipn/flutterwave') }}/' + txref + '/' + status;
                    } else {
                        window.location = '{{ url('ipn/flutterwave') }}/' + txref + '/' + status;
                    }
                        // x.close(); // use this to close the modal immediately after payment.
                 }
            });
        }
		<?php } ?>
		
		$(document).on("click", ".apiLink", function() {
			<?php if( $deposit->detail ){ ?>
			reactModal.show();
			<?php }else{ ?>
			var name = $(this).data('name');
			var link = $(this).data('href');

			hsycms.loading('loading.');

			var a = $.get(link);
			a.done(function(b) {
				console.log(b);
				hsycms.hideLoading();
				if( b.status == 'success'){
					$('.bankname').html(b.data.bankname);
					$('.recepient').html(b.data.recepient);
					$('.account_number').html(b.data.account_number);
					reactModal.show();
					Toast('Now procced to pay');
					$('.apiLink').hide();
					$('.confirmPay').show();
				}else{
					Toast(b.message.success);
				}
			}), a.fail(function(x) {
				hsycms.hideLoading();
				console.log(x);
				Toast('Request not completed, try again');
			});
			<?php } ?>
		});

		initializeClock({
			redirectTo: "{{ route('user.home') }}",
			container: 'count-down',
			deadline: new Date(Date.parse('{{@$deposit->initiate}}'))
		});
    </script>
@endpush
