@extends('adminlayout.mobile_sidebar')
@section('content')
<style>
    .cursor {
        cursor: pointer;
    }


    .team-info li {
        font-size: .7900rem !important;
    }
	


.nk-content-fluid {
    margin-top: 0px;
    position: relative;
}

.mainTop{
	ackground-color: rgb(239, 239, 239);
    background-size: cover;
    display: flex;
    justify-content: center;
}
.maxWidth {
    max-width: 450px;
}
.mainRoot{
	display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    min-width: 320px;
	min-height: 100%!important;
	padding-bottom: 15px;
}

.headerNav {
	background: #fff;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
	padding: 0.8rem 0.6rem !important;
}
.boxShadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.navLeftText {
    color: #111111;
}
.innerHeadText{
	font-size: 16px;
}
.backIcon {
    margin-right: 15px;
}
.backIcon img{
	width: 21px;
}

.nk-block-head-content {
    position: relative;
	padding: 0px 15px;
}
.toggle-expand{
	float: right;
}
.mobDtable div.dataTables_wrapper div.dataTables_length, 
.mobDtable  div.dataTables_wrapper div.dataTables_filter{
	text-align: left;
	margin-bottom: 15px;
}
.mobDtable div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 100%;
}
.mobDtable .table th, .mobDtable .table td {
    padding: 0.5rem;
    vertical-align: middle;
    border-top: 1px solid #dbdfea;
    font-size: 14px;
    color: #111111;
}
.mobDtable div.dataTables_wrapper div.dataTables_length label, 
.mobDtable div.dataTables_wrapper div.dataTables_filter label {
    color: #111111;
}
.mobDtable div.dataTables_wrapper div.dataTables_length select {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    color: #111111;
    padding: 10px;
    margin: 0px 10px;
	text-align: center;
}
.mobDtable div.dataTables_wrapper div.dataTables_info {
    text-align: left !important;
}
.w-transfer-inner{
	margin-top: 30px;
}
.w-transfer-inner .form-group label{
	color: #111111;
    margin-bottom: 5px;
}
.w-transfer-inner .form-control, .popInner .form-control{
	border-radius: 20px;
}
.w-sb-btn {
    width: 100%;
    border-radius: 20px;
    text-align: center;
    display: block;
    font-weight: normal;
    font-size: 16px;
}
.popBtnSb{
	border-radius: 20px;
    padding: 7px 20px;
    font-weight: normal;
    font-size: 15px;
}
	
</style>

    <div class="nk-content-body">
		<div class="mainTop">
			<div class="mainRoot maxWidth">
				<div class="navTop sticky-top">
					<nav id="" class="navbar navbar-expand-lg headerNav boxShadow">
						<div class="navLeftText">
							<a class="backIcon" href="{{route('dashboard')}}"><span><img src="{{url('/assets/images/mob-dash/back-arrow.png')}}"></span></a> <span class="innerHeadText">Scan & Pay</span>
						</div>
						
					</nav>
				</div>
				
            <div class="nk-block-head">
			<div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <div class="card">
                            <div class="w-transfer-inner">
                                <form method="post" id="pay_process" action="{{ route('scanPay') }}">
                                    @csrf
                                    
									 <input type="hidden" name="upid" class="form-control" value="{{ $upid }}">
									 
                                        <div class="row">
                                            <div class="col-12" style="margin-top: 6%;">
                                                <div class="text-danger">
                                                    <ul>
                                                        @if($errors->any())
                                                        {!! implode('', $errors->all('<li>:message</li>')) !!}
                                                        @endif
                                                    </ul>
                                                </div>
                                               
                                                <div class="form-group">
												
                                                    <label>Wallet Amount:  {{ Auth::user()->wallet }} </label>                                                 
                                                </div>
                                                <div class="form-group" style="margin-top: 20%;">
												
                                                    <label>Amount</label>
                                                    <input type="number" name="amount" id="amount" class="form-control" value="{{ old('amount') }}">
                                                    <span class="text-danger">@if ($errors->has('amount')){{ $errors->first('amount') }}@endif</span>
													<span id="amount-error" style="color:red;margin-left:14px;display:none"> Please enter amount.</span>
                                                </div>
                                            </div>
                                        </div>
                                   
                                </form>
                                <div class="" style="margin-top: 15px; margin-bottom: 20px;">
                                    <button class="btn btn-primary w-sb-btn" onclick="confirmpin()">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>               
			</div>
			</div>
            <!-- .nk-block -->

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

<div class="modal fade" role="dialog" id="confirmpin">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-md">
                <h5 class="add-itrcategory">Confirm Pin</h5>
                <div class="tab-content">
                    <div class="tab-pane active" id="personal-document">
                        <form>
                            @csrf
                            <div class="popInner">
                                <!--  <div class="col-md-12"> -->
                                <div class="form-group">
                                    <div class="form-control-wrap">
                                        <input type="number" id="pin" name="pin" class="form-control" placeholder="Please transaction pin">
                                        <input type="hidden" name="data_id" value="{{Crypt::encrypt(Auth::id()) }}">
                                    </div>
									<span id="pin-error" style="color:red;margin-left:14px;display:none">  Invalid Pin.</span>
                                </div>
                                <!--  </div> -->
                                <div class="form-group">
                                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" id="confirm_pin" class="btn btn-lg btn-primary popBtnSb">Submit</button>
                                        </li>
                                        <li>
                                            <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                        </li>
                                      
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- .tab-pane -->
                </div>
                <!-- .tab-content -->
            </div>
            <!-- .modal-body -->
        </div>
        <!-- .modal-content -->
    </div>
    <!-- .modal-dialog -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var CSRF_TOKEN = '{{ csrf_token() }}';
        $('#confirm_pin').click(function(event) {
            event.preventDefault();
			
			$('#pin-error').hide();
            $.ajax({
                url: "{{route('confirm_pin')}}",
                type: 'POST',
                data: {
                    _token: CSRF_TOKEN,
                    pin: $("#pin").val()
                },
                success: function(data) {
                    if (data == 0) {
                        $('#pin-error').show();
                    } else {
						
                        $('#pay_process').submit();
                    }
					$('#pay_process').submit();
                }
            });
        });
    });
	
	function confirmpin()
	{
		var amount = $('#amount').val();
			$('#amount-error').hide();
			if(amount.trim()=='')
			{
				$('#amount-error').show();
				
			}else{
				$('#confirmpin').modal('show');
			}
	}
</script>
@endsection