<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="<c:url value="/webjars/image/favicon.ico"/>" />

<!-- Fonts -->
<link rel="stylesheet" href="<c:url value="/webjars/applib/font/notoSansKr/fontface.css"/>" />

<!-- Icons. Uncomment required icon fonts -->
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/boxicons.css"/>" />
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/fontawesome.css"/>" />
<link rel="stylesheet" href="<c:url value="/resources/fonts/xit-icon.css"/>" />
<!-- Core CSS -->
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/core.css"/>" class="template-customizer-core-css" />
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/theme-default.css"/>" class="template-customizer-theme-css" />
<link rel="stylesheet" href="<c:url value="/webjars/css/styles.css"/>" />

<link rel="stylesheet" href="<c:url value="/webjars/applib/css/overwrite.css?${ver}"/>" />
<link rel="stylesheet" href="<c:url value="/webjars/applib/css/applib.css?${ver}"/>" />

<link rel="stylesheet" href="<c:url value="/resources/css/fims.css?${ver}"/>" />

<!-- Vendors CSS -->
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/libs/bootstrap-datepicker/bootstrap-datepicker.css"/>" />

<title>사용자정보</title>
</head>
<body>

<form id="user-form" data-doctx="user">
	<input type="hidden" name="cntnSeCd" data-map="CNTN_SE_CD" />

	<div class="row g-3 mt-4">
		<c:if test="${cntnSeCd == '01'}">
			<div class="col-md-12">
				<label class="col-form-label required">
				시군구/기관 및 부서
				</label>
				<select name="institute" class="form-select no-bgi" data-map="NSTT_CD"
				required title="시군구/기관 및 부서" disabled>
					<option value=""></option>
					<c:forEach items="${allOgdpList}" var="item">
						<option value="${item.INST_CD}">${item.SGG_NM} / ${item.INST_NM}</option>
					</c:forEach>
				</select>
				<select name="deptCode" class="form-select no-bgi" data-map="DEPT_CD"
				required title="시군구/기관 및 부서" disabled>
					<option value=""></option>
					<c:forEach items="${allOgdpList}" var="item">
						<option value="${item.DEPT_CD}">${item.DEPT_NM}</option>
					</c:forEach>
				</select>
				<input type="hidden" name="orgID" data-map="ORG_ID" />
				<div class="dropdown d-inline-flex">
					<button type="button"
					class="btn btn-md btn-secondary dropdown-toggle"
					data-bs-toggle="dropdown"
					>선택</button>
					<ul class="dropdown-menu oy-auto mh-px-300">
						<c:forEach items="${ableOgdpList}" var="item">
							<li>
								<a class="dropdown-item"
								onclick="setOgdpCodeValues('${item.INST_CD}','${item.DEPT_CD}','${item.SGG_CD}')">${item.OGDP_NM}</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<div class="col-md-6">
				<label class="col-sm-3 col-form-label text-sm-end required" for="userSeCd">
				유저구분
				</label>
				<select name="userSeCd" data-map="USER_SE_CD" class="form-select">
					<c:forEach items="${CMN008List}" var="item">
						<c:if test="${item.code != '21'}">
							<option value="${item.code}">${item.value}</option>
						</c:if>
					</c:forEach>
				</select>
			</div>
			<div class="col-md-6"></div>
		</c:if>
		<c:if test="${cntnSeCd == '02'}">
			<input type="hidden" name="orgID" data-map="ORG_ID" />
			<input type="hidden" name="institute" data-map="NSTT_CD" />
			<input type="hidden" name="deptCode" data-map="DEPT_CD" />

			<input type="hidden" name="userSeCd" data-map="USER_SE_CD" />
		</c:if>

		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end required" for="account">
				계정
				</label>
				<div class="col-sm-9">
					<input name="id" type="hidden" data-map="USER_ID" />
					<input name="account" type="text" required data-map="USER_ACNT" class="form-control"
					placeholder="사용자 계정" />
					<button type="button" id="btnDuplicate" class="btn btn-primary">중복 확인</button>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end required" for="name">
				이름
				</label>
				<div class="col-sm-9">
					<input name="name" type="text" required data-map="USER_NM" class="form-control"
					placeholder="사용자 이름" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end required" for="password">
				비밀번호
				</label>
				<div class="col-sm-9">
					<input name="password" type="password" required class="form-control" placeholder="비밀번호" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end required" for="confirmPassword">
				비밀번호 확인
				</label>
				<div class="col-sm-9">
					<input name="confirmPassword" type="password" required class="form-control"
					placeholder="비밀번호 확인" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end required" for="emailAddress">이메일 주소</label>
				<div class="col-sm-9">
					<input name="emailAddress" type="email" required data-map="EML_ADRS" class="form-control"
					placeholder="이메일 주소" autofocus />
				</div>
			</div>
		</div>
		<div class="col-md-6 select2-primary">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end" for="phoneNo">전화번호(유선)</label>
				<div class="col-sm-9">
					<input name="phoneNo" type="text" data-map="TELNO" class="form-control phone-mask"
					placeholder="000-0000-0000" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end" for="faxNo">팩스</label>
				<div class="col-sm-9">
					<input name="faxNo" type="text" data-map="FXNO" class="form-control phone-mask"
					placeholder="000-0000-0000"/>
				</div>
			</div>
		</div>

		<c:if test="${cntnSeCd == '01'}">
			<div class="col-md-6">
				<div class="row">
					<label class="col-sm-3 col-form-label text-sm-end" for="positionName">직위</label>
					<div class="col-sm-9">
						<input name="positionName" type="text" data-map="POS_NM" class="form-control"
						placeholder="직위"/>
					</div>
				</div>
			</div>
		</c:if>
		<c:if test="${cntnSeCd == '02'}">
			<div class="col-md-6">
				<div class="row">
					<label class="col-sm-3 col-form-label text-sm-end" for="mobilePhoneNo">휴대전화</label>
					<div class="col-sm-9">
						<input name="mobilePhoneNo" type="text" data-map="MBL_TELNO" class="form-control"
						placeholder="휴대전화"/>
					</div>
				</div>
			</div>
		</c:if>

		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end" for="status">세외수입 사용자키</label>
				<div class="col-sm-9">
                   	<input name="ntrisKey" type="text" class="form-control" data-map="NTRIS_KEY" placeholder="세외수입 사용자키">
				</div>
			</div>
		</div>

		<div class="col-md-6">
			<div class="row">
				<label class="col-sm-3 col-form-label text-sm-end" for="status">상태</label>
				<div class="col-sm-9">
                   	<select name="status" class="form-select no-bgi" data-map="STTS" title="상태" disabled>
                   		<option value="A">신청</option>
                   		<option value="P">승인</option>
                   	</select>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-4 justify-content-end">
		<div class="col-md-6">
			<div class="row justify-content-end">
				<div class="col-sm-3">
					<button type="button" onclick="userCtrl.saveUser();" class="btn btn-primary">저장</button>
				</div>
			</div>
		</div>
	</div>
