@extends('layouts.app1')

@section('content')
<link href="{{asset('plugins/uniform/css/uniform.default.min.css')}}" rel="stylesheet" />
<!-- page content -->
	<div class="right_col" role="main">
		@include('flashmessage')
		<div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>AEPS</h3>
              </div>
			</div>
            <div class="clearfix"></div>
<div class="panel-body"></div>
			
            <div class="col-md-6">
			
			@if($userMidState==1 && $onboardUrl!="")
				<div class="panel panel-white" style="background:#fff">
					<div class="panel-body m-5 p-5">
						<center>
							<a href="{{$onboardUrl}}" class="btn btn-success" >Complete your KYC</a>
							<p>{{$message}}</p>
						</center>
					</div>
				</div>				
				<input type="hidden" name="contact" value="{{$userMobile}}">
			@else
<input type="hidden" id="order_id" value="{{old('order_id')}}" />
<input type="hidden" id="status" value="{{old('status')}}" />
			<form method="POST" id="aepsFormAadhar" class="" action="{{ route('psp_aeps_transaction') }}" style="background: #fff;padding: 25px;">
                @csrf
					<div class="panel panel-white">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group required">
										<label class="control-label">Select device</label>

									</div>
								</div>

								<div class="col-md-12" style="padding: 20px; border: 1px solid #ededed;">
									<input type="radio" name="device_type" id="device_type_1" value="MANTRA_PROTOBUF"
										checked>
									<label class="form-check-label" for="device_type_1">
										Mantra
									</label>
									<input type="radio" name="device_type" id="device_type_2" value="MORPHO_PROTOBUF">
									<label class="form-check-label" for="device_type_2">
										Morpho
									</label>
									<input type="radio" name="device_type" id="device_type_3" value="TATVIK_PROTOBUF">
									<label class="form-check-label" for="device_type_3">
										Tatvik
									</label>
									<input type="radio" name="device_type" id="device_type_4" value="STARTEK_PROTOBUF">
									<label class="form-check-label" for="device_type_4">
										Startek
									</label>
								</div>

							</div>
							<div class="row mt-4">
								<div class="col-md-12">
									<div class="form-group">
										<label class="control-label">Personal Details </label>

									</div>
								</div>
								<div style="padding: 20px; border: 1px solid #ededed;">
								<div class="col-md-12">
									<div class="form-group">
										<label class="control-label">Transaction Type </label><br />
										<input type="radio" name="transType" id="transType_1" value="accountwithdrawal"  class="transType" checked onclick="ShowHideDiv()">
									<label class="form-check-label" for="transType_1">
										Withdrawal
									</label>
									<input type="radio" name="transType" id="transType_2" value="balanceinfo" class="transType" onclick="ShowHideDiv()">									
									<label class="form-check-label" for="transType_2">
										Balance Info
									</label>
									 <input type="radio" name="transType" id="transType_3" value="ministatement" class="transType" onclick="ShowHideDiv()">
									<label class="form-check-label" for="transType_3">
										Mini Statement
									</label>
									<input type="radio" name="transType" id="transType_4" value="aadharPay" class="transType" onclick="ShowHideDiv()">
									<label class="form-check-label" for="transType_4">
										Aadhar Pay
									</label>
									</div>
									</div>
								</div>
								<input type="hidden" name="name" value="{{$userName}}">
								<input type="hidden" name="contact" value="{{$userMobile}}">
								<input type="hidden" name="order_id" value="{{round(microtime(true) * 1000)}}">
								<div class="col-md-5">
									<div class="form-group">
										<label class="control-label">Aadhaar </label>
										<input type="number" maxlength="12"  class="form-control" value="{{old('aadhar')}}"
											id='aadhar' name="aadhar" required onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) ) || this.value.length >= 12) return false;" />
									</div>
								</div>

								<div class="col-md-4" id="dvPassport">
									<div class="form-group">
										<label class="control-label">Amount </label>
										<input type="text" class="form-control" value="" id='amount' name="amount">
									</div>
								</div>
								
								</div>

							</div>
						</div>
						<input type="hidden" name="pidData" value=''>
						<div class="panel-body mt-4">
							<div class="panel-heading clearfix">
								Select bank
							</div>
							<div class="row mt-3 mb-3" style="padding: 20px; border: 1px solid #ededed;">
								<div class="col-md-12">
									<input type="radio" name="radio_IIN" id="b1" checked value="607094" onclick="showBankList()">
									<label class="form-check-label" for="b1">
										SBI
									</label>

									<input type="radio" name="radio_IIN" id="b2" value="607087" onclick="showBankList()">
									<label class="form-check-label" for="b2">
										Punjab national bank
									</label>

									<input type="radio" name="radio_IIN" id="b3" value="607094" onclick="showBankList()">
									<label class="form-check-label" for="b3">
										Bank of India
									</label>

									<input type="radio" name="radio_IIN" id="b4" value="606985" onclick="showBankList()">
									<label class="form-check-label" for="b4">
										Bank of Baroda
									</label>

									<input type="radio" name="radio_IIN" id="b5" value="607264" onclick="showBankList()">
									<label class="form-check-label" for="b5">
										Central bank of India
									</label>

									<input type="radio" name="radio_IIN" id="other" onclick="showBank()">
									<label class="form-check-label" for="other">
										Other
									</label>
								</div>								
								<div class="col-md-6 none mt-4" id="select_other_bank">
									<div class="form-group">
										<select name="IIN" id="other_banks" class="form-control select2">
											<option hidden value="">Choose...</option>
											@foreach($banklist as $k=>$banks)
											<option value="{{$banks['iinno']}}">{{$banks['bankName']}}</option>
											@endforeach

										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-md-12">
									<input type="checkbox" checked="checked" disabled> I Agree & 
									<a href="#" data-toggle="modal" data-target="#exampleModal" style="color: blue;">Terms & Condition</a>
								</div>
							</div>
						</div>
						<div style="margin: 20px;"></div>
						<div class="panel-body">
							<div class="row">
								<div class="col-md-12">
									<button class="btn btn-xs btn-info" onclick="Capture()" type="button">Scan & Submit</button>
									
								</div>
							</div>
						</div>

					</div>
				
            </form>
			
			@endif
			</div>
			<div class="col-md-6">
				<div class="panel panel-white" style="background:#fff">
					<div class="panel-body">
					  <table class="table table-bordered table-sm">
						<thead>
						  <tr>
							<th>Order Details</th>
							<th>Status</th>
							<th>Print</th>
						  </tr>
						</thead>
						<tbody id="recentList">
						  
						</tbody>
					  </table>
					
					</div>
				</div>
			</div>
        </div>
    </div>
