<%--
  Class Name : resveManageRegist.jsp
  Description : 대관관리 등록 화면
  Modification Information
 
      수정일      수정자              수정내용
     ----------  --------    ---------------------------
     2009.03.23   이삼섭        최초 생성
 
    author   : 공통서비스 개발팀 이삼섭
    since    : 2009.03.23
--%>
<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator"%>
<%
	pageContext.setAttribute("crlf", "\r\n");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<link href="/js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript" src="/js/calendar_resve.js"></script>
<script type="text/javascript" src="/js/EgovMultiFile.js"></script>
<script type="text/javascript" src="<c:url value="/validator.do"/>"></script>
<validator:javascript formName="resve" staticJavascript="false" xhtml="true" cdata="false" />
<script type="text/javascript">
	function fn_egov_select_list(pageNo) {
		document.searchForm.action = "<c:url value='/cop/resve/selectResveManageList.do'/>";
		document.searchForm.submit();
	}

	function fn_egov_insert() {
		document.resve.email.value = document.resve.email1.value + '@' + document.resve.email2.value;
		
		if (!validateResve(document.resve)) return;
		
		var thumbCnt = multi_selector.count;
		var imgCnt = multi_selector1.count;
		var portPolioCnt = multi_selector2.count;
		
		// 등록 편하기위해 임시 주석
		/* if (thumbCnt <= 1 || imgCnt <= 1 || portPolioCnt <= 1) {
			alert("첨부파일은 필수 입력값입니다.");
			return;
		} */
		
		document.resve.action = "<c:url value='/cop/resve/insertResveManage.do'/>";
		document.resve.submit();
	}
	
	function selectEmail() {
		var emailVal = $("#emailSelect option:selected").val();
		if (emailVal == "0" ) {
			$("#email2").val("");
			$("#email2").attr("readonly", false)
		} else {
			$("#email2").val(emailVal);
			$("#email2").attr("readonly", true)
		}
	}
	
	function changeSelectExRoom() {
		// 전시장 변경 시 전시기간 초기화
		document.resve.resSdate.value = "";
		document.resve.resEdate.value = "";
		
		// 달력 닫기
		if (document.getElementById('calendar_div')) calendar_close();
		
		var exHoursSpan = $("#exHoursSpan"); // 관람시간 
		var type = exHoursSpan.find("input").attr("type");
		var selectValue = $("#selectExRoom").find("option:selected").val();
		
		// 교육장 선택 시
		if (selectValue == "6") {
			if (type != "radio") {
				var radioHtml = "<input type='radio' name='exHours' title='대관시간' value='am' /> 오전";
				radioHtml += " <input type='radio' name='exHours' title='대관시간' value='pm' /> 오후";
				exHoursSpan.html(radioHtml);
			}
			
			// 종료일
			$("#strDates").hide(); // '~' 라벨
			$("#resEdate").hide(); //종료일
		} else {
			if (type != "text") {
				var inputHtml = "<input type='text' name='exHours' title='대관시간' />"
				exHoursSpan.html(inputHtml);
			}
			
			// 종료일
			$("#strDates").show(); // '~' 라벨
			$("#resEdate").show(); //종료일
		}
	}
	
	function userTypeChange() {
		var userType = $("input[name='userType']:checked").val();
		
		if (userType == 'G') {
			$("#companyName").val("");
			$("#trCompanyName").show();
			$("#trCompanyNumber").show();
		} else {
			$("#companyName").val("-");
			$("#trCompanyName").hide();
			$("#trCompanyNumber").hide();
		}
	}
	
	// 전시관 정보
	function exRoomInfoPop() {
		var retVal;
		var url = "<c:url value='/cop/bbs/selectBBSMngInfsPop.do'/>";
		
		window.open(url, "p_bbsMngInqire", "width=410px, height=600px, resizable=1;");
	}
	
	function testInput() {
		document.resve.userType.value="P";
		document.resve.userName.value="작성자";
		document.resve.telMobile1.value="010";
		document.resve.telMobile2.value="1111";
		document.resve.telMobile3.value="2222";
		document.resve.telHome1.value="02";
		document.resve.telHome2.value="3333";
		document.resve.telHome3.value="4444";
		document.resve.email1.value="test";
		document.resve.email2.value="naver.com";
		document.resve.exName.value="전시명";
		document.resve.authorName.value="작가 단체명";
		
		document.resve.resSdate.value="2018-11-01";
		document.resve.resEdate.value="2018-11-01";
		document.resve.exHours.value="오전 오후";
		document.resve.exExplain.value="전시내용";
	}
	
	$(document).ready(function() {
		// 임시
		//testInput();
		
		//신청자 구분
		//userTypeChange();
		
		// 전시관
		changeSelectExRoom();
		
		// java valid 리턴 시
		var selectExRoom = "${searchVO.selectExRoom}";
		var exHours = "${searchVO.exHours}";
		document.resve.resSdate.value = "${searchVO.resSdate}";
		document.resve.resEdate.value = "${searchVO.resEdate}";
		
		if (selectExRoom == "6") {
			$("input[name='exHours'][value='"+exHours+"']").attr("checked", true); // radio
		} else {
			$("input[name='exHours']").val(exHours); // text
		}
	});
