<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MainContentsPopupForm.html
 * @desc    : 메인전시 GNB 카테고리탭 컨텐츠 수정 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.2.23    bin2107     최초 작성
 *******************************************************************************
 -->
	<div class="modalPopup" data-width="1400" >
		<div class="panelStyle">
			<div class="panelTitle">
				<h2 id="popTitle" th:text="${contentsLoc}"></h2>
				<button type="button" class="close" onclick="fnMainGnbContentsPopupFormClose()"><i class="fa fa-times"></i></button>
			</div>
			<div class="panelContent">
				<ul class="panelBar">
					<li class="aL">
						<span class="cBlue">* 상단으로 드래그&amp;드랍하여 순서 변경 가능합니다.d</span>
					</li>
					<li class="aR">
						<button type="button" class="btn btn btn-base btn-sm" onclick="fnAddTab(this);">TAB 컨텐츠 추가</button>
						<button type="button" class="btn btn btn-dark btn-sm" id="btnGnbTabSave">임시저장</button>
					</li>
				</ul>
			</div>
			<form style="height:600px; width:1370px; overflow:auto;" id="gnbTabList">
			</form>
		</div>
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	var cateNo = [[${cateNo}]];
	var contentsLoc = [[${contentsLoc}]];
	var brandGroupNo = [[${brandGroupNo}]];
	var contentsTitle = [[${contentsTitle}]];
	var contentsLocArr = gagajf.convertToArray([[${contentsLocList}]]);
	var tdWidth = $("#gnbTabList").find("td").width();
	var tdDeleteWidth = parseInt(tdWidth/11, 10);
	tdWidth = tdWidth - tdDeleteWidth;
	var cate1List = [[${cate1List}]];
	var tableIdx = 0;

	// 컨텐츠 추가 날짜 설정
	var fnCreateTimeOption = function(val, sel) {
		var html = '';
		for(var i=0; i<val; i++){
			var time = 0;
			if(i<10){
				time = '0'+i;
			}else {
				time = i;
			}
			var select = false;
			if(sel==time){
				select = true;
			}
			if(val==24){
				time += '시';
			}else if(val==60){
				time += '분';
			}
			html += '<option value="'+time+'"';
			if(select){
				html += 'selected="selected"';
			}
			html += '>'+time+'</option>';
		}
		return html;
	}

	// 탭추가
	var addIdx = 0;
	var fnAddTab = function (param){
		addIdx = tableIdx+1;
		var html = '';
		html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+addIdx+'">';
		html += '<input type="hidden" name="tableIdx" value="'+addIdx+'" data-id="'+addIdx+'" />';
		html += '	<colgroup>';
		html += '		<col style="width:10%;"/>';
		html += '		<col style="width:55%;"/>';
		html += '		<col/>';
		html += '	</colgroup>';
		html += '	<thead>';
		if(contentsLoc=='STAB002'){
			html += '<tr class="cateTypeTr">';
			html += '	<th>유형선택</th>';
			html += '	<td colspan="3">';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="C" onclick="fnChangeCateType(this,'+addIdx+');"/>대카테고리</label>';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="O" onclick="fnChangeCateType(this,'+addIdx+');"/>아울렛</label>';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeCateType(this,'+addIdx+');"/>이벤트링크</label>';
			html += '	</td>';
			html += '</tr>';
		}else if(contentsLoc=='SBM002' || contentsLoc=='SBMM002'){
			html += '<tr class="cateTypeTr">';
			html += '	<th>유형선택</th>';
			html += '	<td colspan="3">';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="L" onclick="fnChangeGnbType(this,'+addIdx+');" checked="checked"/>이벤트링크</label>';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="B" onclick="fnChangeGnbType(this,'+addIdx+');" />룩북</label>';
			html += '		<label class="rdoBtn"><input type="radio" name="cateType'+addIdx+'" value="P" onclick="fnChangeGnbType(this,'+addIdx+');" />기획전</label>';
			html += '	</td>';
			html += '</tr>';
		}
		html += '	<tr>';
		html += '		<th>전시일시</th>';
		html += '		<td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar"/>';
		html += '			<select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
		html += fnCreateTimeOption(24);
		html += '			</select>';
		html += '			<select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
		html += fnCreateTimeOption(60);
		html += '			</select>';
		html += '			<span> ~ </span>';
		html += '			<input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar"/>';
		html += '			<select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
		html += fnCreateTimeOption(24,23);
		html += '			</select>';
		html += '			<select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
		html += fnCreateTimeOption(60,59);
		html += '			</select>';
		html += '			<input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center"/>';
		html += '		</td>';
		html += '		<td class="aL cateTypeBtnArea">';
		html += '		<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
		html += '	</tr>';
		html += '	</thead>';
		html += '	<tbody>';
		if(contentsLoc=='STAB001'){
			for(var i=0; i<3; i++){
				html += '	<tr class="groupTr">';
				html += '		<th>GROUP '+(i+1)+'<br><input type="text" name="brandGroup'+addIdx+'" id="bTitle'+(i+1)+'" class="w100" value=""/><br>';
				html += '			<button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+addIdx+'\',\''+(i+1)+'\');">브랜드조회</button><br></th>';
				html += '		<td colspan="2" name="brandArr'+addIdx+'" id="tabBrand'+(i+1)+'">';
				html += '			<div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
				html += '				<div class="itemWrap ui-sortable" id="brandListTd'+(i+1)+'" data-id="'+(i+1)+'">';
				html += '				</div>';
				html += '			</div>';
				html += '		</td>';
				html += '	</tr>';
			}
		}else if(contentsLoc=='SBM002'||contentsLoc=='SBMM002'){
			html += '	<tr name="tabLinkTitleRow">';
			html += '		<th>타이틀';
			html += '		<br>';
			html += '		<span id="titleByte'+addIdx+'">0</span>/30Byte';
			html += '		</th>'
			html += '		<td><input name="title" type="text" maxlength="15" data-valid-name="타이틀" value="" onkeyup="cfnGetTextLength(this, 30, $(\'#titleByte'+addIdx+'\'));"/></td>';
			html += '	</tr>';
			html += '	<tr name="tabLinkRow">';
			html += '		<th>링크 (없으면 #)<br>(메인은 /)</th>';
			html += '		<td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value=""/></td>';
			html += '	</tr>';
		}else{
			html += '	<tr name="tabCateRow" style="display:none;">';
			html += '		<th>카테고리</th>';
			html += '		<td colspan="3">카테고리선택';
			html += '			<select name="cate1List">';
			html += '				<option value="">[선택]</option>';
			for(let i=0; i<cate1List.length; i++){
				html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
			}
			html += '			</select>';
			html += '		</td>';
			html += '	</tr>';
			html += '	<tr name="tabLinkTitleRow" style="display:none;">';
			html += '		<th>타이틀</th>';
			html += '		<td><input name="title" type="text" maxlength="200" data-valid-name="타이틀" value=""/></td>';
			html += '	</tr>';
			html += '	<tr name="tabLinkRow" style="display:none;">';
			html += '		<th>링크 (없으면 #)<br>(메인은 /)</th>';
			html += '		<td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value=""/></td>';
			html += '	</tr>';
		}
		html += '	</tbody>';
		html += '</table>';
		$("#gnbTabList").prepend(html);
		$("#gnbTabList").sortable();
		$('.schDate').datepicker("destroy");
		$('.schDate').datepicker({
			changeMonth: true,
			changeYear: true,
			defaultDate: $('.schDate').val()
		});

		if(contentsLoc=='STAB001'){
			$("#brandListTd1").sortable();
			$("#brandListTd2").sortable();
			$("#brandListTd3").sortable();
		}
		fnResetDispOrd();
		tableIdx = tableIdx+1;
	}

	var tabTableRow;
	var callbackBrandTr;
	var fnSearchBrand = function (idx,brandTr){
		tabTableRow = idx;
		callbackBrandTr = brandTr;
		cfnOpenBrandGroupListPopup("callBackBrandGroup", "S", "S");
	}

	// 브랜드 코드, 브랜드 명, 브랜드 이미지 3개 불러와야함 -> 로직 수정 필요
	var brandCdIdx=0;
	var uploadGoodsUrl = [[${@environment.getProperty('domain.image')}]];
	var callBackBrandGroup = function (result) {
		var html = '';
		brandCdIdx = $("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr + " >ul").size()

		for (let i = 0; i < result.length; i++) {
			html += '<ul id="brandUl' + brandCdIdx + '" class="item ui-state-default brandClass" style="min-height:80px;">';
			html += '	<input type="hidden" name="brandGroupNo" value="' + result[i].brandGroupNo + '">';
			html += '	<input type="hidden" name="imgPath1" value="' + result[i].logoFileNm + '">';
			html += '	<li class="img">';
			html += '		<img style="height:100%;" src="' + uploadGoodsUrl + "/" + result[i].logoFileNm + '" onerror="this.src=\'/image/no.png\';"/>';
			html += '	</li>';
			html += '	<li class="cont">';
			html += '		<ul>';
			html += '			<li class="no" name="brandCdLi"><span>' + result[i].brandGroupNo + '</span>';
			html += '				<span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,'+tabTableRow+','+callbackBrandTr+',' + brandCdIdx + ');">X</a></span>';
			html += '			</li>';
			html += '			<li class="title">' + result[i].brandGroupNm + '</li>';
			html += '		</ul>';
			html += '	</li>';
			html += '</ul>';
		}
		$("#tabTable" + tabTableRow + " #brandListTd" + callbackBrandTr).append(html);
		brandCdIdx++;
	}

	var fnRemoveBrand = function (obj ,tableRow, brandTr, idx){
		$("#tabTable" + tableRow + " #brandListTd" + brandTr+ " #brandUl" + idx).remove();
		// var divId = $(obj).closest('div').attr('id');
		// $("#"+divId+" #brandUl"+idx).remove();
		//fnReloadGoodsListIdx(divId);
	}

	// 카테고리 유형 선택
	var fnChangeCateType = function (obj, idx){
		let cateType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();

		if(cateType=='C'){
			$(obj).closest("table").find("[name=tabCateRow]").show();
			$(obj).closest("table").find("[name=tabOutletRow]").hide();
			$(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
			$(obj).closest("table").find("[name=tabLinkRow]").hide();
		}else if(cateType=='O'){
			$(obj).closest("table").find("[name=tabCateRow]").hide();
			$(obj).closest("table").find("[name=tabLinkTitleRow]").hide();
			$(obj).closest("table").find("[name=tabLinkRow]").hide();
		}else if(cateType=='L'){
			$(obj).closest("table").find("[name=tabCateRow]").hide();
			$(obj).closest("table").find("[name=tabOutletRow]").hide();
			$(obj).closest("table").find("[name=tabLinkTitleRow]").show();
			$(obj).closest("table").find("[name=tabLinkRow]").show();
		}
	}

	// 창닫기
	var fnMainGnbContentsPopupFormClose = function (){
		uifnPopupClose('popupMainGnbContents');
	}

	// 컨텐츠 행삭제
	var fnDeleteContentsRow = function (obj){
		mcxDialog.confirm('삭제시 전시순서가 초기화됩니다. 삭제하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				$(obj).closest("table").remove();
				fnResetDispOrd();
			}
		});
	}

	// 전시 일시 체크
	function dateValidation(){
		var dateBool = true;
		$(".tabTable").each(function(i){
			var dispStdt = $(this).find("[name=dispStdt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=stTimeHour]").val().replace('시', '') + "" +$(this).find("[name=stTimeMin]").val().replace('분', '') + "00";
			var dispEddt = $(this).find("[name=dispEddt]").val().replace(/[^0-9]/g, '') + "" +$(this).find("[name=edTimeHour]").val().replace('시', '') + "" +$(this).find("[name=edTimeMin]").val().replace('분', '') + "59";

			let fromDate = dispStdt.replace(/[^0-9]/g, '');
			let toDate = dispEddt.replace(/[^0-9]/g, '');
			if(fromDate > toDate){
				mcxDialog.alert("시작일자는 종료일자 보다 클 수 없습니다.");
				$(this).find('input[name=dispStdt]').focus();
				// dateBool = false;
				return false;
			}
		});
		// if(!dateBool){
		// 	return false;
		// }else{
		// 	return true;
		// }
		return true;
	}

	// 데이터 체크
	function groupDataValidation(){
		var dataBool = true;
		let dupCnt = 0;
		$(".tabTable").each(function (i){
			var thisIdx = $(this).find("input[name=tableIdx]").val();
			$(this).find("input[name=brandGroup"+thisIdx+"]").each(function (idx2){
				if(gagajf.isNull($(this).val())){
					mcxDialog.alert((i+1)+"번째 컨텐츠영역의 "+(idx2+1)+"번째 GROUP명을 입력해주세요.");
					$(this).focus();
					dupCnt++;
					return false;
				}
			});

			if($("#tabTable"+thisIdx+" #tabBrand1 #brandListTd1").find('ul').find('input[name=brandGroupNo]').length < 1){
				mcxDialog.alert((i+1)+"번째 컨텐츠영역의 1번째 브랜드 정보가 없습니다.");
				$(this).focus();
				dupCnt++;
				return false;
			}

			if($("#tabTable"+thisIdx+" #tabBrand2 #brandListTd2").find('ul').find('input[name=brandGroupNo]').length < 1){
				mcxDialog.alert((i+1)+"번째 컨텐츠영역의 2번째 브랜드 정보가 없습니다.");
				$(this).focus();
				dupCnt++;
				return false;
			}

			if($("#tabTable"+thisIdx+" #tabBrand3 #brandListTd3").find('ul').find('input[name=brandGroupNo]').length < 1){
				mcxDialog.alert((i+1)+"번째 컨텐츠영역의 3번째 브랜드 정보가 없습니다.");
				$(this).focus();
				dupCnt++;
				return false;
			}
		});

		// if(!dataBool){
		// 	return false;
		// }else{
		// 	return true;
		// }
		if(dupCnt==0){
			return true;
		}

	}

	// 유형선택 체크
	var dataTypeValidation = function (){
		var dataBool = true;
		let dupCnt = 0;
		$("#gnbTabList .tabTable").each(function (i){
			var thisIdx = $(this).find("input[name=tableIdx]").val();
			if(gagajf.isNull($(this).find("input:radio[name=cateType"+thisIdx+"]:checked").val())){
				mcxDialog.alert((i+1)+'번째 유형을 선택해주세요.');
				// dataBool = false;
				dupCnt++;
				return false;
			}
		});

		// if(!dataBool){
		// 	return false;
		// }else{
		// 	return true;
		// }
		if(dupCnt==0){
			return true;
		}
	}

	/**
	 * 임시저장
	 */
	var dataArr = [];
	$("#btnGnbTabSave").on('click', function(){
		if(!gagajf.checkRequired("#gnbTabList")){
			return;
		}

		// 전시일시 체크
		if(!dateValidation()){
			return false;
		}
		if(contentsLoc=='STAB001'){
			// 데이터 체크
			if(!groupDataValidation()){
				return false;
			}
		}

		// 유형선택 체크
		if(contentsLoc=='STAB002'){
			if(!dataTypeValidation()){
				return false;
			}
		}

		dataArr = [];
		$("#gnbTabList .tabTable").each(function (){
			var newImgFileArr = [];
			var imgPath1 = '';
			var imgPath2 = '';
			var imgPath3 = '';
			var imgPath4 = '';
			var strVar1 = '';
			var strVar2 = '';
			var strVar3 = '';
			var strVar4 = '';
			var strVar5 = '';
			var strVar6 = '';
			var strVar7 = '';
			var strVar8 = '';
			var strTitle1 = '';
			var strTitle2 = '';
			var strTitle3 = '';
			var strTitle4 = '';
			var subText1 = '';
			var subText2 = '';
			var subText3 = '';
			var subText4 = '';
			var i=1;
			var tableidx;
			var dispOrd;

			if(contentsLoc=='STAB001'){
				tableidx = $(this).find("input[name=tableIdx]").val();
				strTitle3 = $(this).find("input[name=dispOrd]").val();
				strTitle4 = $(this).find("input[name=tableIdx]").val();
				var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
				var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';

				$(this).find(".brandClass").each(function (){
					var idx = $(this).closest('div').attr('data-id');
					strTitle1 = $("#tabTable"+tableidx+" .groupTr").find("input[id=bTitle"+idx+"]").val();
					dispOrd = $(this).find("[name=dispOrd]").val();
					strVar1 = $(this).find("input[name=brandGroupNo]").val();
					imgPath1 = $(this).find("input[name=imgPath1]").val();
					strTitle2 = idx;

					var data = {
						cateNo : cateNo
						, contentsLoc : contentsLoc
						, dispStdt : dispStdt
						, dispEddt : dispEddt
						, newImgFileArr : newImgFileArr
						, imgPath1 : imgPath1
						, imgPath2 : imgPath2
						, imgPath3 : imgPath3
						, imgPath4 : imgPath4
						, strVar1 : strVar1
						, strVar2 : strVar2
						, strVar3 : strVar3
						, strVar4 : strVar4
						, strVar5 : strVar5
						, strVar6 : strVar6
						, strVar7 : strVar7
						, strVar8 : strVar8
						, strTitle1 : strTitle1
						, strTitle2 : strTitle2
						, strTitle3 : strTitle3
						, strTitle4 : strTitle4
						, subText1 : subText1
						, subText2 : subText2
						, subText3 : subText3
						, subText4 : subText4
						, useYn : 'Y'
						, dispOrd : dispOrd
					};
					dataArr.push(data);
				});
			}else{
				var gtabGb = '';
				if(contentsLoc=='STAB002'){
					gtabGb = 'C';
				}else{
					gtabGb = 'B';
				}
				var gtabNm = '';
				var cate1No = '';
				var linkUrl = '';
				var radioNm = $(this).find(".rdoBtn input").attr("name");
				var radioValue = $(this).find("input:radio[name="+radioNm+"]:checked").val();
				if(radioValue=='C'){
					var cateText = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").text();
					var cateValue = $(this).find("tr[name=tabCateRow]").find("select[name=cate1List] option:selected").val();
					var cateTextArr = cateText.split(" ");
					gtabNm = cateTextArr[1];
					cate1No = cateValue;
				}

				if(radioValue=='O'){
					gtabNm = "아울렛";
				}

				if(radioValue=='L' || radioValue=='B' || radioValue=='P'){
					gtabNm = $(this).find("input[name=title]").val();
					linkUrl = $(this).find("input[name=link]").val();
				}

				var dispStdt = $(this).find("input[name=dispStdt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=stTimeHour]").val().replace('시', '')+$(this).find("[name=stTimeMin]").val().replace('분', '')+'00';
				var dispEddt = $(this).find("input[name=dispEddt]").val().replace(/[^0-9]/g, '')+$(this).find("[name=edTimeHour]").val().replace('시', '')+$(this).find("[name=edTimeMin]").val().replace('분', '')+'59';
				var dispOrd = $(this).find("[name=dispOrd]").val();

				var data = {
					gtabGb : gtabGb
					, gtabNm : gtabNm
					, contentsType : radioValue
					, dispOrd : dispOrd
					, dispStdt : dispStdt
					, dispEddt : dispEddt
					, cate1No : cate1No
					, linkUrl : linkUrl
					, useYn : 'Y'
					, brandGroupNo : brandGroupNo
				}
				dataArr.push(data);
			}
		});

		if(contentsLoc=='STAB001'){
			if(!dispOrdValidation()){
				return false;
			}
		}

		var jsonData = JSON.stringify(dataArr);
		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				if(contentsLoc=='STAB001'){
					gagajf.ajaxJsonSubmit('/display/contents/preview/save', jsonData, fnGetBrandPreviewList);
				}else{
					gagajf.ajaxJsonSubmit('/display/contents/gnbtab/preview/save', jsonData, fnGetCategoryPreviewList);
				}
			}
		});
	});

	// 동일 전시 순서 안되게 체크
	var dispOrdValidation = function (){
		var dataBool = true;
		let dupCnt = 0;

		if(dataArr.length>0){
			var dataArrSort = [];
			dataArr.forEach(function(item, index){
				for(var i=1; i<dataArr.length; i++){
					if(i>index){
						if(dataArr[index].strTitle4!=dataArr[i].strTitle4){
							if(dataArr[index].strTitle3==dataArr[i].strTitle3){
								dupCnt++;
							}
						}
					}
				}
			});
			if(dupCnt>0){
				dataBool = false;
			}
		}

		if(!dataBool){
			mcxDialog.alert('전시순서가 같을 수 없습니다. 재설정 해주세요.');
			return false;
		}else{
			return true;
		}
	}

	// 브랜드 코드에 해당하는 브랜드 명, 브랜드 이미지 join해서 가져와야함 -> 로직 수정 필요
	var fnGetBrandPreviewList = function (result){
		$("#gnbTabList").html('');
		var data = {cateNo : cateNo
			,contentsLoc : contentsLoc
		};
		var jsonData = JSON.stringify(data);
		gagajf.ajaxJsonSubmit('/display/contents/gnbtab/brand/preview/list', jsonData, fnCreateBrandLayout);
	}

	var fnCreateBrandLayout = function (result){
		var html = '';
		for(var i=0; i<result.length; i++){
			var g1cdArr;
			var g2cdArr;
			var g3cdArr;
			var g1nmArr;
			var g2nmArr;
			var g3nmArr;
			var g1imgArr;
			var g2imgArr;
			var g3imgArr;
			if(!gagajf.isNull(result[i].group1brandCd)){
				g1cdArr = result[i].group1brandCd.split(",");
			}
			if(!gagajf.isNull(result[i].group2brandCd)){
				g2cdArr = result[i].group2brandCd.split(",");
			}
			if(!gagajf.isNull(result[i].group3brandCd)){
				g3cdArr = result[i].group3brandCd.split(",");
			}
			if(!gagajf.isNull(result[i].group1brandNm)){
				g1nmArr = result[i].group1brandNm.split(",");
			}
			if(!gagajf.isNull(result[i].group2brandNm)){
				g2nmArr = result[i].group2brandNm.split(",");
			}
			if(!gagajf.isNull(result[i].group3brandNm)){
				g3nmArr = result[i].group3brandNm.split(",");
			}
			if(!gagajf.isNull(result[i].group1brandImg)){
				g1imgArr = result[i].group1brandImg.split(",");
			}
			if(!gagajf.isNull(result[i].group2brandImg)){
				g2imgArr = result[i].group2brandImg.split(",");
			}
			if(!gagajf.isNull(result[i].group3brandImg)){
				g3imgArr = result[i].group3brandImg.split(",");
			}

			var dispStdt = result[i].dispStdt.split(" ");
			var dispEddt = result[i].dispEddt.split(" ");
			html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
			html += '<input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'" />';
			html += '	<colgroup>';
			html += '		<col style="width:10%;"/>';
			html += '		<col style="width:55%;"/>';
			html += '		<col/>';
			html += '	</colgroup>';
			html += '	<thead>';
			html += '	<tr>';
			html += '		<th>전시일시</th>';
			html += '		<td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
			html += '			<select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
			html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
			html += '			</select>';
			html += '			<select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
			html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
			html += '			</select>';
			html += '			<span> ~ </span>';
			html += '			<input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
			html += '			<select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
			html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
			html += '			</select>';
			html += '			<select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
			html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
			html += '			</select>';
			html += '			<input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].strTitle3+'"/>';
			html += '		</td>';
			html += '		<td class="aL cateTypeBtnArea">';
			html += '		<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
			html += '	</tr>';
			html += '	</thead>';
			html += '	<tbody>';

			html += '	<tr class="groupTr">';
			html += '		<th>GROUP1<br><input type="text" name="brandGroup'+i+'" id="bTitle1" class="w100" value="'+result[i].group1Title+'"/><br>';
			html += '			<button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',1);">브랜드조회</button><br></th>';
			html += '		<td colspan="2" name="brandArr'+i+'" id="tabBrand1">';
			html += '			<div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
			html += '				<div class="itemWrap ui-sortable" id="brandListTd1" data-id="1">';
			for(let k=0; k<g1cdArr.length; k++){
				html += '<ul id="brandUl' + k + '" class="item ui-state-default brandClass" style="min-height:80px;">';
				html += '	<input type="hidden" name="brandGroupNo" value="' + g1cdArr[k] + '">';
				html += '	<li class="img">';
				if(gagajf.isNull(g1imgArr)){
					html += '		<img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
				}else{
					html += '		<img style="height:100%;" src="' + uploadGoodsUrl + "/" + g1imgArr[k] + '" onerror="this.src=\'/image/no.png\';"/>';
				}
				html += '	</li>';
				html += '	<li class="cont">';
				html += '		<ul>';
				html += '			<li class="no" name="brandCdLi"><span>' + g1cdArr[k] + '</span>';
				html += '				<span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,'+i+',1,' + k + ');">X</a></span>';
				html += '			</li>';
				html += '			<li class="title">' + g1nmArr[k] + '</li>';
				html += '		</ul>';
				html += '	</li>';
				html += '</ul>';
			}
			html += '				</div>';
			html += '			</div>';
			html += '		</td>';
			html += '	</tr>';

			html += '	<tr class="groupTr">';
			html += '		<th>GROUP2<br><input type="text" name="brandGroup'+i+'" id="bTitle2" class="w100" value="'+result[i].group2Title+'"/><br>';
			html += '			<button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',2);">브랜드조회</button><br></th>';
			html += '		<td colspan="2" name="brandArr'+i+'" id="tabBrand2">';
			html += '			<div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
			html += '				<div class="itemWrap ui-sortable" id="brandListTd2" data-id="2">';
			for(let m=0; m<g2cdArr.length; m++){
				html += '<ul id="brandUl' + m + '" class="item ui-state-default brandClass" style="min-height:80px;">';
				html += '	<input type="hidden" name="brandGroupNo" value="' + g2cdArr[m] + '">';
				html += '	<li class="img">';
				if(gagajf.isNull(g2imgArr)){
					html += '		<img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
				}else{
					html += '		<img style="height:100%;" src="' + uploadGoodsUrl + "/" + g2imgArr[m] + '" onerror="this.src=\'/image/no.png\';"/>';
				}
				html += '	</li>';
				html += '	<li class="cont">';
				html += '		<ul>';
				html += '			<li class="no" name="brandCdLi"><span>' + g2cdArr[m] + '</span>';
				html += '				<span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + i + ',2,' + m + ');">X</a></span>';
				html += '			</li>';
				html += '			<li class="title">' + g2nmArr[m] + '</li>';
				html += '		</ul>';
				html += '	</li>';
				html += '</ul>';
			}
			html += '				</div>';
			html += '			</div>';
			html += '		</td>';
			html += '	</tr>';

			html += '	<tr class="groupTr">';
			html += '		<th>GROUP3<br><input type="text" name="brandGroup'+i+'" id="bTitle3" class="w100" value="'+result[i].group3Title+'"/><br>';
			html += '			<button type="button" class="btn btn-base btn-lg" onclick="fnSearchBrand(\''+i+'\',3);">브랜드조회</button><br></th>';
			html += '		<td colspan="2" name="brandArr'+i+'" id="tabBrand3">';
			html += '			<div class="sortableWrap" data-unit="7" style="overflow-y:scroll;">';
			html += '				<div class="itemWrap ui-sortable" id="brandListTd3" data-id="3">';
			for(let n=0; n<g3cdArr.length; n++){
				html += '<ul id="brandUl' + n + '" class="item ui-state-default brandClass" style="min-height:80px;">';
				html += '	<input type="hidden" name="brandGroupNo" value="' + g3cdArr[n] + '">';
				html += '	<li class="img">';
				if(gagajf.isNull(g3imgArr)){
					html += '		<img style="height:100%;" src="" onerror="this.src=\'/image/no.png\';"/>';
				}else{
					html += '		<img style="height:100%;" src="' + uploadGoodsUrl + "/" + g3imgArr[n] + '" onerror="this.src=\'/image/no.png\';"/>';
				}
				html += '	</li>';
				html += '	<li class="cont">';
				html += '		<ul>';
				html += '			<li class="no" name="brandCdLi"><span>' + g3cdArr[n] + '</span>';
				html += '				<span style="margin-left:5px;"><a href="javascript:void(0);" onclick="fnRemoveBrand(this,' + i + ',3,' + n + ');">X</a></span>';
				html += '			</li>';
				html += '			<li class="title">' + g3nmArr[n] + '</li>';
				html += '		</ul>';
				html += '	</li>';
				html += '</ul>';
			}
			html += '				</div>';
			html += '			</div>';
			html += '		</td>';
			html += '	</tr>';

			html += '	</tbody>';
			html += '</table>';
		}
		$("#gnbTabList").prepend(html);
		$("#gnbTabList").sortable();
		$('.schDate').datepicker("destroy");
		$('.schDate').datepicker({
			changeMonth: true,
			changeYear: true,
			defaultDate: $('.schDate').val()
		});

		if(contentsLoc=='STAB001'){
			$("#gnbTabList .tabTable").each(function (){
				$(this).find("#brandListTd1").sortable();
				$(this).find("#brandListTd2").sortable();
				$(this).find("#brandListTd3").sortable();
			});
		}

		tableIdx = tableIdx+1;
	}

	var fnGetCategoryPreviewList = function (result){
		var gtabGb = '';
		if(contentsLoc=='STAB002'){
			gtabGb = 'C';
		}else{
			gtabGb = 'B';
		}
		$("#gnbTabList").html('');
		var data = {
			gtabGb : gtabGb
			,brandGroupNo : brandGroupNo
		};
		var jsonData = JSON.stringify(data);
		gagajf.ajaxJsonSubmit('/display/contents/gnbtab/category/preview/list', jsonData, fnCreateCategoryLayout);
	}

	var fnCreateCategoryLayout = function (result){
		var html = '';
		for(var i=0; i<result.length; i++){
			var dispStdt = result[i].dispStdt.split(" ");
			var dispEddt = result[i].dispEddt.split(" ");
			var cateNo = result[i].cate1No;
			html += '<table class="frmStyle tabTable" style="margin-bottom:30px" id="tabTable'+i+'">';
			html += '	<input type="hidden" name="tableIdx" value="'+i+'" data-id="'+i+'">';
			html += '	<colgroup>';
			html += '		<col style="width:10%;"/>';
			html += '		<col style="width:55%;"/>';
			html += '		<col/>';
			html += '	</colgroup>';
			html += '	<thead>';
			html += '		<tr class="cateTypeTr">';
			html += '			<th>유형선택</th>';
			html += '			<td colspan="3">';
			if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
				html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeGnbType(this,'+i+');"';
				if(result[i].contentsType=='L'){
					html += ' checked="checked" ';
				}
				html += '/>이벤트링크</label>';
				html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="B" onclick="fnChangeGnbType(this,'+i+');"';
				if(result[i].contentsType=='B'){
					html += ' checked="checked" ';
				}
				html += ' />룩북</label>';
				html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="P" onclick="fnChangeGnbType(this,'+i+');"';
				if(result[i].contentsType=='P'){
					html += ' checked="checked" ';
				}
				html += ' />기획전</label>';
			}else{
				if(result[i].contentsType=='C'){
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>대카테고리</label>';
				}else{
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="C" onclick="fnChangeCateType(this,'+i+');"/>대카테고리</label>';
				}
				if(result[i].contentsType=='O'){
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>아울렛</label>';
				}else{
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="O" onclick="fnChangeCateType(this,'+i+');"/>아울렛</label>';
				}
				if(result[i].contentsType=='L'){
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');" checked="checked"/>이벤트링크</label>';
				}else{
					html += '<label class="rdoBtn"><input type="radio" name="cateType'+i+'" value="L" onclick="fnChangeCateType(this,'+i+');"/>이벤트링크</label>';
				}
			}
			html += '			</td>';
			html += '		</tr>';
			html += '		<tr>';
			html += '			<th>전시일시</th>';
			html += '			<td><input name="dispStdt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출시작일" data-valid-type="calendar" value="'+dispStdt[0]+'"/>';
			html += '			<select name="stTimeHour" required="required" data-valid-name="노출기간 시작시간">';
			html += fnCreateTimeOption(24, dispStdt[1].split(":")[0]);
			html += '			</select>';
			html += '			<select name="stTimeMin" required="required" data-valid-name="노출기간 시작시간">';
			html += fnCreateTimeOption(60, dispStdt[1].split(":")[1]);
			html += '			</select>';
			html += '			<span> ~ </span>';
			html += '			<input name="dispEddt" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출종료일" data-valid-type="calendar" value="'+dispEddt[0]+'"/>';
			html += '			<select name="edTimeHour" required="required" data-valid-name="노출기간 종료시간">';
			html += fnCreateTimeOption(24, dispEddt[1].split(":")[0]);
			html += '			</select>';
			html += '			<select name="edTimeMin" required="required" data-valid-name="노출기간 종료시간">';
			html += fnCreateTimeOption(60, dispEddt[1].split(":")[1]);
			html += '			</select>';
			html += '			<input name="dispOrd" type="text" class="w80"placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+result[i].dispOrd+'"/>';
			html += '			</td>';
			html += '			<td class="aL cateTypeBtnArea">';
			html += '			<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteContentsRow(this);">삭제</button></td>';
			html += '		</tr>';
			html += '	</thead>';
			html += '<tbody>';
			if(result[i].brandGroupNo!='' && result[i].brandGroupNo!=null){
				html += '	<tr name="tabLinkTitleRow">';
				html += '		<th>타이틀';
				html += '		<br>';
				html += '		<span id="titleByte'+i+'">0</span>/30Byte';
				html += '		</th>';
				html += '		<td><input name="title" type="text" maxlength="15" data-valid-name="타이틀" value="'+result[i].gtabNm+'" onkeyup="cfnGetTextLength(this, 30, $(\'#titleByte'+i+'\'));"/></td>';
				html += '	</tr>';
				html += '	<tr name="tabLinkRow">';
				html += '		<th>링크 (없으면 #)<br>(메인은 /)</th>';
				html += '		<td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
				html += '	</tr>';
			}else{
				if(result[i].contentsType=='C'){
					html += '	<tr name="tabCateRow">';
					html += '		<th>카테고리</th>';
					html += '		<td colspan="3">카테고리선택';
					html += '			<select name="cate1List">';
					html += '				<option value="">[선택]</option>';
					for(let i=0; i<cate1List.length; i++){
						if(cateNo == cate1List[i].cd){
							html += '<option value="'+cate1List[i].cd+'" selected="selected">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
						}else{
							html += '<option value="'+cate1List[i].cd+'">['+cate1List[i].cd+'] '+cate1List[i].cdNm+'</option>';
						}
					}
					html += '			</select>';
					html += '		</td>';
					html += '	</tr>';
				}else if(result[i].contentsType=='L'){
					html += '	<tr name="tabLinkTitleRow">';
					html += '		<th>타이틀';
					html += '		<br>';
					html += '		<span id="titleByte'+i+'">0</span>/20Byte';
					html += '		</th>';
					html += '		<td><input name="title" type="text" maxlength="15" data-valid-name="타이틀" value="'+result[i].gtabNm+'" onkeyup="cfnGetTextLength(this, 30, $(\'#titleByte'+i+'\'));"/></td>';
					html += '	</tr>';
					html += '	<tr name="tabLinkRow">';
					html += '		<th>링크 (없으면 #)<br>(메인은 /)</th>';
					html += '		<td><input name="link" type="text" maxlength="200" placeholder="외부 URL 입력시 https:// 붙여주세요. ex)https://www.levis-kids.co.kr" data-valid-name="링크" value="'+result[i].linkUrl+'"/></td>';
					html += '	</tr>';
				}
			}

			html += '</tbody>';
			html += '</table>';
			tableIdx = i;
		}
		$("#gnbTabList").append(html);
		$("#gnbTabList").sortable();
		$('.schDate').datepicker("destroy");
		$('.schDate').datepicker({
			changeMonth: true,
			changeYear: true,
			defaultDate: $('.schDate').val()
		});

		if(contentsLoc=='SBM002'){
			fnTitleBytes();
		}
		tableIdx = tableIdx+1;
	}

	let fnTitleBytes = function (){
		$(".tabTable").each(function (idx){
			cfnGetTextLength($(this).find('input[name=title]'), 30, $('#titleByte'+idx));
		});
	}

	var fnChangeGnbType = function (obj, idx){
		let chkType = $("#tabTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
		if(chkType=='L'){
			$("#tabTable"+idx).find("input[name=link]").val('');
		}else if(chkType=='B'){
			$("#tabTable"+idx).find("input[name=link]").val('/display/lookbook/main/form?brandGroupNo='+brandGroupNo);
		}else{
			$("#tabTable"+idx).find("input[name=link]").val('/planning/main/form?brandGroupNo='+brandGroupNo);
		}
	}

	var fnResetDispOrd = function (){
		$('.tabTable').each(function (idx){
			$(this).find('input[name=dispOrd]').val(idx+1);
		});
	}

	$(document).ready(function() {
		$("#gnbTabList").disableSelection();
		$("#gnbTabList").sortable({
			stop: function(event, ui) {
				//fnResetTabIdx();
				fnResetDispOrd();
			}
		});

		if(contentsLoc=='STAB001'){
			fnGetBrandPreviewList();
		}else{
			fnGetCategoryPreviewList();
		}
	});
/*]]>*/
</script>

</html>
