<?php include('include/auth.php');?>
<!doctype html>
<html class="fixed dark">
	<?php 
	$pagerole="calendar";
	include('include/head.php');
	
	$currentdate = date('Y-m-d');
	setlocale(LC_ALL, 'el_GR.UTF-8');
	echo "The Current Date is: $currentdate";
	?>
	<body>
		<style>
			.popover .popover-header {
    margin: 0 !important;
    color: black;
}.fc-event-default .fc-content{color:#6c6c6c;}
			</style>
		<section class="body">

			<!-- start: header -->
			<header class="header">
				<div class="logo-container">
					<a href="index.php" class="logo">
						<img src="img/logo-light.png" width="75" height="35" alt="Web Voyage" />
					</a>
					<div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
						<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
					</div>
				</div>
			
				<!-- start: search & user box -->
				<div class="header-right">
			<?php include('include/search.php');?>
					
			
					<span class="separator"></span>
			<?php include('include/notifications.php');?>
				
			
					<span class="separator"></span>
					<?php include('include/userbox.php');?>
				
				</div>
				<!-- end: search & user box -->
			</header>
			<!-- end: header -->

			<div class="inner-wrapper">
				<!-- start: sidebar -->
				<?php include('include/nav.php');?>
				<!-- end: sidebar -->

				<section role="main" class="content-body">
					<header class="page-header">
						<h2>Task Calendar</h2>
					
						<div class="right-wrapper text-right">
							<ol class="breadcrumbs">
								<li>
									<a href="index.php">
										<i class="fas fa-home"></i>
									</a>
								</li>
								<li><span>WV Admin</span></li>
								<li><span>Task Calendar</span></li>
							</ol>
					
							<a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fas fa-chevron-left"></i></a>
						</div>
					</header>

					<!-- start: page -->
					<section class="card">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-12">
									<div id="calendar"></div>
								</div>
								
							</div>
						</div>
					</section>
					<!-- end: page -->
				</section>
			</div>

			<?php include('include/aside.php');?>

		</section>

		<!-- Vendor -->
		<script src="vendor/jquery/jquery.js"></script>
		<script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
		<script src="vendor/popper/umd/popper.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.js"></script>
		<script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
		<script src="vendor/common/common.js"></script>
		<script src="vendor/nanoscroller/nanoscroller.js"></script>
		<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
		<script src="vendor/jquery-placeholder/jquery.placeholder.js"></script>
		
		<!-- Specific Page Vendor -->
		<script src="vendor/jquery-ui/jquery-ui.js"></script>
		<script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
		<script src="vendor/moment/moment.js"></script>
		<script src="vendor/fullcalendar/fullcalendar.js"></script>


		<!--(remove-empty-lines-end)-->
		
		<!-- Theme Base, Components and Settings -->
		<script src="js/theme.js"></script>
		
		<!-- Theme Custom -->
		<script src="js/custom.js"></script>
		
		<!-- Theme Initialization Files -->
		<script src="js/theme.init.js"></script>
<script>
	
(function($) {

'use strict';

var initCalendarDragNDrop = function() {
	$('#external-events div.external-event').each(function() {

		// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
		// it doesn't need to have a start or end
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};

		// store the Event Object in the DOM element so we can get to it later
		$(this).data('eventObject', eventObject);

		// make the event draggable using jQuery UI
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});

	});
};

var initCalendar = function() {
	var $calendar = $('#calendar');
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();

	$calendar.fullCalendar({
		header: {
			left: 'title',
			right: 'prev,today,next,basicDay,basicWeek,month'
		},

		timeFormat: 'h:mm',

		themeButtonIcons: {
			prev: 'fas fa-caret-left',
			next: 'fas fa-caret-right',
		},

		editable: false,
		droppable: false, // this allows things to be dropped onto the calendar !!!
		drop: function(date, allDay) { // this function is called when something is dropped
			var $externalEvent = $(this);
			// retrieve the dropped element's stored Event Object
			var originalEventObject = $externalEvent.data('eventObject');

			// we need to copy it, so that multiple events don't have a reference to the same object
			var copiedEventObject = $.extend({}, originalEventObject);

			// assign it the date that was reported
			copiedEventObject.start = date;
			copiedEventObject.allDay = allDay;
			copiedEventObject.className = $externalEvent.attr('data-event-class');

			// render the event on the calendar
			// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
			$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

			// is the "remove after drop" checkbox checked?
			if ($('#RemoveAfterDrop').is(':checked')) {
				// if so, remove the element from the "Draggable Events" list
				$(this).remove();
			}

		},
		events: [
            <?php $sqlcanvas = $db2-> query(
					"SELECT * FROM tasks WHERE tasks.task_to='$userid' "
					) or die(mysql_error());
				while ($rowcanvas = mysqli_fetch_array($sqlcanvas)){
					if($rowcanvas['task_allday']==0){$allday='false';} else{$allday='true';}
					$fromuser=$rowcanvas['task_from'];
					$sqlu = $db->query("SELECT * FROM users WHERE users.id='$fromuser' ") or die(mysql_error());
					$rowu = mysqli_fetch_array( $sqlu );
					$sst=$rowcanvas['task_start_date']."T".$rowcanvas['task_start_time'];
					$eet=$rowcanvas['task_end_date']."T".$rowcanvas['task_end_time'];
					$des=substr($rowcanvas['task_details'], 0, 30);
				
				
					if($rowcanvas['task_status']==1){$tclass="success";}
					elseif($rowcanvas['task_status']==0){
						if($currentdate >= $rowcanvas['task_start_date'])
						{$tclass="danger";}
						else{$tclass="warning";}
					}
					else{$tclass="primary";}
					?>
			{
      title  : '<?php echo $rowcanvas['task_name'];?>( from: <?php echo $rowu['username'];?>)',
      start  : '<?php echo $sst?>',
      end    : '<?php echo $eet?>',
      className: 'fc-event-<?php echo $tclass?>',
	  description: '<?php echo $des;?>',
	  url:'task.php?id=<?php echo $rowcanvas['task_id'];?>',
      allDay:<?php echo $allday?>
    },
   <?php }?>
		],
		eventClick: function(event) {
    if (event.url) {
      window.open(event.url, "_blank");
      return false;
    }
  },
		eventRender: function(eventObj, $el) {
    $el.popover({
      title: 'Information',
      content: eventObj.description,
      trigger: 'hover',
      placement: 'top',
      container: 'body'
    });
  }
	});

	// FIX INPUTS TO BOOTSTRAP VERSIONS
	var $calendarButtons = $calendar.find('.fc-header-right > span');
	$calendarButtons
		.filter('.fc-button-prev, .fc-button-today, .fc-button-next')
			.wrapAll('<div class="btn-group mt-sm mr-md mb-sm ml-sm"></div>')
			.parent()
			.after('<br class="hidden"/>');

	$calendarButtons
		.not('.fc-button-prev, .fc-button-today, .fc-button-next')
			.wrapAll('<div class="btn-group mb-sm mt-sm"></div>');

	$calendarButtons
		.attr({ 'class': 'btn btn-sm btn-default' });
};

$(function() {
	initCalendar();
	initCalendarDragNDrop();
});

}).apply(this, [jQuery]);
	</script>

	</body>
</html>
<?php include('include/footer.php');?>