</script>

<title>대관관리 등록</title>
<style>
	input[type=radio] {
		width:20px !important;
	}
</style>
</head>
<body>
	<div class="ad_content">
		<div class="ad_con_head">
			<div class="ad_head_text">
				<p class="today_txt">
					대관관리 등록
				</p>
				<div class="ad_head_ment">
					<p class="today_last_txt"><span id="cnt_cate_list"></span></p>
				</div>
			</div>
		</div>

		<div class="ad_subcon">
			<form:form commandName="searchForm" name="searchForm" method="get" action="">
				<input name="pageIndex" type="hidden" value="<c:out value='${searchVO.pageIndex}'/>" />
				<input name="searchCnd" type="hidden" value="<c:out value='${searchVO.searchCnd}'/>" />
				<input name="searchWrd" type="hidden" value="<c:out value='${searchVO.searchWrd}'/>" />
			</form:form>
			
			<%-- <form name="frm" method="get" action=""> --%>
			<form:form commandName="resve" name="resve" method="post" action="" enctype="multipart/form-data">
				<input type="hidden" name="pageIndex" value="<c:out value='${searchVO.pageIndex}'/>">
				<input type="hidden" name="searchCnd" value="<c:out value='${searchVO.searchCnd}'/>" />
				<input type="hidden" name="searchWrd" value="<c:out value='${searchVO.searchWrd}'/>" />

				<div class="main1_div2">
					<table class="main1_table">
						<tr>
							<th colspan="2">신청자 정보</th>
						</tr>
						<tr>
							<th><span class="star_t">* </span>신청자 구분</th>
							<td>
								<%-- <c:forEach var="item" items="${ userTypeList }" varStatus="status">${item.codeNm}
									<input type="radio" style="width:3%" name="userType" value="${item.code}" />
								</c:forEach> --%>
								<%-- <form:radiobuttons path="userType" items="${ userTypeList }" itemLabel="codeNm" itemValue="code" /> --%>
								<c:forEach var="i"  begin="1" end="2" step="1"  varStatus="status">
									<c:set var="j" value="${fn:length(userTypeList) - i }" />
									<form:radiobutton path="userType" value="${userTypeList[j].code}" onchange="javascript:userTypeChange(); return false;" />
									${userTypeList[j].codeNm} 
								</c:forEach>
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>이름</th>
							<td>
								<form:input path="userName" title="이름" />
								<br/><form:errors path="userName" />
							</td>
						</tr>
						<tr id="trCompanyName" style="display:none;">
							<th><span class="star_t">* </span>회사명(또는 단체명)</th>
							<td>
								<form:input path="companyName" title="회사명(또는 단체명)" value="-"/>
								<br/><form:errors path="companyName" />
							</td>
						</tr>
						<tr id="trCompanyNumber" style="display:none;">
							<th>사업자등록번호</th>
							<td>
								<form:input path="companyNumber" title="사업자등록번호"/>
								<br/><form:errors path="companyNumber" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>휴대폰번호</th>
							<td>
								<form:select path="telMobile1" title="휴대폰번호1" >
									<form:option value="">선택</form:option>
									<form:option value="010">010</form:option>
									<form:option value="016">016</form:option>
									<form:option value="017">017</form:option>
									<form:option value="018">018</form:option>
									<form:option value="019">019</form:option>
								</form:select> -  
								<form:input path="telMobile2" title="휴대폰번호2" /> - 
								<form:input path="telMobile3" title="휴대폰번호3" />
								<br/><form:errors path="telMobile1" />
								<form:errors path="telMobile2" />
								<form:errors path="telMobile3" />
							</td>
						</tr>
						<tr>
							<th>전화번호</th>
							<td>
								<form:select path="telHome1" title="전화번호1" >
									<form:option value="">선택</form:option>
									<form:option value="02">02</form:option>
									<form:option value="031">031</form:option>
									<form:option value="032">032</form:option>
									<form:option value="033">033</form:option>
									<form:option value="041">041</form:option>
									<form:option value="042">042</form:option>
									<form:option value="043">043</form:option>
									<form:option value="044">044</form:option>
									<form:option value="051">051</form:option>
									<form:option value="052">052</form:option>
									<form:option value="053">053</form:option>
									<form:option value="054">054</form:option>
									<form:option value="055">055</form:option>
									<form:option value="061">061</form:option>
									<form:option value="062">062</form:option>
									<form:option value="063">063</form:option>
									<form:option value="064">064</form:option>
								</form:select> -  
								<form:input path="telHome2" title="전화번호2" /> - 
								<form:input path="telHome3" title="전화번호3" />
								<br/><form:errors path="telHome1" />
								<form:errors path="telHome2" />
								<form:errors path="telHome3" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>이메일</th>
							<td>
								<form:input path="email1" title="이메일1" /> @ 
								<form:input path="email2" title="이메일2" />
								<form:select path="emailSelect" title="이메일선택" onChange="javascript:selectEmail();">
									<form:option  value="0" label="직접입력" />
									<form:option  value="naver.com" label="naver.com" />
									<form:option  value="gmail.com" label="gmail.com" />
									<form:option  value="hanmail.net" label="hanmail.net" />
									<form:option  value="daum.net" label="daum.net" />
									<form:option  value="yahoo.co.kr" label="yahoo.co.kr" />
								</form:select>
								<form:hidden path="email" />
								<br/><form:errors path="email1" />
								<form:errors path="email2" />
								<form:errors path="email" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>상태변경</th>
							<td>
						      	<select name="resState" title="상태변경">
								<c:forEach var="i"  begin="1" end="2" step="1"  varStatus="status">
									<c:set var="j" value="${fn:length(resStateList) - i }" />
									<option value="${resStateList[j].code}" <c:if test="${resStateList[j].code == result.resState}">selected="selected"</c:if> >${resStateList[j].codeNm}</option>
								</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<th colspan="2">신청 정보</th>
						</tr>
						<tr>
							<th><span class="star_t">* </span>전시명</th>
							<td>
								<form:input path="exName" title="전시명" />
								<br/><form:errors path="exName" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>작가명/단체명</th>
							<td>
								<form:input path="authorName" title="작가명/단체명" />
								<br/><form:errors path="authorName" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>사용희망 시설</th>
							<td>
								<form:select path="selectExRoom" onchange="javascript:changeSelectExRoom(); return false;">
									<form:option value="1">제 1전시관</form:option>
									<form:option value="2">제 2전시관</form:option>
									<form:option value="3">제 3전시관</form:option>
									<form:option value="4">제 2, 3전시관</form:option>
									<form:option value="5">제 1, 2, 3전시관</form:option>
									<form:option value="6">교육장</form:option>
								</form:select>
								
								<!-- <select name="selectExRoom" onchange="javascript:changeSelectExRoom(this); return false;">
									<option value="1">제 1전시관</option>
									<option value="2">제 2전시관</option>
									<option value="3">제 3전시관</option>
									<option value="4">제 2, 3전시관</option>
									<option value="5">제 1, 2, 3전시관</option>
									<option value="6">교육장</option>
								</select> -->
								<button class="r_button" type="button" style="width: 100px;" onclick="javascript:exRoomInfoPop(); return false;">
									전시관 정보
								</button>
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>대관기간</th>
							<td>
								<form:input path="resSdate" readonly="true" title="대관기간 시작일" /><label id='strDates'> ~ </label>
								<form:input path="resEdate" readonly="true" title="대관기간 종료일" />
								<button type="button" name="btnCal1" onclick="calendar(event, 'resSdate', '', 'resEdate'); return false;">
									<i class="fa fa-calendar" aria-hidden="true"></i>
								</button>
								<br/><form:errors path="resSdate" />
								<form:errors path="resEdate" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>대관시간</th>
							<td>
								<span id="exHoursSpan"><form:input path="exHours" title="대관시간" /></span>
								<br/><form:errors path="resSdate" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>전시구성 및 안내내용</th>
							<td>
								<form:textarea path="exExplain" title="전시구성 및 안내내용" rows="5" cols="30" />
								<br/><form:errors path="exExplain" />
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>썸네일이미지</th>
							<td colspan="10">
								<input name="file_1" id="thumbFileUploader" type="file" />
								<div id="thumbFileUploaderList"></div>
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>대표이미지</th>
							<td colspan="10">
								<input name="file_2" id="imgFileUploader" type="file" />
								<div id="imgFileUploaderList"></div>
							</td>
						</tr>
						<tr>
							<th><span class="star_t">* </span>포트폴리오</th>
							<td colspan="10">
								<input name="file_3" id="portfolioFileUploader" type="file" />
								<div id="portfolioUploaderList"></div>
							</td>
						</tr>
					</table>
					<script type="text/javascript">
						var maxFileSize = <c:out value='${maxFileSize/1024/1024}'/>;
						var maxThumbFileNum = <c:out value='${maxThumbFileNum}'/>;
						var maxImgFileNum = <c:out value='${maxImgFileNum}'/>;
						var maxPortpolioFileNum = <c:out value='${maxPortpolioFileNum}'/>;
						if (maxThumbFileNum == null || maxThumbFileNum == "") maxThumbFileNum = 0;
						if (maxImgFileNum == null || maxImgFileNum == "") maxImgFileNum = 0;
						if (maxPortpolioFileNum == null || maxPortpolioFileNum == "") maxPortpolioFileNum = 0;
						
						var multi_selector = new MultiSelector(document.getElementById('thumbFileUploaderList'),
								maxThumbFileNum, null, null, maxFileSize, null, 'thumb');
						multi_selector.addElement(document.getElementById('thumbFileUploader'));
						
						var multi_selector1 = new MultiSelector(document.getElementById('imgFileUploaderList'),
								maxImgFileNum, null, null, maxFileSize, null, 'img');
						multi_selector1.addElement(document.getElementById('imgFileUploader'));
						
						var multi_selector2 = new MultiSelector(document.getElementById('portfolioUploaderList'),
								maxPortpolioFileNum, null, null, maxFileSize, null, 'portfolio');
						multi_selector2.addElement(document.getElementById('portfolioFileUploader'));
					</script>

					
					<!-- 버튼 시작(상세지정 style로 div에 지정) -->
					<div class="main1_btn_div">
						<button class="main1_btn" onclick="javascript:fn_egov_select_list(); return false;">돌아가기</button>
						<button class="main1_btn main1_save_btn" id="main1_save_btn" onclick="javascript:fn_egov_insert(); return false;">대관신청</button>
					</div>
					<!-- 버튼 끝 -->
				</div>
			</form:form>
		</div>
		
	</div>
	<!-- //content 끝 -->
</body>
</html>

