<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - WedBooker</title>
    <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">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Space Grotesk', sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .glass-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
        .animate-float { animation: float 3s ease-in-out infinite; }
        @keyframes float { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-10px)} }
        .hover-glow:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(139,92,246,0.3); }
        
        /* Loading Animation */
        .loader {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 0.8s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .btn-text {
            display: inline-block;
        }
        
        .btn-loading .btn-text {
            display: none;
        }
        
        .btn-loading .loader {
            display: inline-block;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen flex items-center justify-center">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto">
            <div class="text-center mb-8">
                <div class="w-20 h-20 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-float">
                    <i class="fa-solid fa-heart text-white text-3xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-white">Welcome Back</h2>
                <p class="text-gray-400 mt-2">Login to your WedBooker account</p>
            </div>
            
            <div class="glass-card rounded-2xl p-8 border border-white/20 hover-glow">
                <form id="loginForm">
                    <div class="mb-6">
                        <label class="block text-white mb-2">Email Address</label>
                        <input type="email" id="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Enter your email" required>
                    </div>
                    <div class="mb-6">
                        <label class="block text-white mb-2">Password</label>
                        <input type="password" id="password" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Enter your password" required>
                    </div>
                    <div class="flex items-center justify-between mb-6">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" id="rememberMe" class="mr-2 cursor-pointer">
                            <span class="text-gray-400 text-sm">Remember me</span>
                        </label>
                        <a href="#" class="text-purple-400 text-sm hover:text-purple-300 transition">Forgot Password?</a>
                    </div>
                    <button type="submit" id="loginBtn" class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-semibold hover:shadow-2xl transition hover:scale-105 flex items-center justify-center gap-2">
                        <span class="btn-text">Login</span>
                        <span class="loader"></span>
                    </button>
                </form>
                
                <!-- Demo Credentials Info -->
                <div class="mt-6 p-4 bg-white/5 rounded-lg border border-white/10">
                    <p class="text-gray-400 text-sm text-center mb-2">✨ Demo Credentials ✨</p>
                    <div class="flex flex-col gap-1 text-xs text-gray-500">
                        <p class="text-center">Email: <span class="text-purple-400">couple@wedbooker.com</span></p>
                        <p class="text-center">Password: <span class="text-purple-400">any password</span></p>
                    </div>
                </div>
                
                <div class="mt-6 text-center">
                    <p class="text-gray-400">Don't have an account? <a href="<?php echo e(route('register')); ?>" class="text-purple-400 hover:text-purple-300 transition">Sign up</a></p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Clear any existing login data on page load to prevent auto-redirect
        // Comment out or remove the auto-check functionality
        // We want users to manually login
        
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const rememberMe = document.getElementById('rememberMe').checked;
            
            // Basic validation
            if (!email || !password) {
                showNotification('Please fill in all fields', 'error');
                return;
            }
            
            // Show loading state
            const loginBtn = document.getElementById('loginBtn');
            loginBtn.classList.add('btn-loading');
            loginBtn.disabled = true;
            
            // Simulate API call / login process
            setTimeout(() => {
                // Store user session in localStorage (for frontend demo)
                if (rememberMe) {
                    localStorage.setItem('wedbooker_user', JSON.stringify({
                        email: email,
                        name: email.split('@')[0],
                        loggedIn: true,
                        remember: true
                    }));
                } else {
                    sessionStorage.setItem('wedbooker_user', JSON.stringify({
                        email: email,
                        name: email.split('@')[0],
                        loggedIn: true
                    }));
                }
                
                // Show success message
                showNotification('Login successful! Redirecting...', 'success');
                
                // Redirect to dashboard
                setTimeout(() => {
                    window.location.href = "<?php echo e(route('dashboard')); ?>";
                }, 1000);
                
            }, 1500);
        });
        
        // Notification function
        function showNotification(message, type) {
            // Create notification element
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-2xl z-50 animate-float ${
                type === 'success' ? 'bg-green-500' : 'bg-red-500'
            } text-white font-semibold`;
            notification.innerHTML = `
                <div class="flex items-center gap-2">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            // Remove after 3 seconds
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // Optional: Add a clear storage button for testing
        function clearStorage() {
            localStorage.removeItem('wedbooker_user');
            sessionStorage.removeItem('wedbooker_user');
            showNotification('Storage cleared!', 'success');
        }
        
        // Add a small utility link to clear storage (for testing)
        const demoDiv = document.querySelector('.bg-white/5');
        if(demoDiv) {
            const clearLink = document.createElement('p');
            clearLink.className = 'text-center text-gray-500 text-xs mt-3 cursor-pointer hover:text-purple-400 transition';
            clearLink.innerHTML = '<i class="fas fa-trash-alt mr-1"></i>Clear saved session';
            clearLink.onclick = clearStorage;
            demoDiv.appendChild(clearLink);
        }
        
        // Add animation to inputs on focus
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('ring-2', 'ring-purple-500/50');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('ring-2', 'ring-purple-500/50');
            });
        });
    </script>
</body>
</html><?php /**PATH D:\skietagency\wedding\code\resources\views/auth/login.blade.php ENDPATH**/ ?>