@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-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-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
									<a class="btn btn-xs btn-info" href="{{route('aepsnew2_ekyc')}}" >Complete Your AEPS KYC First</a>
								@endif
								</div>
							</div>
						</div>

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

        </div>
    </div>
<input type="hidden" value="" id="otpToken" />
<input type="hidden" value="" id="otpHash" />
<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 justify-content-center">
			<button type="button" class="btn btn-primary" onclick="verifyOtp()" style="margin-right: 30px;">Verify</button> 
			<button type="button" class="btn btn-danger text-left" onclick="resendOtp(this)">Send OTP</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(){
		$("#myModalLoading").css("display","block");
		$('#myModal').modal('hide');		
		var aadhar = $("#aadhar").val();
		var otpHash = $("#otpHash").val();
		var otpToken = $("#otpToken").val();
		var otp = $('#otp').val();
		if(otp == ''){
			$("#otp").focus();
			return false;
		}
		$.ajax({
		  type: "POST",
		  data: {otp:otp,otpHash:otpHash,otpToken:otpToken},
		  url: "{{ route('kycotp_verify_ip') }}",	  
		  success: function (response) {
			  if(response.status==200){				  
				$('#myModal').modal('hide');
				$("#myModalLoading").css("display","none");
				window.location = "{{ route('aepsnewIP') }}";
			  } else {
				  $('#myModal').modal('show');
				  $("#myModalLoading").css("display","none");
				$('#messageError1').text(response.message);  
			  }
		  }
		});
	}
	function resendOtp(e){
		$('#otpToken').val('');
		$('#otp').val('');
		$('#messageError2').text(''); 
		$(btn).prop("disabled", true);
		$("#myModalLoading").css("display","block");
		var btn = e;
		navigator.geolocation.getCurrentPosition(function(position, html5Error) {
			html5Lat = position.coords.latitude; //Get latitude
			html5Lon = position.coords.longitude; //Get longitude            
			console.log((html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8));
			var longLate = (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8);
			if (html5Lat != '' && html5Lon != '') {	
				$.ajax({
				  type: "POST",
				  data: {longitude:html5Lon,latitude:html5Lat},
				  url: "{{ route('resendOtp_ip') }}",	  
				  success: function (response) {
					  $("#myModalLoading").css("display","none");
					  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.data.otpReferenceID);
						$('#otpHash').val(response.data.hash);
						
					  } else {
						$('.messageError2').text(response.message);  
					  }
					   setTimeout(function(){
							$(btn).prop("disabled", false);
						}, 15000);
				  }
				});
			} else {
				alert('Allow geolocation');
			}
		},
		function(error) {
			if (error.code == error.PERMISSION_DENIED){			  
			  console.log("you denied me :-(");
			  alert('User denied geolocation prompt');	
			}
		});
		
	}


</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