<?php
session_start();
if(isset($_SESSION['user_id'])){
    header('Location: /stile-lpg/customer/dashboard.php');
    exit;
}

$pageTitle   = 'Register';
$currentPage = 'register';
$error  = '';
$success = false;

if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['register'])){
    $name     = trim($_POST['name'] ?? '');
  $email    = strtolower(trim($_POST['email'] ?? ''));
    $phone    = trim($_POST['phone'] ?? '');
    $address  = trim($_POST['address'] ?? '');
    $password = $_POST['password'] ?? '';
    $confirm  = $_POST['confirm_password'] ?? '';

    if(!$name || !$email || !$password){
        $error = 'Please fill in all required fields.';
    } elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error = 'Please enter a valid email address.';
    } elseif(strlen($password) < 6){
        $error = 'Password must be at least 6 characters.';
    } elseif($password !== $confirm){
        $error = 'Passwords do not match.';
    } else {
  require_once __DIR__ . '/backend/config/database.php';
  $db = getDB();
        $chk = $db->prepare("SELECT id FROM users WHERE LOWER(email)=LOWER(?)");
        $chk->execute([$email]);
        if($chk->fetch()){
            $error = 'An account with this email already exists.';
        } else {
            $id   = 'usr_' . bin2hex(random_bytes(8));
            $hash = password_hash($password, PASSWORD_BCRYPT);
            $stmt = $db->prepare("INSERT INTO users(id,name,email,phone,address,password,role,is_active,created_at)VALUES(?,?,?,?,?,?,'customer',1,NOW())");
            try {
                $stmt->execute([$id,$name,$email,$phone,$address,$hash]);
                // Auto-login
                require_once __DIR__ . '/backend/middleware/auth.php';
                $token = jwtCreate(['user_id'=>$id,'role'=>'customer']);
                $_SESSION['user_id']   = $id;
                $_SESSION['user_name'] = $name;
                $_SESSION['user_email']= $email;
                $_SESSION['user_role'] = 'customer';
                $_SESSION['jwt_token'] = $token;
                header('Location: /stile-lpg/customer/dashboard.php');
                exit;
            } catch(Exception $e){
                $error = 'Registration failed. Please try again.';
            }
        }
    }
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Register — Stiles LPG</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;min-height:100vh;display:flex}
a{text-decoration:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:.9rem;width:100%;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:14px;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff;color:#0f172a}
input:focus,select:focus,textarea:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;border:none;padding:.85rem 1.5rem;border-radius:14px;font-weight:800;font-size:.9rem;cursor:pointer;transition:all .2s;width:100%;box-shadow:0 4px 16px rgba(249,115,22,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(249,115,22,.5)}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:.85rem 1rem;border-radius:12px;font-size:.875rem;font-weight:500}
#reg-brand-panel{display:none;flex:1;background:linear-gradient(145deg,#0f172a 0%,#1e293b 40%,#064e3b 100%);padding:3rem;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
@media(min-width:900px){#reg-brand-panel{display:flex}}
#reg-brand-panel::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(34,197,94,.15) 0%,transparent 70%)}
#reg-form-panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2.5rem;background:#f8f9fb;min-height:100vh;max-width:520px;overflow-y:auto}
@media(max-width:900px){#reg-form-panel{max-width:100%}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
</style>
</head>
<body>

<!-- Brand panel -->
<div id="reg-brand-panel">
  <div style="position:relative;z-index:1">
    <a href="/stile-lpg/index.php" style="display:inline-flex;align-items:center">
      <div style="display:flex;align-items:center">
        <img src="/stile-lpg/backend/uploads/footer-image.png" alt="Stiles Energy Logo" style="width:140px;height:auto;object-fit:contain">
      </div>
    </a>
  </div>
  <div style="position:relative;z-index:1">
    <div style="display:inline-flex;align-items:center;gap:.5rem;background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.35);border-radius:50px;padding:.4rem 1rem;margin-bottom:1.5rem">
      <svg width="12" height="12" fill="none" stroke="#4ade80" stroke-width="2.4" viewBox="0 0 24 24"><polyline stroke-linecap="round" stroke-linejoin="round" points="20 6 9 17 4 12"/></svg>
      <span style="color:#4ade80;font-size:.78rem;font-weight:700;letter-spacing:.06em">FREE TO JOIN</span>
    </div>
    <h2 style="color:#fff;font-weight:900;font-size:2rem;line-height:1.2;margin-bottom:1rem">Join Thousands of<br>Happy <span style="background:linear-gradient(90deg,#22c55e,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent">Customers</span></h2>
    <p style="color:#94a3b8;font-size:.95rem;line-height:1.7;margin-bottom:2rem">Create your free account and enjoy fast, reliable LPG delivery with cash on delivery payment.</p>
    <div style="display:flex;flex-direction:column;gap:.85rem">
      <?php $perks = ['Easy online ordering in 60 seconds','Real-time delivery tracking','Order history and reorder in one click','Exclusive deals for registered customers'];
      foreach($perks as $p): ?>
      <div style="display:flex;align-items:center;gap:.75rem">
        <div style="width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0">✓</div>
        <span style="color:#cbd5e1;font-size:.875rem"><?= $p ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <div style="position:relative;z-index:1;display:flex;gap:2rem">
    <?php $rStats=[['500+','Members'],['Free','Sign-up'],['Instant','Access']];
    foreach($rStats as $rs): ?>
    <div>
      <div style="color:#22c55e;font-weight:900;font-size:1.5rem"><?= $rs[0] ?></div>
      <div style="color:#64748b;font-size:.78rem"><?= $rs[1] ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- Form panel -->
<div id="reg-form-panel">
  <div style="max-width:420px;width:100%;margin:0 auto">
    <a href="/stile-lpg/index.php" style="display:inline-flex;align-items:center;gap:.4rem;color:#64748b;font-size:.85rem;font-weight:600;margin-bottom:2rem">
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15 18-6-6 6-6"/></svg>
      Back to Home
    </a>
    <div style="display:flex;align-items:center;justify-content:center;margin-bottom:1.75rem">
      <img src="/stile-lpg/backend/uploads/logo1.png" alt="Stiles Energy Logo" style="width:90px;height:auto;object-fit:contain">
    </div>
    <h1 style="color:#0f172a;font-weight:900;font-size:1.55rem;margin-bottom:.35rem">Create Your Account</h1>
    <p style="color:#64748b;font-size:.875rem;margin-bottom:1.75rem">Join us and get gas delivered to your door</p>

    <?php if($error): ?>
    <div class="alert-error" style="margin-bottom:1.5rem"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <div style="background:#fff;border-radius:20px;padding:2rem;box-shadow:0 4px 24px rgba(0,0,0,.07);border:1px solid #f1f5f9">
      <form method="POST" action="/stile-lpg/register.php">
        <div style="margin-bottom:1rem" class="form-row">
          <div>
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Full Name *</label>
            <input type="text" name="name" required placeholder="Jane Doe" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
          </div>
          <div>
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Phone</label>
            <input type="tel" name="phone" placeholder="+234 800 000 0000" value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>" pattern="[0-9+\s\-()]+" title="Please enter a valid phone number (numbers, +, -, spaces, parentheses only)" oninput="this.value = this.value.replace(/[^0-9+\s\-()]/g, '')">
          </div>
        </div>
        <div style="margin-bottom:1rem">
          <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Email Address *</label>
          <input type="email" name="email" required placeholder="you@example.com" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
        </div>
        <div style="margin-bottom:1rem">
          <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Delivery Address</label>
          <input type="text" name="address" placeholder="Your default delivery address" value="<?= htmlspecialchars($_POST['address'] ?? '') ?>">
        </div>
        <div style="margin-bottom:1rem" class="form-row">
          <div>
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Password *</label>
            <input type="password" name="password" required placeholder="Min. 6 characters">
          </div>
          <div>
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Confirm *</label>
            <input type="password" name="confirm_password" required placeholder="Repeat password">
          </div>
        </div>
        <div style="margin-bottom:1.5rem">
          <label style="display:flex;align-items:flex-start;gap:.75rem;cursor:pointer">
            <input type="checkbox" required style="width:18px;height:18px;flex-shrink:0;margin-top:.1rem;accent-color:#f97316">
            <span style="color:#64748b;font-size:.82rem;line-height:1.5">I agree to the <a href="#" style="color:#f97316;font-weight:700">Terms of Service</a> and <a href="#" style="color:#f97316;font-weight:700">Privacy Policy</a></span>
          </label>
        </div>
        <button type="submit" name="register" value="1" class="btn-primary">
          <svg width="15" height="15" fill="none" stroke="#fff" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/><path stroke-linecap="round" stroke-linejoin="round" d="m12 5 7 7-7 7"/></svg>
          Create Account
        </button>
      </form>
    </div>

    <p style="text-align:center;color:#64748b;font-size:.875rem;margin-top:1.5rem">
      Already have an account? <a href="/stile-lpg/login.php" style="color:#f97316;font-weight:700">Sign in →</a>
    </p>
  </div>
</div>

</body>
</html>
