<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"></a>
					</div>
					<div class="collapse navbar-collapse" id="myNavbar">
	
						<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</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('Voting System - 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>