<?php
require_once 'db.php';
session_start();

// Fetch support URL from settings
$_sup = $conn->query("SELECT key_value FROM settings WHERE key_name='support_url'")->fetch_assoc();
$support_url = $_sup['key_value'] ?? '#';

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $phone    = trim($_POST['phone'] ?? '');
    $password = $_POST['password'] ?? '';
    $confirm  = $_POST['confirm_password'] ?? '';
    $invite   = trim($_POST['invitation_code'] ?? '');

    if (empty($phone) || empty($password) || empty($confirm)) {
        $error = 'Please fill in all required fields.';
    } elseif (strlen($password) < 4) {
        $error = 'Password must be at least 4 characters.';
    } elseif ($password !== $confirm) {
        $error = 'Passwords do not match.';
    } else {
        // Check if phone already exists
        $stmt = $conn->prepare("SELECT id FROM users WHERE phone = ?");
        $stmt->bind_param("s", $phone);
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows > 0) {
            $error = 'Phone number already registered.';
        } else {
            $hashed     = password_hash($password, PASSWORD_DEFAULT);
$referred_by = null;

// Look up the referrer's user ID from their referral_code
if (!empty($invite)) {
    $ref_stmt = $conn->prepare("SELECT id FROM users WHERE referral_code = ?");
    $ref_stmt->bind_param("s", $invite);
    $ref_stmt->execute();
    $ref_stmt->bind_result($referrer_id);
    if ($ref_stmt->fetch()) {
        $referred_by = $referrer_id;
    }
    $ref_stmt->close();
}

$stmt2 = $conn->prepare("INSERT INTO users (phone, password, invitation_code, referred_by) VALUES (?, ?, ?, ?)");
$stmt2->bind_param("sssi", $phone, $hashed, $invite, $referred_by);
if ($stmt2->execute()) {
    $success = true;
} else {
    $error = 'Registration failed. Please try again.';
}
        }
        $stmt->close();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Register - WFM</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
    background: linear-gradient(160deg, #b8cba8 0%, #a8bc96 40%, #8faa7a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-bar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 18px 20px 0;
  }

  .lang-btn {
    background: none;
    border: none;
    color: #4a5a3a;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
  }

  .page-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 30px 22px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h1 {
    font-size: 26px;
    font-weight: 800;
    color: #1a2a0a;
    text-align: center;
    margin-bottom: 36px;
    letter-spacing: -0.3px;
  }

  .form-group {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 58px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .form-group .icon {
    margin-right: 12px;
    display: flex;
    align-items: center;
  }

  .form-group .icon svg {
    width: 22px;
    height: 22px;
  }

  .form-group input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
    background: transparent;
    font-family: inherit;
  }

  .form-group input::placeholder {
    color: #aaa;
    font-size: 14px;
  }

  .msg {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    text-align: center;
  }
  .msg.error   { background: #fde8e8; color: #c0392b; }
  .msg.success { background: #e8f8e8; color: #196619; }
  .msg.success a { color: #196619; }

  .register-btn {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #3ecf8e 0%, #3b9de8 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(62,207,142,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .register-btn:active { opacity: 0.9; transform: scale(0.99); }

  .care-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 68px;
    pointer-events: none;
  }

  .online-service {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    gap: 6px;
    color: #4a5a3a;
    font-size: 12px;
    cursor: pointer;
  }

  .online-service img {
    height: 28px;
  }
</style>
</head>
<body>

<div class="top-bar">
  <button class="lang-btn">Select Language</button>
</div>

<div class="page-wrapper">
  <h1>Welcome to Register</h1>

  <?php if ($error): ?>
    <div class="msg error"><?= htmlspecialchars($error) ?></div>
  <?php endif; ?>
  <?php if ($success): ?>
  <div id="successOverlay" style="
    position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;
    display:flex;align-items:center;justify-content:center;padding:24px
  ">
    <div style="
      background:#fff;border-radius:24px;padding:36px 28px;text-align:center;
      max-width:320px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.2);
      animation:popIn .35s ease
    ">
      <div style="font-size:64px;margin-bottom:12px">🎉</div>
      <h2 style="font-size:22px;font-weight:800;color:#1a2a0a;margin-bottom:8px">Congratulations!</h2>
      <p style="font-size:14px;color:#666;line-height:1.6;margin-bottom:20px">
        Your account has been created successfully.<br>Welcome to <strong>WFM</strong>!
      </p>
      <div style="
        background:linear-gradient(90deg,#3ecf8e,#3b9de8);
        color:#fff;border-radius:30px;padding:10px 28px;
        font-size:13px;font-weight:700;display:inline-block
      ">Redirecting you now…</div>
    </div>
  </div>
  <style>
    @keyframes popIn {
      from { transform: scale(.7); opacity: 0; }
      to   { transform: scale(1);  opacity: 1; }
    }
  </style>
  <script>
    setTimeout(() => { window.location.href = 'home.php'; }, 2800);
  </script>
<?php endif; ?>

  <form method="POST" style="width:100%">
    <!-- Phone -->
    <div class="form-group">
      <span class="icon">
        <svg viewBox="0 0 24 24" fill="#5b4fcf">
          <path d="M12 12c2.7 0 5-2.3 5-5S14.7 2 12 2 7 4.3 7 7s2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/>
        </svg>
      </span>
      <input type="tel" name="phone" placeholder="Enter Phone Number" value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>">
    </div>

    <!-- Password -->
    <div class="form-group">
      <span class="icon">
        <svg viewBox="0 0 24 24" fill="#5b4fcf">
          <path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 1 1 6.2 0v2z"/>
        </svg>
      </span>
      <input type="password" name="password" placeholder="Enter Login Password" minlength="4">
    </div>

    <!-- Confirm Password -->
    <div class="form-group">
      <span class="icon">
        <svg viewBox="0 0 24 24" fill="#5b4fcf">
          <path d="M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 1 1 6.2 0v2z"/>
        </svg>
      </span>
      <input type="password" name="confirm_password" placeholder="Confirm Your Password" minlength="4">
    </div>

    <!-- Invitation Code -->
    <div class="form-group">
      <input type="text" name="invitation_code" placeholder="Enter Invitation Code" value="<?= htmlspecialchars($_POST['invitation_code'] ?? $_GET['invitecode'] ?? '') ?>" style="margin-left:0">
    </div>

    <button type="submit" class="register-btn">
      Register Now
      <img src="care.png" class="care-img" alt="">
    </button>
  </form>
<div style="text-align:center;margin-top:18px;font-size:14px;color:#4a5a3a">
    Already have an account? 
    <a href="login.php" style="color:#5b4fcf;font-weight:700;text-decoration:none">Login here</a>
  </div>
  <a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="online-service">
    <img src="care.png" alt="Online Service">
    Online Service
  </a>
</div>

</body>
</html>