<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : LookbookBannerPopupForm.html
 * @desc    : 룩북 배너 등록/수정 상세 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.05   bin2107     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1600" data-height="850">
	<div class="panelStyle" style="overflow-y:scroll;">
		<form id="lbBannerForm" name="lbBannerForm" action="#" th:action="@{'/display/lookbook/save'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
			<input type="hidden" id="siteCd" name="siteCd" value="G00_10"/>
			<input type="hidden" id="lookbookSq" name="lookbookSq" th:value="${lookbookSq}"/>
			<input type="hidden" name="mainDispYn" th:value="${mode == 'N'? '' : lookbookMstInfo.mainDispYn}">
			<input type="hidden" name="uploadDefaultBannerUrlPop" id="uploadDefaultBannerUrlPop" th:value="${@environment.getProperty('upload.image.view') + '/lookbook/banner/'}"/>
			<div class="panelTitle">
				<h2 th:text="${'룩북 ' + (mode == 'N' ? '등록' : '상세')}"></h2>
				<button type="button" class="close" onclick="uifnPopupClose('popupLookbookBanner');"><i class="fa fa-times"></i></button>
			</div>
			<div class="panelContent">
				<ul class="panelBar">
					<li class="aL">
						<span class="cBlue">* 상단으로 드래그&amp;드랍하여 배너 순서 변경 가능합니다.</span><br>
						<span class="cBlue">* 배너 PICKER는 저장 후 배너 상세 팝업에서 등록할 수 있습니다.</span>
					</li>
					<li class="aR">
						<button type="button" class="btn btn-success btn-lg" id="btnMain">메인룩북설정</button>
						<button type="button" class="btn btn-success btn-lg" id="btnAddBanner">배너추가</button>
						<button type="button" class="btn btnRight btn-success btn-lg" id="btnSave">저장</button>
					</li>
				</ul>
			</div>
			<div>
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
						<col style="width:10%;"/>
						<col style="width:15%;"/>
					</colgroup>
					<tbody>
					<tr>
						<th>타이틀<i class="required" title="필수"></i></th>
						<td>
							<input type="text" class="w400" name="title" required="required" data-valid-name="타이틀">
						</td>
						<th>브랜드<i class="required" title="필수"></i></th>
						<td>
							<input type="text" class="w200" name="brandCd" value="" />
							<button type="button" class="btn btnRight btn-success btn-lg" onclick="fnSearchLbpBrandGroup();">브랜드조회</button>
						</td>
						<!--<td>
							<select name="brandCd">
								<option value="">[선택]</option>
								<option th:if="${brandGroupList}" th:each="oneData, status : ${brandGroupList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>-->
					</tr>
					<tr>
						<th>노출기간<i class="required" title="필수"></i></th>
						<td id="sellTerms2">
							<span class="nowrap">
								<input name="lbDispStdt" id="lbStDate" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출기간 시작일" />
								<select id="lbStTimeHour" required="required" data-valid-name="노출기간 시작시간">
									<th:block th:each="num, index  : ${#numbers.sequence(0,23)}">
										<option  th:value="${#numbers.formatInteger(num,2)}" th:text="|${#numbers.formatInteger(num,2)}시|" >시간</option>
									</th:block>
								</select>
								<select id="lbStTimeMin" required="required" data-valid-name="노출기간 시작시간">
									<th:block th:each="num: ${#numbers.sequence(0,59)}">
										<option  th:value="${#numbers.formatInteger(num,2)}"  th:text="|${#numbers.formatInteger(num,2)}분|" >분</option>
									</th:block>
								</select>
								<input name="lbDispStTime" id="lbStTime" type="hidden" data-valid-name="노출기간 시작시간" value='000000' />
								~
								<input name="lbDispEddt" id="lbEdDate" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="노출기간 종료일" />
								<select id="lbEdTimeHour" required="required" data-valid-name="노출기간 종료시간">
									<th:block th:each="num: ${#numbers.sequence(0,23)}">
										<option  th:value="${#numbers.formatInteger(num,2)}"  th:text="|${#numbers.formatInteger(num,2)}시|" th:selected="${#numbers.formatInteger(num,2)}==23 ? 'true'">시간</option>
									</th:block>
								</select>
								<select id="lbEdTimeMin" required="required" data-valid-name="노출기간 종료시간">
									<th:block th:each="num: ${#numbers.sequence(0,59)}">
										<option  th:value="${#numbers.formatInteger(num,2)}"  th:text="|${#numbers.formatInteger(num,2)}분|" th:selected="${#numbers.formatInteger(num,2)}==59 ? 'true'">분</option>
									</th:block>
								</select>
								<input name="lbDispEdTime" id="lbEdTime" type="hidden" data-valid-name="노출기간 종료시간" value='235959' />
							</span>
						</td>
						<th>노출여부<i class="required" title="필수"></i></th>
						<td>
							<label class="rdoBtn"><input type="radio" name="dispYn" value="Y"/>Y</label>
							<label class="rdoBtn"><input type="radio" name="dispYn" value="N" checked="checked">N</label>
						</td>
					</tr>
					<tr>
						<th>메인 목록 썸네일<i class="required" title="필수"></i></th>
						<td colspan="3">
							<div class="uFile w300">
								<input id="file" name="file" type="file" class="uFileInput w300"/>
								<label for="file" class="uFileLabel">파일선택</label>
								<input type="hidden" name="orgTnfileNm" value=""/>
								<!--<input type="hidden" name="sysTnfileNm"/>-->
								<input type="hidden" name="newSysTnfileNm" value=""/>
							</div>
							<input type="hidden" name="uploadDefaultUrl" id="uploadDefaultUrl" th:value="${@environment.getProperty('upload.image.view') + '/lookbook/thumbnail/'}"/>
							<div id="imgView" class="off">
								<img id="bannerPreViewUrl" src="" style="width:100px; height:100px"/>
							</div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div id="bannerDiv">
				<input type="hidden" name="uploadDefaultBannerUrl" id="uploadDefaultBannerUrl" th:value="${@environment.getProperty('upload.image.view') + '/lookbook/banner/'}"/>
				<!-- posistion picker -->
				<!-- //posistion picker -->
			</div>
		</form>
	</div>
