<?php $__env->startSection('title', 'Training Programs'); ?>
<?php $__env->startSection('description', 'Explore our comprehensive training programs and capacity building opportunities designed for healthcare professionals and organizations.'); ?>
<?php $__env->startSection('keywords', 'training, capacity building, professional development, workshops, certification, healthcare training'); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .program-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .program-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
    }
    .apply-btn {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transition: all 0.3s ease;
    }
    .apply-btn:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.4);
    }
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>

<div class="bg-gradient-to-r from-green-600 to-emerald-700 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="text-center max-w-4xl mx-auto">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-white/10 backdrop-blur-sm rounded-2xl mb-6">
                <i class="fas fa-chalkboard-teacher text-white text-4xl"></i>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                Capacity Building & Training Programs
            </h1>
            <p class="text-xl text-green-50 mb-8 leading-relaxed">
                Enhance your skills and knowledge through our comprehensive training programs 
                designed for healthcare professionals and organizations across South Sudan.
            </p>
            <div class="flex flex-wrap items-center justify-center gap-4">
                <a href="#programs" 
                   class="inline-flex items-center px-6 py-3 bg-white text-green-700 font-semibold rounded-lg hover:bg-green-50 transition shadow-lg hover:shadow-xl">
                    <i class="fas fa-list mr-2"></i>
                    Browse Programs
                </a>
                <a href="<?php echo e(route('public.training.certificates.verify-page')); ?>" 
                   class="inline-flex items-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-green-700 transition">
                    <i class="fas fa-certificate mr-2"></i>
                    Verify Certificate
                </a>
                <a href="<?php echo e(route('self-paced.public.index')); ?>" 
                   class="inline-flex items-center px-6 py-3 bg-yellow-500 text-gray-900 font-semibold rounded-lg hover:bg-yellow-400 transition shadow-lg hover:shadow-xl">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    SSHIA Academy
                </a>
            </div>
        </div>
    </div>
</div>


<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>
            <span class="text-gray-900 font-medium">Training Programs</span>
        </nav>
    </div>
</div>


<section class="bg-white py-8 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <form method="GET" action="<?php echo e(route('public.training.index')); ?>" class="flex flex-wrap gap-4 items-center">
            
            <div class="flex-1 min-w-64">
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           value="<?php echo e(request('search')); ?>"
                           placeholder="Search training programs..."
                           class="w-full pl-10 pr-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            
            
            <div class="w-64">
                <select name="category" 
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
                    <option value="">All Categories</option>
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($category->id); ?>" <?php echo e(request('category') == $category->id ? 'selected' : ''); ?>>
                            <?php echo e($category->name); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            
            
            <button type="submit" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium shadow-sm hover:shadow-md">
                <i class="fas fa-filter mr-2"></i>
                Apply Filters
            </button>
            
            
            <?php if(request('search') || request('category')): ?>
                <a href="<?php echo e(route('public.training.index')); ?>" class="px-4 py-3 text-gray-600 hover:text-gray-800 font-medium transition">
                    <i class="fas fa-times mr-1"></i>
                    Clear All
                </a>
            <?php endif; ?>
        </form>
    </div>
</section>


