@extends('frontend3')

@section('content')
    <div id="siteContent" class="site-content">
        <div class="itr-blog-page-header">
            <div class="container">
                <div class="ht-wrapper flex-ai-center">
                    @if(empty($q) && empty($category))
                        <div class="flex-item flex-item-dw">
                            <h1 class="itr-page-header__title">Blog</h1>
                            <div class="itr-page-header__subtitle">Tin tức và cập nhật mới nhất về itro</div>
                        </div>
                    @elseif(!empty($category))

                        <div class="flex-item flex-item-dw">
                            <h1 class="itr-page-header__title">{{ $category->name }}</h1>
                        </div>
                    @else
                        <div class="flex-item flex-item-dw">
                            <h1 class="itr-page-header__title">Kết quả tìm kiếm cho "{{ $q }}"</h1>
                        </div>
                    @endif
                    <div class="flex-item flex-item-tw">
                        <form action="{{ url('blog/tim-kiem') }}">
                            <div class="form-group maxw-240 mb-0">
                                <label class="sr-only">Tìm kiếm bài viết</label>
                                <div class="input-group">
                                    <input type="text" class="form-control form-control-sm fz-13" name="q"
                                           placeholder="Tìm kiếm bài viết">
                                    <span class="input-group-btn">
							        <button class="btn ht-btn-primary btn-sm" type="button"><i
                                                class="ion-ios-search-strong"></i></button>
							      </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="itr-blog">
            <div class="container">
                @if(!empty($featuredBlogs))
                    <div class="itr-blog__featured-posts">
                        <div id="carouselFeaturedBlogPost" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                @foreach($featuredBlogs as $featuredBlog)
                                    <li data-target="#carouselFeaturedBlogPost" data-slide-to="{{ $loop->index }}"
                                        @if($loop->index == 0) class="active" @endif></li>
                                @endforeach
                            </ol>
                            <!-- Wrapper for slides -->

                            <div class="carousel-inner" role="listbox">
                                @foreach($featuredBlogs as $featuredBlog)
                                    <div class="item  @if($loop->index == 0) active @endif">
                                        <a href="{{ url('blog/' . $featuredBlog->slug) }}"
                                           class="single-featured-post">
                                            <div class="post__photo ht-rectangle ratio-31">
                                                <div class="ht-inner bg-color-grey-200"><img
                                                            src="{{ $featuredBlog->image_url }}" alt=""
                                                            class="ht-img-obj-cover"></div>
                                            </div>
                                            <div class="post__content">
                                                <h3 class="post__content__title">{{ $featuredBlog->title }}</h3>
                                                <div class="post__content__excerpt">{{ \Illuminate\Support\Str::words(strip_tags(html_entity_decode($featuredBlog->content))) }}
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <!-- Controls -->
                            <a class="left ht-carousel-control" href="#carouselFeaturedBlogPost" role="button"
                               data-slide="prev"><i class="ion-ios-arrow-left"></i></a>
                            <a class="right ht-carousel-control" href="#carouselFeaturedBlogPost" role="button"
                               data-slide="next"><i class="ion-ios-arrow-right"></i></a>
                        </div>
                    </div>
                @endif
                <div class="itr-blog__list-posts pb-48 has-mw-on-xs-screen mx-auto">
                    @foreach($blogs->chunk(3) as $chunk)
                        <div class="row">

                            @foreach($chunk as $item)
                                <div class="col-xs-12 col-sm-6 col-md-4">
                                    @include('frontend3.blog_item', compact('item'))
                                </div>
                            @endforeach

                        </div>
                    @endforeach

                    {{--<div class="ht-loading lg-size"></div>--}}
                    <div class="text-center py-24">
                        {!! $blogs->appends(request()->except(['page','_token']))->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection