@extends('template.coin.layouts.base')

@section('title', __($deposit->txn_id.' | Complete Deposit'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
    .dark-mode .card-stats-data .amount , .dark-mode .popup-close{
        color: #fff !important;
    }
    .dark-mode .popup-content{
    background-color: #141c26;
    }
</style>

@endsection

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="page-dw wide-xs m-auto">
                <div class="nk-pps-apps">
                    <div class="nk-pps-title text-center">
                        <h3 class="title">Make Your Payment</h3>
                        <p class="caption-text">
                            Your deposit <strong class="text-dark">{{$deposit->txn_id}}</strong> has been placed successfully. To complete, please send the exact amount of <strong class="text-dark">{{$depositDetails['exc_curr']}} {{$depositDetails['currency']}}</strong> to the address below.
                        </p>
                        @if ($errors->has('tnx'))
                        <div class="alert alert-danger alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-danger"></em>
                                <p>{{$errors->first('tnx')}}</p>
                            </div>
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="color:#000">&times;</span>
  </button> 
                        </div>
                    </div>
                    
                      @endif
                    </div>
                    <div class="nk-pps-card card card-bordered popup-inside">
                        <div class="card-inner-group">
                            <div class="card-inner card-inner-sm">
                                <div class="card-head mb-0">
                                    <h6 class="title mb-0">Pay {{$depositDetails['currency_name']}}</h6>
                                    <div class="card-opt"><span class="counter" data-countdown-second="{{$stime}}" id="counterclock" data-countdown-text="Expire in">Expire in {{$nntime}}</span></div>
                                </div>
                            </div>
                            <div class="card-inner">
                                <div class="qr-media mx-auto mb-3 w-max-100px">
                                @if($depositDetails['qr_show'] == 'show')
                                    {!! QrCode::size(200)->generate($depositDetails['qrcode']); !!}
                                    @endif
                                </div>
                                <div class="pay-info text-center">
                                    <h5 class="title text-dark mb-0 clipboard-init" data-clipboard-text="{{$depositDetails['exc_curr']}}">{{$depositDetails['exc_curr']}} {{$depositDetails['currency']}} <em class="click-to-copy icon ni ni-copy-fill nk-tooltip" title="" data-original-title="Click to Copy"></em></h5>
                                    <p class="text-soft">{{$depositDetails['amount']}} {{$user->user_curr()}}</p>
                                </div>
                                <div class="form-group">
                                    <div class="form-label overline-title-alt lg text-center">{{$depositDetails['currency_name']}} Address</div>
                                    <div class="form-control-wrap">
                                        <div class="form-clip clipboard-init nk-tooltip" data-clipboard-target="#wallet-address" title="" data-original-title="Copy">
                                            <em class="click-to-copy icon ni ni-copy"></em>
                                        </div>
                                        <div class="form-icon"></div>
                                        <input readonly="" type="text" class="form-control form-control-lg" id="wallet-address" value="{{$pmethod->details}}" />
                                    </div>
                                </div>

                                <div class="nk-pps-action">
                                    <a href="#crypto-paid" class="btn btn-block btn-primary popup-open"><span>Paid {{$depositDetails['currency_name']}}</span></a>
                                </div>
                                <div class="nk-pps-action pt-2 text-center">
                                    <a href="{{secure_url('transactions?type=deposit')}}" class="link link-btn link-primary">Pay Later</a>
                                </div>
                                <div id="crypto-paid" class="popup">
                                    <div class="popup-content">
                                        <h6 class="mb-2">Confirm your payment</h6>
                                        <p>If you already paid, please provide us your payment reference to speed up verification procces.</p>
                                        <form class="form" action="{{route('crypto-deposit.deposit.reference')}}" method="POST" id="crypto-pay-reference">
                                            <div class="form-group">
                                                <div class="form-label">Payment Reference <span class="text-danger">*</span></div>
                                                <div class="form-control-wrap">
                                                    <input name="reference" type="text" class="form-control" value="" placeholder="Enter your reference id / hash" required />
                                                </div>
                                            </div>
                                            <ul class="btn-group justify-between align-center gx-4">
                                                <li><button type="submit" id="confirm-payment" class="btn btn-primary btn-block">Confirm Payment</button></li>
                                                <li><a href="#" class="link link-btn link-secondary popup-close">Close</a></li>
                                            </ul>
                                            @csrf
                                            <input type="hidden" name="transact_id" value="{{$deposit->deposit_id()}}" />
                                            <input type="hidden" name="transact_hash" value="{{the_hash($deposit->txn_id)}}" />
                                        </form>
                                        <div class="alert-note is-plain mt-4">
                                            <em class="icon ni ni-alert-circle"></em>
                                            <p>Account will credited once we confirm that payment has been received.</p>
                                        </div>
                                    </div>
                                    <div class="popup-overlay"></div>
                                </div>
                            </div>
                            <div class="card-inner bg-lighter">
                                <ul>
                                    <li class="alert-note is-plain text-danger">
                                        <em class="icon ni ni-alert-circle"></em>
                                        <p>Be aware of that this order will be cancelled, if you send any other {{$depositDetails['currency']}} amount.</p>
                                    </li>

                                    <li class="alert-note is-plain">
                                        <em class="icon ni ni-info"></em>
                                        <p>Account will credited once we received your payment.</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="nk-pps-action mt-n2">
                        <ul class="btn-group justify-between align-center gy-3">
                            <li><a href="{{secure_url('deposit/cancel'."/".the_hash($deposit->txn_id))}}" class="link link-danger">Cancel Order</a></li>
                            <li>
                                <a href="{{secure_url('dashboard')}}" class="link link-primary"><span>Back to Dashboard</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('modals')


@endsection

@section('js')
<script>
    $('.popup-open').on('click' , function(){
        var id = $(this).attr('href');
        $(id).addClass('opened');
    });
    
    $('.popup-close').on('click' , function(){
        $('.popup').removeClass('opened');
    });
    $('#confirm-payment').on('click' , function(){
        $('#crypto-pay-reference').submit();
    })
</script>
<script>
    function makeTimer() {

	
            
			var timeLeft = $('#counterclock').attr('data-countdown-second');
			var timeLeft2 = timeLeft-1;

			var days = Math.floor(timeLeft / 86400); 
			var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
			var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
			var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  
			if (hours < "10") { hours = "0" + hours; }
			if (minutes < "10") { minutes = "0" + minutes; }
			if (seconds < "10") { seconds = "0" + seconds; }

			$("#counterclock").html('Expire in '+hours + ":"+minutes+':'+seconds);
			$("#counterclock").attr('data-countdown-second' , timeLeft2)
				

	}
    
	setInterval(function() { makeTimer(); }, 1000);
</script>
@endsection