<?php $__env->startSection('title', 'Create Account'); ?>
<?php $__env->startSection('content'); ?>

<div class="flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 lg:px-8 pb-20"
     x-data="registrationForm()" x-cloak>
    <div class="w-full max-w-5xl">
        <!-- Professional Trading Registration Card -->
        <div class="trading-card rounded-2xl px-8 py-10 relative overflow-hidden">
            <!-- Header Section -->
            <div class="mb-8 text-center relative z-10">
                <div class="flex items-center justify-center mb-6">
                    <a href="/" class="inline-block">
                        <img src="<?php echo e(asset('storage/app/public/'.$settings->logo)); ?>"
                             class="h-12 w-auto transition-transform hover:scale-105"
                             alt="<?php echo e($settings->site_name); ?>" />
                    </a>
                </div>

                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                    Join <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400"><?php echo e($settings->site_name); ?></span>
                </h1>
                <p class="text-gray-600 dark:text-gray-400 text-lg">
                    Start your professional trading journey today
                </p>

                <!-- Trading Stats -->
                <div class="flex items-center justify-center gap-8 mt-6 text-sm">
                    <div class="text-center">
                        <div class="flex items-center gap-1 text-green-600 dark:text-green-400">
                            <i data-lucide="trending-up" class="w-4 h-4"></i>
                            <span class="font-semibold">99.9% Uptime</span>
                        </div>
                        <div class="text-gray-500 dark:text-gray-400">Reliable Platform</div>
                    </div>
                    <div class="w-px h-8 bg-gray-300 dark:bg-gray-600"></div>
                    <div class="text-center">
                        <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
                            <i data-lucide="shield-check" class="w-4 h-4"></i>
                            <span class="font-semibold">Bank-Grade Security</span>
                        </div>
                        <div class="text-gray-500 dark:text-gray-400">Protected Funds</div>
                    </div>
                    <div class="w-px h-8 bg-gray-300 dark:bg-gray-600"></div>
                    <div class="text-center">
                        <div class="flex items-center gap-1 text-purple-600 dark:text-purple-400">
                            <i data-lucide="users" class="w-4 h-4"></i>
                            <span class="font-semibold">1M+ Traders</span>
                        </div>
                        <div class="text-gray-500 dark:text-gray-400">Global Community</div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Progress Steps -->
            <div class="mb-8 relative" x-cloak>
                <div class="step-indicator flex items-center justify-center">
                    <div class="flex items-center space-x-2">
                        <template x-for="(step, index) in steps" :key="index">
                            <div class="flex items-center">
                                <!-- Step Circle -->
                                <div class="relative">
                                    <div class="flex items-center justify-center w-10 h-10 rounded-full text-sm font-semibold transition-all duration-300 shadow-lg"
                                         :class="currentStep > index ? 'bg-gradient-to-r from-green-500 to-green-600 text-white shadow-green-500/30' :
                                                currentStep === index ? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-blue-500/30' :
                                                'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
                                        <span x-show="currentStep <= index" x-text="index + 1"></span>
                                        <i x-show="currentStep > index" data-lucide="check" class="w-5 h-5"></i>
                                    </div>
                                    <!-- Pulse Animation for Current Step -->
                                    <div x-show="currentStep === index"
                                         class="absolute inset-0 w-10 h-10 rounded-full bg-blue-500 animate-ping opacity-20"></div>
                                </div>

                                <!-- Step Label -->
                                <div class="ml-3 mr-6">
                                    <div class="text-sm font-semibold transition-colors duration-300"
                                         :class="currentStep >= index ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'"
                                         x-text="step.title"></div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400" x-text="step.description"></div>
                                </div>

                                <!-- Connector Line -->
                                <div x-show="index < steps.length - 1"
                                     class="w-16 h-0.5 transition-colors duration-300"
                                     :class="currentStep > index ? 'bg-gradient-to-r from-green-500 to-blue-500' : 'bg-gray-300 dark:bg-gray-600'"></div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <form action="<?php echo e(route('register')); ?>" method="POST" class="space-y-8" id="register" x-cloak>
                <?php echo csrf_field(); ?>

                <!-- Step 1: Personal Information -->
                <div x-show="currentStep === 0"
                     x-transition:enter="transition ease-out duration-500"
                     x-transition:enter-start="opacity-0 transform translate-x-8"
                     x-transition:enter-end="opacity-100 transform translate-x-0">

                    <div class="bg-gradient-to-r from-blue-50/50 to-indigo-50/50 dark:from-blue-900/10 dark:to-indigo-900/10 rounded-xl p-6 mb-6 border border-blue-200/30 dark:border-blue-700/30">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                                <i data-lucide="user-circle" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Personal Information</h3>
                                <p class="text-gray-600 dark:text-gray-400 text-sm">Tell us about yourself to create your trading profile</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Username Field -->
                        <div class="space-y-2">
                            <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Trading Username <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="user" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="text" name="username" id="username" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="Choose your trading username">
                            </div>
                            <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i><?php echo e($message); ?>

                                </p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Full Name Field -->
                        <div class="space-y-2">
                            <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Full Name <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="user-check" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="text" name="name" id="name" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="Enter your full legal name">
                            </div>
                            <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i><?php echo e($message); ?>

                                </p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Email Field -->
                        <div class="space-y-2">
                            <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Email Address <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="mail" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="email" name="email" id="email" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="your.email@example.com">
                            </div>
                            <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i><?php echo e($message); ?>

                                </p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Phone Field -->
                        <div class="space-y-2">
                            <label for="phone" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Phone Number <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="phone" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="tel" name="phone" id="phone" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="+1 (555) 123-4567">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Location & Currency -->
                <div x-show="currentStep === 1"
                     x-transition:enter="transition ease-out duration-500"
                     x-transition:enter-start="opacity-0 transform translate-x-8"
                     x-transition:enter-end="opacity-100 transform translate-x-0">

                    <div class="bg-gradient-to-r from-purple-50/50 to-pink-50/50 dark:from-purple-900/10 dark:to-pink-900/10 rounded-xl p-6 mb-6 border border-purple-200/30 dark:border-purple-700/30">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                                <i data-lucide="globe-2" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Location & Currency</h3>
                                <p class="text-gray-600 dark:text-gray-400 text-sm">Set your regional preferences for optimal trading experience</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Country Field -->
                        <div class="space-y-2">
                            <label for="country" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Country <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
                                    <i data-lucide="flag" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <select name="country" id="country" required
                                        class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium appearance-none">
                                    <option selected disabled>Select your country</option>
                                    <?php echo $__env->make('auth.countries', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
                                    <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Currency Field -->
                        <div class="space-y-2">
                            <label for="select_c" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Preferred Currency <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
                                    <i data-lucide="banknote" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input name="s_currency" value="<?php echo e($settings->s_currency); ?>" id="s_c" type="hidden">
                                <select name="currency" id="select_c" onchange="changecurr()" required
                                        class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium appearance-none">
                                    <option selected disabled>Select trading currency</option>
                                    <?php $__currentLoopData = $currencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $currency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option id="<?php echo e($key); ?>" value="<?php echo html_entity_decode($currency); ?>">
                                            <?php echo e($key . ' (' . html_entity_decode($currency) . ')'); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
                                    <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Trading Preferences Info -->
                    <div class="mt-6 p-4 bg-blue-50/50 dark:bg-blue-900/10 rounded-xl border border-blue-200/30 dark:border-blue-700/30">
                        <div class="flex items-start gap-3">
                            <i data-lucide="info" class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0"></i>
                            <div class="text-sm">
                                <p class="text-blue-900 dark:text-blue-200 font-medium mb-1">Regional Trading Information</p>
                                <p class="text-blue-700 dark:text-blue-300">Your location helps us provide region-specific features, compliance, and optimal server connections for faster trading execution.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Security -->
                <div x-show="currentStep === 2"
                     x-transition:enter="transition ease-out duration-500"
                     x-transition:enter-start="opacity-0 transform translate-x-8"
                     x-transition:enter-end="opacity-100 transform translate-x-0">

                    <div class="bg-gradient-to-r from-green-50/50 to-emerald-50/50 dark:from-green-900/10 dark:to-emerald-900/10 rounded-xl p-6 mb-6 border border-green-200/30 dark:border-green-700/30">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
                                <i data-lucide="shield-check" class="w-5 h-5 text-green-600 dark:text-green-400"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Account Security</h3>
                                <p class="text-gray-600 dark:text-gray-400 text-sm">Secure your trading account with a strong password</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Password Field -->
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="lock" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="password" name="password" id="password" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="Create a strong password">
                            </div>
                            <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i><?php echo e($message); ?>

                                </p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="space-y-2">
                            <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                Confirm Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i data-lucide="key" class="h-5 w-5 text-gray-400 group-focus-within:text-blue-500 transition-colors"></i>
                                </div>
                                <input type="password" name="password_confirmation" id="password_confirmation" required
                                       class="block w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800/50 pl-12 pr-4 py-3.5 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200 text-sm font-medium"
                                       placeholder="Confirm your password">
                            </div>
                        </div>
                    </div>

                    <?php if(Session::has('ref_by')): ?>
                        <input type="hidden" name="ref_by" value="<?php echo e(session('ref_by')); ?>" required>
                    <?php endif; ?>

                    <!-- Password Requirements -->
                    <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password Requirements:</p>
                        <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                            <li class="flex items-center gap-2">
                                <i data-lucide="check" class="w-3 h-3 text-green-500"></i>
                                At least 8 characters long
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check" class="w-3 h-3 text-green-500"></i>
                                Contains uppercase and lowercase letters
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check" class="w-3 h-3 text-green-500"></i>
                                Includes at least one number or special character
                            </li>
                        </ul>
                    </div>

                    <!-- Terms Agreement -->
                    <div class="mt-6 p-6 bg-blue-50/50 dark:bg-blue-900/10 rounded-xl border border-blue-200/30 dark:border-blue-700/30">
                        <div class="flex items-start gap-4">
                            <div class="flex items-center h-5 mt-1">
                                <input type="checkbox" name="agree" id="agree" required
                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-blue-600 focus:ring-2 focus:ring-blue-500/20 transition-colors">
                            </div>
                            <div class="flex-1">
                                <label for="agree" class="text-sm font-medium text-gray-700 dark:text-gray-300 leading-relaxed">
                                    I agree to <?php echo e($settings->site_name); ?>'s
                                    <a href="rules" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold underline underline-offset-2">
                                        Terms and Conditions
                                    </a>
                                    and acknowledge that I have read and understood the
                                    <a href="#" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold underline underline-offset-2">
                                        Privacy Policy
                                    </a>
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                    By creating an account, you confirm that you are at least 18 years old and agree to receive trading updates and market insights.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Navigation Buttons -->
                <div class="flex flex-col sm:flex-row justify-between items-center mt-10 pt-8 border-t border-gray-200 dark:border-gray-700 gap-4" x-cloak>
                    <!-- Previous Button -->
                    <button type="button" @click="previousStep()"
                            x-show="currentStep > 0"
                            class="inline-flex items-center gap-2 px-6 py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all duration-200 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800/50 group">
                        <i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
                        <span class="font-medium">Previous Step</span>
                    </button>

                    <!-- Progress Indicator -->
                    <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                        <span x-text="`Step ${currentStep + 1} of ${steps.length}`"></span>
                    </div>

                    <!-- Next Button -->
                    <button type="button" @click="nextStep()"
                            x-show="currentStep < steps.length - 1"
                            class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
                        <span>Continue</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                    </button>

                    <!-- Create Account Button -->
                    <button type="submit" x-show="currentStep === steps.length - 1"
                            class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
                        <i data-lucide="user-plus" class="w-5 h-5"></i>
                        <span>Create Trading Account</span>
                        <i data-lucide="sparkles" class="w-4 h-4 group-hover:rotate-12 transition-transform"></i>
                    </button>
                </div>

                <!-- Professional Footer -->
                <div class="mt-8 text-center space-y-4">
                    <div class="flex items-center justify-center gap-6 text-sm">
                        <p class="text-gray-600 dark:text-gray-400">
                            Already have an account?
                            <a href="<?php echo e(route('login')); ?>"
                               class="font-semibold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors underline underline-offset-2">
                                Sign in here
                            </a>
                        </p>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="flex items-center justify-center gap-8 py-4 text-xs text-gray-500 dark:text-gray-400">
                        <div class="flex items-center gap-1">
                            <i data-lucide="shield" class="w-3 h-3"></i>
                            <span>SSL Secured</span>
                        </div>
                        <div class="flex items-center gap-1">
                            <i data-lucide="lock" class="w-3 h-3"></i>
                            <span>256-bit Encryption</span>
                        </div>
                        <div class="flex items-center gap-1">
                            <i data-lucide="award" class="w-3 h-3"></i>
                            <span>Regulated Platform</span>
                        </div>
                    </div>

                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        © <?php echo e(date('Y')); ?> <?php echo e($settings->site_name); ?>. All rights reserved. |
                        Licensed and regulated trading platform.
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>





    <style>
        .skiptranslate {
            display: none !important;
        }
        body {
            top: 0 !important;
        }
        [x-cloak] {
            display: none !important;
        }
    </style>

    <div id="google_translate_element" style="display:none"></div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: "en"}, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="https://translate.google.com/translate_a/elementa0d8.js?cb=googleTranslateElementInit"></script>

    <script>
        function changecurr() {
            var e = document.getElementById("select_c");
            var selected = e.options[e.selectedIndex].id;
            document.getElementById("s_c").value = selected;
            console.log(selected);
        }

        function registrationForm() {
            return {
                currentStep: 0,
                steps: [
                    {
                        title: 'Personal Info',
                        description: 'Basic details',
                        completed: false
                    },
                    {
                        title: 'Location',
                        description: 'Regional settings',
                        completed: false
                    },
                    {
                        title: 'Security',
                        description: 'Account protection',
                        completed: false
                    }
                ],

                nextStep() {
                    if (this.validateCurrentStep()) {
                        this.steps[this.currentStep].completed = true;
                        if (this.currentStep < this.steps.length - 1) {
                            this.currentStep++;
                            this.scrollToTop();
                        }
                    }
                },

                previousStep() {
                    if (this.currentStep > 0) {
                        this.currentStep--;
                        this.scrollToTop();
                    }
                },

                scrollToTop() {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                },

                validateCurrentStep() {
                    const step = this.currentStep;
                    let isValid = true;
                    let missingFields = [];

                    if (step === 0) {
                        // Validate personal information
                        const fields = [
                            { id: 'username', name: 'Username' },
                            { id: 'name', name: 'Full Name' },
                            { id: 'email', name: 'Email' },
                            { id: 'phone', name: 'Phone Number' }
                        ];

                        fields.forEach(field => {
                            const value = document.getElementById(field.id).value.trim();
                            if (!value) {
                                missingFields.push(field.name);
                                isValid = false;
                            }
                        });

                        // Email validation
                        const email = document.getElementById('email').value.trim();
                        if (email && !email.includes('@')) {
                            missingFields.push('Valid Email');
                            isValid = false;
                        }

                    } else if (step === 1) {
                        // Validate location
                        const country = document.getElementById('country').value;
                        const currency = document.getElementById('select_c').value;

                        if (!country || country === 'Select your country') {
                            missingFields.push('Country');
                            isValid = false;
                        }

                        if (!currency || currency === 'Select trading currency') {
                            missingFields.push('Currency');
                            isValid = false;
                        }

                    } else if (step === 2) {
                        // Validate security
                        const password = document.getElementById('password').value;
                        const confirmPassword = document.getElementById('password_confirmation').value;
                        const agree = document.getElementById('agree').checked;

                        if (!password) {
                            missingFields.push('Password');
                            isValid = false;
                        } else if (password.length < 8) {
                            missingFields.push('Password (minimum 8 characters)');
                            isValid = false;
                        }

                        if (!confirmPassword) {
                            missingFields.push('Password Confirmation');
                            isValid = false;
                        } else if (password !== confirmPassword) {
                            missingFields.push('Matching Passwords');
                            isValid = false;
                        }

                        if (!agree) {
                            missingFields.push('Terms Agreement');
                            isValid = false;
                        }
                    }

                    if (!isValid) {
                        const message = missingFields.length === 1
                            ? `Please provide: ${missingFields[0]}`
                            : `Please provide: ${missingFields.join(', ')}`;

                        // Show professional alert
                        this.showAlert('Incomplete Information', message, 'warning');
                    }

                    return isValid;
                },

                showAlert(title, message, type = 'info') {
                    // Simple alert fallback if SweetAlert2 is not available
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: title,
                            text: message,
                            icon: type,
                            confirmButtonText: 'Got it',
                            confirmButtonColor: '#3B82F6'
                        });
                    } else {
                        alert(`${title}: ${message}`);
                    }
                }
            }
        }

        // Enhanced initialization with better error handling
        document.addEventListener('alpine:init', () => {
            setTimeout(() => {
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            }, 100);
        });

        document.addEventListener('alpine:updated', () => {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });

        // Form submission enhancement
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('register');
            if (form) {
                form.addEventListener('submit', function(e) {
                    const submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-2"></i>Creating Account...';
                    }
                });
            }
        });
    </script>

</body>
</html>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.guest1', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\bluetrade\resources\views/auth/register.blade.php ENDPATH**/ ?>