
<?php if (isset($component)) { $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $attributes; } ?>
<?php $component = App\View\Components\SiteLayout::resolve(['title' => 'Apply for Membership'] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\SiteLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    
    
    <section class="relative bg-gradient-to-r from-green-600 to-green-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center">
                <h1 class="text-4xl font-bold text-white mb-4">
                    Membership Application
                </h1>
                <p class="text-green-100 max-w-5xl mx-auto">
                    Complete the form below to apply for membership. Our team will review your application 
                    and get back to you within 3-5 business days.
                </p>
            </div>
        </div>
    </section>

    
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="<?php echo e(url('/')); ?>" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="<?php echo e(route('membership.categories.index')); ?>" class="hover:text-green-600 transition">Membership Categories</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Apply</span>
            </nav>
        </div>
    </div>

    
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <form action="<?php echo e(route('membership.apply.store')); ?>" method="POST" class="space-y-8">
                <?php echo csrf_field(); ?>

                
                <div class="theme-card rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-user text-green-600 mr-3"></i>
                            Personal Information
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-gray-700 mb-2">
                                    First Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       id="first_name" 
                                       name="first_name" 
                                       value="<?php echo e(old('first_name')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Enter your first name"
                                       required>
                                <?php $__errorArgs = ['first_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-1 text-sm text-red-600"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            
                            <div>
                                <label for="last_name" class="block text-sm font-medium text-gray-700 mb-2">
                                    Last Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       id="last_name" 
                                       name="last_name" 
                                       value="<?php echo e(old('last_name')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Enter your last name"
                                       required>
                                <?php $__errorArgs = ['last_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-1 text-sm text-red-600"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                    Email Address <span class="text-red-500">*</span>
                                </label>
                                <input type="email" 
                                       id="email" 
                                       name="email" 
                                       value="<?php echo e(old('email')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="your.email@example.com"
                                       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-1 text-sm text-red-600"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                                    Phone Number <span class="text-red-500">*</span>
                                </label>
                                <input type="tel" 
                                       id="phone" 
                                       name="phone" 
                                       value="<?php echo e(old('phone')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="+256 7XX XXX XXX"
                                       required>
                                <?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="mt-1 text-sm text-red-600"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="theme-card rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-id-card text-green-600 mr-3"></i>
                            Membership Category
                        </h2>
                    </div>
                    <div class="p-6">
                        <label for="membership_category_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Select Category <span class="text-red-500">*</span>
                        </label>
                        <select id="membership_category_id" 
                                name="membership_category_id"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                required>
                            <option value="">-- Select a Membership Category --</option>
                            <?php $__currentLoopData = \App\Models\MembershipCategory::active()->ordered()->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $fee = $category->subscriptionFees()->active()->default()->first();
                                ?>
                                <option value="<?php echo e($category->id); ?>" 
                                        <?php echo e(old('membership_category_id') == $category->id ? 'selected' : ''); ?>

                                        data-fee="<?php echo e($fee?->amount ?? 0); ?>"
                                        data-currency="<?php echo e($fee?->currency ?? 'USD'); ?>">
                                    <?php echo e($category->name); ?> 
                                    <?php if($fee): ?>
                                        - <?php echo e($fee->formatted_amount); ?> (<?php echo e($fee->billing_cycle_display); ?>)
                                    <?php endif; ?>
                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <?php $__errorArgs = ['membership_category_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1 text-sm text-red-600"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>

                        
                        <div id="category-preview" class="mt-4 hidden">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <h4 class="font-semibold text-green-800 mb-2" id="category-name"></h4>
                                <p class="text-sm text-green-700" id="category-description"></p>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="theme-card rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-map-marker-alt text-green-600 mr-3"></i>
                            Address Information
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <div class="md:col-span-2">
                                <label for="address" class="block text-sm font-medium text-gray-700 mb-2">
                                    Street Address
                                </label>
                                <input type="text" 
                                       id="address" 
                                       name="address" 
                                       value="<?php echo e(old('address')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Enter your street address">
                            </div>

                            
                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-2">
                                    City
                                </label>
                                <input type="text" 
                                       id="city" 
                                       name="city" 
                                       value="<?php echo e(old('city')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Enter your city">
                            </div>

                            
                            <div>
                                <label for="country" class="block text-sm font-medium text-gray-700 mb-2">
                                    Country
                                </label>
                                <select id="country" 
                                        name="country"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
                                    <option value="">-- Select Country --</option>
                                    <option value="Uganda" <?php echo e(old('country') === 'Uganda' ? 'selected' : ''); ?>>Uganda</option>
                                    <option value="Kenya" <?php echo e(old('country') === 'Kenya' ? 'selected' : ''); ?>>Kenya</option>
                                    <option value="South Sudan" <?php echo e(old('country') === 'South Sudan' ? 'selected' : ''); ?>>South Sudan</option>
                                    <option value="Tanzania" <?php echo e(old('country') === 'Tanzania' ? 'selected' : ''); ?>>Tanzania</option>
                                    <option value="Rwanda" <?php echo e(old('country') === 'Rwanda' ? 'selected' : ''); ?>>Rwanda</option>
                                    <option value="Other" <?php echo e(old('country') === 'Other' ? 'selected' : ''); ?>>Other</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="theme-card rounded-xl shadow-md overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-briefcase text-green-600 mr-3"></i>
                            Professional Information
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <div>
                                <label for="occupation" class="block text-sm font-medium text-gray-700 mb-2">
                                    Occupation
                                </label>
                                <input type="text" 
                                       id="occupation" 
                                       name="occupation" 
                                       value="<?php echo e(old('occupation')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Your occupation">
                            </div>

                            
                            <div>
                                <label for="organization" class="block text-sm font-medium text-gray-700 mb-2">
                                    Organization / Company
                                </label>
                                <input type="text" 
                                       id="organization" 
                                       name="organization" 
                                       value="<?php echo e(old('organization')); ?>"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                       placeholder="Your organization or company">
                            </div>

                            
                            <div class="md:col-span-2">
                                <label for="professional_background" class="block text-sm font-medium text-gray-700 mb-2">
                                    Professional Background
                                </label>
                                <textarea id="professional_background" 
                                          name="professional_background"
                                          rows="4"
                                          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                          placeholder="Briefly describe your professional background and experience..."><?php echo e(old('professional_background')); ?></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="theme-card rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start">
                            <input type="checkbox" 
                                   id="terms_accepted" 
                                   name="terms_accepted"
                                   value="1"
                                   class="mt-1 h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                                   required>
                            <label for="terms_accepted" class="ml-3 text-sm text-gray-600">
                                I have read and agree to the 
                                <a href="#" class="text-green-600 hover:underline">Terms and Conditions</a> 
                                and 
                                <a href="#" class="text-green-600 hover:underline">Privacy Policy</a>. 
                                I understand that my membership is subject to approval and I agree to pay the applicable 
                                membership fees upon approval.
                                <span class="text-red-500">*</span>
                            </label>
                        </div>
                        <?php $__errorArgs = ['terms_accepted'];
$__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-sm text-red-600"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                </div>

                
                <div class="flex justify-end gap-4">
                    <a href="<?php echo e(route('membership.categories.index')); ?>" 
                       class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Categories
                    </a>
                    <button type="submit" 
                            class="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold shadow-md">
                        <i class="fas fa-paper-plane mr-2"></i>
                        Submit Application
                    </button>
                </div>
            </form>

        </div>
    </section>

    
    <section class="py-12 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-clock text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Quick Process</h3>
                    <p class="text-sm text-gray-600">
                        Applications are typically processed within 3-5 business days.
                    </p>
                </div>

                
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Secure & Private</h3>
                    <p class="text-sm text-gray-600">
                        Your information is protected with industry-standard encryption.
                    </p>
                </div>

                
                <div class="text-center p-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-headset text-2xl text-green-600"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Support Available</h3>
                    <p class="text-sm text-gray-600">
                        Our team is available to assist you throughout the process.
                    </p>
                </div>
            </div>
        </div>
    </section>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $attributes = $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5)): ?>
<?php $component = $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5; ?>
<?php unset($__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5); ?>
<?php endif; ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const categorySelect = document.getElementById('membership_category_id');
        const previewDiv = document.getElementById('category-preview');
        
        categorySelect.addEventListener('change', function() {
            if (this.value) {
                // Show preview (you can enhance this with AJAX to load category details)
                previewDiv.classList.remove('hidden');
            } else {
                previewDiv.classList.add('hidden');
            }
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/membership/public/apply.blade.php ENDPATH**/ ?>