var signupConfig = {
  "captchaClientKey": "6LeK36QZAAAAAE1ISOaINRvH2y2v6paarhwXsSQj",
  "data": null,
  "context": "https://portal.probookies.com/"
};
var SIGNUP_LABELS = {
	'enter_agent_name': 'Agent Name',
	'enter_email_address': 'Email Address',
	'enter_phone_number': 'Phone Number',
	'phone_help': 'Only enter your national number (without country calling code and leading zero). Only digits allowed.',
	'enter_num_players': 'Number of Players',
	'setup_account_now': 'SETUP ACCOUNT NOW',
	'btn_next': 'NEXT',
	'btn_submit': 'SUBMIT',
	'password': 'Password',
	'enter_name': 'Enter Name',
	'confirm_password': 'Confirm Password',
	'country_select': '[Select your Country]',
	'email_code': 'Email verification code',
	'sms_code': 'SMS verification code',
	'valid_phone_msg': '<br />Please specify a valid phone number',
	'valid_agent_name': 'Agent name is valid.',
	'agent_already_taken_1' : 'Agent name is already taken.',
	'agent_already_taken_2' : 'Agent name is already taken. You can choose one of following agent names: $$data$$',
	'phone_invalid': 'Phone number is invalid.',
	'email_invalid': 'Email is invalid.',
	'wrong_code': 'You have entered a wrong code.',
	'email_invalid': 'Email is invalid or rejected.',
	'email_suggested': 'Did you mean',
	'email_existed': 'There is an account with this exact email. Please contact Customer Service to retrieve your account.',
	'no_space_error' : 'Space are not allowed',
	'verification_label' : 'Please enter either one of these verification codes',
	'create_agent_failed': 'Cannot create new agent.',
	'resend_code_wrap': "Didn't get the email?, check your Spam, Promotions, or Updates folder.",
	'resend_code': 'click here to resend the code'
};
var _self;
var globalForm;
var globalSubmit;
var globalAgentNameElement;
var globalOptions;
$.fn.bpsignup = function (options) {
    _self = this;
	if( typeof confirmation !== 'undefined' )
		buildFormStep4(options);
	else
		buildFormStep3(options);
};

function buildFormStep3(options) {

	$.ajax({
		url : signupConfig.context + 'signup?cmd=7',
		type : 'POST',
		dataType : 'jsonp',
		beforeSend: function() {
			$(_self).empty();
			globalOptions = options
		},
		jsonpCallback: 'handleCountry'

	});	
}

