<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CouponPubForCustPopupForm.html
 * @desc    : 고객 쿠폰 발행 팝업 화면
 *============================================================================
 * ISTYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.20   xyzp1539       최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="960" data-height="900">
	<div class="panelStyle" >
		<div class="panelTitle">
			<h2>쿠폰발행</h2>
			<button type="button" class="close" onclick="uifnPopupClose('CpnPubForCustPopup')"><i class="fa fa-times"></i></button>
		</div>
		<div class="panelContent">
			<form id="custSearchForm" name="custSearchForm" action="#" th:action="@{'/customer/active/list'}" >
				<input type="hidden" name="cpnPubPopYn" value="Y"/>
				<table class="frmStyle">
					<colgroup>
						<col width="10%">
						<col width="40%">
						<col width="10%">
						<col width="40%">
					</colgroup>
					<tbody>
						<tr>
							<th>사이트코드</th>
							<td>
								<select name="siteCd" id="siteCd">
									<option th:if="${siteCdList}" th:each="oneData , status : ${siteCdList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
								</select>
							</td>
							<th>회원ID</th>
							<td>
								<input type="text" class="w200" id="custId" name="custId">
							</td>
						</tr>
						<tr>
							<th>회원구분</th>
							<td>
								<select name="custGb" id="custGb">
									<option value="">전체</option>
									<option th:if="${usableCustGbList}" th:each="oneData , status : ${usableCustGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
								</select>
							</td>
							<th>회원등급</th>
							<td>
								<select name="custGrade" id="custGrade">
									<option value="">전체</option>
									<option th:if="${usableCustGradeList}" th:each="oneData , status : ${usableCustGradeList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>이메일</th>
							<td>
								<input type="text" class="w200"  id="email" name="email">
							</td>
							<th>회원명</th>
							<td>
								<input type="text" class="w200" id="custNm" name="custNm">
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			<div class="aR">
				<input type="button" value="조회" class="btn btn-info btn-lg" onclick="fnSearchPubCustList()">
			</div>
			<div id="pubCustgridList" style="width:100%; height:420px;" class="ag-theme-balham"></div>
			<form id="pubRegForm" name="pubRegForm" th:action="@{'/marketing/coupon/insertCustPub'}">
				<input type="hidden" name="custList" id="custList">
				<input type="hidden" name="cpnId" id="cpnId">
				<table class="frmStyle">
					<colgroup>
						<col width="10%">
						<col width="40%">
						<col width="10%">
						<col width="40%">
					</colgroup>
					<tbody>
					<tr>
						<th class="availDateTr">유효기간시작일시<em class="required" title="필수"></em></th>
						<td class="availDateTr">
							<input type="hidden" name="availStdt" id="availStdt" data-valid-name="유효기간시작일시" required="required">
							<input type="text" class="schDate w100" name="availStDay" id="availStDay" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="availStHH" id="availStHH">
								<option th:if="${hhList}" th:each="oneData , status : ${hhList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
							<select name="availStMM" id="availStMM">
								<option th:if="${mmList}" th:each="oneData , status : ${mmList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
						<th class="availDateTr">유효기간종료일시<em class="required" title="필수"></em></th>
						<td class="availDateTr">
							<input type="hidden" id="availEddt" name="availEddt" data-valid-name="유효기간종료일시" required="required">
							<input type="text" class="schDate w100" name="availEdDay" id="availEdDay" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="availEdHH" id="availEdHH">
								<option th:if="${hhList}" th:each="oneData , status : ${hhList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
							<select name="availEdMM" id="availEdMM">
								<option th:if="${mmList}" th:each="oneData , status : ${mmList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
						</td>
					</tr>
					<tr>
						<th>발급사유<em class="required" title="필수"></em></th>
						<td>
							<select name="pubReason" id="pubReason" required="required" data-valid-name="발급사유">
								<option th:if="${cpnPubReasonList}" th:each="oneData , status : ${cpnPubReasonList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
						</td>
						<th>만료알림발송여부<em class="required" title="필수"></em></th>
						<td>
							<select name="endAlimSendYn" id="endAlimSendYn" data-valid-name="만료알림발송여부" required="required">
								<option value="Y">Y</option>
								<option value="N" selected="selected">N</option>
							</select>
						</td>
					</tr>
					<tr>
						<th>상세사유</th>
						<td colspan="5">
							<textarea name="pubReasonDtl" id="pubReasonDtl" cols="50" rows="5" style="height: 100px;"></textarea>
						</td>
					</tr>
					</tbody>
				</table>
			</form>
			<div class="aR">
				<input type="button" value="발행" class="btn btn-info btn-lg" onclick="fnCpnPubCustomer()">
			</div>
		</div>
	</div>
