<!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="950">
	<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"/>
				<input type="hidden" name="searchDateGb" value="joinDt"/>
				<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 rowspan="3">키워드</th>
							<td rowspan="3"><select name="search" id="search">
								<option value="custId">회원ID</option>
								<option value="custNm">회원명</option>
								<option value="email">이메일</option>
							</select> <textarea class="textareaR3 w70p" name="condition" id="condition"></textarea>
							</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>
						</tr>
						<tr>
							<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>
					</tbody>
				</table>

			<div class="aR">
				<input type="button" value="조회" class="btn btn-info btn-lg" onclick="fnSearchPubCustList()">
			</div>


<!--			<div class="panelStyle">-->
				<!-- 상단버튼 영역  -->
				<ul class="panelBar">
					<li class="right">
						검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
						쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
						<select id="pageSize" name="pageSize">
							<option value="50" selected="selected">50개씩 보기</option>
							<option value="100">100개씩 보기</option>
							<option value="500">500개씩 보기</option>
							<option value="1000">1000개씩 보기</option>
						</select>
						<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
					</li>
				</ul>

				<!-- 검색결과 영역 -->
				<div id="pubCustgridList" style="width:100%; height:420px;" class="ag-theme-balham"></div>

				<ul class="panelBar">
					<li class="center">
						<div class="tablePaging" id="couponPubListPagination"></div>
					</li>
				</ul>
<!--			</div>-->
			</form>
			<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="pubAvailStDay" id="pubAvailStDay" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="pubAvailStHH" id="pubAvailStHH">
								<option th:if="${hhList}" th:each="oneData , status : ${hhList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
							<select name="pubAvailStMM" id="pubAvailStMM">
								<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="pubAvailEdDay" id="pubAvailEdDay" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
							<select name="pubAvailEdHH" id="pubAvailEdHH">
								<option th:if="${hhList}" th:each="oneData , status : ${hhList}" th:text="${oneData.cdNm}" th:value="${oneData.cd}"></option>
							</select>
							<select name="pubAvailEdMM" id="pubAvailEdMM">
								<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 = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{ 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:'maskingCustNm', width:100, cellClass: 'text-center'},
		{ headerName: "이메일" , field:"maskingEmail" , 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);
	// 중복 선택 가능
	pubCustGridOptions.rowSelection = 'multiple';
	pubCustGridOptions.suppressRowClickSelection = true;

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

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

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

	function fnCpnPubCustomer(){
		var selectVal = gagaAgGrid.selectedRowData(pubCustGridOptions);
		if(selectVal.length < 1) {
			mcxDialog.alert("선택된 회원이 없습니다.");
			return false;
		}

		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;
		}

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

	//페이지 사이즈 클릭시 재조회
	$('#custSearchForm #pageSize').on('click', function () {
		fnSearchPubCustList();
	});

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

		$('#pubRegForm #pubAvailEdHH option:last').attr("selected", "selected");
		$('#pubRegForm #pubAvailEdMM option:last').attr("selected", "selected");

	});

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