<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login | ECS</title>
    <link rel="icon" type="image/png" href="{{ asset('ecs-favicon.png') }}">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Tailwind CSS (CDN for now, matching legacy setup) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: { primary: '#2D2B55', accent: '#3A3875', light: '#EEEDF7' }
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Login Card -->
        <div class="bg-white rounded-2xl shadow-xl border border-slate-100 p-8 md:p-10">
            <!-- Logo / Branding -->
            <div class="text-center mb-8">
                <div class="mb-6">
                    <img src="{{ asset('ecs-logo.png') }}" alt="ECS Logo" class="h-16 mx-auto w-auto object-contain">
                </div>
                <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Admin Portal</h1>
                <p class="text-slate-500 text-sm mt-1 text-balance">Sign in to manage your website content</p>
            </div>
            
            @if ($errors->any())
            <div class="bg-red-50 border border-red-100 text-red-700 px-4 py-3 rounded-lg mb-6 text-sm flex items-center gap-3">
                <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                <span>{{ $errors->first() }}</span>
            </div>
            @endif

            <form method="POST" action="{{ route('admin.login.submit') }}" class="space-y-5">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Username</label>
                    <input type="text" name="username" value="{{ old('username') }}" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition text-sm" placeholder="Enter your username" required autofocus>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">Password</label>
                    <input type="password" name="password" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition text-sm" placeholder="Enter your password" required>
                </div>
                <div class="flex items-center">
                    <input type="checkbox" name="remember" id="remember" class="rounded border-slate-300 text-brand-primary focus:ring-brand-primary">
                    <label for="remember" class="ml-2 text-sm text-slate-600">Remember me</label>
                </div>
                <button type="submit" class="w-full py-3 bg-brand-primary text-white font-bold rounded-lg hover:bg-brand-accent transition shadow-lg shadow-brand-primary/20 text-sm">
                    Sign In
                </button>
            </form>
        </div>

        <!-- Footer -->
        <p class="text-center text-xs text-slate-400 mt-6">
            &copy; {{ date('Y') }} Extensive Creativity Services Limited
        </p>
    </div>
</body>
</html>
