{{--
    Public Knowledge Base Category Page
    =====================================
    Features:
    - Branded hero header with category icon
    - Inline stat tabs
    - Real-time search (Alpine.js, 2+ chars)
    - Real-time sort filter (auto-submit on change)
    - RBAC guards on action buttons
    - Inward-styled divider
    Layout: Site Layout (public)
--}}
<x-site-layout
    title="{{ $seoMetadata['title'] ?? $category->name . ' - Knowledge Base' }}"
    meta-description="{{ $seoMetadata['description'] ?? $category->seo_description }}"
>
    @if(isset($breadcrumbSchema))
        <script type="application/ld+json">{!! json_encode($breadcrumbSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
    @endif

    {{-- ===== BRANDED HERO HEADER ===== --}}
    <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-20 -left-20 w-80 h-80 bg-blue-500 opacity-10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -right-20 w-80 h-80 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-10">

            {{-- Breadcrumb inside hero --}}
            <nav class="flex items-center space-x-2 text-sm text-blue-300 mb-5" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-white transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-blue-500 text-xs"></i>
                <a href="{{ route('public.knowledge-base.index') }}" class="hover:text-white transition">Knowledge Base</a>
                @if($category->parent)
                    <i class="fas fa-chevron-right text-blue-500 text-xs"></i>
                    <a href="{{ route('public.knowledge-base.category', $category->parent->slug) }}" class="hover:text-white transition">{{ $category->parent->name }}</a>
                @endif
                <i class="fas fa-chevron-right text-blue-500 text-xs"></i>
                <span class="text-white font-medium">{{ $category->name }}</span>
            </nav>

            {{-- Category header --}}
            <div class="flex items-start gap-5">
                <div class="flex-shrink-0 w-16 h-16 rounded-2xl bg-white bg-opacity-15 border border-white border-opacity-20 flex items-center justify-center shadow-lg">
                    <i class="fas {{ $category->icon ?? 'fa-folder' }} text-white text-2xl"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <h1 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight">{{ $category->name }}</h1>
                    @if($category->description)
                        <p class="text-blue-200 mt-2 text-sm md:text-base leading-relaxed max-w-3xl">{{ $category->description }}</p>
                    @endif

                    {{-- Inline stat tabs --}}
                    <div class="flex flex-wrap gap-2 mt-5">
                        <div class="flex items-center gap-2 bg-white bg-opacity-15 border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                            <i class="fas fa-question-circle text-blue-200 text-sm"></i>
                            <span class="text-lg font-extrabold leading-none">{{ number_format($category->published_questions_count ?? $questions->total()) }}</span>
                            <span class="text-blue-200 text-xs">Questions</span>
                        </div>
                        @if($category->children->isNotEmpty())
                            <div class="flex items-center gap-2 bg-white bg-opacity-15 border border-white border-opacity-20 rounded-xl px-4 py-2 text-white">
                                <i class="fas fa-folder-open text-purple-200 text-sm"></i>
                                <span class="text-lg font-extrabold leading-none">{{ $category->children->count() }}</span>
                                <span class="text-purple-200 text-xs">Subcategories</span>
                            </div>
                        @endif
                        @if($category->parent)
                            <a href="{{ route('public.knowledge-base.category', $category->parent->slug) }}"
                               class="flex items-center gap-2 bg-white bg-opacity-15 border border-white border-opacity-20 rounded-xl px-4 py-2 text-white hover:bg-opacity-25 transition text-xs">
                                <i class="fas fa-level-up-alt text-blue-200"></i>
                                Under {{ $category->parent->name }}
                            </a>
                        @endif
                        @auth
                            @can('create knowledge base questions')
                            <a href="{{ route('knowledge-sharing.knowledge-base.create', ['category_id' => $category->id]) }}"
                               class="flex items-center gap-2 bg-white text-blue-800 rounded-xl px-4 py-2 text-sm font-semibold hover:bg-blue-50 transition shadow">
                                <i class="fas fa-plus text-sm"></i>Add Question
                            </a>
                            @endcan
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Breadcrumb bar --}}
    <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="{{ 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>
                <a href="{{ route('public.knowledge-base.index') }}" class="hover:text-blue-600 transition">Knowledge Base</a>
                @if($category->parent)
                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    <a href="{{ route('public.knowledge-base.category', $category->parent->slug) }}" class="hover:text-blue-600 transition">{{ $category->parent->name }}</a>
                @endif
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">{{ $category->name }}</span>
            </nav>
        </div>
    </div>

    {{-- Main Content --}}
    <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">

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

                    {{-- Subcategories --}}
                    @if($category->children->isNotEmpty())
                        <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                            <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-3">
                                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                                    <i class="fas fa-folder-open"></i>Subcategories
                                </h3>
                            </div>
                            <ul class="divide-y divide-gray-100">
                                @foreach($category->children as $child)
                                    <li>
                                        <a href="{{ route('public.knowledge-base.category', $child->slug) }}"
                                           class="flex items-center justify-between p-3 hover:bg-theme-body transition">
                                            <span class="flex items-center gap-2 text-sm text-theme-body">
                                                <i class="fas {{ $child->icon ?? 'fa-folder' }} {{ $child->color ? "text-{$child->color}-500" : 'text-blue-500' }} text-xs w-4"></i>
                                                {{ $child->name }}
                                            </span>
                                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                                {{ $child->published_questions_count ?? 0 }}
                                            </span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- Difficulty Filter --}}
                    <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 gap-2">
                            <i class="fas fa-signal text-blue-600"></i>Difficulty
                        </h3>
                        <div class="space-y-1">
                            @foreach(['beginner' => ['bg-green-500','green'], 'intermediate' => ['bg-yellow-500','yellow'], 'advanced' => ['bg-red-500','red']] as $level => [$dot, $color])
                                <a href="{{ route('public.knowledge-base.category', [$category->slug, 'difficulty' => $level]) }}"
                                   class="flex items-center p-2 rounded-lg hover:bg-theme-body transition text-sm {{ request('difficulty') === $level ? "bg-{$color}-50 text-{$color}-700 font-semibold" : 'text-theme-body' }}">
                                    <span class="w-2.5 h-2.5 rounded-full {{ $dot }} mr-2"></span>
                                    {{ ucfirst($level) }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>

            {{-- Main Content --}}
            <div class="lg:col-span-2 order-1 lg:order-2">

                {{-- Real-time search + filter bar --}}
                <div class="bg-theme-card rounded-2xl shadow-sm p-5 mb-6"
                     x-data="categorySearch()"
                     @click.outside="showDropdown = false">

                    {{-- Real-time search --}}
                    <div class="relative mb-4">
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm z-10"></i>
                        <input
                            type="text"
                            x-model="query"
                            @input.debounce.300ms="search()"
                            @focus="query.length >= 2 && (showDropdown = true)"
                            @keydown.escape="showDropdown = false"
                            placeholder="Search in {{ $category->name }}…"
                            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-blue-500 focus:border-transparent text-sm"
                        >
                        <div x-show="loading" class="absolute right-4 top-1/2 -translate-y-1/2">
                            <i class="fas fa-spinner fa-spin text-blue-500 text-sm"></i>
                        </div>

                        {{-- Dropdown --}}
                        <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-72 overflow-y-auto divide-y divide-gray-50">
                                    <template x-for="r in results" :key="r.url">
                                        <a :href="r.url" class="flex items-start gap-3 px-4 py-3 hover:bg-blue-50 transition group">
                                            <div class="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                                                <i class="fas fa-question text-blue-600 text-xs"></i>
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-semibold text-gray-800 truncate" x-text="r.title"></p>
                                                <p class="text-xs text-gray-500 line-clamp-1 mt-0.5" x-text="r.excerpt"></p>
                                            </div>
                                        </a>
                                    </template>
                                </div>
                            </template>
                            <template x-if="results.length === 0 && query.length >= 2 && !loading">
                                <div class="px-4 py-5 text-center text-sm text-gray-500">
                                    No results for "<span x-text="query" class="font-medium text-gray-700"></span>"
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Sort filter (auto-submit) --}}
                    <form method="GET" id="catFilterForm" class="flex gap-3">
                        <input type="hidden" name="difficulty" value="{{ request('difficulty') }}">
                        <select name="sort"
                                onchange="document.getElementById('catFilterForm').submit()"
                                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-blue-500">
                            <option value="recent" {{ request('sort', 'recent') === 'recent' ? 'selected' : '' }}>Recent</option>
                            <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Popular</option>
                            <option value="helpful" {{ request('sort') === 'helpful' ? 'selected' : '' }}>Most Helpful</option>
                        </select>
                        <button type="submit"
                                class="px-5 py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-xl hover:bg-blue-700 transition">
                            <i class="fas fa-filter mr-1.5"></i>Filter
                        </button>
                    </form>
                </div>

                {{-- Inward divider --}}
                <div class="relative mb-5">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t-2 border-gray-200" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);"></div>
                    </div>
                    <div class="relative flex justify-center">
                        <span class="bg-gray-50 px-4 py-1 text-xs font-semibold text-gray-400 uppercase tracking-widest rounded-full border border-gray-200 shadow-inner">
                            {{ $questions->total() }} Question{{ $questions->total() !== 1 ? 's' : '' }}
                        </span>
                    </div>
                </div>

                {{-- Questions List --}}
                <div class="space-y-4">
                    @forelse($questions as $question)
                        @include('public.knowledge-base.partials.question-card', ['question' => $question])
                    @empty
                        <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 block"></i>
                            <h3 class="text-base font-semibold text-theme-heading mb-2">No questions in this category</h3>
                            <p class="text-theme-body text-sm mb-4">
                                @if(request('q'))
                                    No questions match your search.
                                @else
                                    No questions have been added to this category yet.
                                @endif
                            </p>
                            @auth
                                @can('create knowledge base questions')
                                <a href="{{ route('knowledge-sharing.knowledge-base.create', ['category_id' => $category->id]) }}"
                                   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>
                                @endcan
                            @endauth
                        </div>
                    @endforelse
                </div>

                @if($questions->hasPages())
                    <div class="mt-6">{{ $questions->links() }}</div>
                @endif
            </div>

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

                    {{-- All Categories --}}
                    <div class="bg-theme-card rounded-2xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-3">
                            <h3 class="text-sm font-bold text-white flex items-center gap-2">
                                <i class="fas fa-folder"></i>All Categories
                            </h3>
                        </div>
                        <ul class="divide-y divide-gray-100 max-h-64 overflow-y-auto">
                            @foreach($categories as $cat)
                                <li>
                                    <a href="{{ route('public.knowledge-base.category', $cat->slug) }}"
                                       class="flex items-center justify-between p-3 hover:bg-theme-body transition {{ $category->id === $cat->id ? 'bg-blue-50 border-l-4 border-blue-600' : '' }}">
                                        <span class="flex items-center gap-2 text-xs text-theme-body">
                                            <i class="fas {{ $cat->icon ?? 'fa-folder' }} {{ $cat->color ? "text-{$cat->color}-500" : 'text-blue-500' }} w-4"></i>
                                            {{ $cat->name }}
                                        </span>
                                        <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                            {{ $cat->published_questions_count ?? 0 }}
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    {{-- Popular Tags --}}
                    <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 gap-2">
                            <i class="fas fa-tags text-blue-600"></i>Popular Tags
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($tags as $tag => $count)
                                @if($count > 0)
                                    <a href="{{ 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">
                                        {{ $tag }} <span class="text-gray-400 ml-0.5">{{ $count }}</span>
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>

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

    @push('scripts')
    <script>
    function categorySearch() {
        return {
            query: '{{ request('q', '') }}',
            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(
                        `{{ route('public.knowledge-base.ajax-search') }}?q=${encodeURIComponent(this.query)}&category_id={{ $category->id }}`,
                        { headers: { 'Accept': 'application/json' } }
                    );
                    const data = await res.json();
                    this.results = data.results ?? [];
                } catch(e) {
                    this.results = [];
                } finally {
                    this.loading = false;
                }
            }
        };
    }
    </script>
    @endpush

</x-site-layout>
