

<?php $__env->startSection('title', 'Register — ' . $course->title); ?>
<?php $__env->startSection('meta-description', 'Register and enroll in ' . $course->title); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-6">
        <a href="<?php echo e(route('self-paced.public.index')); ?>" class="hover:text-indigo-600 transition">Courses</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="<?php echo e(route('self-paced.public.courses.show', $course)); ?>" class="hover:text-indigo-600 transition truncate max-w-[160px]"><?php echo e($course->title); ?></a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">Register</span>
    </nav>

    
    <div class="bg-indigo-50 border border-indigo-100 rounded-2xl p-4 mb-6 flex items-center gap-4">
        <div class="w-14 h-14 rounded-xl overflow-hidden flex-shrink-0">
            <?php if($course->featured_image && file_exists(public_path('storage/' . $course->featured_image))): ?>
                <img src="<?php echo e(asset('storage/' . $course->featured_image)); ?>" alt="<?php echo e($course->title); ?>" class="w-full h-full object-cover">
            <?php else: ?>
                <div class="w-full h-full flex items-center justify-center"
                     style="background-color: <?php echo e($course->category->color ?? '#6366f1'); ?>22;">
                    <i class="<?php echo e($course->category->icon ?? 'fas fa-book'); ?> text-xl"
                       style="color: <?php echo e($course->category->color ?? '#6366f1'); ?>;"></i>
                </div>
            <?php endif; ?>
        </div>
        <div class="flex-1 min-w-0">
            <p class="text-sm font-bold text-gray-800 truncate"><?php echo e($course->title); ?></p>
            <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                <span class="flex items-center gap-1">
                    <i class="fas fa-clock text-indigo-400"></i><?php echo e($course->getFormattedDuration()); ?>

                </span>
                <span class="flex items-center gap-1 font-semibold <?php echo e($course->isFree() ? 'text-green-600' : 'text-amber-600'); ?>">
                    <i class="fas fa-money-bill"></i><?php echo e($course->getFormattedFee()); ?>

                </span>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden"
         x-data="registrationForm()">

        
        <div class="flex border-b border-gray-100">
            <button @click="step = 1"
                    :class="step === 1 ? 'border-b-2 border-indigo-600 text-indigo-700 bg-indigo-50' : 'text-gray-400'"
                    class="flex-1 flex items-center justify-center gap-2 py-4 text-sm font-semibold transition">
                <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
                      :class="step > 1 ? 'bg-green-500 text-white' : (step === 1 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-500')">
                    <template x-if="step > 1"><i class="fas fa-check text-[10px]"></i></template>
                    <template x-if="step <= 1"><span>1</span></template>
                </span>
                Personal Details
            </button>
            <button @click="step === 1 ? null : step = 2"
                    :class="step === 2 ? 'border-b-2 border-indigo-600 text-indigo-700 bg-indigo-50' : 'text-gray-400'"
                    class="flex-1 flex items-center justify-center gap-2 py-4 text-sm font-semibold transition">
                <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
                      :class="step === 2 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-500'">
                    2
                </span>
                Review & Pay
            </button>
        </div>

        <form method="POST" action="<?php echo e(route('self-paced.public.register.submit', $course)); ?>">
            <?php echo csrf_field(); ?>

            
            <div x-show="step === 1" class="p-6 space-y-5">
                <h2 class="text-base font-bold text-gray-800 mb-1">Create Your Account</h2>
                <p class="text-xs text-gray-500 mb-4">Fill in your details to register for this course.</p>

                
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-user text-indigo-400 mr-1"></i> Full Name
                    </label>
                    <input type="text" name="name" value="<?php echo e(old('name')); ?>"
                           placeholder="Your full name"
                           class="w-full px-4 py-2.5 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('name') ? 'border-red-400 bg-red-50' : 'border-gray-200'); ?>">
                    <?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-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-envelope text-indigo-400 mr-1"></i> Email Address
                    </label>
                    <input type="email" name="email" value="<?php echo e(old('email')); ?>"
                           placeholder="you@example.com"
                           class="w-full px-4 py-2.5 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('email') ? 'border-red-400 bg-red-50' : 'border-gray-200'); ?>">
                    <?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-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-phone text-indigo-400 mr-1"></i> Phone Number
                        <?php if(!$course->isFree()): ?>
                            <span class="text-gray-400 font-normal">(MTN MoMo number)</span>
                        <?php endif; ?>
                    </label>
                    <input type="tel" name="phone" value="<?php echo e(old('phone')); ?>"
                           placeholder="e.g. 0771234567"
                           class="w-full px-4 py-2.5 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('phone') ? 'border-red-400 bg-red-50' : 'border-gray-200'); ?>">
                    <?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-lock text-indigo-400 mr-1"></i> Password
                    </label>
                    <input type="password" name="password"
                           placeholder="Minimum 8 characters"
                           class="w-full px-4 py-2.5 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('password') ? 'border-red-400 bg-red-50' : 'border-gray-200'); ?>">
                    <?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-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-lock text-indigo-400 mr-1"></i> Confirm Password
                    </label>
                    <input type="password" name="password_confirmation"
                           placeholder="Repeat your password"
                           class="w-full px-4 py-2.5 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 border-gray-200">
                </div>

                <button type="button" @click="step = 2"
                        class="w-full flex items-center justify-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl transition shadow-md shadow-indigo-200">
                    Next: Review & Pay
                    <i class="fas fa-arrow-right text-xs"></i>
                </button>

                <p class="text-center text-xs text-gray-400">
                    Already have an account?
                    <a href="<?php echo e(route('login')); ?>" class="text-indigo-600 hover:underline">Log in</a>
                </p>
            </div>

            
            <div x-show="step === 2" x-cloak class="p-6 space-y-5">
                <h2 class="text-base font-bold text-gray-800 mb-1">Review & Confirm</h2>
                <p class="text-xs text-gray-500 mb-4">Confirm your details before enrolling.</p>

                
                <div class="bg-gray-50 rounded-xl p-4 space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Course</span>
                        <span class="font-semibold text-gray-800 text-right max-w-[200px]"><?php echo e($course->title); ?></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Duration</span>
                        <span class="font-medium text-gray-700"><?php echo e($course->getFormattedDuration()); ?></span>
                    </div>
                    <div class="flex justify-between border-t border-gray-200 pt-2 mt-2">
                        <span class="font-semibold text-gray-700">Total</span>
                        <span class="font-bold text-lg <?php echo e($course->isFree() ? 'text-green-600' : 'text-gray-900'); ?>">
                            <?php echo e($course->getFormattedFee()); ?>

                        </span>
                    </div>
                </div>

                <?php if(!$course->isFree()): ?>
                
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                    <p class="text-xs font-semibold text-amber-800 mb-3 flex items-center gap-1.5">
                        <i class="fas fa-mobile-alt text-amber-500"></i>
                        Payment — <?php echo e($course->getFormattedFee()); ?>

                    </p>
                    <p class="text-xs text-amber-700 mb-3">
                        Choose how you'd like to pay for this course.
                    </p>
                    <?php if (isset($component)) { $__componentOriginaldc9838ff770b18a25d2acfc8332c18f2 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginaldc9838ff770b18a25d2acfc8332c18f2 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.payment-method-toggle','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('payment-method-toggle'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginaldc9838ff770b18a25d2acfc8332c18f2)): ?>
