$(function () {
	var iti = $("#phone_number").intlTelInput({
		formatOnDisplay: true,
		nationalMode: true,
		separateDialCode: true,
		autoHideDialCode: false,
		autoPlaceholder: "polite",
		formatOnDisplay: true,
	});

	$("#countryName").on("change", function () {
		var selected = $("#countryName option:selected").val();
		$("#phone_number").intlTelInput("setCountry", selected);
	});

	$("#create-account").click(function (event) {
		event.preventDefault();

		$("#feedbackPrompt").hide();
		$("#feedbackPrompt").html("");

		$("#create-account").attr("disabled", "");

		$(".fname_feedback").hide();
		$(".lname_feedback").hide();
		var fname = $("input#fname").val();
		var lname = $("input#lname").val();
		if (fname == "") {
			$(".fname_feedback").show();
			$("input#fname").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		}

		if (lname == "") {
			$(".lname_feedback").show();
			$("input#lname").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		}


		$(".email_feedback").hide();
		var email_pattern =
			/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		var email = $("input#email").val();
		if (email == "" || !email.match(email_pattern)) {
			$(".email_feedback").html("Enter a valid email address.");
			$(".email_feedback").show();
			$("input#email").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		}

		$(".password_feedback").hide();
		var password = $("input#password").val();
		if (password == "") {
			$(".password_feedback").html("Password cannot be empty.");
			$(".password_feedback").show();
			$("input#password").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		} else if (password.length < 5) {
			$(".password_feedback").html(
				"Password length cannot be less than 5 characters."
			);
			$(".password_feedback").show();
			$("input#password").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		}

		$(".mobile_feedback").hide();
		var mobile_pattern =
			/^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;

		var countryData = $("#phone_number").intlTelInput(
			"getSelectedCountryData"
		);
		var dialCode = countryData.dialCode;
		var mobile = $("input#phone_number").val();
		var referral_code = $("input#referral_code").val();

		var usr_number = "+" + dialCode + mobile;
		console.log("Proceed");

		if (mobile == "") {
			$(".mobile_feedback").html("Phone number cannot be empty.");
			$(".mobile_feedback").show();
			$("input#inputPhoneNumber").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		} else if (!usr_number.match(mobile_pattern)) {
			$(".mobile_feedback").html("Enter a valid phone number.");
			$(".mobile_feedback").show();
			$("input#inputPhoneNumber").focus();

			$("#create-account").removeAttr("disabled");
			return false;
		}

		$(".button_spinner").show();
		var country = $("#countryName option:selected").text();

		$("input#fullname").prop("disabled", true);
		$("input#email").prop("disabled", true);
		$("input#password").prop("disabled", true);
		$("input#inputPhoneNumber").prop("disabled", true);
		$("input#referral_code").prop("disabled", true);
		$("#countryName").prop("disabled", true);
		
		
		var token = grecaptcha.getResponse();
        if (token == "") {
            // If reCAPTCHA is not checked
            $("#feedbackPrompt").html('<div class="alert alert-danger" role="alert">Please complete the reCAPTCHA.</div>');
            $("#feedbackPrompt").show();
            return false;
        }

		var form_data =
		 "&g-recaptcha-response=" + token + "&firstname=" +
			fname +
			"&lastname=" +
			lname +
			"&email=" +
			email +
			"&country=" +
			country +
			"&referral_code=" +
			referral_code +
			"&mobile=" +
			usr_number +
			"&password=" +
			encodeURIComponent(password);

		$.ajax({
			url: "helpers/create-account",
			type: "POST",
			data: form_data,
		}).done(function (response) {
			if (response == "success") {
				$("#feedbackPrompt").html(
					'<div class="alert alert-success" role="alert"> A verification link has been sent to ' +
						email +
						". Please check to verify.</div>"
				);
				$("input#fullname").val("");
				$("input#email").val("");
				$("input#emailconfirm").val("");
				$("input#phone_number").val("");
				$("input#password").val("");
				$("input#passwordconfirm").val("");
			} else {
				$("#feedbackPrompt").html(
					'<div class="alert alert-danger" role="alert">' +
						response +
						"</div>"
				);
			}

			$("#feedbackPrompt").show();
			$("#create-account").removeAttr("disabled");
			$(".button_spinner").hide();

			$("input#fullname").prop("disabled", false);
			$("input#email").prop("disabled", false);
			$("input#password").prop("disabled", false);
			$("input#inputPhoneNumber").prop("disabled", false);
			$("input#referral_code").prop("disabled", false);
			$("#countryName").prop("disabled", false);
		});
		return false;
	});

	// show/hide password
	const togglePassword = document.querySelector('#togglePassword');
	const password = document.querySelector('#password');

	togglePassword.addEventListener('click', function (e) {
		// toggle the type attribute
		const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
		password.setAttribute('type', type);
		// toggle the eye slash icon
		this.classList.toggle('fa-eye-slash');
	});
});
