@extends('layouts.app1')

@section('content')
<link href="{{asset('plugins/uniform/css/uniform.default.min.css')}}" rel="stylesheet" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- page content -->
	<div class="right_col" role="main">
		@include('flashmessage')
		<div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>eKyc</h3>
              </div>
			</div>
            <div class="clearfix"></div>
<div class="panel-body"></div>
			
            <div class="col-md-6">
		@if(isset($data['kyc']) && $data['kyc'] != 'success')
			<form method="POST" id="aepsFormAadhar" class="" action="#" style="background: #fff;padding: 25px;">
                @csrf
					<div class="panel panel-white">
						<div class="panel-body">
							<div class="row mt-4">
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Full Name </label>
										<input type="text" required readonly class="form-control" value="{{Auth::user()->name}}{{!empty(Auth::user()->middle_name) ? ' '.Auth::user()->middle_name : ''}}{{!empty(Auth::user()->last_name) ? ' '.Auth::user()->last_name : ''}}" id='name' name="name" />
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Email </label>
										<input type="text" required readonly class="form-control" value="{{Auth::user()->email}}" id='email' name="email">
									</div>
								</div>	
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Mobile </label>
										<input type="mobile" required readonly class="form-control" value="{{Auth::user()->contact}}" id='mobile' name="mobile">
									</div>
								</div>								

								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Aadhaar </label>
										<input type="text" maxlength="12" minlength="12" required readonly class="form-control" value="{{Auth::user()->aadhar}}"
											id='aadhar' name="aadhar">
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">PAN </label>
										<input type="text" required readonly class="form-control" value="{{Auth::user()->pancard}}" id='pancard' name="pancard">
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Shop Name </label>
										<input type="text" required class="form-control" {{Auth::user()->shop_name!=null?'readonly':""}} value="{{Auth::user()->shop_name}}" id='shop_name' name="shop_name">
									</div>
								</div>							
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">State </label>
										<select required class="form-control select2" name="state" id="state">
											<option value="" >Select State</option>
											@foreach($states as $state)
											<option {{ strtoupper(Auth::user()->state) == strtoupper($state['state']) ? 'selected' : ""}} value="{{ $state['stateId'] }}">{{ $state['state'] }}</option>
											@endforeach
										</select>
									</div>
								</div>								
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">City </label>
										<input type="text" required class="form-control" {{Auth::user()->city!=null?'readonly':""}} value="{{Auth::user()->city}}" name="city"  id="city" />
									</div>
								</div>								
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">District </label>
										<input type="text" required class="form-control" {{Auth::user()->city!=null?'readonly':""}} value="{{Auth::user()->city}}" name="district" id="district" />
									</div>
								</div>								
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Pin Code </label>
										<input type="text" required class="form-control" {{Auth::user()->post_code!=null?'readonly':""}} value="{{Auth::user()->post_code}}" name="pinCode" id="pinCode" />
									</div>
								</div>							
								<div class="col-md-12">
									<div class="form-group">
										<label class="control-label">Address </label>
										<input type="text" required class="form-control" {{Auth::user()->address!=null?'readonly':""}} value="{{Auth::user()->address}}" name="address" id="address" >
									</div>
								</div>
								
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">DOB </label>
										<input type="text" required class="form-control" {{Auth::user()->dob!=null?'readonly':""}} value="{{Auth::user()->dob}}" id='dob' name="dob" onblur="checkDateFormat(this)" onchange="checkDateFormat(this)" placeholder="yyyy-mm-dd"  maxlength="10" >
										<span id="dobMessage" style="font-size: 18px;font-weight: bold;"></span>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="control-label">Gender </label><br />
										<input type="radio" name="gender" id="gender" {{Auth::user()->gender == 'M' ? 'checked' : ''}} value="M" />
										<label class="form-check-label" for="transType_3">
											Male
										</label>
										 <input type="radio" name="gender" id="gender" {{Auth::user()->gender == 'F' ? 'checked' : ''}} value="F" />
										<label class="form-check-label" for="transType_4">
											Female
										</label>
									</div>
								</div>		
								<div class="col-md-12">
									<span class="messageError2"></span>
								</div>							
							</div>
							</div>
						</div>
						
						<div style="margin: 20px;"></div>
						<div class="panel-body">
							<div class="row">
								<div class="col-md-12">
								@if(isset($data['kyc']) && $data['kyc'] == 'pending')
									<button class="btn btn-xs btn-dark" onclick="resendOtp()" type="button">Send OTP</button>
								@else
									<button class="btn btn-xs btn-info" onclick="submitKyc()" id="submitKycBtn" type="button">Submit</button>
								@endif
								</div>
							</div>
						</div>

					</div>
				
            </form>
		@endif
			</div>

        </div>
    </div>
