@extends('layout')

@section('title', __('store.kb_title'))

@section('content')
<div class="container py-5">
    <h1 class="mb-4">{{ __('store.kb_title') }}</h1>

    <form method="GET" class="mb-4">
        <div class="input-group">
            <input type="search" name="q" id="kb-search" autocomplete="off" class="form-control" placeholder="{{ __('store.kb_search_placeholder') }}" value="{{ $search }}">
            @if ($tagSlug)<input type="hidden" name="tag" value="{{ $tagSlug }}">@endif
            <button class="btn btn-primary"><i class="fas fa-search"></i></button>
        </div>
        
        <div id="kb-suggestions" class="d-none"></div>
    </form>

    @if ($tags->isNotEmpty())
        <div class="mb-4">
            <a href="{{ lroute('knowledgebase.index') }}"
               class="badge bg-secondary text-decoration-none {{ ! $tagSlug ? 'fw-bold' : '' }}">
                {{ __('store.posts_all_tags') }}
            </a>
            @foreach ($tags as $tag)
                <a href="{{ lroute('knowledgebase.index', ['tag' => $tag->slug]) }}"
                   class="badge text-decoration-none {{ $tagSlug === $tag->slug ? 'fw-bold border border-2 border-dark' : '' }}"
                   style="background-color: {{ $tag->color ?? '#6c757d' }}">
                    @if ($tag->icon)<i class="fas {{ $tag->icon }}"></i> @endif
                    {{ $tag->getFirstNonEmptyTranslation('name') }}
                </a>
            @endforeach
        </div>
    @endif

    <div class="row">
        @forelse ($articles as $article)
            <div class="col-md-6 mb-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h5><a href="{{ lroute('knowledgebase.show', $article->getLocaleSlug(app()->getLocale())) }}">{{ $article->getFirstNonEmptyTranslation('title') }}</a></h5>
                        <p class="text-muted small">{{ \Illuminate\Support\Str::limit(
                            $article->getFirstNonEmptyTranslation('excerpt')
                                ?: strip_tags(app(\App\Services\Content\EditorJsRenderer::class)->render(
                                    $article->getTranslation('content', app()->getLocale())
                                )),
                            150
                        ) }}</p>
                        <div class="d-flex justify-content-between align-items-center small text-muted">
                            <span><i class="fas fa-eye"></i> {{ $article->view_count }}</span>
                            <span>
                                <i class="fas fa-thumbs-up text-success"></i> {{ $article->helpful_count }}
                                <i class="fas fa-thumbs-down text-danger ms-2"></i> {{ $article->not_helpful_count }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12"><p class="text-muted">{{ __('store.kb_empty') }}</p></div>
        @endforelse
    </div>

    {{ $articles->withQueryString()->links() }}
</div>
@endsection

@push('scripts')

@if(setting('knowledgebase_suggestions', false))
<script>
window.kbSuggestConfig = {
    url: '{{ route('api.store.kb.suggest') }}',
    inputId: 'kb-search',
    panelId: 'kb-suggestions',
    minChars: 3,
    translations: {
        heading: @json(__('store.kb_suggestions_heading')),
        kb: @json(__('store.ticket_suggestions_kb')),
        announcement: @json(__('store.ticket_suggestions_announcements')),
    }
};
</script>
@vite('resources/js/store/kb-suggest.js')
@endif
@endpush