</div>
<script th:inline="javascript">
	/*<![CDATA[*/
	var siteCdList = gagajf.convertToArray([[${siteCdList}]]);
	var usableCustGbList = gagajf.convertToArray([[${usableCustGbList}]]);
	var usableCustGradeList = gagajf.convertToArray([[${usableCustGradeList}]]);

	var columnDefs = [
		{ headerName: "사이트" , field:"siteCd" , width:100, cellClass:"text-center" ,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(siteCdList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteCdList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(siteCdList, params.newValue);}
		} ,
		{ headerName: "회원번호" , field:"custNo" , width:100, cellClass:"text-center"} ,
		{ headerName: "회원명" , field:"custNm" , width:120, cellClass:"text-center" } ,
		{ headerName: "이메일" , field:"email" , width:200, cellClass:"text-center"} ,
		{ headerName: "회원구분" , field:"custGb" , width:120, cellClass:"text-center" ,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(usableCustGbList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(usableCustGbList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(usableCustGbList, params.newValue);}
		} ,
		{ headerName: "회원등급" , field:"custGrade" , width:120, cellClass:"text-center" ,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(usableCustGradeList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(usableCustGradeList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(usableCustGradeList, params.newValue);}
		}
	];

	let pubCustGridOptions = gagaAgGrid.getGridOptions(columnDefs);

	// 고객 조회
	function fnSearchPubCustList(){
		//gagaAgGrid.fetch($("#custSearchForm").prop('action') , pubCustGridOptions , '#custSearchForm');
		gagaPaging.init('custSearchForm', fnSearchCallBack, 'custSearchForm', $('#custSearchForm select[name=pageSize]').val());
		gagaPaging.load($('#custSearchForm input[name=pageNo]').val());
	}

	var fnSearchCallBack = function (result) {
		//$('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
		//$('#custActiveForm input[name=pageNo]').val(result.pageing.pageable.pageNo.addComma());
		//$('#pgNo').html(result.pageing.pageable.pageNo.addComma());
		//$('#endPgNo').html(result.pageing.pageable.totalPage.addComma());

		pubCustGridOptions.api.setRowData(result.custList);
		//gagaPaging.createPagination(result.pageing.pageable);
	};

	function fnCpnPubCustomer(){
		setReqValue();
		checkValidation();

		var fromDate = $('#pubRegForm input[name=availStdt]').val();
		var toDate = $('#pubRegForm input[name=availEddt]').val();

		if (gagajf.isNull(fromDate) || gagajf.isNull(toDate)) {
			mcxDialog.alertC("유효기간 시작일자와 종료일자를 입력하세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#pubRegForm input[name=availStdt]').focus();
				}
			});
			return false;
		}

		if (fromDate > toDate) {
			mcxDialog.alertC("등록 시작일자는 종료일자 보다 클 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#pubRegForm input[name=availEddt]').focus();
				}
			});
			return false;
		}

		var selectVal = gagaAgGrid.getAllRowData(pubCustGridOptions);
		if(selectVal.length < 1) {
			mcxDialog.alert("발행하고자 하는 회원이 없습니다.");
			return false;
		}

		mcxDialog.confirm('발행하시겠습니까?' , {
			cancelBtnText: "취소",
			sureBtnText: "확인" ,
			sureBtnClick: function(){
				gagajf.ajaxFormSubmit($("#pubRegForm").prop('action') , "#pubRegForm" , function(){
					uifnPopupClose('CpnPubForCustPopup');
				});
			}
		});
	}
	
	function setReqValue(){
		// 유효기간 세팅
		$('#pubRegForm #availStdt').val($('#pubRegForm #availStDay').val() + " " + $('#pubRegForm #availStHH').val() + ":" + $('#pubRegForm #availStMM').val() + ":00");
		$('#pubRegForm #availEddt').val($('#pubRegForm #availEdDay').val() + " " + $('#pubRegForm #availEdHH').val() + ":" + $('#pubRegForm #availEdMM').val() + ":59");
		// 회원 그리드값 세팅
		var custAllData = gagaAgGrid.getAllRowData(pubCustGridOptions);
		var jsonCustPubData = JSON.stringify(custAllData);
		$("#pubRegForm #custList").val(jsonCustPubData);
		$("#pubRegForm #cpnId").val($("#CouponForm #cpnId").val());
	}

	$(document).ready(function(){
		gagaAgGrid.createGrid('pubCustgridList', pubCustGridOptions);

		$('#pubRegForm #availEdHH option:last').attr("selected", "selected");
		$('#pubRegForm #availEdMM option:last').attr("selected", "selected");

	});

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