<template>
	<div class="col-md-5 col-md-offset-3">
		<div class="panel panel-default">
			<div class="text-center">
				<img id="logo-admin" alt="Logo-admin">
				<div class="panel-heading">
					<h4><b>ADMIN LOG MASUK</b> </h4>
				</div>

				<div class="panel-body">
					<form @submit.prevent="login" id="login_form">

						<div class="form-group">
							<label for="email">E-mail</label>
							<input type="email" name="email" class="form-control" required />
						</div>

						<div class="form-group">
							<label for="password">Kata laluan </label>
							<input type="password" name="password" class="form-control" id="password" required />
						</div>

						<label>
							<input type="checkbox" id="visibility" onclick=" $(this)[0].checked ? 
									$('#password').attr('type','text'):
									$('#password').attr('type','password')" /> Show Password
						</label>

						<div class="form-group">
							<input type="submit" class="btn btn-info form-control"
								:class="{ 'disabled': loading.isLoading }" :value="loading.value" />
						</div>

					</form>
				</div>

			</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-admin');
	// Set the source of the image dynamically
	logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
	console.log(logoImage.src);
});

export default {

	data: function () {
		return {
			loading: {
				value: 'Teruskan ',
				isLoading: false
			}
		}
	},

	created: function () {
		if (this.util.isLogin()) {
			var ar = localStorage.getItem('admin_role');
			if (ar === '3') {
				return this.$router.push({ name: 'Kehadiran Calon' });
			}
			return this.$router.push({ name: 'Admin Home' });
		}
		this.util.setTitle('Log Masuk Admin ');
	},

	methods: {
		login: function () {
			if (this.loading.isLoading) return;

			let vm = this;

			this.startLoading();

			axios.post(config.API + 'admin/login', $('#login_form').serialize())
				.then(response => {
					vm.stopLoading();
					if (this.util.showResult(response, 'success')) {
						this.util.persistLoginSession(response.data.token, response.data.token_expires_at, {
							adminSession: true,
							adminRole: response.data.user && response.data.user.role
						});
						if (Number(response.data.user && response.data.user.role) === 3) {
							vm.$router.push({ name: 'Kehadiran Calon' });
						} else {
							vm.$router.push({ name: 'Admin Home' });
						}
					}
				})
				.catch(error => {
					vm.stopLoading();
					this.util.showResult(error, 'error');
				})

		},

		startLoading: function () {
			this.util.notify('Logging in', 'loading');
			this.loading = {
				value: 'Loading...',
				isLoading: true
			}
		},

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

}
</script>

<style>
body {
	padding: 50px 5px;
}

.logo-admin {
	width: 30px;
	/* Adjust width as needed */
	height: 50px;
	object-fit: cover;

}

.form-control {

	border-radius: 0.50rem;


}

.btn-info:hover {
	background-color: #c2ccc8;
	/* Change background color on hover */
	color: #f3f6f8;
	/* Change text color on hover */
}
</style>