<template>

	<div class="col-md-5 col-md-offset-3">
		<div class="panel panel-default">
			
			<div class="text-center">

				<div class="panel-heading">
					<img id="logo" alt="Logo">
					<h4>Selamat Datang ke Portal MyKoPKB !</h4>
				</div>
			</div>
			<div class="panel-body">
				<form @submit.prevent="login" id="login_form">

					<div class="form-group">
						<label for="no_kp">Sila Masukkan No. Kad Pengenalan</label>
						<input type="text" name="no_kp" placeholder="Masukkan No. Kad Pengenalan Tanpa Dash (-)" class="form-control" required />
					</div>

					<div class="form-group">
						<input type="submit" class="btn btn-primary form-control" value="Masuk" />
					</div>

				</form>
			</div>

		</div>
	</div>
</template>

<script>


// JavaScript to set the image source
document.addEventListener('DOMContentLoaded', function () {
	// Select the image element by its ID
var logoImage = document.getElementById('logo');
// Set the source of the image dynamically
logoImage.src = window.location.origin + '/images/MyKoPKB-logo.png?' + new Date().getTime(); // Replace this URL with your desired image URL

// Add error handling
logoImage.onerror = function() {
    // If the image fails to load, set a default image or handle the error in some other way
    logoImage.src = 'https://i.ibb.co/txhx2N0/My-Ko-PKB-logo-removebg-preview.png'; // Replace 'path/to/default-image.png' with the URL of your default image
};

	logoImage.style.width = '300px'; // Set width to 200 pixels
    logoImage.style.height = 'auto';
	logoImage.style.objectFit = 'cover';
	logoImage.style.margin = 'auto'; 
});


export default {

	data: function () {
		return {
			loading: false
		}
	},

	created: function () {
		if (this.util.isLogin())
			//return this.$router.push({name:'Admin Home'})
			this.util.setTitle('Log Masuk Pengundi====');
	},

	methods: {
		login: function () {
			axios.post(config.API + 'voter/login', $('#login_form').serialize())
				.then(response => {
					this.stopLoading();
					if (this.util.showResult(response, 'success')) {
						this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } })
					}
				})
				.catch(error => {
					vm.stopLoading();
					this.util.showResult(error, 'error');
				})
		},
		startLoading: function () {
			this.util.notify('Logging in', 'loading');
			this.loading = true;
		},

		stopLoading: function () {
			$.notifyClose();
			this.loading = false;
		}
	},


};

</script>

<style>
body {
	padding: 50px 5px;
	/* background-color:; */

}

.logo {
	max-width: 100%; 
    height: 100%;
    object-fit:cover; 
    margin: 0 auto; 

}

.form-control {

	border-radius: 0.80rem;
	cursor: pointer;

}

.btn-primary:hover {

	background-color: #A7D397;
	color: #f3f6f8;
	/* Change text color on hover */
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.element {
  /* background-image: url('data:image/jpeg;base64,[encoded data, 7584 characters]'); Replace 'your-image.jpg' with your image file */
  background-size: cover; /* Cover the entire element with the background image */
  background-position: center; /* Center the background image horizontally and vertically */
}
</style>