<section id="programs" class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-10 text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-3">
                Available Training Programs
            </h2>
            <p class="text-lg text-gray-600 max-w-5xl mx-auto">
                Browse our upcoming training programs and secure your spot today. Each program is designed to enhance your professional skills and knowledge.
            </p>
        </div>
        
        <?php if($packages->count() > 0): ?>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                <?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $package): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $sessions = $upcomingSessions[$package->id] ?? collect([]);
                        $firstSession = $sessions->first();
                        $spotsLeft = $package->capacity - $package->registrations_count;
                    ?>
                    
                    <article class="program-card bg-white rounded-xl shadow-md overflow-hidden flex flex-col">
                        
                        <?php if($package->featured_image): ?>
                            <div class="h-48 overflow-hidden">
                                <img src="<?php echo e($package->featured_image); ?>" 
                                     alt="<?php echo e($package->name); ?>"
                                     class="w-full h-full object-cover">
                            </div>
                        <?php else: ?>
                            <div class="h-48 bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
                                <i class="fas fa-chalkboard-teacher text-white text-6xl opacity-50"></i>
                            </div>
                        <?php endif; ?>
                        
                        
                        <div class="p-6 flex-1 flex flex-col">
                            
                            <div class="flex items-center gap-2 mb-3 flex-wrap">
                                <?php if($package->category): ?>
                                    <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full">
                                        <?php echo e($package->category->name); ?>

                                    </span>
                                <?php endif; ?>
                                
                                <?php if($spotsLeft <= 0): ?>
                                    <span class="status-badge bg-red-100 text-red-700">
                                        <i class="fas fa-times-circle mr-1"></i>Full
                                    </span>
                                <?php elseif($spotsLeft <= 5): ?>
                                    <span class="status-badge bg-yellow-100 text-yellow-700">
                                        <i class="fas fa-exclamation-circle mr-1"></i>Almost Full
                                    </span>
                                <?php else: ?>
                                    <span class="status-badge bg-green-100 text-green-700">
                                        <i class="fas fa-check-circle mr-1"></i>Available
                                    </span>
                                <?php endif; ?>
                            </div>
                            
                            
                            <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                                <?php echo e($package->name); ?>

                            </h3>
                            
                            
                            <p class="text-gray-600 text-sm mb-4 line-clamp-3 flex-1">
                                <?php echo e(Str::limit($package->description, 150)); ?>

                            </p>
                            
                            
                            <div class="space-y-2 mb-4">
                                <div class="flex items-center text-sm text-gray-600">
                                    <i class="fas fa-clock w-5 text-green-600"></i>
                                    <span><?php echo e($package->duration_hours); ?> hours
                                        <?php if($package->duration_days > 0): ?>
                                            / <?php echo e($package->duration_days); ?> days
                                        <?php endif; ?>
                                    </span>
                                </div>
                                
                                <?php if($sessions->count() > 0): ?>
                                    <div class="flex items-center text-sm text-gray-600">
                                        <i class="fas fa-calendar w-5 text-green-600"></i>
                                        <span><?php echo e($firstSession->session_date->format('M d, Y')); ?></span>
                                    </div>
                                    
                                    <?php if($firstSession->session_type === 'online'): ?>
                                        <div class="flex items-center text-sm text-blue-600">
                                            <i class="fas fa-video w-5"></i>
                                            <span>Online Training</span>
                                        </div>
                                    <?php elseif($firstSession->venue_name): ?>
                                        <div class="flex items-center text-sm text-gray-600">
                                            <i class="fas fa-map-marker-alt w-5 text-green-600"></i>
                                            <span><?php echo e(Str::limit($firstSession->venue_name, 30)); ?></span>
                                        </div>
                                    <?php endif; ?>
                                <?php else: ?>
                                    <div class="flex items-center text-sm text-gray-400">
                                        <i class="fas fa-calendar-times w-5"></i>
                                        <span>Schedule coming soon</span>
                                    </div>
                                <?php endif; ?>
                                
                                <div class="flex items-center text-sm text-gray-600">
                                    <i class="fas fa-users w-5 text-green-600"></i>
                                    <span><?php echo e($spotsLeft); ?> spots remaining</span>
                                </div>
                                
                                <?php if($package->generates_certificate): ?>
                                    <div class="flex items-center text-sm text-green-600">
                                        <i class="fas fa-certificate w-5"></i>
                                        <span>Certificate Included</span>
                                    </div>
                                <?php endif; ?>
                            </div>
                            
                            
                            <div class="pt-4 border-t border-gray-100 flex items-center justify-between">
                                <div>
                                    <?php if($package->is_free): ?>
                                        <span class="text-2xl font-bold text-green-600">Free</span>
                                    <?php else: ?>
                                        <div class="text-2xl font-bold text-gray-900">
                                            <?php echo e(number_format($package->fee_amount, 0)); ?>

                                        </div>
                                        <div class="text-sm text-gray-500"><?php echo e($package->currency); ?></div>
                                    <?php endif; ?>
                                </div>
                                
                                <?php if($spotsLeft > 0): ?>
                                    <button onclick="openApplicationModal(<?php echo e($package->id); ?>)"
                                            class="apply-btn px-6 py-3 text-white rounded-lg font-medium shadow-md hover:shadow-lg">
                                        <i class="fas fa-user-plus mr-2"></i>
                                        Apply Now
                                    </button>
                                <?php else: ?>
                                    <button disabled 
                                            class="px-6 py-3 bg-gray-200 text-gray-500 rounded-lg cursor-not-allowed">
                                        <i class="fas fa-ban mr-2"></i>
                                        Fully Booked
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            
            
            <div class="flex justify-center">
                <?php echo e($packages->links()); ?>

            </div>
        <?php else: ?>
            <div class="text-center py-20 bg-white rounded-2xl shadow-lg">
                <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
                    <i class="fas fa-calendar-times text-gray-400 text-4xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">No Training Programs Available</h3>
                <p class="text-gray-600 mb-8 max-w-md mx-auto">
                    There are no training programs scheduled at the moment. 
                    Please check back later or contact us for more information.
                </p>
                <div class="flex flex-wrap items-center justify-center gap-4">
                    <a href="<?php echo e(route('home')); ?>" class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Return to Home
                    </a>
                    <a href="<?php echo e(route('self-paced.public.index')); ?>" class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                        <i class="fas fa-graduation-cap mr-2"></i>
                        Try SSHIA Academy
                    </a>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>


