<style type="text/css">
.fc-right{
	display: none;
}
</style>
<section class="" style="padding-bottom: 1rem;">
<div class="card bg-light-transparent mx-2">
	<div class="card-header bg-light">
		<h5 class="card-title">Staff Movement Calendar</h5>
		<a href="<?php echo base_url('hr/movement/create')?>" class="btn btn-outline-dark btn-sm mb-1" title="Add New Staff Movement" >
            <i class="fa fa-plus"></i>Add New Movement
        </a>
        <a href="<?php echo base_url('hr/movement/groups')?>" class="btn btn-outline-dark btn-sm mb-1" title="View Group Movement List" >
            <i class="fa fa-users"></i>Group Movements List
        </a>
        <a href="<?php echo base_url('hr/movement/movement_list')?>" class="btn btn-outline-dark btn-sm mb-1" title="View Staff Movement List" >
            <i class="fa fa-user"></i>Staff Movements List
        </a>   
	</div> 
	<div class=" card-body">
        <div class="card no-shadow" >
            <div class="card-body">
            	
    			<div class="pos-f-t">
				 	<div class="collapse" id="navbarToggleExternalContent">
						<div class="bg-light  p-4">
							<div class="">
								<h3>Filter</h3>

								<form action="<?php echo base_url('hr/movement/calendar');?>" method="post">
									<div class="row">
										<div class="col-12 col-sm-3">
											<div class="">
												<label for="dateFilter">Date</label>
												<input type="text" class="datepicker form-control" id="filterDate" name="date" autocomplete="off">
											</div>
										</div>
										<div class="col-12 col-sm-3" >
											<div class="">
											<label for="filterDepartment">Department</label>
												<select class='form-control select' id="filterDepartment" name="dept_id">
													<option value="-1">All</option>
												<?php foreach ($departments as $key => $dept): ?>
													<option value="<?php echo $dept['id']; ?>"><?php echo $dept['name']; ?> [<?php echo $dept['branch_name']; ?>]</option>				
												<?php endforeach ?>				
												</select>
											</div>
										</div>
										<div class="col-12 col-sm-3">
											<div class="">
												<label for="filterCategory">Type</label>
												<select class='form-control select' id="filterCategory" name="type_id">
													<option value="-1" selected="selected">All</option>
												<?php foreach ($movementTypes as $key => $type): ?>
													<option value="<?php echo $type->id;?>"><?php echo $type->movementType;?></option>
												<?php endforeach ?>
												</select>
											</div>
										</div>
										<div class="col-12 col-sm-3">
											<div class="">
												<label for="filterClient">Client</label>
												<select class='form-control select' id="filterClient" name="client_id">
													<option value="-1" selected="selected">All</option>
												<?php foreach ($customers as $key => $cust): ?>
													<option value="<?php echo $cust->customer_id;?>"><?php echo $cust->name;?></option>
												<?php endforeach ?>
												</select>
											</div>
										</div>
										<div class="col-1 pt-1">
											<br>
											<button type="submit" class="btn btn-primary" id="filterBtn-fc">Search</button>
										</div>
									</div><br>
								</form>


							</div>
					    </div>
				  	</div>
				  	<nav class="navbar navbar-dark bg-dark">
					    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
					      <span class="navbar-toggler-icon"></span>
					    </button>
				  	</nav><br>
					<div class="p-3">
						<h3>Colour Info</h3>
						<div class="container">
							<div class="row">
								<?php foreach ($movementTypes as $key => $type): ?>
									<div class="col mb-1">
										<div class="col text-center text-white">
											<div class="pt-1 px-1" style="background-color:<?php echo $type->color_code;?>;min-width:10px;min-height:10px;border-radius:25px;font-weight:600;opacity:0.75">
												<?php echo $type->movementType;?>
											</div>
										</div>
									</div>
								<?php endforeach ?>
							</div>
						</div>					
					</div><hr>
				  	<div id="fullCalendar"></div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<style type="text/css">
.tooltipevent
{
	width:auto;
	height:auto;
	background:rgba(0,0,0,0.75);
	position:absolute;
	color: #fff;
	z-index:10001;
	padding:10px 10px 10px 10px ;  
	line-height: 200%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	var token 	= '<?php echo $this->session->userdata('token');?>';
	var fc_res 	= '';
	var fc_event= '';
	var resource = <?php echo $resource;?>;

	var fullcalendar = $('#fullCalendar').fullCalendar({ 
		themeSystem: 'bootstrap3',
		 	displayEventTime: false,
		 	displayEventTitle: false,
		editable: false,
		aspectRatio: 1.8,
		scrollTime: '08:00',
		defaultView: 'timelineDay',
		resourceLabelText: 'Staff Name',
		resources: <?php echo $fc_res; ?>,
		events: <?php echo $fc_event; ?>,
		eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
			var js_res = JSON.parse(JSON.stringify(resource));
			var hover_item = js_res[data.id];
			console.log(hover_item);
			var title = JSON.stringify(data.title);
			var start = JSON.stringify(data.start._i);
			var end = JSON.stringify(data.end._i);

            tooltip = '<div class="tooltipevent"> Name : '+hover_item.staffName+'<br/> Date : '+hover_item.date+'<br/>Time out : '+hover_item.timeOut+'<br/>Time In : '+hover_item.timeIn+'<br/>Department : '+hover_item.departmentName+'<br/> Movement Type : '+hover_item.movementType+'</div>';

            $("body").append(tooltip);
            $(this).mouseover(function (e) {
                $(this).css('z-index', 10000);
                $('.tooltipevent').fadeIn('500');
                $('.tooltipevent').fadeTo('10', 1.9);
            }).mousemove(function (e) {
                $('.tooltipevent').css('top', e.pageY + 10);
                $('.tooltipevent').css('left', e.pageX + 20);
            });
        },

        eventMouseout: function(data, event) {
		    $(this).css('z-index', 8);
		    $('.tooltipevent').remove();
		},
	});

	fullcalendar.fullCalendar('gotoDate','<?php echo $date;?>');
});
</script>

