<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<!-- inner page html -->
<div class="content-wrapper">
	<!-- Content -->
	<div class="container-xxl flex-grow-1 px-0">
		<c:set var="prefixName" scope="request">단속 재등록 관리</c:set>

		<!-- Page Body -->
		<div class="card">
			<!-- 입력 영역 -->
			<form id="frmEdit--${pageName}" name="frmEdit">
				<!-- hidden -->
				<input type="hidden" id="crdnId--${pageName}" name="crdnId" data-map="CRDN_ID" />
				<input type="hidden" id="sggCd--${pageName}" name="sggCd" data-map="SGG_CD" />
				<input type="hidden" id="taskSeCd--${pageName}" name="taskSeCd" data-map="TASK_SE_CD" />
				<input type="hidden" id="opnnId--${pageName}" name="opnnId" data-map="OPNN_ID" />

				<div class="row g-1">
					<!-- 접수 번호 -->
					<div class="col-md-6">
						<label for="rcptNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">접수 번호</label>
						<input type="text" class="form-control w-45" id="rcptNo--${pageName}" name="rcptNo" data-map="RCPT_NO" readonly />
					</div>
					<!-- 접수 일자 -->
					<div class="col-md-6">
						<label for="rcptYmd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">접수 일자</label>
						<input type="text" class="form-control w-35" id="rcptYmd--${pageName}" name="rcptYmd" data-map="RCPT_YMD" readonly />
					</div>
					<!-- 진술자 이름 -->
					<div class="col-md-6">
						<label for="sttrNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">성명</label>
						<input type="text" class="form-control w-45" id="sttrNm--${pageName}" name="sttrNm" data-map="STTR_NM" readonly />
					</div>
					<!-- 의견 제출 구분 코드 -->
					<div class="col-md-6">
						<label for="opnnSbmsnSeNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출 구분</label>
						<input type="text" class="form-control w-60" id="opnnSbmsnSeNm--${pageName}" name="opnnSbmsnSeNm" data-map="OPNN_SBMSN_SE_NM" readonly />
					</div>
					<!-- 의견 제출 요지 -->
					<div class="col-md-12">
						<label for="opnnSbmsnGist--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출 요지</label>
						<textarea class="form-control w-80" id="opnnSbmsnGist--${pageName}" name="opnnSbmsnGist" data-map="OPNN_SBMSN_GIST" rows="2" data-maxlengthb="300" readonly>
						</textarea>
					</div>
					<!-- 담당자 검토 의견 -->
					<div class="col-md-12">
						<label for="picRvwOpnn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">검토 의견</label>
						<textarea class="form-control w-80" id="picRvwOpnn--${pageName}" name="picRvwOpnn" data-map="PIC_RVW_OPNN" rows="5" data-maxlengthb="1000">
						</textarea>
					</div>
					<!-- 문서 번호 -->
					<div class="col-md-12">
						<label for="docNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">문서 번호</label>
						<input type="text" class="form-control w-30" id="docNo--${pageName}" name="docNo" data-map="DOC_NO" />
					</div>
					<!-- 통보 구분 코드 -->
					<div class="col-md-6">
						<label for="ntfctnSeCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">통보 구분</label>
						<select class="form-select" id="ntfctnSeCd--${pageName}" name="ntfctnSeCd" data-map="NTFCTN_SE_CD" required>
							<option value="">선택하세요</option>
							<c:forEach items="${FIM030List}" var="item">
								<option value="${item.code}">${item.value}</option>
							</c:forEach>
						</select>
					</div>
					<!-- 의견 제출 상태 코드 -->
					<div class="col-md-6">
						<label for="opnnSbmsnSttsCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">처리 결과</label>
						<select class="form-select" id="opnnSbmsnSttsCd--${pageName}" name="opnnSbmsnSttsCd" data-map="OPNN_SBMSN_STTS_CD" onchange="fnChangeOpnnSbmsnSttsCd(this.value);" required>
							<option value="">선택하세요</option>
							<c:forEach items="${FIM031List}" var="item">
								<option value="${item.code}">${item.value}</option>
							</c:forEach>
						</select>
					</div>
					<!-- 감경 사유 코드 -->
					<div class="col-md-6" id="divRductRsnCd--${pageName}">
						<label for="rductRsnCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감경사유</label>
						<select class="form-select" id="rductRsnCd--${pageName}" name="rductRsnCd" data-map="RDUCT_RSN_CD">
							<c:forEach items="${FIM019List}" var="item">
								<option value="${item.code}">${item.value}</option>
							</c:forEach>
						</select>
					</div>
					<!-- 감경 금액 -->
					<div class="col-md-6" id="divRductAmt--${pageName}">
						<label for="rductAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감경금액</label>
						<input type="text" class="form-control w-30 text-end" id="rductAmt--${pageName}" name="rductAmt" data-map="RDUCT_AMT" readonly />
					</div>
					<!-- 답변 일자 -->
					<div class="col-md-6">
						<label for="ansYmd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">답변 일자</label>
						<input type="text" class="form-control form-date" id="ansYmd--${pageName}" name="ansYmd" data-map="ANS_YMD"
							data-fmt-type="day" maxlength="10" required />
			            <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
					</div>
					<!-- 답변 시간 -->
					<div class="col-md-6">
						<label for="ansTm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">답변 시간</label>
			            <input type="text" class="form-control form-time" id="ansTm--${pageName}" name="ansTm" data-map="ANS_TM"
			            	data-fmt-type="time" maxlength="8" placeholder="시:분:초" required />
					</div>
					<!-- 답변 내용 -->
					<div class="col-md-12">
						<label for="ansCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">답변 내용</label>
						<textarea class="form-control w-80" id="ansCn--${pageName}" name="ansCn" data-map="ANS_CN" rows="5" data-maxlengthb="4000">
						</textarea>
					</div>
				</div>
			</form>
			<!-- /입력 영역 -->
		</div>
		<!-- <div class="card"> -->
	</div>
	<!-- / Content -->

	<!-- 업무 버튼 표시 -->
	<div>
		<span class="container-page-btn">
			<span class="container-window-btn-right">
				<!-- 업무 버튼 -->
				<button type="button" class="btn btn-primary" id="btnSave--${pageName}" title="저장" onclick="fnSave${pageName}()">저장</button>
			</span>
		</span>
	</div>
	<!-- / 업무 버튼 표시 -->

	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />

  	<div class="content-backdrop fade"></div>