</form>
<datalist id="allOgdpList">
	<c:forEach items="${allOgdpList}" var="item">
		<option value="${item.OGDP_CD}">${item.OGDP_NM}</option>
	</c:forEach>
</datalist>

<!-- Core JS -->
<script src="<c:url value="/webjars/3rd-party/sneat/libs/popper/popper.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/bootstrap.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/jquery/jquery.js"/>" ></script>
<script src="<c:url value="/webjars/3rd-party/jquery-ui/1.13.2/jquery-ui.js"/>"></script>

<script src="<c:url value="/webjars/3rd-party/sneat/js/config.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/helpers.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/menu.js"/>"></script>

<!-- base -->
<script src="<c:url value="/webjars/js/base/base.js"/>"></script>
<script src="<c:url value="/webjars/js/base/dataset.js"/>"></script>
<script src="<c:url value="/webjars/js/base/user.js"/>"></script>

<script src="<c:url value="/resources/js/fims/cmmn/fims-base.js"/>"></script>
<script>
var userFields = new FimsFormFields("#user-form");
var userCtrl = newUserControl();

userCtrl.setInfo = obj => {
	userFields.set(userCtrl,obj);

	let create = isEmpty(obj.USER_ACNT);
	if(!create){
		$("#btnDuplicate").hide();
	}

	$("#user-form input[name='account']").prop("readonly", !create);
	$("#user-form input[name='name']").prop("readonly", !create);
	$("#user-form input[type='password']").each(function(){
		let password = $(this).prop("required", create);
		let div = password.parent().parent().parent();
		if (create) {
			div.removeAttr("hidden");
		} else
			div.attr("hidden","hidden");
	});
	$("#user-form").find("input,select")
		.change(function() {
			let input = $(this),
				name = input.attr("data-map"),
				val = input.val();
			userCtrl.setValue(name, val);
		})
		.onEnterPress(userCtrl.saveUser);

	document.querySelector("#user-form input[name='" + (create ? "account" : "name") + "']").focus();
}