<div id="applicationModal" 
     class="fixed inset-0 z-50 hidden overflow-y-auto"
     x-data="applicationForm()">
    <div class="modal-backdrop fixed inset-0" @click="closeModal()"></div>
    
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            
            <div class="sticky top-0 bg-gradient-to-r from-green-600 to-emerald-700 px-6 py-5 flex items-center justify-between rounded-t-2xl">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-graduate text-white text-lg"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white">
                        Training Application Form
                    </h3>
                </div>
                <button @click="closeModal()" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            
            
            <div class="bg-green-50 px-6 py-4 border-b border-green-100">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 bg-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-chalkboard-teacher text-white text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-900 text-lg" x-text="selectedProgram.name"></h4>
                        <p class="text-sm text-gray-600" x-text="selectedProgram.fee"></p>
                    </div>
                </div>
            </div>
            
            
            <form action="" method="POST" id="applicationForm" class="p-6 space-y-6">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="package_id" id="package_id">
                
                
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-user text-green-600"></i>
                        Personal Information
                    </h4>
                    <div class="grid md:grid-cols-2 gap-4">
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Full Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   required
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="Enter your full name">
                        </div>
                        
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Email Address <span class="text-red-500">*</span>
                            </label>
                            <input type="email" 
                                   name="email" 
                                   required
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="your@email.com">
                        </div>
                        
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Phone Number <span class="text-red-500">*</span>
                            </label>
                            <input type="tel" 
                                   name="phone" 
                                   required
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="e.g., 0771234567">
                        </div>
                        
                        
                        <div x-show="selectedProgram.requiresPayment" x-cloak>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Payment Phone (MTN MoMo) <span class="text-red-500">*</span>
                            </label>
                            <input type="tel" 
                                   name="payment_phone"
                                   x-required="selectedProgram.requiresPayment"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="Phone for payment">
                        </div>
                    </div>
                </div>
                
                
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-briefcase text-green-600"></i>
                        Professional Information
                    </h4>
                    <div class="grid md:grid-cols-2 gap-4">
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Organization
                            </label>
                            <input type="text" 
                                   name="organization"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="Your organization name">
                        </div>
                        
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Position / Title
                            </label>
                            <input type="text" 
                                   name="position"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
                                   placeholder="Your job title">
                        </div>
                    </div>
                </div>
                
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-comment-dots text-green-600 mr-1"></i>
                        Additional Notes
                    </label>
                    <textarea name="notes"
                              rows="3"
                              class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition resize-none"
                              placeholder="Any special requirements or notes..."></textarea>
                </div>
                
                
                <div class="bg-gray-50 rounded-lg p-4">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" 
                               name="terms" 
                               required
                               class="mt-1 w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                        <span class="text-sm text-gray-700">
                            I agree to the 
                            <a href="#" class="text-green-600 hover:underline font-medium">Terms and Conditions</a> 
                            and confirm that the information provided is accurate and complete.
                        </span>
                    </label>
                </div>
                
                
                <div class="flex flex-col sm:flex-row justify-end gap-3 pt-4 border-t border-gray-200">
                    <button type="button" 
                            @click="closeModal()"
                            class="px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                    <button type="submit"
                            class="apply-btn px-8 py-3 text-white rounded-lg font-semibold shadow-md hover:shadow-lg">
                        <i class="fas fa-paper-plane mr-2"></i>
                        Submit Application
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-3">
                Why Choose Our Training Programs?
            </h2>
            <p class="text-lg text-gray-600 max-w-5xl mx-auto">
                We provide world-class training designed specifically for healthcare professionals in South Sudan
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-2xl mb-4">
                    <i class="fas fa-user-graduate text-green-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Expert Trainers</h3>
                <p class="text-gray-600 text-sm">
                    Learn from experienced professionals with deep expertise in health informatics and healthcare management.
                </p>
            </div>

            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-2xl mb-4">
                    <i class="fas fa-certificate text-blue-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Certification</h3>
                <p class="text-gray-600 text-sm">
                    Receive recognized certificates upon completion to enhance your professional credentials.
                </p>
            </div>

            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-purple-100 rounded-2xl mb-4">
                    <i class="fas fa-hands-helping text-purple-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Practical Skills</h3>
                <p class="text-gray-600 text-sm">
                    Gain hands-on experience with real-world scenarios and practical applications.
                </p>
            </div>

            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-yellow-100 rounded-2xl mb-4">
                    <i class="fas fa-users text-yellow-600 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Networking</h3>
                <p class="text-gray-600 text-sm">
                    Connect with fellow healthcare professionals and build lasting professional relationships.
                </p>
            </div>
        </div>
    </div>