</div>

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	// URL
	var ${pageName}PrefixUrl = "/excl/excl02";
	// FormFields
 	var ${pageName}Fields = new FormFields("#frmEdit--${pageName}");

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Control = new DatasetControl({
		  prefix : "opnnSbmsn"
		, prefixName : "의견제출 답변"
		, keymapper : info => info ? info.OPNN_ID : ""
		, dataGetter : obj => obj.opnnSbmsnInfo
		, urls : {
			update : wctx.url(${pageName}PrefixUrl + "/030/updateAnswer.do")	// 심의(답변) 처리
		}
		, formats : {
			  RCPT_YMD : dateFormat												// 접수 일자
			, ANS_YMD : dateFormat												// 답변 일자
			, ANS_TM : timeFormat												// 답변 시각
			, RDUCT_AMT : numberFormat											// 감경 금액
		}
	});

	${pageName}Control.onCurrentChange = item => {
		${pageName}Fields.set(item);
	}

	/**************************************************************************
	 * DatasetControl 이벤트
	 **************************************************************************/
	// 저장 callback
	${pageName}Control.onSave = (resp) => {
  		let dialogTitle = $("#" + ${pageName}Control.prefix + "Dialog").find("h5.modal-title").html();
  		let showMessage = resp.retMessage.replace(/[S]|[F]/g, dialogTitle);

		dialog.alert(showMessage);

		if (resp.saved) {
			dialog.close(${pageName}Control.prefix + "Dialog");
		}
	}

	// 저장
	${pageName}Control.save = (info) => {
		if (!info) return;

		ajax.post({
			  url : ${pageName}Control.urls.update
			, data : info
			, success : resp => ${pageName}Control.onSave(resp)
		});
	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 검색조건 초기값 셋팅
	function initForm${pageName}() {
		// 달력 초기화
	    initDatepicker("frmEdit--${pageName}");

	    $("#ansYmd--${pageName}").datepicker("setDate", new Date());
	    $("#ansTm--${pageName}").val(new Date().toTimeString().split(" ")[0]);	// "09:51:35 GMT+0900 (한국 표준시)"의 형식에서 공백을 기준으로 잘라 시간 부분만 가져와줍니다.
	}

	// 이벤트 설정
	function setEvent${pageName}() {
		// form-date 항목에서 키보드로 입력시 날짜 포맷팅 적용
		$("#frmEdit--${pageName}").find(".form-date").each(function() {
			$(this).on("input",function() {
				let value = this.value.replaceAll("-", "");

				if (value.length > 7) {
					this.value = value.substring(0, 4) + "-" + value.substring(4, 6) + "-" + value.substring(6);
				} else if(value.length > 5) {
					this.value = value.substring(0, 4) + "-" + value.substring(4);
				}
			});
		});
		// form-date 항목에서 키보드로 입력시 시간 포맷팅 적용
		$("#frmEdit--${pageName}").find(".form-time").each(function() {
			$(this).on("input",function() {
				let value = this.value.replaceAll(":", "");

				if (value.length > 5) {
					this.value = value.substring(0, 2) + ":" + value.substring(2, 4) + ":" + value.substring(4);
				} else if (value.length > 3) {
					this.value = value.substring(0, 2) + ":" + value.substring(2);
				}

			});
		});

		$("#btnAddFile--${pageName}").on('click', () => { $("#uploadFileList--${pageName}").trigger("click"); });
	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	fnChangeOpnnSbmsnSttsCd = (obj) => {
		// javascript를 이용한 visibility 변경 (이 방법을 사용하는 경우, 안에 있는 요소들이 보이지않지만 그 요소들이 할당 하고 있는 공간은 그대로 유지(공백처리))
//		document.getElementById("divRductRsnCd--${pageName}").style.visibility = "hidden";
// 		document.getElementById("divRductRsnCd--${pageName}").style.visibility = "visible";

		$("#divRductRsnCd--${pageName}").hide();
		$("#divRductAmt--${pageName}").hide();

		if (obj == "04") {
			// 필수 선택 추가 필요

			$("#divRductRsnCd--${pageName}").show();
			$("#divRductAmt--${pageName}").show();
		}
	}

	// 저장
	fnSave${pageName} = () => {
		// validate 확인
		if (!customValidate($("#frmEdit--${pageName}").find("input, select, textarea"))) return;

		// 감경 사유 확인
		let opnnSbmsnSttsCd = $("#opnnSbmsnSttsCd--${pageName}").val();
		let rductRsn = $("#rductRsnCd--${pageName}").val();

		if (opnnSbmsnSttsCd == "04" && rductRsn == "00") {
			dialog.alert("감경 사유를 다시 선택하여 주시기 바랍니다.");

			return;
		}

		dialog.alert({
			  content : "현재 " + ${pageName}Control.prefixName + " 정보를 저장하시겠습니까?"
			, onOK : () => {
				${pageName}Control.save(${pageName}Fields.get());
			}
		});
	}

	/**************************************************************************
	 * script 진입
	 **************************************************************************/
	$(document).ready(function() {
		// 이벤트 설정
		setEvent${pageName}();

		// 화면 초기 설정
		initForm${pageName}();

		// Dataset 셋팅 - 단건일 경우 setData
		${pageName}Control.setData([${opnnSbmsnInfo}]);

		// 날짜, 시간
		if ($("#ansYmd--${pageName}").val() == "") {
		    $("#ansYmd--${pageName}").datepicker("setDate", new Date());
		}
		if ($("#ansTm--${pageName}").val() == "") {
			$("#ansTm--${pageName}").val(new Date().toTimeString().split(" ")[0]);	// "09:51:35 GMT+0900 (한국 표준시)"의 형식에서 공백을 기준으로 잘라 시간 부분만 가져와줍니다.
		}

		fnChangeOpnnSbmsnSttsCd($("#opnnSbmsnSttsCd--${pageName}").val());
	});

// #sourceURL=excl01020-info.jsp
</script>
