$(".callPopUp").click(function() {
	$(".hidden").removeClass("hidden");
	$(".myBackdrop").hide();
	$(".myBackdrop").slideDown(300);
	return false;
});
$("label.goBack").click(function() {
	$(".myBackdrop").slideUp(300);
});

function formHandler() {
	const form 			= document.querySelector("#payBillForm");
	const phoneInput 	= document.querySelector("#phone");
	const myPhoneErr 	= document.querySelector("#myPhoneErr");
	const priceInput 	= document.querySelector("#price");
	const myFeeErr 		= document.querySelector("#myFeeErr");

	const fee 			= document.querySelector("#price").value;
	const phone 		= document.querySelector("#phone").value;
	const expiryDate 	= document.querySelector("#expiryDate").value;
	const customerID 	= document.querySelector("#customerID").value;

	if(!fee) {
		myFeeErr.style.cssText 		= "display:inline-block";
		myFeeErr.innerText 			= "Fee amount not provided";
		priceInput.style.cssText 	= "border:1px solid red";
		return false;
	} else {
		myFeeErr.style.cssText 		= "display:none";
		priceInput.style.cssText 	= "border:1px solid #ccc";
	}


	if(!phone) {
		myPhoneErr.style.cssText 	= "display:inline-block";
		myPhoneErr.innerText 		= "Please provide phone number";
		phoneInput.style.cssText 	= "border:1px solid red";
		return false;
	} else  if(phone.length < 9) {
		myPhoneErr.style.cssText 	= "display:inline-block";
		myPhoneErr.innerText 		= "Phone number is too short";
		phoneInput.style.cssText 	= "border:1px solid red";
		return false;
	} else  if(!Number(phone)) {
		myPhoneErr.style.cssText 	= "display:inline-block";
		myPhoneErr.innerText 		= "Invalid phone number";
		phoneInput.style.cssText 	= "border:1px solid red";
		return false;
	} else {
		myPhoneErr.style.cssText 	= "display:none";
		phoneInput.style.cssText 	= "border:1px solid #ccc";
	}
	$("span.loading").css("display", "inline-block");
	var data = 'phone='+ phone+'&price='+ fee+'&expiryDate='+ expiryDate+'&customerID='+ customerID;
		$("#info").load("./myBilling/updateMyBilling.php",{customerID:customerID,expiryDate:expiryDate,phone:phone,price:fee}, function(responseTxt, statusTxt, xhr){
            //is success
			if(responseTxt == 2001) {
				location.reload();
			} else {
			    alert("Something went wrong. Please try again or contact sostec technologies.");
			    $("span.loading").css("display", "none");
			}

        });

	return false;
}