</section>


<section class="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-2xl mb-4">
                    <i class="fas fa-certificate text-green-600 text-3xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-900 mb-3">
                    Verify a Training Certificate
                </h2>
                <p class="text-gray-600 text-lg">
                    Enter the certificate verification code to confirm authenticity and view certificate details.
                </p>
            </div>
            
            <form action="<?php echo e(route('public.training.certificates.verify-page')); ?>" 
                  method="GET"
                  class="max-w-md mx-auto"
                  onsubmit="event.preventDefault(); window.location.href='<?php echo e(url('/training/certificates/verify')); ?>/' + encodeURIComponent(document.getElementById('verification_code').value)">
                <div class="flex gap-3">
                    <input type="text" 
                           id="verification_code"
                           name="code"
                           required
                           placeholder="Enter verification code"
                           class="flex-1 px-4 py-4 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-lg">
                    <button type="submit" 
                            class="px-8 py-4 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold shadow-md hover:shadow-lg">
                        <i class="fas fa-search mr-2"></i>
                        Verify
                    </button>
                </div>
                <p class="text-sm text-gray-500 mt-3 text-center">
                    The verification code can be found on the certificate document
                </p>
            </form>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    // Program data for modal
    const programsData = <?php echo json_encode($packages->map(fn($p) => [
        'id' => $p->id,
        'name' => $p->name,
        'fee' => $p->is_free ? 'Free' : number_format($p->fee_amount, 0) . ' ' . $p->currency,
        'requiresPayment' => !$p->is_free && $p->fee_amount > 0,
    ])->values()); ?>;
    
    function openApplicationModal(packageId) {
        const program = programsData.find(p => p.id === packageId);
        if (!program) return;
        
        // Set form action
        document.getElementById('applicationForm').action = 
            '<?php echo e(route('public.training.apply.submit', ['package' => 'PACKAGE_ID'])); ?>'.replace('PACKAGE_ID', packageId);
        
        // Show modal
        document.getElementById('applicationModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeModal() {
        document.getElementById('applicationModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
    
    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
</script>

<script>
    function applicationForm() {
        return {
            selectedProgram: {
                name: '',
                fee: '',
                requiresPayment: false
            },
            closeModal() {
                document.getElementById('applicationModal').classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        }
    }
</script>
<?php $__env->stopPush(); ?>

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