<?php
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (isset($_SESSION['emp_id'])) redirect(SITE_URL . '/employee/index.php');

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email = trim($_POST['email'] ?? '');
    $pass  = trim($_POST['password'] ?? '');
    if ($email && $pass) {
        $db = getDB();
        $stmt = $db->prepare("SELECT * FROM employees WHERE email=?");
        $stmt->execute([$email]);
        $emp = $stmt->fetch();
        if ($emp && password_verify($pass, $emp['password'])) {
            if ($emp['status'] === 'active') {
                $_SESSION['emp_id'] = $emp['id'];
                $_SESSION['emp_name'] = $emp['name'];
                $_SESSION['emp_role'] = $emp['role'];
                $_SESSION['emp_department'] = $emp['department'] ?? 'Office';
                $_SESSION['emp_code'] = $emp['emp_code'] ?? 'EMP-'.str_pad($emp['id'],4,'0',STR_PAD_LEFT);
                
                // Track Login in Attendance (Automated Check-in Simulation)
                $date = date('Y-m-d');
                $time = date('Y-m-d H:i:s');
                $check = $db->query("SELECT id FROM emp_attendance WHERE employee_id={$emp['id']} AND date='{$date}'")->fetch();
                if (!$check) {
                    $db->exec("INSERT INTO emp_attendance (employee_id, date, check_in, status) VALUES ({$emp['id']}, '{$date}', '{$time}', 'Present')");
                }

                redirect(SITE_URL . '/employee/index.php');
            } else {
                $error = 'Your account is currently inactive. Contact Admin.';
            }
        } else {
            $error = 'Invalid email or password.';
        }
    } else { $error = 'Please enter email and password.'; }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Employee Portal Login | Balimeen</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { 
    background: url('../assets/images/about_factory.png') no-repeat center center/cover;
    min-height: 100vh; 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    display: flex;
}
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0d1a33 0%, #0d1a33 30%, rgba(13,26,51,0.85) 45%, rgba(13,26,51,0) 100%);
    z-index: 1;
}
.login-left {
    position: relative;
    z-index: 2;
    width: 450px;
    padding: 60px 50px;
    background: transparent;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: white;
}
.logo-area { text-align: center; margin-bottom: 40px; margin-top: 20px; }
.logo-area img { width: 50px; height: 50px; border-radius: 8px; margin-bottom: 10px; }
.logo-area h1 { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; color: #ffffff; margin: 0 0 2px; }
.logo-area .subtitle { font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin: 0; }

.page-title { text-align: center; font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.page-subtitle { text-align: center; font-size: 0.9rem; color: #94a3b8; margin-bottom: 35px; }

.form-group { margin-bottom: 20px; position: relative; }
.form-group input { 
    width: 100%; 
    padding: 14px 14px 14px 45px;
    background: #ffffff; 
    border: none; 
    border-radius: 8px; 
    font-size: 0.95rem; 
    outline: none; 
    box-sizing: border-box;
    color: #1e293b;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.form-group input::placeholder { color: #94a3b8; }
.form-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1.1rem;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.85rem;
}
.options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    cursor: pointer;
}
.options input[type="checkbox"] {
    accent-color: #2563eb;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.options a {
    color: #cbd5e1;
    text-decoration: none;
}
.options a:hover { color: #fff; }

.btn { width: 100%; padding: 14px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.btn:hover { background: #1d4ed8; }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #94a3b8;
    font-size: 0.85rem;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.divider:not(:empty)::before { margin-right: 1em; }
.divider:not(:empty)::after { margin-left: 1em; }

.btn-otp {
    width: 100%; padding: 14px; background: #ffffff; color: #0f172a; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-otp:hover { background: #f1f5f9; }

.help-text {
    text-align: center;
    margin-top: auto; 
    font-size: 0.85rem;
    color: #94a3b8;
}
.help-text a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.help-text a:hover { text-decoration: underline; }

.alert { padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: .85rem; font-weight: 500; text-align: center; }
.alert-error { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.2); }

@media (max-width: 768px) {
    .overlay { background: rgba(13,26,51,0.95); }
    .login-left { width: 100%; padding: 40px 30px; align-items: center; text-align: center; }
    form { width: 100%; max-width: 400px; }
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="login-left">
  <div class="logo-area">
    <img src="<?= SITE_URL ?>/assets/images/logo.jpg" alt="Balimeen">
    <h1>BALIMEEN</h1>
    <div class="subtitle">PRIVATE LIMITED</div>
  </div>
  
  <div class="page-title">EMPLOYEE PORTAL</div>
  <div class="page-subtitle">Welcome! Please login to your account</div>

  <?php if ($error): ?><div class="alert alert-error"><?= h($error) ?></div><?php endif; ?>
  
  <form method="POST">
    <div class="form-group">
      <i class="fa-regular fa-envelope"></i>
      <input type="email" name="email" placeholder="Employee ID / Email" required autofocus>
    </div>
    <div class="form-group">
      <i class="fa-solid fa-lock"></i>
      <input type="password" name="password" placeholder="Password" required>
    </div>
    
    <div class="options">
      <label><input type="checkbox" name="remember"> Remember me</label>
      <a href="#">Forgot Password?</a>
    </div>
    
    <button type="submit" class="btn">Login</button>
  </form>
  
  <div class="divider">or login with</div>
  
  <form style="width:100%; margin: 0 auto;">
      <button type="button" class="btn-otp">
        <i class="fa-solid fa-mobile-screen"></i> Login with OTP
      </button>
  </form>

  <div class="help-text">
    Need help? <a href="#">Contact IT Support</a>
  </div>
</div>
</body>
</html>
