<?php
// signup-email.php — Dabil "Create Account" screen
// Step 1 of the email signup flow: collect + validate email, then call
// send-otp.php (AJAX) to issue a 6-digit verification code.
// On success the user is sent to verify-email.php to enter the code.

session_start();

// If already signed in, skip straight to the dashboard.
if (isset($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'customer') {
    header('Location: dashboard.php');
    exit;
}
?>
<!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;
  --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:22px;line-height:1.5}

.f-label{display:block;font-size:.84rem;font-weight:700;color:var(--text);margin-bottom:8px}
.field{position:relative;margin-bottom:6px}
.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)}
.note{font-size:.78rem;color:var(--text-light);margin:8px 2px 20px;line-height:1.5}

.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}
.btn-primary:active{background:var(--primary-dark);transform:scale(.99)}
.btn-primary:disabled{opacity:.7}
.spin{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.divider{display:flex;align-items:center;gap:14px;margin:22px 2px;color:var(--text-light)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{font-size:.82rem;font-weight:600}

.social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border:1.5px solid var(--border);background:#fff;border-radius:14px;font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--text);cursor:pointer;margin-bottom:12px;transition:background .15s,transform .12s}
.social:active{background:var(--bg);transform:scale(.99)}
.social svg{width:20px;height:20px;flex-shrink:0}

.signin-row{text-align:center;font-size:.88rem;color:var(--text-muted);margin-top:14px}
.signin-row a{color:var(--primary);font-weight:700}

.form-error,.form-success{font-size:.85rem;border-radius:12px;padding:12px 14px;margin-bottom:16px;text-align:center}
.form-error{background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}
.form-success{background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D}
.form-error a{color:#B91C1C;font-weight:700;text-decoration:underline}

.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 24px);left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;padding:11px 20px;border-radius:30px;font-size:.82rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s;max-width:86%;text-align:center}
</style>
</head>
<body>

<div class="auth-wrap">
  <div class="auth-card">
    <div class="auth-top">
      <a href="signin.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">Enter your email to get started — we'll send a 6-digit code to verify it's you.</p>

    <div id="formMessage"></div>

    <form id="emailForm" autocomplete="off">
      <label class="f-label" for="email">Email</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="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/><polyline points="22 6 12 13 2 6"/></svg></span>
        <input type="email" id="email" name="email" placeholder="Enter your email" required autocomplete="email">
      </div>
      <p class="note">You'll set your name, phone and password on the next step after verifying your email.</p>

      <button type="submit" class="btn-primary" id="submitBtn">
        <span id="btnTxt">Continue</span>
        <div class="spin" id="spinner"></div>
      </button>
    </form>

    <div class="divider"><span>or use</span></div>

    <a href="auth/google.php" class="social">
      <svg viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.14 0 5.95 1.08 8.17 2.84l6.1-6.1C34.46 3.09 29.56 1 24 1 14.82 1 7.07 6.48 3.64 14.22l7.1 5.52C12.4 13.67 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.52 24.5c0-1.64-.15-3.22-.42-4.74H24v8.98h12.67c-.55 2.94-2.2 5.43-4.68 7.1l7.18 5.57C43.27 37.78 46.52 31.6 46.52 24.5z"/><path fill="#FBBC05" d="M10.74 28.26A14.46 14.46 0 019.5 24c0-1.48.25-2.91.68-4.26l-7.1-5.52A23.94 23.94 0 001 24c0 3.87.93 7.53 2.56 10.77l7.18-6.51z"/><path fill="#34A853" d="M24 47c5.56 0 10.22-1.84 13.63-5l-7.18-5.57c-1.84 1.23-4.2 1.97-6.45 1.97-6.26 0-11.6-4.17-13.5-9.8l-7.18 6.51C7.07 41.52 14.82 47 24 47z"/></svg>
      Continue with Google
    </a>

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

<div class="toast" id="toast"></div>

<script>
const form      = document.getElementById('emailForm');
const submitBtn = document.getElementById('submitBtn');
const btnTxt    = document.getElementById('btnTxt');
const spinner   = document.getElementById('spinner');
const msgBox    = document.getElementById('formMessage');

function showMessage(html, type) { msgBox.innerHTML = '<div class="form-' + type + '">' + html + '</div>'; }
function clearMessage() { msgBox.innerHTML = ''; }
function setLoading(isLoading) {
  submitBtn.disabled = isLoading;
  btnTxt.style.display  = isLoading ? 'none' : 'inline';
  spinner.style.display = isLoading ? 'block' : 'none';
}

form.addEventListener('submit', async function (e) {
  e.preventDefault();
  clearMessage();
  const email = document.getElementById('email').value.trim();
  if (!email) return;
  setLoading(true);
  try {
    const res = await fetch('send-otp.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({ email: email, purpose: 'signup' })
    });
    const data = await res.json();
    if (res.ok && data.success) {
      window.location.href = 'verify-email.php?email=' + encodeURIComponent(email);
      return;
    }
    if (res.status === 409) {
      showMessage('An account with this email already exists. <a href="signin.php">Sign in instead</a>.', 'error');
    } else {
      showMessage(data.message || 'Something went wrong. Please try again.', 'error');
    }
  } catch (err) {
    showMessage('Network error. Please check your connection and try again.', 'error');
  } finally {
    setLoading(false);
  }
});

const toast = document.getElementById('toast');
document.