<%@ 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="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>문자온</title>

<script type="text/javascript">
var pageType = '${msgcampain}';
var loginVO = '${loginVO}';
var popCustomScrT=0;
$(document).ready(function(){
	
	// 맞춤제작 셈플 리스트	
	customSampleListAjax(1);
	
	customPopup();
	customPopupDetail();
	
	// 맞춤제작 팝업 내보관함 리스트 로그인이 완료된 경우에만 로드되도록
	if(loginVO != "" && loginVO != null){
		myCustomListAjax(1);
	}
	
	// 전체,기업, 개인 선택 옵션 처리
	$('.tDep1_mType').click(function(){
		
		var mType = $(this).find('.on_active').text();
		var form = document.customSampleForm;
		
		if(mType == "전체"){
			
			form.memberType.value = "";
			
		}else if(mType == "기업"){
			
			form.memberType.value = "B";
			
		}else{
			
			form.memberType.value = "P";
			
		}
		
		//문자 리스트 불러오기
		form.letterType.value = "C";
		form.categoryCode.value = "";
		form.hashTag.value = "";
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		customSampleListAjax(1);
	});
	
	$('.tDep1_cateCode').click(function(){ // 카테고리 선택 시 옵션 처리
		
		var cateCode = $(this).find('.on').attr("value");
		var form = document.customSampleForm;
		
		if(cateCode == "all"){ //전체 선택시
			cateCode = "";	
		} else {
			//카테고리 코드 클릭 시 해쉬태그 초기화 후 전체 선택
			form.hashTag.value="";
			$('.tDep2_hashTag').find('.on').removeClass('on');
			$('.tDep2_hashTag').find('.hashAll').addClass('on');
		}
		
		form.categoryCode.value = cateCode;
		form.pageIndex.value = 1;
		
		// 맞춤제작 셈플 리스트
		var pageUnit = $("#CPageUnit").val();
		customSampleListAjax(1);
	});
	
	$('.tDep2_hashTag').click(function(){ //해시 태그 선택 시 옵션 처리
		var hashTag = $(this).find('.on').attr("value");
		var form = document.customSampleForm;
		
		//해쉬태그 클릭 시 카테고리코드 초기화 후 전체 선택
		form.categoryCode.value="";
		$('.tDep1_cateCode').find('.on').removeClass('on');
		$('.tDep1_cateCode').find('.cateAll').addClass('on');
		
		form.hashTag.value = hashTag;
		form.pageIndex.value = 1;
		
		//문자 리스트 불러오기
		customSampleListAjax(1);
	});
	
	if(pageType == "msgcampain"){
		$(".tDep1_cateCode a").each(function(index, item){
			if($(this).text() == "선거"){
				$('.tDep1_cateCode').find('.on').removeClass('on');
				$(this).addClass('on');
			}
		})
	}
});

function fnCPageUnit(){
	var pageUnit = $("#CPageUnit").val();
	document.customSampleForm.pageUnit.value = pageUnit;
	customSampleListAjax(1);
}

function fnMPageUnit(){
	var pageUnit = $("#myPageUnit").val();
	document.myCustomForm.pageUnit.value = pageUnit;
	customSampleListAjax(1);
}

// 맞춤제작 셈플 리스트 
function customSampleListAjax(pageNo){
	document.customSampleForm.pageIndex.value = pageNo;
	var sendData= $(document.customSampleForm).serializeArray();
	$("#customSampleLoad").load("/web/mjon/custom/selectMsgCustomSampleListAjax.do", sendData ,function(response, status, xhr){
		photoLayerView();
	});
}

//맞춤제작 내보관함 리스트 
function myCustomListAjax(pageNo){
	
	if(!fn_G_cmndataValueChk("startDate", "endDate", 12)){
		return;
	};
	
	document.myCustomForm.pageIndex.value = pageNo;
	var sendData= $(document.myCustomForm).serializeArray();
	$("#myCustomLoad").load("/web/mjon/custom/selectMsgMyCustomListAjax.do", sendData ,function(response, status, xhr){
		photoLayerView();
	});
}

