
<?php if (isset($component)) { $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $attributes; } ?>
<?php $component = App\View\Components\SiteLayout::resolve(['title' => ''.e($seoMetadata['title'] ?? 'Knowledge Base - FAQs, Guides & Documentation').'','metaDescription' => ''.e($seoMetadata['description'] ?? '').''] + (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([]); ?>

    
    <div class="bg-gradient-to-br from-slate-800 via-blue-900 to-indigo-900 relative overflow-hidden">
        
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-blue-500 opacity-10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-indigo-500 opacity-10 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

            
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-10">
                <div class="flex items-center mb-4 md:mb-0">
                    <div class="w-14 h-14 rounded-2xl bg-white bg-opacity-10 flex items-center justify-center mr-4 shadow-lg">
                        <i class="fas fa-book-open text-white text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight">Knowledge Base</h1>
                        <p class="text-blue-200 mt-1">Find answers, guides, and documentation</p>
                    </div>
                </div>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('create knowledge base questions')): ?>
                    <a href="<?php echo e(route('knowledge-sharing.knowledge-base.create')); ?>"
                       class="inline-flex items-center px-5 py-2.5 bg-white text-blue-800 font-semibold rounded-xl hover:bg-blue-50 transition shadow-md text-sm">
                        <i class="fas fa-plus mr-2"></i> Add Question
                    </a>
                <?php endif; ?>
            </div>

            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">

                
                <div class="relative bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-5 shadow-lg overflow-hidden">
                    <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                    <i class="fas fa-question-circle text-white text-3xl opacity-60 mb-3"></i>
                    <p class="text-blue-100 text-xs font-semibold uppercase tracking-wider">Questions</p>
                    <p class="text-white text-3xl font-extrabold mt-1"><?php echo e(number_format($statistics['published_questions'] ?? 0)); ?></p>
                </div>

                
                <div class="relative bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl p-5 shadow-lg overflow-hidden">
                    <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                    <i class="fas fa-folder-open text-white text-3xl opacity-60 mb-3"></i>
                    <p class="text-purple-100 text-xs font-semibold uppercase tracking-wider">Categories</p>
                    <p class="text-white text-3xl font-extrabold mt-1"><?php echo e(number_format($statistics['total_categories'] ?? 0)); ?></p>
                </div>

                
                <div class="relative bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-2xl p-5 shadow-lg overflow-hidden">
                    <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                    <i class="fas fa-lightbulb text-white text-3xl opacity-60 mb-3"></i>
                    <p class="text-emerald-100 text-xs font-semibold uppercase tracking-wider">Answers</p>
                    <p class="text-white text-3xl font-extrabold mt-1"><?php echo e(number_format($statistics['total_answers'] ?? 0)); ?></p>
                </div>

                
                <div class="relative bg-gradient-to-br from-orange-500 to-orange-700 rounded-2xl p-5 shadow-lg overflow-hidden">
                    <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                    <i class="fas fa-eye text-white text-3xl opacity-60 mb-3"></i>
                    <p class="text-orange-100 text-xs font-semibold uppercase tracking-wider">Total Views</p>
                    <p class="text-white text-3xl font-extrabold mt-1"><?php echo e(number_format($statistics['total_views'] ?? 0)); ?></p>
                </div>
            </div>

            
            <div x-data="{
                    query: '<?php echo e(request('q')); ?>',
                    results: [],
                    showDropdown: false,
                    loading: false,
                    async search() {
                        if (this.query.length < 2) {
                            this.results = [];
                            this.showDropdown = false;
                            return;
                        }
                        this.loading = true;
                        try {
                            const res = await fetch('<?php echo e(route('public.knowledge-base.ajax-search')); ?>?q=' + encodeURIComponent(this.query));
                            const data = await res.json();
                            this.results = data.results ?? [];
                            this.showDropdown = true;
                        } catch(e) {
                            this.results = [];
                        } finally {
                            this.loading = false;
                        }
                    }
                }"
                 class="relative max-w-5xl mx-auto"
                 @click.outside="showDropdown = false">

                <form method="GET" action="<?php echo e(route('public.knowledge-base.search')); ?>" @submit="showDropdown = false">
                    <div class="relative">
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-lg z-10"></i>
                        <input type="text"
                               name="q"
                               x-model="query"
                               @input.debounce.300ms="search()"
                               @focus="query.length >= 2 && (showDropdown = true)"
                               placeholder="Search for answers, guides, topics…"
                               class="w-full pl-12 pr-28 py-4 text-base rounded-2xl shadow-xl border-0 focus:ring-2 focus:ring-blue-400 bg-white text-gray-800">
                        <button type="submit"
                                class="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition text-sm font-semibold">
                            Search
                        </button>
                    </div>
                </form>

                
                <div x-show="showDropdown"
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="absolute z-50 w-full bg-white rounded-2xl shadow-2xl mt-2 overflow-hidden border border-gray-100">

                    
                    <div x-show="loading" class="p-4 text-center text-gray-400 text-sm">
                        <i class="fas fa-spinner fa-spin mr-2"></i> Searching…
                    </div>

                    
                    <template x-if="!loading && results.length > 0">
                        <ul class="divide-y divide-gray-100 max-h-80 overflow-y-auto">
                            <template x-for="item in results" :key="item.url">
                                <li>
                                    <a :href="item.url"
                                       class="flex items-start gap-3 px-4 py-3 hover:bg-blue-50 transition">
                                        <div class="mt-0.5 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-question text-blue-600 text-xs"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <p class="text-sm font-semibold text-gray-800 truncate" x-text="item.title"></p>
                                            <p class="text-xs text-gray-500 mt-0.5 line-clamp-1" x-text="item.excerpt"></p>
                                            <span class="inline-block mt-1 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full" x-text="item.category"></span>
                                        </div>
                                    </a>
                                </li>
                            </template>
                        </ul>
                    </template>

                    
                    <template x-if="!loading && results.length === 0 && query.length >= 2">
                        <div class="p-5 text-center text-gray-500 text-sm">
                            <i class="fas fa-search text-gray-300 text-2xl mb-2 block"></i>
                            No results found for "<span class="font-medium text-gray-700" x-text="query"></span>"
                        </div>
                    </template>
                </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-blue-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">Knowledge Base</span>
            </nav>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

            
            <div class="lg:col-span-1 order-2 lg:order-1">
                <div class="sticky top-4 space-y-6">

                    <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-4 py-3">
                            <h3 class="text-base font-semibold text-white flex items-center">
                                <i class="fas fa-folder-open mr-2"></i> Categories
                            </h3>
                        </div>
                        <ul class="divide-y theme-divider">
                            <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <li>
                                    <a href="<?php echo e(route('public.knowledge-base.category', $category->slug)); ?>"
                                       class="flex items-center justify-between p-3 hover:bg-theme-body transition <?php echo e(request('category_slug') === $category->slug ? 'bg-purple-50 border-l-4 border-purple-600' : ''); ?>">
                                        <div class="flex items-center">
                                            <i class="fas <?php echo e($category->icon ?? 'fa-folder'); ?> <?php echo e($category->color ? "text-{$category->color}-500" : 'text-purple-500'); ?> mr-2 text-sm"></i>
                                            <span class="text-theme-heading text-sm"><?php echo e($category->name); ?></span>
                                        </div>
                                        <span class="text-xs bg-theme-body px-2 py-0.5 rounded-full text-theme-body">
                                            <?php echo e($category->questions_count ?? 0); ?>

                                        </span>
                                    </a>
                                    <?php if($category->children->isNotEmpty()): ?>
                                        <ul class="ml-6 divide-y theme-divider border-l theme-divider">
                                            <?php $__currentLoopData = $category->children; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $child): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <li>
                                                    <a href="<?php echo e(route('public.knowledge-base.category', $child->slug)); ?>"
                                                       class="flex items-center justify-between p-2 text-sm hover:bg-theme-body transition">
                                                        <span class="text-theme-body"><?php echo e($child->name); ?></span>
                                                        <span class="text-xs text-gray-400"><?php echo e($child->questions_count ?? 0); ?></span>
                                                    </a>
                                                </li>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </ul>
                                    <?php endif; ?>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <li class="p-4 text-center text-theme-body text-sm">No categories available</li>
                            <?php endif; ?>
                        </ul>
                    </div>

                    
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-base font-semibold text-theme-heading mb-3 flex items-center">
                            <i class="fas fa-signal text-blue-600 mr-2"></i> Difficulty
                        </h3>
                        <div class="space-y-1">
                            <?php $__currentLoopData = ['beginner' => ['bg-green-500','green'], 'intermediate' => ['bg-yellow-500','yellow'], 'advanced' => ['bg-red-500','red']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level => [$dot, $color]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a href="<?php echo e(route('public.knowledge-base.index', ['difficulty' => $level])); ?>"
                                   class="flex items-center p-2 rounded-lg hover:bg-theme-body transition text-sm <?php echo e(request('difficulty') === $level ? "bg-{$color}-50 text-{$color}-700 font-semibold" : ''); ?>">
                                    <span class="w-2.5 h-2.5 rounded-full <?php echo e($dot); ?> mr-2"></span>
                                    <?php echo e(ucfirst($level)); ?>

                                </a>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="lg:col-span-2 order-1 lg:order-2">

                <?php if($featuredQuestions->isNotEmpty() && !request()->has('q')): ?>
                    <div class="mb-6">
                        <h2 class="text-base font-semibold text-theme-heading mb-3 flex items-center">
                            <i class="fas fa-star text-yellow-500 mr-2"></i> Featured Questions
                        </h2>
                        <div class="space-y-3">
                            <?php $__currentLoopData = $featuredQuestions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $question): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php echo $__env->make('public.knowledge-base.partials.question-card', ['question' => $question, 'featured' => true], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                <?php endif; ?>

                
                <div class="bg-theme-card rounded-2xl shadow-sm mb-5 p-3">
                    <div class="flex flex-wrap gap-2">
                        <?php $__currentLoopData = ['recent' => ['fa-clock','Recent'], 'popular' => ['fa-fire','Popular'], 'helpful' => ['fa-thumbs-up','Most Helpful'], 'unanswered' => ['fa-question','Unanswered']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => [$icon, $label]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <a href="<?php echo e(route('public.knowledge-base.index', ['sort' => $key])); ?>"
                               class="px-4 py-2 rounded-xl text-sm font-medium transition <?php echo e(request('sort', 'recent') === $key ? 'bg-blue-600 text-white shadow' : 'bg-theme-body text-theme-body hover:bg-opacity-80'); ?>">
                                <i class="fas <?php echo e($icon); ?> mr-1.5"></i><?php echo e($label); ?>

                            </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>

                
                <div class="space-y-4">
                    <?php $__empty_1 = true; $__currentLoopData = $questions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $question): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php echo $__env->make('public.knowledge-base.partials.question-card', ['question' => $question], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="bg-theme-card rounded-2xl shadow-sm p-10 text-center">
                            <i class="fas fa-book text-5xl text-gray-200 mb-4"></i>
                            <h3 class="text-base font-semibold text-theme-heading mb-2">No questions found</h3>
                            <p class="text-theme-body text-sm mb-4">
                                <?php if(request('q')): ?>
                                    No questions match your search. Try different keywords.
                                <?php elseif(request('category_slug')): ?>
                                    No questions in this category yet.
                                <?php else: ?>
                                    Be the first to add a question!
                                <?php endif; ?>
                            </p>
                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('create knowledge base questions')): ?>
                                <a href="<?php echo e(route('knowledge-sharing.knowledge-base.create')); ?>"
                                   class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition text-sm font-semibold">
                                    <i class="fas fa-plus mr-2"></i> Add Question
                                </a>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </div>

                <?php if($questions->hasPages()): ?>
                    <div class="mt-6"><?php echo e($questions->links()); ?></div>
                <?php endif; ?>
            </div>

            
            <div class="lg:col-span-1 order-3">
                <div class="sticky top-4 space-y-6">

                    
                    <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-4 py-3">
                            <h3 class="text-base font-semibold text-white flex items-center">
                                <i class="fas fa-fire mr-2"></i> Popular Questions
                            </h3>
                        </div>
                        <ul class="divide-y theme-divider">
                            <?php $__currentLoopData = $popularQuestions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $question): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <a href="<?php echo e(route('public.knowledge-base.show', $question->slug)); ?>"
                                       class="block p-3 hover:bg-theme-body transition">
                                        <h4 class="text-sm font-medium text-theme-heading line-clamp-2 mb-1"><?php echo e($question->title); ?></h4>
                                        <div class="flex items-center text-xs text-theme-body gap-3">
                                            <span><i class="fas fa-eye mr-1"></i><?php echo e(number_format($question->view_count)); ?></span>
                                            <span><i class="fas fa-thumbs-up mr-1"></i><?php echo e($question->helpful_count); ?></span>
                                        </div>
                                    </a>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>

                    
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-base font-semibold text-theme-heading mb-3 flex items-center">
                            <i class="fas fa-tags text-blue-600 mr-2"></i> Popular Tags
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            <?php $__currentLoopData = $tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag => $count): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php if($count > 0): ?>
                                    <a href="<?php echo e(route('public.knowledge-base.tag', $tag)); ?>"
                                       class="px-3 py-1 bg-theme-body text-theme-body rounded-full text-xs hover:bg-blue-100 hover:text-blue-700 transition">
                                        <?php echo e($tag); ?> <span class="text-gray-400 ml-0.5"><?php echo e($count); ?></span>
                                    </a>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>

                    
                    <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                        <h3 class="text-base font-semibold text-theme-heading mb-3 flex items-center">
                            <i class="fas fa-chart-bar text-blue-600 mr-2"></i> Quick Stats
                        </h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body">Questions this week</span>
                                <span class="font-semibold text-theme-heading"><?php echo e($statistics['recent_questions'] ?? 0); ?></span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body">Accepted answers</span>
                                <span class="font-semibold text-theme-heading"><?php echo e($statistics['accepted_answers'] ?? 0); ?></span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-theme-body">Featured content</span>
                                <span class="font-semibold text-theme-heading"><?php echo e($statistics['featured_questions'] ?? 0); ?></span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

 <?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 /**PATH /home/www/sshia.org/sshia/resources/views/public/knowledge-base/index.blade.php ENDPATH**/ ?>