<!DOCTYPE html>
<html lang="en">
<head>
	<title>POS BENGKEL - Eskol Berkat Utama</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="img/png" href="http://senimankoding.com/assets/img/favicon.png">

	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="assets-login/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="assets-login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="assets-login/css/util.css">
	<link rel="stylesheet" type="text/css" href="assets-login/css/main.css">

	<style>
		body, html { height: 100%; font-family: 'Poppins', sans-serif; background: #f0f2f5; }
		
		.wrap-login100 {
			border-radius: 20px;
			overflow: hidden;
			box-shadow: 0 15px 35px rgba(0,0,0,0.1);
			border: none;
		}

		.login100-form-title {
			font-weight: 700;
			font-size: 26px;
			color: #333;
			text-transform: none;
			line-height: 1.2;
			display: block;
			text-align: left;
		}

		/* Perbaikan Label agar tidak menumpuk */
		.wrap-input100 {
			position: relative;
			width: 100%;
			background-color: transparent;
			border-bottom: 2px solid #e6e6e6;
			margin-bottom: 30px; /* Jarak antar input */
			padding-top: 10px;
		}

		.label-input100 {
			font-family: 'Poppins', sans-serif;
			font-size: 13px;
			color: #2a5298; /* Warna label biru elegant */
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			display: block;
			margin-bottom: 5px; /* Memberi ruang agar tidak menumpuk dengan input */
		}

		.input100 {
			font-family: 'Poppins', sans-serif;
			font-size: 16px;
			color: #333;
			line-height: 1.2;
			display: block;
			width: 100%;
			background: transparent;
			height: 45px;
			padding: 0 5px;
			border: none;
			outline: none;
		}

		/* Efek Fokus Garis Bawah */
		.focus-input100 {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
		}

		.focus-input100::before {
			content: "";
			display: block;
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 2px;
			transition: all 0.4s;
			background: #2a5298;
		}

		.input100:focus + .focus-input100::before {
			width: 100%;
		}

		/* Button */
		.login100-form-btn {
			background: linear-gradient(45deg, #1e3c72, #2a5298);
			border-radius: 12px;
			height: 50px;
			font-weight: 600;
			transition: all 0.4s;
		}

		.login100-form-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
		}

		.clear-link { color: #e74c3c !important; font-size: 12px; transition: 0.3s; }
		.clear-link:hover { text-decoration: underline; }
	</style>
</head>
<body>
	<?php  
      $emailSession = isset($_COOKIE['emailPos']) ? base64_decode($_COOKIE['emailPos']) : "";
      $passSession = isset($_COOKIE['passPos']) ? base64_decode($_COOKIE['passPos']) : "";
  	?>
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				
				<form class="login100-form validate-form" action="aksi/login" method="post" style="padding: 60px 50px;">
					<span class="login100-form-title p-b-40">
						POS BENGKEL <br>
						<small style="font-weight: 300; font-size: 15px; color: #999;">Eskol Berkat Utama System</small>
					</span>
					
					<!-- Perbaikan Struktur Input: Label di atas, Input di bawah -->
					<div class="wrap-input100 validate-input" data-validate="Valid email is required">
						<span class="label-input100">Email Address</span>
						<input class="input100" type="email" name="user_email" value="<?= $emailSession; ?>" placeholder="contoh@email.com">
						<span class="focus-input100"></span>
					</div>
					
					<div class="wrap-input100 validate-input" data-validate="Password is required">
						<span class="label-input100">Password</span>
						<input class="input100" type="password" name="user_password" value="<?= $passSession; ?>" placeholder="******">
						<span class="focus-input100"></span>
					</div>
					
					<div class="text-right p-b-30">
						<a href="aksi/clear-cookie" class="clear-link">
							<i class="fa fa-refresh"></i> Clear Saved Account
						</a>
					</div>

					<div class="container-login100-form-btn">
						<button type="submit" class="login100-form-btn" name="submit">
							Login ke Sistem
						</button>
					</div>

					<div class="text-center p-t-50">
						<span class="txt2" style="font-size: 12px; color: #bbb;">
							&copy; <?= date('Y'); ?> Eskol Berkat Utama <br>
							<a href="https://ebu.eskolberkatutama.com/" target="_blank" style="color: #2a5298;">www.ebu.eskolberkatutama.com</a>
						</span>
					</div>
				</form>

				<div class="login100-more" style="background-image: url('assets-login/images/bg-01.jpg'); position: relative; z-index: 1;">
					<div style="position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: -1;"></div>
					<div class="flex-col-c-m h-full p-l-40 p-r-40">
						<h3 class="txt-center p-b-10" style="color: white; font-weight: 700; font-size: 30px;">
							Service Excellence
						</h3>
						<p class="txt-center" style="color: rgba(255,255,255,0.8); font-weight: 300;">
							Manage your workshop more efficiently and professionally.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="assets-login/vendor/jquery/jquery-3.2.1.min.js"></script>
	<script src="assets-login/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets-login/js/main.js"></script>

</body>
</html>