@extends('layout')
@section('css')
@endsection
@section('content')
    
    <!--Page Title-->
    <section class="page-title" style="background-image:url({{url('/')}}/assets/front/img/bg-page-title-1.jpg);">
    	<div class="auto-container">
        	<div class="inner-box">
                <h1>@include('partials.breadcrumb')</h1>
                <ul class="bread-crumb">
                	<li><a href="/">Home</a></li>
                    <li>@include('partials.breadcrumb')</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

<section id="stepseone" class="jumbotronss">
    <div class="h-careers-help-left-img"></div>
    <div class="container">
    <div class="row">
	<div class="col-md-6 m-auto">
	
	<form class="row donation-form-outer">
		<div class="col-md-12">
      <h1 class="heading text-center mb-5"><span>Login by Email</span></h1>
            <label for="loginmail">Enter E-mail</label>
            <input id="loginmail" name="email" class="" type="email">
		</div>
		<div class="col-md-12 pt-3 text-center mt-3">
			<button type="submit" id="stepseonebtn" class="theme-btn btn-style-one">Login</button>	
		</div>	
        </form>	
		
    </div>
    </div>
    </div>
</section>



    <section id="stepse_two" class="jumbotronss" style="display:none;">
<div class="container">
    <div class="row justify-content-center pt-5">
        <div class="col-lg-10 col-xl-9">
            <div class="kyc-form-steps card mx-lg-4">
                <div class="form-step form-step2 card-body">
                    <div class="form-step-head card-innr">
                        <div class="step-head">
                            <div class="step-head-text text-center w-100 pt-3">
                                <h4 class="mb-3">Verifying Identity</h4>
                                <p>Please provide us with a scan of your ID, passport, or driver's license, along with a utility bill or phone bill displaying your name and address.</p>
                            </div>
                        </div>
                    </div>
                    <!-- .step-head -->
                    <div class="form-step-fields card-innr">
                        <div class="gaps-2x"></div>
                        <ul class="nav nav-tabs nav-tabs-bordered row flex-wrap guttar-20px mb-3" role="tablist">
						
                            <li class="nav-item flex-grow-0">
                                <a id="linktab1" class="nav-link d-flex align-items-center active" data-toggle="tab" href="#passport">
                                    <div class="nav-tabs-icon"><img src="{{url('/')}}/assets/front/img/id-card.png" alt="icon"><img src="{{url('/')}}/assets/front/img/id-card-color.png" alt="icon"></div><span>ID Card / DL</span></a>
                            </li>
							
							
							
                            <li class="nav-item flex-grow-0">
                                <a id="linktab3" class="nav-link d-flex align-items-center" data-toggle="tab" href="#driver-licence">
                                    <div class="nav-tabs-icon"><img src="{{url('/')}}/assets/front/img/utilitybill.png" alt="icon"><img src="{{url('/')}}/assets/front/img/utilitybill-color.png" alt="icon"></div><span>Utility Bill</span></a>
                            </li>
							
							
							
                        </ul>
                        <!-- .nav-tabs-line -->
        <form id="kyc_form1" method="POST" action="mmy-ajax " enctype="multipart/form-data">
        {{ csrf_field() }}
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="passport">
                                <h5 class="text-secondary font-bold mb-5">To avoid delays when verifying account, Please make sure bellow:</h5>
                                <ul class="list-check mb-5">
                                    <li>Document should be good condition and clearly visible.</li>
                                    <li>The photo must be clear and in focus.</li>
                                    <li>The photo should be taken without any filters.</li>
                                    <li>Chosen credential must not be expired.</li>
                                </ul>
                                <div class="gaps-2x"></div>
		
                                <div class="row align-items-center">
                                    <div class="col-sm-12">
                                <h5 class="font-mid mb-3">Upload Your FRONT SIDE of ID CARD / DL</h5>
									</div>
                                    <div class="col-sm-8">
                                        <div class="upload-box">
                                            <div id="upload_zone1" class="upload-zone dropzone dz-clickable d-flex flex-wrap justify-content-center">
												<div id="kycfile1_1text" class="w-100"></div>
                                                <div class="dz-message position-relative" data-dz-message="">
													<input type="file" id="kycfile1_1" onchange="kyc1(this)" name="selfie_1" class="theme-btn btn-style-one d-none">
													<label for="kycfile1_1" class="theme-btn btn-style-one label_kyc">SELECT</label>
												</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 d-none d-sm-block">
                                        <div class="mx-md-4"><img style="max-width: 70%;" src="{{url('/')}}/assets/front/img/id-cardv.png" alt="vector"></div>
                                    </div>
                                </div>
                                <div class="gaps-3x"></div>
                                <div class="row align-items-center">
                                    <div class="col-sm-12">
										<h5 class="font-mid mb-3 mt-3">Upload Your BACK SIDE ID CARD / DL</h5>
									</div>
                                    <div class="col-sm-8">
                                        <div class="upload-box">
                                            <div id="upload_zone2" class="upload-zone dropzone dz-clickable d-flex flex-wrap justify-content-center">
												<div id="kycfile1_2text" class="w-100"></div>
                                                <div class="dz-message position-relative" data-dz-message="">
													<input id="kycfile1_2" onchange="kyc2_2(this)" name="selfie_2" type="file" class="theme-btn btn-style-one d-none">
													<label for="kycfile1_2" class="theme-btn btn-style-one label_kyc">SELECT</label>
												</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 d-none d-sm-block">
                                        <div class="mx-md-4"><img style="max-width: 70%;" src="{{url('/')}}/assets/front/img/id-cardv.png" alt="vector"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="driver-licence">
                                <h5 class="text-secondary font-bold mb-5">To avoid delays when verifying account, Please make sure bellow:</h5>
                                <ul class="list-check mb-5">
                                    <li>The utility bill should be issued within the last three months. </li>
                                    <li>Utility Bill must match the details on your application.</li>
                                    <li>Utility Bill should clearly show your name and address.</li>
                                    <li>Document should be good condition and clearly visible.</li>
                                </ul>
                                <div class="gaps-2x"></div>
								
		
                                <div class="row align-items-center">
                                    <div class="col-sm-12">
                                <h5 class="font-mid mb-3">Upload Here Your Utility Bill</h5>
									</div>
                                    <div class="col-sm-8">
                                        <div class="upload-box">
                                            <div id="upload_zone4" class="upload-zone dropzone dz-clickable d-flex flex-wrap justify-content-center">
												<div id="kycfile2_text" class="w-100"></div>
                                                <div class="dz-message position-relative" data-dz-message="">
													<input id="kycfile3" onchange="kyc3(this)" type="file" name="upload_f" class="theme-btn btn-style-one d-none" placeholder="SELECT">
													<label for="kycfile3" class="theme-btn btn-style-one label_kyc">SELECT</label>
												</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 d-none d-sm-block">
                                        <div class="mx-md-4"><img style="max-width: 70%;"  src="{{url('/')}}/assets/front/img/utilitybillv.png" alt="vector"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- .tab-pane -->
                <div class="form-step form-step-final mt-5">
                    <div class="form-step-fields card-innr">
                        <div class="input-item"><input class="input-checkbox input-checkbox-md" id="term-condition" type="checkbox"><label for="term-condition">I have read the Terms of Condition and Privary Policy.</label></div>
                        <div class="input-item"><input class="input-checkbox input-checkbox-md" id="info-currect" type="checkbox"><label for="info-currect">All the personal information I have entered is correct.</label></div>
                        <div class="gaps-1x"></div><button id="kyc_btn3" class="theme-btn btn-style-one">Submit</button></div>
                    <!-- .step-fields -->
                </div>
                        </div>
                        <!-- .tab-content -->
		</form>
                    </div>
                    <!-- .step-fields -->
                </div>
            </div>
            <!-- .card -->
        </div>
    </div>
