<template>
<div>	
	
	<div v-if="!loading">
		<nav class="navbar navbar-default navbar-fixed-top" id="nav">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>	
					<a class="navbar-brand" :href="data.baseURL" ><img src='https://i.postimg.cc/ZBDD0ZfQ/Whats-App-Image-2024-03-21-at-1-24-46-PM-2.jpg' border='0' alt="MyKoPKB Logo" width="150" height="auto"></a>
				</div>
				
					<ul class="nav navbar-nav">
						<!-- {{ users }} -->
						<router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Laman Utama</a></router-link>
						<router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li">
							<a href="#">JAWATAN</a>
						</router-link>
						
						<!-- <router-link :to="{name: 'Manage Partylist'}"  v-if="data.user.role==1" tag="li">
							<a href="#">Manage Partylist</a>
						</router-link> -->

						<router-link :to="{name: 'Manage Voter'}"  v-if="data.user.role==1" tag="li">
							<a href="#">ANGGOTA KOPERASI</a>
						</router-link>

						<router-link :to="{name: 'Maklumat Calon'}"  v-if="data.user.role==1" tag="li">
							<a href="#">CALON ALK</a>
						</router-link>

						<router-link :to="{name: 'Kehadiran Calon'}"  v-if="data.user.role==1" tag="li">
							<a href="#">KEHADIRAN</a>
						</router-link>

					</ul>
					<ul class="nav navbar-right navbar-nav">
						<li class="dropdown">
							<a 
								href="#" 
								class="dropdown-toggle" 
								data-toggle="dropdown" 
								role="button" aria-haspopup="true" 
								aria-expanded="false">
								<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
							</a>
							<ul class="dropdown-menu">

								<router-link :to="{name:'Update Account'}" tag="li" exact>
									<a href="#">Kemaskini Akaun</a>
								</router-link>

								<router-link :to="{name: 'Manage Account'}" tag="li" v-if="data.user.id==1">
									<a href="#">Pengurusan Akaun</a>
								</router-link>

								<li @click="logout()"><a>Log Keluar</a></li>
							</ul>
						</li>
					</ul>
				</div> 
			</div>
		</nav>

		<router-view></router-view>
	</div>
	<div v-if="loading" class="container">
		<div class="jumbotron">
			<h1>Loading <i class="fa fa-refresh fa-spin"></i></h1>
		</div>
	</div>
</div>
</template>

<script>
export default{

	// data: () =>({
	// 	loading: true,
	// 	users:{'roles' : 1},
	// }),

	created: function () {
		this.util.setTitle('MyKoPKB - Administrator');
		var vm = this;
		if (this.util.isLogin()) {
			this.util.setAuthorization();
			axios.get(config.API+'admin/information')
				 .then(response=>{
				 	console.log(response);
				 	vm.data.user = response.data.user;
				 	vm.data.election = response.data.election;
				 	vm.data.partylists = response.data.partylist;
				 	vm.data.positions = response.data.position;
				 	vm.loading = false;
				 })
				 .catch(error=>{
				 	$.notifyClose();
				 	if (this.util.showResult(error) == 401) { 
				 		vm.logout();
				 	}
				 })
		} else {
			this.$router.push({name:'Admin Login'});
		}
	},

	methods: {
		logout: function () {
			localStorage.clear();
			this.$router.push({name: 'Admin Login'});
		}
	}
}
</script>

<style>
body{
	padding: 70px 5px;
}	
</style>