<input type="hidden" id="pidOpt" value="" />
<input type="hidden" id="reqUrl" value="" />
    <!-- Modal -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <ol>
	        	<li>
	        		I, the Customer hereby authorizes the Bank store my AADHAR number and to fetch, authenticate and store all such necessary details retrieved or to be retrieved from UIDAI through AADHAR Number and IRIS/biometric authentication for the purpose of this transaction. In case of any discrepancies, the Bank reserves the sole right to block my account/ relation and transaction without any further notice or intimation. 
	        	</li>
	        	<li>
		        	Customer hereby states and undertake that it has no objection, if the information disclosed to the Bank is authenticated vide Aadhaar based system. Customer hereby voluntarily agree and confirm to provide or disclose (as required under the Aadhaar Act 2016 and Regulations framed there under) my identification information (Aadhaar number, biometric information & demographic information) for Aadhaar based authentication system and/or such similar authentication mechanism as provided or stipulated by the Government, from time to time, for the purpose of availing banking services, including operations of account or any other facility relating to banking operations. 
		        </li>
		        <li>
		        	The Customer hereby agree and confirm that the Bank will not be obliged to process any request made by me, if:<br>
		        	a. Aadhaar number provided by me is incorrect
		        	b. Details in account does not match with details available with UIDAI
		        </li>
		        <li>
		        	The Customer hereby agree and confirm that the Aadhaar details may be updated for all my banking services, including but not limited to the operation of bank account, for the purposes of authentication.
		        </li>
		        <li>
		        	The Customer hereby agree and confirm that the Aadhaar details may be updated for all my banking services, including but not limited to the operation of bank account, for the purposes of authentication.The Customer hereby agree and confirm that my account may be used for receiving any government payments across schemes that the Customer is eligible and/ or any other payment using the Aadhaar based information. The Customer hereby acknowledge and agree that NPCI may map the Customerâ  s account in the Aadhaar Mapper of NPCI. 
		        </li>
		        <li>
		        	The Customer hereby confirms that the Aadhaar detail provided by the Customer is true, correct and complete in all aspect. 
		        </li>
		        <li>
		        	The Customer hereby acknowledges that the Bank will not have any liability or responsibility, if the details provided by the Customer is or subsequently becomes false, incorrect or incomplete, either in part or as a whole. 
		        </li>
		        <li>
		        	Before agreeing to the above-mentioned terms and conditions, the Customer have been explained (in a language know to the Customer) about the nature of information that may be shared upon authentication and have understood the nature and implication of the same, as stipulated under the applicable law. The Customer declares that all the information has been voluntarily furnished by them to the Bank, without any duress or coercion. 
		        </li>
		        <li>
		        	The Customer hereby gives consent to use/exchange or share their Aadhaar number, Aadhaar information for registration of client information with Exchange, KRA, CERSAI and with any other regulatory or statutory authorities or as the Bank deems fit or as per requirements of law. 
		        </li>
		        <li>
		        	The Customer hereby understands and agrees that all identity information provided by the Customer will only be used for on boarding me for the purpose of the transaction. 
		        </li>
		        <li>
		        	The Customer hereby understands and agrees that Bank may disclose the identity information provided by the Customer to only CIDR for the purpose of authentication or authorization 
		        </li>
		        <li>
		        	The Customer hereby understands and agrees that the biometric authentication may be treated as my signature 
		        </li>
		        <li>
		        	The Customer hereby declare that the above information has been provided voluntarily out of his/her own discretion and volition. All information provided by the Customer or information/date retrieved from UIDAI in respect of the Customer is true, correct, updated and complete.
		        </li>	
	        </ol>
	        <h2><strong>Agent Clause</strong></h2>
	        <ol>
	        	<li>
		        	I hereby confirm that the Customer has been explained (in a language know to the Customer) about the nature of information, sharing of such information upon authentication, aspects of the transaction and the terms and conditions applicable to this transaction and the Customer has understood and authorized YES BANK to fetch applicable data from UIDAI; 
		        </li>
		        <li>
		        	I hereby confirm that the Customer has provided all the information voluntarily to the Bank and are true, correct and complete.
		        </li>
	        </ol>
	      </div>
	      <div class="modal-footer">
	       <!--  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button> -->
	      </div>
	    </div>
	  </div>
	</div>
  

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
	<input type="hidden" id="operatorJson" value="" />
	<!-- Modal content-->
	<div class="modal-content">
	  <div id="otpBox">
	  <div class="modal-body">
		<div class="text-center">
			<img src="{{url('system/public/uploads')}}/loading.gif" id="loading" style="display:inline-block"/>
			<img src="{{url('system/public/uploads')}}/scan_fp.gif" id="scan_fp" style="display:none"/>
		</div>
		<div class="text-center deviceMsg"></div>
	  </div>
	  <div class="modal-footer justify-content-center" style="clear: both;display:none">
		<button type="button" class="btn btn-primary mr-auto" data-dismiss="modal">Close</button>
	  </div>
	  </div>
	</div>

  </div>
