<?php
session_start();
include("config.php");

date_default_timezone_set('Asia/Kolkata');
$msg = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {    
    $number   = mysqli_real_escape_string($conn, $_POST['number']);
    $password = mysqli_real_escape_string($conn, $_POST['password']);

    $query = "SELECT * FROM register WHERE number = '$number' AND password = '$password'";
    $result = mysqli_query($conn, $query);

    if (mysqli_num_rows($result) == 1) {
        $row = mysqli_fetch_assoc($result);

        // Set session variables
        $_SESSION['employee_id'] = $row['employee_id'];
        $_SESSION['name'] = $row['name'];

        // Redirect to profile page
        header("Location: profile.php");
        exit();
    } else {
        $msg = "Invalid Phone Number or Password";
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Login</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            margin: 0;
            color: white;
            background-image: url(bg.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        h3 {
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            font-size: 22px;
            color: white;
            text-shadow: 1px 2px 1px rgba(205, 134, 63, 0.664);
            text-decoration: underline;
        }
        .forms {
            width: 350px;
            padding: 20px;
            background: linear-gradient(purple, blue);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0px 5px 8px gray;
            border-radius:5px;
        }

        .forms .form-input {
            width: 100%;
        }
        .forms .form-input > label {
            font-size: 17px;
        }
        .forms .form-input > input {
            border: none;
            outline: 0;
            padding: 6px;
            margin: 5px;
            width: 99%;
            border-radius:5px;
        }
        #submit {
            padding: 10px 20px;
            border: none;
            background-color: orange;
            margin: 10px 0 0 5px;
            cursor: pointer;
        }
        #submit:hover {
            background-color: navy;
            color: white;
        }
        #submit-3{
            color:black;
            padding: 10px 20px;
            border: none;
            background-color: orange;
            margin: 10px 0 0 5px;
            cursor: pointer;
        }
        #submit-3:hover {
            background-color: navy;
            color: white;
        }
        .password-wrapper {
        position: relative;
        width: 100%;
        }

.password-wrapper input {
    width: 100%;
    padding-right: 35px; /* make space for the eye icon */
    box-sizing: border-box;
    border: none;
    outline: 0;
    padding: 8px;
    border-radius: 4px;
}

.password-wrapper img {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.password-wrapper img:hover {
    opacity: 1;
}

    </style>
</head>
<body>
<div class="forms">
    <?php if ($msg != ""): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <?php echo $msg; ?>
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
    <?php endif; ?>
    <h3>Employee Login</h3>
    <form method="post">
        <div class="form-input">
            <label>Mobile Number:</label><br>
            <input type="text" name="number" placeholder="Enter mobile number..." required>
        </div>
        <div class="form-input">
    <label>Password:</label><br>
    <div class="password-wrapper">
        <input type="password" name="password" id="password" placeholder="Enter password..." required>
        <img id="togglePassword" src="admin/images/invisible.png" alt="Show/Hide">
    </div>
</div>



        <input type="submit" name="empsubmit" id="submit" value="Login">
        <a href="admin/index.php" id="submit-3">Login As Admin</a>
    </form>
    <br>
    <a href="register.php" style="color:white;">Don't have an account?</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<iframe id="chatframe" src="https://technodom-chatbot.onrender.com" style="
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: none;
  z-index: 9999;
  width: 350px;
  height: 500px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  background: #FFF;
"></iframe>
<script>
    const togglePassword = document.getElementById("togglePassword");
    const password = document.getElementById("password");

    togglePassword.addEventListener("click", function () {
        if (password.type === "password") {
            password.type = "text";         // show password
            this.src = "admin/images/view.png";       // change to hide icon
        } else {
            password.type = "password";     // hide password
            this.src = "admin/images/invisible.png";           // change back to show icon
        }
    });
</script>
</body>
</html>