<?php $attributes = $__attributesOriginaldc9838ff770b18a25d2acfc8332c18f2; ?>
<?php unset($__attributesOriginaldc9838ff770b18a25d2acfc8332c18f2); ?>
<?php endif; ?>
<?php if (isset($__componentOriginaldc9838ff770b18a25d2acfc8332c18f2)): ?>
<?php $component = $__componentOriginaldc9838ff770b18a25d2acfc8332c18f2; ?>
<?php unset($__componentOriginaldc9838ff770b18a25d2acfc8332c18f2); ?>
<?php endif; ?>
                </div>
                <?php endif; ?>

                
                <button type="submit"
                        class="w-full flex items-center justify-center gap-2 px-5 py-3.5 font-bold text-sm rounded-xl transition shadow-md active:scale-95
                            <?php echo e($course->isFree()
                                ? 'bg-green-600 hover:bg-green-700 text-white shadow-green-200'
                                : 'bg-indigo-600 hover:bg-indigo-700 text-white shadow-indigo-200'); ?>">
                    <?php if($course->isFree()): ?>
                        <i class="fas fa-check-circle"></i>
                        Enroll for Free
                    <?php else: ?>
                        <i class="fas fa-mobile-alt"></i>
                        Confirm & Pay <?php echo e($course->getFormattedFee()); ?>

                    <?php endif; ?>
                </button>

                <button type="button" @click="step = 1"
                        class="w-full flex items-center justify-center gap-1.5 text-sm text-gray-500 hover:text-indigo-600 transition">
                    <i class="fas fa-arrow-left text-xs"></i> Back to Details
                </button>
            </div>
        </form>
    </div>

    
    <?php if($errors->any()): ?>
    <div class="mt-4 bg-red-50 border border-red-200 rounded-xl p-4">
        <p class="text-xs font-semibold text-red-700 mb-2 flex items-center gap-1.5">
            <i class="fas fa-exclamation-circle"></i> Please fix the following errors:
        </p>
        <ul class="list-disc list-inside space-y-1">
            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <li class="text-xs text-red-600"><?php echo e($error); ?></li>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </ul>
    </div>
    <?php endif; ?>

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

<?php $__env->startPush('scripts'); ?>
<script>
function registrationForm() {
    return {
        step: <?php echo e($errors->any() ? 1 : 1); ?>,
        init() {
            // If there are validation errors, stay on step 1
        }
    };
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.self-paced-landing', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/www/sshia.org/sshia/resources/views/self-paced/public/register.blade.php ENDPATH**/ ?>