<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <?php 
 $db = \App\Core\Database::getInstance();
 $settingsStmt = $db->query(" SELECT * FROM settings");
 $allSettings = $settingsStmt->fetchAll();
 $siteSettings = [];
 foreach ($allSettings as $s) {
 $siteSettings[$s['key_name']] = $s['key_value'];
 }
 ?>
 <title>Staff Access - <?php echo $siteSettings['institute_name'] ?? 'Smart Tuitions'; ?></title>
 
 <script defer src="<?php echo url('assets/vendor/alpinejs/alpine.min.js'); ?>"></script>
 <link rel="stylesheet" href="<?php echo url('assets/vendor/fontawesome/css/all.min.css'); ?>">
 <link rel="stylesheet" href="<?php echo url('assets/css/style.css'); ?>">
</head>
<body class="bg-slate-50 flex items-center justify-center min-h-screen p-6">
 <div class="w-full max-w-[400px]">
 <!-- Compact Logo & Welcome -->
 <div class="text-center mb-8">
 <div class="inline-flex items-center justify-center h-16 w-16 bg-purple-600 rounded-[24px] text-white -100 mb-4 transform hover:rotate-3 transition-transform duration-300">
 <i class="fa-solid fa-user-tie text-2xl"></i>
 </div>
 <h1 class="text-2xl font-black text-slate-900 tracking-tight">Staff Portal Login</h1>
 <p class="text-xs font-medium text-slate-400 mt-1">Operational Access</p>
 </div>

 <!-- Clean Form Card -->
 <div class="bg-white border border-slate-200 rounded-[32px] p-8">
 <div class="mb-6">
 <h2 class="text-base font-bold text-slate-800">Team Sign-in</h2>
 <p class="text-xs font-medium text-slate-500 mt-1">Access your operational workspace and assigned modules.</p>
 </div>

 <?php if($error): ?>
 <div class="bg-red-50 text-red-600 p-3.5 rounded-2xl text-xs font-bold mb-6 border border-red-100 flex items-center gap-2">
 <i class="fa-solid fa-circle-exclamation text-xs"></i>
 <?php echo $error; ?>
 </div>
 <?php endif; ?>

 <form action="<?php echo url('/staff/login'); ?>" method="POST" class="space-y-5">
 <div class="space-y-2">
 <label class="text-xs font-bold text-slate-400 ml-1">Work email</label>
 <div class="relative group">
 <i class="fa-solid fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-purple-600 transition-colors"></i>
 <input name="email" type="email" required autocomplete="username"
 class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:bg-white focus:border-purple-600 focus:ring-4 focus:ring-purple-600/5 outline-none transition-all placeholder:text-slate-300"
 placeholder="staff@example.com">
 </div>
 </div>

 <div class="space-y-2" x-data="{ show: false }">
 <div class="flex items-center justify-between px-1">
 <label class="text-xs font-bold text-slate-400">Password</label>
 <a href="#" class="text-xs font-bold text-purple-600 hover:underline">Help?</a>
 </div>
 <div class="relative group">
 <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-purple-600 transition-colors"></i>
 <input name="password" :type="show ? 'text' : 'password'" required autocomplete="current-password"
 class="w-full pl-11 pr-12 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-900 focus:bg-white focus:border-purple-600 focus:ring-4 focus:ring-purple-600/5 outline-none transition-all placeholder:text-slate-300"
 placeholder="••••••••">
 <button type="button" @click="show = !show" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 hover:text-purple-600 transition-colors">
 <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>

 <button type="submit" class="w-full py-4 bg-purple-600 text-white text-sm font-bold rounded-2xl hover:bg-purple-700 active:scale-[0.98] transition-all mt-2">
 Sign in as staff
 </button>
 </form>
 </div>

 <!-- Quick Help -->
 <div class="mt-8 flex flex-col items-center gap-4">
 <a href="<?php echo url('/'); ?>" class="text-xs font-bold text-slate-400 hover:text-purple-600 transition-colors flex items-center gap-2">
 <i class="fa-solid fa-arrow-left text-[10px]"></i>
 Change gateway
 </a>
 </div>
 </div>
</body>
</html>
