

<?php $__env->startSection('title', 'Enrollments'); ?>
<?php $__env->startSection('page-title', 'Enrollments'); ?>
<?php $__env->startSection('page-subtitle', 'Manage all trainee course enrollments'); ?>

<?php $__env->startSection('hero-actions'); ?>
    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('manage self-paced enrollments')): ?>
    <a href="<?php echo e(route('self-paced.dashboard.enrollments.create')); ?>"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
        <i class="fas fa-plus"></i> Manual Enrollment
    </a>
    <a href="<?php echo e(route('self-paced.dashboard.enrollments.export')); ?>"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-file-csv"></i> Export CSV
    </a>
    <?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div x-data="enrollmentIndex()" x-init="init()">

    
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5">
        <div class="flex flex-col sm:flex-row gap-3 flex-wrap">

            
            <div class="relative flex-1 min-w-[200px]">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none">
                    <i class="fas fa-search text-sm"></i>
                </span>
                <input type="text"
                       x-model="search"
                       @input.debounce.400ms="fetchEnrollments()"
                       placeholder="Search by name, email, course, reference…"
                       class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
            </div>

            
            <select x-model="status"
                    @change="fetchEnrollments()"
                    class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                <option value="">All Statuses</option>
                <option value="active">Active</option>
                <option value="completed">Completed</option>
                <option value="pending_payment">Pending Payment</option>
                <option value="payment_failed">Payment Failed</option>
                <option value="cancelled">Cancelled</option>
            </select>

            
            <select x-model="courseId"
                    @change="fetchEnrollments()"
                    class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                <option value="">All Courses</option>
                <?php $__currentLoopData = $courses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $course): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($course->id); ?>"><?php echo e($course->title); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            
            <input type="date"
                   x-model="dateFrom"
                   @change="fetchEnrollments()"
                   title="Enrolled from"
                   class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">

            
            <input type="date"
                   x-model="dateTo"
                   @change="fetchEnrollments()"
                   title="Enrolled to"
                   class="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">

            
            <button @click="clearFilters()"
                    x-show="search || status || courseId || dateFrom || dateTo"
                    x-cloak
                    class="inline-flex items-center gap-1.5 px-3 py-2 text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                <i class="fas fa-times text-xs"></i> Clear
            </button>
        </div>
    </div>

    
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">

        
        <div x-show="loading" x-cloak class="flex items-center justify-center py-16">
            <i class="fas fa-spinner fa-spin text-indigo-400 text-2xl"></i>
        </div>

        <div x-show="!loading" x-cloak>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-10">#</th>
                            <th class="bg-purple-50 text-purple-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Trainee</th>
                            <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Course</th>
                            <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Status</th>
                            <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Amount Paid</th>
                            <th class="bg-teal-50 text-teal-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Payment Method</th>
                            <th class="bg-rose-50 text-rose-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Enrolled At</th>
                            <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="enrollments-tbody" class="divide-y divide-gray-50">
                        <?php echo $__env->make('self-paced.dashboard.enrollments.partials.table', ['enrollments' => $enrollments], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </tbody>
                </table>
            </div>

            
            <?php if($enrollments->hasPages()): ?>
            <div class="px-4 py-3 border-t border-gray-100" id="enrollments-pagination">
                <?php echo e($enrollments->links()); ?>

            </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div x-show="activateModal.open"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/40" @click="activateModal.open = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 z-10">
            <div class="flex items-center gap-3 mb-4">
                <span class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-play text-green-500"></i>
                </span>
                <div>
                    <h3 class="font-semibold text-gray-800">Activate Enrollment</h3>
                    <p class="text-sm text-gray-500">This bypasses payment and grants immediate access.</p>
                </div>
            </div>
            <p class="text-sm text-gray-600 mb-5">
                Activate enrollment for <strong x-text="activateModal.name"></strong>? This will set the status to <strong>Active</strong> without requiring payment.
            </p>
            <div class="flex gap-3 justify-end">
                <button @click="activateModal.open = false"
                        class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                    Cancel
                </button>
                <button @click="submitActivate()"
                        class="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg transition">
                    <i class="fas fa-play mr-1.5"></i> Activate
                </button>
            </div>
        </div>
    </div>

    
    <div x-show="cancelModal.open"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/40" @click="cancelModal.open = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 z-10">
            <div class="flex items-center gap-3 mb-4">
                <span class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-ban text-red-500"></i>
                </span>
                <div>
                    <h3 class="font-semibold text-gray-800">Cancel Enrollment</h3>
                    <p class="text-sm text-gray-500">This will revoke the trainee's course access.</p>
                </div>
            </div>
            <p class="text-sm text-gray-600 mb-5">
                Cancel enrollment for <strong x-text="cancelModal.name"></strong>?
            </p>
            <div class="flex gap-3 justify-end">
                <button @click="cancelModal.open = false"
                        class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                    No, Keep It
                </button>
                <button @click="submitCancel()"
                        class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition">
                    <i class="fas fa-ban mr-1.5"></i> Cancel Enrollment
                </button>
            </div>
        </div>
    </div>

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

<?php $__env->startPush('scripts'); ?>
<script>
function enrollmentIndex() {
    return {
        search: '',
        status: '',
        courseId: '',
        dateFrom: '',
        dateTo: '',
        loading: false,
        activateModal: { open: false, id: null, name: '' },
        cancelModal:   { open: false, id: null, name: '' },

        init() {
            const params = new URLSearchParams(window.location.search);
            this.search   = params.get('search')    || '';
            this.status   = params.get('status')    || '';
            this.courseId = params.get('course_id') || '';
            this.dateFrom = params.get('date_from') || '';
            this.dateTo   = params.get('date_to')   || '';
        },

        fetchEnrollments(page) {
            this.loading = true;
            const params = new URLSearchParams();
            if (this.search)   params.set('search',    this.search);
            if (this.status)   params.set('status',    this.status);
            if (this.courseId) params.set('course_id', this.courseId);
            if (this.dateFrom) params.set('date_from', this.dateFrom);
            if (this.dateTo)   params.set('date_to',   this.dateTo);
            if (page)          params.set('page',      page);

            axios.get('<?php echo e(route('self-paced.dashboard.enrollments.index')); ?>?' + params.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => {
                document.getElementById('enrollments-tbody').innerHTML = res.data.html;
                const pag = document.getElementById('enrollments-pagination');
                if (pag && res.data.pagination) pag.innerHTML = res.data.pagination;
            })
            .catch(() => {})
            .finally(() => { this.loading = false; });
        },

        clearFilters() {
            this.search   = '';
            this.status   = '';
            this.courseId = '';
            this.dateFrom = '';
            this.dateTo   = '';
            this.fetchEnrollments();
        },
    };
}

function confirmActivate(id, name) {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    comp.activateModal = { open: true, id, name: name || 'this trainee' };
}

function submitActivate() {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    const form = document.getElementById('activate-form-' + comp.activateModal.id);
    if (form) form.submit();
}

function confirmCancel(id, name) {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    comp.cancelModal = { open: true, id, name: name || 'this trainee' };
}

function submitCancel() {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    const form = document.getElementById('cancel-form-' + comp.cancelModal.id);
    if (form) form.submit();
}
</script>
<?php $__env->stopPush(); ?>

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