//맞춤제작 내보관함 정렬 조회
function fnMyCustomSearchListOrd(){
	
	var form = document.myCustomForm;
	var sortOrd = form.searchSortOrd.value;
	
	if(sortOrd == 'desc'){
		
		form.searchSortOrd.value = 'asc';
		$('#sortCnd').text('등록순');
		
	}else{
		
		form.searchSortOrd.value = 'desc';
		$('#sortCnd').text('최근순');
		
	}
	
	//내문자함 내용 검색하기
	myCustomListAjax(1);
	
}
//맞춤제작 등록 Popup 
function customPopup(){
	$("#customPopup").load("/web/mjon/custom/selectMsgCustomPopupAjax.do", "" ,function(response, status, xhr){
		popupImgList(1);
	});
}

function openMsgCustomPopup() {
	if(loginVO == "" || loginVO == null){
		alert("로그인 후 이용이 가능합니다.");
		return false;
	} else {
		$("#customPopupOpen").trigger("click");
	}
	$("#customType04").hide();
	popCustomScrT=$(window).scrollTop();
	popScrTarget();
}

//맞춤제작 등록 Popup 
function customPopupDetail(){
	$("#customPopupDetail").load("/web/mjon/custom/MsgCustomVeiwPopupAjax.do", "" ,function(response, status, xhr){
		
	});
}

function linkPhoPage(pageNo){
	customSampleListAjax(pageNo);
}

function myCustomPage(pageNo){
	myCustomListAjax(pageNo);
}

function fnCustomImgSendMsg(atchFileId, fileSn, strImgPath){
	
	var form = document.customImgSendForm;
	
	form.atchFileId1.value = atchFileId;
	form.fileSn.value = fileSn;
	form.strImgPath.value = strImgPath;
	form.customImgFlag.value = "Y";
	
	form.action = "<c:url value='/web/mjon/msgdata/selectMsgDataView.do'/>";
	form.submit();
	
}

$(function(){
	sitemapTabView();
});
function sitemapTabView(){
	var oldUrl=window.location.href;
	var idx=oldUrl.slice(-1);
	var n=oldUrl.indexOf('?');
	var changeUrl=oldUrl.slice(0,n);
	
	/* if(typeof (history.pushState) != 'undefined' && oldUrl.indexOf('?') !== -1){
		history.pushState(null, null, changeUrl);
	}else{} */
	if(oldUrl.indexOf('?') !== -1){
		$('.tabType4 li').removeClass('active').eq(idx-1).addClass('active');
		$('.custom_content').removeClass('current');
		$('.custom_content.custom'+idx).addClass('current');
		
		TabType4(this, idx);
	}
}

$(window).on('load',function(){
	setTimeout(function(){
		popScrTarget();
	},500);
});

function popScrTarget(){
	var closeTarget=$('.custom_layer .tooltip-close');
	closeTarget.attr('onclick','popScrCloseSetting();');
}

