<?php
require_once '../config/constants.php';
session_start();

$error = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$email = $_POST['email'] ?? '';
$password = $_POST['password'] ?? '';

$api_url = API_URL . "employees/auth/login.php";

$ch = curl_init();

curl_setopt_array($ch, [
CURLOPT_URL => $api_url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => [
'email' => $email,
'password' => $password
],
CURLOPT_HTTPHEADER => [
'X-API-KEY: ' . API_KEY
]
]);

$response = curl_exec($ch);
curl_close($ch);

/* remove extra whitespace */
$response = trim($response);

$result = json_decode($response, true);

if (json_last_error() === JSON_ERROR_NONE && isset($result['status']) && $result['status'] === 'success') {

$_SESSION['employee_token'] = $result['data']['token'];
$_SESSION['employee'] = $result['data']['employee'];

header("Location: dashboard.php");
exit;

} else {

$error = $result['message'] ?? "Login failed";

}

}
?>

<!DOCTYPE html>
<html lang="en" data-theme="light">

<?php include './partials/head.php'; ?>

<body>

<section class="auth bg-base d-flex flex-wrap">

<div class="auth-left d-lg-block d-none">
<div class="d-flex align-items-center flex-column h-100 justify-content-center">
<img src="assets/images/auth/auth-img.png" alt="">
</div>
</div>

<div class="auth-right py-32 px-24 d-flex flex-column justify-content-center">

<div class="max-w-464-px mx-auto w-100">

<div>
<a href="index.php" class="mb-40 max-w-290-px">
<img src="assets/images/logo.png" alt="">
</a>

<h4 class="mb-12">Sign In to your Account</h4>
<p class="mb-32 text-secondary-light text-lg">
Welcome back! please enter your detail
</p>
</div>

<?php if($error): ?>
<div class="alert alert-danger"><?php echo $error; ?></div>
<?php endif; ?>

<form method="POST">

<div class="icon-field mb-16">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="mage:email"></iconify-icon>
</span>

<input 
type="email"
name="email"
class="form-control h-56-px bg-neutral-50 radius-12"
placeholder="Email"
required
>
</div>

<div class="position-relative mb-20">

<div class="icon-field">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>

<input
type="password"
name="password"
id="password"
class="form-control h-56-px bg-neutral-50 radius-12"
placeholder="Password"
required
>
</div>

<span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#password"></span>

</div>

<button type="submit" class="btn btn-primary text-sm btn-sm px-12 py-16 w-100 radius-12 mt-32">
Sign In
</button>

</form>

</div>
</div>

</section>

<?php include './partials/scripts.php'; ?>

<script>
function initializePasswordToggle(toggleSelector) {

$(toggleSelector).on("click", function() {

$(this).toggleClass("ri-eye-off-line");

var input = $($(this).attr("data-toggle"));

if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}

});

}

initializePasswordToggle(".toggle-password");
</script>

</body>
</html>