<template>
	<div class="panel panel-default">
		<div class="panel-body">
			<button class="btn btn-success" @click="refreshVoter()">
				<i class="fa fa-refresh"></i> Kemaskini Pengundi
			</button>

			<button class="btn btn-primary" @click="downloadPDF()">
                <i class="fa fa-download"></i> Muat Turun PDF
            </button>


			<div class="table-responsive">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>Bil.</th>
							<th>Nama Anggota</th>
							<th>No. Kad Pengenalan</th>
							<th>No. Anggota</th>
							<th>Unit</th>
							<th>Kehadiran</th>
							<th>Tarikh/Masa</th>
						</tr>
					</thead>
					<tbody>
						<!-- Display Fizikal attendees -->
						<template v-for="(voter, i) in data.voters.data">
							<tr v-if="voter.kehadiran === 1">
								<td>{{ i + 1 }}</td> <!-- Display the serial number -->
								<td>{{ voter.name }}</td>
								<td>{{ voter.no_kp }}</td>
								<td>{{ voter.no_anggota }}</td>
								<td>{{ voter.unit }}</td>
								<td>{{ getKehadiranString(voter.kehadiran) }}</td>
								<td>{{ voter.updated_at }}</td>
							</tr>
						</template>

						<!-- Display Maya attendees -->
						<template v-for="(voter, i) in data.voters.data">
							<tr v-if="voter.kehadiran === 2">
								<td>{{ i + 1 }}</td> <!-- Display the serial number -->
								<td>{{ voter.name }}</td>
								<td>{{ voter.no_kp }}</td>
								<td>{{ voter.no_anggota }}</td>
								<td>{{ voter.unit }}</td>
								<td>{{ getKehadiranString(voter.kehadiran) }}</td>
								<td>{{ voter.updated_at }}</td>
							</tr>
						</template>

						<template v-for="(voter, i) in data.voters.data">
							<tr v-if="voter.kehadiran === 0">
								<td>{{ i + 1 }}</td> <!-- Display the serial number -->
								<td>{{ voter.name }}</td>
								<td>{{ voter.no_kp }}</td>
								<td>{{ voter.no_anggota }}</td>
								<td>{{ voter.unit }}</td>
								<td>{{ getKehadiranString(voter.kehadiran) }}</td>
								<td>{{ voter.updated_at }}</td>
							</tr>
						</template>
					</tbody>
				</table>
			</div>

			<!-- Display attendance percentage -->
			<div class="text-right">
				<h5><b>{{ attendancePercentage }}% Kehadiran Pengundi</b></h5>
			</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>
</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);
				})
		},

		getKehadiranString(kehadiran) {
			// Map integer values to corresponding string representations
			switch (kehadiran) {
				case 1:
					return 'Fizikal';
				case 2:
					return 'Maya';
				default:
					return '-';
			}
		},

		// downloadPDF() {
        //     const table = document.getElementById('voterTable');

        //     html2canvas(table).then(canvas => {
        //         const imgData = canvas.toDataURL('image/png');
        //         const pdf = new jsPDF();
        //         pdf.addImage(imgData, 'PNG', 0, 0);
        //         pdf.save('kehadiran-pengundi.pdf');
        //     });
        // },

	},

	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;
		},

		// Calculate total attendance percentage
		attendancePercentage() {
			// Count total members who attended physically (Fizikal)
			const fizikalCount = this.data.voters.data.reduce((total, voter) => {
				return voter.kehadiran === 1 ? total + 1 : total;
			}, 0);

			// Count total members who attended virtually (Maya)
			const mayaCount = this.data.voters.data.reduce((total, voter) => {
				return voter.kehadiran === 2 ? total + 1 : total;
			}, 0);

			// Calculate total attendance percentage
			const totalAttendance = fizikalCount + mayaCount;
			const totalMembers = this.data.voters.data.length;
			return totalMembers === 0 ? 0 : ((totalAttendance / totalMembers) * 100).toFixed(2);
		}
	}

}
</script>