<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : BizdayForm.html
 * @desc    : 영업일관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.16   gagamel     최초 작성
 *******************************************************************************
 -->
	<link rel="stylesheet" href="/ux/plugins/fullcalendar/fullcalendar-4.2.0.css"/>
	
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->
		
		<div class="panelStyle">
			<ul class="notice">
				<li><strong class="cBlue">영업일 : </strong>휴일을 클릭하시면 영업일로 변경됩니다.</li>
				<li><strong class="cRed">휴무일 : </strong>영업일을 클릭하시면 휴무일로 변경됩니다.</li>
			</ul>
			
			<!-- FULLCALENDAR -->
			<div id="calendar"></div>
			<!-- //FULLCALENDAR -->
		</div>
	</div>
	
	<form id="calendarForm" name="calendarForm">
		<input type="hidden" name="startDt" id="startDt"/>
		<input type="hidden" name="endDt" id="endDt"/>
		<input type="hidden" name="bizday" id="bizday"/>
	</form>

<script type="text/javascript" src="/ux/plugins/fullcalendar/fullcalendar-4.2.0.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	// 해당월의 시작일, 마지막일 설정
	var setViewDate = function(date) {
		var dt = [];
		dt[0] = (new Date(date.startStr)).format('YYYYMMDD');
		dt[1] = (new Date(date.endStr)).format('YYYYMMDD');
		return dt;
	}
	
	// 휴일,영업일 업데이트(저장)
	var fnUpdateBizday = function(day ,arg) {
		var start = "";
		var end = "";
		$('#calendarForm input[name=bizday]').val("");
		
		if (day == 'Holiday') {
			var bizday = (new Date(arg.start)).format('YYYYMMDD');
			$('#calendarForm input[name=bizday]').val(bizday);
			
			gagajf.ajaxFormSubmit('/business/bizday/save', '#calendarForm', function() {
				calendar.addEvent({
					title: '휴일',
					start: arg.start,
					end: arg.end,
					allDay: arg.allDay
				});
			});
		} else {
			var bizday = (new Date(arg.event.start)).format('YYYYMMDD');
			$('#calendarForm input[name=bizday]').val(bizday);
			
			gagajf.ajaxFormSubmit('/business/bizday/save', '#calendarForm', function() {
				arg.event.remove();
			});
		}
	}
	
	// 캘린더 생성
	var calendar;
	var fnCreateCalendar = function() {
		var calendarEl = document.getElementById('calendar');
		
		calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'interaction', 'dayGrid' ],
			locale: 'ko', // 한글화
// 			weekNumberCalculation: 'ISO', //월~일 순서로
			selectable: true,
			editable: true,
			eventLimit: true, // allow "more" link when too many events

			select: function(arg) {
				if ((new Date(arg.end)).format('YYYYMMDD') - (new Date(arg.start)).format('YYYYMMDD') > 1) return;
				var title ='휴일';
				
				mcxDialog.confirm("휴일로 변경하시겠습니까?", {
					cancelBtnText: "취소",
					sureBtnText: "확인",
					sureBtnClick: function() {
						fnUpdateBizday('Holiday', arg);
					}
				});
				calendar.unselect();
			},

			// 영업일로 변경 -----
			eventClick: function(arg) {
				mcxDialog.confirm("영업일로 변경하시겠습니까?", {
					cancelBtnText: "취소",
					sureBtnText: "확인",
					sureBtnClick: function() {
						fnUpdateBizday('Bizday', arg);
					}
				});
			},

			events: function(info, callback) {
				var dt = setViewDate(info);
				$('#calendarForm input[name=startDt]').val(dt[0]);
				$('#calendarForm input[name=endDt]').val(dt[1]);
				$.get('/business/holiday/list' + '?' + $('#calendarForm').serialize()
					, function(data) {
						var events = [];
						for (var i = 0 ; i < data.length ; i++) {
							events.push({
								title : (gagajf.isNull(data[i].restdayDesc) ? '' : data[i].restdayDesc),
								start : data[i].bizday
							});
						}
						callback(events);
					});
			}
		});
		
		calendar.render();
	}

	$(document).ready(function() {
		fnCreateCalendar();
	});
/*]]>*/
</script>

</html>