<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/tags.jspf"%>

<script src="/clfd/js/utils.js?ver=1.1"></script>
<script src="/clfd/js/validation/common-validation.js?ver=1.1"></script>
<script src="/clfd/js/user/userService.js?ver=1.1"></script>
<script src="/clfd/js/user/myPage.js?ver=1.1"></script>
<script src="/clfd/lib/cleave/cleave.min.js"></script>

<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box box-primary">
				<div class="box-header">
					<h3 class="box-title"><i class='material-icons' style='font-size:16px;'>play_arrow</i>&nbsp;&nbsp;마이페이지</h3>
				</div>
				<div class="box-body">
					<form>
						<div class="form-group row">
							<label for="userId" class="col-md-offset-1 col-md-2 col-form-label">아이디</label>
							<div class="col-md-5">
								<input type="text" class="form-control" id="userId" disabled>
							</div>
						</div>
						<div class="form-group row">
							<label for="name" class="col-md-offset-1 col-md-2 col-form-label">이름 <span class="text-danger">*</span></label>
							<div class="col-md-5">
								<input type="text" class="form-control" id="name" placeholder="이름을 입력해주세요." maxlength="100">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-offset-1 col-md-2 col-form-label">성별 <span class="text-danger">*</span></label>
							<div class="col-md-5">
								<input type="radio" name="genderRadios" id="female" value="f">
								<label class="form-check-label" for="female">여성&nbsp;&nbsp;&nbsp;</label>
								<input type="radio" name="genderRadios" id="male" value="m">
								<label class="form-check-label" for="male">남성</label>
							</div>
						</div>
						<div class="form-group row">
							<label for="birth" class="col-md-offset-1 col-md-2 col-form-label">생년월일 <span class="text-danger">*</span></label>
							<div class="col-md-5">
								<input type="text" class="form-control" id="birth" name="birth" cleave="birth" placeholder="생년월일을 입력해주세요." maxlength="10">
							</div>
						</div>
						<div class="form-group row">
							<label for="changeBtn" class="col-md-offset-1 col-md-2 col-form-label"></label>
							<div class="col-md-offset-3 col-md-2">
								<button class="btn btn-primary form-control" type="button" id="changeBtn">기 본 정 보 변 경</button>
							</div>
						</div>

						<div>
							<hr>
						</div>

						<div class="form-group row">
							<label class="col-md-offset-1 col-md-2 col-form-label">비밀번호</label>
							<div class="col-md-5">
								<button class="btn btn-primary form-control" type="button" data-toggle="collapse" data-target="#passwordCollapse" aria-expanded="false" aria-controls="passwordCollapse">비 밀 번 호 변 경</button>
							</div>
						</div>
						<div class="collapse" id="passwordCollapse">
							<div>
								<div class="form-group row">
									<label for="password" class="col-md-offset-1 col-md-3 col-form-label">기존 비밀번호</label>
									<div class="col-md-5 col-md-pull-1">
										<input type="password" class="form-control" id="password" placeholder="기존 비밀번호를 입력해주세요.">
									</div>
								</div>
								<div class="form-group row">
									<label for="newPassword" class="col-md-offset-1 col-md-3 col-form-label">새 비밀번호</label>
									<div class="col-md-5 col-md-pull-1">
										<input type="password" class="form-control" id="newPassword" placeholder="새 비밀번호를 입력해주세요.">
									</div>
								</div>
								<div class="form-group row">
									<label for="newPasswordConfirm" class="col-md-offset-1 col-md-3 col-form-label">새 비밀번호 확인</label>
									<div class="col-md-5 col-md-pull-1">
										<input type="password" class="form-control" id="newPasswordConfirm" placeholder="새 비밀번호와 동일하게 입력해주세요.">
									</div>
								</div>
								<div class="form-group row">
									<label for="pwdChangeBtn" class="col-md-offset-1 col-md-2 col-form-label"></label>
									<div class="col-md-offset-3 col-md-2">
										<button class="btn btn-primary form-control" type="button" id="pwdChangeBtn">변 경</button>
									</div>
								</div>
							</div>
						</div>

						<div>
							<hr>
						</div>

						<div class="form-group row">
							<label for="phone" class="col-md-offset-1 col-md-2 col-form-label">휴대폰번호</label>
							<div class="col-md-5">
								<input type="text" class="form-control" id="phone" cleave="phone" readonly>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-offset-1 col-md-2 col-form-label"></label>
							<div class="col-md-5">
								<button class="btn btn-primary form-control" type="button" data-toggle="collapse" data-target="#phoneCollapse" aria-expanded="false" aria-controls="phoneCollapse">휴 대 폰 번 호 변 경</button>
							</div>
						</div>
						<div class="collapse" id="phoneCollapse">
							<div>
								<div class="form-group row">
									<label for="newPhone" class="col-md-offset-1 col-md-3 col-form-label">변경 휴대폰 번호</label>
									<div class="col-md-5 col-md-pull-1">
										<input type="text" class="form-control" id="newPhone" placeholder="변경할 휴대폰 번호를 입력해주세요." cleave="phone" maxlength="13">
									</div>
								</div>
								<div class="form-group row">
									<label for="authRequestBtn" class="col-md-offset-1 col-md-2 col-form-label"></label>
									<div class="col-md-offset-3 col-md-2">
										<button class="btn btn-primary form-control" type="button" id="authRequestBtn">인 증 번 호 전 송</button>
									</div>
								</div>
								<div class="form-group row">
									<label for="phoneAuthKey" class="col-md-offset-1 col-md-3 col-form-label">인증번호</label>
									<div class="col-md-5 col-md-pull-1">
										<input type="password" class="form-control" id="phoneAuthKey" placeholder="인증번호를 입력해주세요." cleave="number" maxlength="6">
									</div>
								</div>
								<div class="form-group row">
									<label for="authCheckBtn" class="col-md-offset-1 col-md-2 col-form-label"></label>
									<div class="col-md-offset-3 col-md-2">
										<button class="btn btn-primary form-control" type="button" id="authCheckBtn">인 증 번 호 확 인</button>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group row">
							<div class="col-md-3 pull-right">
								<button type="button" class="btn btn-outline-primary" onclick="history.back();">취소</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
	$(document).ready(function() {
		// 숫자만 입력할 수 있는 태그 설정
		$('input[cleave], textarea[cleave]').each(function(index, element){
			var type = $(element).attr('cleave');
			var option = {};

			switch(type){
				case 'number':
					option['numeral'] = true;
					option['numericOnly'] = true;
					option['stripLeadingZeroes'] = false;
					option['delimiter'] = '';
					option['numeralDecimalScale'] = 20;
					break;
				case 'phone':
					option['numericOnly'] = true;
					option['delimiter'] = '-';
					option['blocks'] = [3, 4, 4];
					option['stripLeadingZeroes'] = false;
					break;
				case 'birth':
					option['date'] = true;
					option['delimiter'] = '-';
					option['datePattern'] = ['Y', 'm', 'd'];
					break;
				default:
					break;
			}

			new Cleave(element, $.extend({

			},option));

		});
	});
</script>