<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsTitleReservePopupForm.html
 * @desc    : 상품등록 타이틀 예약등록 화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.02   eskim       최초 작성
 *******************************************************************************
 -->	
	<div class="modalPopup" data-width="850" >
		<div class="panelStyle">
			<div class="panelTitle">
				<h2>상품타이틀예약</h2>
				<button type="button" class="close" onclick="uifnPopupClose('popupGoodsTitleReserve')"><i class="fa fa-times"></i></button>
			</div>
			<form id="goodsRsvtTnmForm" name="goodsRsvtTnmForm" >
			<div class="panelContent">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>상품타이틀<em class="required" title="필수"></em></th>
						<td><input type="text" class="w100p" id="goodsTnm" name="goodsTnm"  maxlength="50" /></td>
					</tr>
					<tr>
						<th>예약일시<em class="required" title="필수"></em></th>
						<td>
							<input name="applyStYMD" id="applyStYMD" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="예약시작일" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="applyStHH" id="applyStHH" 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>
							<input name="applyStdt" id="applyStdt" type="hidden" />
							~
							<input name="applyEdYMD" id="applyEdYMD" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="예약 종료일" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="applyEdHH" id="applyEdHH" 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>
							<input name="applyEddt" id="applyEddt" type="hidden" />
						</td>
					</tr>
				</table>
			</div>
			<ul class="panelBar">
				<li class="left">
					<button type="button" class="btn btn-danger btn-lg" id="btnDeleteGoodsRsvtTnm">상품삭제</button>
				</li>
				<li class="right">
					<button type="button" class="btn btn-base btn-lg" id="btnSearchExcel">엑셀조회</button>
					<button type="button" class="btn btn-info btn-lg" id="btnSearchGoods">상품조회</button>
				</li>
			</ul>
			<div id="gridGoodsRsvtTnmList" style="width: 100%; height: 400px;" class="ag-theme-balham"></div>
			<ul class="panelBar">
				<li class="right">
					<button type="button" class="btnRight btn btn-base btn-lg" id="btnSaveGoodsRsvtTnm">적용</button>
				</li>
			</ul>
			</form>	
		</div>
	</div>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var rsvtGoodsTnmColumnDefs = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: 'No', width: 50, cellClass: 'text-center',valueGetter: function(params) { return params.node.rowIndex+1}},
		{headerName: "상품코드", field: "goodsCd", width: 140, cellClass: 'text-center'},
		{headerName: "상품명", field: "goodsNm", width: 330, cellClass: 'text-left'},
		{headerName: "현재상품타이틀", field: "goodsTnm", width: 250, cellClass: 'text-left'}
	];
	
	// Get GridOptions
	var rsvtGoodsTnmGridOptions = gagaAgGrid.getGridOptions(rsvtGoodsTnmColumnDefs);
	rsvtGoodsTnmGridOptions.enableBrowserTooltips = true;
	
	// 중복 선택 가능
	rsvtGoodsTnmGridOptions.rowSelection = 'multiple';
	rsvtGoodsTnmGridOptions.suppressRowClickSelection = true;
	//rsvtGoodsTnmGridOptions.rowHeight = 60; //이미지가 있을경우 높이 지정해야함.

	// 상품 조회 클릭 시
	$('#btnSearchGoods').on('click', function() {
		cfnOpenGoodsPopup('fnSearchGoods');
	});

	// 상품 조회 콜백함수
	var fnSearchGoods = function(result) {
		if (result.length < 1) return;
		var oldData = gagaAgGrid.getAllRowData(rsvtGoodsTnmGridOptions);
		$.each(result, function(idx, item) {
			var isInvalid = false;
			if (oldData != null && oldData.length != 0){
				oldData.forEach(function(oneData){
					if(oneData.goodsCd == item.goodsCd){
						isInvalid = true;
						return true;
					}
				});
				if(isInvalid){
					return isInvalid;
				}
			}
			gagaAgGrid.addRowData(rsvtGoodsTnmGridOptions, {"goodsCd" : item.goodsCd, "goodsNm" : item.goodsNm, "goodsTnm" : item.goodsTnm});
		});
		uifnPopupClose('popupGoods');
		return false;
	};

	// 저장 클릭 시
	$('#btnSaveGoodsRsvtTnm').on('click', function() {

		var allRowData = gagaAgGrid.getAllRowData(rsvtGoodsTnmGridOptions);

		if(allRowData.length == 0){
			mcxDialog.alertC("상품을 조회한 후 추가해주세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
				}
			});
			return;
		}

		if(gagajf.isNull($("#goodsRsvtTnmForm input[name=goodsTnm]").val())) {
			mcxDialog.alertC("상품 타이틀을 입력하세요.",{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsRsvtTnmForm input[name=goodsTnm]").focus();
				}
			});
			return false;
		}

		var fromDate = $('#goodsRsvtTnmForm input[name=applyStYMD]').val();
		var toDate = $('#goodsRsvtTnmForm input[name=applyEdYMD]').val();

		if (gagajf.isNull(fromDate)) {
			mcxDialog.alertC("예약  시작일자를 입력하세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyStYMD]').focus();
				}
			});
			return false;
		}

		if (gagajf.isNull(toDate)) {
			mcxDialog.alertC("예약  종료일자를 입력하세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyEdYMD]').focus();
				}
			});
			return false;
		}

		if (fromDate > toDate) {
			mcxDialog.alertC("예약 종료일시는 시작료일시 보다 작을 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyEdYMD]').focus();
				}
			});
			return false;
		}

		var applyStdt = $('#goodsRsvtTnmForm input[name=applyStYMD]').val().replaceAll("-","") +
		$('#goodsRsvtTnmForm select[name=applyStHH]').val() + "0000";

		var applyEddt = $('#goodsRsvtTnmForm input[name=applyEdYMD]').val().replaceAll("-","") +
		$('#goodsRsvtTnmForm select[name=applyEdHH]').val() +"5959";

		$('#goodsRsvtTnmForm input[name=applyStdt]').val(applyStdt);
		$('#goodsRsvtTnmForm input[name=applyEddt]').val(applyEddt);

		if ($('#goodsRsvtTnmForm input[name=applyStdt]').val() > $('#goodsRsvtTnmForm input[name=applyEddt]').val()) {
			mcxDialog.alertC("예약 시작일자는 종료일자 보다 클 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyEdYMD]').focus();
				}
			});
			return false;
		}

		var toDateStr = new Date().format("YYYYMMDDHHmmss");

		if (toDateStr >= applyStdt){
			mcxDialog.alertC("예약 시작일시는 현재일시 보다 작거나 같을 수 없습니다.",  {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyStYMD]').focus();
				}
			});
			return false;
		}

		if (toDateStr >= applyEddt){
			mcxDialog.alertC("예약 종료일시는 현재일시 보다 작거나 같을 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#goodsRsvtTnmForm input[name=applyEdYMD]').focus();
				}
			});
			return false;
		}

		mcxDialog.confirm('저장하시겠습니까?',  {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var arrGoodsCd = [];
				allRowData.forEach(function(item, index) {
					arrGoodsCd.push(item.goodsCd);
				});

				var data = {goodsTnm : $('#goodsRsvtTnmForm input[name=goodsTnm]').val()
							, applyStdt : $('#goodsRsvtTnmForm input[name=applyStdt]').val()
							, applyEddt : $('#goodsRsvtTnmForm input[name=applyEddt]').val()
							, arrGoodsCd : arrGoodsCd
				};

				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/goods/title/reserve/save', jsonData, fnGoodsRsvtTnmListFormClose);

			}
		});
	});

	// 조회상품 삭제
	$('#btnDeleteGoodsRsvtTnm').on('click', function() {
		var selectedData = rsvtGoodsTnmGridOptions.api.getSelectedRows();
		if (selectedData.length == 0) {
			mcxDialog.alert('선택된 행이 없습니다.');
			return;
		}

		//화면에서 삭제
		var removedData = gagaAgGrid.removeRowData(rsvtGoodsTnmGridOptions, false);
	});
	
	//엑셀 상품 조회
	$('#btnSearchExcel').on('click', function() {
		cfnExcelUploadPopup('goodsRsvtTnmExcelUpload', 'goodsRsvtTnmExcelUpload');
	});

	var goodsRsvtTnmExcelUpload = function(result){
		var data = {procJob : result.procJob
			,excelFileNm : result.excelFileNm
		};
		var jsonData = JSON.stringify(data);
		gagajf.ajaxJsonSubmit('/goods/search/excelupload/save', jsonData, fnRsvtGoodsTnmExcelUploadCallBack);
	}

	var fnRsvtGoodsTnmExcelUploadCallBack = function(result){
		gagajf.ajaxJsonSubmit('/goods/excel/upload/goods/list', '', fnExcelSearchCallBack);
	}

	var fnExcelSearchCallBack = function(result){
		if (result.goodsExcelList.length < 1) return;
		var oldData = gagaAgGrid.getAllRowData(rsvtGoodsTnmGridOptions);
		$.each(result.goodsExcelList, function(idx, item) {
			var isInvalid = false;
			if (oldData != null && oldData.length != 0){
				oldData.forEach(function(oneData){
					if(oneData.goodsCd == item.goodsCd){
						isInvalid = true;
						return true;
					}
				});
				if(isInvalid){
					return isInvalid;
				}
			}
			gagaAgGrid.addRowData(rsvtGoodsTnmGridOptions, {"goodsCd" : item.goodsCd, "goodsNm" : item.goodsNm, "goodsTnm" : item.goodsTnm});
		});
		return;
	}

	//창종료
	var fnGoodsRsvtTnmListFormClose = function(){
		uifnPopupClose('popupGoodsTitleReserve');
		fnGoodsTnmResDeleteCollBack();
	}

	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridGoodsRsvtTnmList', rsvtGoodsTnmGridOptions);
	});

/*]]>*/
</script>
</html>