<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Login — {{ config('app.name') }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: { 50: '#f0f7ff', 100: '#e0effe', 500:'#2f8bff', 600:'#1f6fde' },
            accent:{ 50: '#f0fdf4', 100: '#dcfce7', 500:'#22c55e' },
            dark: { 900: '#0f172a', 800: '#1e293b', 700: '#334155' }
          },
          animation: {
            'fade-in': 'fadeIn 0.5s ease-out forwards',
            'float': 'float 6s ease-in-out infinite',
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0', transform: 'translateY(10px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' }
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' }
            }
          }
        }
      }
    }
  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
    .grad { 
      background: radial-gradient(1200px 600px at 10% 10%, #2f8bff22, transparent),
                 radial-gradient(800px 400px at 90% 10%, #22c55e1c, transparent),
                 radial-gradient(1000px 500px at 50% 100%, #0ea5e91f, transparent);
    }
    .card-shadow {
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .input-focus:focus {
      box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.15);
    }
  </style>
</head>
<body class="min-h-screen grad flex items-center justify-center p-4 bg-slate-950">
  <div class="w-full max-w-md relative">
    <!-- Floating decorations -->
    <div class="absolute top-20 left-10 w-72 h-72 bg-brand-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-10 animate-float"></div>
    <div class="absolute bottom-20 right-10 w-72 h-72 bg-accent-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-10 animate-float" style="animation-delay: 2s;"></div>
    
    <!-- Card -->
    <div class="bg-white rounded-2xl card-shadow p-8 relative overflow-hidden animate-fade-in">
      <div class="absolute -top-10 -right-10 w-28 h-28 bg-brand-50 rounded-full"></div>
      <div class="absolute -bottom-8 -left-8 w-20 h-20 bg-accent-50 rounded-full"></div>
      
      <div class="text-center relative z-10">
        <div class="inline-flex items-center justify-center h-16 w-16 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 text-white font-bold text-xl shadow-lg mb-4">
          <i class="fas fa-shield-alt"></i>
        </div>
        <h1 class="mt-2 text-2xl font-bold text-slate-800">PAC Technology</h1>
        <p class="text-slate-500 text-sm mt-2">Sign in to access your dashboard</p>
      </div>

      @if ($errors->any())
        <div class="mt-6 rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-700 flex items-start">
          <i class="fas fa-exclamation-circle mt-0.5 mr-3 flex-shrink-0"></i>
          <div>{{ $errors->first() }}</div>
        </div>
      @endif

      @if (session('status'))
        <div class="mt-6 rounded-xl bg-emerald-50 border border-emerald-200 p-4 text-sm text-emerald-700 flex items-start">
          <i class="fas fa-check-circle mt-0.5 mr-3 flex-shrink-0"></i>
          <div>{{ session('status') }}</div>
        </div>
      @endif

      <form class="mt-6 space-y-5" method="POST" action="{{ route('login.post') }}">
        @csrf

        <!-- Role -->
        <div>
          <label class="block text-sm font-medium mb-2 text-slate-700">Role</label>
          <div class="relative">
            <select name="role" class="w-full px-4 py-3.5 rounded-xl border border-slate-200 focus:border-brand-500 input-focus focus:ring-0 appearance-none">
              <option value="admin" {{ old('role')==='admin'?'selected':'' }}>Admin</option>
              <option value="telecalling" {{ old('role')==='telecalling'?'selected':'' }}>Telecalling Team</option>
              <option value="asset" {{ old('role')==='asset'?'selected':'' }}>Asset / Laptop Tracker</option>
              <option value="todo" {{ old('role')==='todo'?'selected':'' }}>To-Do</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500">
              <i class="fas fa-chevron-down"></i>
            </div>
          </div>
        </div>

        <!-- Email -->
        <div>
          <label class="block text-sm font-medium mb-2 text-slate-700">Email Address</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fas fa-envelope text-slate-400"></i>
            </div>
            <input type="email" name="email" value="{{ old('email') }}" required
                   class="w-full pl-10 pr-4 py-3.5 rounded-xl border border-slate-200 focus:border-brand-500 input-focus focus:ring-0"
                   placeholder="you@example.com">
          </div>
        </div>

        <!-- Password -->
        <div>
          <label class="block text-sm font-medium mb-2 text-slate-700">Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fas fa-lock text-slate-400"></i>
            </div>
            <input id="pwd" type="password" name="password" required
                   class="w-full pl-10 pr-10 py-3.5 rounded-xl border border-slate-200 focus:border-brand-500 input-focus focus:ring-0"
                   placeholder="••••••••">
            <button type="button" id="togglePwd"
              class="absolute inset-y-0 right-2 px-2 text-slate-500 hover:text-slate-700">
              <i class="fas fa-eye"></i>
            </button>
          </div>
        </div>

        <!-- Remember -->
        <div class="flex items-center justify-between">
          <label class="inline-flex items-center gap-2 text-sm text-slate-600">
            <input type="checkbox" name="remember" class="rounded border-slate-300 text-brand-500 focus:ring-brand-500">
            Remember me
          </label>
        </div>

        <!-- Submit -->
        <button type="submit"
                class="w-full inline-flex items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white font-semibold py-3.5 transition shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
          <span>Sign in</span>
          <i class="fas fa-arrow-right ml-2"></i>
        </button>
      </form>

      <form method="POST" action="{{ route('logout') }}" id="logout-form" class="hidden">@csrf</form>
    </div>

    <div class="mt-6 text-center">
      <p class="text-xs text-slate-400">© 2025 PAC Technology. All rights reserved.</p>
    </div>
  </div>

  <script>
    const pwd = document.getElementById('pwd');
    const toggle = document.getElementById('togglePwd');
    toggle?.addEventListener('click', () => {
      pwd.type = pwd.type === 'password' ? 'text' : 'password';
      toggle.innerHTML = pwd.type === 'password'
        ? '<i class="fas fa-eye"></i>'
        : '<i class="fas fa-eye-slash"></i>';
    });
  </script>
</body>
</html>
