<?php
	require_once(SABLE_WORKING_PATH.'booking/booking_func.php');
?>
<script src="<?php SableGeneralFunctions::printModuleJS('booking'); ?>" type="text/javascript"></script>
<div class="sable-tab-bar">
	<div class="container">
		<div class="row">
			<div class="col-sm-12"><p></p></div>
			<div class="col-sm-1 pointer" onclick='window.location = "<?php printLink($today); ?>"'><i class='fa fa-calendar-day fa-3x' title="Today"></i></div>
			<div class="col-sm-1 pointer" onclick='window.location = "<?php printLink($prevDate); ?>"'><i class='fa fa-arrow-left fa-3x' title="<?php printDisplayDate($prevDate); ?>"></i></div>
			<div class="col-sm-8 text-center"><h1 class="title"><?php printDisplayDate($calendarDate); ?></h1></div>
			<div class="col-sm-1 pointer" onclick='window.location = "<?php printLink($nextDate); ?>"'><i class='fa fa-arrow-right fa-3x' title="<?php printDisplayDate($nextDate); ?>"></i></div>
			<div class="col-sm-1"></div>			
		</div>
    </div>
    <?php
	$tabs[] = ['title' => 'View Calendar',	'icon' => 'fa-calendar',		'label' => 'Calendar'];
	$tabs[] = ['title' => 'Planner',		'icon' => 'fa-calendar-week',	'label' => 'Planner'];
	$tabs[] = ['title' => 'Schedule',		'icon' => 'fa-calendar-alt',	'label' => 'Schedule'];
	$tabs[] = ['title' => 'New Booking',	'icon' => 'fa-plus',			'label' => 'Add'];
    $tabs[] = ['title' => 'List Bookings',	'icon' => 'fa-tasks',			'label' => 'List'];
	?>
	<div class="container">
		<div class="row">
			<div class="col-sm-12"><p style="height:20px;"></p></div>
			<?php addTabs($tabs); ?>
		</div>
    </div>			
</div>

<div class="sable-tab-item"><?php require_once('calendar.php'); ?></div>
<div class="sable-tab-item"><?php require_once('planner.php'); ?></div>
<div class="sable-tab-item"><?php require_once('schedule.php'); ?></div>
<div class="sable-tab-item"><?php require_once('add.php'); ?></div>
<div class="sable-tab-item"><?php require_once('list.php'); ?></div>

<script>	
	displaySableTabItems();
	openSableTab('<?php echo($tabId); ?>');
	var dragitm, dropitm;
	$(
		function()
	 	{
			$("div.dragblock").draggable
			(
				{
					drag:	function(event, ui)
							{
								dragitm = $(this).attr("id");
							}
				}
			);
			$("td.plandrop").droppable
			(
				{
					drop: 	function(event, ui)
							{
								dropitm = $(this).attr("id");
								var di = $("#"+dragitm);
								$("#"+dropitm).append(di);
								//reset the position:
								di.css({top: '7px', left: '7px'}); //-->see custom.css: div.dragblock
							}
				}
			);
		}
	);
</script>
