<?php $__env->startSection('content'); ?>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-indigo-900 to-gray-900 relative overflow-hidden py-12">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-teal-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-40 left-40 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <div class="relative z-10 w-full max-w-3xl mx-auto px-6">
        <!-- Logo & Title -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-teal-500 mb-4">
                <i class="fas fa-user-plus text-2xl text-white"></i>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">Create Your Account</h1>
            <p class="text-gray-400">Join our community and get started today</p>
        </div>

        <!-- Registration Form Card -->
        <div class="backdrop-blur-xl bg-white/10 rounded-3xl p-8 shadow-2xl border border-white/20">
            <?php if($errors->any()): ?>
                <div class="mb-6 p-4 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    Please fix the errors below.
                </div>
            <?php endif; ?>

            <form method="POST" action="<?php echo e(route('register.submit')); ?>" x-data="registrationForm()" @submit.prevent="submitForm">
                <?php echo csrf_field(); ?>

                <!-- Progress Steps -->
                <div class="mb-8">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-400">Step <span x-text="currentStep"></span> of 3</span>
                        <span class="text-sm text-gray-400" x-text="Math.round((currentStep / 3) * 100) + '% complete'"></span>
                    </div>
                    <div class="w-full bg-white/5 rounded-full h-2">
                        <div 
                            class="bg-gradient-to-r from-indigo-500 to-teal-500 h-2 rounded-full transition-all duration-500"
                            :style="'width: ' + ((currentStep / 3) * 100) + '%'"
                        ></div>
                    </div>
                </div>

                <!-- Step 1: Basic Information -->
                <div x-show="currentStep === 1" x-transition class="space-y-6">
                    <h3 class="text-lg font-semibold text-white mb-4">
                        <i class="fas fa-user mr-2 text-indigo-400"></i>Basic Information
                    </h3>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Full Name *</label>
                        <input 
                            type="text" 
                            name="name" 
                            x-model="form.name"
                            value="<?php echo e(old('name')); ?>"
                            class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                            placeholder="Enter your full name"
                            required
                        >
                        <?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="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Username *</label>
                        <div class="relative">
                            <input 
                                type="text" 
                                name="username" 
                                x-model="form.username"
                                value="<?php echo e(old('username')); ?>"
                                class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                                placeholder="Choose a username"
                                required
                            >
                            <span x-show="checkingUsername" class="absolute right-4 top-1/2 -translate-y-1/2">
                                <i class="fas fa-spinner fa-spin text-gray-400"></i>
                            </span>
                        </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="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Email Address *</label>
                        <input 
                            type="email" 
                            name="email" 
                            x-model="form.email"
                            value="<?php echo e(old('email')); ?>"
                            class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                            placeholder="Enter your email"
                            required
                        >
                        <?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="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                <!-- Step 2: Role Selection & Password -->
                <div x-show="currentStep === 2" x-transition class="space-y-6">
                    <h3 class="text-lg font-semibold text-white mb-4">
                        <i class="fas fa-id-badge mr-2 text-indigo-400"></i>Role & Security
                    </h3>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Select Your Role *</label>
                        <div class="grid grid-cols-2 gap-3">
                            <?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $roleOption): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <label class="relative flex items-center p-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl cursor-pointer transition-all" :class="{ 'ring-2 ring-indigo-500 bg-white/10': form.role === '<?php echo e($roleOption->name); ?>' }">
                                    <input 
                                        type="radio" 
                                        name="role" 
                                        value="<?php echo e($roleOption->name); ?>"
                                        x-model="form.role"
                                        class="sr-only"
                                        @change="loadRoleFields('<?php echo e($roleOption->name); ?>')"
                                        required
                                    >
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-teal-500 flex items-center justify-center mr-3">
                                            <i class="fas fa-<?php echo e(match($roleOption->name) {
                                                    'Members' => 'user',
                                                    'Trainers' => 'dumbbell',
                                                    'Trainees' => 'graduation-cap',
                                                    'Mentor' => 'chalkboard-teacher',
                                                    'Mentee' => 'user-graduate',
                                                    'Partners' => 'handshake',
                                                    'Contributor' => 'pen-nib',
                                                    'Health Marketor' => 'heartbeat',
                                                    default => 'user'
                                                }); ?> text-white"></i>
                                        </div>
                                        <span class="text-white text-sm font-medium"><?php echo e($roleOption->name); ?></span>
                                    </div>
                                </label>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                        <?php $__errorArgs = ['role'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Password *</label>
                        <div class="relative">
                            <input 
                                :type="showPassword ? 'text' : 'password'" 
                                name="password" 
                                x-model="form.password"
                                class="w-full px-4 py-3 pr-12 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                                placeholder="Create a strong password"
                                required
                            >
                            <button type="button" @click="showPassword = !showPassword" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
                                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                            </button>
                        </div>
                        <p class="mt-2 text-gray-500 text-xs">Min 8 characters, mixed case, numbers & symbols</p>
                        <?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="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div>
                        <label class="block text-gray-300 text-sm font-medium mb-2">Confirm Password *</label>
                        <input 
                            type="password" 
                            name="password_confirmation" 
                            x-model="form.password_confirmation"
                            class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
                            placeholder="Confirm your password"
                            required
                        >
                        <?php $__errorArgs = ['password_confirmation'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                <!-- Step 3: Role-Specific Fields & Terms -->
                <div x-show="currentStep === 3" x-transition class="space-y-6">
                    <h3 class="text-lg font-semibold text-white mb-4">
                        <i class="fas fa-clipboard-list mr-2 text-indigo-400"></i>Additional Information
                    </h3>

                    <!-- Role-specific fields container -->
                    <div id="role-specific-fields" x-html="roleFieldsHtml"></div>

                    <div class="flex items-start">
                        <input 
                            type="checkbox" 
                            name="terms" 
                            id="terms"
                            x-model="form.terms"
                            class="w-4 h-4 mt-1 rounded border-white/20 bg-white/5 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0"
                            required
                        >
                        <label for="terms" class="ml-3 text-sm text-gray-400">
                            I agree to the <a href="#" class="text-indigo-400 hover:text-indigo-300">Terms of Service</a> 
                            and <a href="#" class="text-indigo-400 hover:text-indigo-300">Privacy Policy</a>
                        </label>
                    </div>
                    <?php $__errorArgs = ['terms'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="mt-2 text-red-400 text-sm"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <!-- Navigation Buttons -->
                <div class="flex justify-between mt-8">
                    <button 
                        type="button"
                        x-show="currentStep > 1"
                        @click="currentStep--"
                        class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white font-medium transition-all"
                    >
                        <i class="fas fa-arrow-left mr-2"></i>Previous
                    </button>
                    <div class="ml-auto">
                        <button 
                            type="button"
                            x-show="currentStep < 3"
                            @click="nextStep"
                            class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-teal-600 hover:from-indigo-700 hover:to-teal-700 rounded-xl text-white font-medium transition-all"
                        >
                            Next<i class="fas fa-arrow-right ml-2"></i>
                        </button>
                        <button 
                            type="submit"
                            x-show="currentStep === 3"
                            :disabled="loading"
                            class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-teal-600 hover:from-indigo-700 hover:to-teal-700 rounded-xl text-white font-medium transition-all disabled:opacity-50"
                        >
                            <span x-show="!loading"><i class="fas fa-check mr-2"></i>Create Account</span>
                            <span x-show="loading"><i class="fas fa-spinner fa-spin mr-2"></i>Creating...</span>
                        </button>
                    </div>
                </div>
            </form>

            <!-- Divider -->
            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-white/10"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-4 bg-transparent text-gray-400">Or sign up with</span>
                </div>
            </div>

            <!-- Social Registration -->
            <div class="grid grid-cols-3 gap-3">
                <a href="<?php echo e(route('auth.social.redirect', 'google')); ?>" class="flex items-center justify-center py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white transition-all">
                    <i class="fab fa-google text-lg"></i>
                </a>
                <a href="<?php echo e(route('auth.social.redirect', 'facebook')); ?>" class="flex items-center justify-center py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white transition-all">
                    <i class="fab fa-facebook-f text-lg"></i>
                </a>
                <a href="<?php echo e(route('auth.social.redirect', 'github')); ?>" class="flex items-center justify-center py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white transition-all">
                    <i class="fab fa-github text-lg"></i>
                </a>
            </div>
        </div>

        <!-- Login Link -->
        <div class="text-center mt-6">
            <p class="text-gray-400">
                Already have an account? 
                <a href="<?php echo e(route('login')); ?>" class="text-indigo-400 hover:text-indigo-300 font-medium transition-colors">
                    Sign in
                </a>
            </p>
        </div>
    </div>
</div>

<script>
function registrationForm() {
    return {
        currentStep: 1,
        loading: false,
        showPassword: false,
        checkingUsername: false,
        roleFieldsHtml: '',
        form: {
            name: '<?php echo e(old('name')); ?>',
            username: '<?php echo e(old('username')); ?>',
            email: '<?php echo e(old('email')); ?>',
            role: '<?php echo e(old('role')); ?>',
            password: '',
            password_confirmation: '',
            terms: false,
        },
        
        nextStep() {
            // Basic validation
            if (this.currentStep === 1) {
                if (!this.form.name || !this.form.username || !this.form.email) {
                    alert('Please fill in all required fields.');
                    return;
                }
            }
            if (this.currentStep === 2) {
                if (!this.form.role || !this.form.password || !this.form.password_confirmation) {
                    alert('Please select a role and set your password.');
                    return;
                }
                if (this.form.password !== this.form.password_confirmation) {
                    alert('Passwords do not match.');
                    return;
                }
            }
            if (this.currentStep < 3) {
                this.currentStep++;
            }
        },
        
        async loadRoleFields(role) {
            try {
                const response = await fetch('<?php echo e(route('register.role-fields')); ?>?role=' + encodeURIComponent(role));
                const data = await response.json();
                if (data.fields) {
                    this.roleFieldsHtml = this.renderFields(data.fields);
                }
            } catch (error) {
                console.error('Error loading role fields:', error);
            }
        },
        
        renderFields(fields) {
            let html = '<div class="space-y-4">';
            fields.forEach(field => {
                html += `<div>
                    <label class="block text-gray-300 text-sm font-medium mb-2">${field.label}${field.required ? ' *' : ''}</label>`;
                
                if (field.type === 'textarea') {
                    html += `<textarea name="${field.name}" rows="3" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" ${field.required ? 'required' : ''}></textarea>`;
                } else if (field.type === 'select') {
                    html += `<select name="${field.name}" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" ${field.required ? 'required' : ''}>
                        <option value="">Select...</option>`;
                    field.options.forEach(opt => {
                        html += `<option value="${opt}">${opt.charAt(0).toUpperCase() + opt.slice(1)}</option>`;
                    });
                    html += `</select>`;
                } else if (field.type === 'number') {
                    html += `<input type="number" name="${field.name}" min="0" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" ${field.required ? 'required' : ''}>`;
                } else {
                    html += `<input type="${field.type}" name="${field.name}" class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" ${field.required ? 'required' : ''}>`;
                }
                
                html += `</div>`;
            });
            html += '</div>';
            return html;
        },
        
        async submitForm(event) {
            this.loading = true;
            event.target.submit();
        }
    }
}
</script>

<style>
    @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); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
</style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.guest', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/auth/register.blade.php ENDPATH**/ ?>