
<!DOCTYPE html>
<!--
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: https://1.envato.market/EA4JP
Renew Support: https://1.envato.market/EA4JP
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
	<!--begin::Head-->
	<head><base href="">
		<meta charset="utf-8" />
		<title>Sistem eVetPg Pulau Pinang</title>
		<meta name="description" content="Login page example" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<link rel="canonical" href="https://keenthemes.com/metronic" />
		<!--begin::Fonts-->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
		<!--end::Fonts-->
		<!--begin::Page Custom Styles(used by this page)-->
		<link href="assets/css/pages/login/classic/login-4.css" rel="stylesheet" type="text/css" />
		<!--end::Page Custom Styles-->
		<!--begin::Global Theme Styles(used by all pages)-->
		<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
		<link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
		<!--end::Global Theme Styles-->
		<!--begin::Layout Themes(used by all pages)-->
		<!--end::Layout Themes-->
		<link rel="shortcut icon" href="" />
	</head>
	<!--end::Head-->
	<!--begin::Body-->
	<body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed aside-enabled aside-fixed page-loading">
		<!--begin::Main-->
		<div class="d-flex flex-column flex-root">
			<!--begin::Login-->
			<div class="login login-4 login-signin-on d-flex flex-row-fluid" id="kt_login">
				<div class="d-flex flex-center flex-row-fluid bgi-size-cover bgi-position-top bgi-no-repeat" style="background-image: url('assets/media/bg/bg-3.jpg');">
					<div class="login-form text-center p-7 position-relative overflow-hidden">
						<!--begin::Login Header-->
						<div class="d-flex flex-center mb-15">
							<a href="#">
								<img src="images/logo.png" class="max-h-75px" alt="" />
							</a>
						</div>
						<!--end::Login Header-->
						<!--begin::Login Sign in form-->
						<div class="login-signin">
							<div class="mb-20">
								<h3>Login Pengguna (Penternak)</h3>
								<div class="text-muted font-weight-bold">Sila masukkan No Kad Pengenalan dan Kata laluan anda untuk daftar masuk<br><br></div>
							</div>
							<form class="form" id="kt_login_signin_form">
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="No Kad Pengenalan" maxlength="12" id="username" name="username" maxlength="12" autocomplete="off" />
								</div>
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="Kata laluan" id="password" name="password" />
									<div align="left"><i class="far fa-eye" id="togglePassword"></i></div>
								</div>
								<div class="form-group d-flex flex-wrap justify-content-between align-items-center">
									<a href="../index.php" class="text-muted text-hover-primary">Laman Utama</a>
									<a href="javascript:;" id="kt_login_forgot" class="text-muted text-hover-primary">Lupa Kata laluan ?</a>
								</div>
								<button id="kt_login_signin_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-4">Login</button>
							</form>
						</div>
						<!--end::Login Sign in form-->
						<!--begin::Login Sign up form-->
						<div class="login-signup">
							<div class="mb-20">
								<h3>Sign Up</h3>
								<div class="text-muted font-weight-bold">Enter your details to create your account</div>
							</div>
							<form class="form" id="kt_login_signup_form">
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="Fullname" name="fullname" />
								</div>
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="Email" name="email" autocomplete="off" />
								</div>
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="Password" name="password" />
								</div>
								<div class="form-group mb-5">
									<input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="Confirm Password" name="cpassword" />
								</div>
								<div class="form-group mb-5 text-left">
									<div class="checkbox-inline">
										<label class="checkbox m-0">
										<input type="checkbox" name="agree" />
										<span></span>I Agree the
										<a href="#" class="font-weight-bold ml-1">terms and conditions</a>.</label>
									</div>
									<div class="form-text text-muted text-center"></div>
								</div>
								<div class="form-group d-flex flex-wrap flex-center mt-10">
									<button id="kt_login_signup_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-2">Sign Up</button>
									<button id="kt_login_signup_cancel" class="btn btn-light-primary font-weight-bold px-9 py-4 my-3 mx-2">Cancel</button>
								</div>
							</form>
						</div>
						<!--end::Login Sign up form-->
						<!--begin::Login forgot password form-->
						<div class="login-forgot">
							<div class="mb-20">
								<h3>Lupa Kata laluan ?</h3>
								<div class="text-muted font-weight-bold">Sila masukkan No. Kad Pengenalan dan Emel/Soalan Rahsia yang anda daftarkan sebelum ini untuk tetapkan semula kata laluan anda</div>
							</div>
							<form class="form" id="kt_login_forgot_form">
								<div class="form-group mb-10">
									<input class="form-control form-control-solid h-auto py-4 px-8" type="text" placeholder="No. Kad Pengenalan" maxlength="12" id="forget_username" name="forget_username" autocomplete="off" />
								</div>
								<div class="form-group mb-10">
									<select class="form-control form-control-solid h-auto py-4 px-8" id="forget_select" onchange="changeForgetSelect()">
										<option value="1">Emel</option>
										<option value="2">Soalan Rahsia</option>
									</select>
								</div>
								<div class="form-group mb-10" id="fgt_email_div">
									<input class="form-control form-control-solid h-auto py-4 px-8" type="text" placeholder="Emel" id="forget_emel" name="forget_emel" value="" autocomplete="off" />
								</div>
								<div class="form-group mb-10" id="fgt_rahsia_div" style="display:none">
									<label class="form-control form-control-solid" style="text-align:left" id="forget_soalan"></label>
									<input class="form-control form-control-solid h-auto py-4 px-8" type="text" placeholder="Jawapan" id="forget_jawapan" name="forget_jawapan" value="" autocomplete="off" />
								</div>
								<div id="newpwdDiv">
								</div>
								<div class="form-group d-flex flex-wrap flex-center mt-10">
									<button id="kt_login_forgot_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-2">Tetapkan semula</button>
									<button id="kt_login_forgot_cancel" class="btn btn-light-primary font-weight-bold px-9 py-4 my-3 mx-2">Kembali ke login</button>
								</div>
							</form>
						</div>
						<!--end::Login forgot password form-->
					</div>
				</div>
			</div>
			<!--end::Login-->
		</div>
		<!--end::Main-->
		<script>var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";</script>
		<!--begin::Global Config(global config for global JS scripts)-->
		<script>var KTAppSettings = { "breakpoints": { "sm": 576, "md": 768, "lg": 992, "xl": 1200, "xxl": 1400 }, "colors": { "theme": { "base": { "white": "#ffffff", "primary": "#3699FF", "secondary": "#E5EAEE", "success": "#1BC5BD", "info": "#8950FC", "warning": "#FFA800", "danger": "#F64E60", "light": "#E4E6EF", "dark": "#181C32" }, "light": { "white": "#ffffff", "primary": "#E1F0FF", "secondary": "#EBEDF3", "success": "#C9F7F5", "info": "#EEE5FF", "warning": "#FFF4DE", "danger": "#FFE2E5", "light": "#F3F6F9", "dark": "#D6D6E0" }, "inverse": { "white": "#ffffff", "primary": "#ffffff", "secondary": "#3F4254", "success": "#ffffff", "info": "#ffffff", "warning": "#ffffff", "danger": "#ffffff", "light": "#464E5F", "dark": "#ffffff" } }, "gray": { "gray-100": "#F3F6F9", "gray-200": "#EBEDF3", "gray-300": "#E4E6EF", "gray-400": "#D1D3E0", "gray-500": "#B5B5C3", "gray-600": "#7E8299", "gray-700": "#5E6278", "gray-800": "#3F4254", "gray-900": "#181C32" } }, "font-family": "Poppins" };</script>
		<!--end::Global Config-->
		<!--begin::Global Theme Bundle(used by all pages)-->
		<script src="assets/plugins/global/plugins.bundle.js"></script>
		<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
		<script src="assets/js/scripts.bundle.js"></script>
		<!--end::Global Theme Bundle-->
		<!--begin::Page Scripts(used by this page)-->
		<script src="includes/js/login_pemohon-general.js"></script>
		<script>
		const togglePassword = document.querySelector('#togglePassword');
		const password = document.querySelector('#password');
		
		togglePassword.addEventListener('click', function (e) {
			// toggle the type attribute
			const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
			password.setAttribute('type', type);
			// toggle the eye slash icon
			this.classList.toggle('fa-eye-slash');
		});
		</script>
		<!--end::Page Scripts-->
	</body>
	<!--end::Body-->
