<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - CRM Pro</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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        gold: {
                            50: '#fefce8',
                            100: '#fef9c3',
                            200: '#fef08a',
                            300: '#fde047',
                            400: '#facc15',
                            500: '#eab308',
                            600: '#ca8a04',
                            700: '#a16207',
                            800: '#854d0e',
                            900: '#713f12',
                        },
                        dark: {
                            primary: '#0f172a',
                            secondary: '#1e293b',
                            accent: '#facc15',
                            text: '#f8fafc'
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-in': 'slideIn 0.3s ease-out',
                        'pulse-slow': 'pulse 3s infinite',
                        'shimmer': 'shimmer 2s infinite linear',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideIn: {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(0)' },
                        },
                        shimmer: {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(100%)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .dark .glass {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gradient-bg {
            background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
        }

        .dark .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1a202c 100%);
        }

        .logo-icon {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .theme-toggle {
            position: relative;
            display: inline-block;
            width: 52px;
            height: 28px;
        }

        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .theme-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #cbd5e1;
            transition: .4s;
            border-radius: 34px;
        }

        .theme-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-slider:before::after {
            content: "☀️";
            font-size: 10px;
        }

        input:checked + .theme-slider {
            background-color: #facc15;
        }

        input:checked + .theme-slider:before {
            transform: translateX(24px);
            background-color: #1e293b;
        }

        input:checked + .theme-slider:before::after {
            content: "🌙";
        }

        .decorative-element {
            position: absolute;
            z-index: -1;
            opacity: 0.1;
        }

        .form-input {
            transition: all 0.3s ease;
            border-radius: 12px;
        }

        .form-input:focus {
            box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
            border-color: #facc15;
        }

        .btn-primary {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(250, 204, 21, 0.3);
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(250, 204, 21, 0.4);
        }

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

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-primary:hover::after {
            animation: shimmer 1.5s infinite;
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .gold-text {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .gold-border {
            border-color: #facc15;
        }

        .gold-icon {
            color: #facc15;
        }

        .header-gold {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
            border: 1px solid rgba(250, 204, 21, 0.2);
        }

        .dark .header-gold {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.15) 0%, rgba(234, 179, 8, 0.1) 100%);
            border: 1px solid rgba(250, 204, 21, 0.3);
        }

        .password-strength {
            height: 4px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .strength-weak { background-color: #ef4444; width: 25%; }
        .strength-fair { background-color: #f59e0b; width: 50%; }
        .strength-good { background-color: #10b981; width: 75%; }
        .strength-strong { background-color: #10b981; width: 100%; }
        
        .gold-strength-weak { background-color: #ef4444; width: 25%; }
        .gold-strength-fair { background-color: #f59e0b; width: 50%; }
        .gold-strength-good { background-color: #facc15; width: 75%; }
        .gold-strength-strong { 
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            width: 100%; 
        }
        
        .checkmark {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            color: white;
            font-size: 10px;
            text-align: center;
            line-height: 16px;
            margin-right: 8px;
        }
    </style>
</head>

<body class="bg-gray-50 dark:bg-dark-primary transition-colors duration-300 min-h-screen flex items-center justify-center gradient-bg">
    <!-- Decorative Elements -->
    <div class="decorative-element top-10 left-10 w-72 h-72 rounded-full bg-gold-500 animate-float"></div>
    <div class="decorative-element bottom-10 right-10 w-96 h-96 rounded-full bg-gold-600 animate-float" style="animation-delay: 2s;"></div>
    <div class="decorative-element top-1/2 left-1/3 w-64 h-64 rounded-full bg-gold-400 animate-float" style="animation-delay: 4s;"></div>

    <!-- Register Container -->
    <div class="w-full max-w-lg mx-4">
        <!-- Register Card -->
        <div class="glass rounded-2xl shadow-xl p-8 animate-fade-in border border-gold-100 dark:border-gold-900">
            <!-- Register Form -->
            <form method="POST" action="{{ route('register') }}">
                @csrf

                <!-- Name Input -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-user mr-2 gold-icon"></i>Full Name
                    </label>
                    <div class="relative">
                        <input 
                            id="name" 
                            type="text" 
                            name="name" 
                            value="{{ old('name') }}" 
                            required 
                            autocomplete="name" 
                            autofocus
                            class="w-full px-4 py-3 form-input border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-gold-500 @error('name') border-red-500 @enderror"
                            placeholder="John Doe"
                        >
                        @error('name')
                            <div class="absolute right-3 top-3 text-red-500">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                        @enderror
                    </div>
                    @error('name')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email Input -->
                <div class="mb-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-envelope mr-2 gold-icon"></i>Email Address
                    </label>
                    <div class="relative">
                        <input 
                            id="email" 
                            type="email" 
                            name="email" 
                            value="{{ old('email') }}" 
                            required 
                            autocomplete="email"
                            class="w-full px-4 py-3 form-input border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-gold-500 @error('email') border-red-500 @enderror"
                            placeholder="you@example.com"
                        >
                        @error('email')
                            <div class="absolute right-3 top-3 text-red-500">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                        @enderror
                    </div>
                    @error('email')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password Input -->
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-lock mr-2 gold-icon"></i>Password
                    </label>
                    <div class="relative">
                        <input 
                            id="password" 
                            type="password" 
                            name="password" 
                            required 
                            autocomplete="new-password"
                            class="w-full px-4 py-3 form-input border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-gold-500 @error('password') border-red-500 @enderror"
                            placeholder="••••••••"
                        >
                        <button type="button" class="absolute right-3 top-3 text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300" onclick="togglePassword('password')">
                            <i class="fas fa-eye"></i>
                        </button>
                        @error('password')
                            <div class="absolute right-10 top-3 text-red-500">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                        @enderror
                    </div>
                    
                    <!-- Password Strength Meter -->
                    <div class="mt-3">
                        <div class="password-strength gold-strength-weak" id="passwordStrength"></div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" id="passwordStrengthText">
                            Password strength: Weak
                        </p>
                        
                        <!-- Password Requirements -->
                        <div class="mt-3 space-y-1">
                            <p class="text-xs font-medium text-gray-700 dark:text-gray-300">Requirements:</p>
                            <div class="flex items-center text-xs text-gray-600 dark:text-gray-400" id="lengthCheck">
                                <span class="checkmark hidden"><i class="fas fa-check"></i></span>
                                <span class="check-placeholder w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 mr-2"></span>
                                At least 8 characters
                            </div>
                            <div class="flex items-center text-xs text-gray-600 dark:text-gray-400" id="lowercaseCheck">
                                <span class="checkmark hidden"><i class="fas fa-check"></i></span>
                                <span class="check-placeholder w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 mr-2"></span>
                                Lowercase letter
                            </div>
                            <div class="flex items-center text-xs text-gray-600 dark:text-gray-400" id="uppercaseCheck">
                                <span class="checkmark hidden"><i class="fas fa-check"></i></span>
                                <span class="check-placeholder w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 mr-2"></span>
                                Uppercase letter
                            </div>
                            <div class="flex items-center text-xs text-gray-600 dark:text-gray-400" id="numberCheck">
                                <span class="checkmark hidden"><i class="fas fa-check"></i></span>
                                <span class="check-placeholder w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 mr-2"></span>
                                Number
                            </div>
                            <div class="flex items-center text-xs text-gray-600 dark:text-gray-400" id="specialCheck">
                                <span class="checkmark hidden"><i class="fas fa-check"></i></span>
                                <span class="check-placeholder w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 mr-2"></span>
                                Special character
                            </div>
                        </div>
                    </div>
                    
                    @error('password')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Confirm Password Input -->
                <div class="mb-6">
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-lock mr-2 gold-icon"></i>Confirm Password
                    </label>
                    <div class="relative">
                        <input 
                            id="password_confirmation" 
                            type="password" 
                            name="password_confirmation" 
                            required 
                            autocomplete="new-password"
                            class="w-full px-4 py-3 form-input border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-gold-500"
                            placeholder="••••••••"
                        >
                        <button type="button" class="absolute right-3 top-3 text-gold-600 hover:text-gold-700 dark:text-gold-400 dark:hover:text-gold-300" onclick="togglePassword('password_confirmation')">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <!-- Terms Agreement -->
                <div class="mb-8">
                    <div class="flex items-start">
                        <input 
                            id="terms" 
                            name="terms" 
                            type="checkbox" 
                            required
                            class="h-4 w-4 mt-1 rounded border-gray-300 text-gold-500 focus:ring-gold-500 dark:border-gray-600 dark:bg-gray-800"
                        >
                        <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                            I agree to the 
                            <a href="#" class="text-gold-600 hover:text-gold-700 transition-colors dark:text-gold-400">Terms of Service</a> 
                            and 
                            <a href="#" class="text-gold-600 hover:text-gold-700 transition-colors dark:text-gold-400">Privacy Policy</a>
                        </label>
                    </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="w-full btn-primary text-gray-800 font-semibold py-3 px-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500 mb-4">
                    <i class="fas fa-user-plus mr-2"></i>Create Account
                </button>
                
                <!-- Login Link -->
                <div class="text-center">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        Already have an account?
                        <a href="{{ route('login') }}" class="font-medium text-gold-600 hover:text-gold-700 transition-colors dark:text-gold-400">
                            Sign in
                        </a>
                    </p>
                </div>
            </form>
        </div>

        <!-- Footer -->
        <div class="text-center mt-8">
            <p class="text-xs text-gray-500 dark:text-gray-400">
                &copy; {{ date('Y') }} <span class="gold-text font-medium">CRM Pro</span>. All rights reserved.
            </p>
        </div>
    </div>

    <script>
        // Theme toggle functionality
        const themeToggle = document.getElementById('themeToggle');
        const htmlElement = document.documentElement;

        // Check for saved theme preference or respect OS preference
        if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            htmlElement.classList.add('dark');
            themeToggle.checked = true;
        } else {
            htmlElement.classList.remove('dark');
            themeToggle.checked = false;
        }

        // Toggle theme on checkbox change
        themeToggle.addEventListener('change', function() {
            if (this.checked) {
                htmlElement.classList.add('dark');
                localStorage.theme = 'dark';
            } else {
                htmlElement.classList.remove('dark');
                localStorage.theme = 'light';
            }
        });

        // Add floating animation to decorative elements
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.decorative-element');
            elements.forEach((el, index) => {
                el.style.animationDelay = `${index * 2}s`;
            });
            
            // Add shimmer effect to gold text elements
            const goldTextElements = document.querySelectorAll('.gold-text');
            goldTextElements.forEach(el => {
                el.style.backgroundSize = '200% 100%';
                el.style.animation = 'shimmer 3s infinite linear';
            });
        });

        // Password visibility toggle
        function togglePassword(fieldId) {
            const passwordField = document.getElementById(fieldId);
            const eyeIcon = passwordField.nextElementSibling.querySelector('i');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }

        // Password strength indicator
        const passwordInput = document.getElementById('password');
        const strengthBar = document.getElementById('passwordStrength');
        const strengthText = document.getElementById('passwordStrengthText');

        // Check requirements elements
        const lengthCheck = document.getElementById('lengthCheck');
        const lowercaseCheck = document.getElementById('lowercaseCheck');
        const uppercaseCheck = document.getElementById('uppercaseCheck');
        const numberCheck = document.getElementById('numberCheck');
        const specialCheck = document.getElementById('specialCheck');

        function updateRequirementCheck(element, isValid) {
            const checkmark = element.querySelector('.checkmark');
            const placeholder = element.querySelector('.check-placeholder');
            
            if (isValid) {
                checkmark.classList.remove('hidden');
                placeholder.classList.add('hidden');
                element.classList.remove('text-gray-600', 'dark:text-gray-400');
                element.classList.add('text-green-600', 'dark:text-green-400');
            } else {
                checkmark.classList.add('hidden');
                placeholder.classList.remove('hidden');
                element.classList.remove('text-green-600', 'dark:text-green-400');
                element.classList.add('text-gray-600', 'dark:text-gray-400');
            }
        }

        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            let feedback = '';

            // Check password length
            const hasLength = password.length >= 8;
            if (hasLength) strength += 1;
            updateRequirementCheck(lengthCheck, hasLength);
            
            // Check for lowercase letters
            const hasLowercase = /[a-z]/.test(password);
            if (hasLowercase) strength += 1;
            updateRequirementCheck(lowercaseCheck, hasLowercase);
            
            // Check for uppercase letters
            const hasUppercase = /[A-Z]/.test(password);
            if (hasUppercase) strength += 1;
            updateRequirementCheck(uppercaseCheck, hasUppercase);
            
            // Check for numbers
            const hasNumber = /[0-9]/.test(password);
            if (hasNumber) strength += 1;
            updateRequirementCheck(numberCheck, hasNumber);
            
            // Check for special characters
            const hasSpecial = /[^A-Za-z0-9]/.test(password);
            if (hasSpecial) strength += 1;
            updateRequirementCheck(specialCheck, hasSpecial);

            // Update strength indicator
            switch(strength) {
                case 0:
                case 1:
                    strengthBar.className = 'password-strength gold-strength-weak';
                    feedback = 'Weak';
                    break;
                case 2:
                    strengthBar.className = 'password-strength gold-strength-fair';
                    feedback = 'Fair';
                    break;
                case 3:
                    strengthBar.className = 'password-strength gold-strength-good';
                    feedback = 'Good';
                    break;
                case 4:
                case 5:
                    strengthBar.className = 'password-strength gold-strength-strong';
                    feedback = 'Strong';
                    break;
            }

            strengthText.textContent = `Password strength: ${feedback}`;
        });
        
        // Initialize form input animations
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('ring-2', 'ring-gold-500', 'rounded-xl');
            });

            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('ring-2', 'ring-gold-500', 'rounded-xl');
            });
        });
    </script>
</body>
</html>