<?php
session_start();
// If already logged in, redirect to app
if (isset($_SESSION['oms_user'])) {
    header('Location: index.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filo Hevis OMS — Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  body { font-family: 'Inter', sans-serif; }
  .bg-grid {
    background-color: #0f172a;
    background-image: radial-gradient(rgba(99,102,241,0.15) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); }
  @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
  .fade-up { animation: fadeUp 0.5s ease forwards; }
</style>
</head>
<body class="bg-grid min-h-screen flex items-center justify-center p-4">

<div class="fade-up w-full max-w-sm">
  <!-- Logo -->
  <div class="text-center mb-8">
    <div class="inline-flex h-16 w-16 bg-blue-600 rounded-2xl items-center justify-center shadow-2xl shadow-blue-500/40 mb-4">
      <i class="fas fa-box-open text-white text-2xl"></i>
    </div>
    <h1 class="text-2xl font-bold text-white tracking-tight">Filo Hevis OMS</h1>
    <p class="text-slate-400 text-sm mt-1">Order Management System</p>
  </div>

  <!-- Card -->
  <div class="glass rounded-2xl p-8 shadow-2xl">
    <h2 class="text-lg font-semibold text-white mb-6">Sign in to your account</h2>

    <div id="error-msg" class="hidden mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-300 text-sm flex items-center gap-2">
      <i class="fas fa-exclamation-circle"></i>
      <span id="error-text">Invalid username or password.</span>
    </div>

    <div class="space-y-4">
      <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Username</label>
        <div class="relative">
          <i class="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
          <input type="text" id="username" placeholder="Enter your username"
            class="w-full bg-slate-800/60 border border-slate-600 text-white placeholder-slate-500 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
            onkeydown="if(event.key==='Enter')doLogin()">
        </div>
      </div>
      <div>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Password</label>
        <div class="relative">
          <i class="fas fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
          <input type="password" id="password" placeholder="Enter your password"
            class="w-full bg-slate-800/60 border border-slate-600 text-white placeholder-slate-500 rounded-xl pl-10 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
            onkeydown="if(event.key==='Enter')doLogin()">
          <button type="button" onclick="togglePw()" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition">
            <i class="fas fa-eye" id="pw-eye"></i>
          </button>
        </div>
      </div>

      <button onclick="doLogin()" id="login-btn"
        class="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 rounded-xl transition-all shadow-lg shadow-blue-500/30 active:scale-95 flex items-center justify-center gap-2 mt-2">
        <i class="fas fa-sign-in-alt"></i> Sign In
      </button>
    </div>
  </div>

  <div class="text-center mt-6 space-y-1">
    <p class="text-slate-600 text-xs">© <?= date('Y') ?> Filo Hevis. All rights reserved.</p>
    <p class="text-slate-700 text-xs font-medium">
      Developed &amp; Maintained by 
      <span class="text-indigo-400 font-semibold">Atul Kumar</span>
    </p>
  </div>
</div>

<script>
function togglePw() {
  const inp = document.getElementById('password');
  const eye = document.getElementById('pw-eye');
  if (inp.type === 'password') { inp.type = 'text'; eye.className = 'fas fa-eye-slash'; }
  else { inp.type = 'password'; eye.className = 'fas fa-eye'; }
}

async function doLogin() {
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value;
  const btn      = document.getElementById('login-btn');
  const errDiv   = document.getElementById('error-msg');
  const errText  = document.getElementById('error-text');

  if (!username || !password) {
    errText.textContent = 'Please enter username and password.';
    errDiv.classList.remove('hidden'); return;
  }

  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in...';
  btn.disabled  = true;
  errDiv.classList.add('hidden');

  try {
    const res  = await fetch('api/auth.php', {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ action: 'login', username, password })
    });
    const data = await res.json();

    if (data.status === 'success') {
      window.location.href = 'index.php';
    } else {
      errText.textContent = data.msg || 'Invalid username or password.';
      errDiv.classList.remove('hidden');
      btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Sign In';
      btn.disabled  = false;
    }
  } catch(e) {
    errText.textContent = 'Connection error. Please try again.';
    errDiv.classList.remove('hidden');
    btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Sign In';
    btn.disabled  = false;
  }
}

// Auto-focus
document.getElementById('username').focus();
</script>
</body>
</html>
