<!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="<?= base_url(); ?>images/icons/lux-favico-3-1.png" />
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/animate/animate.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/css/util.css">
	<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>vendor/login-form-v1/Login_v1/css/main.css">
	<!--===============================================================================================-->
	<link href="<?= base_url(); ?>vendor/css/sweetalert.css" rel="stylesheet">
	<link href="<?= base_url(); ?>vendor/css/sweetalert2.min.css" rel="stylesheet">

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

	.wrap-login100 .login100-pic {
		opacity: 3;
	}

	.wrap-login100 .login100-form {
		background-color: rgba(255, 255, 255, 0);
		padding: 10px;
	}

	.wrap-login100 .login100-form-title {
		color: rgba(255, 255, 255, 0.8);
	}

	.wrap-login100 .wrap-input100 {
		background-color: rgba(255, 255, 255, 0.5);
		margin-bottom: 5px;
	}


	.wrap-login100 .text-center .txt1 {
		opacity: 1;
	}
</style>

<body>

	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<div class="login100-pic js-tilt" data-tilt>
					<img style="border-radius: 5%;" src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/images/gpc_val2025.jpg" alt="IMG">
				</div>

				<form class="login100-form validate-form" name="loginpage" id="loginpage" action="" method="post" enctype="multipart/form-data">
					<span class="login100-form-title">
						TPC-PACK<br>
						<?php
						if ($ipinfo == 0) {
						?>
							<span class="badge rounded-pill bg-danger">&nbsp;IP : <?= $ip; ?>&nbsp;</span>
						<?php }
						?>
						<?php
						if ($ipinfo == 1) {
						?>
							<span class="badge rounded-pill bg-primary">&nbsp;IP : <?= $ip; ?>&nbsp;</span>
						<?php }
						?>
					</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="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/jquery/jquery-3.2.1.min.js"></script>
	<!--===============================================================================================-->
	<script src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/bootstrap/js/popper.js"></script>
	<script src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/bootstrap/js/bootstrap.min.js"></script>
	<!--===============================================================================================-->
	<script src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/select2/select2.min.js"></script>
	<!--===============================================================================================-->
	<script src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/vendor/tilt/tilt.jquery.min.js"></script>
	<script>
		$('.js-tilt').tilt({
			scale: 1.1
		})
	</script>
	<!--===============================================================================================-->
	<script src="<?= base_url(); ?>vendor/login-form-v1/Login_v1/js/main.js"></script>
	<script src="<?= base_url(); ?>vendor/js/sweetalert2.min.js"></script>
	<script src="<?= base_url(); ?>vendor/js/auth.js"></script>
</body>
<input type="hidden" id="base_url" value="<?= base_url(); ?>">

</html>

<script type="text/javascript">

</script>