<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed sidebar-left-collapsed">

<head>
	<!-- Basic -->
	<meta charset="UTF-8">
	<title>首頁 | MAA資訊系統</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">
	<meta name="author" content="JSOFT.net">
	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="./assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="./assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="./assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="./assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
	<link rel="stylesheet" href="./assets/vendor/pnotify/pnotify.custom.css" />
	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="./assets/vendor/jquery-ui/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
	<link rel="stylesheet" href="./assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
	<link rel="stylesheet" href="./assets/vendor/morris/morris.css" />
	<link rel="stylesheet" href="./assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.css" />
	<!-- Theme CSS -->
	<link rel="stylesheet" href="./assets/stylesheets/theme.css" />
	<!-- Skin CSS -->
	<link rel="stylesheet" href="./assets/stylesheets/skins/default.css" />
	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="./assets/stylesheets/theme-custom.css">

	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>

	<!-- DataTable -->
	<script src="./assets/vendor/jquery/jquery.js"></script>
	<script src="./assets/vendor/jquery-hoverIntent/jquery.hoverIntent.js"></script>

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">

	<!-- Icon -->
	<link rel="shortcut icon" href="./assets/images/favicon.ico" />

	<!-- vue3 -->
	<script src="https://unpkg.com/vue@next"></script>
	<script src="./script/js/vue-panel.js"></script>

	<style>
		.widget-summary-col-icon {
			padding-right: 10px;
		}

		.widget-summary-col-icon img {
			height: 75px;
			width: 75px;
		}

		.bg-primary .widget-summary .summary-icon {
			background-color: rgba(0, 0, 0, 0);
		}

		.panel-heading-profile-picture img {
			display: block;
			margin: 0 auto;
			width: 100px;
			height: 100px;
			border: 0px;
			-webkit-border-radius: 0px;
			border-radius: 0px;
		}

		p {
			margin: 0 0 0px;
		}
	</style>
</head>

<body>
	<section class="body">
		<!-- start: header -->
		<header class="header">
			<div class="logo-container">
				<div class="banner-txt">MAA資訊系統</div>
				<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
					<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
				</div>
			</div>
			<!-- start: search & user box -->
			<div class="header-right">
				<span class="separator"></span>
				<div id="userbox" class="userbox">
					<a href="#" data-toggle="dropdown">
						<figure class="profile-picture"> <img id="userImage" src="./assets/images/!logged-user.jpg" class="img-circle" data-lock-picture="./assets/images/!logged-user.jpg" /> </figure>
						<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@JSOFT.com"> <span class="name"><?php echo $_SESSION['name'] ?></span> <span class="role"><?php echo ($groupName); ?></span> </div> <i class="fa custom-caret"></i>
					</a>
					<div class="dropdown-menu">
						<ul class="list-unstyled">
							<li class="divider"></li>
							<li> <a role="menuitem" tabindex="-1" href="./script/php/Logout.php"><i class="fa fa-power-off"></i> Logout</a> </li>
						</ul>
					</div>
				</div>
			</div>
			<!-- end: search & user box -->
		</header>
		<!-- end: header -->
		<div class="inner-wrapper">
			<!-- start: sidebar -->
			<aside id="sidebar-left" class="sidebar-left">
				<div class="sidebar-header">
					<div class="sidebar-title"> 導覽 </div>
					<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
				</div>

			</aside>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<h2>綜合登入入口</h2>
				</header>
				<panel-object></panel-object>
			</section>

		</div>

	</section>

	<script>
		var name = "<?php echo $_SESSION['name'] ?>";
		var right = <?php echo ($right); ?>;
		var tempData = [];
		for (i = 0; i < panel_data.length; i++) {
			if (right >= panel_data[i].right) {
				tempData.push(panel_data[i])
			}
		}
		vm.mount('.body');
		
	</script>

	<!-- Vendor -->
	<script src="./assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
	<script src="./assets/vendor/bootstrap/js/bootstrap.js"></script>
	<script src="./assets/vendor/nanoscroller/nanoscroller.js"></script>
	<script src="./assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="./assets/vendor/magnific-popup/magnific-popup.js"></script>
	<script src="./assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

	<!-- Theme Base, Components and Settings -->
	<script src="assets/javascripts/theme.js"></script>

	<script>
		$(document).ready(function() {
			addUserImage(name.charAt(0));
		})
		function addUserImage(name) {
			var canvas = document.createElement("canvas");
			canvas.width = 40;
			canvas.height = 40;
			var ctx = canvas.getContext('2d');
			ctx.fillStyle = "black";
			ctx.font = "30px Arial";
			var text = name;
			ctx.fillText(text, 5, 30);
			var img = document.createElement("img");
			$("#userImage").attr("src", canvas.toDataURL());
		}
		$('.panel').hoverIntent({
			sensitivity: 50, //滑鼠滑動的敏感度,最少要設定為1    
			interval: 200, //滑鼠滑過後要延遲的秒數    
			over: function(e) {
				e.preventDefault();
				$(this).closest('.panel').find('.panel-body-info').slideDown(200);
			}, //滑鼠滑過要執行的函式   
			timeout: 200, //滑鼠滑出前要延遲的秒數    
			out: function(e) {
				e.preventDefault();
				$(this).closest('.panel').find('.panel-body-info').slideUp(200);
			} //滑鼠滑出要執行的函式
		});
	</script>
</body>

</html>