</div>
</section>


<div class="jumbotronss locksgif bg-white" id="stepse_three">
<div class="wrapper">
  <div class="square origin-center">
    <img src="{{url('/')}}/assets/front/img/security.png">
  </div>
</div>
    <span class="secorconn">Secured Connection</span>
    
<div class="locksgifloader">
<div class="loader1 text-dark">Loading...</div>
</div>
    </div>	





<section id="stepsefour" class="m-auto jumbotronss dirdepossuss">
<div class="container">
    <div class="row">
    <div class="col-sm-12 col-xs-12">
	<img src="{{url('/')}}/assets/front/img/idcard.png">
    <p>Thank you!<br>Your data has been successfully submitted.</p>
    </div>
    </div>
</div>
</section>
<style>
.square {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-animation: 3s linear infinite rotate;
          animation: 3s linear infinite rotate;
}

.origin-center {
  transform-origin: center;
}

@-webkit-keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
</style>
@stop

@section('script')


<script>    

		function isEmail1_c(email_c) {
			// регулярное вырожение для проверки введенного адреса
  			var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  			return regex.test(email_c);
		}


		function completeInviteForm0c(){
			var loginmail = $("#loginmail").val(); // Получаем e-mail
			
                // отправляем данные
                $.ajax({
                    type: "POST", // метод передачи
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
                    url: "/employmentformlog-logmail", // куда отправляем
                    data: { // что отправляем
					_token: "{{csrf_token()}}",
					 email : loginmail
                    },
                    // после получения ответа сервера
                //    success: function(data){
                //        $('.messages').html(data.result); // выводим ответ сервера
                 //   }
				 success:function () {
					swal("Error!", "This email is not in the system!", "error");
 				 },
				 error:function () {
					// Очистить
					let nameemail = $("#loginmail").val();
					sessionStorage.setItem('testName', nameemail); // Сохранить значение в sessionStorage
					$('#stepseone').hide();
					$('.locksgif').addClass('vizusse');
					//$('#stepseone form')[0].reset();
					$('html, body').animate({
					  scrollTop: $("#stepseone").offset().top // класс объекта к которому приезжаем
					  }, 1000); // Скорость прокрутки
					setTimeout(function(){
					$('#stepse_two').show();
					$('.locksgif').removeClass('vizusse');
					$('.earn-cashback').removeClass('d-none');
					  $('html, body').animate({
					      scrollTop: 500
					    }, 500);	
					}, 3000);
 				 }
                });
				//	setTimeout(function(){this.form.reset();}, 3000);
            };	
		$(document).ready(function(){
			$("#stepseonebtn").on("click", function(e){
				// После нажатия на кнопку отменяем стандартное поведение браузера
				// и создаем переменную
				e.preventDefault();
				var formemail = $("#loginmail").val();
				
				
				if(!isEmail1_c(formemail)) {
					$('#loginmail').css('border', '1px solid red');
				} else {
					$('#loginmail').css('border', '1px solid #dcdcdc');
				}
				
				if(isEmail1_c(formemail)) {
					completeInviteForm0c();
				}
				setTimeout(function(){$('#stepseone form input').css('border', '1px solid #dcdcdc')}, 3000);
			});
		});		
		
		
