<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - 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; }
        .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)} }
        
        .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">Create Account</h2>
                <p class="text-gray-400 mt-2">Start managing your wedding guests</p>
            </div>
            
            <div class="glass-card rounded-2xl p-8 border border-white/20">
                <form id="registerForm">
                    <div class="grid md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-white mb-2">First Name</label>
                            <input type="text" id="firstName" 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="John" required>
                        </div>
                        <div>
                            <label class="block text-white mb-2">Last Name</label>
                            <input type="text" id="lastName" 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="Doe" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <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="john@example.com" required>
                    </div>
                    <div class="mb-4">
                        <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="Create a password" required>
                    </div>
                    <div class="mb-6">
                        <label class="block text-white mb-2">Confirm Password</label>
                        <input type="password" id="confirmPassword" 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="Confirm password" required>
                    </div>
                    <div class="mb-6">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" id="termsCheckbox" class="mr-2 cursor-pointer" required>
                            <span class="text-gray-400 text-sm">I agree to the <a href="#" class="text-purple-400 hover:text-purple-300">Terms of Service</a> and <a href="#" class="text-purple-400 hover:text-purple-300">Privacy Policy</a></span>
                        </label>
                    </div>
                    <button type="submit" id="registerBtn" 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">Create Account</span>
                        <span class="loader"></span>
                    </button>
                </form>
                
                <div class="mt-6 text-center">
                    <p class="text-gray-400">Already have an account? <a href="<?php echo e(route('login')); ?>" class="text-purple-400 hover:text-purple-300 transition">Login</a></p>
                </div>
                <p class="text-center text-gray-500 text-xs mt-4">By signing up, you agree to our Terms of Service and Privacy Policy</p>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const firstName = document.getElementById('firstName').value;
            const lastName = document.getElementById('lastName').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const termsChecked = document.getElementById('termsCheckbox').checked;
            
            // Validation
            if (!firstName || !lastName || !email || !password || !confirmPassword) {
                showNotification('Please fill in all fields', 'error');
                return;
            }
            
            if (password !== confirmPassword) {
                showNotification('Passwords do not match', 'error');
                return;
            }
            
            if (password.length < 6) {
                showNotification('Password must be at least 6 characters', 'error');
                return;
            }
            
            if (!termsChecked) {
                showNotification('Please accept the terms and conditions', 'error');
                return;
            }
            
            // Show loading state
            const registerBtn = document.getElementById('registerBtn');
            registerBtn.classList.add('btn-loading');
            registerBtn.disabled = true;
            
            // Simulate registration process
            setTimeout(() => {
                // Store user data
                const userData = {
                    name: firstName + ' ' + lastName,
                    email: email,
                    loggedIn: true,
                    registeredAt: new Date().toISOString()
                };
                
                localStorage.setItem('wedbooker_user', JSON.stringify(userData));
                
                showNotification('Account created successfully! Redirecting...', 'success');
                
                // Redirect to dashboard after registration
                setTimeout(() => {
                    window.location.href = "<?php echo e(route('dashboard')); ?>";
                }, 1000);
                
            }, 1500);
        });
        
        function showNotification(message, type) {
            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);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        // Add password strength indicator
        const passwordInput = document.getElementById('password');
        const strengthIndicator = document.createElement('div');
        strengthIndicator.className = 'text-xs mt-1';
        passwordInput.parentNode.appendChild(strengthIndicator);
        
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            
            if (password.length >= 6) strength++;
            if (password.match(/[a-z]+/)) strength++;
            if (password.match(/[A-Z]+/)) strength++;
            if (password.match(/[0-9]+/)) strength++;
            if (password.match(/[$@#&!]+/)) strength++;
            
            if (strength <= 2) {
                strengthIndicator.innerHTML = '<span class="text-red-400">Weak password</span>';
            } else if (strength <= 4) {
                strengthIndicator.innerHTML = '<span class="text-yellow-400">Medium password</span>';
            } else {
                strengthIndicator.innerHTML = '<span class="text-green-400">Strong password</span>';
            }
            
            if (!password) strengthIndicator.innerHTML = '';
        });
        
        // Add focus animations
        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/register.blade.php ENDPATH**/ ?>