<? 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,
		googleCalendarApiKey: '',
		loading: function(bool) {
			$('#loading').toggle(bool);
		}
	});
	var dayCount;
	var targetDate;
	var month_int;
	var year_int;
	
	getDayCount();
	getMonth();
	loadScheduleInfo();

	$(document).on("click", ".fc-prev-button", function(){
		getDayCount();
		getMonth();
		loadScheduleInfo();
	});
	
	$(document).on("click", ".fc-next-button", function(){
		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 : {
				"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", zIndex:0});
                        $("[data-date="+data[i].targetDate+"]").text(data[i].description);
                    }
				}
			}
		});
	}

	function getMonth(){
		  var date = new Date($("#calendar").fullCalendar('getDate'));
		  month_int = date.getMonth()+1;
		  year_int = date.getFullYear();
	}
	
	$(document).on("click", ".fc-day", function(e) {
        var description = $(this).text();
        var style = $(this).attr("style");

        if(style != undefined && style.includes("background: rgb(178, 204, 255);")){
            $("[name=isAvail][value=1]").prop("checked", true);
            $("[name='description']").show();
        }
        else{
            $("[name='isAvail'][value='-1']").prop("checked", true);
            $("[name='description']").hide();
        }

		targetDate = $(this).attr("data-date");

		$("[name=description]").val(description);

		var offset = $(this).offset();
		var relativeX = $(this).position().left;
	    var relativeY = $(this).position().top;

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

	$(document).on("click", ".fc-day-top", function(e){
        var description = $(this).text();
 		var style  = $(this).attr("style");

		if(style != undefined && style.includes("background: rgb(178, 204, 255);")){
            $("[name=isAvail][value=1]").prop("checked", true);
            $("[name=description]").val(description);
            $("[name='description']").show();
        }
        else{
            $("[name='isAvail'][value='-1']").prop("checked", true);
            $("[name='description']").hide();
        }
		
		targetDate = $(this).attr("data-date");

		var offset = $(this).offset();
		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();
		var description = $("[name=description]").val();
		$.ajax({
			url : "/action_front.php?cmd=AdminProductionSpec.saveScheduleInfo",
			async : false,
			data : {
				"targetDate" : targetDate,
				"isAvail" : isAvail,
				"dayCount" : dayCount,
				"month" : month_int,
				"year" : year_int,
                "description" : description
				},
			cache : false,
			dataType : "json",
			success : function(data){
				alert(data.returnMessage);
				location.reload();
			}
		});
	});

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

	$("[name='isAvail']").change(function(){
	    var flag = $("[name='isAvail']:checked").val();
	    if(flag == -1){
            $("[name='description']").hide();
        }
        else{
            $("[name='description']").show();
        }
    });
});

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

    /* 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>
  			<label for="flagTrue" style="color: #FFFFFF"><input type=radio name="isAvail" id="flagTrue" value="1" style="float:left;"/>일정 있음</label><br><br>
            <label for="flagFalse" style="color: #FFFFFF"><input type=radio name="isAvail" id="flagFalse" value="-1" style="float:left;"/>일정 없음</label><br><br>
            <textarea name="description" rows="4" style="width:97%; resize:none;">

            </textarea>
  			<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" ?>