function popScrCloseSetting(){
	setTimeout(function(){
		$(window).scrollTop(popCustomScrT);	
	},1);
}
</script>
</head>
<body>
	<!-- content 영역 -->
	<div class="inner">
		<input type="hidden" id="msgcampain" value="${msgcampain}"/>
		<!-- 공통 visal -->
		<div class="custom_visual">
			<div class="custom_visual_image"></div>
		</div>
		<!-- send top -->
		<div class="send_top">
			<!-- tab button -->
			<ul class="tabType4">
				<li class="tab active">
					<button type="button" onclick="TabType4(this,'1');">맞춤제작 샘플</button>
				</li>
				<li class="tab">
					<button type="button" onclick="TabType4(this,'2');">제작방법 및 이용안내</button>
				</li>
				<li class="tab">
					<button type="button" onclick="TabType4(this,'3');">내보관함</button>
				</li>
			</ul>
			<form id="customImgSendForm" name="customImgSendForm" method="post">
				<input type="hidden" id="atchFileId1" name="atchFileId1" value=""/>
				<input type="hidden" id="fileSn" name="fileSn" value=""/>
				<input type="hidden" id="strImgPath" name="strImgPath" value=""/>
				<input type="hidden" id="customImgFlag" name="customImgFlag" value="N"/>
			</form>
			<!--// tab button -->
			<form id="customSampleForm" name="customSampleForm" method="post">
				<input type="hidden" name="pageIndex" />
				<input type="hidden" name="hashTag" id="hashTag" />
				<input type="hidden" name="letterType" id="letterType" />
				<input type="hidden" name="memberType" id="memberType" />
				<input type="hidden" name="pageUnit" id="pageUnit" value="${searchVO.pageUnit}"/>
				<input type="hidden" name="categoryCode" id="categoryCode" 
				<c:if test="${msgcampain eq 'msgcampain'}">
				value="${searchVO.categoryCode}"
				</c:if>
				/>
				<!-- tab content1 맞춤제작 샘플 -->
				<div class="custom_content current custom1" id="tab4_1"> 
					<div class="area_tabs">
						<div class="top_tab">
							<!-- <div class="tab_depth1 tDep1_mType">
								<a href="#none" class="on" value="">전체</a>
								<a href="#none" value="B">기업</a>
								<a href="#none" class="on" value="P">개인</a>
								<div class="on_active">전체</div>
							</div> -->
							<div class="customReq">
								<input type="hidden" id="customPopupOpen" data-tooltip="popup01">
								<button type="button" onclick="openMsgCustomPopup(); return false;"><i></i>맞춤제작 요청</button>
							</div>
							<select name="CPageUnit" id="CPageUnit" class="selType2" onChange="fnCPageUnit(); return false;">
								<option value="10">2줄보기</option>
								<option value="20">4줄보기</option>
								<option value="30">6줄보기</option>
							</select>
						</div>
						<div class="bottom_tab">
							<div class="tab_depth3 tDep1_cateCode">
								<a href="#none" class="on cateAll" value="">All</a>
								<a href="#none" value="best">BEST</a>
								<c:forEach var="cateList" items="${cateCodeList}" varStatus="status">
									<a href="#none" value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></a>
								</c:forEach>
							</div>
							<div class="tab_depth4 tDep2_hashTag">
								<a href="#none" class="on hashAll" value="">전체</a>
								<c:forEach var="hashList" items="${hashTagList}" varStatus="status">
									<a href="#none" value="${hashList.hashNm}">#<c:out value="${hashList.hashNm}"/></a>
								</c:forEach>
							</div>
						</div>
					</div>
					<div id="customSampleLoad">
					</div>
				</div>
				<!--// tab content1 맞춤제작 샘플 -->
			</form>
			<!-- tab content2 제작방법 및 이용안내 -->
			<div class="custom_content custom2" id="tab4_2">
				<div class="heading">
					<h2>제작방법 및 이용안내</h2>
				</div>
				<div class="cont_top">
					<table>
						<caption>제작방법 및 이용안내에 대한 구분, 용도, 가격, 제공방법 표</caption>
						<colgroup>
							<col style="width: 520px;">
							<col style="width: 15%;">
							<col style="width: 15%;">
							<col style="width: 25%;">
						</colgroup>
						<thead>
							<tr>
								<th scope="col">구분</th>
								<th scope="col">용도</th>
								<th scope="col">가격<span>(VAT별도)</span></th>
								<th scope="col">구분</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>문자온 샘플 수정(글자, 색상, 폰트 등)</td>
								<td>문자/카톡</td>
								<td>${customSamplePrice}원</td>
								<td>내보관함/카톡/이메일</td>
							</tr>
							<tr>
								<td>이미지 편집(첨부이미지 1장)</td>
								<td>문자/카톡</td>
								<td>${customEditPrice}원</td>
								<td>내보관함/카톡/이메일</td>
							</tr>
							<tr>
								<td>이미지 편집(첨부이미지 3장이하)</td>
								<td>문자/카톡</td>
								<td>${customEdit3Price}원</td>
								<td>내보관함/카톡/이메일</td>
							</tr>
							<tr>
								<td>텍스트 단순수정</td>
								<td>문자/카톡</td>
								<td>${customTextPrice}원</td>
								<td>내보관함/카톡/이메일</td>
							</tr>
						</tbody>
					</table>
					<div class="custom_notice">
						<div>
							<i></i>
							<p>유의사항</p>
						</div>
						<ul>
							<li>
								<p>- 모든 완성본은 1장만 제공됩니다.</p>
								<p>- 제작 완료 후 추가 수정 시 별도 비용이 발생됩니다.</p>
							</li>
							<li>
								<p>- 제작기간은 영업일 기준 1~3일 정도 소요됩니다.</p>
								<p>- 제작 완료된 이미지는 내보관함에 자동 저장됩니다.</p>
							</li>
							<li>
								<p>- PSD 원본 파일은 제공하지 않습니다.</p>
								<p>- 제작비용은 신청 시 즉시 차감됩니다.</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="cont_bottom">
					<div class="custom_step">
						<div class="step_title">
							<p><span>샘플</span> 제작 요청방법</p>
							<span class="summary">전문 디자이너가 직접 제작하는 고퀄리티 맞춤제작 서비스</span>
						</div>
						<ol>
							<li>
								<div class="step">STEP <strong>01</strong></div>
								<div class="text">문자온 문자 샘플 목록에서<br><strong>원하는 이미지 선택</strong></div>
							</li>
							<li>
								<div class="step">STEP <strong>02</strong></div>
								<div class="text">작업 요청내역 입력 후<br><strong>신청하기 버튼 클릭</strong></div>
							</li>
							<li>
								<div class="step">STEP <strong>03</strong></div>
								<div class="text"><strong>내보관함</strong>에서<br>완성된 이미지 확인<span>(문자, 카톡 등)</span></div>
							</li>
						</ol>
					</div>
				</div>
			</div>
			<!--// tab content2 제작방법 및 이용안내  -->
			
			<!-- tab content3 내 보관함 -->
			<form id="myCustomForm" name="myCustomForm" method="post">
				<input type="hidden" name="pageIndex" />
				<input type="hidden" name="pageUnit" id="pageUnit"  value="${searchVO.pageUnit}"/>
				<input name="searchSortOrd" type="hidden" value="desc"/>
				<div class="custom_content custom3" id="tab4_3">
					<div class="search_wrap clearfix">
						<div class="btn_left">
							<span>· 기간</span>
							<div class="calendar_wrap">
								<input type="text" class="startDate inp calendar" title="검색 시작일" id="startDate" name="searchStartDate" value="${myStartDate}" data-datecontrol="true">
								<span class="dateEtc">~</span>
								<input type="text" class="endDate inp calendar" title="검색 종료일" id="endDate" name="searchEndDate" value="${myEndDate}" data-datecontrol="true">
							</div>
							<div class="search">