</html>

<script>
function changeForgetSelect()
{
	if($('#forget_select').val() == 2)
	{
		if($('#forget_username').val() == '')
		{
			swal.fire({
				text: "Sila masukkan Id Pengguna untuk dapatkan soalan rahsia anda",
				icon: "error",
				buttonsStyling: false,
				confirmButtonText: "OK!",
				customClass: {
					confirmButton: "btn font-weight-bold btn-light-primary"
				}
			});
			$('#forget_select').val('1');
		}
		else
		{
			$.ajax({
				type: "POST", 
				url: "login_pemohon-get_soalan.php", 
				data: 'username=' + $('#forget_username').val(),
				success: function(res){
					var return_data = JSON.parse(res);
					if(return_data.status > 0)
					{
						$('#forget_soalan').html('Soalan Rahsia : ' + return_data.soalan);
						$('#forget_emel').hide();
						//$('#forget_emel').prop("disabled",true);
						$('#forget_jawapan').show();
						//$('#forget_jawapan').prop("disabled",false);
						$('#fgt_rahsia_div').show();
					}
					else
					{
						swal.fire({
							text: return_data.error,
							icon: "error",
							buttonsStyling: false,
							confirmButtonText: "OK!",
							customClass: {
								confirmButton: "btn font-weight-bold btn-light-primary"
							}
						}).then(function() {	
							$('#forget_select').val('1');
						});
					}
				}
			});  //end ajax
		}
	}
	else
	{
		$('#forget_emel').show();
		//$('#forget_emel').prop("disabled",false);
		$('#forget_jawapan').hide();
		//$('#forget_jawapan').prop("disabled",true);
		$('#fgt_rahsia_div').hide();
	}
}
</script>