</script>    


	

<script>    
$('#kyc_form1').submit(function(event) {
    event.preventDefault();
	
	var chekse1 = $('#term-condition');
	var chekse2 = $('#info-currect');
	
	var kyc3file = $('#kycfile1_1')[0].files;
	var kyc4file = $('#kycfile1_2')[0].files;
	var kyc5file = $('#kycfile3')[0].files;
	var loginmail = $("#loginmail").val();

	if(kyc3file.length > 0 && kyc4file.length > 0 && kyc5file.length > 0 && chekse1.is(':checked') && chekse2.is(':checked')){
    $('.all_preload').show();
	var kycdata = new FormData();
//	var kycdata1 = new FormData();
         // Append data 
         kycdata.append('selfie_1',kyc3file[0]);
         kycdata.append('selfie_2',kyc4file[0]);
         kycdata.append('upload_f',kyc5file[0]);
         kycdata.append('email',loginmail);
		 
	//	 console.log(kycdata);
    

    $.ajax({
        async: true,
        url: 'applyidFileFile',
        headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
		method: 'post',
        type: 'POST', 
        contentType: false,             
        data: kycdata,
        cache : false,
        processData: false,
        success: function(result)
        {
            var obj = JSON.parse(result);
        if (obj["success"] == true){
                    $('.all_preload').hide();
					$('.locksgif').addClass('vizusse');
					$('#stepse_two').hide();
					$('#stepse_three').show();
			
        //    alert(obj["mess"]);
		//	swal("Your documents have been submitted!", obj["mess"], "success");
			$("#kycfile1_1").val("");
			$("#kycfile1_2").val("");
			$("#kycfile3").val("");
			
			$("#kycfile1_1text").remove();
			$("#kycfile1_2text").remove();
			$("#kycfile2_text").remove();

			document.querySelector('#kycfile1_1').value = '';
			document.querySelector('#kycfile1_2').value = '';
			
			
					setTimeout(function(){
					$('#stepse_three').hide();
					$('#stepsefour').show();
					$('#stepsefour').addClass('shous');
				//	window.location.replace('/success-page');
					}, 3000);
					setTimeout(function(){
					//	$("#stepsefour video")[0].play();
					$(".dirdepossuss").addClass('loaddepos');
						
					}, 3100);
        }
        else {
			swal("Error!", obj["err"], "error");
        }
        },
        error: function(data)
        {
            var obj = JSON.parse(data);
			swal("Error!", obj["err"], "error");
        }
    });
	
	} else {
		if(!kyc3file.length && !kyc4file.length && !kyc5file.length) {
			swal("Error!", "Please upload all necessary files.", "error");
			$('#upload_zone1').addClass('novalidses');
			$('#upload_zone2').addClass('novalidses');
			$('#upload_zone4').addClass('novalidses');
		} else {
		if(!kyc3file.length) {
			swal("Error!", "Please select a first file.", "error");
			$('#upload_zone1').addClass('novalidses');
			$('#driver-licence').addClass('fade');
			$('#driver-licence').removeClass('active');
			$('#passport').addClass('active');
			$('#passport').removeClass('fade');
			
			$('#linktab1').addClass('active');
			$('#linktab3').removeClass('active');
		} else {
		if(!kyc4file.length) {
			swal("Error!", "Please upload two files.", "error");
			$('#upload_zone2').addClass('novalidses');
			$('#driver-licence').addClass('fade');
			$('#driver-licence').removeClass('active');
			$('#passport').addClass('active');
			$('#passport').removeClass('fade');
			
			$('#linktab1').addClass('active');
		} else {
		if(!kyc5file.length) {
			swal("Error!", "Please select a Utility Bill file.", "error");
			$('#upload_zone4').addClass('novalidses');
			$('#passport').removeClass('active');
			$('#passport').removeClass('show');
			$('#passport').addClass('fade');
			$('#driver-licence').removeClass('fade');
			$('#driver-licence').addClass('active');
			$('#driver-licence').addClass('show');
			
			$('#linktab1').removeClass('active');
			$('#linktab3').addClass('active');
		} else {
			$('#driver-licence').addClass('fade');
			$('#driver-licence').removeClass('active');
			$('#driver-licence').removeClass('show');
			$('#passport').addClass('active');
			$('#passport').removeClass('fade');
			$('#passport').addClass('show');
		}
			if(chekse1.not(':checked') && chekse2.not(':checked')) {
				if(chekse1.not(':checked')) {
					$('#term-condition').addClass('novalidcheck');
				}
				if(chekse2.not(':checked')) {
					$('#info-currect').addClass('novalidcheck');
				}
			}
		}}}
	}
	
	
});  
  </script>     
  
  
  
  
  
  
  
  
  <script>    
      UpLoadFileCheck1=function()    
      {      
                    this.AllowExt = ".png,.jpg,.jpeg,.gif,.bmp,.tif,.svg,.WebP,.webp"; // Типы файлов, разрешенные для загрузки 0, не ограничены    
          this.ImgObj=new Image();    
          this.FileExt="";    
          this.ErrMsg="";    
          this.IsImg=false;    

      }    

      UpLoadFileCheck1.prototype.CheckExt=function(obj)    
      {    
          this.ErrMsg="";    
          this.ImgObj.src=obj.value;      
          if(obj.value=="")    
          {    
                            this.ErrMsg = "\ nВыберите файл";        
          }    
          else    
          {      
              this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();    
              if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)    
              {    
                                    this.ErrMsg = "1";
              } else {
				  $('.load-progress').css('display', 'flex');
				  setTimeout(function(){
					$('.load-progress').css('display', 'none');
					}, 1000);
			  }
          }    
          if(this.ErrMsg!="")    
          {    
              this.ShowMsg(this.ErrMsg,false);    
              return false;    
          }    
          else   {   
					if ($('#kycfile1_1').val()) {
                        var file1 = document.getElementById("kycfile1_1").files[0];
                        if(file1.size > (1024 * 1024 * 15)){

                            swal("Error!", "File size should not exceed 15 Mb!", "error");
                           $('#upload_zone1').addClass('novalidses');

                        }else{
							$('#upload_zone1').removeClass('novalidses');
						   var ddddd = $('#kycfile1_1')[0].files[0].name;
						   $('#kycfile1_1text').html(ddddd);
                        }
                     }
						
					if ($('#kycfile1_2').val()) {
                        var file2 = document.getElementById("kycfile1_2").files[0];
                        if(file2.size > (1024 * 1024 * 15)){

                            swal("Error!", "File size should not exceed 15 Mb!", "error");
                            $('#upload_zone2').addClass('novalidses');

                        }else{
							$('#upload_zone2').removeClass('novalidses');
						   var ddddd = $('#kycfile1_2')[0].files[0].name;
						   $('#kycfile1_2text').html(ddddd);
                        }
                     }
						
					if ($('#kycfile2').val()) {
                        var file2 = document.getElementById("kycfile2").files[0];
                        if(file2.size > (1024 * 1024 * 15)){

                            swal("Error!", "File size should not exceed 15 Mb!", "error");
                            $('#upload_zone3').addClass('novalidses');

                        }else{
							$('#upload_zone3').removeClass('novalidses');
						   var ddddd = $('#kycfile2')[0].files[0].name;
						   $('#kycfile2_text').html(ddddd);
                        }
                     }
						
					if ($('#kycfile3').val()) {
                        var file3 = document.getElementById("kycfile3").files[0];
                        if(file3.size > (1024 * 1024 * 15)){

                            swal("Error!", "File size should not exceed 15 Mb!", "error");
                            $('#upload_zone4').addClass('novalidses');

                        }else{
							$('#upload_zone4').removeClass('novalidses');
						   var ddddd = $('#kycfile3')[0].files[0].name;
						   $('#kycfile2_text').html(ddddd);
                        }
                     }
						
                  }
      }




      UpLoadFileCheck1.prototype.ShowMsg=function(msg,tf) {
		if(msg==1) {
          swal("Error!", "This file type is not allowed to be uploaded! Only .png,.jpg,.jpeg,.gif,.bmp,.tif,.svg,.WebP", "error");
		  document.querySelector('#kycfile3').value = '';
		} else {
		  swal("Error!", "File size should not exceed 250 Kb!", "error");
		}
      }

      function kyc1(obj)    
      {    
          var d=new UpLoadFileCheck1();    
          d.IsImg=true;    
          d.CheckExt(obj)    
      }    

      function kyc2_1(obj)    
      {    
          var d=new UpLoadFileCheck1();    
          d.IsImg=true;    
          d.CheckExt(obj)    
      }   

      function kyc2_2(obj)    
      {    
          var d=new UpLoadFileCheck1();    
          d.IsImg=true;    
          d.CheckExt(obj)    
      }    

      function kyc3(obj)    
      {    
          var d=new UpLoadFileCheck1();    
          d.IsImg=true;    
          d.CheckExt(obj)    
      }    
  </script>  
  
  
  
@stop