<!-- 								<label for="searchWord" class="label"></label> -->
<!-- 								<input type="text" id="searchWord" name="searchWord" placeholder="내보관함 검색" onfocus="this.placeholder=''" onblur="this.placeholder='내보관함 검색'"> -->
								<button type="button" class="btnType btnType2" onclick="javascript:myCustomListAjax(1); return false;">검색</button>
							</div>
						</div>
						<div class="btn_right">
							<button type="button" id="sortOrd" name="sortOrd" onClick="javascript:fnMyCustomSearchListOrd(); return false;"><span id="sortCnd">최근순</span><i></i></button>
							<!-- <label for="" class="label">검색조건 선택</label>
							<select name="" id="" class="selType2">
								<option value="">전체보기</option>
								<option value="">전체보기</option>
								<option value="">전체보기</option>
							</select> -->
							<label for="pageUnit" class="label"></label>
							<select name="myPageUnit" id="myPageUnit" class="selType2" onChange="fnMPageUnit(); return false;">
								<option value="10">2줄보기</option>
								<option value="20">4줄보기</option>
								<option value="30">6줄보기</option>
							</select>
						</div>
					</div>
					<div id="myCustomLoad">
					</div>
				</div>
			</form>
			<!--//tab content3 내 보관함 -->
			<!-- 맞춤제작 요청 레이어 팝업 -->
			<div class="tooltip-wrap" id="customPopup">
			</div>
			<!--// 맞춤제작 요청 레이어 팝업 -->
			<!-- 내 보관함 상세보기 레이어 팝업 -->
			<div class="tooltip-wrap" id="customPopupDetail">
			</div>
			<!--// 내 보관함 상세보기 레이어 팝업 -->
		</div>
		<!--// send top -->
	</div>
	<!--// content 영역 -->
</body>
</html>
