
<?php if (isset($component)) { $__componentOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalf2a1b2b34b0a376d40858ac9c2a946a5 = $attributes; } ?>
<?php $component = App\View\Components\SiteLayout::resolve(['title' => ''.e($seoMetadata['title'] ?? 'Community Discussion Boards').'','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="relative bg-gradient-to-br from-teal-700 via-green-700 to-emerald-800 overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-white opacity-5 rounded-full"></div>
        <div class="absolute -bottom-16 -left-16 w-72 h-72 bg-white opacity-5 rounded-full"></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-6 md:mb-0">
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
                    <i class="fas fa-comments text-white text-3xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight">
                        Community Discussions
                    </h1>
                    <p class="text-teal-100 mt-1 text-base md:text-lg">
                        Ask questions, share knowledge, and connect with the community
                    </p>
                </div>
            </div>
            <?php if(auth()->guard()->check()): ?>
                <a href="<?php echo e(route('knowledge-sharing.discussions.create')); ?>"
                   class="inline-flex items-center px-6 py-3 bg-white text-teal-700 font-semibold rounded-xl hover:bg-teal-50 transition shadow-lg">
                    <i class="fas fa-plus mr-2"></i>Start a Discussion
                </a>
            <?php else: ?>
                <div class="flex flex-col sm:flex-row gap-3">
                    <a href="<?php echo e(route('register.role.contributor')); ?>"
                       class="inline-flex items-center justify-center px-6 py-3 bg-white text-teal-700 font-bold rounded-xl hover:bg-teal-50 transition shadow-lg">
                        <i class="fas fa-user-plus mr-2"></i>Register to Post
                    </a>
                    <a href="<?php echo e(route('public.contributor.login')); ?>"
                       class="inline-flex items-center justify-center px-6 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-xl hover:bg-white hover:bg-opacity-10 transition">
                        <i class="fas fa-sign-in-alt mr-2"></i>Sign In
                    </a>
                </div>
            <?php endif; ?>
        </div>

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

            <div class="relative bg-gradient-to-br from-cyan-500 to-teal-600 rounded-2xl p-5 shadow-lg overflow-hidden">
                <div class="absolute -top-4 -right-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-cyan-100 text-xs font-semibold uppercase tracking-wider mb-1">Total Discussions</p>
                        <p class="text-white text-3xl font-extrabold leading-none"><?php echo e(number_format($statistics['total_discussions'] ?? 0)); ?></p>
                    </div>
                    <div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-comments text-white text-lg"></i>
                    </div>
                </div>
                <p class="text-cyan-200 text-xs mt-3">
                    <i class="fas fa-arrow-up mr-1"></i><?php echo e(number_format($statistics['recent_discussions'] ?? 0)); ?> this week
                </p>
            </div>

            <div class="relative bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl p-5 shadow-lg overflow-hidden">
                <div class="absolute -top-4 -right-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-emerald-100 text-xs font-semibold uppercase tracking-wider mb-1">Active Topics</p>
                        <p class="text-white text-3xl font-extrabold leading-none"><?php echo e(number_format($statistics['total_topics'] ?? 0)); ?></p>
                    </div>
                    <div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-layer-group text-white text-lg"></i>
                    </div>
                </div>
                <p class="text-emerald-200 text-xs mt-3">
                    <i class="fas fa-folder-open mr-1"></i>Across all categories
                </p>
            </div>

            <div class="relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-5 shadow-lg overflow-hidden">
                <div class="absolute -top-4 -right-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-violet-100 text-xs font-semibold uppercase tracking-wider mb-1">Total Replies</p>
                        <p class="text-white text-3xl font-extrabold leading-none"><?php echo e(number_format($statistics['total_replies'] ?? 0)); ?></p>
                    </div>
                    <div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-reply-all text-white text-lg"></i>
                    </div>
                </div>
                <p class="text-violet-200 text-xs mt-3">
                    <i class="fas fa-comment-dots mr-1"></i>Community responses
                </p>
            </div>

            <div class="relative bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl p-5 shadow-lg overflow-hidden">
                <div class="absolute -top-4 -right-4 w-20 h-20 bg-white opacity-10 rounded-full"></div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-amber-100 text-xs font-semibold uppercase tracking-wider mb-1">Community Members</p>
                        <p class="text-white text-3xl font-extrabold leading-none"><?php echo e(number_format($statistics['total_contributors'] ?? 0)); ?></p>
                    </div>
                    <div class="w-10 h-10 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-users text-white text-lg"></i>
                    </div>
                </div>
                <p class="text-amber-200 text-xs mt-3">
                    <i class="fas fa-user-check mr-1"></i>Active contributors
                </p>
            </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-teal-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">Community Discussions</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-3">

            
            <div class="bg-theme-card rounded-2xl shadow-sm p-5 mb-6">

                
                <div x-data="discussionSearch()" class="relative mb-4">
                    <div class="relative">
                        <input
                            type="text"
                            x-model="query"
                            @input.debounce.300ms="search()"
                            @focus="query.length >= 2 && (showDropdown = true)"
                            @click.outside="showDropdown = false"
                            @keydown.escape="showDropdown = false"
                            placeholder="Search discussions in real-time..."
                            class="w-full pl-11 pr-10 py-3 border border-gray-200 rounded-xl bg-theme-body text-theme-body focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm"
                        >
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                        <div x-show="loading" class="absolute right-4 top-1/2 -translate-y-1/2">
                            <i class="fas fa-spinner fa-spin text-teal-500 text-sm"></i>
                        </div>
                    </div>

                    
                    <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-xl shadow-2xl border border-gray-100 mt-2 overflow-hidden"
                        style="display:none"
                    >
                        <template x-if="results.length > 0">
                            <div class="max-h-80 overflow-y-auto divide-y divide-gray-50">
                                <template x-for="result in results" :key="result.url">
                                    <a :href="result.url"
                                       class="flex items-start gap-3 px-4 py-3 hover:bg-teal-50 transition group">
                                        <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-teal-200 transition">
                                            <i class="fas fa-comments text-teal-600 text-xs"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-semibold text-gray-800 truncate" x-text="result.title"></p>
                                            <div class="flex items-center gap-3 mt-0.5">
                                                <span class="text-xs text-teal-600 font-medium" x-text="result.topic"></span>
                                                <span class="text-xs text-gray-400">
                                                    <i class="fas fa-comment mr-1"></i>
                                                    <span x-text="result.reply_count"></span> replies
                                                </span>
                                            </div>
                                        </div>
                                        <i class="fas fa-arrow-right text-gray-300 group-hover:text-teal-500 transition text-xs mt-1 flex-shrink-0"></i>
                                    </a>
                                </template>
                            </div>
                        </template>
                        <template x-if="results.length === 0 && query.length >= 2 && !loading">
                            <div class="px-4 py-6 text-center">
                                <i class="fas fa-search text-gray-300 text-2xl mb-2 block"></i>
                                <p class="text-sm text-gray-500">No results found for "<span x-text="query" class="font-medium text-gray-700"></span>"</p>
                                <p class="text-xs text-gray-400 mt-1">Try different keywords</p>
                            </div>
                        </template>
                    </div>
                </div>

                
                <form method="GET" action="<?php echo e(route('public.discussions.index')); ?>" class="flex flex-col sm:flex-row gap-3">
                    <select name="topic"
                            class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl bg-theme-body text-theme-body text-sm focus:ring-2 focus:ring-teal-500">
                        <option value="">All Topics</option>
                        <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($topic->id); ?>" <?php echo e(request('topic') == $topic->id ? 'selected' : ''); ?>>
                                <?php echo e($topic->name); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                    <select name="sort"
                            class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl bg-theme-body text-theme-body text-sm focus:ring-2 focus:ring-teal-500">
                        <option value="latest" <?php echo e(request('sort') === 'latest' ? 'selected' : ''); ?>>Latest</option>
                        <option value="popular" <?php echo e(request('sort') === 'popular' ? 'selected' : ''); ?>>Most Popular</option>
                        <option value="active" <?php echo e(request('sort') === 'active' ? 'selected' : ''); ?>>Most Active</option>
                    </select>
                    <button type="submit"
                            class="px-5 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition whitespace-nowrap">
                        <i class="fas fa-filter mr-1.5"></i>Filter
                    </button>
                </form>
            </div>

            
            <?php if($featuredDiscussions->isNotEmpty() && !request()->has('q')): ?>
                <div class="mb-6">
                    <h2 class="text-base font-bold text-theme-heading mb-3 flex items-center">
                        <span class="w-6 h-6 bg-yellow-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-star text-yellow-500 text-xs"></i>
                        </span>
                        Featured Discussions
                    </h2>
                    <div class="grid gap-4">
                        <?php $__currentLoopData = $featuredDiscussions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $discussion): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php echo $__env->make('public.discussions.partials.discussion-card', ['discussion' => $discussion, '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="space-y-4">
                <?php $__empty_1 = true; $__currentLoopData = $discussions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $discussion): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php echo $__env->make('public.discussions.partials.discussion-card', ['discussion' => $discussion], 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">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-comments text-gray-300 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-theme-heading mb-2">No discussions found</h3>
                        <p class="text-theme-body text-sm mb-5">
                            <?php if(request('q')): ?>
                                No discussions match your search. Try different keywords.
                            <?php else: ?>
                                Be the first to start a discussion in this community!
                            <?php endif; ?>
                        </p>
                        <?php if(auth()->guard()->check()): ?>
                            <a href="<?php echo e(route('knowledge-sharing.discussions.create')); ?>"
                               class="inline-flex items-center px-5 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition">
                                <i class="fas fa-plus mr-2"></i>Start a Discussion
                            </a>
                        <?php else: ?>
                            <a href="<?php echo e(route('register.role.contributor')); ?>"
                               class="inline-flex items-center px-5 py-2.5 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition">
                                <i class="fas fa-user-plus mr-2"></i>Register to Post
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>

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

        
        <div class="lg:col-span-1 space-y-5">

            
            <?php if(auth()->guard()->guest()): ?>
                <div class="bg-gradient-to-br from-teal-600 to-emerald-700 rounded-2xl p-6 text-white shadow-lg">
                    <div class="text-center">
                        <div class="w-14 h-14 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-user-plus text-2xl"></i>
                        </div>
                        <h3 class="text-base font-bold mb-2">Join the Community</h3>
                        <p class="text-teal-100 text-xs mb-4 leading-relaxed">
                            Create your contributor account and start sharing your knowledge today!
                        </p>
                        <a href="<?php echo e(route('register.role.contributor')); ?>"
                           class="block w-full py-2.5 bg-white text-teal-700 text-sm font-bold rounded-xl hover:bg-teal-50 transition mb-3">
                            Register to Post
                        </a>
                        <p class="text-xs text-teal-200">
                            Already have an account?
                            <a href="<?php echo e(route('public.contributor.login')); ?>" class="underline hover:text-white font-medium">Sign in</a>
                        </p>
                    </div>
                </div>
            <?php endif; ?>

            
            <?php if(auth()->guard()->check()): ?>
                <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                    <h3 class="text-sm font-bold text-theme-heading mb-3 flex items-center">
                        <i class="fas fa-bolt text-yellow-500 mr-2"></i>Quick Actions
                    </h3>
                    <div class="space-y-2">
                        <a href="<?php echo e(route('knowledge-sharing.discussions.create')); ?>"
                           class="flex items-center p-3 rounded-xl bg-teal-50 text-teal-700 hover:bg-teal-100 transition text-sm font-medium">
                            <i class="fas fa-plus mr-3 text-teal-500"></i>Start a Discussion
                        </a>
                        <?php if(auth()->user()->hasRole('Contributor') && !auth()->user()->hasAnyRole(['Super Manager', 'Manager'])): ?>
                            <a href="<?php echo e(route('contributor.dashboard')); ?>"
                               class="flex items-center p-3 rounded-xl hover:bg-theme-body transition text-theme-body text-sm">
                                <i class="fas fa-tachometer-alt mr-3 text-gray-400"></i>My Dashboard
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>

            
            <div class="bg-theme-card rounded-2xl shadow-sm p-4">
                <h3 class="text-sm font-bold text-theme-heading mb-3 flex items-center">
                    <i class="fas fa-layer-group text-teal-600 mr-2"></i>Browse Topics
                </h3>
                <ul class="space-y-1">
                    <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li>
                            <a href="<?php echo e(route('public.discussions.topic', $topic->slug)); ?>"
                               class="flex items-center justify-between px-3 py-2 rounded-xl hover:bg-teal-50 transition text-sm <?php echo e(request('topic_slug') === $topic->slug ? 'bg-teal-50 text-teal-700 font-medium' : 'text-theme-body'); ?>">
                                <span class="flex items-center">
                                    <i class="fas <?php echo e($topic->icon ?? 'fa-folder'); ?> <?php echo e($topic->color ? "text-{$topic->color}-500" : 'text-gray-400'); ?> mr-2 text-xs w-4"></i>
                                    <?php echo e($topic->name); ?>

                                </span>
                                <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    <?php echo e($topic->discussions_count ?? 0); ?>

                                </span>
                            </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-sm font-bold text-theme-heading mb-3 flex items-center">
                    <i class="fas fa-fire text-orange-500 mr-2"></i>Popular Discussions
                </h3>
                <ul class="space-y-3">
                    <?php $__currentLoopData = $popularDiscussions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $discussion): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li>
                            <a href="<?php echo e(route('public.discussions.show', $discussion->slug)); ?>"
                               class="block p-2 rounded-xl hover:bg-theme-body transition">
                                <h4 class="text-xs font-semibold text-theme-heading line-clamp-2 mb-1"><?php echo e($discussion->title); ?></h4>
                                <div class="flex items-center gap-3 text-xs text-gray-400">
                                    <span><i class="fas fa-eye mr-1"></i><?php echo e(number_format($discussion->view_count)); ?></span>
                                    <span><i class="fas fa-comment mr-1"></i><?php echo e($discussion->reply_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-sm font-bold text-theme-heading mb-3 flex items-center">
                    <i class="fas fa-clock text-blue-500 mr-2"></i>Recent Activity
                </h3>
                <div class="space-y-3">
                    <?php
                        $recentDiscussions = \App\Models\Discussion::with('user')
                            ->published()
                            ->latest()
                            ->limit(5)
                            ->get();
                    ?>
                    <?php $__currentLoopData = $recentDiscussions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $recent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="flex items-start gap-2">
                            <img src="<?php echo e($recent->user->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($recent->user->name) . '&size=32'); ?>"
                                 alt="<?php echo e($recent->user->name); ?>"
                                 class="w-7 h-7 rounded-full flex-shrink-0">
                            <div class="min-w-0">
                                <p class="text-xs text-theme-body leading-snug">
                                    <span class="font-semibold text-theme-heading"><?php echo e($recent->user->name); ?></span>
                                    started a discussion
                                </p>
                                <p class="text-xs text-gray-400 mt-0.5"><?php echo e($recent->created_at->diffForHumans()); ?></p>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

        </div>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function discussionSearch() {
    return {
        query: '',
        results: [],
        showDropdown: false,
        loading: false,
        async search() {
            if (this.query.length < 2) {
                this.results = [];
                this.showDropdown = false;
                return;
            }
            this.loading = true;
            this.showDropdown = true;
            try {
                const res = await fetch(
                    `<?php echo e(route('public.discussions.ajax-search')); ?>?q=${encodeURIComponent(this.query)}`,
                    { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } }
                );
                const data = await res.json();
                this.results = data.results ?? [];
            } catch (e) {
                this.results = [];
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
<?php $__env->stopPush(); ?>

 <?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/discussions/index.blade.php ENDPATH**/ ?>