{{\App::setLocale(Session::get('locale'))}}
@extends('layouts.auth')
@section('title', trans('Register'))
@section('content') 
<div class="container"> 
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
            	@php
					if(isset($_GET['ref'])){
						$params = explode("|", $_GET['ref']);
					}
					else{
						$params=[];
					}
				@endphp
                <div class="card-header">{{ __('Register') }}</div>
				<div class="card-body"> 
					@includeIf('components.error-success-message')
					<form id="frmREG" enctype="multipart/form-data" method="POST" action="{{ route('register') }}">
						{{ csrf_field() }}
						<div class="form-group row">
							<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('w.ic_name') }}*</label>
							<div class="col-md-6">
								<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
								
								@if($errors->has('name'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('name') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row">
							<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('w.ic_no') }}*</label>
							<div class="col-md-6">
								<input id="ic_no" type="text" class="form-control" name="ic_no" value="{{ old('ic_no') }}" required autocomplete="ic_no" autofocus>
								@if($errors->has('ic_no'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('ic_no') }}</strong>
									</span>
								@endif
							</div>
						</div>

						<div class="form-group row">
							<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('w.email_address') }}*</label>

							<div class="col-md-6">
								<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autocomplete="email">
								@if($errors->has('email'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('email') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row">
							<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('w.mobile_no') }}*</label>
							<div class="col-md-6">
								<input id="mobile" type="text" class="form-control" name="mobile" value="{{ old('mobile') }}" required autocomplete="mobile" autofocus>
								@if($errors->has('mobile'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('mobile') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row">
							<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('w.referral_code')}}</label>
							<div class="col-md-6">
								<input id="ref_code" type="text" class="form-control" name="ref_code" value="{{(isset($_GET['ref']))?($_GET['ref']):(old('ref_code'))}}" autocomplete="ref_code" autofocus>
								@if($errors->has('ref_code'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('ref_code') }}</strong>
									</span>
								@endif
							</div>
						</div>

						<div class="form-group row">
							<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Login Password') }}*</label>
							<div class="col-md-6">
								<input id="password" type="password" class="form-control" name="password" required autocomplete="new-password">
								@if($errors->has('password'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('password') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row">
							<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('w.retype_password') }}*</label>
							<div class="col-md-6">
								<input id="password_confirmation" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
								@if($errors->has('password_confirmation'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('password_confirmation') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row">
							<label for="password" class="col-md-4 col-form-label text-md-right"></label>
							<div class="col-md-6">
								<div class="input-group mb-3">
									<input type="text" class="form-control" id="otp_code" name="otp_code" placeholder="OTP">
									<div class="input-group-append">
										<button id="btnSendOTP" class="btn btn-info" type="button">Send OTP</button>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group row">
							<label for="password" class="col-md-4 col-form-label text-md-right"></label>
							<div class="col-md-6">
								<div class="input-group mb-3">
									<img src="{{\Captcha::src()}}" class="form-control" id="cimage" class="" height="40"/>
									<div class="input-group-append">
										<button class="btn btn-info" 
											onclick="document.getElementById('cimage').src='{{url('/')}}/captcha/default?'+Math.random();document.getElementById('captcha').focus();"
											id="change-image"
											type="button">
											<i class="fa fa-refresh" style="color:#fff"></i>
										</button>
									</div>
								</div>
							</div>
						</div>
						
						<div class="form-group row">
							<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('w.verification_code') }}*</label>
							<div class="col-md-6">
								<input id="captcha" type="text" class="form-control" name="captcha" value="{{ old('captcha') }}" required autocomplete="captcha" autofocus>
								@if($errors->has('captcha'))
									<span class="invalid-feedback" role="alert">
										<strong>{{ $errors->first('captcha') }}</strong>
									</span>
								@endif
							</div>
						</div>
						
						<div class="form-group row mb-0">
							<div class="col-md-6 offset-md-4">
								<button type="submit" class="btn btn-success">
									{{ __('Register') }}
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
        </div>
    </div>
</div>
@endsection
@section('extra-script')
@includeIf('user.common.sweetalert')
	<style>label.error {
	color: #f00;
	font-size: 12px;
}</style>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script> 
function readURL(input,targetID=false) {
	if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
			if(targetID != false){
				var targetDiv = $('.'+targetID);
				targetDiv.html("");
				var img = document.createElement("img");
				img.src = e.target.result;
				img.className = "img-responsive img-fluid";
				
				targetDiv.fadeOut(10);
				targetDiv.html(img);
				targetDiv.fadeIn();
			}else{
				$('#doc_img').attr('src', e.target.result);
			}
        }
		reader.readAsDataURL(input.files[0]);
    }
}
$(document).ready(function(){
	$(".doc_img_field").change(function(){
		readURL(this,$(this).attr('id'));
	});
	
	$("#btnSendOTP").click(function() {
		var elObj = $(this);
		elObj.attr("disabled", true);
		
		$.ajax({
			url: '{{ route("public.otp.register.sent") }}',
			type: 'POST',
			data: {
 				mobile: $('#mobile').val(),
 				"_token": "{{ csrf_token() }}",
 			},
			success: function(s) {
				200 == s.error ? (
					setTimeout(countDown, 1000, elObj), $("#mobile").attr("readonly",true)
				) : (
					swal("@lang('word.error')", s.message, "error"), elObj.attr("disabled", false),$("#mobile").removeAttr("readonly",false)
				)
			}
		});
	});
	var n = 60;
	function countDown(e) {
		--n > 0 ? (setTimeout(countDown, 1e3, e), e.html("00:" + (n < 10 ? "0" + n : n))) : (e.html("@lang('word.send_otp')"), e.attr("disabled", !1), n = 60)
	}
});
$.validator.addMethod("exactlength", function(value, element, param) {
 return this.optional(element) || value.length == param;
});
$("#frmREG").validate({ 
	ignore: ".ignore",
	rules: {
		name:{
			required: !0,
		},
		ic_no:{
			required: !0,
		},
		email:{
			required: !0,
		},
		mobile:{
			required: true,
			maxlength: 11,
			minlength: 7,
			number: true
		},
		ref_code:{
			required: false,
		},
		password: {
			required: true,
			exactlength: 6,
			digits: true
		},
		password_confirmation: {
			required: true,
			equalTo : "#password",
		},
		otp_code: {
			required: true,
			number: true,
		},
		captcha: {
			required: true,
		},
	},
	messages: {
	},
	/*errorPlacement: function (error, element) {
		if (element.attr("id") == "otp_code") {
			error.insertAfter($(element).closest('.form-group'));
		}
	},*/
	submitHandler: function(form) {
		form.submit();
	}
});
</script>
@endsection