<input type="hidden" value="" id="otpToken" />
<input type="hidden" value="" id="kycToken" />
<input type="hidden" value="" id="pidOpt" />
<input type="hidden" value="" id="reqUrl" />
<input type="hidden" name="pidData" value="" id="pidData" />

 <div class="clearfix"></div>
 <div id="myModalLoading" 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 id="myModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title text-center">
				Verify OTP
			</h4>
		  </div>
		  <div id="otpBox">
		  <div class="modal-body">
			<input type="number" name="otp" id="otp" class="form-control" placeholder="Enter OTP">
			<p id="messageError1" style="color:red"></p>
			<span id="messageError2" style="color:green"></span>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-danger text-left" onclick="resendOtp(this)">Send OTP</button>
			<button type="button" class="btn btn-primary" onclick="verifyOtp()">Verify</button>
		  </div>
		  </div>
		</div>

	  </div>
	</div>
	<div id="myModalFingurePrint" class="modal fade" role="dialog">
	  <div class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title text-center">
			  Verify your Adhaar with Bio-metric
			</h4>
		  </div>
		  <div id="otpBox">
		  <div class="modal-body">
			<select class="form-control mb-3"  id="device" onchange="getRdServiceHash()">
				<option value="" selected disabled>Select Device</option>
				<option value="MANTRA">Mantra</option>
				<option value="MORPHO">Morpho</option>
				<option value="TATVIK">Tatvik</option>
				<option value="STARTEK">Startek</option>
			<select>
			<input type="number" readonly id="aadharVeri" class="form-control" >
			<span id="messageError1" style="color:red"></span>
			<span id="messageError2" style="color:green"></span>
		  </div>
		  <div class="modal-footer" id="captureBtn">
			<button type="button" class="btn btn-primary" onclick="Capture()">Capture</button>
		  </div>
		  </div>
		</div>

	  </div>
	</div>
