<?php
session_start();
require_once "db.php"; // DB connection yako

$msg = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $phone    = trim($_POST['phone']);
    $password = $_POST['password'];

    if (empty($phone) || empty($password)) {
        $msg = "All fields are required!";
    } else {
        // Fetch user
        $stmt = $conn->prepare("SELECT id, phone, password FROM users WHERE phone=? LIMIT 1");
        $stmt->bind_param("s", $phone);
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows == 1) {
            $stmt->bind_result($user_id, $dbPhone, $hashed);
            $stmt->fetch();

            if (password_verify($password, $hashed)) {
                $_SESSION['user_id'] = $user_id;
                $_SESSION['phone']   = $dbPhone;

                header("Location: home.php");
                exit;
            } else {
                $msg = "Invalid phone or password!";
            }
        } else {
            $msg = "Invalid phone or password!";
        }
        $stmt->close();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Login - BlackRock</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #fff;
    }
    .top {
      background: url('https://picsum.photos/600/300?random=2') no-repeat center center;
      background-size: cover;
      padding: 40px 0 20px 0;
      text-align: center;
      color: white;
      position: relative;
    }
    .top h1 { margin: 0; font-size: 22px; font-weight: bold; }
    .tabs {
      display: flex; justify-content: center; margin-top: 20px;
      background: #f6f2fc; border-radius: 20px 20px 0 0; overflow: hidden;
    }
    .tab { flex: 1; text-align: center; padding: 12px; font-weight: 500; color: #333; cursor: pointer; }
    .tab.active { background: #fff; font-weight: bold; }
    .form-container { background: #fff; padding: 20px; border-radius: 0 0 20px 20px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 14px; margin-bottom: 6px; color: #2a2a2a; font-weight: 600; }
    .form-group input { width: 93%; padding: 14px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #f9f7ff; outline: none; }
    .form-group input:focus { border-color: #7a42f4; }
    .form-group .password-wrapper { position: relative; }
    .form-group .password-wrapper input { width: 85%; padding-right: 40px; }
    .form-group .password-wrapper .toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); cursor: pointer; font-size: 14px; color: #7a42f4; }
    .btn { display: block; width: 100%; padding: 14px; text-align: center; border-radius: 8px; font-size: 16px; cursor: pointer; border: none; margin-top: 8px; }
    .btn-primary { background: #6c35f0; color: white; font-weight: bold; }
    .btn-outline { background: #fff; border: 1px solid #6c35f0; color: #6c35f0; font-weight: bold; }
    .support { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
    .support img { width: 32px; height: 32px; }
    .msg { text-align: center; margin: 10px 0; font-weight: bold; color: red; }
  </style>
</head>
<body>

  <div class="top">
    <h1>BlackRock</h1>
    <div class="tabs">
      <div class="tab active">Login</div>
      <div class="tab" onclick="window.location.href='register.php'">Register</div>
    </div>
  </div>

  <div class="form-container">
    <?php if(!empty($msg)) echo "<p class='msg'>$msg</p>"; ?>
    <form method="post" action="">
      <div class="form-group">
        <label>Phone number</label>
        <input type="tel" name="phone" placeholder="+260..." required>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="password-wrapper">
          <input type="password" name="password" placeholder="Password" required>
          <span class="toggle">👁</span>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Sign In</button>
      <button type="button" onclick="window.location.href='register.php'" class="btn btn-outline">Sign Up</button>
    </form>
  </div>

 <a href="https://wa.me/447877147605" target="_blank">
  <div class="support">
    <img src="https://img.icons8.com/fluency/48/customer-support.png" alt="support">
</div>
</a>
  <script>
    // Toggle password visibility
    document.querySelectorAll('.toggle').forEach(toggle => {
      toggle.addEventListener('click', function() {
        const input = this.previousElementSibling;
        input.type = (input.type === "password") ? "text" : "password";
      });
    });
  </script>
</body>
</html>
