

<?php $__env->startSection('title', 'Exam Question Bank'); ?>
<?php $__env->startSection('page-title', 'Exam Question Bank'); ?>
<?php $__env->startSection('page-subtitle', 'All exam questions across all courses'); ?>

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

<?php $__env->startSection('content'); ?>
<div x-data="examIndex()" 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="fetchQuestions()"
                       placeholder="Search by question text…"
                       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="courseId"
                    @change="fetchQuestions()"
                    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>

            
            <select x-model="isActive"
                    @change="fetchQuestions()"
                    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 Status</option>
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>

            
            <button @click="clearFilters()"
                    x-show="search || courseId || isActive !== ''"
                    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">Question</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">Correct Answer</th>
                            <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Active</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="exams-tbody" class="divide-y divide-gray-50">
                        <?php echo $__env->make('self-paced.dashboard.exams.partials.table', ['questions' => $questions], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </tbody>
                </table>
            </div>

            <?php if($questions->hasPages()): ?>
            <div class="px-4 py-3 border-t border-gray-100" id="exams-pagination">
                <?php echo e($questions->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 Question</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>?
            </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 examIndex() {
    return {
        search: '',
        courseId: '',
        isActive: '',
        loading: false,
        deleteModal: { open: false, id: null, title: '' },

        init() {
            const params = new URLSearchParams(window.location.search);
            this.search   = params.get('search')    || '';
            this.courseId = params.get('course_id') || '';
            this.isActive = params.get('is_active') !== null ? params.get('is_active') : '';
        },

        fetchQuestions(page) {
            this.loading = true;
            const params = new URLSearchParams();
            if (this.search)            params.set('search',    this.search);
            if (this.courseId)          params.set('course_id', this.courseId);
            if (this.isActive !== '')   params.set('is_active', this.isActive);
            if (page)                   params.set('page',      page);

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

        clearFilters() {
            this.search   = '';
            this.courseId = '';
            this.isActive = '';
            this.fetchQuestions();
        },
    };
}

function confirmExamDelete(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-exam-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/exams/index.blade.php ENDPATH**/ ?>