

<?php $__env->startSection('title', 'Courses'); ?>

<?php $__env->startSection('page-title', 'Courses'); ?>
<?php $__env->startSection('page-subtitle', 'Manage all self-paced learning courses'); ?>

<?php $__env->startSection('hero-actions'); ?>
    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('create self-paced courses')): ?>
    <a href="<?php echo e(route('self-paced.dashboard.courses.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> New Course
    </a>
    <?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div x-data="courseIndex()" 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">

            
            <div class="relative flex-1">
                <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="fetchCourses()"
                       placeholder="Search by title or description…"
                       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="fetchCourses()"
                    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="draft">Draft</option>
                <option value="published">Published</option>
                <option value="archived">Archived</option>
            </select>

            
            <select x-model="categoryId"
                    @change="fetchCourses()"
                    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 Categories</option>
                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($cat->id); ?>"><?php echo e($cat->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>

            
            <button @click="clearFilters()"
                    x-show="search || status || categoryId"
                    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">Title</th>
                            <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Category</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">Fee</th>
                            <th class="bg-rose-50 text-rose-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Enrollments</th>
                            <th class="bg-teal-50 text-teal-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Topics</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="courses-tbody" class="divide-y divide-gray-50">
                        <?php echo $__env->make('self-paced.dashboard.courses.partials.table', ['courses' => $courses], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </tbody>
                </table>
            </div>

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

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

    
    <div x-show="deleteModal.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="deleteModal.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-trash text-red-500"></i>
                </span>
                <div>
                    <h3 class="font-semibold text-gray-800">Delete Course</h3>
                    <p class="text-sm text-gray-500">This action cannot be undone.</p>
                </div>
            </div>
            <p class="text-sm text-gray-600 mb-5">
                Are you sure you want to delete <strong x-text="deleteModal.title"></strong>?
                Courses with active enrollments cannot be deleted.
            </p>
            <div class="flex gap-3 justify-end">
                <button @click="deleteModal.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="submitDelete()"
                        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-trash mr-1.5"></i> Delete
                </button>
            </div>
        </div>
    </div>

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

<?php $__env->startPush('scripts'); ?>
<script>
function courseIndex() {
    return {
        search: '',
        status: '',
        categoryId: '',
        loading: false,
        deleteModal: { open: false, id: null, title: '' },

        init() {
            // Restore filters from URL params
            const params = new URLSearchParams(window.location.search);
            this.search     = params.get('search')      || '';
            this.status     = params.get('status')      || '';
            this.categoryId = params.get('category_id') || '';
        },

        fetchCourses(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.categoryId) params.set('category_id', this.categoryId);
            if (page)            params.set('page',        page);

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

        clearFilters() {
            this.search = '';
            this.status = '';
            this.categoryId = '';
            this.fetchCourses();
        },
    };
}

function confirmDelete(id, title) {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    comp.deleteModal = { open: true, id, title };
}

function submitDelete() {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    const form = document.getElementById('delete-form-' + comp.deleteModal.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/courses/index.blade.php ENDPATH**/ ?>