</div>


<div class="modal printable first-modal-class" id="openReciept" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header non-printable">
                <h5 class="modal-title">AEPS Receipt <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button></h5>
                
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer non-printable">
                <button type="button" onclick="printDiv()" class="btn btn-primary">Print</button>

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


            <div class="clearfix"></div>
<style>
  .fade:not(.show){
    opacity: 1;
  }
</style>
<script>
    window.onload = function() {
        $("#select_other_bank").hide();

        $(".transType").click(function(){
			if($(this).val()=='balanceinfo'){
				$("#aepsFormAadhar").attr('action', "{{ route('psp_aeps_transaction') }}");
				$('#amount').val('0').attr('readonly',true);
			}
			else if($(this).val()=='ministatement'){
				$("#aepsFormAadhar").attr('action', "{{ route('psp_aeps_transaction') }}");
				$('#amount').val('0').attr('readonly',true);
			}
			else if($(this).val()=='aadharPay'){
				$("#aepsFormAadhar").attr('action', "{{ route('psp_aadharPay_transaction') }}");
				$('#amount').val('').attr('readonly',false);
			}
			else
			{
				$("#aepsFormAadhar").attr('action', "{{ route('psp_aeps_transaction') }}");
				$('#amount').val('').attr('readonly',false);
			}
		});
	

          $("input[name$='radio_IIN']").click(function() {
            var value = $(this).val();
            if(value=='on')
            {
                $("#select_other_bank").show();
                $("#select_other_bank").find('select').prop("required",true);
            }
            else{
                $("#select_other_bank").hide();
                $("#select_other_bank").find('select').prop("required",false);
            }
           {{-- alert(test); --}}
        });

      };
