<!DOCTYPE html>
<html lang="en">

<head>
	<title>TPC-PACK</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="images/icons/lux-favico-3-1.png" />
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/vendor/animate/animate.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/css/util.css">
	<link rel="stylesheet" type="text/css" href="vendor/login-form-v1/Login_v1/css/main.css">
	<!--===============================================================================================-->
	<link href="css/sweetalert.css" rel="stylesheet">
	<link href="css/sweetalert2.min.css" rel="stylesheet">

</head>
<style>
	.wrap-login100 {
		background-color: rgba(255, 255, 255, 0.5);
		/* Transparan putih */
		padding: 30px;
		/* Sesuaikan dengan kebutuhan */
	}

	.wrap-login100 .login100-pic {
		opacity: 3;
		/* Atur opacity (nilai transparansi) untuk gambar */
	}

	.wrap-login100 .login100-form {
		background-color: rgba(255, 255, 255, 0);
		/* Transparan putih */
		padding: 10px;
		/* Sesuaikan dengan kebutuhan */
	}

	.wrap-login100 .login100-form-title {
		color: rgba(255, 255, 255, 0.8);
		/*
		Warna teks transparan */
	}

	.wrap-login100 .wrap-input100 {
		background-color: rgba(255, 255, 255, 0.5);
		/* Transparan putih */
		margin-bottom: 5px;
		/* Sesuaikan dengan kebutuhan */
	}

	/* Dan seterusnya, atur transparansi untuk elemen-elemen lain sesuai kebutuhan */

	/* Contoh untuk link Forgot Password */
	.wrap-login100 .text-center .txt1 {
		opacity: 1;
		/* Atur opacity (nilai transparansi) untuk teks */
	}
</style>

<body>

	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<div class="login100-pic js-tilt" data-tilt>
					<img src="vendor/login-form-v1/Login_v1/images/linux1.png" alt="IMG" style="border-radius: 3%;">
				</div>

				<form class="login100-form validate-form" name="loginpage" id="loginpage" action="cek.login.php" method="post" enctype="multipart/form-data">
					<span class="login100-form-title">
						TPC-PACK
					</span>

					<div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
						<input class="form-control" type="text" name="strUsername" id="strUsername" placeholder="Username" required>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Password is required">
						<div class="input-group" id="show_hide_password">
							<input class="form-control" type="password" id="strPassword" name="strPassword" placeholder="Password">
							<div class="input-group-addon" id="togglePassword">
								<i class="fa fa-eye-slash" aria-hidden="true"></i>
							</div>
						</div>

					</div>

					<div class="container-login100-form-btn">
						<button class="login100-form-btn" name="login" id="login">
							Login
						</button>
					</div>

					<div class="text-center p-t-12">
						<span class="txt1">
							Forgot
						</span>
						<a class="txt2" href="#" data-toggle="modal" data-target="#forgetpass">
							Username / Password?
						</a>
					</div>
				</form>
			</div>


		</div>
	</div>



	<!-- Modal -->
	<div class="modal fade" id="forgetpass" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Forget Password</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="exampleFormControlInput1">Email address</label>
						<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="pesan()">Send to email</button>
				</div>
			</div>
		</div>
	</div>


	<script>
		var element = document.querySelector('i.fa.fa-eye-slash');
		const togglePassword = document.querySelector('#togglePassword');
		const password = document.querySelector('#strPassword');
		const eyeIcon = document.querySelector('#togglePassword i');

		togglePassword.addEventListener('click', () => {
			const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
			password.setAttribute('type', type);
			if (type === 'password') {
				eyeIcon.classList.remove('fa-eye-slash');
				eyeIcon.classList.add('fa-eye');
			} else {
				eyeIcon.classList.remove('fa-eye');
				eyeIcon.classList.add('fa-eye-slash');
			}
		});
	</script>


	<!--===============================================================================================-->
	<script src="vendor/login-form-v1/Login_v1/vendor/jquery/jquery-3.2.1.min.js"></script>
	<!--===============================================================================================-->
	<script src="vendor/login-form-v1/Login_v1/vendor/bootstrap/js/popper.js"></script>
	<script src="vendor/login-form-v1/Login_v1/vendor/bootstrap/js/bootstrap.min.js"></script>
	<!--===============================================================================================-->
	<script src="vendor/login-form-v1/Login_v1/vendor/select2/select2.min.js"></script>
	<!--===============================================================================================-->
	<script src="vendor/login-form-v1/Login_v1/vendor/tilt/tilt.jquery.min.js"></script>
	<script>
		$('.js-tilt').tilt({
			scale: 1.1
		})
	</script>
	<!--===============================================================================================-->
	<script src="vendor/login-form-v1/Login_v1/js/main.js"></script>
	<script src="js/sweetalert2.min.js"></script>
</body>

</html>

<script type="text/javascript">
	function pesan() {
		const Toast = Swal.mixin({
			toast: true,
			position: "top-end",
			showConfirmButton: false,
			timer: 3000,
			timerProgressBar: true,
			didOpen: (toast) => {
				toast.onmouseenter = Swal.stopTimer;
				toast.onmouseleave = Swal.resumeTimer;
			}
		});
		Toast.fire({
			icon: "success",
			title: "Please check youre email and follow the instructions"
		});
	}

	function gagal() {
		const Toast = Swal.mixin({
			toast: true,
			position: "top-end",
			showConfirmButton: false,
			timer: 2000,
			timerProgressBar: false,
			didOpen: (toast) => {
				toast.onmouseenter = Swal.stopTimer;
				toast.onmouseleave = Swal.resumeTimer;
			}
		});
		Toast.fire({
			icon: "error",
			title: "Login gagal"
		});
	}


	$("#loginpage").on("submit", function(e) {
		e.preventDefault();
		$.ajax({
			url: "cek.login2.php",
			type: "POST",
			data: new FormData(this),
			contentType: false,
			cache: false,
			processData: false,
			success: function(data) {
				if (data == 0) {
					gagal();
					document.getElementById('strUsername').value = "";
					document.getElementById('strPassword').value = "";
				} else {
					let timerInterval;
					Swal.fire({
						title: "Loading...",
						timer: 1000,
						timerProgressBar: false,
						didOpen: () => {
							Swal.showLoading();
							const timer = Swal.getPopup().querySelector("b");
							timerInterval = setInterval(() => {
								timer.textContent = `${Swal.getTimerLeft()}`;
							}, 100);
						},
						willClose: () => {
							clearInterval(timerInterval);
							window.open("home/index2.php", "_self");
						}
					});
				}
			}
		});
	});
</script>