<?php
require_once __DIR__ . '/../config.php';

$error   = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user = trim($_POST['username'] ?? '');
    $pass = trim($_POST['password'] ?? '');
    if ($user && $pass) {
        $db   = getDB();
        
        // 1. Check super admins
        $stmt = $db->prepare("SELECT * FROM admins WHERE username=?");
        $stmt->execute([$user]);
        $admin = $stmt->fetch();
        
        if ($admin && password_verify($pass, $admin['password'])) {
            $_SESSION['admin_logged_in'] = true;
            $_SESSION['admin_id']        = $admin['id'];
            $_SESSION['admin_name']      = $admin['name'];
            $_SESSION['admin_role']      = 'super_admin';
            redirect(SITE_URL . '/admin/index.php');
        } else {
            // 2. Check employees
            $stmtEmp = $db->prepare("SELECT * FROM employees WHERE email=? AND status='active'");
            $stmtEmp->execute([$user]);
            $emp = $stmtEmp->fetch();
            
            if ($emp && password_verify($pass, $emp['password'])) {
                $_SESSION['admin_logged_in'] = true;
                $_SESSION['admin_id']        = 'emp_' . $emp['id'];
                $_SESSION['admin_name']      = $emp['name'];
                $_SESSION['admin_role']      = $emp['role'];
                redirect(SITE_URL . '/admin/index.php');
            } else {
                $error = 'Invalid username/email or password. Please try again.';
            }
        }
    } else {
        $error = 'Please enter both username/email and password.';
    }
}
if (isAdmin()) redirect(SITE_URL . '/admin/index.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Admin Login — Balimeen Private Limited</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Inter', sans-serif; }

