<template>
<div>
 
<div class="panel panel-default">
	<div class="panel-body">

		<div class="form-group">
			<router-link class="btn btn-success" :to="{name:'Tambah Pengundi'}">
				<i class="fa fa-plus"></i> Tambah Pengundi
			</router-link>
			<button class="btn btn-default" @click="refreshVoter()">
				<i class="fa fa-refresh"></i> Kemaskini Pengundi
			</button>
		</div>
		<div class="table-responsive">
			<table class="table table-hover" id="position_table">
				<thead>
					<tr>
						<th>Bil.</th>
						<th>Nama Anggota</th>
						<th>No. Kad Pengenalan</th>
						<th>No. Anggota</th>
						<th>Unit</th>
						<th>Saham</th>
						<th>Yuran</th>
						<th>Tindakan</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(voter,i) in data.voters.data">
						<td>{{ i + 1 }}</td>
						<td>{{ voter.name }}</td>
						<td>{{ voter.no_kp }}</td>
						<td>{{ voter.no_anggota }}</td>
						<td>{{ voter.unit }}</td>
						<td>{{ voter.saham }}</td>
						<td>{{ voter.yuran }}</td>
						<td>
							<button class="btn btn-info" @click="edit(i)">
								<i class="fa fa-edit"></i> Set semula
							</button>
							<button 
								class="btn btn-danger" 
								@click="util.showModal('#delete-voter-modal');id=voter.id">
								<i class="fa fa-trash"></i> Padam
							</button>
						</td>
					</tr>
					<tr v-if="data.voters.data && data.voters.data.length < 1">
						<td colspan="3">No Voters</td>
					</tr>
				</tbody>
			</table>
		</div>

		<ul class="pagination" v-if="pages.length > 1">
			<router-link 
				tag="li"
				v-for="page in pages" 
				:key="page['pages']"
				:to="{query:{page:page['page']}}"
				:class="{'active':current_page==page['page']}"
				exact>
				<a href="#">{{ page['page'] }}</a>
			</router-link>
		</ul>		

	</div>
</div>

<modal id="delete-voter-modal">
	<modal-header>Delete Voter</modal-header>
	<modal-body>
		<h2>Are you sure to delete voter?</h2>
	</modal-body>
	<modal-footer>
		<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
		<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
	</modal-footer>
</modal>

</div>
</template>

<script>
export default{
	data: function () {
		return {
			id: 0
		}
	},

	created: function () {
		this.refreshVoter();
	},

	methods: {
		search: function () {

		},

		refreshVoter: function () {
			var vm = this;
			this.util.notify('Refreshing Voter', 'loading');
			axios.get(config.API+'voter?page='+this.current_page)
				.then(response=>{
					console.log(response)
					$.notifyClose();
					vm.data.voters = response.data;
				})
				.catch(error=>{
					$.notifyClose();
					vm.util.showResult(error);
				})
		},

		edit: function (i) {
			var vm = this;
			this.data.voter = this.data.voters.data[i];
			this.$router.push({name: 'Edit Voter', params:{id:vm.data.voter.id}})
		},

		deleteVoter: function () {
			var vm = this;
			this.util.notify('Deleting voter', 'loading');
			this.util.hideModal('#delete-voter-modal');
			axios.delete(config.API+'voter/'+this.id)
				 .then(response=>{
				 	$.notifyClose();
				 	if (vm.util.showResult(response, 'success')) vm.refreshVoter();
				 })
				 .catch(error=>{
				 	$.notifyClose();
				 	vm.util.showResult(error);
				 })
		}
	},

	watch: {
		'$route.query.page': function () {
			$.notifyClose();
			this.refreshVoter();
		}
	},

	computed: {
		pages: function () {
			var pages = [];
			if (this.data.voters.last_page)
			for (var i = 1; i <= this.data.voters.last_page;i++) {
				let x = {};
				x['page'] = i;
				pages.push(x);
			}
			return pages;
		},

		current_page: function () {
			return this.$route.query.page ? this.$route.query.page : 1; 
		}
	}
}
</script>