function handleCountry(response) {
	var frm = $('<form>');
	var options = globalOptions;
	frm.append('<script src="https://www.google.com/recaptcha/api.js"></script>');
	frm.attr('method', 'POST');
	
	var rowAgentName = $('<div>').addClass('form-row form-group required').attr('id', 'row-agentName').appendTo(frm);
	var inputAgentName = $('<input>').attr({'type':'text', 'id':'idAgentName' , 'name':'idAgentName', 'placeholder':SIGNUP_LABELS['enter_agent_name'], 'maxlength':'150'}).addClass('form-control').appendTo(rowAgentName);
	
	var rowNumPlayers = $('<div>').addClass('form-row form-group required').attr('id', 'row-numPlayers').appendTo(frm);
	var inputNumPlayers = $('<input>').attr({'type':'number', 'min':'1', 'max':'10000' , 'id':'idNumPlayers', 'name':'idNumPlayers', 'placeholder':SIGNUP_LABELS['enter_num_players'], 'maxlength':'150'}).addClass('form-control').appendTo(rowNumPlayers);
	
	var rowEmail = $('<div>').addClass('form-row form-group required').attr('id', 'row-email').appendTo(frm);
	var inputEmail = $('<input>').attr({'type':'text', 'id':'idEmail' , 'name':'idEmail', 'placeholder':SIGNUP_LABELS['enter_email_address'], 'maxlength':'150'}).addClass('form-control').val(options.email).appendTo(rowEmail);
	
	var rowCountry = $('<div>').addClass('form-row form-group required').attr('id', 'row-country').appendTo(frm);
	
	var selCountry = $('<select>').attr({'id':'idCountry','name':'idCountry'}).addClass('form-control').appendTo(rowCountry);
	$('<option>').attr('value', '').text(SIGNUP_LABELS['country_select']).appendTo(selCountry);
	
	var rowPhone = $('<div>').addClass('form-row form-group required').attr('id', 'row-phone').appendTo(frm);
	
	var groupPhone = $('<div>').addClass('input-group').appendTo(rowPhone);
	var groupPhonePre = $('<div>').addClass('input-group-prepend').appendTo(groupPhone);
	var spanPhonePre = $('<span>').addClass('input-group-text').attr('id', 'idPhonePre').appendTo(groupPhonePre);
	var inputPhone = $('<input>').attr({'type':'text', 'id':'idPhone', 'name':'idPhone', 'placeholder':'', 'maxlength':'11'}).addClass('form-control').appendTo(groupPhone);
	$('<small>').addClass('form-text text-info').html(SIGNUP_LABELS['phone_help']).appendTo(rowPhone);
	$('<input>').attr({'type':'hidden', 'id':'phoneNumber' , 'name':'phoneNumber'}).appendTo(rowPhone);
	
	var rowPassword = $('<div>').addClass('form-row form-group required').attr('id', 'row-password').appendTo(frm);
	var inputPassword = $('<input>').attr({'type':'password', 'id':'password' , 'name':'password', 'placeholder':SIGNUP_LABELS['password'], 'autocomplete':'off', 'maxlength':'50'}).addClass('form-control').appendTo(rowPassword);
	
	var rowPasswordTo = $('<div>').addClass('form-row form-group required').attr('id', 'row-passwordTo').appendTo(frm);
	var inputPasswordTo = $('<input>').attr({'type':'password', 'id':'passwordTo' , 'name':'passwordTo', 'placeholder':SIGNUP_LABELS['confirm_password'], 'maxlength':'50'}).addClass('form-control').appendTo(rowPasswordTo);
	
	if( options.captchaClientKey ){
		var rowCaptcha = $('<div>').addClass('form-row form-group required').attr('id', 'row-captcha').appendTo(frm);
		
		$('<div>')
		  .addClass('g-recaptcha')
		  .attr('data-sitekey', options.captchaClientKey)
		  .attr('data-expired-callback', 'recaptchaExpired')
		  .appendTo(rowCaptcha);
		rowCaptcha.append('<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">');
	}
	
	for(var i = 0; i <  response.length ; i++) {
		var c= response[i];
		if(c.selected) {
			$('<option>').attr({'value':c.countryCode, 'data-calling-code':c.callingCode, 'data-sample-number':c.sampleNumber, 'selected': true}).text(c.country).appendTo(selCountry);
			$(spanPhonePre).text('+' + c.callingCode);
		} else {
			$('<option>').attr({'value':c.countryCode, 'data-calling-code':c.callingCode, 'data-sample-number':c.sampleNumber}).text(c.country).appendTo(selCountry);
		}
		
	}
	var buttonSubmit = $('<button>').addClass('btn btn-primary btn-block').attr('type', 'submit').text(SIGNUP_LABELS['setup_account_now']).appendTo(frm);
	
	selCountry.on('change', function() {
		  if($(this).val()) {
			  var selected = $(this).find('option:selected');
			  $('#idPhonePre').text('+' + $(selected).attr('data-calling-code'));
		  } else {
			  $('#idPhonePre').text('');
		  }
		  
	});
	
	inputAgentName.on('change', function(e){
		let agentName = $(this).val();
		if( (typeof agentName !== 'undefined' && agentName !== '') && agentName.length > 2 ){
			validateAgent(frm,rowAgentName,false);
		}
	});
	
	
	jQuery.validator
	.addMethod(
			"phoneno",
			function(phone_number, element) {
				
				return this.optional(element)
						|| phone_number.length > 7
						&& phone_number
								.match(/^[1-9][0-9]*$/);
			}, SIGNUP_LABELS['valid_phone_msg']);
			
	jQuery.validator.addMethod("noSpace", function(value, element) { 
			    return value.indexOf(" ") < 0 && value != ""; 
			  }, SIGNUP_LABELS['no_space_error']);
	
	buttonSubmit.click(function (e) {
		e.preventDefault();
		var fullPhone = $('#idPhonePre').text() + $('#idPhone').val();
		$('#phoneNumber').val(fullPhone);
		var btn = $(this);
		var form =frm;
		
		form.validate({
			ignore: ".ignore",
			rules: {
				idAgentName: {
					required: true,
					noSpace: true,
					maxlength: 8
				},
				idEmail: {
					required: true,
					email: true
				},
				idCountry: {
					required: true
				},
				password: {
					required: true
				},
				passwordTo: {
					required: true,
					equalTo : "#password"
				},
				idPhone: {
					required: true,
					maxlength: 11,
					phoneno : true
				},
				hiddenRecaptcha: {
	                required: function () {
	                    if (grecaptcha.getResponse() == '') {
	                        return true;
	                    } else {
	                        return false;
	                    }
	                }
	            }
			}
		});

		if (!form.valid()) {
			return;
		} else {
			validateAgent(frm,rowAgentName,true);
		}

	});
	
	frm.appendTo(_self);
}

function recaptchaExpired() {
    grecaptcha.reset();
}