userCtrl.onModify = (changed) => {
	if (["USER_NM", "EML_ADRS", "MBL_TELNO"].filter(e => changed.includes(e)).length < 1)
		return;

	userCtrl.dataset.setState();
}

userCtrl.saveUser = () => {
	if (!$("#user-form").find("input,select").validInputs()) return;

	let match = Array.from(document.querySelectorAll("#user-form input[type='password']"))
		.map(input => input.value)
		.reduce((total, current) => total == current);
	if (!match) {
		dialog.alert({
			content:"비밀번호와 비밀번호 확인이 다릅니다.",
			onClose:function(){
				document.querySelector("#user-form input[name='confirmPassword']").focus();
			}
		});
		return;
	}

	dialog.alert({
		content:"현재 사용자 정보를 저장하시겠습니까?",
		onOK:() => {
			userCtrl.save(userFields.get());
		}
	});
}

userCtrl.save = (info) => {
	var create = isEmpty(info.id)

	if(create && "${cntnSeCd}" == "02"){
		info.orgID = "${sggCd}";
		info.institute = "${institute}";
		info.deptCode = "EMPTY00";
		info.userSeCd = "21";
	}

	info.account = info.account.toUpperCase();

	ajax.post({
		url:!create ? wctx.url("/user/updateMyInfo.do") : wctx.url("/signup.do"),
		data:info,
		success: (resp) => {
			if(resp.saved){
				dialog.alert({
					content : "저장됐습니다.",
					onClose : function() { window.close(); }
				});
			}
		}
	});
}

function setOgdpCodeValues(institute, deptCode, sggCd){
	$("#user-form [name='institute']").val(institute).trigger("change");
	$("#user-form [name='deptCode']").val(deptCode).trigger("change");
	$("#user-form [name='orgID']").val(sggCd).trigger("change");
}

$("#btnDuplicate").on("click", function(){
	if($("#user-form").find("[name='account']").val() == ""){
		alert("계정을 입력하세요.");
		return;
	}

	if($("#user-form").find("[name='institute']").val() == ""){
		alert("기관을 선택하세요.");
		return;
	}

	ajax.get({
		url : wctx.url("/duplicate.do"),
		data : {
			account : $("#user-form").find("[name='account']").val(),
			sggCd : $("#user-form").find("[name='orgID']").val()
		},
		success : resp => {
			if(resp.duplicate){
				alert("이미 존재하는 ID입니다.");
			} else {
				alert("사용할 수 있는 ID입니다.");
			}
		}
	});
});

var userInfo = ${userInfo};
if(userInfo.USER_ID == null && "${cntnSeCd}" == "02"){
	userInfo.ORG_ID = "${sggCd}";
	userInfo.NSTT_CD = "${institute}";
	userInfo.USER_SE_CD = "21";
	userInfo.CNTN_SE_CD = "02";
}
userCtrl.setInfo(userInfo);

wctx.path = window.opener.wctx.path;
wctx.version = window.opener.wctx.version;
wctx.trace = window.opener.wctx.trace;
wctx.csrf = window.opener.wctx.csrf;
</script>
</body>
</html>