<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>모바일센터 관리시스템</title>
<script src="<c:out value="/js/jquery-3.5.1.min.js" />"></script>
<script src="<c:out value="/js/bootstrap-3.3.2.min.js" />"></script>
<link href="<c:out value="/css/normalize.css" />" rel="stylesheet">
<link href="<c:out value="/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:out value="/css/style.css" />" rel="stylesheet">
</head>
<body>
	<header class="header">
		<div class="header_title"><a href="/">모바일센터 관리시스템</a></div>
		<div class="header_menu"></div>
	</header>

	<section class="join_section">
		<div class="join_top">
			<h2>
				<span class="glyphicon glyphicon-edit"></span> 회원 정보 입력
			</h2>
		</div>
		<form:form commandName="userVO" name="insertFrm" action="/insertUser" id="insertFrm" autocomplete="off" method="post">
			<table class="join_table">
				<tbody>
					<tr>
						<th>아이디</th>
						<td>
							<input type="text" class="form-control" name="userid" id="id" />
							<span id="idMsg"></span>
						</td>
					</tr>
					<tr>
						<th>비밀번호</th>
						<td><input type="password" class="form-control" id="password"name="password" value="" /></td>
					</tr>
					<tr>
						<th>비밀번호 확인</th>
						<td><input type="password" class="form-control" id="passwordCheck" name="passwordCheck" value="" /></td>
					</tr>
					<tr>
						<th>이름</th>
						<td><input type="text" class="form-control" name="name" id="name" /></td>
					</tr>
					<tr>
						<th>소속기관</th>
						<td><input type="text" class="form-control" name="company" id="company" /></td>
					</tr>
					<tr>
						<th>연락처</th>
						<td><input type="text" class="form-control" name="phonenum" id="phonenum" /></td>
					</tr>
					<tr>
						<th>이메일</th>
						<td>
							<div>
								<input type="text" class="form-control" name="email" id="email" />
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="join_bottom" style="padding-top: 10px">
				<p>※ 회원 가입을 요청한 후에 승인을 기다려주세요.</p>
				<p class="join_bottom_p"><input class="btn_join big on" type="submit" value="가입신청" onclick="join(); return false;" /></p>
			</div>
 		</form:form>

		<script type="text/javascript">
			var token = $("meta[name='_csrf']").attr("content");
			var header = $("meta[name='_csrf_header']").attr("content");
			
			var checkId = false;
			var getId= RegExp(/^[a-zA-Z0-9]{5,12}$/);
			var getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
			
			$(document).ready(function(){
			    $("#id").focusout(function(){
		        	var id = $(this).val();
		        	if (id == "" || id == undefined || id == null) {
						$("#idMsg").text("아이디를 입력해주세요.");
						checkId = false;
						return false;
					} else if(!getId.test(id)){
						$("#idMsg").text("5~20자의 영문 소문자, 숫자만 사용 가능합니다.");
						checkId = false;
						return false;
					}else {
						$.ajax({
							url : "/userIdCheck",
							type : "GET",
							data : {
								"checkId" : id
							},
							success : function(data) {
								if (data == "duplicate") {
									$("#idMsg").text("이미 존재하는 아이디 입니다.");
									checkId = false;
								} else if (data == "ok") {
									$("#idMsg").text("사용 가능한 아이디 입니다.");
									checkId = true;
								}
							},
							error : function(request, status, error) {
								alert("접속 실패 관리자에게 문의해주세요.");
							}
						});
					}
		        });
		  	});

			function join() {
				var pw1 = $('#password').val();
				var pw2 = $('#passwordCheck').val();
				var name = $('#name').val();
				var company = $('#company').val();
				var tell = $('#phonenum').val();
				var email_1 = $('#email').val();

				if (!checkId) {
					alert('아이디를 확인해주세요.');
					$('#id').focus();
				} else if (pw1 == "") {
					alert('비밀번호를 입력해주세요');
					$('#password').focus();
					return;
				} else if (pw2 == "") {
					alert('비밀번호를 입력해주세요');
					$('#passCheck').focus();
					return;
				} else if (pw1 != pw2) {
					alert('비밀번호가 일치하지 않습니다.');
					$('#pass').focus();
					return;
				} else if (name == "") {
					alert('이름을 입력해주세요');
					$('#name').focus();
					return;
				} else if (company == "") {
					alert('소속기관을 입력해주세요');
					$('#company').focus();
					return;
				} else if (tell == "") {
					alert('연락처를 입력해주세요');
					$('#phone_num').focus();
					return;
				} else if (email_1 == "") {
					alert('이메일을 입력해주세요');
					$('#email').focus();
					return;
				} else {
					$("#insertFrm").submit();
				}
			}
		</script>
	</section>
</body>
</html>
