<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Login | On Call</title>
  <!-- Tailwind CSS Play CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            saffron: {
              DEFAULT: '#e31e24',
              dark: '#b51217',
              light: '#ffebee',
            },
            gold: {
              DEFAULT: '#c99c33',
              dark: '#a87e24',
              light: '#fbf8f0',
            },
            cream: '#faf7f2',
            ivory: '#fdfdfb',
            charcoal: {
              DEFAULT: '#1a1a1a',
              light: '#4a4a4a',
              muted: '#7a7a7a',
            }
          },
          fontFamily: {
            body: ['Outfit', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="font-body bg-gradient-to-br from-[#1a1a1a] via-[#2a2a2a] to-[#121212] text-charcoal min-h-screen flex items-center justify-center relative overflow-hidden antialiased">

  <!-- Subtle Gold Background Blur Circles -->
  <div class="absolute w-96 h-96 rounded-full bg-gold/10 blur-[120px] -top-20 -left-20"></div>
  <div class="absolute w-96 h-96 rounded-full bg-saffron/10 blur-[120px] -bottom-20 -right-20"></div>

  <div class="w-full max-w-md p-6 relative z-10">
    <!-- Login Card -->
    <div class="bg-[#1e1e1e] border border-gold/20 rounded-[24px] p-8 md:p-10 shadow-2xl flex flex-col gap-6 backdrop-blur-md">
      
      <!-- Header -->
      <div class="text-center flex flex-col items-center gap-2">
        <div class="w-14 h-14 rounded-full bg-gradient-to-tr from-gold to-saffron flex items-center justify-center text-white shadow-lg mb-2">
          <i data-lucide="lock" class="w-6 h-6"></i>
        </div>
        <h2 class="text-2xl font-bold text-white tracking-wide">Admin Control Panel</h2>
        <p class="text-xs text-charcoal-muted uppercase tracking-widest">On Call &mdash; Quality Self &bull; Rich & Royal</p>
      </div>

      <!-- Flash Messages -->
      <?php if (session()->getFlashdata('error')): ?>
        <div class="p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-[#ef5350] flex items-center gap-3 animate-fade-in text-sm font-medium">
          <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
          <span><?= session()->getFlashdata('error') ?></span>
        </div>
      <?php endif; ?>

      <?php if (session()->getFlashdata('success')): ?>
        <div class="p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-[#66bb6a] flex items-center gap-3 animate-fade-in text-sm font-medium">
          <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0"></i>
          <span><?= session()->getFlashdata('success') ?></span>
        </div>
      <?php endif; ?>

      <!-- Login Form -->
      <form action="<?= base_url('admin/login') ?>" method="POST" class="flex flex-col gap-5">
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-white/70 mb-2 tracking-wider">Username</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-white/40">
              <i data-lucide="user" class="w-4 h-4"></i>
            </div>
            <input 
              type="text" 
              name="username" 
              required 
              placeholder="Enter admin username" 
              class="w-full pl-10 pr-4 py-3 bg-[#2a2a2a] border border-gold/15 focus:border-gold rounded-xl outline-none focus:ring-2 focus:ring-gold/20 text-white placeholder-white/30 text-sm transition-all duration-200"
            />
          </div>
        </div>

        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-white/70 mb-2 tracking-wider">Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-white/40">
              <i data-lucide="key" class="w-4 h-4"></i>
            </div>
            <input 
              type="password" 
              name="password" 
              required 
              placeholder="Enter password" 
              class="w-full pl-10 pr-4 py-3 bg-[#2a2a2a] border border-gold/15 focus:border-gold rounded-xl outline-none focus:ring-2 focus:ring-gold/20 text-white placeholder-white/30 text-sm transition-all duration-200"
            />
          </div>
        </div>

        <button type="submit" class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-saffron to-gold hover:from-saffron-dark hover:to-gold-dark text-white py-3.5 rounded-xl font-medium tracking-wide shadow-[0_4px_14px_rgba(227,30,36,0.2)] hover:shadow-[0_6px_20px_rgba(227,30,36,0.3)] hover:-translate-y-0.5 mt-2 transition-all duration-300">
          Sign In
          <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
      </form>

      <div class="text-center mt-2">
        <a href="<?= base_url('/') ?>" class="inline-flex items-center gap-1 text-xs text-gold hover:text-white transition-colors duration-200">
          <i data-lucide="arrow-left" class="w-3 h-3"></i>
          Back to website
        </a>
      </div>
    </div>
  </div>

  <script>
    // Initialize Lucide Icons
    lucide.createIcons();
  </script>
</body>
</html>