</div>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=2019072202"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	var mode = [[${mode}]];
	var lookbookMstInfo = [[${lookbookMstInfo}]];
	var lookbookBannerList = [[${lookbookBannerList}]];

	var bannerIdx = 0;
	$("#btnAddBanner").on('click', function(){
		var html = '';
		html += '<table class="frmStyle bannerTableC" id="bannerTable'+bannerIdx+'">';
		html += '	<colgroup>';
		html += '		<col style="width:10%"/>';
		html += '		<col style="width:30%"/>';
		html += '		<col style="width:10%"/>';
		html += '		<col style="width:45%"/>';
		html += '		<col style="width:5%"/>';
		html += '	</colgroup>';
		html += '	<thead>';
		html += fnAddBannerImgRow();
		/*html += '		<tr>';
		html += '			<th>배너이미지</th>';
		html += '			<td>';
		html += '				<div class="uFile w300">';
		html += '					<input id="bannerFile'+bannerIdx+'" name="file" type="file" class="uFileInput w300" onchange="fnBannerImgFileUpload(this, ' + bannerIdx + ');">';
		html += '					<label for="bannerFile'+bannerIdx+'" class="uFileLabel">파일선택</label>';
		html += '					<input type="hidden" name="bannerImgPath" value="">';
		html += '					<input type="hidden" name="bannerNewImgFile" value="">';
		html += '				</div>';
		html += '				<div id="bannerImgView_' + bannerIdx + '">';
		html += '					<img id="bannerPreViewUrl_' + bannerIdx + '" src="" style="height:100px; max-width:500px;"/>';
		html += '				</div>';
		html += '			</td>';
		html += '			<th>이미지설명</th>';
		html += '			<td><textarea class="textareaR4" name="imgDesc" id="imgDesc'+bannerIdx+'"></textarea></td>';
		html += '			<td><input name="dispOrd" type="text" class="w80" placeholder="전시순서" style="margin-left:5px; text-align:center"/>';
		//html += '			<button type="button" class="btn btn-success btn-lg" onclick="fnAddPicker(this);">피커추가</button>';
		html += '			<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteBanner(this);">삭제</button></td>';
		html += '		</tr>';*/
		html += '	</thead>';
		html += '</table>';

		bannerIdx++;
		$("#bannerDiv").append(html);
		$("#bannerDiv").sortable();
		fnResetIdx();
	});

	// 배너삭제
	var fnDeleteBanner = function (obj){
		$(obj).closest("table").remove();
		fnResetIdx();
	}

	var fnBannerImgFileUpload = function (obj, idx){
		var file = obj.files[0];

		file.name = 'test';
		if (typeof(file) == 'undefined'){
			return;
		}
		// 파일 업로드
		gagajf.ajaxFileUpload('/common/file/upload?subDir=/lookbook/banner/'
				, file
				, function(result) {
					$(obj).closest('div').find('input:hidden[name=bannerImgPath]').val(result.oldFileName);
					$(obj).closest('div').find('input:hidden[name=bannerNewImgFile]').val(result.newFileName);
					$("#lbBannerForm #bannerPreViewUrl_"+idx).attr('src', $("#lbBannerForm #uploadDefaultBannerUrlPop").val()+result.newFileName);
					$("#lbBannerForm #bannerImgView_"+idx).removeClass("off").addClass("on");
				}
				, 'image'
		);
	}

	/**
	 * 저장
	 */
	$("#btnSave").on('click',function (){
		// 필수값 validation 체크
		if (!gagajf.validation('#lbBannerForm')) {
			return false;
		}

		// 데이터 validation 체크
		if(!dataValidation()){
			return false;
		}

		var orgTnfileNm = $('#lbBannerForm input[name=orgTnfileNm]').val();
		var newSysTnfileNm = $('#lbBannerForm input[name=newSysTnfileNm]').val();

		var fromDate = $('#lbBannerForm input[name=lbDispStdt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbStTimeHour').val()+$('#lbBannerForm #lbStTimeMin').val()+'00';
		var toDate = $('#lbBannerForm input[name=lbDispEddt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbEdTimeHour').val()+$('#lbBannerForm #lbEdTimeMin').val()+'59';

		var bannerList = [];

		var bannerIndex=0;
		$(".bannerTableC").each(function (){
			var bannerInfo = {
				 lookbookbSq:  $(this).find("input[name=lookbookbSq]").val()
				,orgFileNm : $(this).find("input[name=bannerImgPath]").val()
				,sysFileNm : $(this).find("input[name=bannerNewImgFile]").val()
				,imgDesc : $(this).find("textarea[name=imgDesc]").val()
				,dispOrd : $(this).find("input[name=dispOrd]").val()
				,dispYn : 'Y'
			};
			bannerList.push(bannerInfo);

			bannerIndex++;
		});

		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					lookbookSq : $('#lbBannerForm input[name=lookbookSq]').val()
					,title : $('#lbBannerForm input[name=title]').val()
					,brandCd : $('#lbBannerForm input[name=brandCd]').val()
					,dispStdt : fromDate
					,dispEddt : toDate
					,dispYn : $('#lbBannerForm input[name=dispYn]:checked').val()
					,orgTnfileNm : orgTnfileNm
					,newSysTnfileNm : newSysTnfileNm
					,mainDispYn : $('#lbBannerForm input[name=mainDispYn]').val()
					,dispOrd : 1
					,bannerList : bannerList
					,mode : mode
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit($('#lbBannerForm').prop('action'), jsonData, fnPopupSaveCollback);
			}
		});
	});

	var fnPopupSaveCollback = function (result){
		uifnPopupClose('popupLookbookBanner');
	}

	// 데이터 validation 체크
	function dataValidation(){
		// 날짜체크
		var fromDate = $('#lbBannerForm input[name=lbDispStdt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbStTimeHour').val()+$('#lbBannerForm #lbStTimeMin').val();
		var toDate = $('#lbBannerForm input[name=lbDispEddt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbEdTimeHour').val()+$('#lbBannerForm #lbEdTimeMin').val();
		if(fromDate > toDate){
			mcxDialog.alert('노출 시작일자는 종료일자 보다 클 수 없습니다.');
			return false;
		}

		return true;
	}

	// 썸네일이미지 첨부파일
	$("#lbBannerForm input[name=file]").on('change',function(){
		var file = this.files[0];
		file.name = 'test';
		if (typeof(file) == 'undefined'){
			return;
		}

		gagajf.ajaxFileUpload('/common/file/upload?subDir=/lookbook/thumbnail'
				, file
				, function(result) {
					$('#lbBannerForm input[name=orgTnfileNm]').val(result.oldFileName);
					$('#lbBannerForm input[name=newSysTnfileNm]').val(result.newFileName);
					$("#lbBannerForm #bannerPreViewUrl").attr('src', $("#lbBannerForm #uploadDefaultUrl").val()+result.newFileName);
					$("#lbBannerForm #imgView").removeClass("off").addClass("on");
				}
				, 'image'
		);
	});

	$(".bannerTableC").each(function (){
		if(gagajf.isNull($(this).find("input[name=bannerNewImgFile]").val())){
			mcxDialog.alert('배너 이미지가 없습니다.');
			return false;
		}
	});

	/**
	 * 배너 리스트
	 */
	var fnCreateLookbookLayout = function (){
		//마스터정보 셋팅
		var dispStdt = lookbookMstInfo.dispStdt.split(" ");
		var dispStTime = dispStdt[1].replace(/[^0-9]/g, '');
		var dispEddt = lookbookMstInfo.dispEddt.split(" ");
		var dispEdTime = dispEddt[1].replace(/[^0-9]/g, '');
		$("#lbBannerForm input[name=lbDispStdt]").val(dispStdt[0]);
		$("#lbBannerForm #lbStTimeHour").val(dispStTime.substr(0,2));
		$("#lbBannerForm #lbStTimeMin").val(dispStTime.substr(2,2));
		$("#lbBannerForm input[name=lbDispEddt]").val(dispEddt[0]);
		$("#lbBannerForm #lbEdTimeHour").val(dispEdTime.substr(0,2));
		$("#lbBannerForm #lbEdTimeMin").val(dispEdTime.substr(2,2));
		$("#lbBannerForm input[name=title]").val(lookbookMstInfo.title);
		$("#lbBannerForm input[name=brandCd]").val(lookbookMstInfo.brandCd);
		$('input:radio[name="dispYn"]:radio[value='+lookbookMstInfo.dispYn+']').prop('checked', true);
		var tnImgPath = lookbookMstInfo.sysTnfileNm;
		var tnSrc = $("#uploadDefaultUrl").val().replace('/lookbook/thumbnail/', '');
		tnSrc = tnSrc + tnImgPath;
		$("#lbBannerForm input[name=orgTnfileNm]").val(tnImgPath);
		$("#lbBannerForm #bannerPreViewUrl").attr('src', tnSrc);
		$("#lbBannerForm #imgView").removeClass("off").addClass("on");

		if(lookbookBannerList.length > 0){
			for(let i=0; i<lookbookBannerList.length; i++){
				var html = '';
				var imgPath = lookbookBannerList[i].sysFileNm;
				var src = $("#uploadDefaultBannerUrlPop").val().replace('/lookbook/banner/', '');
				src = src + imgPath;
				html += '<table class="frmStyle bannerTableC" id="bannerTable'+i+'">';
				html += '	<input type="hidden" name="lookbookbSq" value="'+lookbookBannerList[i].lookbookbSq+'">';
				html += '	<colgroup>';
				html += '		<col style="width:10%"/>';
				html += '		<col style="width:30%"/>';
				html += '		<col style="width:10%"/>';
				html += '		<col style="width:45%"/>';
				html += '		<col style="width:5%"/>';
				html += '	</colgroup>';
				html += '	<thead>';
				html += fnAddBannerImgRow(imgPath,lookbookBannerList[i].imgDesc,lookbookBannerList[i].dispOrd);
				/*html += '		<tr>';
				html += '			<th>배너이미지</th>';
				html += '			<td>';
				html += '				<div class="uFile w300">';
				html += '					<input id="bannerFile'+i+'" name="file" type="file" class="uFileInput w300" onchange="fnBannerImgFileUpload(this, '+i+');">';
				html += '					<label for="bannerFile'+i+'" class="uFileLabel">파일선택</label>';
				html += '					<input type="hidden" name="bannerImgPath" value="'+imgPath+'">';
				html += '					<input type="hidden" name="bannerNewImgFile" value="">';
				html += '				</div>';
				html += '				<div id="bannerImgView_'+i+'">';
				html += '					<img id="bannerPreViewUrl_'+i+'" src="'+src+'" style="height:100px; max-width:500px;"/>';
				html += '				</div>';
				html += '			</td>';
				html += '			<th>이미지설명</th>';
				html += '			<td><textarea class="textareaR4" name="imgDesc" id="imgDesc'+i+'">'+lookbookBannerList[i].imgDesc+'</textarea></td>';
				html += '			<td><input name="dispOrd" type="text" class="w80" placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+lookbookBannerList[i].dispOrd+'"/>';
				html += '				<button type="button" class="btn btn-success btn-lg" onclick="fnAddPicker(this);">피커추가</button>';
				html += '				<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteBanner(this);">삭제</button></td>';
				html += '		</tr>';*/
				html += '	</thead>';
				html += '</table>';

				$("#bannerDiv").append(html);
				$("#bannerDiv").sortable();
				fnResetIdx();
			}
		}
	}

	var bannerImgRow = 0;
	var fnAddBannerImgRow = function (param, imgdesc, dispord){
		var src = '';
		var imgPath = '';
		var desc = '';
		if(!gagajf.isNull(imgdesc)){
			desc = imgdesc;
		}
		if(!gagajf.isNull(param) && typeof param!='object'){
			src = $("#uploadDefaultBannerUrlPop").val().replace('/lookbook/banner/', '')+param;
			imgPath = param;
		}
		var html = '';
		html += '		<tr class="bannerImgTr">';
		html += '			<th>배너이미지</th>';
		html += '			<td>';
		html += '				<div class="uFile w300">';
		html += '					<input id="bannerFile'+bannerImgRow+'" name="file" type="file" class="uFileInput w300" onchange="fnBannerImgFileUpload(this, '+bannerImgRow+');">';
		html += '					<label for="bannerFile'+bannerImgRow+'" class="uFileLabel">파일선택</label>';
		html += '					<input type="hidden" name="bannerImgPath" value="'+imgPath+'">';
		html += '					<input type="hidden" name="bannerNewImgFile" value="">';
		html += '				</div>';
		html += '				<div id="bannerImgView_'+bannerImgRow+'">';
		html += '					<img id="bannerPreViewUrl_'+bannerImgRow+'" src="'+src+'" style="height:100px; max-width:500px;"/>';
		html += '				</div>';
		html += '			</td>';
		html += '			<th>이미지설명';
		html += '			<br/>';
		html += '			<span id="dpLocAnsContent'+bannerImgRow+'">0</span>/4,000Byte';
		html += '			</th>';
		html += '			<td><textarea class="textareaR4" style="resize: none;" name="imgDesc" id="imgDesc'+bannerImgRow+'" onkeyup="cfnGetTextLength(this, 4000, $(\'#dpLocAnsContent\'+'+bannerImgRow+'));" >'+desc+'</textarea></td>';
		html += '			<td><input name="dispOrd" type="text" class="w80" placeholder="전시순서" style="margin-left:5px; text-align:center" value="'+dispord+'"/>';
		if(imgPath!=''){
			html += '				<button type="button" class="btn btn-success btn-lg" onclick="fnAddPicker(this,\''+imgPath+'\');">피커추가</button>';
		}
		html += '				<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteBanner(this);">삭제</button></td>';
		html += '		</tr>';
		if(typeof param == 'object'){
			bannerImgRow++;
			$(param).closest("table").find("tbody").append(html);
		}else{
			bannerImgRow++;
			return html;
		}

	}

	var fnAddPicker = function (obj, imgpath){
		var lookbookbSq = $(obj).closest("table").find("input[name=lookbookbSq]").val();
		var imgNm = imgpath;
		cfnOpenLookbookBannerPickerPopup(lookbookbSq,imgNm);
	}

	var fnResetIdx = function (){
		$(".bannerTableC").each(function (i){
			$(this).attr('id','bannerTable'+i);
			$(this).find("input[name=dispOrd]").val(i+1);
		});
	}

	var fnSearchLbpBrandGroup = function (){
		cfnOpenBrandGroupListPopup("fnCallBackLbpBrandGroup", "S", "S");
	}

	var fnCallBackLbpBrandGroup = function (result){
		$("#lbBannerForm").find("input[name=brandCd]").val(result[0].brandGroupNo);
	}

	// 메인룩북설정
	$("#btnMain").on('click', function(){
		var lookbookSq ='';
		var brandCd = '';
		if(gagajf.isNull($("#lbBannerForm").find("input[name=lookbookSq]").val())){
			mcxDialog.alert('룩북 일련번호가 없습니다.');
			return false;
		}

		if(gagajf.isNull($("#lbBannerForm").find("input[name=brandCd]").val())){
			mcxDialog.alert('브랜드코드가 없습니다.');
			return false;
		}
		lookbookSq = $("#lbBannerForm").find("input[name=lookbookSq]").val();
		brandCd = $("#lbBannerForm").find("input[name=brandCd]").val();

		mcxDialog.confirm('메인룩북으로 설정하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {
					lookbookSq : lookbookSq
					,brandCd : brandCd
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/display/mainlookbook/save', jsonData, fnSaveCollback);
			}
		});
	});

	var fnSaveCollback = function (){

	}

	$(document).ready(function() {
		// 상세/수정일때
		if(mode != 'N'){
			fnCreateLookbookLayout();
			$("#btnMain").show();
		}else{
			$("#btnMain").hide();
		}
		//sortable Item List
		$("#bannerDiv").sortable({
			stop: function(event, ui) {
				fnResetIdx();
			}
		});

		$(".bannerTableC").each(function (idx){
			cfnGetTextLength($(this).find('textarea[name=imgDesc]'), 4000, $('#dpLocAnsContent'+idx));
		});
	});
/*]]>*/
</script>
</html>