@endsection
@section('footerscript')
<script>
function checkDateFormat(e){
	var date = $(e).val();
	//alert(date);
	 // First check for the pattern
    if(!/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(date))
        return false;

    // Parse the date parts to integers
    var parts = date.split("-");
    var day = parseInt(parts[2], 10);
    var month = parseInt(parts[1], 10);
    var year = parseInt(parts[0], 10);
	const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    // Check the ranges of month and year
    if(year < 1960 || year > 2010 || month == 0 || month > 12 ){
		$(e).val('');
		$("#dobMessage").text('Invalid Date!');
		$("#dobMessage").css('color','red');
		return false;
	} else {
		$("#dobMessage").text(day + '-' + months[month-1] + '-' + year);
		$("#dobMessage").css('color','green');
	}
        
}
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
    $(document).ready(function(){
		$( "#dob" ).datepicker({
			  dateFormat: "yy-mm-dd",
			  changeMonth: true,
			  changeYear: true,
			  //minDate: "-70Y",
			  maxDate: "-18Y"
			});
		$("input[id*='dob']:first").keyup(function (e) {
			var key = String.fromCharCode(e.keyCode);
			if (!(key >= 0 && key <= 9)) $(this).val($(this).val().substr(0, $(this).val().length - 1));
			var value = $(this).val();
			if (value.length == 4 || value.length == 7) $(this).val($(this).val() + '-');
		});	});
	function submitKyc(){
		$("#submitKycBtn").css("display", "none");
		$("#device").val('').change();
		$('#otpToken').val('');
		$('#otp').val('');
		
		var name = $("#name").val();
		var email = $("#email").val();
		var mobile = $("#mobile").val();
		var aadhar = $("#aadhar").val();
		var pancard = $("#pancard").val();
		var shop_name = $("#shop_name").val();
		var city = $("#city").val();
		var pinCode = $("#pinCode").val();
		var state = $('#state :selected').val();
		var address = $("#address").val();
		var dob = $("#dob").val();
		var gender = $("#gender").val();
		if(dob == ''){
			$("#dob").focus();
			return false;
		}
		$.ajax({
		  type: "POST",
		  data: {name:name,email:email,mobile:mobile,aadhar:aadhar,pancard:pancard,shop_name:shop_name,dob:dob,gender:gender,city:city,pinCode:pinCode,state:state,address:address},
		  url: "{{ route('ekycfp_submit') }} ",	  
		  success: function (response) {
			  if(response.status == '200'){
				$('#myModal').modal({
					backdrop: 'static',
					keyboard: false
				});	
				$('#myModal').modal('show');				
				
			  } else {
				alert(response.message);
				window.location = "{{ url('/') }}";
			  }			
		  }
		});
	}
	function verifyOtp(){
		$("#device").val('').trigger('change');
		//$('#kycToken').val('');		
		var aadhar = $("#aadhar").val();
		var otp = $('#otp').val();
		if(otp == ''){
			$("#otp").focus();
			return false;
		}
		$.ajax({
		  type: "POST",
		  data: {otp:otp},
		  url: "{{ route('ekycfp_otp_verify') }}",	  
		  success: function (response) {
			  if(response.status==200){				  
				$('#myModal').modal('hide');
				$('#myModalFingurePrint').modal({
					backdrop: 'static',
					keyboard: false
				});	
				$('#myModalFingurePrint').modal('show');
				$('#aadharVeri').val(aadhar);
			  } else {
				$('#messageError1').text(response.message);  
			  }
		  }
		});
	}
	function resendOtp(e){
		$('#otpToken').val('');
		$('#otp').val('');
		$('#messageError2').text(''); 
		var btn = e;
		$(btn).prop("disabled", true);
		$.ajax({
		  type: "POST",
		  data: {},
		  url: "{{ route('resendOtp_fp') }}",	  
		  success: function (response) {
			  if(response.status==200){
				//$('#myModal').modal('hide');
				$('#myModal').modal({
					backdrop: 'static',
					keyboard: false
				});	
				$('#myModal').modal('show');
				$('#messageError2').text('OTP sent on registered mobile no'); 
				$('#otpToken').val(response.otpToken);
			  } else {
				$('.messageError2').text(response.message);  
			  }
			   setTimeout(function(){
					$(btn).prop("disabled", false);
				}, 15000);
		  }
		});
	}

	
