<?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 = '';

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

    if (empty($phone) || empty($password)) {
        $error = 'Please enter your phone number and password.';
    } elseif (strlen($password) < 4) {
        $error = 'Password must be at least 4 characters.';
    } else {
        $stmt = $conn->prepare("SELECT id, password FROM users WHERE phone = ?");
        $stmt->bind_param("s", $phone);
        $stmt->execute();
        $stmt->store_result();
        $stmt->bind_result($user_id, $hashed);
        $stmt->fetch();

        if ($stmt->num_rows > 0 && password_verify($password, $hashed)) {
            $_SESSION['user_id'] = $user_id;
            $_SESSION['phone']   = $phone;

            // Remember me
            if (!empty($_POST['remember'])) {
                setcookie('wfm_phone', $phone, time() + (86400 * 30), "/");
            }

            header('Location: home.php');
            exit;
        } else {
            $error = 'Invalid phone number or password.';
        }
        $stmt->close();
    }
}

// Pre-fill from cookie
$remembered_phone = $_COOKIE['wfm_phone'] ?? '';
?>
<!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>Login - 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;
  }

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

  /* Logo */
  .logo-wrap {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-wrap svg {
    width: 90px;
    height: 90px;
  }

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

  .form-group {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 60px;
    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;
  }

  .eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: #aaa;
  }

  .remember-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 0 2px;
  }

  .remember-left {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .custom-check {
    width: 22px;
    height: 22px;
    background: #5b4fcf;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-check svg {
    width: 13px;
    height: 13px;
  }

  .remember-left span {
    font-size: 14px;
    color: #333;
  }

  input[type="checkbox"]#remember {
    display: none;
  }

  .care-corner {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .care-corner img {
    height: 52px;
  }

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

  .login-btn {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #3ecf8e 0%, #3b9de8 100%);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(62,207,142,0.35);
    transition: opacity .15s, transform .1s;
  }

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

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

  .online-service img {
    height: 28px;
  }

  .no-account {
    text-align: center;
    margin-top: 22px;
    font-size: 15px;
    color: #333;
  }

  .no-account a {
    color: #5b4fcf;
    font-weight: 600;
    text-decoration: none;
  }

  .no-account a:hover { text-decoration: underline; }
</style>
</head>
<body>

<div class="page-wrapper">

  <!-- WFM Globe Logo (SVG recreation) -->
  <div class="logo-wrap">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="globe" cx="40%" cy="38%" r="60%">
          <stop offset="0%" stop-color="#5bc8d8"/>
          <stop offset="50%" stop-color="#2a8cbf"/>
          <stop offset="100%" stop-color="#1a5a8a"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="46" fill="url(#globe)" opacity="0.92"/>
      <!-- continents-like shapes -->
      <ellipse cx="38" cy="42" rx="18" ry="11" fill="#2db88a" opacity="0.75" transform="rotate(-20 38 42)"/>
      <ellipse cx="62" cy="56" rx="12" ry="8" fill="#3ecf8e" opacity="0.65" transform="rotate(15 62 56)"/>
      <ellipse cx="46" cy="62" rx="9" ry="5" fill="#2db88a" opacity="0.55" transform="rotate(-10 46 62)"/>
      <!-- WFM text -->
      <text x="50" y="56" text-anchor="middle" font-family="'Segoe UI',Arial,sans-serif" font-weight="900" font-size="20" fill="#fff" letter-spacing="1">WFM</text>
      <!-- shine -->
      <ellipse cx="38" cy="33" rx="14" ry="7" fill="#fff" opacity="0.12"/>
    </svg>
  </div>

  <h1>Welcome to WFM</h1>

  <?php if ($error): ?>
    <div class="msg"><?= htmlspecialchars($error) ?></div>
  <?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" id="phone" placeholder="Enter Phone Number"
             value="<?= htmlspecialchars($remembered_phone ?: ($_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" id="password" placeholder="Enter Login Password" minlength="4">
      <button type="button" class="eye-btn" onclick="togglePassword()">
        <!-- closed eye -->
        <svg id="eyeIcon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#aaa" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
          <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
      </button>
    </div>

    <!-- Remember -->
    <div class="remember-row">
      <label class="remember-left" for="remember">
        <input type="checkbox" id="remember" name="remember" <?= $remembered_phone ? 'checked' : '' ?>>
        <span class="custom-check">
          <svg viewBox="0 0 14 14" fill="none">
            <polyline points="2,7 6,11 12,3" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <span>Remember Username/Password</span>
      </label>

      <a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="care-corner">
        <img src="care.png" alt="Online Service">
      </a>
    </div>

    <button type="submit" class="login-btn">Login Now</button>
  </form>

  <p class="no-account">No Account? <a href="register.php">Register</a></p>

  <a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="online-service">
    <img src="care.png" alt="">
    Online Service
  </a>

</div>

<script>
function togglePassword() {
  const pwd = document.getElementById('password');
  const icon = document.getElementById('eyeIcon');
  if (pwd.type === 'password') {
    pwd.type = 'text';
    icon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
    icon.setAttribute('fill','#aaa');
    icon.setAttribute('stroke','none');
  } else {
    pwd.type = 'password';
    icon.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
    icon.setAttribute('fill','none');
    icon.setAttribute('stroke','#aaa');
  }
}
</script>

</body>
</html>