<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - SARAKATA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' },
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .glass-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: white; transition: all 0.3s; }
        .glass-input:focus { background: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.6); box-shadow: 0 0 20px rgba(99,102,241,0.15); outline: none; }
        .glass-input::placeholder { color: rgba(165,180,252,0.5); }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center font-sans antialiased bg-gradient-to-br from-primary-900 via-gray-900 to-gray-900 relative overflow-hidden">

    {{-- Decorative blobs --}}
    <div class="absolute top-20 -left-20 w-96 h-96 bg-primary-600/20 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 right-10 w-80 h-80 bg-purple-600/15 rounded-full blur-3xl"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-500/5 rounded-full blur-3xl"></div>

    <div class="w-full max-w-md relative z-10 px-4">
        {{-- Logo --}}
        <div class="text-center mb-10">
            <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center mx-auto shadow-2xl shadow-primary-500/30 mb-5">
                <i class="fas fa-book-open text-white text-2xl"></i>
            </div>
            <h2 class="text-white text-3xl font-black tracking-tight">Sara<span class="gradient-text">kata</span></h2>
            <p class="text-primary-300/60 text-sm mt-2 font-medium">Sistem Informasi Perpustakaan</p>
        </div>

        {{-- Login Card --}}
        <div class="bg-white/[0.07] backdrop-blur-xl rounded-3xl p-8 border border-white/10 shadow-2xl">
            <div class="mb-8">
                <h3 class="text-white text-xl font-bold">Masuk ke Dashboard</h3>
                <p class="text-primary-300/50 text-sm mt-1">Masukkan kredensial admin Anda.</p>
            </div>

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

                <div>
                    <label class="block text-primary-200/70 text-xs font-semibold mb-2 uppercase tracking-wider">Email</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-envelope text-primary-400/40 text-sm"></i>
                        </div>
                        <input type="email" name="email" value="{{ old('email') }}"
                               class="w-full pl-11 pr-4 py-3.5 rounded-xl glass-input text-sm"
                               placeholder="admin@example.com" required>
                    </div>
                    @error('email') <span class="text-red-400 text-xs mt-1.5 block"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-primary-200/70 text-xs font-semibold mb-2 uppercase tracking-wider">Password</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-lock text-primary-400/40 text-sm"></i>
                        </div>
                        <input type="password" name="password"
                               class="w-full pl-11 pr-4 py-3.5 rounded-xl glass-input text-sm"
                               placeholder="••••••••" required>
                    </div>
                </div>

                <div class="flex items-center justify-between pt-1">
                    <label class="flex items-center text-xs text-primary-200/50 cursor-pointer gap-2">
                        <input type="checkbox" name="remember" class="rounded border-primary-400/30 bg-transparent text-primary-500 focus:ring-primary-500"> Remember me
                    </label>
                </div>

                <button type="submit"
                        class="w-full py-3.5 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-bold rounded-xl transition-all shadow-xl shadow-primary-500/25 active:scale-[0.98] text-sm tracking-wide">
                    <i class="fas fa-sign-in-alt mr-2"></i> Masuk
                </button>
            </form>
        </div>

        <p class="text-center text-primary-400/30 text-xs mt-8 font-medium">© {{ date('Y') }} Sarakata Library System</p>
    </div>

</body>
</html>