</script>


<script>
	function showBank()
	{
		$("#select_other_bank").removeClass("none");
		$("#select_other_bank").addClass("showDIV");
	}
	function showBankList()
	{
		$("#select_other_bank").removeClass("showDIV");
		$("#select_other_bank").addClass("none");								
	}
</script>
<style type="text/css">
	.none { display:none; }, 
	.showDIV { display:block; } 
	.select2 {width: 100%!important;}
</style>
@endsection
@section('footerscript')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

$(document).ready(function() {
	$('.select2').select2();
	var order_id = $('#order_id').val();
	var status = $('#status').val();
	if(typeof order_id !== "undefined" || order_id != ""){
		$.ajax({
		  type: "GET",
		  url: "/aepsnew1/tran_recon",	  
		  data: {order_id:order_id,status:status},	  
		  success: function (response) {		
			//$('#recentList').html(response);
		  }
		});
	}
	getRdServiceHash();
	$('input[type=radio][name=device_type]').on('change',function(e) {    //alert('h');
		 getRdServiceHash();
	}); 

	$.ajax({
	  type: "GET",
	  url: "/aepsnew/recentFiveList",	  
	  success: function (response) {		
		$('#recentList').html(response);
	  }
	});
});
function getRdServiceHash(){
	$("#pidOpt").val('');
	$("#reqUrl").val('');		
		var device_type = $("input[name='device_type']:checked").val();
        var contact = $("input[name='contact']").val();    
		
		if(device_type == "MANTRA_PROTOBUF"){
			var pidOpt = "<PidOptions ver=\"1.0\"> <Opts fCount=\"1\" fType=\"0\" iCount=\"0\" pCount=\"0\" format=\"1\" pidVer=\"2.0\" timeout=\"20000\" posh=\"UNKNOWN\" env=\"P\" wadh=\"\"\/> <CustOpts><Param name=\"mantrakey\" value=\"\" \/><\/CustOpts> <\/PidOptions>";
			var reqUrl ="http:\/\/127.0.0.1:11100\/rd\/capture";
			$("#pidOpt").val(pidOpt);
			$("#reqUrl").val(reqUrl);
		}
		if(device_type == "MORPHO_PROTOBUF"){
			var pidOpt = "<PidOptions ver=\"1.0\"><Opts fCount=\"1\" fType=\"0\" iCount=\"\" iType=\"\" pCount=\"\" pType=\"\" format=\"1\" pidVer=\"2.0\" timeout=\"10000\" otp=\"\" wadh=\"\" posh=\"\"\/><\/PidOptions>";
			var reqUrl = "http:\/\/127.0.0.1:11100\/capture";
			$("#pidOpt").val(pidOpt);
			$("#reqUrl").val(reqUrl);
		}
		if(device_type == "TATVIK_PROTOBUF"){			
			var pidOpt = "<PidOptions ver=\"1.0\"> <Opts fCount=\"1\" fType=\"0\" iCount=\"0\" pCount=\"0\" format=\"1\" pidVer=\"2.0\" timeout=\"20000\" posh=\"UNKNOWN\" env=\"P\" wadh=\"\"\/> <CustOpts><Param name=\"tatvikkey\" value=\"\" \/><\/CustOpts> <\/PidOptions>";
			var reqUrl = "https:\/\/127.0.0.1:11100\/rd\/capture";
			$("#pidOpt").val(pidOpt);
			$("#reqUrl").val(reqUrl);
		}
		if(device_type == "STARTEK_PROTOBUF"){			
			var pidOpt = "<PidOptions ver=\"1.0\"><Opts fCount=\"1\" wadh=\"\" format=\"1\" pidVer=\"2.0\" timeout=\"20000\"  posh=\"LEFT_INDEX\" env=\"P\" \/> <\/PidOptions>";
			var reqUrl = "http:\/\/127.0.0.1:11100\/rd\/capture";
			$("#pidOpt").val(pidOpt);
			$("#reqUrl").val(reqUrl);
		}

 
}
function Capture(){
	var url = $("#reqUrl").val();
	var PIDOPTS=$("#pidOpt").val();
	var aadhar=$("#aadhar").val();
	var amount=$("#amount").val();
	var transType=$('input[type=radio][name=transType]:checked').val();
	
	if(url=="" || PIDOPTS==""){
		alert('Device configuration error!');
		return false;
	}
	
	
	if(aadhar==""){	alert('Enter Aadhaar No.'); $("#aadhar").focus();	return false; }
	if(transType=="accountwithdrawal" && amount < 100 ){ alert('Enter Valid amount.'); $("#amount").focus();	return false; }
	if(typeof transType === "undefined" ){ alert('Select Transaction Type.');	return false; }

$("#loading").css("display","none");
$("#scan_fp").css("display","inline-block");
$("#myModal .modal-body .deviceMsg").html('<h3>Place customer finger</h3>');	
$('#myModal').modal({
	backdrop: 'static',
	show: true,
	keyboard: false  // to prevent closing with Esc button (if you want this too)
});	

		var xhr;
		var ua = window.navigator.userAgent;
		var msie = ua.indexOf("MSIE");
		if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
		{
			//IE browser
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			//other browser
			xhr = new XMLHttpRequest();
		}
	
	xhr.open('CAPTURE', url, true);
	xhr.setRequestHeader("Content-Type","text/xml");
	xhr.setRequestHeader("Accept","text/xml");
	xhr.onreadystatechange = function () {
	
	if (xhr.readyState == 4){
		var status = xhr.status;
		console.log(status);
		if (status == 200) {
			var textva= (xhr.responseText).replace(/\<\?xml.+\?\>/g, '');
		   
			
			$("input[name='pidData']").val(textva);
			if((xhr.responseXML).getElementsByTagName("Resp")[0].getAttribute('errCode')!=undefined){
				var errorCode=    (xhr.responseXML).getElementsByTagName("Resp")[0].getAttribute('errCode');
				var errInfo=    (xhr.responseXML).getElementsByTagName("Resp")[0].getAttribute('errInfo');
				if(errorCode=="0"){
					$("#loading").css("display","inline-block");
					$("#scan_fp").css("display","none");
					$("#myModal .modal-body .deviceMsg").html("<h2>Finger Captured, Please Wait...</h2>");
					$("#aepsFormAadhar").submit();
				} else {
					//alert(errInfo);
					let html = "<h1 class='text-center d-block'>" + errInfo + "</h1>";
					$("#myModal .modal-body .deviceMsg").html(html);
					$("#loading").css("display","none");
					$("#scan_fp").css("display","none");
					$("#myModal .modal-footer").css("display","block");
				}
			}
			//$("#aepsFormAadhar").submit();
			console.log("2001");
			
		} else {
			//console.log(xhr.response);
			//alert("Device not ready!");			
			let html = "<h1 class='text-center d-block'>Device not ready!</h1>";
			$("#myModal .modal-body .deviceMsg").html(html);
			$("#loading").css("display","none");
			$("#myModal .modal-footer").css("display","block");
			console.log("error else");
		}
		//$("#aepsFormAadhar").submit();
		}
	};
	xhr.send(PIDOPTS);
	console.log("final ready");

}

	function openReciept(order_id){
		$('#openReciept').find('.modal-body').html('');
		  $('#openReciept').modal('show');		  
		  $.ajax({
			  type: "GET",
			  url: "/aepsnew/getApesReciept",
			  data: {id:order_id},			  
			  success: function (response) {			  	
				$('#openReciept').find('.modal-body').html(response);			 
			  }
			});
	}
	function printDiv() {
		 var printContents = document.getElementById("openReciept").innerHTML;
		 var originalContents = document.body.innerHTML;

		 document.body.innerHTML = printContents;

		 window.print();

		 document.body.innerHTML = originalContents;
	}
	
</script>
@endsection