<?php
session_start();
$allowed = ['restaurant_admin','staff','waiter'];
if (isset($_SESSION['user_id']) && in_array($_SESSION['role']??'', $allowed)) {
    header("Location: dashboard.php"); exit;
}

include("config/db.php");
$error = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email    = trim($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';
    if ($email && $password) {
        $stmt = $conn->prepare("SELECT u.*,r.name as restaurant_name,r.status as restaurant_status
            FROM users u
            LEFT JOIN restaurants r ON u.restaurant_id=r.id
            WHERE u.email=? AND u.role IN('restaurant_admin','staff','waiter') AND u.status=1");
        $stmt->bind_param("s",$email); $stmt->execute();
        $user = $stmt->get_result()->fetch_assoc();
        if ($user && password_verify($password, $user['password'])) {
            if (!$user['restaurant_status']) { $error = "Your restaurant account has been deactivated. Contact support."; }
            else {
                $_SESSION['user_id']   = $user['id'];
                $_SESSION['role']      = $user['role'];
                $_SESSION['name']      = $user['name'];
                $_SESSION['rest_id']   = $user['restaurant_id'];
                $_SESSION['rest_name'] = $user['restaurant_name'];
                header("Location: dashboard.php"); exit;
            }
        } else { $error = "Invalid email or password."; }
    } else { $error = "Please fill in all fields."; }
}
$err_param = $_GET['err'] ?? '';
if ($err_param === 'inactive') $error = "This restaurant account has been deactivated.";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In — Dabil Restaurant Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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;
  --bg:#F5F7F8;--white:#FFFFFF;
  --text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --border:#E2E8F0;--error:#EF4444;--error-bg:#FEF2F2;
  --warning:#F59E0B;--warning-bg:#FFFBEB;
  --font:'Plus Jakarta Sans',sans-serif;
}
body{font-family:var(--font);background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.wrap{width:100%;max-width:420px}
.card{background:var(--white);border-radius:20px;padding:44px 40px;box-shadow:0 8px 40px rgba(0,0,0,.08);animation:up .4s ease both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:480px){.card{padding:32px 24px}}
.top{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.role-tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:var(--primary);color:#fff;padding:2px 8px;border-radius:20px;margin-left:4px}
h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.sub{font-size:.875rem;color:var(--text-muted);margin-bottom:32px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:7px}
.input-wrap{position:relative}
.input-wrap svg.icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--text-light);fill:none;pointer-events:none}
.input-wrap input{width:100%;height:48px;border:1.5px solid var(--border);border-radius:11px;background:var(--bg);padding:0 44px;font-size:.875rem;color:var(--text);font-family:var(--font);outline:none;transition:all .2s}
.input-wrap input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(34,90,227,.12)}
.input-wrap input::placeholder{color:var(--text-light)}
.eye-btn{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-light)}
.eye-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.alert{padding:11px 14px;border-radius:10px;font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.alert svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0}
.alert-error{background:var(--error-bg);color:var(--error);border:1px solid #FECACA}
.btn-submit{width:100%;height:50px;background:var(--primary);color:#fff;border:none;border-radius:11px;font-size:.9rem;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .25s;box-shadow:0 8px 24px rgba(34,90,227,.3);margin-top:8px}
.btn-submit:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:24px;font-size:.75rem;color:var(--text-muted)}
.security-note svg{width:13px;height:13px;stroke:currentColor;fill:none}
</style>
</head>
<body>
<div class="wrap">
  <div class="card">
    <div class="top">
      <img src="assets/img/dlogo.png" alt="Dabil" style="height:34px;width:auto;display:block">
      <span class="role-tag">Restaurant</span>
    </div>

    <h1>Restaurant Sign In</h1>
    <p class="sub">Access your restaurant dashboard</p>

    <?php if ($error): ?>
    <div class="alert alert-error">
      <svg viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
      <?php echo htmlspecialchars($error); ?>
    </div>
    <?php endif; ?>

    <form method="POST" id="loginForm" autocomplete="on">
      <div class="field">
        <label>Email Address</label>
        <div class="input-wrap">
          <svg class="icon" viewBox="0 0 24 24" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 01-2.06 0L2 7"/></svg>
          <input type="email" name="email" placeholder="you@email.com"
                 value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>"
                 required autocomplete="email">
        </div>
      </div>
      <div class="field">
        <label>Password</label>
        <div class="input-wrap">
          <svg class="icon" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          <input type="password" id="pw" name="password" placeholder="••••••••" required autocomplete="current-password">
          <button type="button" class="eye-btn" onclick="togglePw()" aria-label="Toggle password visibility">
            <svg viewBox="0 0 24 24" stroke-width="2"><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>
          </button>
        </div>
      </div>
      <button type="submit" class="btn-submit" id="submitBtn">
        <span id="btnTxt">Sign In</span>
        <svg id="btnArrow" viewBox="0 0 24 24" stroke-width="2.5" fill="none" stroke="currentColor" stroke-linecap="round" width="16" height="16"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        <div class="spinner" id="spinner"></div>
      </button>
    </form>

    <div class="security-note">
      <svg viewBox="0 0 24 24" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      Access provided by your restaurant administrator
    </div>
  </div>
</div>
<script>
function togglePw(){
  const p = document.getElementById('pw');
  p.type = p.type === 'password' ? 'text' : 'password';
}
document.getElementById('loginForm').addEventListener('submit', function(){
  document.getElementById('btnTxt').style.display='none';
  document.getElementById('btnArrow').style.display='none';
  document.getElementById('spinner').style.display='block';
  document.getElementById('submitBtn').disabled=true;
});
</script>
</body>
</html>
