<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Login</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">

    <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8">
        
        <!-- Header -->
        <div class="text-center mb-6">
            <h1 class="text-2xl font-semibold text-gray-800">Admin Login</h1>
            <p class="text-sm text-gray-500 mt-1">Sign in to manage your website</p>
        </div>

        <!-- Error Message -->
        @if(session('error'))
            <div class="mb-4 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
                {{ session('error') }}
            </div>
        @endif

        <!-- Login Form -->
        <form method="POST" action="/admin/login" class="space-y-5">
            @csrf

            <!-- Username -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Username
                </label>
                <input 
                    name="username"
                    required
                    autofocus
                    placeholder="Enter your username"
                    class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm
                           focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
                           outline-none transition"
                >
            </div>

            <!-- Password -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Password
                </label>
                <input 
                    name="password"
                    type="password"
                    required
                    placeholder="Enter your password"
                    class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm
                           focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20
                           outline-none transition"
                >
            </div>

            <!-- Submit Button -->
            <button 
                type="submit"
                class="w-full rounded-lg bg-blue-600 py-2.5 text-white text-sm font-semibold
                       hover:bg-blue-700 active:bg-blue-800
                       transition shadow-sm"
            >
                Sign In
            </button>
        </form>

        <!-- Footer -->
        <div class="mt-6 text-center text-xs text-gray-400">
            © {{ date('Y') }} Ahoj Ministries — Admin Panel
        </div>

    </div>

</body>
</html>
