<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Login | Access Control Management</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <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: ['Plus Jakarta Sans', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                            950: '#172554',
                        }
                    },
                    animation: {
                        'blob': 'blob 7s infinite',
                        'fade-in-up': 'fadeInUp 0.6s ease-out',
                        'shake': 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both',
                    },
                    keyframes: {
                        blob: {
                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
                        },
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        shake: {
                            '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
                            '20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
                            '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
                            '40%, 60%': { transform: 'translate3d(4px, 0, 0)' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .input-group:focus-within label {
            color: #2563eb;
        }

        .input-group:focus-within i {
            color: #2563eb;
        }

        .input-field {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .input-field:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
            background-size: 200% 200%;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-position: 100% 0;
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-primary.loading {
            pointer-events: none;
            opacity: 0.8;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
        }

        .floating-blob {
            position: absolute;
            filter: blur(80px);
            opacity: 0.6;
            animation: blob 7s infinite;
        }

        .password-toggle {
            cursor: pointer;
            transition: all 0.2s;
        }

        .password-toggle:hover {
            color: #2563eb;
        }

        .remember-checkbox {
            accent-color: #2563eb;
        }

        /* Smooth error animation */
        .error-message {
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center p-4 relative overflow-hidden">

    <!-- Animated Background Blobs -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="floating-blob bg-blue-500 w-96 h-96 rounded-full top-0 left-0 -translate-x-1/2 -translate-y-1/2" style="animation-delay: 0s;"></div>
        <div class="floating-blob bg-purple-500 w-96 h-96 rounded-full top-0 right-0 translate-x-1/2 -translate-y-1/2" style="animation-delay: 2s;"></div>
        <div class="floating-blob bg-cyan-500 w-80 h-80 rounded-full bottom-0 left-20 translate-y-1/2" style="animation-delay: 4s;"></div>
        <div class="floating-blob bg-indigo-500 w-80 h-80 rounded-full bottom-0 right-20 translate-y-1/2" style="animation-delay: 6s;"></div>
    </div>

    <!-- Main Container -->
    <div class="w-full max-w-md relative z-10 animate-fade-in-up">

        <!-- Glass Card -->
        <div class="glass-card rounded-3xl p-8 md:p-10">

            <!-- Logo Section -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl shadow-2xl mb-6 transform hover:scale-105 hover:rotate-3 transition-all duration-300">
                    <i class="fas fa-shield-alt text-3xl text-white"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">
                    Welcome Back
                </h1>
                <p class="text-gray-500 text-sm">
                    Sign in to access your dashboard
                </p>
            </div>

            <!-- Login Form -->
            <form id="loginForm" class="space-y-6" action="{{ route('login') }}" method="POST" novalidate>
                @csrf

                <!-- Email Field -->
                <div class="input-group">
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2 transition-colors">
                        Email Address
                    </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-gray-400 transition-colors"></i>
                        </div>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ old('email') }}"
                            class="input-field w-full pl-11 pr-4 py-3.5 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:bg-white sm:text-sm"
                            placeholder="name@company.com"
                            required
                            autofocus
                        >
                    </div>
                    @error('email')
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1.5 text-xs"></i>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Password Field -->
                <div class="input-group">
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-2 transition-colors">
                        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-gray-400 transition-colors"></i>
                        </div>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            class="input-field w-full pl-11 pr-12 py-3.5 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:bg-white sm:text-sm"
                            placeholder="••••••••"
                            required
                        >
                        <button
                            type="button"
                            id="togglePassword"
                            class="password-toggle absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400"
                        >
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1.5 text-xs"></i>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Remember & Forgot -->
                <div class="flex items-center justify-between">
                    <label class="flex items-center cursor-pointer group">
                        <input
                            type="checkbox"
                            name="remember"
                            id="remember"
                            class="remember-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
                        >
                        <span class="ml-2 text-sm text-gray-600 group-hover:text-gray-800 transition-colors select-none">
                            Remember me
                        </span>
                    </label>
                    <a href="{{ route('password.request') }}" class="text-sm font-medium text-blue-600 hover:text-blue-500 hover:underline transition-colors">
                        Forgot password?
                    </a>
                </div>

                <!-- Submit Button -->
                <button
                    type="submit"
                    id="submitBtn"
                    class="btn-primary w-full flex items-center justify-center py-3.5 px-4 border border-transparent rounded-xl text-white font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    <span id="btnText" class="flex items-center">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Sign In
                    </span>
                    <span id="btnLoading" class="hidden">
                        <i class="fas fa-circle-notch fa-spin mr-2"></i>
                        Signing in...
                    </span>
                </button>
            </form>
            <!-- Error Alert (General) -->
            @if ($errors->has('general') || session('error'))
                <div class="error-message mt-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-triangle text-red-500 mt-0.5 mr-3"></i>
                        <div>
                            <h3 class="text-sm font-medium text-red-800">Login Failed</h3>
                            <p class="mt-1 text-sm text-red-700">
                                {{ $errors->first('general') ?? session('error') }}
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Footer -->
            <div class="mt-8 text-center">
                <p class="text-xs text-gray-500">
                    Don't have an account?
                    <a href="{{ route('register') }}" class="font-medium text-blue-600 hover:text-blue-500 hover:underline transition-colors">
                        Create account
                    </a>
                </p>
                <p class="mt-4 text-xs text-gray-400">
                    Protected by reCAPTCHA and subject to our
                    <a href="#" class="hover:text-gray-600 underline">Privacy Policy</a> and
                    <a href="#" class="hover:text-gray-600 underline">Terms of Service</a>
                </p>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Toggle Password Visibility
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            const icon = this.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });

        // Form Loading State
        const loginForm = document.getElementById('loginForm');
        const submitBtn = document.getElementById('submitBtn');
        const btnText = document.getElementById('btnText');
        const btnLoading = document.getElementById('btnLoading');

        loginForm.addEventListener('submit', function(e) {
            // Basic validation
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;

            if (!email || !password) {
                e.preventDefault();
                return;
            }

            // Show loading state
            submitBtn.classList.add('loading');
            btnText.classList.add('hidden');
            btnLoading.classList.remove('hidden');
        });

        // Shake animation on error
        @if($errors->any())
            document.querySelector('.glass-card').classList.add('animate-shake');
            setTimeout(() => {
                document.querySelector('.glass-card').classList.remove('animate-shake');
            }, 500);
        @endif

        // Input focus effects
        const inputs = document.querySelectorAll('.input-field');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.parentElement.classList.add('focused');
            });

            input.addEventListener('blur', function() {
                this.parentElement.parentElement.classList.remove('focused');
            });
        });
    </script>
</body>
</html>
