<?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>Staff Login — Dabil Restaurant</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;--font:'Plus Jakarta Sans',sans-serif;}
body{font-family:var(--font);background:var(--bg);min-height:100vh;display:flex;align-items:stretch}
.split{display:flex;width:100%;min-height:100vh}
.left{flex:0 0 50%;background:linear-gradient(145deg,#1a3dbd 0%,var(--primary) 60%,#4f79ea 100%);display:flex;align-items:center;justify-content:center;padding:60px 48px;position:relative;overflow:hidden}
@media(max-width:860px){.left{display:none}}
.left-circles span{position:absolute;border-radius:50%;background:rgba(255,255,255,.05)}
.left-circles span:nth-child(1){width:360px;height:360px;top:-80px;right:-80px}
.left-circles span:nth-child(2){width:220px;height:220px;bottom:-50px;left:-50px}
.left-circles span:nth-child(3){width:120px;height:120px;top:40%;right:15%}
.left-content{position:relative;z-index:1;color:#fff;max-width:400px}
.left-logo{display:flex;align-items:center;gap:12px;margin-bottom:60px}
.left-logo .ico{width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.left-logo .ico svg{width:22px;height:22px;stroke:#fff;fill:none}
.left-logo span{font-size:1.25rem;font-weight:800;letter-spacing:-0.02em}
.left-content h1{font-size:2.4rem;font-weight:800;line-height:1.15;letter-spacing:-0.03em;margin-bottom:18px}
.left-content h1 em{font-style:normal;color:rgba(255,255,255,.5)}
.left-content p{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:44px}
.feat-list{display:flex;flex-direction:column;gap:12px}
.feat-list li{display:flex;align-items:center;gap:12px;font-size:.85rem;color:rgba(255,255,255,.75);list-style:none}
.feat-list li::before{content:'';width:7px;height:7px;background:rgba(255,255,255,.5);border-radius:50%;flex-shrink:0}
.right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 32px;background:var(--white)}
.form-card{width:100%;max-width:400px;animation:up .4s ease both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mobile-logo{display:none;align-items:center;gap:10px;margin-bottom:36px}
@media(max-width:860px){.mobile-logo{display:flex}}
.mobile-logo .ico{width:40px;height:40px;background:var(--primary);border-radius:12px;display:flex;align-items:center;justify-content:center}
.mobile-logo .ico svg{width:20px;height:20px;stroke:#fff;fill:none}
.mobile-logo span{font-size:1.1rem;font-weight:800;color:var(--primary);letter-spacing:-0.02em}
h2{font-size:1.65rem;font-weight:800;letter-spacing:-0.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}
.inp-wrap{position:relative}
.inp-wrap .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--text-light);fill:none;pointer-events:none}
.inp-wrap input{width:100%;height:50px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);padding:0 46px;font-size:.875rem;color:var(--text);font-family:var(--font);outline:none;transition:all .2s}
.inp-wrap input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(34,90,227,.1)}
.inp-wrap input::placeholder{color:var(--text-light)}
.eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-light)}
.eye svg{width:16px;height:16px;stroke:currentColor;fill:none}
.err-box{padding:11px 15px;border-radius:10px;background:#FEF2F2;color:var(--error);border:1px solid #FECACA;font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.err-box svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0}
.btn-login{width:100%;height:50px;background:var(--primary);color:#fff;border:none;border-radius:12px;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,.2);margin-top:8px}
.btn-login:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{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}
.note{margin-top:24px;font-size:.75rem;color:var(--text-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.note svg{width:12px;height:12px;stroke:currentColor;fill:none}
</style>
</head>
<body>
<div class="split">
  <div class="left">
    <div class="left-circles"><span></span><span></span><span></span></div>
    <div class="left-content">
      <div class="left-logo">
        <img src="assets/img/dlogo.png" alt="Dabil" style="height:34px;width:auto;display:block;background:#fff;padding:7px 14px;border-radius:12px;box-sizing:content-box">
      </div>
      <h1>Your restaurant,<br><em>fully in control.</em></h1>
      <p>Manage orders, staff, menus, and QR codes — everything your team needs in one place.</p>
      <ul class="feat-list">
        <li>Live order notifications for all staff</li>
        <li>QR code generation per table</li>
        <li>Full menu and category management</li>
        <li>Staff scheduling and shift tracking</li>
        <li>Payment and revenue reporting</li>
      </ul>
    </div>
  </div>
  <div class="right">
    <div class="form-card">
      <div class="mobile-logo">
        <img src="assets/img/dlogo.png" alt="Dabil" style="height:30px;width:auto;display:block">
      </div>
      <h2>Staff Sign In</h2>
      <p class="sub">Enter your credentials to access the portal</p>
      <?php if($error): ?>
      <div class="err-box"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><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="f">
        <div class="field">
          <label>Email Address</label>
          <div class="inp-wrap">
            <svg class="ic" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><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="inp-wrap">
            <svg class="ic" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><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" onclick="document.getElementById('pw').type=document.getElementById('pw').type==='password'?'text':'password'">
              <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="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>
            </button>
          </div>
        </div>
        <button type="submit" class="btn-login" id="sb" onclick="this.disabled=true;document.getElementById('st').style.display='none';document.getElementById('sp').style.display='block';this.form.submit()">
          <span id="st">Sign In</span>
          <div class="spin" id="sp"></div>
        </button>
      </form>
      <p class="note"><svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Access provided by your restaurant administrator</p>
    </div>
  </div>
</div>
</body>
</html>