function buildFormStep4(options) {
	var allowSms = options.data;
	
	$(_self).empty();
	var frm = $('<form>');
	frm.attr('method', 'POST');
	
	if(allowSms) {
		var rowLabelCode = $('<div>').addClass('form-row form-group').appendTo(frm);
		var label = $('<label>').text(SIGNUP_LABELS['verification_label']).appendTo(rowLabelCode);
		
		var rowSmsCode = $('<div>').addClass('form-row form-group').attr('id', 'row-smscode').appendTo(frm);		
		var inputSmsCode = $('<input>').attr({'type':'text', 'id':'smsCode' , 'name':'smsCode', 'placeholder':SIGNUP_LABELS['sms_code'], 'maxlength':'150'}).addClass('form-control').appendTo(rowSmsCode);		
	}
	var rowEmailCode = $('<div>').addClass('form-row form-group').attr('id', 'row-emailcode').appendTo(frm);
	
	var inputEmailCode = $('<input>').attr({'type':'text', 'id':'emailCode' , 'name':'emailCode', 'placeholder':SIGNUP_LABELS['email_code'], 'maxlength':'150'}).addClass('form-control').appendTo(rowEmailCode);	
	
	
	var buttonSubmit = $('<button>').addClass('btn btn-primary btn-block').attr('type', 'submit').text(SIGNUP_LABELS['btn_submit']).appendTo(frm);
	
	var resendCodeDiv = $('<div>').addClass('form-row form-group').attr('id', 'row-resendcode').appendTo(frm);
	
	var resendText = $('<span>').text(SIGNUP_LABELS['resend_code_wrap']).appendTo(resendCodeDiv);
	var resendLinkWrap = $('<div>').text('Or ').appendTo(resendCodeDiv);
	var resendLink = $('<a>').attr('href', '#').text(SIGNUP_LABELS['resend_code']).appendTo(resendLinkWrap);
	
	resendLink.click(function(e) {
		resendCode();
	});
	
	buttonSubmit.click(function (e) {
		e.preventDefault();
		
		var form =frm;
		if(allowSms) {
			form.validate({
				rules: {
					smsCode: {
						minlength: 6,
						maxlength: 6,
						required: '#emailCode:blank'
					},
					emailCode: {
						minlength: 6,
						maxlength: 6,
						required: '#smsCode:blank'
					}
				}
			});
		} else {
			form.validate({
				rules: {
					
					emailCode: {
						minlength: 6,
						maxlength: 6,
						required: true
					}
				}
			});
		}
		

		if (!form.valid()) {
			return;
		} else {
			submitStep4(form);
		}

	});
	
	frm.appendTo(_self);
}


function validateAgent(form,rowAgentName,isSubmit) {
	
	$.ajax({
		url : signupConfig.context+ 'signup?cmd=2',
		type : 'POST',
		data : form.serialize(),
		dataType : 'jsonp',
		beforeSend: function() {
			$('label.error').remove();
			$('small.text-info').remove();
			globalForm = form;
			globalSubmit = isSubmit;
			globalAgentNameElement = rowAgentName;
			$('button').prop('disabled', true);
		},
		jsonpCallback: 'handleValidateAgent'
	});
}

function handleValidateAgent(response) {
	$('button').prop('disabled', false);
	if(response.errorCode == 0) {
		if(globalSubmit) {
			submitStep3(globalForm);
		}
		globalAgentNameElement.append('<small class="form-text text-info">'+ SIGNUP_LABELS[response.errorMessage] +'</small>')
		
	} else {
		$('button').prop('disabled', true);
		globalAgentNameElement.append('<label id="idAgentName-error" class="error" for="idAgentName">'+ SIGNUP_LABELS[response.errorMessage].replace('$$data$$', response.data  ? response.data :'') +'</label>');
	}
}

function showMsg(form, msg) {
	var html = '<div class="alert msg-error alert-danger alert-dismissible fade show" role="alert">' + msg +'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
	form.prepend(html);
}

function submitStep3(form) {
	globalForm = form;
	$.ajax({
		url : signupConfig.context+ 'signup?cmd=5',
		type : 'POST',
		data : form.serialize(),
		dataType : 'jsonp',
		beforeSend: function() {
			$('.msg-error').remove();
			$('button').prop('disabled', true);
		},
		jsonpCallback: 'handleStep3'
	});
}

function handleStep3(options) {
	$('button').prop('disabled', false);
	if(options.errorCode == 0) {
		if( options.thankYouUrl )
			location.href = options.thankYouUrl;
		else{
			location.href = signupConfig.context + 'thank-you';
		}
	} else {
		var msg = SIGNUP_LABELS[options.errorMessage] ? SIGNUP_LABELS[options.errorMessage]: options.errorMessage;
		showMsg(globalForm,msg );
	}	
}

function submitStep4(form) {
	globalForm = form;
	$.ajax({
		url : signupConfig.context+ 'signup?cmd=6',
		type : 'POST',
		data : form.serialize(),
		dataType : 'jsonp',
		jsonpCallback: 'handleStep4',
		beforeSend: function() {
			$('button').prop('disabled', true);
			$('.msg-error').remove();
		}
	});
}

function handleStep4(options) {
	$('button').prop('disabled', false);
	if(options.errorCode == 0) {
		location.href = options.data;
	} else {
		var msg = SIGNUP_LABELS[options.errorMessage] ? SIGNUP_LABELS[options.errorMessage]: options.errorMessage;
		showMsg(globalForm,msg );
	}
}

function resendCode() {
	$.ajax({
		url : signupConfig.context+ 'signup?cmd=9',
		type : 'POST',
		dataType : 'jsonp',
		beforeSend: function() {
			$(_self).empty();
		},
		jsonpCallback: 'handleStep3'
	});
}