<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" 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" 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" 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="row d-md-block">
    				<div class="container-fluid h-100">
    					<div class="row h-100">
        					<div class="col-3 collapse bg-light pt-2 pr-0 h-100 sidebar-mini" id="sidebar">			
								<div class="card bg-primary text-white ">
									<div class="card-body pt-1 pb-0">
										<h3 class="box-title">
											Filter
										</h3>
									</div>
								</div> 
								<form action="<?php echo base_url('hr/movement/calendar');?>" method="post">
								<div class="card">
									<div class="card-body">
										<label for="dateFilter">Date</label>
										<input type="text" class="datepicker form-control" id="filterDate" name="date">
									</div>
								</div>
								<!-- <div class="card ">
									<div class="card-body">
										<label for="filterYear">Year</label>
										<select name="filterYear" class='form-control' id="filterYear">
										<?php
											for ($i=0; $i < 10 ; $i++) { 
												echo '<option value="'.date('Y',strtotime('-'.$i.' year')).'">'.date('Y',strtotime('-'.$i.' year')).'</option>';
											}
										?>

										</select>
									</div>
								</div> -->
								<div class="">

								</div>
								<div class="card" >
									<div class="card-body">
									<label for="filterDepartment">Department</label>
										<select name="filterDepartment" 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']; ?></option>				
										<?php endforeach ?>				
										</select>
									</div>
								</div>
								<div class="card">
									<div class="card-body">
										<label for="filterCategory">Type</label>
										<select name="filterCategory" 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="card">
									<div class="card-body">
										<label for="filterClient">Client</label>
										<select name="filterAllocated" 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="card">
									<button type="submit" class="btn btn-primary" id="filterBtn-fc">Search</button>
								</div>
								</form>

								<div class="card">
									<div class="card-body">
										<label for="colorInfo">Colour Info</label>
											
											<?php foreach ($movementTypes as $key => $type): ?>
												<div class="row mb-1">
													<div class="col">
														<div style="background-color:<?php echo $type->color_code;?>;width:50px;height:50px;border-radius:50px;"></div>
													</div>
													<div class="col">
														<?php echo $type->movementType;?>
													</div>
												</div>
											<?php endforeach ?>
									</div>
								</div>
							</div>
        					<div class="col pt-0 ">
            					<h2>
                					<a  href="" data-target="#sidebar" data-toggle="collapse" ><i class="fa fa-bars" style="color: orange"></i></a>    
            					</h2>
								<div id="fullCalendar"></div>
        					</div>
    					</div>
					</div>     
    			</div>
			</div>
		</div>
	</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function(){
	var token 	= '<?php echo $this->session->userdata('token');?>';
	var fc_res 	= '';
	var fc_event= '';

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

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

