<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : BizdayForm.html
 * @desc    : 영업일관리 Page
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2019.12.13   jaewonHo   최초 작성
 *******************************************************************************
 -->
 <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"/>
	<div id="main-wrapper">
		<div id="main">
			<div class="main-title"></div>
			<div class="panelStyle2">
				<ul class="notice">
					<li><strong class="cBlue">영업일 : </strong>휴일을 Click 하시면 영업일로 변경 가능 합니다.</li>
					<li><strong class="cRed">휴무일 : </strong>영업일을 Click 하시면 휴무일로 변경 가능 합니다.</li>
				</ul>
				<div id="calendar" style="margin: 5px;"></div>
			</div>
		</div>
	</div>
</form>

<script class="cssdesk" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js" type="text/javascript"></script>
<script src="/ux/js/fullcalendar-4.2.0.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/

	$(document).ready(function() {
		fnstartCalendar();
		uifnFitGrid();
	})

	var fnstartCalendar = function() {
		var calendarEl = document.getElementById('calendar');
		calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'interaction', 'dayGrid' ],

			locale: 'ko', //한글화
			timeZone: 'local',

			selectable: true,
			editable: false,
			eventLimit: true,

			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() {
						fnUpdateDay('Holiday' , arg);
					}
				});
				calendar.unselect();
			},

			//영업일로 변경 -----
			eventClick: function(arg) {
				mcxDialog.confirm("영업일로 변경하시겠습니까?", {
					cancelBtnText: "취소",
					sureBtnText: "확인",
					sureBtnClick: function() {
						fnUpdateDay('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('/system/bizday/list' + '?' + $('#calendarForm').serialize()
				, function(data) {
					var events = [];
					for(var i = 0 ; i < data.length ; i++ ) {
						events.push( {
							title : data[i].restdayDesc,
							start : data[i].bizday } );
					}
					callback(events);
				});
			}
		});
		calendar.render();
	}

	//해당월 시작일, 마지막일설정
	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 fnUpdateDay = function(day ,arg) {
		var formId = '#calendarForm';
		var start="";
		var end = "";
		$('#calendarForm input[name=bizDay]').val("");
		if( day == 'Holiday' ) {
			bizday = (new Date(arg.start)).format('YYYYMMDD');
			$('#calendarForm input[name=bizday]').val(bizday);
			gagajf.ajaxFormSubmit('system/bizday/save', formId, fnSaveCallback);
				calendar.addEvent({
					title: '휴일',
					start: arg.start,
					end: arg.end,
					allDay: arg.allDay
				});
		}
		else {
			bizday = (new Date(arg.event.start)).format('YYYYMMDD');
			$('#calendarForm input[name=bizday]').val(bizday);
			gagajf.ajaxFormSubmit('system/bizday/save', formId, fnSaveCallback);
			arg.event.remove();
		}
	}

	// 저장 후 콜백
	fnSaveCallback = function() {
	}
	
/*]]>*/
</script>

</html>