@extends('layouts.front.app')
@section('title', 'Knowledge')
@section('content')
<!-- Banner Section -->
<section class="bannerSection">
    <div class="container">
        <div class="bannerSection_content text-center">
            <h5 class="h-24">Welcome to Square Knowledge Centre for</h5>
            <h1 class="font-ebd">Blockchain & Crypto</h1>
            <p class="mb-0 mw-100">Learn from basics to advanced topics from a wide variety of content like How-to
                Guides, Expert  
                Articles, Video Recordings, Q&A Sessions and Latest News. We are a one-stop place for all  things
                related to Blockchain & Crypto in particular, and technology as a whole.</p>
            <div class="searchBar">
                <form method="GET" action="{{ route('search-article.searchArticle') }}">
                    <div class="form-group searchBar-group d-flex mb-0">
                        <div class="w-100 position-relative">
                            <input name="q" type="text" class="form-control" placeholder="Search by keyword or title or category...">
                            <button class="btn searchBar-reset position-absolute d-none p-0" type="reset"><em
                                    class="icon-close"></em></button>
                        </div>
                        <button type="submit" class="btn btn-secondary ripple-effect font-sb ms-3"><span
                                class="d-none d-sm-block">Search</span> <em
                                class="icon-search d-block d-sm-none"></em></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<section class="blog">
    <div class="container">
        <div class="customTabs">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link text-center position-relative {{ Request::is('knowledge') ? 'active' : '' }}"
                        href="{{ route('knowledge.index') }}">All</a>
                </li>
                @if (!$categories->isEmpty())
                    @foreach($categories as $category)
                        <li class="nav-item">
                            <a class="nav-link text-center position-relative {{ (!empty($category->id) && $category->id==Request::segment('2')) ? 'active' : ''}}" href="{{ route('get-article.getArticleByCategory', $category->id) }}">
                                {{!empty($category->name)? $category->name : ''}}
                            </a>
                        </li>
                    @endforeach
                @endif
            </ul>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
                <div class="row customRow">
                    @if (!$articleData->isEmpty())
                        @foreach ($articleData as $article)
                            <div class="col-sm-6 col-md-4">
                                <article class="article position-relative">
                                    <div class="article-thumbnail brr-16 position-relative">
                                        <a href="{{ route('knowledge.show', $article->id) }}">
                                       
                                        @php  $imageUrl = getImageUrl($article->article_image, 'article_image'); @endphp
                                        <img class="img-fluid" src="{{ $imageUrl }}" alt="article">

                                        <ul
                                            class="list-unstyled tags position-absolute row row-cols-auto justify-content-end g-1 mb-0 font-sb">
                                            @php 
                                            $articleCategory = getFrontCategoryName($article->articleCategories->pluck('category_id')->toArray(), 3);
                                            @endphp
                                            @if (!$articleCategory->isEmpty())
                                                @foreach ($articleCategory as $artCategory)
                                                    <li class="col"><span class="badge">{!! $artCategory->name !!}</span></li>
                                                @endforeach
                                            @endif
                                            
                                        </ul>
                                        </a>
                                    </div>
                                    <div class="article-body">
                                        
                                            <h3 class="font-sb mb-0">
                                                <a href="{{ route('knowledge.show', $article->id) }}">
                                                @if (!empty($article->title))
                                                    {!! Str::words($article->title, 12, ' ...') !!}    
                                                @endif
                                                </a>
                                            </h3>
                                       
                                            @if (!empty($article->short_description))
                                                <p> {!! (Str::length($article->short_description) > 80) ? substr($article->short_description, 0, 80).'...': $article->short_description !!}</p>
                                            @endif

                                        @if (!empty($article->created_at))
                                            @php $timeAgo = timeAgo(strtotime($article->created_at)); @endphp
                                            <span>{!! $timeAgo !!}</span>
                                        @endif

                                    </div>
                                </article>
                            </div>
                        @endforeach
                    @else
                        {{ __('error.no_record') }}
                    @endif
                </div>
            </div>
            
          
            <div class="commonPagination">
                <nav aria-label="Page navigation">
                    {!! $articleData->links('pagination.default') !!}
                </nav>
            </div>
        </div>
    </div>
</section>

@endsection