/* ─── Page Layout (Split) ──────────────────────────── */
.login-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ─── LEFT PANEL ───────────────────────────────────── */
.left-panel {
  position: relative;
  background: linear-gradient(145deg, #051232 0%, #0a1f4e 40%, #1a3a8a 75%, #2557d6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 40px;
  overflow: hidden;
}

/* Animated blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: blobFloat 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.blob-1 { width: 320px; height: 320px; background: rgba(37,87,214,.35); top: -80px; left: -80px; animation-delay: 0s; }
.blob-2 { width: 260px; height: 260px; background: rgba(245,158,11,.2); bottom: 40px; right: -60px; animation-delay: 3s; }
.blob-3 { width: 180px; height: 180px; background: rgba(59,130,246,.3); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 1.5s; }
@keyframes blobFloat {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.15) translate(20px,20px); }
}

/* Grid pattern overlay */
.left-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.left-content { position: relative; z-index: 2; text-align: center; max-width: 440px; }

/* Brand */
.brand-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  margin-bottom: 24px;
}
.brand-logo .bm {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.brand-logo .sub {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

.left-content h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
}
.left-content h1 span { color: #f59e0b; }
.left-content .tagline {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Sink image showcase */
.sink-showcase {
  position: relative;
  margin-bottom: 36px;
}
.sink-showcase img {
  width: 280px;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  display: block;
  margin: 0 auto;
  transition: transform .3s ease;
}
.sink-showcase img:hover { transform: translateY(-4px) scale(1.02); }
.sink-float-badge {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  white-space: nowrap;
  letter-spacing: .5px;
}

/* Feature pills */
.features-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.feature-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  font-size: .76rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 50px;
}
.feature-pill i { color: #f59e0b; font-size: .75rem; }

/* ─── RIGHT PANEL ──────────────────────────────────── */
.right-panel {
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
}

.login-box {
  background: #fff;
  border-radius: 24px;
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(10,31,78,.1);
  animation: slideIn .5s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-box-header { text-align: center; margin-bottom: 32px; }
.login-box-header .welcome { font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #2557d6; margin-bottom: 8px; }
.login-box-header h2 { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; color: #0a1f4e; margin-bottom: 6px; }
.login-box-header p { font-size: .88rem; color: #64748b; }

/* Form */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap i {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: .9rem;
  transition: color .2s;
}
.input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: .93rem;
  font-family: inherit;
  color: #0f172a;
  background: #fafafa;
  transition: all .2s;
  outline: none;
}
.input-wrap input:focus {
  border-color: #2557d6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,87,214,.1);
}
.input-wrap input:focus + i,
.input-wrap:focus-within i { color: #2557d6; }
/* icon fix: icon before input in DOM */
.input-wrap i.prefix { pointer-events: none; }
.eye-toggle {
  position: absolute;
  right: 13px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: .9rem;
  padding: 4px;
  transition: color .2s;
  line-height: 1;
}
.eye-toggle:hover { color: #2557d6; }

/* Submit button */
.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1a3a8a, #2557d6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2557d6, #3b82f6);
  opacity: 0;
  transition: opacity .25s;
}
.btn-login:hover::before { opacity: 1; }
.btn-login span, .btn-login i { position: relative; z-index: 1; }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,87,214,.35); }
.btn-login:active { transform: translateY(0); }

/* Loading spinner */
.btn-login .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Divider */
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #cbd5e1; font-size: .8rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

/* Hint card */
.hint-card {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hint-card i { color: #2557d6; margin-top: 2px; flex-shrink: 0; }
.hint-card .hint-text { font-size: .82rem; color: #1e40af; }
.hint-card strong { font-weight: 700; }

/* Alert */
.alert-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .87rem;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-6px); }
  40%,80%  { transform: translateX(6px); }
}

/* Back link */
.back-link {
  text-align: center;
  margin-top: 22px;
  font-size: .83rem;
  color: #64748b;
}
.back-link a { color: #2557d6; font-weight: 600; text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

/* Footer */
.login-footer {
  text-align: center;
  margin-top: 28px;
  font-size: .75rem;
  color: #94a3b8;
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .left-panel { display: none; }
  .right-panel { background: linear-gradient(145deg, #051232, #0a1f4e, #1a3a8a); }
  .login-box { background: rgba(255,255,255,.97); }
}
@media (max-width: 480px) {
  .login-box { padding: 32px 24px; }
}
</style>
</head>
<body>
<div class="login-page">

  <!-- ════════════ LEFT PANEL ════════════ -->
  <div class="left-panel">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>

    <div class="left-content">
      <div class="brand-logo" style="background:transparent;border:none;">
        <img src="<?= SITE_URL ?>/assets/images/logo.jpg" alt="Balimeen" style="width:100%;height:100%;object-fit:contain;border-radius:20px;">
      </div>

      <h1>Balimeen<br><span>Admin Portal</span></h1>
      <p class="tagline">Manage your product catalog, track inquiries, and grow your stainless steel business — all in one place.</p>

      <div class="sink-showcase">
        <img src="<?= SITE_URL ?>/assets/images/sink_double_bowl.png" alt="Premium Stainless Steel Sink">
        <div class="sink-float-badge">⭐ &nbsp;SS 304 · Premium Grade</div>
      </div>

      <div class="features-row">
        <div class="feature-pill"><i class="fas fa-box"></i> Product Management</div>
        <div class="feature-pill"><i class="fas fa-envelope"></i> Inquiry Tracking</div>
        <div class="feature-pill"><i class="fas fa-chart-bar"></i> Dashboard Analytics</div>
        <div class="feature-pill"><i class="fas fa-tags"></i> Category Control</div>
      </div>
    </div>
  </div>

  <!-- ════════════ RIGHT PANEL ════════════ -->
  <div class="right-panel">
    <div class="login-box">

      <div class="login-box-header">
        <div class="welcome">Welcome Back</div>
        <h2>Sign In to Admin</h2>
        <p>Enter your credentials to access the control panel</p>
      </div>

      <!-- Error -->
      <?php if ($error): ?>
      <div class="alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <?= htmlspecialchars($error) ?>
      </div>
      <?php endif; ?>

      <!-- Credentials hint -->
      <div class="hint-card">
        <i class="fas fa-info-circle"></i>
        <div class="hint-text">
          Default Admin: <strong>admin</strong> / <strong>admin@123</strong><br>
          Employees: Use your registered <strong>email address</strong>.
        </div>
      </div>

      <!-- Form -->
      <form method="POST" id="loginForm">
        <div class="form-group">
          <label for="username"><i class="fas fa-user" style="margin-right:6px;color:#2557d6;"></i>Username or Email</label>
          <div class="input-wrap">
            <i class="fas fa-user prefix"></i>
            <input
              type="text"
              id="username"
              name="username"
              placeholder="admin or employee@balimeen.com"
              value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
              required
              autofocus
              autocomplete="username"
            >
          </div>
        </div>

        <div class="form-group">
          <label for="password"><i class="fas fa-lock" style="margin-right:6px;color:#2557d6;"></i>Password</label>
          <div class="input-wrap">
            <i class="fas fa-lock prefix"></i>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Enter your password"
              required
              autocomplete="current-password"
            >
            <button type="button" class="eye-toggle" id="eyeToggle" aria-label="Toggle password visibility">
              <i class="fas fa-eye" id="eyeIcon"></i>
            </button>
          </div>
        </div>

        <button type="submit" class="btn-login" id="loginBtn">
          <div class="spinner" id="spinner"></div>
          <i class="fas fa-sign-in-alt" id="loginIcon"></i>
          <span id="loginText">Sign In to Dashboard</span>
        </button>
      </form>

      <div class="back-link">
        <a href="<?= SITE_URL ?>"><i class="fas fa-arrow-left" style="margin-right:4px;"></i>Back to Website</a>
      </div>

      <div class="login-footer">
        &copy; <?= date('Y') ?> Balimeen Private Limited · GSTIN: 10AAOCB2122R1ZO
      </div>
    </div>
  </div>

</div>

<script>
// ── Password toggle ─────────────────────────────────
const eyeToggle = document.getElementById('eyeToggle');
const eyeIcon   = document.getElementById('eyeIcon');
const passInput = document.getElementById('password');
eyeToggle.addEventListener('click', () => {
  const isPass = passInput.type === 'password';
  passInput.type = isPass ? 'text' : 'password';
  eyeIcon.className = isPass ? 'fas fa-eye-slash' : 'fas fa-eye';
});

// ── Loading state on submit ─────────────────────────
const loginForm = document.getElementById('loginForm');
const loginBtn  = document.getElementById('loginBtn');
const spinner   = document.getElementById('spinner');
const loginIcon = document.getElementById('loginIcon');
const loginText = document.getElementById('loginText');

loginForm.addEventListener('submit', () => {
  loginBtn.disabled  = true;
  spinner.style.display   = 'block';
  loginIcon.style.display = 'none';
  loginText.textContent   = 'Signing in…';
  loginBtn.style.opacity  = '.85';
});

// ── Input focus effects ─────────────────────────────
document.querySelectorAll('.input-wrap input').forEach(input => {
  input.addEventListener('focus', () => {
    input.parentElement.querySelector('i.prefix').style.color = '#2557d6';
  });
  input.addEventListener('blur', () => {
    input.parentElement.querySelector('i.prefix').style.color = '#94a3b8';
  });
});
</script>
</body>
</html>
