<!DOCTYPE html>
<html>

<head>
	<title>Login Register App</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="./css/main.css">


	<script type="text/javascript">
		$(document).ready(() => {

			$("#form1").submit((event) => {
				event.preventDefault();

				$.ajax({
					type: 'POST',
					url: '/',
					data: $('#form1').serialize(),
					dataType: "json",
					success: (response) => {
						console.log(`in success part.. ${response}`)
						if (response.Error) {
							$('#form1')[0].reset();
							console.log(`in success part if line 28 ${response.Error}`)
							document.getElementById("check").innerHTML = response.Error;
							setTimeout(() => {
								document.getElementById("check").innerHTML = "";
							}, 10000);
							if (response.Success == "You are regestered,You can login now.") {
								document.getElementById("aa").click();
							};
						}
						else {
							$('#form1')[0].reset();
							console.log(`in success part ${response.email}`)
							document.getElementById("check").innerHTML = response.Success+ " " + response.email;
							document.getElementById("email_input").innerHTML = "";

							// setTimeout(() => {
							// 	document.getElementById("check").innerHTML = "";
							// }, 10000);
							if (response.Success == "You are regestered,You can login now.") {
								document.getElementById("aa").click();
							};
						}
					},
					error: () => {
					}
				})
			});
		});
	</script>
</head>

<body>

	<div class="col-md-4 col-md-offset-4 form-card">
		<div>
			<p>Register Now
			</p>
			<div class="mssg bg-danger">
				<span id="check"></span>
			</div>
			<br>
		</div>
		<div class="form-group">
			<form id="form1" method="post">
				<input type="text" name="email" placeholder="E-mail"
					pattern="[-!#$%&'*+\/0-9=?ก-๙A-Z^_a-z`{|}~](\.?[-!#$%&'*+\/0-9=?ก-๙A-Z^_a-z`{|}~])*@[ก-๙a-zA-Z0-9](-*\.?[ก-๙a-zA-Z0-9])*\.[ก-๙a-zA-Z](-?[ก-๙a-zA-Z0-9])+$"
					class="form-control" id="email_input"><br />
				<!-- <input type="number" name="phone" placeholder="Phone" class="form-control"
					value="<%= typeof phone != 'undefined' ? phone : '' %>"><br /> -->
				<input type="hidden" name="apps_data" placeholder="Apps Data" class="form-control"
					value="PreSchool">
				<!-- <input type="text" name="username" placeholder="Name" class="form-control"
					value="<%= typeof username != 'undefined' ? username : '' %>"><br />
				<input type="password" name="password" placeholder="Password" class="form-control" value=""><br />
				<input type="password" name="passwordConf" placeholder="Confirm Password" class="form-control"
					value=""><br /> -->
					<br>
				<input type="submit" value="Register" class="btn btn-success">
			</form>
		</div>

		<div>
			<span>Already Registered! <a href="/login">Login</a></span>
		</div>
		<div id="LangTable"><a href="/login" id="aa"></a>
		</div>
	</div>

</body>

</html>