<?php
// profile-setup.php — Dabil "Create Account" details step
// Shown after OTP verification during signup.
// Submits to complete-profile.php (full name, phone, password).

session_start();

if (isset($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'customer') {
    header('Location: dashboard.php');
    exit;
}

if (empty($_SESSION['signup_email']) || empty($_SESSION['signup_email_verified'])) {
    header('Location: signup-email.php');
    exit;
}

$verifiedEmail = $_SESSION['signup_email'];
$profileError  = $_SESSION['profile_error'] ?? '';
unset($_SESSION['profile_error']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Create Account — Dabil</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#225AE3;--primary-dark:#1a47b8;--primary-bg:#EEF3FD;
  --text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --bg:#EDF0F5;--border:#E2E8F0;--field-bg:#F7F9FC;--success:#10B981;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
a{text-decoration:none}
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 24px)}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:26px 22px;box-shadow:0 12px 40px rgba(15,23,42,.08)}
.auth-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.auth-back{width:34px;height:34px;border-radius:50%;background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-card h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.auth-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:18px;line-height:1.5}

.verified{display:inline-flex;align-items:center;gap:6px;background:var(--primary-bg);color:var(--primary);font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:20px;margin-bottom:18px}

.f-label{display:block;font-size:.84rem;font-weight:700;color:var(--text);margin-bottom:8px}
.field{position:relative;margin-bottom:16px}
.field .f-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-light);display:flex}
.field input{width:100%;height:54px;border:1.5px solid var(--border);background:var(--field-bg);border-radius:14px;padding:0 16px 0 46px;font-size:max(16px,.95rem);font-family:var(--font);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(34,90,227,.1)}
.field input::placeholder{color:var(--text-light)}
.field.haspw input{padding-right:48px}
.field .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:none;color:var(--text-light);display:flex;align-items:center;justify-content:center;cursor:pointer}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:none;border-radius:16px;background:var(--primary);color:#fff;font-family:var(--font);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 8px 22px rgba(34,90,227,.3);transition:background .15s,transform .12s;margin-top:6px}
.btn-primary:active{background:var(--primary-dark);transform:scale(.99)}

.form-error{font-size:.85rem;border-radius:12px;padding:12px 14px;margin-bottom:16px;text-align:center;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}
.signin-row{text-align:center;font-size:.88rem;color:var(--text-muted);margin-top:16px}
.signin-row a{color:var(--text);font-weight:700}
</style>
</head>
<body>

<div class="auth-wrap">
  <div class="auth-card">
    <div class="auth-top">
      <a href="signup-email.php" class="auth-back" aria-label="Back">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
      </a>
    </div>

    <h1>Create Account</h1>
    <p class="auth-sub">Just a few details to finish setting up your Dabil account.</p>

    <span class="verified">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      <?php echo htmlspecialchars($verifiedEmail, ENT_QUOTES, 'UTF-8'); ?> verified
    </span>

    <?php if ($profileError): ?><div class="form-error"><?php echo htmlspecialchars($profileError, ENT_QUOTES, 'UTF-8'); ?></div><?php endif; ?>

    <form action="complete-profile.php" method="POST" id="setupForm" autocomplete="off">
      <input type="hidden" name="email" value="<?php echo htmlspecialchars($verifiedEmail, ENT_QUOTES, 'UTF-8'); ?>">

      <label class="f-label" for="full_name">Full Name</label>
      <div class="field">
        <span class="f-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
        <input type="text" id="full_name" name="full_name" placeholder="Enter your full name" required>
      </div>

      <label class="f-label" for="phone">Phone Number</label>
      <div class="field">
        <span class="f-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg></span>
        <input type="tel" id="phone" name="phone" placeholder="+234 800 000 0000" required>
      </div>

      <label class="f-label" for="password">Password</label>
      <div class="field haspw">
        <span class="f-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span>
        <input type="password" id="password" name="password" placeholder="Create a password (min. 8)" minlength="8" required>
        <button type="button" class="eye" data-target="password" aria-label="Show password"></button>
      </div>

      <label class="f-label" for="confirm">Confirm Password</label>
      <div class="field haspw">
        <span class="f-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span>
        <input type="password" id="confirm" placeholder="Re-enter your password" minlength="8" required>
        <button type="button" class="eye" data-target="confirm" aria-label="Show password"></button>
      </div>

      <div class="form-error" id="matchErr" style="display:none">Passwords do not match.</div>

      <button type="submit" class="btn-primary">Create Account</button>
    </form>

    <p class="signin-row">Already have an account? <a href="signin.php">Sign In</a></p>
  </div>
</div>

<script>
(function () {
  const open = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>';
  const off = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>';
  document.querySelectorAll('.eye').forEach(btn => {
    btn.innerHTML = open;
    btn.addEventListener('click', () => {
      const inp = document.getElementById(btn.dataset.target);
      const s = inp.type === 'password';
      inp.type = s ? 'text' : 'password';
      btn.innerHTML = s ? off : open;
    });
  });

  const f = document.getElementById('setupForm'), pw = document.getElementById('password'), cf = document.getElementById('confirm'), err = document.getElementById('matchErr');
  f.addEventListener('submit', e => {
    if (pw.value !== cf.value) { e.preventDefault(); err.style.display = 'block'; cf.focus(); }
    else { err.style.display = 'none'; }
  });
})();
</script>

</body>
</html>
