@extends("layouts.app")

@section('title', 'Knowledge Base')

@section('content')
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <!-- Page pre-title -->

                <h2 class="page-title">
                    Knowledge Base
                </h2>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-4 mb">
            <div class="card">
                <div class="card-body">

                    <div id="accordion">
                        @foreach($categories as $category)
                            <div class="card">
                                <div class="card-header" id="category{{ $category->id }}">
                                    <h5 class="mb-0 w-100">
                                        <button class="btn btn-link w-100" data-toggle="collapse" data-target="#collapseCategory{{ $category->id }}" aria-expanded="true" aria-controls="collapseCategory{{ $category->id }}">
                                            {{ $category->title }}
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapseCategory{{ $category->id }}" class="collapse {{ $loop->first ? 'show' : '' }}" aria-labelledby="category{{ $category->id }}" data-parent="#accordion">
                                    <div class="card-body">
                                        @foreach($category->subCategories as $subCat)
                                            <div class="mb">
                                                <a href="javascript:void(0)" onclick="updateFilter('{{ $subCat->id }}')" class="ml-1">
                                                    {{ $subCat->title }}
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

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

        <div class="col-md-8 mb">
            <div class="card mb">
                <div class="card-body">
                    <form method="get" id="searchForm">
                        <div class="row g-2">
                            <div class="col">
                                <input type="text" class="form-control" placeholder="Search articles" name="keyword" value="{{ request()->keyword }}">
                                <input type="hidden" name="subCategory" id="subCategory" value="">
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-white btn-icon" aria-label="Button">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="10" cy="10" r="7"></circle><line x1="21" y1="21" x2="15" y2="15"></line></svg>
                                </button>
                                <a href="{{ route('panel.knowledge-base') }}" title="Reset Filter" class="btn btn-danger btn-icon" aria-label="Button">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /><line x1="12" y1="9" x2="12" y2="12" /><line x1="12" y1="15" x2="12.01" y2="15" /></svg>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
            @forelse($articles as $article)
                <div class="col-md-6">
                    <a class="card card-link mb" href="{{ route('panel.article.view', $article->id) }}">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div class="font-weight-medium">{{ $article->title }}</div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                <h3 class="text-center d-block text-muted">No Articles Found!</h3>
            @endforelse
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script !src="">
        function updateFilter(id){
            $('#subCategory').val(id);
            $('#searchForm').submit();
        }
    </script>
@endpush