<?php
header('Content-Type: text/html; charset=utf-8');
session_start();
include 'db.php';

$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $u = $_POST['username'];
    $p = $_POST['password'];
    $stmt = $pdo->prepare('SELECT * FROM users WHERE username=?');
    $stmt->execute([$u]);
    $user = $stmt->fetch();
    if ($user && $p == $user['password']) {
        $_SESSION['user_id'] = $user['id'];
        header('Location: companies.php');
        exit;
    } else {
        $error = "Invalid username or password.";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login - Review Stream</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Sans-serif fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">

<!-- Favicon -->
<link rel="icon" href="/favicon.png" type="image/png" />

<style>
.container { max-width:400px; margin:2rem auto; }
form { display:flex; flex-direction:column; gap:0.8rem; }
input[type="text"], input[type="password"] { padding:0.6rem; border-radius:6px; border:1px solid #ccc; }
button { padding:0.6rem; background:#007BFF; color:#fff; border:none; border-radius:6px; cursor:pointer; }
button:hover { background:#0056b3; }


.fixed-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #222;
      text-align: center;
      padding: 10px 0;
      color: #fff;
      z-index: 1000;
    }

   .fixed-footer p{
		font-family: 'Poppins', sans-serif !important;
		font-size: 13px !important;
	}

    .footer-menu a {
      margin: 0 10px;
      text-decoration: none;
      color: #fff;
	  font-family: 'Poppins', sans-serif !important;
	  font-size: 13px !important;
    }

    .footer-menu a:hover {
      text-decoration: underline;
    }
	
	
	
		 /* Collapsible menu */
  .menu { display: none; flex-direction: column; }
  .menu.active { display: flex; }
  .menu a { padding: 8px 0; text-decoration: none; color: #333; }
  .menu-toggle { font-size: 1.5em; cursor: pointer; }
  @media(min-width: 768px){
    .menu { display: flex !important; flex-direction: row; }
    .menu a { margin-left: 15px; }
    .menu-toggle { display: none; }
  }
  
  
  .topbar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:10px 20px; 
  background:#007BFF; 
  color:white; 
  }
 
  .logo {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a2d4f5, #fefb72); /* light blue to lemon */
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-right: 8px;
}
</style>
</head>
<body>

<div class="topbar">
 <div class="logo"><div class="logo-icon"><i class="fas fa-shield-alt" style="color: skyblue; font-size: 25px; margin-left: 6px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"></i>
</div> REVIEW STREAM
  </div>
  <div class="menu-toggle" onclick="document.querySelector('.menu').classList.toggle('active')">
    <i class="fas fa-bars"></i>
  </div>
  
  
  <div class="menu">
    <a href="index.php">Home</a>
    <a href="companies.php">Companies</a>
    <a href="blog.php">Newsroom</a>
    <?php if(isset($_SESSION['user_id'])): ?>
      <a href="logout.php">Logout</a>
    <?php else: ?>
      <a href="login.php">Login</a>
    <?php endif; ?>
    <button class="dark-mode-toggle" onclick="document.body.classList.toggle('dark-mode')">🌓</button>
  </div>
</div>


<div class="container">
  <div class="card">
    <h2 style="text-align:center;">Login</h2>
    <?php if ($error): ?>
      <div style="color:red;text-align:center;"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>
    <form method="post">
      <input name="username" type="text" placeholder="Enter username" required>
      <input name="password" type="password" placeholder="Enter password" required>
      <button type="submit">Login</button>
    </form>
    <p style="text-align:center;"><a href="reset_password.php">Forgot password?</a></p>
    <p style="text-align:center;">Don't have an account? <a href="register.php">Register</a></p>
  </div>
</div>


<?php include 'footer.php'; ?>

</body>
</html>