function getRdServiceHash(){
	$("#pidOpt").val('');
	$("#reqUrl").val('');
	$("#captureBtn").css('display','none');
	var device_type = $("#device").find(":selected").val(); 
	if(device_type==''){
		return false;
	}
		
		if(device_type != '' ){
			if(device_type == "MANTRA"){
				var pidOpt = "<PidOptions ver=\"1.0\"> <Opts fCount=\"1\" fType=\"2\" iCount=\"0\" pCount=\"0\" format=\"0\" pidVer=\"2.0\" timeout=\"20000\" posh=\"UNKNOWN\" env=\"P\" wadh=\"E0jzJ/P8UopUHAieZn8CKqS4WPMi5ZSYXgfnlfkWjrc=\"/> <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"){
				var pidOpt = "<PidOptions ver=\"1.0\"><Opts env=\"P\" fCount=\"1\" fType=\"2\" iCount=\"0\" format=\"0\" pidVer=\"2.0\" timeout=\"15000\" wadh=\"E0jzJ/P8UopUHAieZn8CKqS4WPMi5ZSYXgfnlfkWjrc=\" posh=\"UNKNOWN\" /></PidOptions>";
				var reqUrl = "http:\/\/127.0.0.1:11100\/capture";
				$("#pidOpt").val(pidOpt);
				$("#reqUrl").val(reqUrl);
			}
			if(device_type == "TATVIK"){			
				var pidOpt = "<PidOptions ver=\"1.0\"> <Opts fCount=\"1\" fType=\"2\" iCount=\"0\" pCount=\"0\" format=\"0\" pidVer=\"2.0\" timeout=\"20000\" posh=\"UNKNOWN\" env=\"P\" wadh=\"E0jzJ/P8UopUHAieZn8CKqS4WPMi5ZSYXgfnlfkWjrc=\"/></PidOptions>";
				var reqUrl = "https:\/\/127.0.0.1:11100\/rd\/capture";
				$("#pidOpt").val(pidOpt);
				$("#reqUrl").val(reqUrl);
			}
			if(device_type == "STARTEK"){			
				var pidOpt = "<PidOptions ver=\"1.0\"> <Opts fCount=\"1\" fType=\"2\" iCount=\"0\" pCount=\"0\" format=\"0\" pidVer=\"2.0\" timeout=\"20000\" posh=\"UNKNOWN\" env=\"P\" wadh=\"E0jzJ/P8UopUHAieZn8CKqS4WPMi5ZSYXgfnlfkWjrc=\"/></PidOptions>";
				var reqUrl = "http:\/\/127.0.0.1:11100\/rd\/capture";
				$("#pidOpt").val(pidOpt);
				$("#reqUrl").val(reqUrl);
			}
			$("#captureBtn").css('display','block');
		} else {
            alert('Select Device');
			location.reload();
			return false;
        }
 
}
function Capture(){
	$('#myModalFingurePrint').modal('hide');
	var url = $("#reqUrl").val();
	var PIDOPTS=$("#pidOpt").val();
	
	if(url=="" || PIDOPTS==""){
		alert('Device configuration error!');
		return false;
	}

$("#loading").css("display","none");
$("#scan_fp").css("display","inline-block");
$("#myModalLoading .modal-body .deviceMsg").html('<h3>Place customer finger</h3>');	
$('#myModalLoading').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");
					$("#myModalLoading .modal-body .deviceMsg").html("<h2>Finger Captured, Please Wait...</h2>");
					submitBiometric();
				} else {
					//alert(errInfo);
					let html = "<h1 class='text-center d-block'>" + errInfo + "</h1>";
					$("#myModalLoading .modal-body .deviceMsg").html(html);
					$("#loading").css("display","none");
					$("#scan_fp").css("display","none");
					$("#myModalLoading .modal-footer").css("display","block");
				}
			}
			console.log("2001");
			
		} else {
			//console.log(xhr.response);
			//alert("Device not ready!");			
			let html = "<h1 class='text-center d-block'>Device not ready!</h1>";
			$("#myModalLoading .modal-body .deviceMsg").html(html);
			$("#loading").css("display","none");
			$("#myModalLoading .modal-footer").css("display","block");
			console.log("error else");
		}
		}
	};
	xhr.send(PIDOPTS);
	console.log("final ready");

}
function submitBiometric(){
	var device_type = $("#device").find(":selected").val(); 
	var pidData = $('#pidData').val();
	$.ajax({     
		type: "POST",
		 url: '{{route("eKycFPBiometric")}}',
		 data: {device_type: device_type,pid_xml:pidData},
		 headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		success: function( response ) {
		 if(response.status==200){
			alert(response.message);
			location.reload(); 
		  } else {
			location.reload(); 
		  }
		}

	});
}
</script>
  <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();
});
</script>
@endsection