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

export default{

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

	created: function () {
		if (this.util.isLogin())
			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')) {
				 		localStorage['Access Token'] = `Bearer ${response.data.token}`;
						this.util.setAuthorization();
				 		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>