<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<!-- PAGE TITLE HERE -->
	<title>My Wash - Smart Laundry</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="author" content="DexignLab">
	<meta name="robots" content="index, follow">

	<!-- MOBILE SPECIFIC -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- FAVICONS ICON -->
	<link rel="shortcut icon" type="image/png" href="images/favicon.png">
	<link href="vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
	<link class="main-css" href="css/style.css" rel="stylesheet">

	<style>
		.keypad {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
		}

		.key {
			font-size: 1rem;
			padding: 6px;
			cursor: pointer;
			background-color: #0074FF;
			color: #fff;
			border: none;
			border-radius: 4px;
			transition: background-color 0.2s ease;
		}

		.key:hover {
			background-color: #0056b3;
		}

		.clear {
			grid-column: span 3;
			background-color: #dc3545;
		}

		.clear:hover {
			background-color: #c82333;
		}

		.zero {
			grid-column: 2;
		}
	</style>
</head>

<body>
	<div class="authincation d-flex flex-column flex-lg-row flex-column-fluid">
		<div class="login-aside text-center d-none d-sm-flex flex-column flex-row-auto justify-content-center align-items-center">
			<div class="aside-image" style="background-image:url(images/mywash.png); width: 80%; height: 50vh; background-size: contain; background-repeat: no-repeat;"></div>
		</div>
		<div class="container flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto">
			<div class="d-flex justify-content-center h-100 align-items-center">
				<div class="authincation-content style-2">
					<div class="row no-gutters">
						<div class="col-xl-12">
							<div class="auth-form">
								<div class="text-center d-block d-sm-none mb-4 pt-5">
									<a href="login.php"><img src="images/mywash.png" width="80" class="dark-login" alt=""></a>
									<a href="login.php"><img src="images/mywash.png" width="" class="light-login" alt=""></a>
								</div>
								<div class="text-center d-block d-sm-none mb-4 pt-5">
									<?php
									if (isset($_SESSION['signup_success'])) {
										echo "<div class='alert alert-success'>" . $_SESSION['signup_success'] . "</div>";
										unset($_SESSION['signup_success']);
									}
									?>
								</div>
								<h2 class="text-center mb-4" style="margin-top: 4vh;">Masuk ke akun anda</h2>
								<form action="" method="post" onsubmit="return handleLogin(event)">
									<!-- Keypad Input untuk Nomor Telepon -->
									<div class="mb-3">
										<input type="text" name="phone" id="phone-display" class="form-control" placeholder="Phone number..." readonly>
										<div class="keypad mt-3">
											<button class="key" type="button" onclick="appendNumber('phone', 1)">1</button>
											<button class="key" type="button" onclick="appendNumber('phone', 2)">2</button>
											<button class="key" type="button" onclick="appendNumber('phone', 3)">3</button>
											<button class="key" type="button" onclick="appendNumber('phone', 4)">4</button>
											<button class="key" type="button" onclick="appendNumber('phone', 5)">5</button>
											<button class="key" type="button" onclick="appendNumber('phone', 6)">6</button>
											<button class="key" type="button" onclick="appendNumber('phone', 7)">7</button>
											<button class="key" type="button" onclick="appendNumber('phone', 8)">8</button>
											<button class="key" type="button" onclick="appendNumber('phone', 9)">9</button>
											<button class="key zero" type="button" onclick="appendNumber('phone', 0)">0</button>
											<button class="key clear" type="button" onclick="clearDisplay('phone')">Clear</button>
										</div>
									</div>
									<div class="text-center">
										<button type="submit" class="btn btn-primary btn-block">Masuk</button>
									</div>
								</form>
								<div class="new-account mt-3">
									<p>Don't have an account? <a class="text-primary" href="./signup.php">Daftar</a></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--**********************************
        Scripts
    ***********************************-->
	<!-- Required vendors -->
	<script src="vendor/global/global.min.js"></script>
	<script src="vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
	<script src="js/custom.min.js"></script>
	<script src="js/ic-sidenav-init.js"></script>

	<script>
		function appendNumber(type, number) {
			const display = document.getElementById(type + '-display'); // Get the correct input field by type
			display.value += number; // Append the number to the value
		}

		function clearDisplay(type) {
			const display = document.getElementById(type + '-display'); // Get the correct input field by type
			display.value = ''; // Clear the value
		}

		function handleLogin(event) {
			event.preventDefault();

			const phone = document.getElementById('phone-display').value;

			if (phone) {
				// Step 1: Verifikasi nomor telepon di database
				fetch('verify_phone.php', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify({
							phone: phone
						})
					})
					.then(response => response.json())
					.then(data => {
						if (data.exists) {
							// Jika nomor telepon valid, redirect ke halaman PIN
							window.location.href = `input_pin.php?phone=${encodeURIComponent(phone)}`;
						} else {
							alert("Phone number not found.");
						}
					})
					.catch(error => console.error('Error:', error));
			}
		}
	</script>

</body>

</html>