<? include $_SERVER["DOCUMENT_ROOT"] . "/common/classes/AdminProductionSpec.php" ?>
<? include $_SERVER["DOCUMENT_ROOT"] . "/admin/inc/php/header.php" ?> 
<? include $_SERVER["DOCUMENT_ROOT"] . "/admin/inc/php/leftProductionSpecManage.php" ?>




<link href='./fullCalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='./fullCalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='./fullCalendar/lib/moment.min.js'></script>
<script src='.//fullCalendar/lib/jquery.min.js'></script>
<script src='./fullCalendar/fullcalendar.min.js'></script>
<script src='./fullCalendar/gcal.min.js'></script>

<script>

$(document).ready(function() {

	
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: ''
		},
		height : 650,
		width : 800,
		//displayEventTime: false, // don't show the time column in list view

		// THIS KEY WON'T WORK IN PRODUCTION!!!
		// To make your own Google API key, follow the directions here:
		// http://fullcalendar.io/docs/google_calendar/
		googleCalendarApiKey: '',
	
		// US Holidays
		//events: 'en.usa#holiday@group.v.calendar.google.com',
		
// 		eventClick: function(event) {
// 			// opens events in a popup window
// 			window.open(event.url, 'gcalevent', 'width=700,height=600');
// 			return false;
// 		},
		
		loading: function(bool) {
			$('#loading').toggle(bool);
		}
		
	});
	var dayCount;
	var targetDate;
	var month_int;
	var year_int;
	
	getDayCount();
	getMonth();

// 	alert(month_int);
// 	alert(year_int);
	loadScheduleInfo();
	
	

	$(document).on("click", ".fc-prev-button", function(){
		getDayCount();
		getMonth();
		loadScheduleInfo();
	});
	
	$(document).on("click", ".fc-next-button", function(){
		getDayCount();
		getMonth();
		loadScheduleInfo();
	});

// 	$(document).on("click", ".fc-today-button", function(){			//동작 안함
// 		alert();
// 		getDayCount();
// 		getMonth();
// 		loadScheduleInfo();
// 	});

	$(".fc-today-button").click(function(){
		getDayCount();
		getMonth();
		loadScheduleInfo();
	});

	function getDayCount(){
		dayCount = $(".fc-day").length - $(".fc-other-month").length/2;
	}
	
	function loadScheduleInfo(){
		$.ajax({
			url : "/action_front.php?cmd=AdminProductionSpec.getListOfSchedule",
			data : {
// 				"month" : month_int,
				"year" : year_int
			},
			cache : false,
			dataType : "json",
			success : function(data){
				for(var i=0; i<data.size(); i ++){
					if(data[i].isAvail == "1")
						$("[data-date="+data[i].targetDate+"]").css({background: "#B2CCFF"});
					else if(data[i].isAvail == "-1")
						$("[data-date="+data[i].targetDate+"]").css({background: "#FF7171"});
				}
			}
		});
	}

	function getMonth(){
		  var date = new Date($("#calendar").fullCalendar('getDate'));
		  month_int = date.getMonth()+1;
		  year_int = date.getFullYear();
		  //you now have the visible month as an integer from 0-11
	}
	
	$(document).on("click", ".fc-day", function(e){
// 		alert($(this).attr("style"));

		if($(this).attr("style") == "background: rgb(178, 204, 255);")
			$("[name=isAvail][value=1]").prop("checked", true);
		else if ($(this).attr("style") == "background: rgb(255, 113, 113);")
			$("[name=isAvail][value=-1]").prop("checked", true);
		else 
			$("[name=isAvail][value=0]").prop("checked", true);
		
		targetDate = $(this).attr("data-date");


		var offset = $(this).offset();
	    //var relativeX = (e.pageX - offset.left);
	    //var relativeY = (e.pageY - offset.top);
		var relativeX = $(this).position().left;
	    var relativeY = $(this).position().top;

	      
		$("#date").val(targetDate);
		myFunction(relativeX, relativeY);
		
		
	});

	$(document).on("click", ".fc-day-top", function(e){
// 		alert($(this).attr("style"));

		if($(this).attr("style") == "background: rgb(178, 204, 255);")
			$("[name=isAvail][value=1]").prop("checked", true);
		else if ($(this).attr("style") == "background: rgb(255, 113, 113);")
			$("[name=isAvail][value=-1]").prop("checked", true);
		else 
			$("[name=isAvail][value=1]").prop("checked", true);
		
		targetDate = $(this).attr("data-date");


		var offset = $(this).offset();
	    //var relativeX = (e.pageX - offset.left);
	    //var relativeY = (e.pageY - offset.top);
		var relativeX = $(this).position().left;
	    var relativeY = $(this).position().top;

	      
		$("#date").val(targetDate);
		myFunction(relativeX, relativeY);
		
		
	});
	

	$(document).on("click", ".jSave", function(){
		var isAvail = $("[name=isAvail]:checked").val();
		$.ajax({
			url : "/action_front.php?cmd=AdminProductionSpec.saveScheduleInfo",
			async : false,
			data : {
				"targetDate" : targetDate,
				"isAvail" : isAvail,
				"dayCount" : dayCount,
				"month" : month_int,
				"year" : year_int
				},
			cache : false,
			dataType : "json",
			success : function(data){
				alert(data.returnMessage);
				location.reload();
			}
		});
	});

	$(".jClose").click(function(){
		myFunction();
	});
	
});

function myFunction(pageY, pageX) {
    var popup = document.getElementById("myPopup");
    $("#pop").css({'top':'300px','left':'440px'});
    popup.classList.toggle("show");
}


</script>

<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {

		margin: 0 auto;
	}


.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 250px;
    
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

.popup .popuptex button{margin-left : 20px;}

/* Popup arrow */
/* .popup .popuptext::after { */
/*     content: ""; */
/*     position: absolute; */
/*     top: 100%; */
/*     left: 50%; */
/*     margin-left: -5px; */
/*     border-width: 5px; */
/*     border-style: solid; */
/*     border-color: #555 transparent transparent transparent; */
/* } */

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>

<body>

<div id="Contents"  class="notice">
 <h1>제작 가능 날짜 관리</h1>

<div class="popup" id="pop">
  		<span class="popuptext" id="myPopup" style="float:left;">
  			<input type="date" name="targetDate" id="date" value="" style="background-color: #555; border-style: none; text-align: left; float: right; color : #FFFFFF; padding: 10px; font-size:17px"  readonly/>
  			<br><br><br>
  			<input type=radio name="isAvail" value="1" style="float:left;"/>제작 가능<br><br>
  			<input type=radio name="isAvail" value="-1" style="float:left;"/>제작 불가능<br><br>
<!--  			<input type=radio name="isAvail" value="0" checked style="float:left;"/>없음<br>-->
  			<span style="text-align:center; width:100%; display:inline-block; margin-top: 20px;">
	  			<button class="jSave" style="width: 35%; background-color: #8C8C8C; border : none; color:#FFFFFF; border-radius: 5px;">저장</button>
	  			<button class="jClose" style="width: 35%; background-color: #8C8C8C; border : none; color:#FFFFFF; border-radius: 5px;">닫기</button>
  			</span>
  		</span>
</div>

	<div id='calendar'></div>
	
	
	
</div>
</body>



<? include $_SERVER["DOCUMENT_ROOT"] . "/admin/inc/php/footer.php" ?>